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,
  getPointsCounts,
  getUserInfoById,
  getPointsOrders,
  getBrowseRecordCount,
  getBrowseRecords,
  getBrowseRecordRemarks,
} 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'
import arcBottomBlue from '@designer-hub/assets/src/libs/assets/arcBottomBlue'
import link from '@designer-hub/assets/src/libs/assets/link'
import { useMemberLevelsStore } from '@/store/member-levles'
import { getDesignerPointsActivities } from '@/core/libs/requests'
import { useUserStore } from '@/store'
import { storeToRefs } from 'pinia'
import Card from '@designer-hub/app/src/components/card.vue'
import ListHelperEvo from '@/components/list-helper-evo.vue'
// import { formatDuration } from '@designer-hub/app/src/core/utils/common'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const memberLevelsStore = useMemberLevelsStore()
const { getMemberLevelLogo } = memberLevelsStore
const id = ref()
const { data, run: setData } = useRequest(() => getUserInfoById(id.value))
console.log('getUserInfoById', data)
const active = ref('integral')
const tabs = ref([
  { label: '数据动态', value: 'integral' },
  { label: '跟进记录', value: 'followUp' },
  // { label: '圈子动态', value: 'interact' },
  { label: '兑换记录', value: 'product' },
])
const status = ref({ '0': '已报名', '1': '已完成', '2': '未核销', '3': '已取消', '4': '待交付' })
const followUpQuery = computed(() => ({
  stylistId: id.value,
}))
const { data: browseRecordCount, run: setBrowseRecordCount } = useRequest(() =>
  getBrowseRecordCount(id.value),
)
console.log('browseRecordCount data', data)
const browseRecordCountItems = computed(() => [
  {
    title: '打开次数',
    subTitle: '最近',
    value: browseRecordCount.value?.openNumber ?? 0,
    subValue: browseRecordCount.value?.openTime
      ? dayjs(browseRecordCount.value.openTime).format('YY/MM/DD')
      : '暂无',
  },
  {
    title: '浏览时长',
    subTitle: '本年',
    // 浏览时长 小于60秒，显示秒 大于60秒小于1小时，显示分钟 大于1小时小于1天，显示x小时x分钟 大于1天，显示x天x小时x分钟
    value: formatDuration1(browseRecordCount.value?.duration ?? 0),
    subValue: formatDuration1(browseRecordCount.value?.durationYear ?? 0),
  },
  {
    title: '发圈次数',
    subTitle: '本年',
    value: browseRecordCount.value?.circleNumber ?? 0,
    subValue: browseRecordCount.value?.circleNumberYear ?? 0,
  },
  {
    title: '主页分享数',
    subTitle: '本年',
    value: browseRecordCount.value?.homeShareNumber ?? 0,
    subValue: browseRecordCount.value?.homeShareNumberYear ?? 0,
  },
  {
    title: '主页浏览数',
    subTitle: '本年',
    value: browseRecordCount.value?.shareViewNumber ?? 0,
    subValue: browseRecordCount.value?.shareViewNumberYear ?? 0,
  },
  {
    title: '分享获客数',
    subTitle: '本年',
    value: browseRecordCount.value?.customersAcquired ?? 0,
    subValue: browseRecordCount.value?.customersAcquiredYear ?? 0,
  },
])
const recentActivities = computed(() => [
  { label: '最近浏览品牌', value: '' },
  { label: '最近到店品牌', value: '' },
  { label: '最近浏览游学', value: '' },
  { label: '最近浏览活动', value: '' },
])
const pointsActivitiesQuery = computed(() => ({ stylistId: id.value }))
const toPointsDetails = () => {
  uni.navigateTo({ url: `/pages/agent/designer/points/index?id=${id.value}` })
}
const toOrderDetails = (it: any) => {
  uni.navigateTo({ url: `/pages/common/orders/detail/index?id=${it.id}` })
}
const toArchives = () => {
  uni.navigateTo({ url: '/pages/agent/designer/archives/index?id=' + id.value })
}
const formatDuration = (duration: number) => {
  if (duration < 60) {
    return `${duration}秒`
  } else if (duration < 3600) {
    return `${Math.floor(duration / 60)}分钟`
  } else if (duration < 86400) {
    return `${Math.floor(duration / 3600)}小时${Math.floor((duration % 3600) / 60)}分钟`
  } else {
    return `${Math.floor(duration / 86400)}天${Math.floor((duration % 86400) / 3600)}小时${Math.floor(
      (duration % 3600) / 60,
    )}分钟`
  }
}

