header

src/pages/assistingAgriculture/order/detail.vue

 <template>
   <view class="container">
-    <Header title="商品详情页"></Header>
+    <!-- <Header title="商品详情页"></Header> -->
+    <Search title="商品详情页" backgroundBox="white" :showTitle="true"></Search>
     <web-view
       style="height: 600rpx"
       :src="logisticsDetail.trailUrl"
       v-if="logisticsDetail"
     ></web-view>
     <!-- <view style="height: 600rpx; background-color: aquamarine"></view> -->
-    <view class="content" v-if="orderDetail">
+    <view class="content1" v-if="orderDetail">
       <view class="info">
         <view class="top" v-if="logisticsDetail">
           <view class="left">
@@ -26,7 +27,7 @@
             <text @tap="callShopPhone(shopDetail.phone)">打电话</text>
           </view>
         </view>
-        <view class="steps" :style="{ 'padding-top': logisticsDetail ? '0' : '80rpx' }">
+        <view class="steps">
           <view class="step-box">
             <view class="header">
               <view class="dot"></view>
@@ -52,6 +53,12 @@
                   <text class="title">
                     {{ orderStatusList[orderDetail.orderLogistics.status] }}
                   </text>
+                  <wd-count-down
+                    :time="orderDetail.countDown"
+                    :format="format"
+                    @finish="onFinish(orderNumber)"
+                    v-if="orderDetail.orderLogistics.status === '1'"
+                  />
                   <text class="text" v-if="orderDetail.orderLogistics.status === '2'">
                     {{ orderDetail.orderLogistics.createTime.slice(5, 16) }}
                   </text>
@@ -192,10 +199,34 @@
       <view style="height: 170rpx"></view>
     </view>
     <view class="footer" v-if="orderDetail">
+      <view
+        class="btn"
+        v-if="orderDetail.orderLogistics.status === '1'"
+        @tap="handleCancel(orderNumber)"
+      >
+        取消订单
+      </view>
       <view class="btn" v-if="orderDetail.orderLogistics.status === '3'" @tap="openPop()">
         查看物流
       </view>
+      <view class="btn" v-if="orderDetail.orderLogistics.status === '5'" @tap="anotherOrder()">
+        再来一单
+      </view>
       <view class="btn" @tap="callShopPhone(shopDetail.phone)">联系商家</view>
+      <view class="btn err" v-if="orderDetail.orderLogistics.status === '1'" @tap="openPayment()">
+        立即支付
+      </view>
+      <view
+        class="btn"
+        @tap="handleRefund()"
+        v-if="
+          orderDetail.orderLogistics.status === '2' ||
+          orderDetail.orderLogistics.status === '3' ||
+          orderDetail.orderLogistics.status === '4'
+        "
+      >
+        申请退款
+      </view>
       <view class="btn err" v-if="orderDetail.orderLogistics.status === '3'" @click="receipt()">
         确认收货
       </view>
@@ -206,6 +237,20 @@
       >
         评价订单
       </view>
+      <view
+        class="btn err"
+        v-if="orderDetail.orderLogistics.status === '6'"
+        @click="handleDelete(orderNumber)"
+      >
+        删除订单
+      </view>
+      <view
+        class="btn err"
+        v-if="orderDetail.orderLogistics.status === '7'"
+        @tap="handleAfterSales()"
+      >
+        售后详情
+      </view>
     </view>
   </view>
   <stepBar
@@ -214,12 +259,22 @@
     :orderInfo="orderDetail"
     :phone="shopDetail.phone"
   ></stepBar>
+  <Payment ref="PaymentRef" @payment="payNow"></Payment>
 </template>
 
 <script setup>
 import Header from '@/pages/order/components/Header/index.vue';
 import stepBar from '@/pages/assistingAgriculture/order/components/stepBar/index.vue';
