Browse Source

feat: 更新 moment-item 组件,添加空间类型和设计风格的字典支持,优化展示逻辑

EvilDragon 3 months ago
parent
commit
fdf22414aa

+ 15 - 27
packages/app/src/components/moment-item.vue

@@ -11,33 +11,13 @@ import { NetImages } from '../core/libs/net-images'
 import { currRoute } from '../utils'
 import { usePermissions } from '../composables/permissions'
 import { useMemberLevelsStore } from '../store/member-levles'
+import { useDictStore } from '../store'
+import { DictType } from '../core/libs/models'
+import { CircleRes } from '../core/libs/requests'
 
 const props = withDefaults(
   defineProps<{
-    options: {
-      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
-      levelId?: number
-    }
+    options: CircleRes
     isOwn?: boolean
   }>(),
   {},
@@ -47,6 +27,8 @@ const router = useRouter()
 const { features } = usePermissions()
 const memberLevelsStore = useMemberLevelsStore()
 const { getMemberLevelLogo } = memberLevelsStore
+const dictStore = useDictStore()
+const { getOptionLabel } = dictStore
 const imgClass = ref('')
 const isVideo = ref(false)
 const toDetail = () => {
@@ -153,10 +135,16 @@ onMounted(async () => {
           ></wd-img>
         </view>
       </view>
-      <view class="text-[rgba(0,0,0,0.85)] text-4 font-400 my-1">
+      <view class="text-[rgba(0,0,0,0.85)] text-4 font-400 my-1 flex items-center">
         <template v-if="options.circleType === '2'">
-          <span>{{ options.circleType }}</span>
-          <span class="mx-4">|</span>
+          <span>
+            {{ getOptionLabel(DictType.circleSpaceType, options.spaceType) }}
+          </span>
+          <div class="mx-2 h-3.5 w-[1.5px] bg-black/40"></div>
+          <span>
+            {{ getOptionLabel(DictType.memberDesignStyle, options.designStyle) }}
+          </span>
+          <div class="mx-2 h-3.5 w-[1.5px] bg-black/40"></div>
           <span>{{ options.caseName }}</span>
         </template>
         <template v-else>{{ options.circleDesc }}</template>

+ 4 - 0
packages/app/src/core/libs/models.ts

@@ -782,6 +782,10 @@ export enum DictType {
    */
   memberDesignStyle = 'member_design_style_type',
   /**
+   * 空间类型
+   */
+  circleSpaceType = 'member_circle_space_type',
+  /**
    * 圈子标签
    */
   circleTag = 'basic_set_label_type',

+ 1 - 0
packages/app/src/core/libs/requests.ts

@@ -1033,4 +1033,5 @@ export interface CircleRes {
   reviewCount: number
   caseName?: string
   spaceExtent?: string
+  levelId?: number
 }

+ 9 - 3
packages/app/src/pages/home/moment/index.vue

@@ -18,7 +18,7 @@ import {
 } from '../../../core/libs/requests'
 import { handleShareClick, handleUpvoteClick } from '../../../core/libs/actions'
 import CommentItem from '../components/comment-item.vue'
-import { useUserStore } from '../../../store'
+import { useDictStore, useUserStore } from '../../../store'
 import { storeToRefs } from 'pinia'
 import { isImageOrVideo, requestToast } from '../../../core/utils/common'
 import dayjs from 'dayjs'
@@ -32,11 +32,15 @@ import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html.vue'
 import WdInput from 'wot-design-uni/components/wd-input/wd-input.vue'
 import { getRect, addUnit } from 'wot-design-uni/components/common/util'
 import Card from '@/components/card.vue'
+import { get } from 'radash'
+import { DictType } from '@/core/libs/models'
 
 const { features } = usePermissions()
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
 const router = useRouter()
+const dictStore = useDictStore()
+const { getOptionLabel } = dictStore
 const id = ref()
 const isShared = ref(false)
 const commeentRef = ref<InstanceType<typeof WdInput>>()
@@ -214,10 +218,12 @@ onShareAppMessage(async ({ from, target }) => {
                 设计案例:{{ data?.caseName }}
               </div>
               <div class="mt-4 flex items-center justify-between text-black/40 text-sm">
-                <div class="font-normal font-['PingFang_SC']">类别:{{ data.spaceType }}</div>
+                <div class="font-normal font-['PingFang_SC']">
+                  类别:{{ getOptionLabel(DictType.circleSpaceType, data?.spaceType) }}
+                </div>
                 |
                 <div class="text-black/40 text-sm font-normal font-['PingFang_SC']">
-                  风格:{{ data.designStyle }}
+                  风格:{{ getOptionLabel(DictType.memberDesignStyle, data.designStyle) }}
                 </div>
                 |
                 <div class="text-black/40 text-sm font-normal font-['PingFang_SC']">

+ 1 - 1
packages/app/src/pages/publish/moment/index.vue

@@ -135,7 +135,7 @@ onLoad(async (query: { circleType: '1' | '2' }) => {
   uni.setNavigationBarTitle({ title: { '1': '个人动态', '2': '设计案例' }[circleType.value] })
   const optionsSchema = {
     designStyle: getByDictType(DictType.memberDesignStyle).then(({ data }) => data),
-    spaceType: getByDictType(DictType.memberSpatialExpertiseType).then(({ data }) => data),
+    spaceType: getByDictType(DictType.circleSpaceType).then(({ data }) => data),
   }
   const res = await zipToObject(
     Object.keys(optionsSchema),

+ 27 - 0
packages/app/src/store/dict.ts

@@ -0,0 +1,27 @@
+import { zipToObject } from 'radash'
+import { DictType } from '../core/libs/models'
+import { getByDictType } from '../core/libs/requests'
+import { defineStore } from 'pinia'
+
+const initData = [DictType.circleSpaceType, DictType.memberDesignStyle]
+export const useDictStore = defineStore('dict', () => {
+  //   const options = ref({})
+  const { data: options, run: fetchOptions } = useRequest(async () => ({
+    data: zipToObject(
+      initData,
+      await Promise.all(initData.map((it) => getByDictType(it).then((it) => it.data))),
+    ),
+    msg: '',
+    code: 0,
+  }))
+  const getOptionLabel = (type: DictType, value: string | number) =>
+    options.value[type]?.find((it) => it.value === value)?.label
+  //   const fetchOptions = async () => {
+  //     options.value = await zipToObject(
+  //       initData,
+  //       await Promise.all(initData.map((it) => getByDictType(it).then((it) => it.data))),
+  //     )
+  //   }
+  fetchOptions()
+  return { options, getOptionLabel }
+})

+ 2 - 0
packages/app/src/store/index.ts

@@ -15,3 +15,5 @@ export default store
 
 // 模块统一导出
 export * from './user'
+export * from './member-levles'
+export * from './dict'