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

<route lang="yaml">
style:
  navigationBarTitleText: 设计师详情
  navigationBarBackgroundColor: '#fff'
  navigationStyle: custom
</route>

<script setup lang="ts">
import NavbarEvo from '@/components/navbar-evo.vue'
import { getFollowUpPage, getUserInfoById } from '../../../core/libs/agent-requests'
import {
  desinTopBg,
  rightArrowIcon,
  vipIcon,
  locationIcon,
  shareIcon,
  praiseIcon,
  messageIcon,
  yinyongIcon,
} from '@designer-hub/assets/src/svgs'
import PageHelperEvo from '@/components/page-helper-evo.vue'
import { dayjs } from 'wot-design-uni'
import { toHomePage } from '../../../core/libs/actions'
const id = ref()
const { data, run: setData } = useRequest(() => getUserInfoById(id.value))
const tab = ref('followUp')
const tabs = ref([
  { label: '数据动态', value: 'integral' },
  { label: '跟进记录', value: 'followUp' },
  // { label: '圈子动态', value: 'interact' },
  { label: '兑换商品', value: 'product' },
])
const followUpQuery = ref({})
const toPointsDetails = () => {
  uni.navigateTo({ url: '/pages/designer/points_details/index' })
}
const toOrderDetails = () => {
  uni.navigateTo({ url: '/pages/mine/merchant/orders/detail/index' })
}
const toArchives = () => {
  uni.navigateTo({ url: '/pages/agent/designer/archives/index?id=' + id.value })
}
onLoad(async (query: { id: string }) => {
  id.value = query.id
  await setData()
})
</script>

