refactor(agent): 重构设计师详情页面

- 优化页面布局和样式
- 替换 img标签为 wd-img 组件- 重新实现 tabs 切换功能
- 优化数据加载逻辑

packages/merchant/src/pages/agent/designer/detail.vue

@@ -21,9 +21,10 @@ import {
 import PageHelperEvo from '@/components/page-helper-evo.vue'
 import { dayjs } from 'wot-design-uni'
 import { toHomePage } from '../../../core/libs/actions'
+import arcBottom from '@designer-hub/assets/src/libs/assets/arcBottom'
 const id = ref()
 const { data, run: setData } = useRequest(() => getUserInfoById(id.value))
-const tab = ref('followUp')
+const active = ref('followUp')
 const tabs = ref([
   { label: '数据动态', value: 'integral' },
   { label: '跟进记录', value: 'followUp' },
@@ -40,9 +41,9 @@ const toOrderDetails = () => {
 const toArchives = () => {
   uni.navigateTo({ url: '/pages/agent/designer/archives/index?id=' + id.value })
 }
-onLoad(async (query: { id: string }) => {
-  id.value = query.id
-  await setData()
+onLoad((query) => {
+  id.value = query?.id
+  setData()
 })
 </script>
 
@@ -55,7 +56,7 @@ onLoad(async (query: { id: string }) => {
     <div class="p-4 flex flex-col gap-4 relative">
       <div class="bg-white rounded-2xl shadow flex items-center p-4">
         <div>
-          <img class="w-16 h-16 rounded-full" :src="data?.avatar" />
+          <wd-img width="64" height="64" round :src="data?.avatar"></wd-img>
         </div>
         <div class="flex-1 ml-[11px]">
           <div class="flex flex-col w-[100%]">
@@ -101,12 +102,32 @@ onLoad(async (query: { id: string }) => {
         </div>
       </div>
       <div>
-        <wd-tabs v-model="tab">
-          <block v-for="(item, index) in tabs" :key="index">
-            <wd-tab :title="`${item.label}`" :name="item.value"></wd-tab>
-          </block>
-        </wd-tabs>
-        <view class="content mt-[20px]" v-if="tab === 'integral'">
+        <!--        <wd-tabs v-model="tab">-->
+        <!--          <block v-for="(item, index) in tabs" :key="index">-->
+        <!--            <wd-tab :title="`${item.label}`" :name="item.value"></wd-tab>-->
+        <!--          </block>-->
+        <!--        </wd-tabs>-->
+
+        <div class="flex items-center justify-around">
+          <template v-for="(it, i) in tabs" :key="i">
+            <div class="flex flex-col items-center gap-1" @click="active = it.value">
+              <div
+                class="text-center font-normal font-['PingFang_SC'] visible"
+                :class="`${it.value === active ? 'text-black text-lg leading-relaxed ' : 'text-black/60 text-base leading-normal'}`"
+              >
+                {{ it.label }}
+              </div>
+              <wd-img
+                :style="{ visibility: it.value === active ? 'visible' : 'hidden' }"
+                width="17"
+                height="5.6"
+                :src="arcBottom"
+              ></wd-img>
+            </div>
+          </template>
+        </div>
+
+        <view class="content mt-[20px]" v-if="active === 'integral'">
           <div class="bg-white rounded-2xl shadow pa-[15px]">
             <div class="flex items-center justify-between">
               <div class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-relaxed">
@@ -209,11 +230,11 @@ onLoad(async (query: { id: string }) => {
             </div>
           </div>
         </view>
-        <view class="content mt-[20px]" v-if="tab === 'followUp'">
+        <view class="content mt-[20px]" v-if="active === 'followUp'">
           <PageHelperEvo :request="getFollowUpPage" :query="followUpQuery">
             <template #default="{ source }">
               <div class="flex flex-col gap-4">
-                <template v-for="(it, index) in source.list" :key="index">
+                <template v-for="(it, index) in source?.list" :key="index">
                   <div class="bg-white rounded-2xl shadow pl-[15px] py-[15px] flex-col gap-2 flex">
                     <div class="flex items-center justify-between">
                       <div
@@ -275,7 +296,7 @@ onLoad(async (query: { id: string }) => {
             </template>
           </PageHelperEvo>
         </view>
-        <view class="content mt-[20px]" v-if="tab === ''">
+        <view class="content mt-[20px]" v-if="active === ''">
           <div class="bg-white rounded-2xl shadow pa-[15px] mt-[20px] flex-col gap-2 flex">
             <div class="flex-row flex items-center justify-between w-full">
               <div class="flex-row flex items-center">
@@ -343,7 +364,7 @@ onLoad(async (query: { id: string }) => {
             </div>
           </div>
         </view>
-        <view class="content mt-[20px]" v-if="tab === 'product'">
+        <view class="content mt-[20px]" v-if="active === 'product'">
           <div
             class="bg-white rounded-2xl shadow pa-[15px] mt-[20px] flex-col gap-2 flex"
             @click="toOrderDetails"