feat(app): 重构页面助手组件并优化产品列表渲染

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

@@ -1,18 +1,20 @@
-<script setup lang="ts" generic="T extends { list: any }">
-import { PropType } from 'vue'
+<script setup lang="ts" generic="S extends Object, T extends { list: S[] }">
+import { PropType, UnwrapRef } from 'vue'
 import { NetImages } from '../core/libs/net-images'
 
-const props = defineProps({
-  request: {
-    type: Function as PropType<(query: any) => Promise<IResData<T>>>,
-  },
-  query: {
-    type: Object as PropType<any>,
-    default: () => {},
-  },
-})
+// const props = defineProps({
+//   // request: {
+//   //   type: Function as PropType<(query: any) => Promise<IResData<T>>>,
+//   // },
+//   request: (query) => Promise<IResData<T>>,
+//   query: {
+//     type: Object as PropType<any>,
+//     default: () => {},
+//   },
+// })
+const props = defineProps<{ request: (query: any) => Promise<IResData<T>>; query: any }>()
 const slot = defineSlots<{
-  default(props: { data: T }): any
+  default(props: { data: Ref<S>[]; source: T }): any
   // col(props: { row: T; index: number }): any
 }>()
 const { data, run: setData } = useRequest(() => props.request(props.query), { immediate: false })