-import { getOrderDetail, getShopDetail, getLogisticsMap, confirmReceipt } from '@/api/order';
+import Payment from '@/pages/order/components/Payment/index.vue';
+import {
+  getOrderDetail,
+  getShopDetail,
+  getLogisticsMap,
+  confirmReceipt,
+  cancelOrderApi,
+  deleteOrderApi,
+  repaymentApi,
+} from '@/api/order';
 const fileDomain = import.meta.env.VITE_APP_IMG_URL;
 const iconUrl = ref('https://cdn.kuaidi100.com/images/all/56/');
 
@@ -245,6 +300,38 @@ const payWayList = ref({
   2: '微信',
 });
 
+onShow(() => {
+  if (pendingPaymentOrder.value) {
+    // 查询订单状态决定是否支付
+    getOrderDetail({ orderNumber: pendingPaymentOrder.value }).then((res) => {
+      console.log(res.data.baseOrder.subStatus);
+      switch (res.data.baseOrder.subStatus) {
+        case '1':
+          xma.showToast({
+            title: '支付失败',
+            icon: 'error',
+            duration: 2000,
+          });
+          break;
+        case '2':
+          pendingPaymentOrder.value = '';
+          setTimeout(() => {
+            xma.showToast({
+              title: '付款成功',
+              icon: 'success',
+            });
+            xma.redirectTo({
+              url: '/pages/order/order?status=not_use',
+            });
+          }, 1000);
+          break;
+        default:
+          break;
+      }
+    });
+  }
+});
+
 /**
  * 获取订单详情 0-翼支付，1-支付宝，2-微信
  */
@@ -266,6 +353,10 @@ const getDetail = async () => {
     count += item.prodCount;
   });
   orderDetail.value.prodCount = count;
+  // 待付款倒计时计算
+  if (orderDetail.value.orderLogistics.status === '1') {
+    orderDetail.value.countDown = calculateCountdown(orderDetail.value.baseOrder.createTime);
+  }
   xma.hideLoading();
 };
 
@@ -379,6 +470,157 @@ const handleRemark = () => {
     url: `/pages/order/remark?orderNumber=${orderNumber.value}&shopName=${shopDetail.value.shopName}`,
   });
 };
