Browse Source

feat: 优化 moment-item 组件,支持不同类型的圆形展示,更新页面数据处理逻辑

EvilDragon 3 months ago
parent
commit
f191d0667e

+ 13 - 1
packages/app/src/components/moment-item.vue

@@ -57,6 +57,7 @@ const handleDelete = async () => {
 }
 }
 onMounted(async () => {
 onMounted(async () => {
   if (
   if (
+    props.options.circleType === '1' &&
     props.options.bannerUrls?.length === 1 &&
     props.options.bannerUrls?.length === 1 &&
     isImageOrVideo(props.options.bannerUrls[0]) === 'image'
     isImageOrVideo(props.options.bannerUrls[0]) === 'image'
   ) {
   ) {
@@ -86,6 +87,7 @@ onMounted(async () => {
           class="overflow-hidden rounded-full"
           class="overflow-hidden rounded-full"
           @click.stop="
           @click.stop="
             features.toDesignerHomePage &&
             features.toDesignerHomePage &&
+              ['1', '2'].includes(options?.circleType) &&
               currRoute().path !== '/pages/mine/homepage/index' &&
               currRoute().path !== '/pages/mine/homepage/index' &&
               router.push(`/pages/mine/homepage/index?id=${options.stylistId}`)
               router.push(`/pages/mine/homepage/index?id=${options.stylistId}`)
           "
           "
@@ -98,7 +100,7 @@ onMounted(async () => {
             mode="scaleToFill"
             mode="scaleToFill"
           />
           />
         </view>
         </view>
-        <view class="">{{ props.options.stylistName }}</view>
+        <view class="">{{ props.options.stylistName || props.options.marketing }}</view>
         <template v-if="levelsByLevel[options?.levelId]?.badge">
         <template v-if="levelsByLevel[options?.levelId]?.badge">
           <wd-img
           <wd-img
             width="63"
             width="63"
@@ -121,6 +123,7 @@ onMounted(async () => {
       >
       >
         <template v-for="it of props.options.bannerUrls" :key="it">
         <template v-for="it of props.options.bannerUrls" :key="it">
           <view
           <view
+            v-if="options.circleType === '1'"
             :class="[
             :class="[
               props.options.bannerUrls?.length > 1 ? 'aspect-square' : '',
               props.options.bannerUrls?.length > 1 ? 'aspect-square' : '',
               'rounded-lg overflow-hidden',
               'rounded-lg overflow-hidden',
@@ -135,6 +138,15 @@ onMounted(async () => {
               :mode="props.options.bannerUrls?.length > 1 ? 'aspectFill' : 'widthFix'"
               :mode="props.options.bannerUrls?.length > 1 ? 'aspectFill' : 'widthFix'"
             ></wd-img>
             ></wd-img>
           </view>
           </view>
+          <view class="aspect-[1.64/1] rounded-lg overflow-hidden" v-else>
+            <wd-img
+              custom-class="vertical-bottom"
+              width="100%"
+              height="100%"
+              :src="it"
+              mode="aspectFill"
+            ></wd-img>
+          </view>
         </template>
         </template>
       </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">

+ 6 - 0
packages/app/src/components/page-helper-evo.vue

@@ -75,6 +75,12 @@ defineExpose({
   refresh: async () => {
   refresh: async () => {
     console.log('Page Helper Refresh')
     console.log('Page Helper Refresh')
     await setData()
     await setData()
+    // 之前页的数据
+    const prevItems = items.value.slice(0, pageSize.value * (pageNo.value - 1))
+    // 之后页的数据
+    const nextItems = items.value.slice(pageSize.value * pageNo.value, items.value.length)
+    items.value = prevItems.concat(data.value?.list || [], nextItems)
+    // console.log(items.value)
   },
   },
 })
 })
 </script>
 </script>

+ 1 - 1
packages/app/src/pages/home/index.vue

@@ -53,7 +53,7 @@ const { show } = useHonorDialog()
 const userStore = useUserStore()
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
 const { userInfo } = storeToRefs(userStore)
 const { features } = usePermissions()
 const { features } = usePermissions()
-const pageHelperRef = ref<ComponentExposed<typeof PageHelper>>()
+const pageHelperRef = ref<ComponentExposed<typeof PageHelperEvo>>()
 const { data: indexConfigsData, run: setIndexConfigsData } = useRequest(
 const { data: indexConfigsData, run: setIndexConfigsData } = useRequest(
   () => getSetIndexConfigs(),
   () => getSetIndexConfigs(),
   { initialData: { list: [] } },
   { initialData: { list: [] } },

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

@@ -28,6 +28,7 @@ import { likeActived, likeBlack } from '@designer-hub/assets/src/icons'
 import NavBarEvo from '@/components/navbar-evo.vue'
 import NavBarEvo from '@/components/navbar-evo.vue'
 import { useRouter } from '../../../core/utils/router'
 import { useRouter } from '../../../core/utils/router'
 import { usePermissions } from '../../../composables/permissions'
 import { usePermissions } from '../../../composables/permissions'
+import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html.vue'
 
 
 const { features } = usePermissions()
 const { features } = usePermissions()
 const userStore = useUserStore()
 const userStore = useUserStore()
@@ -119,11 +120,14 @@ onShareAppMessage(async ({ from, target }) => {
       <template #prepend>
       <template #prepend>
         <div
         <div
           class="flex items-center gap-2"
           class="flex items-center gap-2"
-          @click="() => router.push(`/pages/mine/homepage/index?id=${data.stylistId}`)"
+          @click="
+            ['1', '2'].includes(data.circleType) &&
+              router.push(`/pages/mine/homepage/index?id=${data.stylistId}`)
+          "
         >
         >
           <wd-img width="24" height="24" round :src="data.headUrl"></wd-img>
           <wd-img width="24" height="24" round :src="data.headUrl"></wd-img>
           <div class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-[10.18px]">
           <div class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-[10.18px]">
-            {{ data.stylistName }}
+            {{ data.stylistName || data.marketing }}
           </div>
           </div>
         </div>
         </div>
       </template>
       </template>
@@ -131,29 +135,25 @@ onShareAppMessage(async ({ from, target }) => {
     <!-- <div class="my-4 text-black/90 text-lg font-normal font-['PingFang_SC'] leading-[10.18px]">
     <!-- <div class="my-4 text-black/90 text-lg font-normal font-['PingFang_SC'] leading-[10.18px]">
       {{ data?.detailsDesc }}
       {{ data?.detailsDesc }}
     </div> -->
     </div> -->
-    <template v-if="swiperSizes && !isVideo">
-      <div>
-        <swiper class="" :style="swiperStyle" @change="handleChange">
-          <template v-for="it of data?.bannerUrls" :key="it">
-            <swiper-item>
-              <wd-img width="100%" :src="it" mode="widthFix"></wd-img>
-            </swiper-item>
-          </template>
-        </swiper>
-      </div>
-    </template>
-    <template v-if="isVideo">
-      <video width="100%" class="w-full aspect-[1.64/1]" :src="data?.bannerUrls[0]"></video>
+    <template v-if="data.circleType === '1'">
+      <template v-if="swiperSizes && !isVideo">
+        <div>
+          <swiper class="" :style="swiperStyle" @change="handleChange">
+            <template v-for="it of data?.bannerUrls" :key="it">
+              <swiper-item>
+                <wd-img width="100%" :src="it" mode="widthFix"></wd-img>
+              </swiper-item>
+            </template>
+          </swiper>
+        </div>
+      </template>
+      <template v-if="isVideo">
+        <video width="100%" class="w-full aspect-[1.64/1]" :src="data?.bannerUrls[0]"></video>
+      </template>
     </template>
     </template>
-    <!-- <wd-swiper
-      v-model="current"
-      custom-class="my-1"
-      autoplay="false"
-      :list="data?.images"
-      :indicator="{ type: 'fraction' }"
-      indicatorPosition="top-right"
-      imageMode="widthFix"
-    ></wd-swiper> -->
+    <view v-if="data.circleType === '3'">
+      <mpHtml :content="data.detailsDesc"></mpHtml>
+    </view>
     <view class="m-3.5">
     <view class="m-3.5">
       <div class="text-black/90 text-base font-normal font-['PingFang_SC']">
       <div class="text-black/90 text-base font-normal font-['PingFang_SC']">
         {{ data?.circleDesc }}
         {{ data?.circleDesc }}