refactor(app): 重构页面和组件以提高代码可读性和维护性

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

@@ -2,8 +2,10 @@
 import Card from '@/components/card.vue'
 import dayjs from 'dayjs'
 import TiltedButton from './tilted-button.vue'
-import { beforeNow } from '@/utils/date-util'
+import { beforeNow } from '../utils/date-util'
 import Tag from './tag.vue'
+import { stringify } from 'qs'
+
 const props = defineProps({
   options: {
     type: Object as PropType<{
@@ -51,7 +53,7 @@ const props = defineProps({
 const imgClass = ref('')
 const toDetail = () => {
   uni.navigateTo({
-    url: '/pages/home/moment/index',
+    url: `/pages/home/moment/index?${stringify({ id: props.options.id })}`,
   })
 }
 
@@ -113,10 +115,11 @@ onMounted(async () => {
     <view class="text-[rgba(0,0,0,0.85)] text-4 font-400 line-height-2.5 my-1">
       {{ props.options.circleDesc }}
     </view>
-    <view class="my-5.5">
-      <!-- <TiltedButton>按钮</TiltedButton> -->
-      <template v-for="it of props.options.tagName?.split(',')" :key="it">
-        <Tag>{{ it }}</Tag>
+    <view class="my-5.5 flex gap-3.5">
+      <template v-if="props.options.tagName !== ''">
+        <template v-for="it of props.options.tagName?.split(',')" :key="it">
+          <Tag>{{ it }}</Tag>
+        </template>
       </template>
     </view>
     <view class="flex justify-between">
@@ -126,11 +129,11 @@ onMounted(async () => {
       </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.shareCount }}</view>
+        <view class="ml-1">{{ props.options.reviewCount }}</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.shareCount }}</view>
+        <view class="ml-1">{{ props.options.upvoteCount }}</view>
       </view>
     </view>
   </Card>

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

@@ -200,26 +200,51 @@ export const getCircles = (query) =>
       reviewCount: number
     }[]
   }>('/app-api/member/circle/page', query)
-export const createCircle = (
-  data: Partial<{
-    headUrl: string
-    stylistId: string | 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
-    bannerUrls: string[]
-  }>,
-) => httpPost<any>('/app-api/member/circle/create', data)
+export const createCircle = (data: Partial<Circle>) =>
+  httpPost<any>('/app-api/member/circle/create', data)
+export const getCircle = (id: string) =>
+  httpGet<Partial<CircleRes>>('/app-api/member/circle/get', { id })
 export const refreshToken = (refreshToken: string) =>
   httpPost<any>('/app-api/member/auth/refresh-token', {}, { refreshToken })
 export const httpGetMock = <T>(data: T) =>
   new Promise<IResData<T>>((resolve) => resolve({ code: 1, msg: '', data } as IResData<T>))
+export interface Circle {
+  headUrl: string
+  stylistId: string | 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
+  bannerUrls: string[]
+}
+export interface CircleRes {
+  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
+}

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

@@ -6,13 +6,14 @@ style:
 <script setup lang="ts">
 import SectionHeading from '@/components/section-heading.vue'
 import Tag from '@/components/tag.vue'
-import { getMoment } from '@/core/libs/requests'
-import { thumbsUp } from '@/core/libs/svgs'
+import { getCircle, getMoment } from '../../../core/libs/requests'
+import { thumbsUp } from '../../../core/libs/svgs'
 import dayjs from 'dayjs'
 import CommentItem from '../components/comment-item.vue'
 import AvatarGroupCasual from '@/components/avatar-group-casual/avatar-group-casual.vue'
 
-const { data, run } = useRequest(getMoment)
+const id = ref()
+const { data, run } = useRequest(() => getCircle(id.value), { initialData: {} })
 const current = ref(0)
 const swiperSizes = ref()
 const swiperStyle = ref()
@@ -24,13 +25,15 @@ const handleChange = ({ detail: { current } }) => {
 const setSwiperStyle = async () => {
   const { screenWidth } = await uni.getSystemInfo()
   swiperSizes.value = (
-    await Promise.all(data.value.images.map((src) => uni.getImageInfo({ src })))
+    await Promise.all(data.value.bannerUrls.map((src) => uni.getImageInfo({ src })))
   ).map(({ width, height }) => ({ width: screenWidth, height: height / (width / screenWidth) }))
   swiperStyle.value = {
     height: swiperSizes.value[0].height + 'px',
   }
 }
-onMounted(async () => {
+onMounted(async () => {})
+onLoad(async (query: { id: string }) => {
+  id.value = query.id
   await run()
   await setSwiperStyle()
 })
@@ -42,7 +45,7 @@ onMounted(async () => {
     </div> -->
     <template v-if="swiperSizes">
       <swiper :style="swiperStyle" @change="handleChange">
-        <template v-for="it of data?.images" :key="it">
+        <template v-for="it of data?.bannerUrls" :key="it">
           <swiper-item>
             <wd-img width="100%" :src="it" mode="widthFix"></wd-img>
           </swiper-item>
@@ -60,12 +63,14 @@ onMounted(async () => {
     ></wd-swiper> -->
     <view class="m-3.5">
       <div class="text-black/90 text-base font-normal font-['PingFang SC'] leading-[10.18px]">
-        用心做好设计，为客户创造美好家居环境
+        {{ data?.circleDesc }}
       </div>
-      <view class="my-5.5">
+      <view class="my-5.5 flex gap-3.5">
         <!-- <TiltedButton>按钮</TiltedButton> -->
-        <template v-for="it of data?.tags" :key="it">
-          <Tag>{{ it }}</Tag>
+        <template v-if="data?.tagName !== ''">
+          <template v-for="it of data?.tagName?.split(',')" :key="it">
+            <Tag>{{ it }}</Tag>
+          </template>
         </template>
       </view>
       <div class="text-black/30 text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
@@ -94,10 +99,10 @@ onMounted(async () => {
       <view class="flex items-center my-8">
         <div class="text-black/90 text-base font-normal font-['PingFang SC'] leading-[10.18px]">
           <span>评论</span>
-          <span v-if="data?.comments">{{ data?.comments }}</span>
+          <!-- <span v-if="data?.comments">{{ data?.comments }}</span> -->
         </div>
         <view class="flex-1"></view>
-        <view v-if="data?.comments" class="flex">
+        <!-- <view v-if="data?.comments" class="flex">
           <div class="text-black/90 text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
             按热度
           </div>
@@ -109,10 +114,10 @@ onMounted(async () => {
           <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
             按时间
           </div>
-        </view>
+        </view> -->
       </view>
 
-      <view>
+      <!-- <view>
         <template v-if="data?.commentList.length">
           <template v-for="it of data?.commentList" :key="it.id">
             <CommentItem :options="it" :isChild="false"></CommentItem>
@@ -133,7 +138,7 @@ onMounted(async () => {
             </div>
           </view>
         </template>
-      </view>
+      </view> -->
     </view>
     <div
       class="fixed bottom-0 left-0 right-0 border-t border-t-solid border-[#ececec] h-[54px] bg-white flex items-center px-3.5"
@@ -146,19 +151,19 @@ onMounted(async () => {
           class="flex flex-col 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="">{{ data.shares }}</view>
+          <view class="">{{ data?.shareCount }}</view>
         </view>
         <view
           class="flex flex-col 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="">{{ data.shares }}</view>
+          <view class="">{{ data?.reviewCount }}</view>
         </view>
         <view
           class="flex flex-col 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="thumbsUp"></wd-img>
-          <view>{{ data.shares }}</view>
+          <view>{{ data.upvoteCount }}</view>
         </view>
       </view>
     </div>