feat(product-detail): 添加产品详情页面并更新路由；优化页面跳转逻辑

packages/app/src/pages.json

@@ -437,6 +437,14 @@
       }
     },
     {
+      "path": "pages/home/spread/product-detail/index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "",
+        "navigationBarBackgroundColor": "#fff"
+      }
+    },
+    {
       "path": "pages/home/spread/wx-agent-operation/index",
       "type": "page",
       "style": {

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

@@ -20,7 +20,11 @@ const router = useRouter()
           <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')"
+              @click="
+                router.push(
+                  `/pages/home/spread/product-detail/index?id=${it.productId}&title=案例拍摄`,
+                )
+              "
             >
               <div class="aspect-square rounded-2xl overflow-hidden relative">
                 <wd-img

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

@@ -92,7 +92,7 @@ onMounted(async () => {
         <ElegantInfoCard :options="it"></ElegantInfoCard>
       </template>
       <wd-status-tip
-        v-if="!data.list.length"
+        v-if="!data.list?.length"
         :image="NetImages.NotContent"
         tip="暂无内容"
       ></wd-status-tip>

packages/app/src/pages/home/spread/product-detail/index.vue

@@ -0,0 +1,182 @@
+<route lang="json5">
+{
+  style: {
+    navigationBarTitleText: '',
+    navigationBarBackgroundColor: '#fff',
+  },
+}
+</route>
+
+<script setup lang="ts">
+import TiltedButton from '@/components/tilted-button.vue'
+import Product from '../components/product.vue'
+import { shoppingBag } from '@designer-hub/assets/src/assets/svgs/index'
+import InvertedTrapezoidButton from '@/components/inverted-trapezoid-button.vue'
+import TrapeziumButton from '@/components/trapezium-button.vue'
+import { useRouter } from '../../../../core/utils/router'
+import { getProduct, productPlacing } from '../../../../core/libs/requests'
+import { requestToast } from '../../../../core/utils/common'
+import { useUserStore } from '../../../../store'
+import { storeToRefs } from 'pinia'
+import BottomAppBar from '@/components/bottom-app-bar.vue'
+
+const userStore = useUserStore()
+const router = useRouter()
+
+const { userInfo } = storeToRefs(userStore)
+const id = ref()
+const show = ref(false)
+const a = ref(1)
+const type = ref<'add2Cart' | 'orderNow'>()
+const { data, run: setData } = useRequest(() => getProduct(id.value))
+
+const handleConfirm = async () => {
+  if (type.value === 'orderNow') {
+    const { data: res, code } = await requestToast(() =>
+      productPlacing({
+        isShoppingCart: 0,
+        userId: userInfo.value.userId,
+        list: [
+          {
+            productId: id.value,
+            points: data.value.points,
+            nums: 1,
+            productName: data.value.prodcutName,
+            orderImgUrl: data.value.productCoverImgUrl,
+            vendorId: data.value.vendorId,
+          },
+        ],
+        couponList: [],
+      }),
+    )
+    if (code !== 0) return
+    router.push(`/pages/home/mall/confirm-order/index?data=${JSON.stringify(res)}`)
+  }
+}
+onLoad(async (query: { id: string; title: string }) => {
+  id.value = query.id
+  uni.setNavigationBarTitle({ title: query.title })
+  await setData()
+})
+</script>
+
+<template>
+  <!-- <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" />
+      </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">
+          {{ data?.points }}
+        </div>
+        <div class="text-black/60 text-base font-normal font-['PingFang_SC'] leading-[34px]">
+          积分
+        </div>
+        <div
+          class="w-[66px] text-black/30 text-xs font-normal font-['PingFang_SC'] line-through leading-normal"
+        >
+          ¥{{ data?.productPrice }}
+        </div>
+        <div class="flex-1"></div>
+        <div class="text-[#999999] text-xs font-normal font-['PingFang_SC'] leading-[10.18px]">
+          已售{{ data?.exchangeCount || 0 }}件
+        </div>
+      </div>
+      <div class="h-4 text-black text-xl font-normal font-['PingFang_SC'] leading-[10.18px]">
+        {{ 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">
+        积分兑换说明：
+      </div>
+      <div
+        class="w-[346px] h-[95px] text-black/40 text-xs font-normal font-['PingFang_SC'] leading-[23px]"
+      >
+        · 不限制兑换个数
+        <br />
+        · 兑换后不支持退换货,如有问题可联系官方客户
+        <br />
+        · 规格：件
+        <br />
+        · 配送方式：到店自取
+      </div>
+      <div class="mx--4 h-2.5 bg-neutral-100"></div>
+      <wd-divider>
+        <div
+          class="text-center text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal"
+        >
+          商品详情
+        </div>
+      </wd-divider>
+      <wd-img width="100%" mode="widthFix" :src="data?.productDetailsImgUrl"></wd-img>
+    </div>
+  </view> -->
+  <div 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?.productDetailsImgUrl" />
+      </div>
+    </div>
+    <div class="relative flex-1 bg-white p-7 flex flex-col gap-6 rounded-tl-2xl rounded-tr-2xl">
+      <div class="flex">
+        <div class="w-[67px] text-black text-xl font-normal font-['PingFang_SC'] leading-[10.18px]">
+          {{ data?.prodcutName }}
+        </div>
+        <div
+          class="w-[67px] text-black/60 text-sm font-normal font-['PingFang_SC'] leading-[10.18px]"
+        >
+          实景摄影
+        </div>
+      </div>
+      <div
+        class="text-justify text-black/40 text-base font-normal font-['PingFang_SC'] leading-relaxed"
+        v-html="data?.contentDesc"
+      ></div>
+    </div>
+    <BottomAppBar fixed placeholder>
+      <div
+        class="bg-white/90 backdrop-blur-[20px] flex px-10 py-2.5 border-t-1 border-t-solid border-t-[#ececec]"
+      >
+        <div class="text-[#ef4343] text-2xl font-normal font-['D-DIN Exp'] leading-normal">
+          {{ data?.points }}
+        </div>
+        <div class="text-black/40 text-base font-normal font-['PingFang_SC'] leading-[34px]">
+          积分
+        </div>
+        <div class="flex-1"></div>
+        <div @click="(show = true), (type = 'orderNow')">
+          <TiltedButton size="large">立即兑换</TiltedButton>
+        </div>
+      </div>
+    </BottomAppBar>
+    <wd-action-sheet v-model="show">
+      <view class="px-7 py-11">
+        <div class="flex gap-3 mb-13.5">
+          <div class="w-[110px] h-[110px] bg-[#f6f6f6] rounded-2xl">
+            <wd-img width="100%" height="100%" :src="data?.productCoverImgUrl"></wd-img>
+          </div>
+          <div class="flex flex-col justify-between flex-1">
+            <div class="text-black/40 text-base font-normal font-['PingFang_SC'] leading-normal">
+              {{ data?.prodcutName }}
+            </div>
+            <div class="flex items-center">
+              <div class="text-[#ef4343] text-[22px] font-normal font-['D-DIN Exp'] leading-normal">
+                {{ data?.points }}
+              </div>
+              <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px]">
+                积分
+              </div>
+              <div class="flex-1"></div>
+            </div>
+          </div>
+        </div>
+        <wd-button block :round="false" @click="handleConfirm">确认</wd-button>
+      </view>
+    </wd-action-sheet>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

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

@@ -19,7 +19,11 @@ const router = useRouter()
         <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')"
+            @click="
+              router.push(
+                `/pages/home/spread/product-detail/index?id=${it.productId}&title=微信代运营`,
+              )
+            "
           >
             <div class="aspect-square rounded-2xl overflow-hidden relative">
               <wd-img

packages/app/src/types/uni-pages.d.ts

@@ -49,6 +49,7 @@ interface NavigateToOptions {
        "/pages/home/offline-activity/list/index" |
        "/pages/home/spread/case-shooting/index" |
        "/pages/home/spread/design-awards/index" |
+       "/pages/home/spread/product-detail/index" |
        "/pages/home/spread/wx-agent-operation/index" |
        "/pages/mine/homepage/channels/index" |
        "/pages/mine/homepage/consult/index" |