Feat: 旅居订单详情信息处理

api/sojoumOrder.js

@@ -0,0 +1,33 @@
+import request from "@/utils/request";
+/**
+ * 旅居团购订单详情
+ * @param {*} params
+ * @returns
+ */
+export function fetchSojoumOrderDetail(params) {
+  return request.get("/travel/travelGroupOrder/detail/" + params.key, params, {
+    login: true
+  })
+}
+
+/**
+ * 旅居团购订单退款
+ * @param {*} params
+ * @returns
+ */
+export function sojoumOrderRefund(params) {
+  return request.post("/travel/travelGroupOrder/refund", params, {
+    login: true
+  })
+}
+
+/**
+ * 旅居团购订单修改入住时间
+ * @param {*} params
+ * @returns
+ */
+export function sojoumOrderCheckInTime(params) {
+  return request.post("/travel/travelGroupOrder/changeDate", params, {
+    login: true
+  })
+}

pages.json

@@ -796,6 +796,20 @@
             "navigationBarTitleText": "提交订单",
             "navigationBarBackgroundColor": "#FFFFFF"
           }
+        },
+        {
+          "path": "views/sojoumOrderDetails",
+          "style": {
+            "navigationBarTitleText": "订单详情",
+            "navigationBarBackgroundColor": "#FFFFFF"
+          }
+        },
+        {
+          "path": "views/sojoumOrderRefund",
+          "style": {
+            "navigationBarTitleText": "申请退款",
+            "navigationBarBackgroundColor": "#FFFFFF"
+          }
         }
       ]
     },

pkg_product/views/sojoumOrderDetails.vue

