优化页面

pages/Mine/Mine.vue

@@ -161,7 +161,12 @@
               >
                 失败
               </view>
-              <view class="Result" v-else-if="item.winnerAnchorId === item.anchorIdA && item.winnerAnchorId !== null">
+              <view
+                class="Result"
+                v-else-if="
+                  item.winnerAnchorId === item.anchorIdA && item.winnerAnchorId !== null
+                "
+              >
                 胜利
               </view>
               <view class="Session"> 共{{ item.pkNumber }}场 </view>
@@ -212,6 +217,15 @@
   <view class="tabBar">
     <tabBar :tabIndex="4"></tabBar>
   </view>
+  <uni-popup ref="popupExpurgate" type="center" border-radius="10px 10px 0 0">
+    <view class="popup-container-expurgate">
+      <view class="popup-title">您确定要退出登录吗？</view>
+      <view class="popup-btn">
+        <view class="uni-primary" @click="onExpurgateConfirm">确定</view>
+        <view class="uni-default" @click="closePopupExpurgate">取消</view>
+      </view>
+    </view>
+  </uni-popup>
 </template>
 
 <script>
@@ -295,7 +309,6 @@ export default {
     },
     // 获取签到状态
     getSignStatus() {
-
       const res = request({
         url: "user/checkSignStatus",
         method: "GET",
@@ -430,12 +443,20 @@ export default {
     },
     // 退出登录
     logout() {
+      this.$refs.popupExpurgate.open("center");
+    },
+    //确认退出登录
+    onExpurgateConfirm() {
       uni.clearStorage();
       TUILogin.logout();
       uni.reLaunch({
         url: "/pages/login/login",
       });
     },
+    // 关闭弹窗
+    closePopupExpurgate() {
+      this.$refs.popupExpurgate.close();
+    },
   },
   components: {
     tabBar,
@@ -685,4 +706,51 @@ export default {
   font-size: 28.63rpx;
   color: #333333;
 }
+.popup-container-expurgate {
+  width: 500rpx;
+  height: 300rpx;
+  background-color: #ffffff;
+  border-radius: 30rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 30rpx;
+}
+.popup-title {
+  font-size: 40rpx;
+  color: #161616;
+  font-weight: bold;
+  margin-top: 30rpx;
+  text-align: center;
+}
+.popup-btn {
+  margin-top: 80rpx;
+  display: flex;
+  justify-content: center;
+}
+.uni-primary {
+  width: 200rpx;
+  height: 70rpx;
+  border-top-left-radius: 50rpx;
+  border-bottom-left-radius: 50rpx;
+  border-bottom-right-radius: 50rpx;
+  background-image: linear-gradient(135deg, #4fcacd, #5fdbde);
+  font-size: 25rpx;
+  color: #ffffff;
+  text-align: center;
+  line-height: 70rpx;
+  margin-right: 35rpx;
+}
+.uni-default {
+  width: 200rpx;
+  height: 70rpx;
+  border-top-left-radius: 50rpx;
+  border-bottom-left-radius: 50rpx;
+  border-bottom-right-radius: 50rpx;
+  background-image: linear-gradient(135deg, #cecece, #d6d6d6);
+  font-size: 25rpx;
+  color: #161616;
+  text-align: center;
+  line-height: 70rpx;
+}
 </style>