<template>
  <view>
    <NavbarEvo placeholder transparent dark></NavbarEvo>
    <div class="aspect-[1.575/1] absolute left-0 right-0 top-0">
      <wd-img width="100%" height="100%" :src="desinTopBg" custom-class="vertical-top"></wd-img>
    </div>
    <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" />
        </div>
        <div class="flex-1 ml-[11px]">
          <div class="flex flex-col w-[100%]">
            <div class="flex-row flex items-center justify-between w-full">
              <div class="flex-row flex items-center">
                <div
                  class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-[10.18px]"
                >
                  <!-- 苏小萌 -->
                  {{ data?.name }}
                </div>

                <div
                  class="h-4 bg-neutral-100 rounded-[20px] justify-start items-center inline-flex flex-row ml-[9px]"
                >
                  <wd-img width="17" height="17" :src="vipIcon"></wd-img>

                  <div
                    class="text-black/40 text-[10px] font-normal font-['PingFang_SC'] px-[7px] leading-none"
                  >
                    白银会员
                  </div>
                </div>
              </div>
              <div
                class="text-black/60 text-xs font-normal font-['PingFang_SC'] leading-snug flex items-center"
                @click="toHomePage(id.value)"
              >
                <div>个人主页</div>
                <wd-img width="13" height="13" :src="rightArrowIcon"></wd-img>
              </div>
            </div>
          </div>
          <div
            class="mt-4 px-1.5 py-1 bg-[#f0f3ff] rounded justify-center items-center gap-px inline-flex"
            @click="toArchives"
          >
            <div class="text-[#2357e9] text-xs font-normal font-['PingFang_SC'] leading-3">
              个人档案
            </div>
            <wd-icon name="arrow-right" size="13" color="#2357e9"></wd-icon>
          </div>
        </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'">
          <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">
                积分动态
              </div>
              <div
                class="text-black/30 text-xs font-normal font-['PingFang_SC'] leading-none"
                @click="toPointsDetails"
              >
                积分明细
              </div>
            </div>
            <div class="mt-3 grid grid-cols-3 gap-2.5">
              <template
                v-for="{ name, value } of [
                  { name: '当前剩余积分', des: '最近', value: 220 },
                  { name: '累计获得积分', des: '本年', value: 220 },
                  { name: '累计消耗积分', des: '本年', value: 220 },
                  { name: '累计跟进次数', des: '本年', value: 220 },
                  { name: '累计消耗次数', des: '本年', value: 220 },
                  { name: '累计获得次数', des: '本年', value: 220 },
                ]"
                :key="name"
              >
                <div class="rounded-lg aspect-[1/1] flex flex-col justify-around p-2.5">
                  <div class="text-black/60 text-xs font-normal font-['PingFang_SC'] leading-none">
                    {{ name }}
                  </div>
                  <div class="text-black/90 text-lg font-bold font-['D-DIN Exp'] leading-normal">
                    {{ value }}
                  </div>
                  <div class="flex items-center gap-1">
                    <div
                      class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-none"
                    >
                      年新增
                    </div>
                    <div class="text-black/90 text-xs font-normal font-['D-DIN Exp'] leading-norma">
                      20
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <div class="bg-white rounded-2xl shadow pa-[15px] mt-[20px]">
            <div class="flex items-center justify-between">
              <div class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-relaxed">
                使用动态
              </div>
            </div>
            <div class="mt-3 grid grid-cols-3 gap-2.5">
              <template
                v-for="{ name, value } of [
                  { name: '打开次数', des: '最近', value: 220 },
                  { name: '浏览时长', des: '本年', value: 220 },
                  { name: '发圈次数', des: '本年', value: 220 },
                  { name: '主页分享数', des: '本年', value: 220 },
                  { name: '分享浏览数', des: '本年', value: 220 },
                  { name: '分享获客数', des: '本年', value: 220 },
                ]"
                :key="name"
              >
                <div class="rounded-lg aspect-[1/1] flex flex-col justify-around p-2.5">
                  <div class="text-black/60 text-xs font-normal font-['PingFang_SC'] leading-none">
                    {{ name }}
                  </div>
                  <div class="text-black/90 text-lg font-bold font-['D-DIN Exp'] leading-normal">
                    {{ value }}
                  </div>
                  <div class="flex items-center gap-1">
                    <div
                      class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-none"
                    >
                      年新增
                    </div>
                    <div class="text-black/90 text-xs font-normal font-['D-DIN Exp'] leading-norma">
                      20
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <div class="bg-white rounded-2xl shadow pa-[15px] mt-[20px]">
            <div class="flex items-center justify-between">
              <div class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-relaxed">
                最近动态
              </div>
            </div>
            <div class="mt-3">
              <div class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-none">
                苏小萌报名了早稻田深度设计游学
              </div>
              <div
                class="text-black/30 text-xs font-normal font-['PingFang_SC'] leading-none mt-[10px]"
              >
                2024-09-08 14:12
              </div>
            </div>
          </div>
        </view>
        <view class="content mt-[20px]" v-if="tab === '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">
                  <div class="bg-white rounded-2xl shadow pl-[15px] py-[15px] flex-col gap-2 flex">
                    <div class="flex items-center justify-between">
                      <div
                        class="text-black/90 text-base font-normal font-['PingFang SC'] leading-relaxed"
                      >
                        {{ dayjs(it.followTime).format('YYYY-MM-DD HH:mm') }}
                      </div>
                      <div
                        class="text-white text-xs font-normal font-['PingFang_SC'] leading-none pa-[8px]"
                        :class="`${{ 1: 'bg-[#2357E9]', 2: 'bg-[#f8b344]' }[it.followType]}`"
                        style="border-top-left-radius: 15px; border-bottom-left-radius: 5px"
                      >
                        <div class="flex items-center gap-1">
                          <div class="w-1 h-1 bg-white rounded-full border"></div>
                          <!-- 线下拜访 -->
                          {{ it.followTypeName }}
                        </div>
                      </div>
                    </div>
                    <div
                      class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal mr-[15px] mt-[29px]"
                    >
                      <!-- 和周老师在工作碰了环球项目，选了瓷砖款式，后天客户交定金，订单金额初步为
                      304958 -->
                      {{ it.remark }}
                    </div>
                    <div class="mt-[15px] flex gap-2.5">
                      <template v-for="(src, index) in it?.imgUrl?.split(',')" :key="index">
                        <wd-img
                          custom-class="rounded-lg overflow-hidden"
                          width="70"
                          height="70"
                          :src="src"
                        />
                      </template>
                    </div>
                    <div class="flex items-center justify-between mt-[19px]">
                      <div
                        class="h-[25px] px-1.5 bg-[#f4f4f4] rounded-md justify-center items-center gap-1 inline-flex"
                      >
                        <wd-img width="15px" height="15px" :src="locationIcon"></wd-img>

                        <div
                          class="text-black/40 text-[10px] font-normal font-['PingFang_SC'] leading-[25px]"
                        >
                          <!-- 一间空间设计工作室 -->
                          {{ it?.address.address }}
                        </div>
                      </div>
                      <div
                        class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-relaxed mr-[15px]"
                      >
                        渠道：{{ it?.brokerName }}
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </template>
          </PageHelperEvo>
        </view>
        <view class="content mt-[20px]" v-if="tab === ''">
          <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">
                <div
                  class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-[10.18px]"
                >
                  苏小萌
                </div>

                <div
                  class="h-4 bg-neutral-100 rounded-[20px] justify-start items-center inline-flex flex-row ml-[9px]"
                >
                  <wd-img width="17" height="17" :src="vipIcon"></wd-img>

                  <div
                    class="text-black/40 text-[10px] font-normal font-['PingFang_SC'] px-[7px] leading-none"
                  >
                    白银会员
                  </div>
                </div>
              </div>
              <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[10.18px]">
                4小时前
              </div>
            </div>
            <div class="mt-[26px]">
              <img
                class="w-[165px] h-[220px] rounded-lg"
                src="https://via.placeholder.com/165x220"
              />
            </div>
            <div
              class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-[10.18px] mt-[29px]"
            >
              用心做好设计，为客户创造美好家居环境
            </div>
            <div
              class="h-7 py-1.5 rounded-[50px] border border-black/20 justify-start items-center gap-[5px] inline-flex mt-[29px]"
            >
              <wd-img width="17" height="17" :src="yinyongIcon"></wd-img>

              <div class="text-black/60 text-xs font-normal font-['PingFang_SC'] leading-none">
                意大利游学设计班
              </div>
            </div>
            <div class="flex items-center justify-between mt-[19px]">
              <div class="flex items-center gap-[8px]">
                <wd-img width="17" height="17" :src="shareIcon"></wd-img>
                <div class="text-black/90 text-sm font-normal font-['D-DIN Exp'] leading-snug">
                  232
                </div>
              </div>
              <div class="flex items-center gap-[8px]">
                <wd-img width="17" height="17" :src="messageIcon"></wd-img>
                <div class="text-black/90 text-sm font-normal font-['D-DIN Exp'] leading-snug">
                  232
                </div>
              </div>
              <div class="flex items-center gap-[8px]">
                <wd-img width="17" height="17" :src="praiseIcon"></wd-img>
                <div class="text-black/90 text-sm font-normal font-['D-DIN Exp'] leading-snug">
                  232
                </div>
              </div>
            </div>
          </div>
        </view>
        <view class="content mt-[20px]" v-if="tab === 'product'">
          <div
            class="bg-white rounded-2xl shadow pa-[15px] mt-[20px] flex-col gap-2 flex"
            @click="toOrderDetails"
          >
            <div class="bg-white rounded-2xl flex items-center justify-between w-full">
              <div>
                <img class="w-[76px] h-[101px]" src="https://via.placeholder.com/76x101" />
              </div>
              <div class="ml-[16px] flex flex-col justify-start">
                <div class="text-black text-base font-normal font-['PingFang_SC'] leading-normal">
                  阿芙佳朵
                </div>
                <div
                  class="text-left text-black/30 text-sm font-normal font-['PingFang_SC'] leading-normal"
                >
                  x2
                </div>
                <div
                  class="text-left text-black/30 text-sm font-normal font-['PingFang_SC'] leading-normal"
                >
                  600积分
                </div>
              </div>
              <div class="flex-1"></div>
              <div>
                <div class="text-[#2357e9] text-xs font-normal font-['PingFang_SC'] leading-normal">
                  已完成
                </div>
              </div>
            </div>
          </div>
        </view>
      </div>
    </div>
  </view>
</template>

<style scoped lang="scss">
:deep(.wd-tabs) {
  background: transparent;
}
</style>