个人中心

src/pages/home/wode/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full flex flex-col overflow-hidden pb-50px box-border">
+  <div class="h-full flex flex-col overflow-hidden pb-50px box-border" v-loading="loading">
     <van-nav-bar title="个人中心"></van-nav-bar>
     <div class="p-20px flex-1 overflow-auto">
       <div class="relative my-30px">
@@ -16,13 +16,30 @@
       <div class="flex items-center p-4px box-border bg-hex-1A1B22 rounded-12px text-14px">
         <div class="tab_item" :class="activeTab==index?'active':''" v-for="(item, index) in tabData" :key="index" @click="handleClick(index)">{{item}}</div>
       </div>
-      <div class="mt-20px flex">
+      <van-loading class="text-center py-30px" color="#ffffff" v-if="loading === true" size="24px">加载中...</van-loading>
+      <div v-if="!loading" class="mt-20px flex">
         <div class="flex-1 mr-15px">
           <template v-if="activeTab==0">
-            <img class="w-full max-h-190px" :src="syImg" alt="" />
+            <template v-if="syData.length==0">
+              <img class="w-full max-h-190px" :src="syImg" alt="" />
+            </template>
+            <template v-else>
+              <div v-if="syData[0].axa_img" class="h-190px rounded-14px text-center">
+                <img class="max-w-full max-h-full rounded-14px" :src="syData[0].axa_img" alt="图片" />
+              </div>
+              <img v-else class="w-full max-h-190px" :src="syImg" alt="" />
+            </template>
           </template>
           <template v-else>
-            <img class="w-full max-h-190px" :src="xxImg" alt="" />
+            <template v-if="xxData.length==0">
+              <img class="w-full max-h-190px" :src="xxImg" alt="" />
+            </template>
+            <template v-else>
+              <div v-if="xxData[0].axi_img" class="h-190px rounded-14px text-center">
+                <img class="max-w-full max-h-full rounded-14px" :src="xxData[0].axi_img" alt="图片" />
+              </div>
+              <img v-else class="w-full max-h-190px" :src="xxImg" alt="" />
+            </template>
           </template>
         </div>
         <div class="write-vertical-right rounded-5px text-white text-12px bg-white bg-opacity-10 w-30px flex items-center justify-center my-20px tracking-8px" @click="lookMore">查看更多</div>
@@ -39,12 +56,21 @@ import { user } from '~/store/user'
 
 const router = useRouter()
 
+let loading = $ref(false);
 const tabData = $ref(["我的声音", "我的形象"]);
 let activeTab = $ref("");
 
+let syData = $ref([]);
+let xxData = $ref([]);
+
 handleClick(0);
 function handleClick(index) {
   activeTab = index;
+
+  if(index == 0) 
+    initSyData()
+  else if(index == 1) 
+    initXxData()
 }
 
 function lookMore() {
@@ -59,6 +85,36 @@ function lookMore() {
   })
 }
 
+async function initSyData() {
+  let obj = {
+    page: "1",
+    limit: "1",
+    axa_sycj_shzt_v2: "1",
+    create_user_id: user.value.user_id
+  }
+  loading = true;
+  let { code, data } = await request({ url: '/aimooc/xnszr_audio/index', data: obj });
+  if (code == 1) {
+    syData = [...data.page_data];
+    loading = false;
+  }
+}
+
+async function initXxData() {
+  let obj = {
+    page: "1",
+    limit: "1",
+    axi_rxcj_shzt_v2: "1",
+    create_user_id: user.value.user_id
+  }
+  loading = true;
+  let { code, data } = await request({ url: '/aimooc/xnszr_img/index', data: obj });
+  if (code == 1) {
+    xxData = [...data.page_data];
+    loading = false;
+  }
+}
+
 </script>
 
 <style lang="scss" scoped>

src/pages/home/wode/wdsy.vue

@@ -11,9 +11,9 @@
     <div class="p-20px flex-1 overflow-auto">
       <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多数据了" @load="onLoad">
         <div class="grid grid-cols-2 gap-12px">
-          <div v-for="(item, index) in listData" :key="index" @click="handleClick(item)">
+          <div v-for="(item, index) in listData" :key="index" @click="handleListen(item.axa_file)">
             <div v-if="item.axa_img" class="h-110px rounded-14px text-center">
-              <img class="max-w-full h-full rounded-14px" :src="item.axa_img" alt="图片" />
+              <img class="max-w-full max-h-full rounded-14px" :src="item.axa_img" alt="图片" />
             </div>
             <img v-else class="w-full h-110px" :src="voiceImg" alt="" />
             <div class="text-center text-white mt-6px mb-10px">{{ item.axa_name }}</div>
@@ -27,6 +27,7 @@
 <script setup>
 import voiceImg from "~/assets/wode/voice.png";
 import { user } from '~/store/user';
+import { showFailToast } from 'vant';
 const router = useRouter()
 
 function back() {
@@ -83,8 +84,13 @@ function reGetList() {
 }
 
 
-function handleClick() {
-
+const handleListen = (url) => {
+  if (url) {
+    let mp3 = new Audio(url);
+    mp3.play();
+  } else {
+    showFailToast("暂无音频！")
+  }
 }
 </script>
 

src/request/request.ts

@@ -36,7 +36,7 @@ instance.interceptors.request.use(
           token: user.value?.token,
           client: 'web',
           api: 'json',
-          site: 'zjzs',
+          site: 'aimk',
           issubmit: (config.url?.endsWith('add') || config.url?.endsWith('edit')) ? '1' : undefined,
         },
         config.data)