@@ -38,6 +40,6 @@ onReachBottom(() => {
     <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>
-    <slot v-else :data="data.list"></slot>
+    <slot v-else :source="data as T" :data="data.list as unknown as Ref<S>[]"></slot>
   </div>
 </template>

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

@@ -288,7 +288,21 @@ export const getContent = (query: { id: string }) =>
 export const getProductCategories = () =>
   httpGet<Category[]>('/app-api/member/product-type/getAllProductCategories', {})
 export const getProducts = (query: { oneCategory?: string; secondCategory?: string }) =>
-  httpPost<{ list: any[] }>('/app-api/member/product/page', {}, query)
+  httpPost<{
+    list: {
+      prodcutName: string
+      productId: string
+      needPoints: number
+      points: number
+      productPrice: string
+      productCoverImgUrl: string
+      productDetailsImgUrl: string
+      contentDesc: string
+      productType: string
+      oneCategory: any
+      secondCategory: string
+    }[]
+  }>('/app-api/member/product/page', {}, query)
 export const getProduct = (id: string) =>
   httpGet<{
     id: number

packages/app/src/pages.json

@@ -386,7 +386,8 @@
       "path": "pages/home/spread/wx-agent-operation/index",
       "type": "page",
       "style": {
-        "navigationStyle": "custom"
+        "navigationBarTitleText": "微信代运营",
+        "navigationBarBackgroundColor": "#ffffff"
       }
     },
     {

packages/app/src/pages/home/components/article.vue

@@ -56,9 +56,4 @@ defineProps({
 </template>
 <style lang="scss">
 @import url('@/components/u-parse/u-parse.css');
-.content {
-  & >>> img {
-    max-width: 100%;
-  }
-}
 </style>

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

@@ -34,14 +34,14 @@ onLoad(async (query: { id: string }) => {
   <view class="flex-grow flex flex-col">
     <div class="aspect-[1.34/1] relative">
       <div class="absolute aspect-[1.26/1] top-0 w-full">
-        <wd-img width="100%" height="100%" :src="data.productCoverImgUrl" />
+        <wd-img width="100%" height="100%" :src="data?.productCoverImgUrl" />
       </div>
     </div>
     <div class="relative flex-1 bg-white p-4 flex flex-col gap-4 rounded-tl-2xl rounded-tr-2xl">
       <div class="flex items-center gap-1">
         <div class="text-[#ef4343] text-[26px] font-normal font-['D-DIN Exp'] leading-normal">
           <!-- 1000 -->
-          {{ data.points }}
+          {{ data?.points }}
         </div>
         <div class="text-black/60 text-base font-normal font-['PingFang SC'] leading-[34px]">
           积分
@@ -50,19 +50,19 @@ onLoad(async (query: { id: string }) => {
           class="w-[66px] text-black/30 text-xs font-normal font-['PingFang SC'] line-through leading-normal"
         >
           <!-- ¥60 -->
-          ¥{{ data.productPrice }}
+          ¥{{ data?.productPrice }}
         </div>
         <div class="flex-1"></div>
         <div class="text-[#999999] text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
           <!-- 已售5件 -->
-          已售{{ data.exchangeCount || 0 }}件
+          已售{{ data?.exchangeCount || 0 }}件
         </div>
       </div>
       <div
         class="w-[90px] h-4 text-black text-xl font-normal font-['PingFang SC'] leading-[10.18px]"
       >
         <!-- 阿芙佳朵 -->
-        {{ data.prodcutName }}
+        {{ data?.prodcutName }}
       </div>
       <div class="h-0.25 bg-[#f6f6f6]"></div>
       <div class="text-black/90 text-base font-normal font-['PingFang SC'] leading-normal">
@@ -87,7 +87,7 @@ onLoad(async (query: { id: string }) => {
           商品详情
         </div>
       </wd-divider>
-      <wd-img width="100%" mode="widthFix" :src="data.productDetailsImgUrl"></wd-img>
+      <wd-img width="100%" mode="widthFix" :src="data?.productDetailsImgUrl"></wd-img>
     </div>
     <div class="h-[63px] bg-white backdrop-blur-[20px] flex px-3.5 items-center justify-between">
       <div @click="show = true">

packages/app/src/pages/home/spread/case-shooting/index.vue

@@ -2,50 +2,64 @@
 { "style": { "navigationBarTitleText": "案例拍摄", "navigationBarBackgroundColor": "#ffffff" } }
 </route>
 <script setup lang="ts">
+import PageHelper from '@/components/page-helper.vue'
 import { useRouter } from '../../../../core/utils/router'
+import { getProducts } from '../../../../core/libs/requests'
 
 const router = useRouter()
-const data = ref([{}, {}, {}, {}, {}])
 </script>
 <template>
   <div class="flex-grow p-3.5">
-    <div grid grid-cols-2 gap-x-2.5 gap-y-10>
-      <template v-for="(it, i) in data" :key="i">
-        <div
-          class="flex flex-col gap-4"
-          @click="router.push('/pages/home/spread/case-shooting/photographer/index')"
-        >
-          <div class="aspect-square rounded-2xl overflow-hidden relative">
-            <wd-img
-              width="100%"
-              height="100%"
-              src="https://via.placeholder.com/168x168"
-              mode="aspectFill"
-            />
+    <PageHelper
+      class="flex-grow flex flex-col"
+      :request="getProducts"
+      :query="{ oneCategory: '2', secondCategory: '101' }"
+    >
+      <template #default="{ source }">
+        <div class="grid grid-cols-2 gap-x-2.5 gap-y-10">
+          <template v-for="(it, i) in source.list" :key="i">
             <div
-              class="w-full h-[39px] bg-gradient-to-t from-black to-black/0 rounded-bl-2xl rounded-br-2xl absolute bottom-0 flex items-center justify-center"
+              class="flex flex-col gap-4"
+              @click="router.push('/pages/home/spread/case-shooting/photographer/index')"
             >
-              <div class="text-white text-base font-normal font-['PingFang SC'] leading-normal">
-                方晓峰
+              <div class="aspect-square rounded-2xl overflow-hidden relative">
+                <wd-img
+                  width="100%"
+                  height="100%"
+                  :src="it.productCoverImgUrl"
+                  custom-class="aspect-square"
+                  mode="aspectFill"
+                />
+                <div
+                  class="w-full h-[39px] bg-gradient-to-t from-black to-black/0 rounded-bl-2xl rounded-br-2xl absolute bottom-0 flex items-center justify-center"
+                >
+                  <div class="text-white text-base font-normal font-['PingFang SC'] leading-normal">
+                    <!-- 方晓峰 -->
+                    {{ it.prodcutName }}
+                  </div>
+                </div>
+              </div>
+              <div class="flex items-center">
+                <div
+                  class="text-[#ef4343] text-[22px] font-normal font-['D-DIN Exp'] leading-normal"
+                >
+                  <!-- 1600 -->
+                  {{ it.points }}
+                </div>
+                <div class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-[34px]">
+                  积分
+                </div>
+                <div class="flex-1"></div>
+                <div
+                  class="w-[53px] text-black/30 text-xs font-normal font-['PingFang SC'] line-through leading-normal"
+                >
+                  2000积分
+                </div>
               </div>
             </div>
-          </div>
-          <div class="flex items-center">
-            <div class="text-[#ef4343] text-[22px] font-normal font-['D-DIN Exp'] leading-normal">
-              1600
-            </div>
-            <div class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-[34px]">
-              积分
-            </div>
-            <div class="flex-1"></div>
-            <div
-              class="w-[53px] text-black/30 text-xs font-normal font-['PingFang SC'] line-through leading-normal"
-            >
-              2000积分
-            </div>
-          </div>
+          </template>
         </div>
       </template>
-    </div>
+    </PageHelper>
   </div>
 </template>

packages/app/src/pages/home/spread/wx-agent-operation/index.vue

@@ -1,26 +1,61 @@
 <route lang="json">
-{ "style": { "navigationStyle": "custom" } }
+{ "style": { "navigationBarTitleText": "微信代运营", "navigationBarBackgroundColor": "#ffffff" } }
 </route>
 <script setup lang="ts">
-const imgs = ref([
-  //   'https://image.zhuchaohui.com/zhucaohui/3014480570bd7b81a64eb1ca598c7e017f7952eb982e47aae4eb23de9d7de9f2.jpg',
-])
-const handleClickLeft = () => {
-  uni.navigateBack()
-}
+import PageHelper from '@/components/page-helper.vue'
+import { useRouter } from '../../../../core/utils/router'
+import { getProducts } from '../../../../core/libs/requests'
+
+const router = useRouter()
 </script>
 <template>
-  <div>
-    <wd-navbar
-      left-arrow
-      fixed
-      safe-area-inset-top
-      custom-class="bg-transparent"
-      title="微信代运营"
-      @click-left="handleClickLeft"
-    ></wd-navbar>
-    <template v-for="(it, i) in imgs" :key="i">
-      <wd-img width="100%" :src="it" mode="widthFix"></wd-img>
+  <PageHelper
+    class="flex-grow flex flex-col p-3.5"
+    :request="getProducts"
+    :query="{ oneCategory: '2', secondCategory: '102' }"
+  >
+    <template #default="{ source }">
+      <div class="grid grid-cols-2 gap-x-2.5 gap-y-10">
+        <template v-for="(it, i) in source.list" :key="i">
+          <div
+            class="flex flex-col gap-4"
+            @click="router.push('/pages/home/spread/case-shooting/photographer/index')"
+          >
+            <div class="aspect-square rounded-2xl overflow-hidden relative">
+              <wd-img
+                width="100%"
+                height="100%"
+                :src="it.productCoverImgUrl"
+                custom-class="aspect-square"
+                mode="aspectFill"
+              />
+              <div
+                class="w-full h-[39px] bg-gradient-to-t from-black to-black/0 rounded-bl-2xl rounded-br-2xl absolute bottom-0 flex items-center justify-center"
+              >
+                <div class="text-white text-base font-normal font-['PingFang SC'] leading-normal">
+                  <!-- 方晓峰 -->
+                  {{ it.prodcutName }}
+                </div>
+              </div>
+            </div>
+            <div class="flex items-center">
+              <div class="text-[#ef4343] text-[22px] font-normal font-['D-DIN Exp'] leading-normal">
+                <!-- 1600 -->
+                {{ it.points }}
+              </div>
+              <div class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-[34px]">
+                积分
+              </div>
+              <div class="flex-1"></div>
+              <div
+                class="w-[53px] text-black/30 text-xs font-normal font-['PingFang SC'] line-through leading-normal"
+              >
+                2000积分
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
     </template>
-  </div>
+  </PageHelper>
 </template>