Feat:订单退款,礼品下单
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
<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-28 v12-font-bold 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>
|
||||
@@ -27,8 +27,8 @@
|
||||
<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-primary-text v12-font-bold">
|
||||
<text class="v12-font-26 v12-primary-text">¥</text>
|
||||
<text class="v12-font-36 v12-primary-text">{{orderInfo.payPrice}}</text>
|
||||
</text>
|
||||
</view>
|
||||
@@ -40,11 +40,34 @@
|
||||
<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>
|
||||
<button class="contact-btn merchant-phone" @click="showPhoneDialog('phone')">商家电话</button>
|
||||
<button class="contact-btn merchant-wechat" @click="showPhoneDialog('wechat')">商家微信</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商家电话弹窗 -->
|
||||
<u-popup :show="showPhonePopup" mode="center" round="10" :safe-area-inset-bottom="false">
|
||||
<view class="phone-popup">
|
||||
<view class="phone-title">{{ title }}</view>
|
||||
<view class="phone-number">{{ popContent || '暂无'}}</view>
|
||||
<view class="phone-actions v12-align-center" v-if="title === '商家电话'">
|
||||
<!-- <button class="action-btn cancel" @click="showPhonePopup = false">取消</button>
|
||||
<button class="action-btn call" @click="makePhoneCall">立即拨打</button> -->
|
||||
<view class="v12-font-28 v12-primary-text" @click="contactMerchant('phone')">立即拨打</view> | <view class="v12-font-28" @click="showPhonePopup = false">取消</view>
|
||||
</view>
|
||||
<view class="phone-actions v12-align-center" v-if="title === '商家微信'">
|
||||
<!-- <button class="action-btn cancel" @click="showPhonePopup = false">取消</button>
|
||||
<button class="action-btn call" @click="makePhoneCall">立即拨打</button> -->
|
||||
<view class="v12-font-28 v12-primary-text" @click="contactMerchant('wechat')">立即复制</view> | <view class="v12-font-28" @click="showPhonePopup = false">取消</view>
|
||||
</view>
|
||||
<view class="phone-actions v12-align-center" v-if="title === '平台电话'" >
|
||||
<!-- <button class="action-btn cancel" @click="showPhonePopup = false">取消</button>
|
||||
<button class="action-btn call" @click="makePhoneCall">立即拨打</button> -->
|
||||
<view v-if="title === '平台电话'" class="v12-font-28 v12-primary-text" @click="contactMerchant('phone')">立即拨打</view> | <view class="v12-font-28" @click="showPhonePopup = false">取消</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
<!-- 联系人信息 -->
|
||||
<view class="contact-section">
|
||||
<view class="section-title v12-font-28 v12-font-bold">联系人信息</view>
|
||||
@@ -90,13 +113,20 @@
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<view class="bottom-buttons">
|
||||
<button class="btn customer-service" @click="contactCustomerService">平台客服</button>
|
||||
<view class="v12-align-center">
|
||||
<button class="btn customer-service" @click="showPhoneDialog('phone')">平台客服</button>
|
||||
<view class="v12-align-center" v-if="orderInfo._status && ['1','2'].includes(orderInfo._status._type)">
|
||||
<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 class="v12-align-center" v-if="orderInfo._status && ['1','2'].includes(orderInfo._status._type)">
|
||||
<button class="btn v12-dark-border v12-dark-text modify-time" @click="showPhoneDialog('phone')">联系商家</button>
|
||||
</view>
|
||||
</view>
|
||||
<Calendar ref="calendar" @dateSelected="handleDateSelected"></Calendar>
|
||||
<Calendar
|
||||
ref="calendar"
|
||||
:minDay="orderInfo.minBookingDays"
|
||||
@dateSelected="handleDateSelected">
|
||||
</Calendar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -110,10 +140,14 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
key: '',
|
||||
popContent: '',
|
||||
title: '',
|
||||
orderInfo: {
|
||||
travelGroupOrderInfo: {},
|
||||
_status: {}
|
||||
}
|
||||
_status: {},
|
||||
merchantPhone: '' // 添加商家电话字段
|
||||
},
|
||||
showPhonePopup: false // 控制电话弹窗显示
|
||||
}
|
||||
},
|
||||
onLoad(otps) {
|
||||
@@ -121,11 +155,17 @@ export default {
|
||||
this.getSojoumOrderDetail();
|
||||
},
|
||||
methods: {
|
||||
getDaysCount() {
|
||||
// 根据开始日期和结束日期计算天数
|
||||
const startDate = new Date(this.orderInfo.travelGroupOrderInfo.orderStartDate);
|
||||
const endDate = new Date(this.orderInfo.travelGroupOrderInfo.orderEndDate);
|
||||
const timeDiff = endDate - startDate;
|
||||
const daysCount = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
|
||||
return daysCount + 1;
|
||||
},
|
||||
handleDateSelected(dateRange) {
|
||||
console.log('selectedRange', dateRange);
|
||||
|
||||
const params = {
|
||||
orderId: this.orderInfo.travelGroupOrderInfo.travelGroupProduct.id,
|
||||
orderId: this.key,
|
||||
orderStartDate: dateRange.startDate,
|
||||
orderEndDate: dateRange.endDate
|
||||
}
|
||||
@@ -139,6 +179,7 @@ export default {
|
||||
title: '入住时间修改成功',
|
||||
icon: 'success'
|
||||
})
|
||||
this.getSojoumOrderDetail();
|
||||
}
|
||||
}).finally(() => {
|
||||
uni.hideLoading();
|
||||
@@ -169,6 +210,7 @@ export default {
|
||||
const res = await fetchSojoumOrderDetail(params);
|
||||
if (res.status === 200) {
|
||||
this.orderInfo = res.data;
|
||||
this.orderInfo.minBookingDays = this.getDaysCount();
|
||||
uni.hideLoading();
|
||||
}
|
||||
},
|
||||
@@ -202,6 +244,8 @@ export default {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.orderInfo.merPhone,
|
||||
success: () => {
|
||||
console.log('///');
|
||||
|
||||
uni.showToast({
|
||||
title: '正在拨打电话',
|
||||
icon: 'none'
|
||||
@@ -218,6 +262,7 @@ export default {
|
||||
uni.setClipboardData({
|
||||
data: this.orderInfo.merWechat,
|
||||
success: () => {
|
||||
console.log('//微信号已复制/');
|
||||
uni.showToast({
|
||||
title: '微信号已复制',
|
||||
icon: 'success'
|
||||
@@ -228,10 +273,21 @@ export default {
|
||||
},
|
||||
contactCustomerService() {
|
||||
// 这里可以添加跳转到客服页面或打开客服会话的逻辑
|
||||
uni.showToast({
|
||||
title: '正在连接客服...',
|
||||
icon: 'none'
|
||||
})
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.orderInfo.merPhone,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '正在拨打电话',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '拨打失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
modifyStayTime() {
|
||||
// 这里可以添加修改入住时间的逻辑,比如打开日期选择器
|
||||
@@ -242,7 +298,42 @@ export default {
|
||||
uni.navigateTo({
|
||||
url: '/pkg_product/views/sojoumOrderRefund?id=' + this.key
|
||||
})
|
||||
}
|
||||
},
|
||||
// 显示电话弹窗
|
||||
showPhoneDialog(type) {
|
||||
if (!this.orderInfo.merPhone) {
|
||||
uni.showToast({
|
||||
title: '暂无商家电话',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (type === 'phone') {
|
||||
this.title = '商家电话';
|
||||
this.popContent = this.orderInfo.merPhone;
|
||||
} else if (type === 'wechat') {
|
||||
this.title = '商家微信';
|
||||
this.popContent = this.orderInfo.merWechat;
|
||||
}
|
||||
this.showPhonePopup = true;
|
||||
},
|
||||
|
||||
// 拨打电话
|
||||
makePhoneCall() {
|
||||
if (!this.orderInfo.merchantPhone) return;
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.orderInfo.merchantPhone,
|
||||
success: () => {
|
||||
this.showPhonePopup = false;
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '拨号失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -325,6 +416,8 @@ export default {
|
||||
padding: 0 40rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
&.merchant-phone {
|
||||
background-color: #fff;
|
||||
border: 2rpx solid #333;
|
||||
@@ -405,4 +498,50 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.phone-popup {
|
||||
width: 400rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 40rpx;
|
||||
|
||||
.phone-title {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.phone-number {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.phone-actions {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
gap: 20rpx;
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
&.cancel {
|
||||
background-color: #f5f5f5;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
&.call {
|
||||
background-color: var(--v12-color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user