✨ feat(我的详情页): 接口联调

hookehuyr
Commit ce30a24c245c2a7278efb76fadfaec43536d4ffd ce30a24c 1 parent b109b76f
Showing 1 changed file with 142 additions and 37 deletions
src/views/me/index.vue
--- a/src/views/me/index.vue
View file @ce30a24
+++ b/src/views/me/index.vue
View file @ce30a24
@@ -4,15 +4,15 @@
       <div class="info">
         <van-row>
           <van-col>
-            <van-image round width="50" height="50" src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+            <van-image round width="50" height="50" :src="userInfo.avatar"
               style="padding-right: 1rem;" />
           </van-col>
           <van-col class="text-wrapper" span="18">
             <div>
-              <div class="username">瑟日古娜</div>
+              <div class="username">{{ userInfo.name }}</div>
               <div class="toggle-user" @click="toggleUser">切换儿童</div>
             </div>
-            <div class="address">呼和浩特市新城区蒙古族幼儿园</div>
+            <div class="address">{{ userInfo.kg_name }}</div>
           </van-col>
         </van-row>
       </div>
@@ -21,22 +21,22 @@
         <van-row>
           <van-col span="5" offset="1" class="un-tap-color">
             <p>获赞</p>
-            <p>25478</p>
+            <p>{{ userInfo.perf_like_num }}</p>
           </van-col>
           <van-col span="1" class="divide">|</van-col>
           <van-col span="5" class="un-tap-color">
             <p>粉丝</p>
-            <p>45</p>
+            <p>{{ userInfo.fans_num }}</p>
           </van-col>
           <van-col span="1" class="divide">|</van-col>
           <van-col span="5" @click="getFollow">
             <p class="tap-color">关注</p>
-            <p>26</p>
+            <p>{{ userInfo.follow_num }}</p>
           </van-col>
           <van-col span="1" class="divide">|</van-col>
           <van-col span="5" @click="getUnwatch">
             <p class="tap-color">未看</p>
-            <p><van-tag round color="red">28</van-tag></p>
+            <p><van-tag round color="red">{{ userInfo.unplay_num }}</van-tag></p>
           </van-col>
         </van-row>
       </div>
@@ -44,7 +44,8 @@
     <div class="van-hairline--bottom sub-handle">
       <div>
-        <my-button type="custom" :custom-style="styleObject1" @on-click="goTo('/me/verifyUser')">实名认证</my-button>
+        <my-button v-if="userInfo.status === 'apply'" type="custom" :custom-style="styleObject1" @on-click="goTo('/me/verifyUser')">实名认证</my-button>
+        <my-button v-else type="custom" :custom-style="styleObject3">已认证</my-button>
       </div>
       <div>
         <my-button type="custom" :custom-style="styleObject2" @on-click="goTo('/me/addUser')">新增儿童</my-button>
@@ -63,6 +64,8 @@
       </div>
     </template>
   </div>
+
+  <van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />
 </template>
 <script setup>