+
+/**
+ * 取消订单
+ * @param {*} orderNumber
+ */
+const handleCancel = (orderNumber) => {
+  xma.showModal({
+    title: '提示',
+    content: '确定要取消订单吗？',
+    success: async (res) => {
+      if (res.confirm) {
+        xma.showLoading({
+          title: '取消中...',
+          mask: true,
+        });
+        await cancelOrderApi({ orderNumber });
+        xma.hideLoading();
+        setTimeout(() => {
+          xma.showToast({
+            title: '取消成功',
+            icon: 'success',
+          });
+          xma.redirectTo({
+            url: '/pages/order/order',
+          });
+        }, 1000);
+      }
+    },
+  });
+};
+
+/**
+ * 删除订单
+ * @param {*} orderNumber
+ */
+const handleDelete = (orderNumber) => {
+  xma.showModal({
+    title: '提示',
+    content: '确定要删除订单吗？',
+    success: async (res) => {
+      if (res.confirm) {
+        xma.showLoading({
+          title: '删除中...',
+          mask: true,
+        });
+        await deleteOrderApi(orderNumber);
+        xma.hideLoading();
+        setTimeout(() => {
+          xma.showToast({
+            title: '删除成功',
+            icon: 'success',
+          });
+          xma.redirectTo({
+            url: '/pages/order/order',
+          });
+        }, 1000);
+      }
+    },
+  });
+};
+
+/**
+ * 再来一单 商品类型，0-普通商品，5-团购，6-套餐，7-预售，8-售券
+ */
+const anotherOrder = () => {
+  xma.redirectTo({
+    url: `/pages/assistingAgriculture/detail/detail?prodId=${orderDetail.value.orderItems[0].prodId}`,
+  });
+};
+
+/**
+ * 申请退款
+ */
+const handleRefund = () => {
+  xma.navigateTo({
+    url: `/pages/order/refund?orderNumber=${orderNumber.value}`,
+  });
+};
+
+/**
+ * 售后详情
+ */
+const handleAfterSales = () => {
+  xma.navigateTo({
+    url: `/pages/order/afterSales?orderNumber=${orderNumber.value}`,
+  });
+};
+
+/**
+ * 唤起支付组件
+ * @param {*} orderNumber
+ */
+const PaymentRef = ref(null);
+const openPayment = () => {
+  PaymentRef.value.open(orderNumber.value);
+};
+
+/**
+ * 立即支付
+ * @param {*} orderNumber
+ */
+const pendingPaymentOrder = ref(null); // 待支付订单
+const payNow = async (data) => {
+  const param = {
+    orderNumber: data.orderNumber,
+    tradeType: data.selectType,
+  };
+  const res = await repaymentApi(param);
+  const { paymentUrl, outTradeNo } = res.data.result;
+  // 修改列表待付款订单号
+  orderNumber.value = outTradeNo;
+  pendingPaymentOrder.value = outTradeNo;
+  window.location.href = paymentUrl;
+  // 设置一个延时器
+  const start = Date.now();
+  setTimeout(() => {
+    const end = Date.now();
+    if (end - start < 1200) {
+      // 如果 iframe 加载时间小于 1.2 秒，说明应用没有安装
+      xma.showToast({
+        title: '未安装App',
+        icon: 'error',
+      });
+      // 这里可以跳转到应用下载页面
+    }
+  }, 1000);
+};
+
+/**
+ * 计算倒计时
+ */
+const format = ref('mm:ss');
+const calculateCountdown = (item) => {
+  const now = new Date().getTime();
+  const orderTime = new Date(item).getTime();
+  const countdown = orderTime + 30 * 60 * 1000 - now;
+  if (countdown <= 0) {
+    return 0;
+  }
+  return countdown;
+};
+
+/**
+ * 倒计时结束触发
+ */
+const onFinish = async (orderNumber) => {
+  await cancelOrderApi({ orderNumber });
+  xma.redirectTo({
+    url: '/pages/order/order',
+  });
+};
 </script>
 
 <style lang="scss" scoped>
