designer-hub/packages/app/src/pages/mine/homepage/index.vue

<route lang="json">
{
  "style": {
    "navigationStyle": "custom"
  }
}
</route>
<script setup lang="ts">
import MomentItem from '@/components/moment-item.vue'
import { getCircles, getDesignerInfo, getUserInfoById } from '../../../core/libs/requests'
import { useUserStore } from '../../../store'
import { storeToRefs } from 'pinia'
import { NetImages } from '../../../core/libs/net-images'
import PageHelper from '@/components/page-helper.vue'
import BottomAppBar from '@/components/bottom-app-bar.vue'
import { useRouter } from '../../../core/utils/router'
import NavbarEvo from '@/components/navbar-evo.vue'

const router = useRouter()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const id = ref()
const tab = ref('2')
const tabs = ref([
  { label: '案例', value: '2' },
  { label: '动态', value: '1' },
  { label: '视频', value: '0' },
])
const { data: memberInfo, run: setMemberInfo } = useRequest(() => getUserInfoById(id.value), {
  initialData: {},
})
const { data: designerInfo, run: setDesignerInfo } = useRequest(() => getDesignerInfo(id.value), {
  initialData: {},
})
const isOwn = computed(() => userInfo.value?.userId === id.value)
const skills = computed(() => [
  { label: '从业年限', value: designerInfo.value.serviceYears },
  { label: '客户', value: designerInfo.value.serviceCustomerCount },
  { label: '设计费', value: `${designerInfo.value.designFee}元/㎡` },
])
onMounted(async () => {})
function getVideoListByAccessToken(accessToken, openid) {
  const VIDEO_API = 'https://api.weixin.qq.com/wxa/business/getuservideo'

  uni.request({
    url: VIDEO_API,
    method: 'POST',
    header: {
      'Content-Type': 'application/json',
    },
    data: {
      access_token: accessToken,
      openid,
      // 可以添加其他参数，如offset, limit
    },
    success: function (res) {
      // 获取视频号列表成功
      console.log('视频号列表:', res.data)
    },
    fail: function (error) {
      console.log('获取视频号列表失败', error)
    },
  })
}
onLoad(async (query: { id: string }) => {
  if (query.id) {
    id.value = query.id
    await setMemberInfo()
  } else {
    id.value = userInfo.value.userId
  }
  await setDesignerInfo()
  // uni.request({
  //   url: '',
  // })
  // getVideoListByAccessToken(userInfo.value.accessToken, userInfo.value.openid)
})
onShareAppMessage(() => ({ title: `${userInfo.value.nickname}` }))
defineExpose({
  navBarFixed: false,
})
</script>
<template>
  <div class="flex-grow flex flex-col">
    <NavbarEvo transparent dark></NavbarEvo>
    <div class="relative">
      <wd-img
        width="100%"
        :src="designerInfo?.homePageUrl || NetImages.DesigerHomepageDefaultBg"
        mode="aspectFill"
        custom-class="aspect-[1.14/1]"
      />
      <div class="absolute bottom-0 left-0 right-0">
        <div class="h-[107px] bg-gradient-to-t from-black to-transparent">
          <div class="flex">
            <div
              class="w-18 h-18 border-white border border-solid mx-3.5 rounded-full overflow-hidden"
            >
              <wd-img
                width="100%"
                height="100%"
                :src="isOwn ? userInfo?.avatar : memberInfo?.avatar"
              ></wd-img>
            </div>
            <div>
              <div class="text-white text-2xl font-normal font-['PingFang_SC'] leading-normal">
                {{ designerInfo?.brokerName }}
              </div>
              <div>
                <div
                  class="h-6 px-2 bg-black/10 rounded-[30px] border border-white/60 justify-center items-center gap-2.5 inline-flex"
                >
                  <div
                    class="text-center text-white text-[10px] font-normal font-['PingFang_SC'] leading-normal"
                  >
                    创设空间事务所创始人
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-grow flex flex-col bg-white rounded-t-2xl relative bottom-4 gap-5 px-3.5 pt-5">
      <div class="flex gap-4">
        <template v-for="(it, i) in skills" :key="i">
          <div>
            <span
              class="mr-0.575 text-black/90 text-base font-normal font-['PingFang_SC'] leading-[26.98px]"
            >
              {{ it.value }}
            </span>
            <span
              class="text-center text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[26.98px]"
            >
              {{ it.label }}
            </span>
          </div>
          <div v-if="i < skills?.length - 1" class="leading-[26.98px] text-black/60">|</div>
        </template>
      </div>
      <div class="text-black/80 text-sm font-normal font-['PingFang_SC'] leading-normal">
        “设计没有风格，设计是对生活的一种诠释，不是所谓的造型与装饰！”
      </div>
      <wd-tabs v-model="tab" custom-class="bg-transparent!">
        <template v-for="({ label, value }, index) in tabs" :key="index">
          <wd-tab :title="label" :name="value"></wd-tab>
        </template>
      </wd-tabs>
      <PageHelper
        class="flex-grow flex flex-col bg-[#f6f6f6] mx--3.5"
        custom-class=""
        :request="getCircles"
        :query="{ circleType: tab, stylistId: id }"
      >
        <template #default="{ source }">
          <div class="p-3.5 flex flex-col bg-[#f6f6f6] gap-3.5">
            <template v-for="it of source.list" :key="it.id">
              <view class="">
                <MomentItem :options="it"></MomentItem>
              </view>
            </template>
          </div>
        </template>
      </PageHelper>
    </div>
    <BottomAppBar fixed placeholder>
      <div class="flex gap-7.5">
        <div class="flex-1" v-if="userInfo.userId === Number(id)">
          <wd-button block :round="false" @click="router.push(`/pages/mine/homepage/edit/index`)">
            编辑
          </wd-button>
        </div>
        <div class="flex-1" v-if="userInfo.userId === Number(id)">
          <wd-button block :round="false" open-type="share">分享</wd-button>
        </div>
        <div class="flex-1" v-if="userInfo.userId !== Number(id)">
          <wd-button
            block
            :round="false"
            @click="router.push(`/pages/mine/homepage/consult/index`)"
          >
            预约咨询
          </wd-button>
        </div>
      </div>
    </BottomAppBar>
  </div>
</template>