372 lines
10 KiB
Vue
372 lines
10 KiB
Vue
<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> |