API请求接口封装

 import axios from '@/utils/axios';
+import { fn } from '@/api/fn';
 
 const Api = {
   CHANGE_PERFORMER: '/srv/?a=change_performer', // 切换儿童角色
+  MY_INFO: '/srv/?a=my_info', // 儿童角色信息
+  MY_PERFORMER: '/srv/?a=my_performer', // 角色列表信息
 }
 
-export const changePerformerAPI = (params) => axios.post(Api.CHANGE_PERFORMER, params)
+export const changePerformerAPI = (params) => fn(axios.post(Api.CHANGE_PERFORMER, params))
+
+export const myInfoAPI = (params) => fn(axios.get(Api.MY_INFO, { params }))
+
+export const myPerformerAPI = (params) => fn(axios.get(Api.MY_PERFORMER, { params }))

@@ -9,7 +9,7 @@ export const fn = (api) => {
   return api
     .then(res => {
       if (res.data.code === 1) {
-        return res.data.data;
+        return res.data.data || true;
       } else {
         console.warn(res);
         if (!res.data.show) return false;
@@ -17,9 +17,11 @@ export const fn = (api) => {
           icon: 'close',
           message: res.data.msg
         });
+        return false;
       }
     })
     .catch(err => {
       console.error(err);
+      return false;
     })
 }

@@ -4,13 +4,15 @@
       <div class="info">
         <van-row>
           <van-col>
-            <van-image v-if="userInfo.avatar" @click="handleUser('EDIT')" round width="50" height="50" :src="userInfo.avatar" style="padding-right: 1rem;" />
-            <van-image v-else @click="handleUser('EDIT')" round width="50" height="50" :src="icon_avatar" style="padding-right: 1rem;" />
+            <van-image v-if="userInfo.avatar" @click="handleUser('EDIT')" round width="50" height="50"
+              :src="userInfo.avatar" style="padding-right: 1rem;" />
+            <van-image v-else @click="handleUser('EDIT')" round width="50" height="50" :src="icon_avatar"
+              style="padding-right: 1rem;" />
           </van-col>
           <van-col class="text-wrapper" span="18">
             <div>
               <div class="username">{{ userInfo.name }}</div>
-              <div v-if="actions.length" class="toggle-user" @click="toggleUser">切换儿童</div>
+              <div v-if="actions.length" class="toggle-user" @click="show = true">切换儿童</div>
             </div>
             <div class="address">{{ userInfo.kg_name }}</div>
           </van-col>
@@ -36,7 +38,9 @@
           <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">{{ userInfo.unplay_num }}</van-tag></p>
+            <p>
+              <van-tag round color="red">{{ userInfo.unplay_num }}</van-tag>
+            </p>
           </van-col>
         </van-row>
       </div>
@@ -44,11 +48,13 @@
 
     <div class="van-hairline--bottom sub-handle">
       <div>
-        <my-button v-if="userInfo.status === 'apply'" 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 v-if="userInfo.status === 'enable'" type="custom" :custom-style="styleObject2" @on-click="handleUser('ADD')">新增儿童</my-button>
+        <my-button v-if="userInfo.status === 'enable'" type="custom" :custom-style="styleObject2"
+          @on-click="handleUser('ADD')">新增儿童</my-button>
         <my-button v-else type="custom" :custom-style="styleObject4" @on-click="showNotice = true">新增儿童</my-button>
       </div>
     </div>
@@ -59,8 +65,11 @@
           <van-col span="12">{{ item.name }}</van-col>
           <van-col span="12" style="text-align: right; color: #777777;">
             <span v-if="!item.tag">{{ item.sum }}&nbsp;&nbsp;</span>
-            <span v-else><van-tag round color="red">{{ item.sum }}</van-tag>&nbsp;&nbsp;</span>
-          <van-icon name="arrow" /></van-col>
+            <span v-else>
+              <van-tag round color="red">{{ item.sum }}</van-tag>&nbsp;&nbsp;
+            </span>
+            <van-icon name="arrow" />
+          </van-col>
         </van-row>
       </div>
     </template>
@@ -78,23 +87,13 @@
 </template>
 
 <script setup>
-import { mainStore } from '@/store'
-
-import icon_avatar from '@images/que-touxiang@2x.png'
-
-import MyButton from '@/components/MyButton/index.vue'
-import NoticeOverlay from '@/components/NoticeOverlay/index.vue'
-
 import { ref, reactive, onMounted } from 'vue'
-import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
-import axios from '@/utils/axios';
-import $ from 'jquery'
-import _ from 'lodash'
-import { Toast } from 'vant';
-
-import { changePerformerAPI } from '@/api/C/me.js'
+import { useRouter } from 'vue-router'
+import { _, mainStore } from '@/utils/generatePackage.js'
+import { MyButton, NoticeOverlay } from '@/utils/generateModules.js'
+import { icon_avatar } from '@/utils/generateIcons.js'
+import { changePerformerAPI, myInfoAPI, myPerformerAPI } from '@/api/C/me.js'
 
