登录添加手机号

src/components/SModal.vue

@@ -7,7 +7,7 @@ const props = defineProps({
   },
   height: {
     type: String,
-    default: "260px",
+    default: "630rpx",
   },
   onClose: {
     type: Function,
@@ -56,12 +56,9 @@ watch(
     >
       <image
         v-if="!noBg"
-        src="https://static.shelingxingqiu.com/attachment/2025-08-05/dbuaf19pf7qd8ps0uh.png"
+        src="https://static.shelingxingqiu.com/attachment/2025-12-03/deocxa1dgzebjc0hvo.png"
         mode="widthFix"
       />
-      <view class="close-btn" @click="onClose" v-if="!noBg">
-        <image src="../static/close-yellow.png" mode="widthFix" />
-      </view>
       <slot></slot>
     </view>
   </view>
@@ -94,14 +91,4 @@ watch(
   position: absolute;
   z-index: -1;
 }
-.close-btn {
-  display: flex;
-  justify-content: flex-end;
-  position: absolute;
-  right: 0;
-}
-.close-btn > image {
-  width: 40px;
-  height: 40px;
-}
 </style>

src/components/Signin.vue

@@ -3,7 +3,14 @@ import { ref } from "vue";
 import { onShow } from "@dcloudio/uni-app";
 import Avatar from "@/components/Avatar.vue";
 import SButton from "@/components/SButton.vue";
-import { getMyDevicesAPI, loginAPI, getHomeData } from "@/apis";
+
+import { wxLogin } from "@/util";
+import {
+  getMyDevicesAPI,
+  loginAPI,
+  getHomeData,
+  getPhoneNumberAPI,
+} from "@/apis";
 import useStore from "@/store";
 const store = useStore();
 const { updateUser, updateDevice } = store;
@@ -18,6 +25,7 @@ const props = defineProps({
   },
 });
 const agree = ref(false);
+const phone = ref("");
 const avatarUrl = ref("");
 const nickName = ref("");
 const loading = ref(false);
@@ -25,6 +33,17 @@ const handleAgree = () => {
   agree.value = !agree.value;
 };
 
+async function getphonenumber(e) {
+  if (e.detail.code) {
+    const wxResult = await wxLogin();
+    const result = await getPhoneNumberAPI({
+      ...e.detail,
+      code: wxResult.code,
+    });
+    if (result.phone) phone.value = result.phone;
+  }
+}
+
 function onChooseAvatar(e) {
   avatarUrl.value = e.detail.avatarUrl;
 }
@@ -33,8 +52,14 @@ function onNicknameChange(e) {
   nickName.value = e.detail.value;
 }
 
-const handleLogin = () => {
+const handleLogin = async () => {
   if (loading.value) return;
+  if (!phone.value) {
+    return uni.showToast({
+      title: "请获取手机号",
+      icon: "none",
+    });
+  }
   if (!avatarUrl.value) {
     return uni.showToast({
       title: "请选择头像",
@@ -54,34 +79,24 @@ const handleLogin = () => {
     });
   }
   loading.value = true;
-  uni.login({
-    provider: "weixin",
-    success: async (loginRes) => {
-      const { code } = loginRes;
-      const fileManager = uni.getFileSystemManager();
-      const avatarBase64 = fileManager.readFileSync(avatarUrl.value, "base64");
-      const base64Url = `data:image/png;base64,${avatarBase64}`;
-      const result = await loginAPI(nickName.value, base64Url, code);
-      const data = await getHomeData();
-      if (data.user) updateUser(data.user);
-      const devices = await getMyDevicesAPI();
-      if (devices.bindings && devices.bindings.length) {
-        updateDevice(
-          devices.bindings[0].deviceId,
-          devices.bindings[0].deviceName
-        );
-      }
-      props.onClose();
-    },
-    fail: (err) => {
-      loading.value = false;
-      uni.showToast({
-        title: "登录失败",
-        icon: "none",
-      });
-      console.error("登录失败：", err);
-    },
-  });
+  const wxResult = await wxLogin();
+  const fileManager = uni.getFileSystemManager();
+  const avatarBase64 = fileManager.readFileSync(avatarUrl.value, "base64");
+  const base64Url = `data:image/png;base64,${avatarBase64}`;
+  const result = await loginAPI(
+    phone.value,
+    nickName.value,
+    base64Url,
+    wxResult.code
+  );
+  const data = await getHomeData();
+  if (data.user) updateUser(data.user);
+  const devices = await getMyDevicesAPI();
+  if (devices.bindings && devices.bindings.length) {
+    updateDevice(devices.bindings[0].deviceId, devices.bindings[0].deviceName);
+  }
+  loading.value = false;
+  props.onClose();
 };
 
 const openServiceLink = () => {
@@ -111,6 +126,21 @@ onShow(() => {
 
 <template>
   <view class="container" :style="{ background: noBg ? '#fff' : 'none' }">
+    <view class="avatar" :style="{ borderColor: noBg ? '#E3E3E3' : '#fff3' }">
+      <text :style="{ color: noBg ? '#666' : '#fff' }">手机:</text>
+      <button
+        :open-type="!phone ? 'getPhoneNumber' : ''"
+        @getphonenumber="getphonenumber"
+        class="login-btn"
+        hover-class="none"
+      >
+        <text v-if="phone" :style="{ color: noBg ? '#333' : '#fff' }">{{
+          phone
+        }}</text>
+        <text v-else :style="{ color: noBg ? '#666' : '#fff9' }">点击获取</text>
+        <image src="../static/enter.png" mode="widthFix" />
+      </button>
+    </view>
     <view class="avatar" :style="{ borderColor: noBg ? '#E3E3E3' : '#fff3' }">
       <text :style="{ color: noBg ? '#666' : '#fff' }">头像:</text>
       <button
@@ -138,7 +168,7 @@ onShow(() => {
     <SButton :rounded="20" width="80vw" :onClick="handleLogin">
       <block v-if="!loading">
         <image
-          src="../static/wechat-icon.png"
+          :src="`../static/wechat-icon${noBg ? '' : '-black'}.png`"
           mode="widthFix"
           class="wechat-icon"
         />
@@ -191,7 +221,7 @@ onShow(() => {
   display: flex;
   align-items: center;
   margin-bottom: 20px;
-  border-bottom: 1rpx solid #fff3;
+  border-bottom: 1rpx solid #ffffff1a;
 }
 .avatar {
   margin: 0;
@@ -200,7 +230,7 @@ onShow(() => {
 .nickname > text {
   width: 20%;
   font-size: 14px;
-  line-height: 55px;
+  line-height: 120rpx;
 }
 .avatar > button > text {
   color: #fff9;
@@ -209,7 +239,7 @@ onShow(() => {
 .nickname > input {
   flex: 1;
   font-size: 14px;
-  line-height: 55px;
+  line-height: 120rpx;
 }
 .wechat-icon {
   width: 24px;
@@ -220,8 +250,8 @@ onShow(() => {
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 13px;
-  margin-top: 15px;
+  font-size: 22rpx;
+  margin: 30rpx 0;
   color: #8a8a8a;
 }
 .protocol > image {