refactor(app): 重构设计师主页组件和页面

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

@@ -5,6 +5,7 @@ import { beforeNow } from '../utils/date-util'
 import Tag from './tag.vue'
 import { stringify } from 'qs'
 import { isImageOrVideo } from '../core/utils/common'
+import { useRouter } from '../core/utils/router'
 
 const props = defineProps({
   options: {
@@ -50,6 +51,7 @@ const props = defineProps({
     }),
   },
 })
+const router = useRouter()
 const imgClass = ref('')
 const isVideo = ref(false)
 const toDetail = () => {
@@ -84,7 +86,10 @@ onMounted(async () => {
 <template>
   <Card @click="toDetail" @tap="toDetail">
     <view class="flex items-center">
-      <view class="overflow-hidden rounded-full mr-2">
+      <view
+        class="overflow-hidden rounded-full mr-2"
+        @click.stop="router.push(`/pages/mine/homepage/index?id=${options.stylistId}`)"
+      >
         <wd-img
           custom-class="vertical-bottom"
           :width="35"

packages/app/src/components/page-helper.vue

@@ -12,7 +12,11 @@ import { NetImages } from '../core/libs/net-images'
 //     default: () => {},
 //   },
 // })
-const props = defineProps<{ request: (query: any) => Promise<IResData<T>>; query: any }>()
+const props = defineProps<{
+  request: (query: any) => Promise<IResData<T>>
+  query: any
+  customClass?: string
+}>()
 const slot = defineSlots<{
   default(props: { data: Ref<S>[]; source: T }): any
   // col(props: { row: T; index: number }): any
@@ -36,7 +40,7 @@ onReachBottom(() => {
 })
 </script>
 <template>
-  <div class="flex-grow flex flex-col">
+  <div class="flex-grow flex flex-col" :class="customClass">
     <div v-if="!data?.list?.length" class="flex-grow flex items-center justify-center">
       <wd-status-tip :image="NetImages.NotContent" tip="暂无内容"></wd-status-tip>
     </div>

packages/app/src/core/libs/net-images.ts

@@ -2,4 +2,5 @@ export enum NetImages {
   'default' = 'https://cdn.jsdelivr.net/gh/yangyang-yangyang/yangyang-yangyang.github.io@master/images/default.png',
   'avatar' = 'https://cdn.jsdelivr.net/gh/yangyang-yangyang/yangyang-yangyang.github.io@master/images/avatar.png',
   'NotContent' = 'https://image.zhuchaohui.com/zhucaohui/3819d411440c23cc9e4f4bd3a520325386d7f038ed6dfa7c2ba076bd5110d2d2.png',
+  'DesigerHomepageDefaultBg' = 'https://image.zhuchaohui.com/zhucaohui/58dcb982d2957c5578478abbf000936efe9d11c96c5af4d457177cf5d90a9d39.png',
 }

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

@@ -153,7 +153,7 @@ export const createUserAuthInfo = (
     remark: string
   }>,
 ) => httpPost<any>('/app-api/member/user-auth-info/create', data)
-export const getCircles = (query: { tagName?: string }) =>
+export const getCircles = (query: { tagName?: string; circleType?: string; stylistId?: string }) =>
   httpGet<{
     list: {
       id: number

packages/app/src/core/themes/default.ts

@@ -12,6 +12,6 @@ export const defaultThemeVars: ConfigProviderThemeVars = {
   tagPrimaryColor: '#fff',
   tagInfoBg: '#efefef',
   tagRoundRadius: '8rpx',
-  colorTheme: 'red',
+  colorTheme: 'black',
   // navbarTitleColor: '#fff',
 }

packages/app/src/pages.json

@@ -278,7 +278,6 @@
     {
       "path": "pages/mine/homepage/index",
       "type": "page",
-      "layout": "back",
       "style": {
         "navigationStyle": "custom"
       }

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

@@ -1,34 +1,30 @@
-<route lang="yaml">
-layout: back
-style:
-  navigationStyle: custom
+<route lang="json">
+{
+  "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'
+import { NetImages } from '../../../core/libs/net-images'
+import PageHelper from '@/components/page-helper.vue'
 
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
+const id = ref()
 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,
+    stylistId: id.value,
   })
   circlesData.value = data
 }
@@ -42,23 +38,22 @@ const handleTabsChange = async ({ name }: any) => {
     await setCirclesData(name)
   }
 }
-onMounted(async () => {
-  // await getCircleType()
+onMounted(async () => {})
+onLoad(async (query: { id: string }) => {
+  id.value = query.id
   await setCirclesData(tab.value)
   console.log(circleTypes.value)
-
-  // await run()
 })
 defineExpose({
   navBarFixed: false,
 })
 </script>
 <template>
-  <div class="">
+  <div class="flex-grow flex flex-col">
     <div class="relative">
       <wd-img
         width="100%"
-        :src="'https://via.placeholder.com/375x329'"
+        :src="NetImages.DesigerHomepageDefaultBg"
         mode="widthFix"
         custom-class="aspect-[1.14/1]"
       />
@@ -90,19 +85,28 @@ defineExpose({
         </div>
       </div>
     </div>
-    <div class="bg-white rounded-t-2xl relative bottom-4">
+    <div class="flex-grow flex flex-col 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>
+      <PageHelper
+        class="flex-grow flex flex-col bg-[#f6f6f6]"
+        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>
-      </div>
+      </PageHelper>
     </div>
   </div>
 </template>