代码优化

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' }">
+  <SModal :show="show" :onClose="onClose" :noBg="noBg">
-    <view class="avatar" :style="{ borderColor: noBg ? '#E3E3E3' : '#fff3' }">
+    <view class="container" :style="{ background: noBg ? '#fff' : 'none' }">
-      <text :style="{ color: noBg ? '#666' : '#fff' }">手机:</text>
+      <view class="avatar" :style="{ borderColor: noBg ? '#E3E3E3' : '#fff3' }">
-      <button
+        <text :style="{ color: noBg ? '#666' : '#fff' }">手机:</text>
-        :open-type="!phone ? 'getPhoneNumber' : ''"
+        <button
-        @getphonenumber="getphonenumber"
+          :open-type="!phone ? 'getPhoneNumber' : ''"
-        class="login-btn"
+          @getphonenumber="getphonenumber"
-        hover-class="none"
+          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' }">{{
+        <text :style="{ color: noBg ? '#666' : '#fff' }">昵称:</text>
-          phone
+        <input
-        }}</text>
+          type="nickname"
-        <text v-else :style="{ color: noBg ? '#666' : '#fff9' }">点击获取</text>
+          placeholder="请输入昵称"
-        <image src="../static/enter.png" mode="widthFix" />
+          :placeholder-style="`color: ${noBg ? '#666' : '#fff9'} `"
-      </button>
+          @change="onNicknameChange"
-    </view>
+          @blur="onNicknameBlur"
-    <view class="avatar" :style="{ borderColor: noBg ? '#E3E3E3' : '#fff3' }">
+          :style="{ color: noBg ? '#333' : '#fff' }"
-      <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"
         />
-      </block>
+      </view>
-    </SButton>
+      <SButton :rounded="20" width="80vw" :onClick="handleLogin">
-    <view class="protocol" @click="handleAgree">
+        <block v-if="!loading">
-      <view v-if="!agree" :style="{ borderColor: noBg ? '#E3E3E3' : '#fff' }" />
+          <text :style="{ color: '#000' }">手机号快捷登录</text>
-      <image v-if="agree" src="../static/checked.png" mode="widthFix" />
+        </block>
-      <view>
+        <block v-else>
-        <text>已同意并阅读</text>
+          <image
+            src="../static/btn-loading.png"
+            mode="widthFix"
+            class="loading"
+          />
+        </block>
+      </SButton>
+      <view class="protocol" @click="handleAgree">
         <view
-          @click.stop="openServiceLink"
+          v-if="!agree"
-          :style="{ color: noBg ? '#333' : '#ffffff99' }"
+          :style="{ borderColor: noBg ? '#E3E3E3' : '#fff' }"
-          >《用户协议》</view
+        />
-        >
+        <image v-if="agree" src="../static/checked.png" mode="widthFix" />
-        <text>及</text>
+        <view>
-        <view
+          <text>已同意并阅读</text>
-          @click.stop="openPrivacyLink"
+          <view
-          :style="{ color: noBg ? '#333' : '#ffffff99' }"
+            @click.stop="openServiceLink"
-          >《隐私协议》</view
+            :style="{ color: noBg ? '#333' : '#ffffff99' }"
-        >
+            >《用户协议》</view
-        <text>内容</text>
+          >
+          <text>及</text>
+          <view
+            @click.stop="openPrivacyLink"
+            :style="{ color: noBg ? '#333' : '#ffffff99' }"
+            >《隐私协议》</view
+          >
+          <text>内容</text>
+        </view>
       </view>
     </view>
-  </view>
+  </SModal>
 </template>
 
 <style scoped>

src/pages/be-vip.vue

@@ -3,7 +3,6 @@ import { ref, onMounted, onBeforeUnmount } from "vue";
 import Container from "@/components/Container.vue";
 import Avatar from "@/components/Avatar.vue";
 import SButton from "@/components/SButton.vue";
