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

<route lang="yaml">
layout: back
style:
  navigationStyle: custom
</route>
<script setup lang="ts">
import MomentItem from '@/components/moment-item.vue'
import { getByDictType, getCircles } from '../../../core/libs/requests'
import { useUserStore } from '../../../store'
import { storeToRefs } from 'pinia'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const tab = ref('2')
const { data: circleTypes, run: getCircleType } = useRequest(() =>
  getByDictType('member_circle_type'),
)
const circlesData = ref({ list: [] })
// const { data: circlesData, run } = useRequest(
//   () =>
//     getCircles({
//       circleType: tab.value,
//       // stylistName: userInfo.value.nickname,
//       stylistId: userInfo.value.userId,
//     }),
//   { initialData: { list: [] } },
// )
const setCirclesData = async (circleType) => {
  const { data } = await getCircles({
    circleType,
    stylistId: userInfo.value.userId,
  })
  circlesData.value = data
}
const tabs = ref([
  { label: '案例', value: '2' },
  { label: '动态', value: '1' },
  { label: '视频', value: '0' },
])
const handleTabsChange = async ({ name }: any) => {
  if (['1', '2'].includes(name)) {
    await setCirclesData(name)
  }
}
onMounted(async () => {
  // await getCircleType()
  await setCirclesData(tab.value)
  console.log(circleTypes.value)

  // await run()
})
defineExpose({
  navBarFixed: false,
})
</script>
<template>
  <div class="">
    <div class="relative">
      <wd-img
        width="100%"
        :src="'https://via.placeholder.com/375x329'"
        mode="widthFix"
        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="userInfo?.avatar"></wd-img>
            </div>
            <div>
              <div class="text-white text-2xl font-normal font-['PingFang SC'] leading-normal">
                {{ userInfo?.nickname }}
              </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="bg-white rounded-t-2xl relative bottom-4">
      <wd-tabs v-model="tab" @change="handleTabsChange">
        <template v-for="({ label, value }, index) in tabs" :key="index">
          <wd-tab :title="label" :name="value"></wd-tab>
        </template>
      </wd-tabs>
      <div class="p-3.5 flex flex-col bg-[#f6f6f6] gap-3.5">
        <template v-for="it of circlesData.list" :key="it.id">
          <view class="">
            <MomentItem :options="it"></MomentItem>
          </view>
        </template>
      </div>
    </div>
  </div>
</template>