代码优化

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,6 +137,7 @@ onShow(() => {
 </script>
 
 <template>
+  <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>
@@ -144,7 +150,9 @@ onShow(() => {
           <text v-if="phone" :style="{ color: noBg ? '#333' : '#fff' }">{{
             phone
           }}</text>
-        <text v-else :style="{ color: noBg ? '#666' : '#fff9' }">点击获取</text>
+          <text v-else :style="{ color: noBg ? '#666' : '#fff9' }"
+            >点击获取</text
+          >
           <image src="../static/enter.png" mode="widthFix" />
         </button>
       </view>
@@ -157,11 +165,16 @@ onShow(() => {
           hover-class="none"
         >
           <Avatar v-if="avatarUrl" :src="avatarUrl" :size="30" />
-        <text v-else :style="{ color: noBg ? '#666' : '#fff9' }">点击获取</text>
+          <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' }">
+      <view
+        class="nickname"
+        :style="{ borderColor: noBg ? '#E3E3E3' : '#fff3' }"
+      >
         <text :style="{ color: noBg ? '#666' : '#fff' }">昵称:</text>
         <input
           type="nickname"
@@ -185,7 +198,10 @@ onShow(() => {
         </block>
       </SButton>
       <view class="protocol" @click="handleAgree">
-      <view v-if="!agree" :style="{ borderColor: noBg ? '#E3E3E3' : '#fff' }" />
+        <view
+          v-if="!agree"
+          :style="{ borderColor: noBg ? '#E3E3E3' : '#fff' }"
+        />
         <image v-if="agree" src="../static/checked.png" mode="widthFix" />
         <view>
           <text>已同意并阅读</text>
@@ -204,6 +220,7 @@ onShow(() => {
         </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 () => {
+  if (user.value.id) {
     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"