-const $route = useRoute();
 const $router = useRouter();
 
 // 删除 keep-alive 缓存
@@ -102,82 +101,12 @@ const store = mainStore();
 store.changeKeepPages('clear');
 
 // onBeforeRouteLeave(() => {
-  // 重置位置缓存
-  // store.changeScrollTopCollection(0);
-  // store.changeScrollTopLike(0);
+// 重置位置缓存
+// store.changeScrollTopCollection(0);
+// store.changeScrollTopLike(0);
 // })
 
-/********** 切换用户功能 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);
-    if (!res.data.show) return false;
-    Toast({
-      icon: 'close',
-      message: res.data.msg
-    });
-  }
-})
-.catch(err => {
-  console.error(err); 
-})
-
-const toggleUser = () => {
-  show.value = true;
-}
-
-const onSelect = (item) => {
-  // 默认情况下点击选项时不会自动收起
-  // 可以通过 close-on-click-action 属性开启自动收起
-  show.value = false;
-  // 切换当前角色
-  changePerformerAPI({
-    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);
-          if (!res.data.show) return false;
-          Toast({
-            icon: 'close',
-            message: res.data.msg
-          });
-        }
-      })
-      .catch(err => {
-        console.error(err); 
-      })
-    } else {
-      console.warn(res);
-      if (!res.data.show) return false;
-      Toast({
-        icon: 'close',
-        message: res.data.msg
-      });
-    }
-  })
-  .catch(err => {
-    console.error(err); 
-  })
-};
-
-/********** 切换用户功能 END *************/
-
+const userInfo = ref({});
 // 查询用户信息
 const itemList = [
   {
@@ -226,28 +155,33 @@ const itemList = [
   },
 ]
 
-const userInfo = ref({})
-axios.get('/srv/?a=my_info')
-.then(res => {
-  if (res.data.code === 1) {
-    userInfo.value = res.data.data;
+// 异步获取我的列表数量信息
+async function getMySum() {
+  userInfo.value = await myInfoAPI();
   _.each(itemList, item => {
     item.sum = userInfo.value[item.key]
   });
-  } else {
-    console.warn(res);
-    if (!res.data.show) return false;
-    Toast({
-      icon: 'close',
-      message: res.data.msg
-    });
-  }
-})
-.catch(err => {
-  console.error(err); 
-})
+}
+
+onMounted(async () => {
+  actions.value = await myPerformerAPI();
+  getMySum();
+});
+
+/********** 切换用户功能 START *************/
+const show = ref(false);
+let actions = ref([]); // 角色列表容器
 
-/************************************************ */
+const onSelect = async (item) => {
+  // 默认情况下点击选项时不会自动收起
+  // 可以通过 close-on-click-action 属性开启自动收起
+  show.value = false;
+  // 切换当前角色
+  if (await changePerformerAPI({ perf_id: item.id })) {
+    getMySum()
+  }
+};
+/********** 切换用户功能 END *************/
 
 // 跳转相关页面
 const goTo = (path) => {
@@ -335,7 +269,6 @@ const getUnwatch = () => {
 
 <script>
 import mixin from 'common/mixin';
-import Cookies from 'js-cookie'
 
 export default {
   mixins: [mixin.init],
@@ -356,17 +289,21 @@ export default {
 .me-index-page {
   .header-wrapper {
     background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%);
+
     .info {
       padding: 2rem;
       padding-right: 0;
+
       .text-wrapper {
         line-height: 1.5;
+
         .username {
           display: inline-block;
           overflow: auto;
           font-size: 1.15rem;
           color: #222222;
         }
+
         .toggle-user {
           float: right;
           font-size: 0.8rem;
@@ -376,22 +313,27 @@ export default {
           color: #713610;
         }
       }
+
       .address {
         font-size: 0.85rem;
         color: #999999;
         opacity: 0.8;
       }
     }
+
     .sub-data {
       text-align: center;
       overflow: auto;
       padding-bottom: 1rem;
+
       .un-tap-color {
         color: #666666;
       }
+
       .tap-color {
         color: #713610;
       }
+
       .divide {
         line-height: 2.5;
         color: #999999;
@@ -399,21 +341,25 @@ export default {
       }
     }
   }
+
   .sub-handle {
     padding: 1rem 0;
     margin: 0 1rem;
     overflow: auto;
+
     div:first-child {
       width: 48%;
       float: left;
       margin-right: 2%;
     }
+
     div:last-child {
       width: 48%;
       float: left;
       margin-left: 2%;
     }
   }
+
   .item-list {
     padding: 1rem 0;
     margin: 0 1rem;