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

<route lang="yaml">
style:
  navigationBarTitleText: 全部设计师
  navigationBarBackgroundColor: '#fff'
</route>

<script setup lang="ts">
import {
  desinTopBg,
  rightArrowIcon,
  vipIcon,
  locationIcon,
  shareIcon,
  praiseIcon,
  messageIcon,
  yinyongIcon,
} from '@designer-hub/assets/src/svgs'
const tab = ref(0)
const tabs = ref([
  { label: '数据动态', value: 'integral' },
  { label: '跟进记录', value: 'system' },
  { label: '圈子动态', value: 'interact' },
])
const toHomePage = () => {
  uni.navigateTo({ url: '/pages/designer/homepage' })
}
const toPointsDetails = () => {
  uni.navigateTo({ url: '/pages/designer/points_details/index' })
}
</script>

<template>
  <view>
    <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="https://via.placeholder.com/64x64" />
        </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]"
                >
                  苏小萌
                </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"
              >
                <div>个人主页</div>
                <wd-img width="13" height="13" :src="rightArrowIcon"></wd-img>
              </div>
            </div>
          </div>
          <div class="mt-[20px] flex items-center">
            <div class="text-[#2357e9] text-xs font-normal font-['PingFang SC'] leading-none">
              个人信息
            </div>
            <wd-img width="13" height="13" :src="rightArrowIcon"></wd-img>
          </div>
        </div>
      </div>
      <div>
        <wd-tabs v-model="tab">
          <block v-for="(item, index) in tabs" :key="item">
            <wd-tab :title="`${item.label}`">
              <view class="content mt-[20px]" v-if="index === 0">
                <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="index === 1">
                <div
                  class="bg-white rounded-2xl shadow pl-[15px] py-[15px] mt-[20px] 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"
                    >
                      2024-09-02 9:20
                    </div>
                    <div
                      class="text-white text-xs font-normal font-['PingFang SC'] leading-none bg-[#2357E9] pa-[8px]"
                      style="border-top-left-radius: 15px; border-bottom-left-radius: 5px"
                    >
                      线下拜访
                    </div>
                  </div>
                  <div
                    class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-normal mr-[15px] mt-[29px]"
                  >
                    和周老师在工作碰了环球项目，选了瓷砖款式，后天客户交定金，订单金额初步为 304958
                  </div>
                  <div class="mt-[15px]">
                    <img
                      class="w-[70px] h-[70px] rounded-lg"
                      src="https://via.placeholder.com/70x70"
                    />
                  </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]"
                      >
                        一间空间设计工作室
                      </div>
                    </div>
                    <div
                      class="text-black/90 text-sm font-normal font-['PingFang SC'] leading-relaxed mr-[15px]"
                    >
                      渠道：李薇
                    </div>
                  </div>
                </div>
              </view>
              <view class="content mt-[20px]" v-if="index === 2">
                <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>
            </wd-tab>
          </block>
        </wd-tabs>
      </div>
    </div>
  </view>
</template>

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