feat: mobile page refactor is finished

web/src/views/mobile/Profile.vue

@@ -1,33 +1,34 @@
 <template>
   <div class="mobile-user-profile container">
-    <van-nav-bar :title="title"/>
-
     <div class="content">
       <van-form>
+        <div class="avatar">
+          <van-uploader v-model="fileList"
+                        reupload max-count="1"
+                        :deletable="false"
+                        :after-read="afterRead"/>
+        </div>
         <van-cell-group inset v-model="form">
           <van-field
               v-model="form.username"
-              name="账号"
               label="账号"
               readonly
               disabled
           />
-          <van-field label="头像">
-            <template #input>
-              <van-uploader v-model="fileList"
-                            reupload max-count="1"
-                            :deletable="false"
-                            :after-read="afterRead"/>
-            </template>
-          </van-field>
+          <van-field
+              v-model="form.nickname"
+              label="昵称"
+              readonly
+              disabled
+          />
 
-          <van-field label="剩余算力">
+          <van-field label="算力">
             <template #input>
               <van-tag type="primary">{{ form.power }}</van-tag>
             </template>
           </van-field>
 
-          <van-field label="会员有效期" v-if="form.expired_time > 0">
+          <van-field label="有效期" v-if="form.expired_time > 0">
             <template #input>
               <van-tag type="warning">{{ dateFormat(form.expired_time) }}</van-tag>
             </template>
@@ -36,8 +37,15 @@
         </van-cell-group>
       </van-form>
 
-      <div class="modify-pass">
-        <van-button round block type="primary" @click="showPasswordDialog = true">修改密码</van-button>
+      <div class="opt" v-if="isLogin">
+        <van-row :gutter="10">
+          <van-col :span="12">
+            <van-button round block type="primary" @click="showPasswordDialog = true">修改密码</van-button>
+          </van-col>
+          <van-col :span="12">
+            <van-button round block @click="logout">退出登录</van-button>
+          </van-col>
+        </van-row>
       </div>
 
       <div class="product-list">
@@ -114,23 +122,22 @@ import {onMounted, ref} from "vue";
 import {showFailToast, showNotify, showSuccessToast} from "vant";
 import {httpGet, httpPost} from "@/utils/http";
 import Compressor from 'compressorjs';
-import {dateFormat} from "@/utils/libs";
+import {dateFormat, showLoginDialog} from "@/utils/libs";
 import {ElMessage} from "element-plus";
 import {checkSession} from "@/action/session";
 import {useRouter} from "vue-router";
+import {removeUserToken} from "@/store/session";
 
-const title = ref('用户设置')
 const form = ref({
-  username: '',
-  nickname: '',
-  mobile: '',
+  username: 'GeekMaster',
+  nickname: '极客学长@001',
+  mobile: '1300000000',
   avatar: '',
-  calls: 0,
-  tokens: 0
+  power: 0,
 })
 const fileList = ref([
   {
-    url: '',
+    url: '/images/user-info.png',
     message: '上传中...',
   }
 ]);
@@ -139,11 +146,13 @@ const products = ref([])
 const vipMonthPower = ref(0)
 const payWays = ref({})
 const router = useRouter()
-const loginUser = ref(null)
+const userId = ref(0)
+const isLogin = ref(false)
 
 onMounted(() => {
   checkSession().then(user => {
-    loginUser.value = user
+    userId.value = user.id
+    isLogin.value = true
     httpGet('/api/user/profile').then(res => {
       form.value = res.data
       fileList.value[0].url = form.value.avatar
@@ -151,28 +160,27 @@ onMounted(() => {
       console.log(e.message)
       showFailToast('获取用户信息失败')
     });
-
-    // 获取产品列表
-    httpGet("/api/product/list").then((res) => {
-      products.value = res.data
-    }).catch(e => {
-      showFailToast("获取产品套餐失败：" + e.message)
-    })
-
-    httpGet("/api/config/get?key=system").then(res => {
-      vipMonthPower.value = res.data['vip_month_power']
-    }).catch(e => {
-      showFailToast("获取系统配置失败：" + e.message)
-    })
-
-    httpGet("/api/payment/payWays").then(res => {
-      payWays.value = res.data
-    }).catch(e => {
-      ElMessage.error("获取支付方式失败：" + e.message)
-    })
-
   }).catch(() => {
-    router.push("/login")
+
+  })
+
+  // 获取产品列表
+  httpGet("/api/product/list").then((res) => {
+    products.value = res.data
+  }).catch(e => {
+    showFailToast("获取产品套餐失败：" + e.message)
+  })
+
+  httpGet("/api/config/get?key=system").then(res => {
+    vipMonthPower.value = res.data['vip_month_power']
+  }).catch(e => {
+    showFailToast("获取系统配置失败：" + e.message)
+  })
+
+  httpGet("/api/payment/payWays").then(res => {
+    payWays.value = res.data
+  }).catch(e => {
+    ElMessage.error("获取支付方式失败：" + e.message)
   })
 
 })
@@ -244,10 +252,14 @@ const updatePass = () => {
 }
 
 const pay = (payWay, item) => {
+  if (!isLogin.value) {
+    return showLoginDialog(router)
+  }
+
   httpPost("/api/payment/mobile", {
     pay_way: payWay,
     product_id: item.id,
-    user_id: loginUser.value.id
+    user_id: userId.value
   }).then(res => {
     // console.log(res.data)
     location.href = res.data
@@ -255,20 +267,38 @@ const pay = (payWay, item) => {
     showFailToast("生成支付订单失败：" + e.message)
   })
 }
+
+const logout = function () {
+  httpGet('/api/user/logout').then(() => {
+    removeUserToken();
+    router.push('/');
+  }).catch(() => {
+    showFailToast('注销失败！');
+  })
+}
 </script>
 
 <style lang="stylus">
 .mobile-user-profile {
   .content {
-    padding-top 46px
+    padding-top 15px
     padding-bottom 60px
 
+    .avatar {
+      display flex
+      justify-content center
+
+      .van-image {
+        border-radius 50%
+      }
+    }
+
     .van-field__label {
       width 100px
       text-align right
     }
 
-    .modify-pass {
+    .opt {
       padding 10px 15px
     }