@@ -394,7 +636,7 @@ page {
   width: 375 * 2rpx;
   margin: 0 auto;
 
-  .content {
+  .content1 {
     position: relative;
     top: -20rpx;
     border-radius: 20rpx 20rpx 0 0;
@@ -450,7 +692,7 @@ page {
       .steps {
         display: flex;
         flex-direction: column;
-        margin-top: 40rpx;
+        // margin-top: 40rpx;
 
         .step-box {
           display: flex;
@@ -469,7 +711,8 @@ page {
               background: #f12a2a;
               border-radius: 50%;
               position: absolute;
-              top: -12rpx;
+              top: 6rpx;
+              z-index: 1;
             }
 
             .past-dot {
@@ -478,13 +721,16 @@ page {
               background: #ffd5d5;
               border-radius: 50%;
               position: absolute;
-              top: -12rpx;
+              top: 6rpx;
+              z-index: 1;
             }
 
             .line {
               height: 100%;
               width: 2rpx;
               background-color: #ffd5d5;
+              position: absolute;
+              top: 6rpx;
             }
           }
 
@@ -494,6 +740,10 @@ page {
             gap: 22rpx;
             width: 100%;
 
+            .wd-count-down {
+              color: #ff0909;
+            }
+
             .title {
               font-family:
                 PingFang SC,
@@ -835,7 +1085,7 @@ page {
       color: #333333;
       border-radius: 32rpx;
       border: 1rpx solid #cccccc;
-      padding: 12rpx 24rpx;
+      padding: 12rpx 20rpx;
     }
 
     .err {

src/pages/order/detail.vue

 <template>
   <view class="container">
-    <Header title="订单详情"></Header>
+    <!-- <Header title="订单详情"></Header> -->
+    <Search title="订单详情" backgroundBox="white" :showTitle="true"></Search>
     <view class="content" v-if="orderDetail">
       <!-- 使用状态 -->
       <view class="status">
@@ -405,7 +406,6 @@ page {
   margin: 0 auto;
 
   .content {
-    padding-top: 44px;
     display: flex;
     flex-direction: column;
     gap: 20rpx;

src/pages/order/order.vue

 <template>
   <view class="container">
     <!--    顶部搜索框-->
-    <view class="top">
-      <wd-icon
-        class="icon"
-        name="thin-arrow-left"
-        color="#000"
-        size="32rpx"
-        @click="handleBack"
-      ></wd-icon>
+    <Search backgroundBox="#f3f3f3">
       <view class="searchBox">
         <view class="search">
           <wd-icon name="search" size="30rpx" color="#999"></wd-icon>
@@ -31,7 +24,8 @@
           @tap="handleClear"
         ></wd-icon>
       </view>
-    </view>
+    </Search>
+
     <view class="tabs" v-if="orderDic">
       <wd-tabs v-model="tab" animated :lineWidth="38" :lineHeight="3" @change="handleChange" sticky>
         <block v-for="item in tabs" :key="item.value">
@@ -549,14 +543,31 @@ function callShopPhone(phoneNumber) {
 }
 
 /**
- * 再来一单
+ * 再来一单 商品类型，0-普通商品，5-团购，6-套餐，7-预售，8-售券
  */
 const anotherOrder = (item) => {
   // 清空查询待付款状态
   pendingPaymentOrder.value = null;
-  xma.navigateTo({
-    url: `/pages/shop/confirmOrder?prodId=${item.orderItems[0].prodId}&skuId=${item.orderItems[0].skuId}`,
-  });
+
+  switch (item.prodType) {
+    case 5:
+      xma.navigateTo({
+        url: `/pages/packageDetails/packageDetails?prodId=${item.orderItems[0].prodId}`,
+      });
+      break;
+    case 7:
+      xma.redirectTo({
+        url: `/pages/assistingAgriculture/detail/detail?prodId=${item.orderItems[0].prodId}`,
+      });
+      break;
+    case 10:
+      xma.redirectTo({
+        url: `/pages/assistingAgriculture/RouteDetails/RouteDetails?prodId=${item.orderItems[0].prodId}&shopId=${item.shopId}`,
+      });
+      break;
+    default:
+      break;
+  }
 };
 
 /**
@@ -566,7 +577,7 @@ const handleQrcode = (item) => {
   // 清空查询待付款状态
   pendingPaymentOrder.value = null;
   xma.navigateTo({
-    url: `/pages/order/ticketCode?orderNumber=${item.orderNumber}`,
+    url: `/pages/order/ticketCode?orderNumber=${item.orderNumber}&shopName=${item.shopName}`,
   });
 };
 
@@ -579,6 +590,9 @@ const handleRemark = (item) => {
   });
 };
 
+/**
+ * 售后详情
+ */
 const handleAfterSales = (item) => {
   xma.navigateTo({
     url: `/pages/order/afterSales?orderNumber=${item.orderNumber}`,
@@ -665,7 +679,7 @@ page {
   margin: 0 auto;
 
   .tabs {
-    padding-top: 108rpx;
+    // padding-top: 20rpx;
 
     &:deep(.wd-tabs) {
       background-color: #f5f5f5;
@@ -693,32 +707,32 @@ page {
   align-items: center;
   padding: 0 30rpx;
   gap: 14rpx;
+}
+.searchBox {
+  width: 492rpx;
+  height: 66rpx;
+  background: #f3f3f3;
+  border-radius: 33rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0rpx 28rpx;
+  margin-left: 40rpx;
 
-  .searchBox {
-    width: 492rpx;
-    height: 66rpx;
-    background: #f3f3f3;
-    border-radius: 33rpx;
+  background-color: #fff;
+
+  .search {
+    gap: 10rpx;
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    padding: 0rpx 28rpx;
-
-    background-color: #fff;
 
-    .search {
-      gap: 10rpx;
-      display: flex;
-      align-items: center;
-
-      .text {
-        margin-left: 10rpx;
-        font-family:
-          PingFang SC,
-          PingFang SC;
-        font-weight: 500;
-        font-size: 28rpx;
-      }
+    .text {
+      margin-left: 10rpx;
+      font-family:
+        PingFang SC,
+        PingFang SC;
+      font-weight: 500;
+      font-size: 28rpx;
     }
   }
 }

src/pages/order/refund.vue

 <template>
   <view class="container">
-    <Header title="售后/退款"></Header>
+    <!-- <Header title="售后/退款"></Header> -->
+    <Search title="售后/退款" backgroundBox="white" :type="2"></Search>
     <view class="content" v-if="orderDetail">
       <view class="content-box">
         <view class="content-item">
@@ -243,7 +244,7 @@ page {
   margin: 0 auto;
 
   .content {
-    padding: 108rpx 10rpx 0;
+    padding: 20rpx 10rpx 0;
     display: flex;
     flex-direction: column;
     gap: 60rpx;

src/pages/order/ticketCode.vue

 <template>
   <view class="container">
-    <Header title="查看券码"></Header>
+    <!-- <Header title="查看券码"></Header> -->
+    <Search title="查看券码" backgroundBox="white" :showTitle="true"></Search>
     <view class="content" v-if="orderDetail">
       <!-- 使用状态 -->
       <view class="status">
-        <view class="status-text">{{ orderDetail.orderItems[0].prodName }}</view>
-        <view class="detail">有效期：{{ orderDetail.orderStore.receiverTime }}</view>
+        <view class="status-text">{{ shopName }}</view>
+        <view class="detail">有效期：{{ orderDetail.orderStore.writeOffEnd }}</view>
       </view>
 
       <!-- 券码信息 -->
@@ -32,8 +33,9 @@ import Header from './components/Header/index.vue';
 import { getOrderDetail } from '@/api/order';
 import QRCode from 'qrcode';
 
+const shopName = ref('商家名称');
 onLoad((options) => {
-  console.log(options);
+  shopName.value = options.shopName;
   getOrderDetailFn(options.orderNumber);
 });
 
@@ -76,7 +78,6 @@ page {
   margin: 0 auto;
 
   .content {
-    padding-top: 44px;
     display: flex;
     flex-direction: column;
     gap: 20rpx;

src/pages/ticket/detail.vue

 <template>
   <view class="container">
-    <Header :title="shopDetail.shopName"></Header>
-
+    <!-- <Header :title="shopDetail.shopName"></Header> -->
+    <Search :title="shopDetail.shopName" backgroundBox="white" :showTitle="true"></Search>
     <view class="content">
       <view class="shop">
         <image :src="fileDomain + shopDetail.shopLogo" class="logo" mode="aspectFill"></image>
@@ -342,7 +342,7 @@ page {
   .content {
     display: flex;
     flex-direction: column;
-    padding: 100rpx 26rpx 26rpx;
+    padding: 20rpx 26rpx 26rpx;
     gap: 26rpx;
 
     .shop {

src/pages/ticket/ticket.vue

 <template>
   <view class="container">
-    <Header title="我的券"></Header>
+    <!-- <Header title="我的券"></Header> -->
+    <Search title="我的券" backgroundBox="white" :showTitle="true"></Search>
     <view class="tab">
       <view
         :class="currentTab == index ? 'tab-select' : 'tab-item'"
@@ -308,7 +309,7 @@ page {
   .content {
     display: flex;
     flex-direction: column;
-    padding: 202rpx 26rpx 26rpx;
+    padding: 100rpx 26rpx 26rpx;
     gap: 36rpx;
 
     .card {