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

@@ -4,15 +4,17 @@
       <div class="info">
         <van-row>
           <van-col>
-            <van-image round width="50" height="50" src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
-              style="padding-right: 1rem;" />
+            <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="toggle-user" @click="toggleUser"><van-icon name="plus" />&nbsp;关注</div>
+              <div class="username">{{ userInfo.name }}</div>
+              <div v-if="!userInfo.is_follow" class="toggle-user" @click="followUser()">
+                <van-icon name="plus" />&nbsp;关注
+              </div>
+              <div v-else class="toggle-user" @click="followUser()">&nbsp;取消关注</div>
             </div>
-            <div class="address">呼和浩特市新城区蒙古族幼儿园</div>
+            <div class="address">{{ userInfo.kg_name }}</div>
           </van-col>
         </van-row>
       </div>
@@ -21,74 +23,94 @@
         <van-row>
           <van-col span="11" offset="1" class="un-tap-color">
             <p>获赞</p>
-            <p>25478</p>
+            <p>{{ userInfo.like_num }}</p>
           </van-col>
           <van-col span="1" class="divide">|</van-col>
           <van-col span="11" class="un-tap-color">
             <p>粉丝</p>
-            <p>45</p>
+            <p>{{ userInfo.fans_num }}</p>
           </van-col>
         </van-row>
       </div>
     </div>
-    <div style="padding: 0 1rem; background-color: #F7F7F7;">
+    <div class="list-title">
       <van-row>
         <van-col span="6">
-          <div style="color: #222222; font-size: 1.1rem; border-bottom: 2px solid #F9D95C; padding: 0.5rem; text-align: center;">发布作品</div>
+          <div class="title">发布作品</div>
         </van-col>
         <van-col span="12" offset="6" style="text-align: right; color: #626262;">
-          <div style="padding-top: 0.5rem;">6个作品</div>
+          <div style="padding-top: 0.5rem;">{{ userInfo.prod?.length }}个作品</div>
         </van-col>
       </van-row>
     </div>
     <div>
-      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
-        <template v-for="item in dataList" :key="item" style="height: 3rem;">
-          <video-card :item="item"></video-card>
-        </template>
-      </van-list>
+      <template v-for="item in userInfo.prod" :key="item" style="height: 3rem;">
+        <video-card :item="item"></video-card>
+      </template>
+      <div style="height: 2rem;"></div>
     </div>
   </div>
 </template>
 
 <script setup>
-import dataList from '@/mock/video_list'
 import VideoCard from '@/components/VideoCard/index.vue'
 
-import { ref, reactive, onMounted } from 'vue'
+import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios';
-import $ from 'jquery'
 import { Toast } from 'vant';
 const $route = useRoute();
 const $router = useRouter();
 
-// 处理书籍下作品列表
-const list = ref([]);
-const loading = ref(false);
-const finished = ref(false);
-
-const onLoad = () => {
-  // 异步更新数据
-  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
-  setTimeout(() => {
-    for (let i = 0; i < 20; i++) {
-      list.value.push(list.value.length + 1);
+// 获取表演者信息
+const userInfo = ref({})
+axios.get('/srv/?a=perf_info', {
+  params: {
+    perf_id: $route.query.perf_id
+  }
+})
+  .then(res => {
+    if (res.data.code === 1) {
+      userInfo.value = res.data.data;
+    } else {
+      console.warn(res);
+      Toast({
+        icon: 'close',
+        message: res.data.msg
+      });
     }
-
-    // 加载状态结束
-    loading.value = false;
-
-    // 数据全部加载完成
-    if (list.value.length >= 100) {
-      finished.value = true;
+  })
+  .catch(err => {
+    console.error(err);
+  });
+
+// 关注个人用户
+const followUser = (status) => {
+  axios.post('/srv/?a=add_follow', {
+    perf_id: $route.query.perf_id
+  })
+  .then(res => {
+    if (res.data.code === 1) {
+      if (res.data.msg === 'add follow OK') {
+        userInfo.value.is_follow = 1
+        Toast.success('关注成功')
+      } else {
+        userInfo.value.is_follow = 0
+        Toast.success('取消关注')
+      }
+    } else {
+      console.warn(res);
+      Toast({
+        icon: 'close',
+        message: res.data.msg
+      });
     }
-  }, 1000);
+  })
+  .catch(err => {
+    console.error(err); 
+  })
 };
 
-onMounted(() => {
-
-})
 </script>
 
 <script>
@@ -165,5 +187,17 @@ export default {
       }
     }
   }
+
+  .list-title {
+    padding: 0 1rem;
+    background-color: #F7F7F7;
+    .title {
+      color: #222222; 
+      font-size: 1.1rem; 
+      border-bottom: 2px solid #F9D95C; 
+      padding: 0.5rem; 
+      text-align: center;
+    }
+  }
 }
 </style>
\ No newline at end of file