liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
linxi
2025-10-20 22:14:14 +08:00
parent 9f529e00b7
commit ac3d11ff2a
5 changed files with 634 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
api/sojoumOrder.js
+33
View File
@@ -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
+14
View File
@@ -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
+372
View File
@@ -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
+209
View File
@@ -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
+6 -6
View File
@@ -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
}