@@ -72,73 +75,178 @@ import { ref, reactive, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios';
 import $ from 'jquery'
+import _ from 'lodash'
 import { Toast } from 'vant';
 const $route = useRoute();
 const $router = useRouter();
-// 切换用户功能
+
+/********** 切换用户功能 START *************/
+
+const show = ref(false);
+let actions = ref([]);
+axios.get('/srv/?a=my_performer')
+.then(res => {
+  if (res.data.code === 1) {
+    actions.value = res.data.data;
+  } else {
+    console.warn(res);
+    Toast({
+      icon: 'close',
+      message: res.data.msg
+    });
+  }
+})
+.catch(err => {
+  console.error(err); 
+})
+
 const toggleUser = () => {
-  console.warn('切换儿童');
+  show.value = true;
 }
-// 跳转相关页面
+
-const goTo = (path) => {
+const onSelect = (item) => {
-  $router.push({
+  // 默认情况下点击选项时不会自动收起
-    path: path
+  // 可以通过 close-on-click-action 属性开启自动收起
+  show.value = false;
+  // 切换当前角色
+  axios.post('/srv/?a=change_performer', {
+    perf_id: item.id
   })
-}
+  .then(res => {
+    if (res.data.code === 1) {
+      // 重新获取新角色的信息
+      axios.get('/srv/?a=my_info')
+      .then(res => {
+        if (res.data.code === 1) {
+          userInfo.value = res.data.data;
+          _.each(itemList, item => {
+            item.sum = userInfo.value[item.key]
+          });
+        } else {
+          console.warn(res);
+          Toast({
+            icon: 'close',
+            message: res.data.msg
+          });
+        }
+      })
+      .catch(err => {
+        console.error(err); 
+      })
+    } else {
+      console.warn(res);
+      Toast({
+        icon: 'close',
+        message: res.data.msg
+      });
+    }
+  })
+  .catch(err => {
+    console.error(err); 
+  })
+};
-// 自定义按钮颜色样式
+/********** 切换用户功能 END *************/
-const styleObject1 = reactive({
-  backgroundColor: '#FFFFFF',
-  color: '#713610',
-  borderColor: '#713610'
-})
-const styleObject2 = reactive({
-  backgroundColor: '#FFFFFF',
-  color: '#0B3A72',
-  borderColor: '#0B3A72'
-})
+// 查询用户信息
 const itemList = [
   {
     name: '我的捐赠',
-    sum: '5',
+    key: 'donate_num',
+    sum: 0,
     to: '/me/donateList'
   },
   {
     name: '我的作品',
-    sum: '5',
+    key: 'prod_num',
+    sum: 0,
     to: '/me/videoList'
   },
   {
     name: '我的订阅',
-    sum: '5',
+    key: 'subs_num',
+    sum: 0,
     to: '/me/subscribe'
   },
   {
     name: '我的收藏',
-    sum: '5',
+    key: 'favor_num',
+    sum: 0,
     to: '/me/collection'
   },
   {
     name: '我的点赞',
-    sum: '5',
+    key: 'like_num',
+    sum: 0,
     to: '/me/like'
   },
   {
     name: '我的留言',
-    sum: '2',
+    key: 'comment_num',
+    sum: 0,
     tag: true,
     to: '/me/message'
   },
   {
     name: '@我的',
-    sum: '2',
+    key: 'reply_num',
+    sum: 0,
     tag: true,
     to: '/me/callMe'
   },
 ]
+const userInfo = ref({})
+axios.get('/srv/?a=my_info')
+.then(res => {
+  if (res.data.code === 1) {
+    userInfo.value = res.data.data;
+    _.each(itemList, item => {
+      item.sum = userInfo.value[item.key]
+    });
+  } else {
+    console.warn(res);
+    Toast({
+      icon: 'close',
+      message: res.data.msg
+    });
+  }
+})
+.catch(err => {
+  console.error(err); 
+})
+
+/************************************************ */
+
+// 跳转相关页面
+const goTo = (path) => {
+  $router.push({
+    path: path,
+    query: {
+      kg_id: userInfo.value.kg_id,
+      kg_name: userInfo.value.kg_name
+    }
+  })
+}
+
+// 自定义按钮颜色样式
+const styleObject1 = reactive({
+  backgroundColor: '#FFFFFF',
+  color: '#713610',
+  borderColor: '#713610'
+})
+const styleObject2 = reactive({
+  backgroundColor: '#FFFFFF',
+  color: '#0B3A72',
+  borderColor: '#0B3A72'
+})
+const styleObject3 = reactive({
+  backgroundColor: '#FFFFFF',
+  color: '#FDD347',
+  borderColor: '#FDD347'
+})
+
 const getFollow = () => {
   $router.push({
     path: '/me/followList'
@@ -149,10 +257,6 @@ const getUnwatch = () => {
     path: '/me/unwatchList'
   })
 }
-
-onMounted(() => {
-
-})
 </script>
 <script>
@@ -201,6 +305,7 @@ export default {
       .address {
         font-size: 0.85rem; 
         color: #999999;
+        opacity: 0.8;
       }
     }
     .sub-data {