@@ -0,0 +1,372 @@
+<template>
+  <view class="order-details v12-px-3 v12-pt-3">
+    <!-- 订单状态 -->
+    <view class="status-section">
+      <view class="v12-font-32 v12-primary-text">{{orderInfo._status._title}}</view>
+      <view class="v12-font-24 v12-mt-3" style="color: #666;" v-if="orderInfo._status && ['1','2'].includes(orderInfo._status._type)">
+        您已下单成功，请联系商家确认具体的入住时间
+      </view>
+      <view class="v12-font-24 v12-mt-3" style="color: #666;" v-if="orderInfo._status && ['-1'].includes(orderInfo._status._type)">
+        订单正在申请退款中
+      </view>
+      <view class="v12-font-24 v12-mt-3 v12-primary-text" v-if="orderInfo._status && ['-3'].includes(orderInfo._status._type)">
+        原因：{{ orderInfo._status._msg }}
+      </view>
+      <view class="v12-font-24 v12-mt-3 v12-primary-text" v-if="orderInfo._status && ['-2'].includes(orderInfo._status._type)">
+        订单已成功取消，订单费用退回原账户
+      </view>
+      <view class="v12-font-24 v12-mt-3 v12-primary-text" v-if="orderInfo._status && ['4', '3'].includes(orderInfo._status._type)">
+        订单核验成功
+      </view>
+    </view>
+
+    <!-- 商品信息 -->
+    <view class="product-section" >
+      <image class="product-image" :src="orderInfo.travelGroupOrderInfo.travelGroupProduct.mainImage" mode="aspectFill"></image>
+      <view class="product-info">
+        <view class="v12-font-32 v12-font-bold more_t">{{orderInfo.travelGroupOrderInfo.travelGroupProduct.name}}</view>
+        <view class="product-price">
+          <text style="font-size: 28rpx; color: #A1A1A1;">实付：</text>
+          <text class="v12-primary-text">
+            <text class="v12-font-28 v12-primary-text">¥</text>
+            <text class="v12-font-36 v12-primary-text">{{orderInfo.payPrice}}</text>
+          </text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 核销码 -->
+    <view class="verify-section" v-if="orderInfo._status && ['1','2'].includes(orderInfo._status._type)">
+      <view class="verify-title v12-font-28 v12-primary-text">核销码：{{orderInfo.verifyCode}}</view>
+      <image class="qr-code" :src="orderInfo.verifyQrCode" mode="aspectFit"></image>
+      <view class="contact-buttons">
+        <button class="contact-btn merchant-phone" @click="contactMerchant('phone')">商家电话</button>
+        <button class="contact-btn merchant-wechat" @click="contactMerchant('wechat')">商家微信</button>
+      </view>
+    </view>
+
+    <!-- 联系人信息 -->
+    <view class="contact-section">
+      <view class="section-title v12-font-28 v12-font-bold">联系人信息</view>
+      <u-divider></u-divider>
+      <view class="info-item">
+        <text class="label">姓名：</text>
+        <text class="value" style="text-align: left; font-weight: 500">{{orderInfo.realName}}</text>
+      </view>
+      <view class="info-item">
+        <text class="label">联系电话：</text>
+        <text class="value" style="text-align: left; font-weight: 500;">{{orderInfo.userPhone}}</text>
+      </view>
+      <view class="info-item">
+        <text class="label">入住时间：</text>
+        <text class="value" style="text-align: left; font-weight: 500;">{{formatDate(orderInfo.travelGroupOrderInfo.orderStartDate)}}~{{formatDate(orderInfo.travelGroupOrderInfo.orderEndDate)}}</text>
+      </view>
+    </view>
+
+    <!-- 订单信息 -->
+    <view class="order-section">
+      <view class="info-item">
+        <text class="label">订单编号</text>
+        <text class="value">{{orderInfo.orderId}}</text>
+        <text class="copy-btn v12-primary-text v12-primary-border v12-ml-1 v12-px-1" @click="copyOrderNo">复制</text>
+      </view>
+      <view class="info-item">
+        <text class="label">下单时间</text>
+        <text class="value">{{orderInfo.createTime}}</text>
+      </view>
+      <view class="info-item">
+        <text class="label">订单类型</text>
+        <text class="value">其他类型</text>
+      </view>
+      <view class="info-item">
+        <text class="label">支付状态</text>
+        <text class="value">{{orderInfo._status._type !== '0' ? '已支付' : '未支付'}}</text>
+      </view>
+      <view class="info-item">
+        <text class="label">支付方式</text>
+        <text class="value">{{orderInfo.payTypeName}}</text>
+      </view>
+    </view>
+
+    <!-- 底部按钮 -->
+    <view class="bottom-buttons">
+      <button class="btn customer-service" @click="contactCustomerService">平台客服</button>
+      <view class="v12-align-center">
+        <button class="btn v12-primary-border v12-primary-text modify-time" @click="modifyStayTime">修改入住时间</button>
+        <button class="btn v12-primary-border v12-primary-text refund" @click="applyRefund">申请退款</button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { fetchSojoumOrderDetail } from "@/api/sojoumOrder";
+export default {
+  data() {
+    return {
+      key: '',
+      orderInfo: {
+        travelGroupOrderInfo: {},
+        _status: {}
+      }
+    }
+  },
+  onLoad(otps) {
+    this.key = otps.id;
+    this.getSojoumOrderDetail();
+  },
+  methods: {
+    /**
+     * 获取旅居团购订单详情
+     */
+    async getSojoumOrderDetail() {
+      const params = {
+        key: this.key
+      }
+      uni.showLoading({
+        title: '加载中...',
+        mask: true,
+      })
+      const res = await fetchSojoumOrderDetail(params);
+      if (res.status === 200) {
+        this.orderInfo = res.data;
+        uni.hideLoading();
+      }
+    },
+    /**
+     * 格式化日期
+     * @param {string} dateStr - 格式为 yyyy-MM-dd 的日期字符串
+     * @returns {string} - 格式为 yyyy年MM月dd日 的日期字符串
+     */
+    formatDate(dateStr) {
+      if (!dateStr) return '';
+      const [year, month, day] = dateStr.split('-');
+      return `${year}年${month}月${day}日`;
+    },
+
+    /**
+     * 复制订单编号
+     */
+    copyOrderNo() {
+      uni.setClipboardData({
+        data: this.orderInfo.orderDetails.orderNo,
+        success: () => {
+          uni.showToast({
+            title: '复制成功',
+            icon: 'success'
+          })
+        }
+      })
+    },
+    contactMerchant(type) {
+      if (type === 'phone') {
+        uni.makePhoneCall({
+          phoneNumber: this.orderInfo.merPhone,
+          success: () => {
+            uni.showToast({
+              title: '正在拨打电话',
+              icon: 'none'
+            })
+          },
+          fail: () => {
+            uni.showToast({
+              title: '拨打失败',
+              icon: 'none'
+            })
+          }
+        })
+      } else if (type === 'wechat') {
+        uni.setClipboardData({
+          data: this.orderInfo.merWechat,
+          success: () => {
+            uni.showToast({
+              title: '微信号已复制',
+              icon: 'success'
+            })
+          }
+        })
+      }
+    },
+    contactCustomerService() {
+      // 这里可以添加跳转到客服页面或打开客服会话的逻辑
+      uni.showToast({
+        title: '正在连接客服...',
+        icon: 'none'
+      })
+    },
+    modifyStayTime() {
+      // 这里可以添加修改入住时间的逻辑，比如打开日期选择器
+      uni.showToast({
+        title: '即将开放此功能',
+        icon: 'none'
+      })
+    },
+    applyRefund() {
+      // 这里可以添加申请退款的逻辑，比如跳转到退款页面
+      uni.navigateTo({
+        url: '/pkg_product/views/sojoumOrderRefund?id=' + this.key
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.status-section,.product-section,.verify-section {
+  border-radius: 20rpx;
+}
+.order-details {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  padding-bottom: 140rpx !important;
+
+  .status-section {
+    background-color: #fff;
+    padding: 40rpx 30rpx;
+    .status-text {
+      font-size: 36rpx;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 20rpx;
+    }
+    .status-desc {
+      font-size: 28rpx;
+      color: #666;
+    }
+  }
+
+  .product-section {
+    background-color: #fff;
+    margin-top: 20rpx;
+    padding: 30rpx;
+    display: flex;
+    .product-image {
+      width: 200rpx;
+      height: 200rpx;
+      border-radius: 12rpx;
+    }
+    .product-info {
+      flex: 1;
+      margin-left: 20rpx;
+      .product-title {
+        font-size: 28rpx;
+        color: #333;
+        line-height: 1.4;
+      }
+      .product-price {
+        margin-top: 20rpx;
+        color: #666;
+        .price {
+          color: #ff4d4f;
+          font-size: 32rpx;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+
+  .verify-section {
+    background-color: #fff;
+    margin-top: 20rpx;
+    padding: 30rpx;
+    text-align: center;
+    .verify-title {
+      font-size: 32rpx;
+      color: #333;
+      margin-bottom: 30rpx;
+    }
+    .qr-code {
+      width: 300rpx;
+      height: 300rpx;
+      margin: 0 auto;
+    }
+    .contact-buttons {
+      display: flex;
+      justify-content: center;
+      margin-top: 30rpx;
+      .contact-btn {
+        margin: 0 20rpx;
+        padding: 0 40rpx;
+        border-radius: 40rpx;
+        font-size: 28rpx;
+        &.merchant-phone {
+          background-color: #fff;
+          border: 2rpx solid #333;
+          color: #333;
+        }
+        &.merchant-wechat {
+          background-color: #fff;
+          border: 2rpx solid #333;
+          color: #333;
+        }
+      }
+    }
+  }
+
+  .contact-section,
+  .order-section {
+    background-color: #fff;
+    margin-top: 20rpx;
+    padding: 30rpx;
+    border-radius: 20rpx;
+    .section-title {
+      font-size: 32rpx;
+      color: #333;
+      margin-bottom: 20rpx;
+    }
+    .info-item {
+      display: flex;
+      align-items: center;
+      margin-bottom: 20rpx;
+      font-size: 26rpx;
+      .label {
+        color: #333;
+        width: 160rpx;
+      }
+      .value {
+        color: #333;
+        font-weight: 500;
+        flex: 1;
+        text-align: right;
+      }
+      .copy-btn {
+        color: #1890ff;
+        border-radius: 40rpx;
+      }
+    }
+  }
+
+  .bottom-buttons {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: #fff;
+    padding: 20rpx 30rpx;
+    display: flex;
+    justify-content: space-between;
+    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
+
+    .btn {
+      margin: 0 10rpx;
+      height: 60rpx;
+      line-height: 60rpx;
+      text-align: center;
+      border-radius: 40rpx;
+      font-size: 26rpx;
+      width: fit-content;
+      &.customer-service {
+        background-color: #fff;
+        border: 2rpx solid #333;
+        color: #333;
+      }
+      &.modify-time {
+        background-color: #fff;
+      }
+      &.refund {
+        background-color: #fff;
+      }
+    }
+  }
+}
+</style>

pkg_product/views/sojoumOrderRefund.vue

@@ -0,0 +1,209 @@
+<template>
+  <view class="refund-page v12-px-3 v12-pt-3">
+    <!-- 退款金额部分 -->
+    <view class="refund-amount-section">
+      <view class="v12-justify-between v12-align-center">
+        <view>
+          <view class="v12-font-28 v12-font-bold">退款金额</view>
+          <view class="return-method">退回原支付方</view>
+        </view>
+        <view class="v12-font-32 v12-primary-text v12-font-bold">¥{{refundAmount}}</view>
+      </view>
+      <u-divider></u-divider>
+      <view class="order-amount">
+        <text class="v12-font-28 v12-font-bold">订单支付金额</text>
+        <text class="v12-font-32 v12-font-bold">¥{{orderAmount}}</text>
+      </view>
+      <view class="deduction-amount v12-mt-2">
+        <text class="v12-font-24 v12-primary-text">退款违约金</text>
+        <text class="v12-primary-text">¥{{deductionAmount}}</text>
+      </view>
+    </view>
+
+    <!-- 退款原因部分 -->
+    <view class="refund-reason-section v12-mt-3">
+      <view class="reason-title">退款原因（单选）</view>
+      <view class="reason-options">
+        <view 
+          v-for="(reason, index) in refundReasons" 
+          :key="index"
+          class="reason-item"
+          :class="{'selected': selectedReason === reason}"
+          @click="selectReason(reason)"
+        >
+          {{reason}}
+        </view>
+      </view>
+    </view>
+
+    <!-- 其他原因输入框 -->
+    <view class="other-reason-section v12-mt-3">
+      <view class="other-reason-title">其他个人原因</view>
+      <textarea 
+        class="reason-input"
+        v-model="otherReason"
+        placeholder="请输入其他退款原因"
+        maxlength="200"
+      />
+    </view>
+
+    <!-- 提交按钮 -->
+    <view class="v12-mt-3">
+      <button class="submit-btn v12-primary v12-white-text v12-radius-100 v12-font-32" block @click="submitRefund">点击确认退款</button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      refundAmount: 3500.0,
+      orderAmount: 3888,
+      deductionAmount: 388.8,
+      refundReasons: [
+        '行程变更',
+        '定错时间/地址',
+        '实际与页面不符',
+        '个人突发情况',
+        '沟通问题',
+        '其他'
+      ],
+      selectedReason: '',
+      otherReason: ''
+    }
+  },
+  methods: {
+    selectReason(reason) {
+      this.selectedReason = reason
+    },
+    submitRefund() {
+      // TODO: 实现退款提交逻辑
+      const refundData = {
+        amount: this.refundAmount,
+        reason: this.selectedReason,
+        otherReason: this.otherReason
+      }
+      console.log('提交退款申请：', refundData)
+      uni.showToast({
+        title: '退款申请已提交',
+        icon: 'success'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.refund-page {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  
+  .refund-amount-section {
+    background-color: #fff;
+    padding: 30rpx;
+    border-radius: 20rpx;
+
+    .amount-title {
+      font-size: 28rpx;
+      color: #333;
+      margin-bottom: 20rpx;
+    }
+
+    .return-method {
+      font-size: 22rpx;
+      color: #999;
+    }
+
+    .amount {
+      font-size: 60rpx;
+      font-weight: bold;
+      margin: 20rpx 0;
+    }
+
+    .order-amount, .deduction-amount {
+      display: flex;
+      justify-content: space-between;
+      font-size: 26rpx;
+      color: #666;
+      margin-top: 10rpx;
+    }
+  }
+
+  .refund-reason-section {
+    background-color: #fff;
+    padding: 30rpx;
+    border-radius: 20rpx;
+
+    .reason-title {
+      font-size: 28rpx;
+      color: #333;
+      margin-bottom: 20rpx;
+    }
+
+    .reason-options {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 20rpx;
+
+      .reason-item {
+        padding: 15rpx 30rpx;
+        border-radius: 16rpx;
+        font-size: 26rpx;
+        color: #333;
+        background-color: #fff;
+        border: 2rpx solid #333;
+        &.selected {
+          color: #fff;
+          border-color: #F22535;
+          background-color: #F22535;
+        }
+      }
+    }
+  }
+
+  .other-reason-section {
+    background-color: #fff;
+    padding: 30rpx;
+    border-radius: 20rpx;
+
+    .other-reason-title {
+      font-size: 28rpx;
+      color: #333;
+      margin-bottom: 20rpx;
+    }
+
+    .reason-input {
+      width: 100%;
+      height: 200rpx;
+      padding: 20rpx;
+      font-size: 26rpx;
+      background-color: #f5f5f5;
+      border-radius: 10rpx;
+    }
+  }
+
+  .submit-section {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 30rpx;
+    background-color: #fff;
+    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
+
+    .submit-btn {
+      width: 100%;
+      height: 80rpx;
+      line-height: 80rpx;
+      text-align: center;
+      color: #fff;
+      font-size: 28rpx;
+      border-radius: 40rpx;
+      border: none;
+      letter-spacing: 4rpx;
+      font-weight: 500;
+    }
+  }
+}
+</style>

pkg_product/views/submitOrder.vue

@@ -292,7 +292,7 @@ export default {
               duration: 2000
             })
             this.$yrouter.replace({
-              path: "/pages/order/OrderDetails/index?isGroup=1",
+              path: "/pkg_product/views/sojoumOrderDetails",
               query: {
                 id: data.result.orderId
               }
@@ -307,7 +307,7 @@ export default {
               duration: 2000
             })
             this.$yrouter.replace({
-              path: "/pages/order/OrderDetails/index?isGroup=1",
+              path: "/pkg_product/views/sojoumOrderDetails",
               query: {
                 id: data.result.orderId
               }
@@ -320,7 +320,7 @@ export default {
               duration: 2000
             })
             this.$yrouter.replace({
-              path: "/pages/order/OrderDetails/index?isGroup=1",
+              path: "/pkg_product/views/sojoumOrderDetails",
               query: {
                 id: data.result.orderId
               }
@@ -329,7 +329,7 @@ export default {
           case "WECHAT_H5_PAY":
             // H5支付
             this.$yrouter.replace({
-              path: "/pages/order/OrderDetails/index?isGroup=1",
+              path: "/pkg_product/views/sojoumOrderDetails",
               query: {
                 id: data.result.orderId
               }
@@ -339,7 +339,7 @@ export default {
             // 小程序支付
             weappPay(data.result.jsConfig).finally(() => {
               this.$yrouter.replace({
-                path: "/pages/order/OrderDetails/index?isGroup=1",
+                path: "/pkg_product/views/sojoumOrderDetails",
                 query: {
                   id: data.result.orderId
                 }
@@ -350,7 +350,7 @@ export default {
             // APP支付
             weappPay(data.result.jsConfig).finally(() => {
               this.$yrouter.replace({
-                path: "/pages/order/OrderDetails/index?isGroup=1",
+                path: "/pkg_product/views/sojoumOrderDetails",
                 query: {
                   id: data.result.orderId
                 }