小程序：自定义tabbar

htmldev/wxMini/app.wxss

@@ -173,3 +173,86 @@ view.footer-fixed-bottom button[type='default'] {
   font-size: 24rpx;
   line-height: 36rpx;
 }
+
+.customer-van-model {
+  width: 560rpx;
+  border-radius: 24rpx;
+  overflow: hidden;
+}
+
+.customer-van-model_body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 48rpx 0;
+}
+
+.customer-van-model_body .content {
+  width: 480rpx;
+  color: #333333;
+  font-size: 32rpx;
+  line-height: 48rpx;
+  text-align: center;
+  word-break: break-all;
+  word-wrap: break-word;
+}
+
+.customer-van-model_body .content.cancel-order {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+}
+
+.customer-van-model_body .content.cancel-order text {
+  color: #333333;
+  font-size: 32rpx;
+  line-height: 48rpx;
+}
+
+.customer-van-model_footer {
+  display: flex;
+  align-items: center;
+  border-top: 1rpx solid #EEEEEE;
+}
+
+.customer-van-model_footer button[type="default"].customer-van-model_cancel {
+  position: relative;
+  left: 0;
+  top: 0;
+  width: 50%;
+  height: 104rpx;
+  color: #666666;
+  font-size: 32rpx;
+  line-height: 48rpx;
+  background: transparent;
+
+}
+
+.customer-van-model_footer button[type="default"].customer-van-model_cancel:after {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  content: '';
+  border-right: 1rpx solid #EEEEEE;
+}
+
+.customer-van-model_footer button[type="primary"].customer-van-model_confirm {
+  width: 50%;
+  height: 104rpx;
+  color: #6b8559;
+  font-size: 32rpx;
+  font-weight: 500;
+  line-height: 48rpx;
+  background: transparent;
+}
+
+.customer-van-model_footer button[type="warn"].customer-van-model_confirm {
+  width: 50%;
+  height: 104rpx;
+  color: #DC4F3F;
+  font-size: 32rpx;
+  font-weight: 500;
+  line-height: 48rpx;
+  background: transparent;
+}

htmldev/wxMini/pages/mine/mine.js

@@ -3,7 +3,10 @@ Page({
   /**
    * 页面的初始数据
    */
-  data: {},
+  data: {
+    booLogout: false,
+    booLock: false
+  },
 
   /**
    * 生命周期函数--监听页面加载
@@ -45,5 +48,40 @@ Page({
     wx.navigateTo({
       url: `/pages/${page}/${page}`
     })
+  },
+  showLogout() {
+    this.setData({
+      booLogout: true
+    })
+  },
+  hideLogout() {
+    this.setData({
+      booLogout: false
+    })
+  },
+  async confirmLogout() {
+    this.setData({
+      booLock: true
+    })
+    try {
+      const { status, msg } = await userLoginOut()
+      if (status) {
+        this.hideLogout()
+        wx.removeStorageSync(sessionStorageKey)
+        // 更新用户信息
+        app.globalData.userInfo = {}
+        wx.reLaunch({
+          url: '/pages/mine/mine'
+        })
+      } else {
+        wx.showToast({
+          title: msg,
+          icon: 'none'
+        })
+      }
+    } catch (e) {}
+    this.setData({
+      booLock: false
+    })
   }
 })

htmldev/wxMini/pages/mine/mine.json

@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
-}
+  "usingComponents": {
+    "van-popup": "@vant/weapp/popup/index"
+  }
+}

htmldev/wxMini/pages/mine/mine.wxml

@@ -64,8 +64,32 @@
   </view>
   <button
     class="logout"
-    type="primary">退出当前账号
+    type="primary"
+    bind:tap="showLogout">退出当前账号
   </button>
 </view>
   <!--自定义tabbar页面被遮挡-->
 <view style="padding-bottom:25%;"></view>
+
+  <!-- 弹窗：退出登录二次确认 -->
+<van-popup
+  custom-class="customer-van-model"
+  show="{{ booLogout }}"
+  bind:close="hideLogout">
+  <view class="customer-van-model_body">
+    <view class="content">确认退出登录？</view>
+  </view>
+  <view class="customer-van-model_footer">
+    <button class="customer-van-model_cancel"
+            hover-class="none"
+            type="default"
+            bind:tap="hideLogout">取消
+    </button>
+    <button class="customer-van-model_confirm"
+            hover-class="none"
+            type="primary"
+            disabled="{{booLock}}"
+            bind:tap="confirmLogout">确定
+    </button>
+  </view>
+</van-popup>