refactor(app): 重构设计圈和首页以适应新数据结构

packages/app/src/components/moment-item.vue

@@ -6,13 +6,35 @@ import { beforeNow } from '@/utils/date-util'
 import Tag from './tag.vue'
 const props = defineProps({
   options: {
-    type: Object,
+    type: Object as PropType<{
+      id: number
+      headUrl?: string
+      stylistId?: number
+      stylistName?: string
+      marketing?: string
+      circleDesc?: string
+      tagName?: string
+      detailsType?: string
+      detailsUrl?: string
+      detailsDesc?: string
+      circleType?: string
+      spaceType?: string
+      designStyle?: string
+      spaceAddr?: string
+      customerDemand?: string
+      createTime: number
+      bannerUrls: string[]
+      shareCount?: number
+      upvoteCount?: number
+      ownUpvote: boolean
+      reviewCount: number
+    }>,
     default: () => ({
       author: {
         nickname: '张三',
         avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
       },
-      createdAt: new Date(),
+      createTime: new Date(),
       images: [
         'https://via.placeholder.com/104x104',
         'https://via.placeholder.com/104x104',
@@ -35,9 +57,9 @@ const toDetail = () => {
 
 onMounted(async () => {
   console.log('加载')
-  if (props.options.images.length === 1) {
+  if (props.options.bannerUrls.length === 1) {
     const { width, height } = await uni.getImageInfo({
-      src: props.options.images[0],
+      src: props.options.bannerUrls[0],
     })
 
     if (Number(width / height) > 1) {
@@ -56,21 +78,24 @@ onMounted(async () => {
           custom-class="vertical-bottom"
           :width="35"
           :height="35"
-          :src="props.options.author.avatar"
+          :src="props.options.headUrl"
           mode="scaleToFill"
         />
       </view>
-      <view class="">{{ props.options.author.nickname }}</view>
+      <view class="">{{ props.options.stylistName }}</view>
       <view class="flex-1"></view>
-      <view>{{ beforeNow(props.options.createdAt) }}</view>
+      <view>{{ beforeNow(dayjs(props.options.createTime).toDate()) }}</view>
     </view>
     <view
-      :class="[props.options.images.length > 1 ? 'grid grid-cols-3 grid-gap-1' : 'w-full', 'my-6']"
+      :class="[
+        props.options.bannerUrls.length > 1 ? 'grid grid-cols-3 grid-gap-1' : 'w-full',
+        'my-6',
+      ]"
     >
-      <template v-for="it of props.options.images" :key="it">
+      <template v-for="it of props.options.bannerUrls" :key="it">
         <view
           :class="[
-            props.options.images.length > 1 ? 'aspect-square' : '',
+            props.options.bannerUrls.length > 1 ? 'aspect-square' : '',
             'rounded-lg overflow-hidden',
             imgClass,
           ]"
@@ -79,33 +104,33 @@ onMounted(async () => {
             custom-class="vertical-bottom"
             :width="'100%'"
             :src="it"
-            :height="props.options.images.length > 1 ? '100%' : 'auto'"
-            :mode="props.options.images.length > 1 ? 'aspectFill' : 'widthFix'"
+            :height="props.options.bannerUrls.length > 1 ? '100%' : 'auto'"
+            :mode="props.options.bannerUrls.length > 1 ? 'aspectFill' : 'widthFix'"
           ></wd-img>
         </view>
       </template>
     </view>
     <view class="text-[rgba(0,0,0,0.85)] text-4 font-400 line-height-2.5 my-1">
-      {{ props.options.content }}
+      {{ props.options.circleDesc }}
     </view>
     <view class="my-5.5">
       <!-- <TiltedButton>按钮</TiltedButton> -->
-      <template v-for="it of props.options.tags" :key="it">
+      <template v-for="it of props.options.tagName.split(',')" :key="it">
         <Tag>{{ it }}</Tag>
       </template>
     </view>
     <view class="flex justify-between">
       <view class="flex items-center text-[rgba(0,0,0,0.85)] text-3.5 font-400 line-height-5.5">
         <wd-img width="15" height="15" src="/static/svgs/share.svg"></wd-img>
-        <view class="ml-1">{{ props.options.shares }}</view>
+        <view class="ml-1">{{ props.options.shareCount }}</view>
       </view>
       <view class="flex items-center text-[rgba(0,0,0,0.85)] text-3.5 font-400 line-height-5.5">
         <wd-img width="15" height="15" src="/static/svgs/comment.svg"></wd-img>
-        <view class="ml-1">{{ props.options.shares }}</view>
+        <view class="ml-1">{{ props.options.shareCount }}</view>
       </view>
       <view class="flex items-center text-[rgba(0,0,0,0.85)] text-3.5 font-400 line-height-5.5">
         <wd-img width="15" height="15" src="/static/svgs/like.svg"></wd-img>
-        <view class="ml-1">{{ props.options.shares }}</view>
+        <view class="ml-1">{{ props.options.shareCount }}</view>
       </view>
     </view>
   </Card>

packages/app/src/core/libs/requests.ts

@@ -174,7 +174,32 @@ export const createUserAuthInfo = (
     remark: string
   }>,
 ) => httpPost<any>('/app-api/member/user-auth-info/create', data)
-export const getCircles = (query) => httpGet<any>('/app-api/member/circle/page', query)
+export const getCircles = (query) =>
+  httpGet<{
+    list: {
+      id: number
+      headUrl?: string
+      stylistId?: number
+      stylistName?: string
+      marketing?: string
+      circleDesc?: string
+      tagName?: string
+      detailsType?: string
+      detailsUrl?: string
+      detailsDesc?: string
+      circleType?: string
+      spaceType?: string
+      designStyle?: string
+      spaceAddr?: string
+      customerDemand?: string
+      createTime: number
+      bannerUrls: string[]
+      shareCount?: number
+      upvoteCount?: number
+      ownUpvote: boolean
+      reviewCount: number
+    }[]
+  }>('/app-api/member/circle/page', query)
 export const createCircle = (
   data: Partial<{
     headUrl: string

packages/app/src/pages/home/index.vue

@@ -95,11 +95,11 @@ const { data } = useRequest(async () => ({ code: 0, msg: '', data: {} }) as IRes
     studyTour: null,
   },
 })
-const { data: circles, run } = useRequest(() => getCircles({}))
+const { data: circlesData, run } = useRequest(() => getCircles({}))
 console.log(data.value)
 onShow(async () => {
   await run()
-  console.log(circles.value)
+  console.log(circlesData.value)
 })
 onLoad(() => {})
 onShareAppMessage(() => ({}))
@@ -131,9 +131,9 @@ onShareAppMessage(() => ({}))
       </view>
       <view class="mx-3.5 text-5 font-400">设计圈</view>
       <view class="mx-3.5">
-        <template v-for="it of data.dynamics" :key="it.id">
+        <template v-for="it of circlesData.list" :key="it.id">
           <view class="my-6">
-            <MomentItem :options="it">{{ it.title }}</MomentItem>
+            <MomentItem :options="it"></MomentItem>
           </view>
         </template>
       </view>

packages/app/src/pages/mine/homepage/index.vue

@@ -3,6 +3,7 @@ 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'
@@ -13,8 +14,14 @@ const tab = ref('2')
 const { data: circleTypes, run: getCircleType } = useRequest(() =>
   getByDictType('member_circle_type'),
 )
-const { data: circles, run } = useRequest(() =>
-  getCircles({ circleType: tab.value, stylistName: userInfo.value.nickname }),
+const { data: circlesData, run } = useRequest(
+  () =>
+    getCircles({
+      circleType: tab.value,
+      // stylistName: userInfo.value.nickname,
+      stylistId: userInfo.value.userId,
+    }),
+  { initialData: { list: [] } },
 )
 const tabs = ref([
   { label: '案例', value: '2' },
@@ -34,5 +41,10 @@ onMounted(async () => {
         <wd-tab :title="label" :name="value"></wd-tab>
       </template>
     </wd-tabs>
+    <template v-for="it of circlesData.list" :key="it.id">
+      <view class="my-6">
+        <MomentItem :options="it"></MomentItem>
+      </view>
+    </template>
   </div>
 </template>