function formatDuration1(seconds) {
  if (seconds < 60) {
    return `${seconds}秒`;
  } else if (seconds < 3600) {
    const minutes = Math.floor(seconds / 60);
    return `${minutes}分钟`;
  } else if (seconds < 86400) {
    const hours = Math.floor(seconds / 3600);
    return `${hours}小时`;
  } else {
    const days = Math.floor(seconds / 86400);
    return `${days}天`;
  }
}
onLoad(async (query) => {
  id.value = query?.id
  await setData()
  await Promise.all([setBrowseRecordCount()])
  console.log(browseRecordCount.value)
})
</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 class="relative">
          <wd-img width="64" height="64" round :src="data?.avatar"></wd-img>
          <div v-if="data?.retryStatus === 1" class="absolute right-0 bottom-1">
            <wd-img width="14" height="14" :src="link" round></wd-img>
          </div>
        </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>

                <wd-img
                  v-if="data?.levelId"
                  width="63"
                  height="18.6"
                  :src="getMemberLevelLogo(data?.levelId)"
                ></wd-img>
              </div>
              <div
                class="text-black/60 text-xs font-normal font-['PingFang_SC'] leading-snug flex items-center"
                @click="toHomePage(id)"
              >
                <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>
        <div class="flex items-center justify-around">
          <template v-for="(it, i) in tabs" :key="i">
            <div class="flex flex-col items-center gap-0" @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="arcBottomBlue"
              ></wd-img>
            </div>
          </template>
        </div>

        <view class="content mt-[20px]" v-if="active === 'integral'">
          <Card>
            <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"
              >
                积分明细
                <wd-icon size="12" name="arrow-right" color="rgba(0,0,0,.3)"></wd-icon>
              </div>
            </div>
            <div class="mt-2 w-full h-.25 bg-[#f9f9f9]"></div>
            <ListHelperEvo
              :request="getPointsCounts"
              :query="{ userId: id }"
              content-class="grid grid-cols-3 gap-7 py-4"
            >
              <template #default="{ item }">
                <div class="rounded-lg aspect-[1/1] flex flex-col justify-around">
                  <div class="text-black/60 text-xs font-normal font-['PingFang_SC'] leading-none">
                    {{ item.title }}
                  </div>
                  <div class="text-black/90 text-lg font-bold font-['D-DIN_Exp'] leading-normal">
                    {{ item.value }}
                  </div>
                  <div class="flex items-center gap-1">
                    <div
                      class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-none"
                    >
                      {{ item.subTitle }}
                    </div>
                    <div class="text-black/90 text-xs font-normal font-['D-DIN_Exp'] leading-norma">
                      {{ item.subValue }}
                    </div>
                  </div>
                </div>
              </template>
            </ListHelperEvo>
          </Card>

          <Card custom-class="my-4">
            <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">
              <ListHelperEvo
                :content-class="`grid grid-cols-3 gap-2.5`"
                :items="browseRecordCountItems"
                custom-class="grid grid-cols-3 gap-2.5"
              >
                <template #default="{ item }">
                  <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"
                    >
                      {{ item.title }}
                    </div>
                    <div class="text-black/90 text-lg font-bold font-['D-DIN_Exp'] leading-normal">
                      {{ item.value }}
                    </div>
                    <div class="flex items-center gap-1 whitespace-nowrap">
                      <div
                        class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-none"
                      >
                        {{ item.subTitle }}
                      </div>
                      <div
                        class="text-black/90 text-xs font-normal font-['D-DIN_Exp'] leading-norma"
                      >
                        {{ item.subValue }}
                      </div>
                    </div>
                  </div>
                </template>
              </ListHelperEvo>
            </div>
          </Card>

          <div class="my-4">
            <Card>
              <div class="flex items-center justify-between mb-2">
                <div
                  class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-relaxed"
                >
                  最近动态
                </div>
              </div>
              <div class="w-full h-.25 bg-[#f9f9f9]"></div>
              <ListHelperEvo
                :request="getBrowseRecordRemarks"
                :query="{ userId: id }"
                custom-class="flex flex-col gap-6"
              >
                <template #default="{ item }">
                  <div class="mx-2 flex items-center gap-1 my-6">
                    <div class="w-1 h-1 bg-[#2357e9] rounded-full"></div>
                    <div
                      class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-none"
                    >
                      {{ item }}
                    </div>
                  </div>
                </template>
              </ListHelperEvo>
            </Card>
          </div>

          <PageHelperEvo :request="getDesignerPointsActivities" :query="pointsActivitiesQuery">
            <template #default="{ source }">
              <div class="flex flex-col gap-4">
                <template v-for="(it, index) in source?.list" :key="index">
                  <Card>
                    <div class="">
                      <div
                        class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-none"
                      >
                        {{ it.content }}
                      </div>
                      <div
                        class="text-black/30 text-xs font-normal font-['PingFang_SC'] leading-none mt-[10px]"
                      >
                        {{ dayjs(it.createTime).format('YYYY-MM-DD HH:mm') }}
                      </div>
                    </div>
                  </Card>
                </template>
              </div>
            </template>
          </PageHelperEvo>
        </view>

        <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">
                  <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"
                          :enable-preview="true"
                        />
                      </template>
                    </div>
                    <div class="flex items-center justify-between mt-[19px] relative">
                      <div
                        class="h-[25px] px-1.5 bg-[#f4f4f4] rounded-md justify-center items-center gap-1 inline-flex"
                        v-if="it?.followType == 1"
                      >
                        <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 固定在右侧 -->
                      <div
                        class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-relaxed mr-[15px] absolute right-0"
                        v-if="it?.brokerName"
                      >
                        渠道：{{ it?.brokerName }}
                      </div>
                    </div>

                  </div>
                </template>
              </div>
            </template>
          </PageHelperEvo>
        </view>
        <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">
                <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="active === 'product'">
          <div class="flex-grow flex flex-col gap-4">
            <PageHelperEvo
              ref="pageHelperRef"
              :request="getPointsOrders"
              :query="{ orderType: 2, stylistId: id }"
              class="flex-grow flex flex-col"
            >
              <template #default="{ source }">
                <div class="flex-grow flex flex-col gap-4">
                  <template v-for="(it, i) in source?.list" :key="i">
                    <div @click="toOrderDetails(it)">
                      <Card>
                        <div class="flex gap-4">
                          <wd-img
                            width="94"
                            height="94"
                            custom-class="rounded-2xl overflow-hidden"
                            :src="it.orderImgUrl"
                          />
                          <div class="flex flex-col flex-1">
                            <div
                              class="text-black text-base font-normal font-['PingFang_SC'] leading-normal"
                            >
                              {{ it.projectName }}
                            </div>
                            <div
                              class="text-start text-black/40 text-sm font-normal font-['PingFang_SC'] leading-normal"
                            >
                              x{{ it.orderQuantity || 1 }}
                            </div>
                            <div class="flex-1"></div>
                            <div
                              class="text-start text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal"
                            >
                              {{ it.points }}积分
                            </div>
                          </div>
                          <div>
                            <div
                              class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-normal"
                            >
                              <!-- 已完成 -->
                              {{ status[it.orderStatus] }}
                            </div>
                          </div>
                        </div>
                      </Card>
                    </div>
                  </template>
                </div>
              </template>
            </PageHelperEvo>
          </div>
        </view>
      </div>
    </div>
  </view>
</template>

<style scoped lang="scss"></style>