Feat: 旅居订单详情信息处理
This commit is contained in:
linxi
@@ -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>
|
||||
Reference in New Issue
Block a user