update：提交我的设备改版

src/pages/device/my-device.vue

@@ -1,10 +1,15 @@
 <script setup>
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import { onLoad, onShow } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
+import Header from "@/components/Header.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
 import ModalDialog from "@/components/ModalDialog.vue";
-import { laserAimAPI } from "@/apis";
+import {
+  getHardwareBoxVersionAPI,
+  laserAimAPI,
+  updateDeviceAliasAPI,
+} from "@/apis";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 import { useDeviceBinding } from "./composables/useDeviceBinding";
@@ -14,12 +19,13 @@ import {
 } from "./composables/useDeviceStatus";
 
 const store = useStore();
-const { updateDevice, updateOnline, clearDevice } = store;
-const { user, device, online } = storeToRefs(store);
+const { updateDevice, clearDevice } = store;
+const { user, device, deviceStatus, online } = storeToRefs(store);
 
 const formatBindingDate = (value) => {
-  if (!value) return "2026/12/13";
+  if (!value) return "--";
   const text = String(value).trim();
+  if (!text) return "--";
   const dateParts = text.match(/^(\d{4})[-/.](\d{1,2})[-/.](\d{1,2})/);
   if (dateParts) {
     return `${dateParts[1]}/${dateParts[2].padStart(2, "0")}/${dateParts[3].padStart(2, "0")}`;
@@ -32,7 +38,7 @@ const formatBindingDate = (value) => {
         : numericValue
       : value
   );
-  if (Number.isNaN(date.getTime())) return text;
+  if (Number.isNaN(date.getTime())) return "--";
   return `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, "0")}/${String(
     date.getDate()
   ).padStart(2, "0")}`;
@@ -42,14 +48,18 @@ const showTip = ref(false);
 const confirmBindTip = ref(false);
 const unbindDialogVisible = ref(false);
 const nameEditorVisible = ref(false);
-const qrVisible = ref(false);
-const qrSaved = ref(false);
 const editingName = ref("");
+const renaming = ref(false);
 const token = ref("");
 const binding = ref(false);
 const retryScanOnShow = ref(false);
 const calibration = ref(false);
 const showDeviceId = ref(false);
+const latestVersionDialogVisible = ref(false);
+const otaNeedUpdate = ref(false);
+const firmwareActionPending = ref(false);
+let otaCheckPromise = null;
+let otaCheckRequestVersion = 0;
 
 const {
   batteryText,
@@ -57,8 +67,9 @@ const {
   getDeviceNameOverrides,
   isDeviceOnline,
   maskedDeviceId,
-  networkText,
-  refreshDeviceStatus,
+  networkType,
+  onlineDurationText,
+  refreshDeviceDetails,
   statusClass,
   statusText,
   syncDeviceBinding,
@@ -66,23 +77,20 @@ const {
 } = useDeviceStatus({
   user,
   device,
+  deviceStatus,
   online,
   updateDevice,
-  updateOnline,
   clearDevice,
   unbindDialogVisible,
 });
 
-const wifiStatusText = computed(() =>
-  String(networkText.value || "").toLowerCase() === "wifi" ? "已连接" : "未连接"
-);
+const wifiStatusText = computed(() => {
+  if (!networkType.value) return "未设置";
+  return networkType.value === "wifi" ? "已连接" : "未连接";
+});
 
 const bindingDateText = computed(() =>
-  formatBindingDate(
-    deviceDetails.value.bindTime ||
-      deviceDetails.value.bindingTime ||
-      deviceDetails.value.createTime
-  )
+  formatBindingDate(deviceDetails.value.bindTime)
 );
 
 const deviceIdText = computed(() =>
@@ -91,23 +99,21 @@ const deviceIdText = computed(() =>
     : maskedDeviceId.value
 );
 
-// 设计稿中的设备信息优先读取接口字段，缺省时使用页面展示默认值。
+// 设备型号直接读取详情接口，缺失时显示占位符。
 const designDeviceStats = computed(() => [
   {
     label: "设备型号",
-    value: deviceDetails.value.model || deviceDetails.value.deviceModel || "射灵1代",
+    value: deviceDetails.value.deviceModelName?.trim() || "--",
   },
   {
     label: "剩余电量",
-    value: batteryText.value === "暂无数据" ? "88%" : batteryText.value,
+    value: batteryText.value === "暂无数据" || !isDeviceOnline.value
+      ? "--"
+      : batteryText.value,
   },
   {
     label: "累计使用",
-    value:
-      deviceDetails.value.totalUseTime ||
-      deviceDetails.value.usedTime ||
-      deviceDetails.value.duration ||
-      "2510小时36分",
+    value: onlineDurationText.value,
   },
   {
     label: "绑定时间",
@@ -121,17 +127,9 @@ const { confirmBind, handleScan } = useDeviceBinding({
   binding,
   updateDevice,
   deviceDetails,
-  refreshDeviceStatus,
 });
 
-const qrImageUrl = computed(
-  () =>
-    deviceDetails.value.qrCode ||
-    deviceDetails.value.qrcode ||
-    deviceDetails.value.qrUrl ||
-    "../../static/device-assets/my-device-qrcode.png"
-);
-const isScanPage = computed(() => !device.value.deviceId && !qrVisible.value);
+const isScanPage = computed(() => !device.value.deviceId);
 
 // 解绑前展示统一确认弹窗，避免误触解除绑定。
 const openUnbindDialog = () => {
@@ -148,6 +146,7 @@ const openNameEditor = () => {
 };
 
 const closeNameEditor = () => {
+  if (renaming.value) return;
   nameEditorVisible.value = false;
 };
 
@@ -155,8 +154,9 @@ const toggleDeviceId = () => {
   if (device.value.deviceId) showDeviceId.value = !showDeviceId.value;
 };
 
-// 当前接口列表没有设备改名接口，先更新页面和本地缓存，后端接口接入时可替换为请求。
-const confirmName = () => {
+const confirmName = async () => {
+  if (renaming.value) return;
+
   const name = String(editingName.value || "").trim();
   if (!name) {
     uni.showToast({ title: "请输入设备名", icon: "none" });
@@ -166,13 +166,38 @@ const confirmName = () => {
     uni.showToast({ title: "设备名格式不正确", icon: "none" });
     return;
   }
-  updateDevice(device.value.deviceId, name);
-  deviceDetails.value = { ...deviceDetails.value, deviceName: name };
-  const nameOverrides = getDeviceNameOverrides();
-  nameOverrides[device.value.deviceId] = name;
-  uni.setStorageSync(DEVICE_NAME_STORAGE_KEY, nameOverrides);
-  nameEditorVisible.value = false;
-  uni.showToast({ title: "设备名已更新", icon: "success" });
+
+  const deviceId = device.value.deviceId;
+  if (!deviceId) {
+    uni.showToast({ title: "暂无绑定设备", icon: "none" });
+    return;
+  }
+
+  renaming.value = true;
+  try {
+    await updateDeviceAliasAPI(deviceId, name);
+    if (device.value.deviceId !== deviceId) return;
+
+    updateDevice(deviceId, name);
+    deviceDetails.value = {
+      ...deviceDetails.value,
+      deviceAlias: name,
+      deviceName: name,
+    };
+
+    // 服务端别名已成为数据源，移除旧版本遗留的本地名称覆盖。
+    const nameOverrides = getDeviceNameOverrides();
+    delete nameOverrides[deviceId];
+    uni.setStorageSync(DEVICE_NAME_STORAGE_KEY, nameOverrides);
+
+    nameEditorVisible.value = false;
+    uni.showToast({ title: "设备名已更新", icon: "success" });
+    void refreshDeviceDetails();
+  } catch (error) {
+    console.error("修改设备名失败", error);
+  } finally {
+    renaming.value = false;
+  }
 };
 
 const toDeviceIntroPage = () => {
@@ -180,18 +205,111 @@ const toDeviceIntroPage = () => {
 };
 
 const joinWifi = () => {
-  uni.navigateTo({ url: "/pages/device/ota-wifi" });
-};
-
-const goFirmwareUpdate = () => {
   if (!isDeviceOnline.value) {
-    uni.showToast({ title: "请先开启智能弓", icon: "none" });
+    uni.showToast({ title: "请先开启智能弓箭", icon: "none" });
     return;
   }
   uni.navigateTo({ url: "/pages/device/ota-wifi" });
 };
 
+const clearOtaState = () => {
+  otaCheckRequestVersion += 1;
+  otaCheckPromise = null;
+  otaNeedUpdate.value = false;
+};
+
+const loadOtaVersionInfo = async () => {
+  if (otaCheckPromise) return otaCheckPromise;
+
+  const deviceId = device.value.deviceId;
+  if (!deviceId || !isDeviceOnline.value) return null;
+
+  const requestVersion = ++otaCheckRequestVersion;
+  const request = getHardwareBoxVersionAPI()
+    .then((versionInfo) => {
+      if (
+        requestVersion !== otaCheckRequestVersion ||
+        device.value.deviceId !== deviceId ||
+        !isDeviceOnline.value
+      ) {
+        return null;
+      }
+
+      if (!versionInfo || typeof versionInfo !== "object") {
+        throw new Error("固件版本信息为空");
+      }
+
+      const needUpdate =
+        versionInfo.needUpdate === true || Number(versionInfo.needUpdate) === 1;
+      otaNeedUpdate.value = needUpdate;
+      return {
+        versionNumber: versionInfo.versionNumber || "",
+        resourceUrl: versionInfo.resourceUrl || "",
+        needUpdate,
+      };
+    })
+    .finally(() => {
+      if (otaCheckPromise === request) {
+        otaCheckPromise = null;
+      }
+    });
+
+  otaCheckPromise = request;
+  return request;
+};
+
+const refreshOtaUpdateState = async () => {
+  otaNeedUpdate.value = false;
+  if (!device.value.deviceId || !isDeviceOnline.value) {
+    clearOtaState();
+    return;
+  }
+
+  try {
+    await loadOtaVersionInfo();
+  } catch (error) {
+    clearOtaState();
+    console.log("检查固件更新失败", error);
+  }
+};
+
+const closeLatestVersionDialog = () => {
+  latestVersionDialogVisible.value = false;
+};
+
+const goFirmwareUpdate = async () => {
+  if (firmwareActionPending.value) return;
+  if (!isDeviceOnline.value) {
+    uni.showToast({ title: "请先开启智能弓", icon: "none" });
+    return;
+  }
+
+  firmwareActionPending.value = true;
+  try {
+    const versionInfo = await loadOtaVersionInfo();
+    if (!versionInfo) return;
+    if (!versionInfo.needUpdate) {
+      latestVersionDialogVisible.value = true;
+      return;
+    }
+
+    const query = [
+      `versionNumber=${encodeURIComponent(versionInfo.versionNumber)}`,
+      `resourceUrl=${encodeURIComponent(versionInfo.resourceUrl)}`,
+    ].join("&");
+    uni.navigateTo({ url: `/pages/device/ota-wifi?${query}` });
+  } catch (error) {
+    uni.showToast({ title: "获取更新版本失败，请重试", icon: "none" });
+  } finally {
+    firmwareActionPending.value = false;
+  }
+};
+
 const goCalibration = async () => {
+  if (!isDeviceOnline.value) {
+    uni.showToast({ title: "请先开启智能弓箭", icon: "none" });
+    return;
+  }
   try {
     await laserAimAPI();
     uni.navigateTo({ url: "/pages/device/calibration" });
@@ -208,8 +326,13 @@ const copyEmail = () => {
 };
 
 const openQr = () => {
-  qrSaved.value = false;
-  qrVisible.value = true;
+  if (!device.value.deviceId) {
+    uni.showToast({ title: "暂无绑定设备", icon: "none" });
+    return;
+  }
+  uni.navigateTo({
+    url: `/pages/device/device-qrcode?deviceId=${encodeURIComponent(device.value.deviceId)}`,
+  });
 };
 
 const closeTip = () => {
@@ -220,35 +343,19 @@ const closeConfirmBindTip = () => {
   confirmBindTip.value = false;
 };
 
-const closeQr = () => {
-  qrVisible.value = false;
-};
-
-// 保存二维码到相册；远程二维码先下载到临时目录，失败时保留长按保存提示。
-const saveQrCode = async () => {
-  let filePath = qrImageUrl.value;
-  try {
-    if (/^https?:\/\//.test(filePath)) {
-      filePath = await new Promise((resolve, reject) => {
-        uni.downloadFile({
-          url: filePath,
-          success: (result) =>
-            result.statusCode === 200
-              ? resolve(result.tempFilePath)
-              : reject(new Error("二维码下载失败")),
-          fail: reject,
-        });
-      });
+watch(
+  () => isDeviceOnline.value,
+  (isOnline, wasOnline) => {
+    if (isOnline && !wasOnline) {
+      void refreshDeviceDetails();
+      void refreshOtaUpdateState();
+      return;
+    }
+    if (!isOnline) {
+      clearOtaState();
     }
-    await new Promise((resolve, reject) => {
-      uni.saveImageToPhotosAlbum({ success: resolve, fail: reject, filePath });
-    });
-    qrSaved.value = true;
-    uni.showToast({ title: "已保存至相册", icon: "success" });
-  } catch (error) {
-    uni.showToast({ title: "请长按二维码保存", icon: "none" });
   }
-};
+);
 
 onLoad((options = {}) => {
   retryScanOnShow.value = options.retryScan === "1";
@@ -265,6 +372,7 @@ onUnmounted(() => {
 onShow(async () => {
   calibration.value = uni.getStorageSync("calibration");
   await syncDeviceBinding();
+  void refreshOtaUpdateState();
   if (retryScanOnShow.value) {
     retryScanOnShow.value = false;
     handleScan();
@@ -279,24 +387,17 @@ onShow(async () => {
       :scroll="false"
       :usePageScroll="false"
     >
-    <view v-if="qrVisible" class="qr-page" @click="closeQr">
-      <view class="qr-canvas" @click.stop>
-        <view class="qr-corner qr-corner--top"></view>
-        <view class="qr-corner qr-corner--bottom"></view>
-        <text class="qr-title">射灵智能弓箭二维码</text>
-        <image class="qr-image" :src="qrImageUrl" mode="aspectFit" show-menu-by-longpress />
-        <text v-if="qrSaved" class="qr-device-id">设备ID：{{ maskedDeviceId }}</text>
-        <view v-else class="qr-save-button" @click="saveQrCode">
-          <text>保存至相册</text>
+    <template #header>
+      <view class="device-nav">
+        <Header title="" />
+        <text class="device-nav-title">我的设备</text>
+        <view v-if="device.deviceId" class="device-status" :class="statusClass">
+          <view class="status-dot"></view>
+          <text>{{ statusText }}</text>
         </view>
-        <text class="qr-description">
-          该二维码为当前绑定弓箭的二维码，你可以截图保存到相册，以便当二维码丢失或不在身边时，可以扫描二维码进行设备绑定。
-        </text>
-        <text class="qr-note">注：解除绑定后将无法查看该二维码。</text>
       </view>
-    </view>
-
-    <view v-else-if="!device.deviceId" class="scan-code">
+    </template>
+    <view v-if="!device.deviceId" class="scan-code">
       <view class="unbound-content">
         <button class="scan-entry" hover-class="none" @click="$clickSound(handleScan)">
           <image src="../../static/device-assets/my-device-unbound-scan.png" mode="aspectFit" />
@@ -322,7 +423,10 @@ onShow(async () => {
     </view>
 
     <view v-else class="device-page">
-      <view class="device-visual">
+      <view
+        class="device-visual"
+        :class="{ 'device-float-group': isDeviceOnline }"
+      >
         <image
           class="device-stage"
           src="../../static/home-device/device-platform.png"
@@ -335,11 +439,10 @@ onShow(async () => {
         />
       </view>
 
-      <view class="device-heading">
-        <view class="device-status" :class="statusClass">
-          <view class="status-dot"></view>
-          <text>{{ statusText }}</text>
-        </view>
+      <view
+        class="device-heading"
+        :class="{ 'device-float-group': isDeviceOnline }"
+      >
         <view class="device-title-row">
           <text class="device-name">{{ device.deviceName || "打弓佬" }}</text>
           <view class="edit-name" @click="openNameEditor">
@@ -351,7 +454,9 @@ onShow(async () => {
           <view class="device-id-toggle" @click="toggleDeviceId">
             <image
               class="device-id-eye"
-              src="../../static/home-device/device-id-visibility.png"
+              :src="showDeviceId
+                ? '../../static/home-device/device-id-visible.png'
+                : '../../static/home-device/device-id-hidden.png'"
               mode="aspectFit"
             />
           </view>
@@ -392,7 +497,10 @@ onShow(async () => {
           </view>
           <view class="action-label-wrap">
             <text>固件更新</text>
-            <text class="action-badge action-badge--new">New</text>
+            <text
+              v-if="otaNeedUpdate"
+              class="action-badge action-badge--new"
+            >New</text>
           </view>
         </view>
         <view class="action-item" @click="joinWifi">
@@ -401,8 +509,17 @@ onShow(async () => {
           </view>
           <view class="action-label-wrap">
             <text>WIFI设置</text>
-            <text v-if="wifiStatusText === '未连接'" class="action-badge action-badge--offline">
-              未连接
+            <text
+              :class="[
+                'action-badge',
+                wifiStatusText === '未设置'
+                  ? 'action-badge--unset'
+                  : wifiStatusText === '未连接'
+                    ? 'action-badge--offline'
+                    : '',
+              ]"
+            >
+              {{ wifiStatusText }}
             </text>
           </view>
         </view>
@@ -472,22 +589,50 @@ onShow(async () => {
       :onConfirm="unbindDevice"
     ></ModalDialog>
 
+    <ModalDialog
+      :show="latestVersionDialogVisible"
+      title="固件更新"
+      content="已经是最新版本"
+      confirmText="确定"
+      :showCancel="false"
+      :onConfirm="closeLatestVersionDialog"
+    ></ModalDialog>
+
     <view v-if="nameEditorVisible" class="name-mask" @click="closeNameEditor">
-      <view class="name-sheet" @click.stop>
-        <view class="name-input-row">
-          <input
-            v-model="editingName"
-            class="name-input"
-            focus
-            maxlength="10"
-            confirm-type="done"
-            placeholder="请输入设备名（最长10个汉字）"
-            placeholder-class="name-placeholder"
-            @confirm="confirmName"
-          />
-          <view class="name-confirm" @click="confirmName">确定</view>
+      <view class="name-panel" @click.stop>
+        <image
+          class="name-mascot"
+          src="../../static/home-device/device-name-mascot.png"
+          mode="aspectFit"
+        />
+        <view class="name-sheet">
+          <view class="name-input-row">
+            <input
+              v-model="editingName"
+              class="name-input"
+              focus
+              :cursor-spacing="24"
+              :disabled="renaming"
+              maxlength="10"
+              confirm-type="done"
+              placeholder="请输入设备名（最长10个汉字）"
+              placeholder-class="name-placeholder"
+              @confirm="confirmName"
+            />
+            <view
+              class="name-confirm"
+              :class="{ 'name-confirm--disabled': renaming }"
+              @click="confirmName"
+            >
+              <image
+                class="name-confirm-image"
+                src="../../static/home-device/device-name-confirm.png"
+                mode="aspectFit"
+              />
+            </view>
+          </view>
+          <text class="name-helper">仅支持中文、英文、数字、下划线、减号</text>
         </view>
-        <text class="name-helper">仅支持中文、英文、数字、下划线、减号</text>
       </view>
     </view>
     </Container>
@@ -495,6 +640,33 @@ onShow(async () => {
 </template>
 
 <style scoped>
+.device-nav {
+  position: relative;
+  z-index: 3;
+  width: 100%;
+  height: 50px;
+}
+
+.device-nav-title {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  color: #ffffff;
+  font-size: 30rpx;
+  font-weight: 500;
+  line-height: 52rpx;
+  white-space: nowrap;
+  transform: translate(-50%, -50%);
+}
+
+.device-nav .device-status {
+  position: absolute;
+  top: calc(100% + 28rpx);
+  left: 50%;
+  white-space: nowrap;
+  transform: translateX(-50%);
+}
+
 .my-device-page {
   position: relative;
   min-height: 100vh;
@@ -635,6 +807,20 @@ onShow(async () => {
   pointer-events: none;
 }
 
+.device-float-group {
+  animation: my-device-float 3s ease-in-out infinite;
+}
+
+@keyframes my-device-float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10rpx);
+  }
+}
+
 .device-stage {
   position: absolute;
   top: 214rpx;
@@ -688,7 +874,7 @@ onShow(async () => {
 .device-title-row {
   display: flex;
   align-items: center;
-  margin-top: 536rpx;
+  margin-top: 566rpx;
   height: 52rpx;
   line-height: 52rpx;
   padding: 0 24rpx;
@@ -855,6 +1041,14 @@ onShow(async () => {
   transform: translateX(-50%);
 }
 
+.action-badge--offline {
+  color: #8b0000;
+}
+
+.action-badge--unset {
+  color: #565656;
+}
+
 .unbind-entry {
   position: relative;
   z-index: 2;
@@ -995,99 +1189,6 @@ onShow(async () => {
   flex: 1;
 }
 
-.qr-page {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-  box-sizing: border-box;
-  overflow: hidden;
-  background: transparent;
-}
-
-.qr-corner {
-  position: absolute;
-  width: 300rpx;
-  height: 300rpx;
-  background: #ffeb00;
-}
-
-.qr-corner--top {
-  top: -220rpx;
-  right: -170rpx;
-  transform: rotate(42deg);
-}
-
-.qr-corner--bottom {
-  bottom: -220rpx;
-  left: -170rpx;
-  transform: rotate(42deg);
-}
-
-.qr-canvas {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-  box-sizing: border-box;
-  flex-direction: column;
-  align-items: center;
-  padding: 260rpx 62rpx 70rpx;
-}
-
-.qr-title {
-  color: #ffe846;
-  font-size: 30rpx;
-  font-weight: 600;
-}
-
-.qr-image {
-  width: 432rpx;
-  height: 432rpx;
-  margin-top: 48rpx;
-  box-sizing: border-box;
-  background: #ffffff;
-}
-
-.qr-device-id {
-  margin-top: 24rpx;
-  color: rgba(255, 255, 255, 0.62);
-  font-size: 24rpx;
-}
-
-.qr-save-button {
-  display: flex;
-  width: 360rpx;
-  height: 72rpx;
-  align-items: center;
-  justify-content: center;
-  margin-top: 34rpx;
-  border: 1rpx solid #e8c840;
-  border-radius: 36rpx;
-  color: #ffe846;
-  font-size: 26rpx;
-}
-
-.qr-description,
-.qr-note {
-  width: 100%;
-  color: rgba(255, 255, 255, 0.6);
-  font-size: 22rpx;
-  line-height: 36rpx;
-  text-align: center;
-}
-
-.qr-description {
-  margin-top: 42rpx;
-}
-
-.qr-note {
-  margin-top: 12rpx;
-  color: rgba(255, 232, 70, 0.7);
-}
-
 .name-mask {
   position: fixed;
   top: 0;
@@ -1101,52 +1202,86 @@ onShow(async () => {
   background: rgba(0, 0, 0, 0.68);
 }
 
+.name-panel {
+  position: relative;
+  width: 100%;
+}
+
+.name-mascot {
+  position: absolute;
+  bottom: calc(100% - 74rpx);
+  left: 50%;
+  z-index: 0;
+  width: 176rpx;
+  height: 190rpx;
+  pointer-events: none;
+  transform: translateX(-50%);
+}
+
 .name-sheet {
+  position: relative;
+  z-index: 1;
   width: 100%;
   box-sizing: border-box;
-  padding: 34rpx 32rpx 48rpx;
-  border-top: 1rpx solid rgba(255, 226, 153, 0.4);
-  border-radius: 28rpx 28rpx 0 0;
-  background: linear-gradient(180deg, #57462b, #2c241b);
+  padding: 42rpx 48rpx calc(48rpx + env(safe-area-inset-bottom));
+  border-top: 2rpx solid rgba(255, 218, 96, 0.5);
+  background: linear-gradient(180deg, #725323 0%, #4a351d 100%);
 }
 
 .name-input-row {
+  position: relative;
+  display: flex;
   width: 100%;
-  justify-content: space-between;
+  max-width: 620rpx;
+  height: 78rpx;
+  align-items: center;
+  margin: 0 auto;
+  overflow: hidden;
+  border-radius: 40rpx;
+  background: #ffffff;
 }
 
 .name-input {
   flex: 1;
-  height: 76rpx;
-  padding: 0 22rpx;
+  min-width: 0;
+  height: 78rpx;
+  padding: 0 28rpx 0 38rpx;
   box-sizing: border-box;
-  border-radius: 14rpx;
-  color: #ffffff;
-  background: rgba(0, 0, 0, 0.22);
+  color: #3f3a34;
+  background: #ffffff;
   font-size: 28rpx;
+  line-height: 78rpx;
+  text-align: center;
 }
 
 .name-placeholder {
-  color: rgba(255, 255, 255, 0.45);
+  color: #5f5a55;
 }
 
 .name-confirm {
-  display: flex;
-  width: 132rpx;
-  height: 76rpx;
-  align-items: center;
-  justify-content: center;
-  margin-left: 18rpx;
-  border-radius: 14rpx;
-  color: #1b160d;
-  background: #fed847;
-  font-size: 26rpx;
+  position: relative;
+  z-index: 1;
+  width: 156rpx;
+  height: 78rpx;
+  flex: 0 0 156rpx;
+}
+
+.name-confirm-image {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.name-confirm--disabled {
+  opacity: 0.6;
 }
 
 .name-helper {
   display: block;
-  margin-top: 18rpx;
-  color: rgba(255, 255, 255, 0.6);
-  font-size: 22rpx;
+  margin-top: 22rpx;
+  color: rgba(255, 255, 255, 0.62);
+  font-size: 24rpx;
+  line-height: 34rpx;
+  text-align: center;
 }
 </style>