-import SModal from "@/components/SModal.vue";
 import Signin from "@/components/Signin.vue";
 import UserHeader from "@/components/UserHeader.vue";
 import { createOrderAPI, getHomeData, getVIPDescAPI } from "@/apis";
@@ -151,15 +150,13 @@ onBeforeUnmount(() => {
           </view>
         </view>
         <SButton :onClick="onPay">支付</SButton>
-        <SModal :show="showModal" :onClose="() => (showModal = false)">
-          <Signin :onClose="() => (showModal = false)" />
-        </SModal>
         <view class="my-orders" v-if="user.id">
           <view @click="toOrderPage">
             <text>我的订单</text>
             <image src="../static/enter-arrow-blue.png" mode="widthFix" />
           </view>
         </view>
+        <Signin :show="showModal" :onClose="() => (showModal = false)" />
       </view>
     </view>
   </Container>

src/pages/friend-battle.vue

@@ -62,16 +62,18 @@ const onCreateRoom = async () => {
   showModal.value = true;
 };
 const onSignin = () => {
+  if (roomID.value && user.value.id) enterRoom(roomID.value);
   showSignin.value = false;
-  if (roomID.value) enterRoom(roomID.value);
 };
 onShow(async () => {
-  const result = await getBattleDataAPI();
+  if (user.value.id) {
-  data.value = result;
+    const result = await getBattleDataAPI();
+    data.value = result;
+  }
 });
 onLoad(async (options) => {
-  roomID.value = options.roomID || "";
   if (options.roomID) {
+    roomID.value = options.roomID;
     if (user.value.id) enterRoom(options.roomID);
     else showSignin.value = true;
   }
@@ -167,9 +169,7 @@ onLoad(async (options) => {
         </view>
         <CreateRoom v-if="!warnning" :onConfirm="() => (showModal = false)" />
       </SModal>
-      <SModal :show="showSignin" :onClose="() => (showSignin = false)">
+      <Signin :show="showSignin" :onClose="onSignin" />
-        <Signin :onClose="onSignin" />
-      </SModal>
     </view>
   </Container>
 </template>

src/pages/index.vue

@@ -5,7 +5,6 @@ import Container from "@/components/Container.vue";
 import AppFooter from "@/components/AppFooter.vue";
 import AppBackground from "@/components/AppBackground.vue";
 import UserHeader from "@/components/UserHeader.vue";
-import SModal from "@/components/SModal.vue";
 import Signin from "@/components/Signin.vue";
 import BubbleTip from "@/components/BubbleTip.vue";
 
@@ -244,9 +243,7 @@ onShareTimeline(() => {
           </view>
         </view>
       </view>
-      <SModal :show="showModal" :onClose="() => (showModal = false)">
+      <Signin :show="showModal" :onClose="() => (showModal = false)" />
-        <Signin :onClose="() => (showModal = false)" />
-      </SModal>
     </view>
     <AppFooter />
   </Container>

src/pages/point-book.vue

@@ -4,7 +4,6 @@ import { onShow, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import PointRecord from "@/components/PointRecord.vue";
 import RingBarChart from "@/components/RingBarChart.vue";
-import SModal from "@/components/SModal.vue";
 import Signin from "@/components/Signin.vue";
 import ScreenHint2 from "@/components/ScreenHint2.vue";
 import RewardUs from "@/components/RewardUs.vue";
@@ -400,9 +399,11 @@ onShareTimeline(() => {
         <image src="../static/enter-arrow-blue.png" mode="widthFix" />
       </view>
     </view>
-    <SModal :show="showModal" :onClose="() => (showModal = false)" :noBg="true">
+    <Signin
-      <Signin :onClose="() => (showModal = false)" :noBg="true" />
+      :show="showModal"
-    </SModal>
+      :onClose="() => (showModal = false)"
+      :noBg="true"
+    />
     <ScreenHint2 :show="showTip || showTip2" :onClose="closeHint">
       <RewardUs
         v-if="showTip"