Selaa lähdekoodia

```
feat(attractions): 添加景点订单支付页面和订单列表功能

- 新增景点订单支付页面 (attractionsOrderPay)
- 在 async-component.d.ts 中添加 attractions-orderList 组件类型声明
- 更新 pages.json 配置新增支付页面路由
- 在景点预订页面添加跳转到支付页面的功能
- 实现订单弹窗详情展示
- 完成订单列表页面的标签页切换功能
- 更新 uni-pages.d.ts 类型定义
```

zouzexu 12 tuntia sitten
vanhempi
commit
9dea2b323f

+ 4 - 0
async-component.d.ts

@@ -34,3 +34,7 @@ declare module '@/subPack-smqjh/components/djk-order/index.vue?async' {
   const component: typeof import('@/subPack-smqjh/components/djk-order/index.vue')
   export = component
 }
+declare module '@/subPack-smqjh/components/attractions-orderList/attractions-orderList.vue?async' {
+  const component: typeof import('@/subPack-smqjh/components/attractions-orderList/attractions-orderList.vue')
+  export = component
+}

+ 8 - 0
src/pages.json

@@ -661,6 +661,14 @@
             "navigationStyle": "custom"
           }
         },
+        {
+          "path": "attractionsOrderPay/attractionsOrderPay",
+          "name": "attractions-order-pay",
+          "islogin": false,
+          "style": {
+            "navigationBarTitleText": "订单支付"
+          }
+        },
         {
           "path": "attractionsReservation/attractionsReservation",
           "name": "attractions-reservation-info",

+ 75 - 0
src/subPack-attractions/attractionsOrderPay/attractionsOrderPay.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import router from '@/router'
+
+definePage({
+  name: 'attractions-order-pay',
+  islogin: false,
+  style: {
+    navigationBarTitleText: '订单支付',
+  },
+})
+</script>
+
+<template>
+  <view class="order-pay-page">
+    <view class="px-24rpx">
+      <view class="h-20rpx" />
+      <view class="rounded-16rpx bg-#FFF p-24rpx">
+        <view class="flex items-center justify-between gap-50rpx text-32rpx font-bold">
+          <view>日场门票+观光车+飞越黄果树观影票+吉祥物+冰箱贴 经典必打卡</view>
+          <view class="text-28rpx font-normal">
+            x1
+          </view>
+        </view>
+        <view class="mt-24rpx h-2rpx w-full bg-#F0F0F0" />
+        <view class="mt-24rpx flex items-center justify-between">
+          <view class="text-28rpx font-bold">
+            订单总金额
+          </view>
+          <view class="text-32rpx text-#FF4A39 font-bold">
+            <text class="text-26rpx">
+              ¥
+            </text>
+            290
+          </view>
+        </view>
+        <view class="mt-20rpx flex items-center justify-between text-24rpx">
+          <view>积分扣减</view>
+          <view class="text-#FF4A39 font-bold">
+            ¥10
+          </view>
+        </view>
+        <view class="mt-20rpx flex items-center justify-between text-24rpx">
+          <view>微信支付</view>
+          <view class="text-#FF4A39 font-bold">
+            ¥280
+          </view>
+        </view>
+      </view>
+      <view class="mt-20rpx rounded-16rpx bg-#FFF p-24rpx">
+        <view class="text-32rpx font-bold">
+          选择支付方式
+        </view>
+        <view class="mt-24rpx h-2rpx w-full bg-#F0F0F0" />
+        <view>
+          <wd-cell-group border>
+            <wd-checkbox-group size="large">
+              <wd-cell title="微信支付" center clickable>
+                <view>
+                  <wd-checkbox model-value="1" custom-style="margin:0;" />
+                </view>
+              </wd-cell>
+            </wd-checkbox-group>
+          </wd-cell-group>
+        </view>
+      </view>
+    </view>
+    <view class="fixed bottom-0 h-174rpx w-full border-[1rpx_solid_#EEEEEE] bg-#FFF px-24rpx">
+      <wd-button custom-class="w-702rpx mt-10rpx" block size="large" @click="router.push({ name: '' })">
+        立即支付
+      </wd-button>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped></style>

+ 39 - 6
src/subPack-attractions/attractionsReservation/attractionsReservation.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import router from '@/router'
+
 definePage({
   name: 'attractions-reservation-info',
   islogin: true,
@@ -34,13 +36,17 @@ function handleConfirm({ value: selectedValue }: { value: string }) {
           选择数量
         </view>
         <view class="flex items-center gap-24rpx">
-          <view class="h-36rpx w-36rpx rounded-50% bg-#F0F0F0 text-center text-28rpx text-#AAAAAA font-600 line-height-[36rpx]">
+          <view
+            class="h-36rpx w-36rpx rounded-50% bg-#F0F0F0 text-center text-28rpx text-#AAAAAA font-600 line-height-[36rpx]"
+          >
             -
           </view>
           <view class="text-24rpx font-400">
             10
           </view>
-          <view class="h-36rpx w-36rpx rounded-50% bg-#E8FFA7 text-center text-28rpx text-#9ED605 font-600 line-height-[36rpx]">
+          <view
+            class="h-36rpx w-36rpx rounded-50% bg-#E8FFA7 text-center text-28rpx text-#9ED605 font-600 line-height-[36rpx]"
+          >
             +
           </view>
         </view>
@@ -109,7 +115,9 @@ function handleConfirm({ value: selectedValue }: { value: string }) {
         </view>
       </view>
     </view>
-    <view class="fixed bottom-0 left-0 z-100 box-border h-174rpx w-full flex items-center justify-between bg-#FFF px-24rpx">
+    <view
+      class="fixed bottom-0 left-0 z-100 box-border h-174rpx w-full flex items-center justify-between bg-#FFF px-24rpx"
+    >
       <view class="flex items-center">
         <view class="text-24rpx">
           合计
@@ -128,13 +136,38 @@ function handleConfirm({ value: selectedValue }: { value: string }) {
           </text>
           <wd-icon name="arrow-up" size="18px" />
         </view>
-        <view class="h-80rpx w-180rpx rounded-40rpx bg-#9ED605 text-center text-28rpx text-#FFF font-bold line-height-[80rpx]">
+        <view
+          class="h-80rpx w-180rpx rounded-40rpx bg-#9ED605 text-center text-28rpx text-#FFF font-bold line-height-[80rpx]"
+          @click="router.push({ name: 'attractions-order-pay' })"
+        >
           提交
         </view>
       </view>
     </view>
-    <Zpopup v-model="orderPopup" :zindex="9999">
-      <view>明细</view>
+    <Zpopup v-model="orderPopup" :zindex="99" bg="#fff">
+      <view class="p-24rpx">
+        <view class="text-center text-28rpx font-bold">
+          订单明细
+        </view>
+        <view class="mt-24rpx h-2rpx w-full bg-#F0F0F0" />
+        <view class="mt24rpx text-28rpx">
+          <view class="flex items-center gap-56rpx">
+            <view>黄果树瀑布风景区成人票 16:00-19:00</view>
+            <view>
+              <text class="text-#FF4A39 font-bold">
+                ¥290
+              </text>
+              <text>×1</text>
+            </view>
+          </view>
+          <view class="mt-20rpx">
+            入园周末节假日
+          </view>
+          <view class="mt-20rpx">
+            2026年3月22日(周日)
+          </view>
+        </view>
+      </view>
     </Zpopup>
   </view>
 </template>

+ 18 - 2
src/subPack-attractions/commonTab/components/orderList.vue

@@ -1,15 +1,31 @@
 <script setup lang="ts">
+import { tabsList } from '../order-data'
+import attractionsList from '@/subPack-smqjh/components/attractions-orderList/attractions-orderList.vue?async'
+
+const tab = ref<number>(0)
 const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())
+function handleClick(e: any) {
+  console.log(e)
+}
 </script>
 
 <template>
-  <view class="video-rights-order-page">
+  <view class="attractions-order-page">
     <wd-navbar
       title="订单列表" custom-style="background-color:#FFF" :bordered="false" :z-index="99"
       safe-area-inset-top fixed
     />
     <view :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }" />
-    订单
+    <wd-tabs v-model="tab" animated @click="handleClick">
+      <block v-for="item in tabsList" :key="item">
+        <wd-tab :title="item">
+          <view class="box-border bg-#f6f6f6 px24rpx">
+            <view class="h-20rpx" />
+            <attractionsList order />
+          </view>
+        </wd-tab>
+      </block>
+    </wd-tabs>
   </view>
 </template>
 

+ 1 - 0
src/subPack-attractions/commonTab/order-data.ts

@@ -0,0 +1 @@
+export const tabsList = ['全部', '待支付', '已支付', '已取消', '已完成']

+ 57 - 0
src/subPack-smqjh/components/attractions-orderList/attractions-orderList.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+defineProps<{
+  order: any
+}>()
+
+function handleItemClick(item: Api.xsbOrderList) {
+  console.log(item)
+}
+</script>
+
+<template>
+  <view class="mb-20rpx rounded-16rpx bg-#FFF p-24rpx" @click="handleItemClick(order)">
+    <view class="flex items-center justify-between">
+      <view class="text-32rpx font-bold">
+        贵州黄果树瀑布景区
+      </view>
+      <view class="text-28rpx text-#AAAAAA">
+        已取消
+      </view>
+    </view>
+    <view class="mt-20rpx flex items-center gap-20rpx">
+      <view class="h-160rpx w-160rpx">
+        图片
+      </view>
+      <view>
+        <view class="text-32rpx font-bold">
+          日场门票+观光车+飞越黄果树观影票+吉祥物+冰箱贴 经典必打卡
+        </view>
+        <view class="mt-20rpx text-28rpx">
+          游玩日期:2026-03-22
+        </view>
+      </view>
+    </view>
+    <view class="mt-24rpx flex items-center justify-between text-24rpx">
+      <view>订单编号:1867402054587256856</view>
+      <view>共1件商品</view>
+    </view>
+    <view class="mt-20rpx flex items-center justify-between">
+      <view class="text-24rpx">
+        下单时间:2024-12-13 11:12:30
+      </view>
+      <view>
+        <text class="text-24rpx">
+          合计:
+        </text>
+        <text class="text-26rpx text-#FF4A39 font-bold">
+          ¥
+        </text>
+        <text class="text-bold text-32rpx text-#FF4A39">
+          290
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped></style>

+ 1 - 0
src/uni-pages.d.ts

@@ -64,6 +64,7 @@ interface NavigateToOptions {
        "/subPack-refueling/orderDetaile/index" |
        "/subPack-refueling/webView/index" |
        "/subPack-attractions/attractionsDetail/attractionsDetail" |
+       "/subPack-attractions/attractionsOrderPay/attractionsOrderPay" |
        "/subPack-attractions/attractionsReservation/attractionsReservation" |
        "/subPack-attractions/commonTab/index";
 }