代码优化

src/components/Signin.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref } from "vue";
 import { onShow } from "@dcloudio/uni-app";
+import SModal from "@/components/SModal.vue";
 import Avatar from "@/components/Avatar.vue";
 import SButton from "@/components/SButton.vue";
 
@@ -18,6 +19,10 @@ const store = useStore();
 const { updateUser, updateDevice, updateOnline } = store;
 
 const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
   noBg: {
     type: Boolean,
     default: false,
@@ -132,78 +137,90 @@ onShow(() => {
 </script>
 
 <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"
+  <SModal :show="show" :onClose="onClose" :noBg="noBg">
+    <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
+          open-type="chooseAvatar"
+          @chooseavatar="onChooseAvatar"
+          class="login-btn"
+          hover-class="none"
+        >
+          <Avatar v-if="avatarUrl" :src="avatarUrl" :size="30" />
+          <text v-else :style="{ color: noBg ? '#666' : '#fff9' }"
+            >点击获取</text
+          >
+          <image src="../static/enter.png" mode="widthFix" />
+        </button>
+      </view>
+      <view
+        class="nickname"
+        :style="{ borderColor: noBg ? '#E3E3E3' : '#fff3' }"
       >
-        <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
-        open-type="chooseAvatar"
-        @chooseavatar="onChooseAvatar"
-        class="login-btn"
-        hover-class="none"
-      >
-        <Avatar v-if="avatarUrl" :src="avatarUrl" :size="30" />
-        <text v-else :style="{ color: noBg ? '#666' : '#fff9' }">点击获取</text>
-        <image src="../static/enter.png" mode="widthFix" />
-      </button>
-    </view>
-    <view class="nickname" :style="{ borderColor: noBg ? '#E3E3E3' : '#fff3' }">
-      <text :style="{ color: noBg ? '#666' : '#fff' }">昵称:</text>
-      <input
-        type="nickname"
-        placeholder="请输入昵称"
-        :placeholder-style="`color: ${noBg ? '#666' : '#fff9'} `"
-        @change="onNicknameChange"
-        @blur="onNicknameBlur"
-        :style="{ color: noBg ? '#333' : '#fff' }"
-      />
-    </view>
-    <SButton :rounded="20" width="80vw" :onClick="handleLogin">
-      <block v-if="!loading">
-        <text :style="{ color: '#000' }">手机号快捷登录</text>
-      </block>
-      <block v-else>
-        <image
-          src="../static/btn-loading.png"
-          mode="widthFix"
-          class="loading"
+        <text :style="{ color: noBg ? '#666' : '#fff' }">昵称:</text>
+        <input
+          type="nickname"
+          placeholder="请输入昵称"
+          :placeholder-style="`color: ${noBg ? '#666' : '#fff9'} `"
+          @change="onNicknameChange"
+          @blur="onNicknameBlur"
+          :style="{ color: noBg ? '#333' : '#fff' }"
         />
-      </block>
-    </SButton>
-    <view class="protocol" @click="handleAgree">
-      <view v-if="!agree" :style="{ borderColor: noBg ? '#E3E3E3' : '#fff' }" />
-      <image v-if="agree" src="../static/checked.png" mode="widthFix" />
-      <view>
-        <text>已同意并阅读</text>
+      </view>
+      <SButton :rounded="20" width="80vw" :onClick="handleLogin">
+        <block v-if="!loading">
+          <text :style="{ color: '#000' }">手机号快捷登录</text>
+        </block>
+        <block v-else>
+          <image
+            src="../static/btn-loading.png"
+            mode="widthFix"
+            class="loading"
+          />
+        </block>
+      </SButton>
+      <view class="protocol" @click="handleAgree">
         <view
-          @click.stop="openServiceLink"
-          :style="{ color: noBg ? '#333' : '#ffffff99' }"
-          >《用户协议》</view
-        >
-        <text>及</text>
-        <view
-          @click.stop="openPrivacyLink"
-          :style="{ color: noBg ? '#333' : '#ffffff99' }"
-          >《隐私协议》</view
-        >
-        <text>内容</text>
+          v-if="!agree"
+          :style="{ borderColor: noBg ? '#E3E3E3' : '#fff' }"
+        />
+        <image v-if="agree" src="../static/checked.png" mode="widthFix" />
+        <view>
+          <text>已同意并阅读</text>
+          <view
+            @click.stop="openServiceLink"
+            :style="{ color: noBg ? '#333' : '#ffffff99' }"
+            >《用户协议》</view
+          >
+          <text>及</text>
+          <view
+            @click.stop="openPrivacyLink"
+            :style="{ color: noBg ? '#333' : '#ffffff99' }"
+            >《隐私协议》</view
+          >
+          <text>内容</text>
+        </view>
       </view>
     </view>
-  </view>
+  </SModal>
 </template>
 
 <style scoped>