Skip to content

J
jz_Travel
Commit 84552fd7 authored by youjie's avatar youjie
Browse files
Options

支付倒计时

parent b6774f04
Show whitespace changes
Inline Side-by-side
Showing with 450 additions and 62 deletions
pages/bus/orderdetails.vue
View file @ 84552fd7
......@@ -4,7 +4,9 @@
<scroll-view ref="scrollView" scroll-y="true" style="height: 1px;flex: 1;box-sizing: border-box;"
@scroll="scroll">
<view class="media" :style="{ opacity: 100 - boxOption + '%' }">
<view class="orderStatusBox flex" style="margin-bottom: 30rpx">
<view class="orderStatusBox column" style="margin-bottom: 30rpx;justify-content: space-between;pa">
<view class="row-sbas-n items-center">
<view class="orderStatusBox flex">
<u-icon customPrefix="iconfont" name="icondaizhifu-" size="52" color="#DFBE6E"
v-if="orderStatus.code == 0"></u-icon>
<u-icon customPrefix="iconfont" name="iconquxiao" size="52" color="#f26c6c"
......@@ -16,12 +18,63 @@
<text style="
margin-left: 26rpx;
font-size: 40rpx;
font-weight: 600;
f ont-weight: 600;
color: #111;
">
{{ orderStatus.text }}
</text>
</view>
<!-- #ifdef MP-AG -->
<u-count-down :showDays="false" :showHours="false" :timestamp="remainingSeconds"
@change="changeSeconds"
v-if="orderData.OrderStatus==1&&customer.isGuideOrLeader==1&&remainingSeconds>0"
color="#000" separator-color="#000" :show-days="false" bg-color="transparent"></u-count-down>
<!-- #endif -->
<!-- #ifdef MP-DI -->
<u-count-down :showDays="false" :showHours="false" :timestamp="remainingSeconds"
@change="changeSeconds"
v-if="orderData.OrderStatus==1&&remainingSeconds>0"
color="#000" separator-color="#000" :show-days="false" bg-color="transparent"></u-count-down>
<!-- #endif -->
</view>
<!-- #ifdef MP-AG -->
<view class="timecontent q-mt-sm" v-if="customer.isGuideOrLeader==1&&(orderData.OrderStatus==1||orderData.OrderStatus==3)">
<view v-if="orderData.OrderStatus==1&&customer.isGuideOrLeader==1&&remainingSeconds>0">
<view class="row">
<text>请您于{{dielineTime}}前支付：¥</text>
<text class="bold">{{(orderData.Money-orderData.DiscountsMoney).toFixed(2)}}</text>
</view>
<view class="small">
完成支付才能锁定包车</view>
</view>
<view class="small" v-else-if="orderData.OrderStatus==3">
取消原因：用户超时未付款，自动取消
</view>
<view class="small" v-else>
感谢您的预定，服务专员将会持续为您提供服务
</view>
</view>
<!-- #endif -->
<!-- #ifdef MP-DI -->
<view class="timecontent q-mt-sm" v-if="(orderData.OrderStatus==1||orderData.OrderStatus==4)">
<view v-if="orderData.OrderStatus==1&&remainingSeconds>0">
<view class="row">
<text>请您于{{dielineTime}}前支付：¥</text>
<text class="bold">{{(orderData.Money-orderData.DiscountsMoney).toFixed(2)}}</text>
</view>
<view class="small">
完成支付才能锁定包车</view>
</view>
<view class="small" v-else-if="orderData.OrderStatus==4">
取消原因：用户超时未付款，自动取消
</view>
<view class="small" v-else>
感谢您的预定，服务专员将会持续为您提供服务
</view>
</view>
<!-- #endif -->
</view>
<view class="orderIforRzBox row">
<view class="orderIforRzImg">
<img style="width: 14rpx;height: 68rpx;"
......@@ -365,6 +418,12 @@
showModal: false,
OrderNo: '',
CancelPolicy: '',
remainingSeconds: null,
isExpired: false,
countdownInterval: null,
currentTime: Date.now(),
endts:0,
dielineTime: '',
};
},
created() {
......@@ -390,6 +449,48 @@
if (this.id) this.getOrderDetail();
},
methods: {
changeSeconds(seconds) {
if(seconds<=0) {
// #ifdef MP-AG
this.orderData.OrderStatus = 3
// #endif
// #ifdef MP-DI
this.orderData.OrderStatus = 4
// #endif
this.isExpired = true
}else{
const now = Date.now();
const customStr = this.orderData.SelectStartTime
const [date, time] = customStr.split(' ')
const [year, month, day] = date.split('-')
const [hours, minutes, seconds] = time.split(':')
const parsedDate = new Date(year, month-1, day, hours, minutes, seconds)
this.orderTime = parsedDate.getTime()
const diff = this.orderTime + 30 * 60 * 1000 - now;
let remainingSeconds = Math.max(diff, 0); // 确保不出现负数
this.remainingSeconds = Math.floor(remainingSeconds/1000)
let endTime = new Date(this.orderData.SelectStartTime)
endTime.setMinutes(endTime.getMinutes() + 30)
this.endts = this.remainingSeconds
this.dielineTime = `${endTime.getHours()}时${endTime.getMinutes()}分`
}
},
getOrderTime(){
const now = Date.now();
const customStr = this.orderData.SelectStartTime
const [date, time] = customStr.split(' ')
const [year, month, day] = date.split('-')
const [hours, minutes, seconds] = time.split(':')
const parsedDate = new Date(year, month-1, day, hours, minutes, seconds)
this.orderTime = parsedDate.getTime()
const diff = this.orderTime + 30 * 60 * 1000 - now;
let remainingSeconds = Math.max(diff, 0); // 确保不出现负数
this.remainingSeconds = Math.floor(remainingSeconds/1000)
this.changeSeconds(this.remainingSeconds)
},
cancelModal(){
this.showModal = false
},
......@@ -633,9 +734,10 @@
this.initData(res.data.ProductId)
if(this.OrderNo=='')this.OrderNo = res.data.OrderNo
this.peopleNum = Number(this.orderData.ManNum) + Number(this.orderData.ChildNum) +Number(this.orderData.BabyNum);
// #ifdef MP-AG
this.formatStatus(
res.data.OrderStatus,
this.orderData.OrderStatus,
res.data.Income,
(res.data.Money-res.data.DiscountsMoney).toFixed(2),
);
......@@ -666,11 +768,22 @@
CreateTime: this.orderData.CreateTime,
}
this.OrderNo = res.data.OrderNo
// #ifdef MP-AG
if (this.customer.isGuideOrLeader==1&&this.orderData.OrderStatus==1&&this.orderData.SelectStartTime) {
this.getOrderTime()
};
// #endif
// #ifdef MP-DI
if(this.orderData.OrderStatus==1){
this.getOrderTime()
}
this.formatStatus(
res.data.OrderStatus,
this.orderData.OrderStatus,
null,
null
);
// #endif
let OrderDate = this.orderData.OrderDate.slice(0, 10);
if(OrderDate<=this.$utils.GetDateFewFaysLater(0).date){
this.showPayBtn = false
......@@ -1281,7 +1394,7 @@
}
.orderStatusBox {
padding: 40rpx 31rpx 13rpx 31rpx;
padding: 20rpx 31rpx 0 31rpx;
}
.orderIforRzBox {
......
pages/jiuzhai/jz_SureOrder.vue
View file @ 84552fd7
<style>
<style scoped>
@import url("@/asset/css/flex.css");
.jz_SureOrder {
position: relative;
}
......@@ -335,7 +336,9 @@
<template>
<view class="jz_Reserve" v-if="orderData&&orderData.model">
<view class="jz_ReserTop">
<view class="flex" style="margin-bottom: 30rpx">
<view class="orderStatusBox column" style="margin-bottom: 30rpx;justify-content: space-between">
<view class="row-sbas-n">
<view class="row items-center">
<u-icon customPrefix="iconfont" name="icondaizhifu-" size="52" color="#DFBE6E" v-if="orderStatus.code == 0"></u-icon>
<u-icon customPrefix="iconfont" name="iconquxiao" size="52" color="#f26c6c" v-if="orderStatus.code == -1"></u-icon>
<u-icon customPrefix="iconfont" name="iconshenhezhong" size="52" color="#86d9a5" v-if="orderStatus.code == -2"></u-icon>
......@@ -349,6 +352,56 @@
{{ orderStatus.text }}
</text>
</view>
<!-- #ifdef MP-AG-->
<u-count-down :showDays="false" :showHours="false" :timestamp="remainingSeconds"
@change="changeSeconds"
v-if="orderData.model.OrderState==2&&b2b_user.isGuideOrLeader==1&&remainingSeconds>0"
color="#000" separator-color="#000" :show-days="false" bg-color="transparent"></u-count-down>
<!-- #endif -->
<!-- #ifdef MP-DI -->
<u-count-down :showDays="false" :showHours="false" :timestamp="remainingSeconds"
@change="changeSeconds"
v-if="orderData.OrderStatus==1&&remainingSeconds>0"
color="#000" separator-color="#000" :show-days="false" bg-color="transparent"></u-count-down>
<!-- #endif -->
</view>
<!-- #ifdef MP-AG -->
<view class="timecontent q-mt-sm" v-if="b2b_user.isGuideOrLeader==1&&(orderData.model.OrderState==2||orderData.model.OrderState==1||orderData.model.OrderState==4)">
<view v-if="orderData.model.OrderState==2&&b2b_user.isGuideOrLeader==1&&remainingSeconds>0">
<view class="row">
<text>请您于{{dielineTime}}前支付：¥</text>
<text class="bold">{{(orderData.model.PreferPrice-orderData.model.DiscountMoney-orderData.model.RedEnvelopeMoney).toFixed(2)}}</text>
</view>
<view class="small">
完成支付才能锁定线路</view>
</view>
<view class="small" v-else-if="orderData.model.OrderState==4">
取消原因：用户超时未付款，自动取消
</view>
<view class="small" v-else>
感谢您的预定，服务专员将会持续为您提供服务
</view>
</view>
</view>
<!-- #endif -->
<!-- #ifdef MP-DI -->
<view v-if="orderData.model.OrderState==2&&remainingSeconds>0">
<view class="row">
<text>请您于{{dielineTime}}前支付：¥</text>
<text class="bold">{{(orderData.model.PreferPrice-orderData.model.DiscountMoney-orderData.model.RedEnvelopeMoney).toFixed(2)}}</text>
</view>
<view class="small">
完成支付才能锁定线路</view>
</view>
<view class="small" v-else-if="orderData.model.OrderState==4">
取消原因：用户超时未付款，自动取消
</view>
<view class="small" v-else>
感谢您的预定，服务专员将会持续为您提供服务
</view>
</view>
<!-- #endif -->
<view style="margin-bottom: 30rpx" v-if="
orderData.model.RejectRemark && orderData.model.RejectRemark != ''
">
......@@ -588,7 +641,7 @@
<!-- <text v-if="!submitCancel">取消</text>
<u-loading v-if="submitCancel" size="32" color="#111"></u-loading> -->
</button>
<button v-if="(orderData.model.OrderState==2&&b2b_user.isGuideOrLeader==1&&orderData.model.Income==0)" class="jz_OrderReNow"
<button v-if="orderData.model.OrderState==2&&b2b_user.isGuideOrLeader==1&&orderData.model.Income==0" class="jz_OrderReNow"
style="margin-left: 20rpx;"
@click="submitGetCodeByOrderNo" :disabled="submit" :loading="submit">
立即支付
......@@ -639,6 +692,12 @@
couponMessage:[],
showModal: false,
b2b_user: {},
remainingSeconds: null,
isExpired: false,
countdownInterval: null,
currentTime: Date.now(),
endts:0,
dielineTime: '',
};
},
created() {},
......@@ -661,6 +720,48 @@
}
},
methods: {
changeSeconds(seconds) {
if(seconds<=0) {
// #ifdef MP-AG
this.orderData.model.OrderState = 4
// #endif
// #ifdef MP-DI
this.orderData.OrderStatus = 4
// #endif
this.isExpired = true
}else{
const now = Date.now();
const customStr = this.orderData.SelectStartTime
const [date, time] = customStr.split(' ')
const [year, month, day] = date.split('-')
const [hours, minutes, seconds] = time.split(':')
const parsedDate = new Date(year, month-1, day, hours, minutes, seconds)
this.orderTime = parsedDate.getTime()
const diff = this.orderTime + 30 * 60 * 1000 - now;
let remainingSeconds = Math.max(diff, 0); // 确保不出现负数
this.remainingSeconds = Math.floor(remainingSeconds/1000)
let endTime = new Date(this.orderData.SelectStartTime)
endTime.setMinutes(endTime.getMinutes() + 30)
this.endts = this.remainingSeconds
this.dielineTime = `${endTime.getHours()}时${endTime.getMinutes()}分`
}
},
getOrderTime(){
const now = Date.now();
const customStr = this.orderData.SelectStartTime
const [date, time] = customStr.split(' ')
const [year, month, day] = date.split('-')
const [hours, minutes, seconds] = time.split(':')
const parsedDate = new Date(year, month-1, day, hours, minutes, seconds)
this.orderTime = parsedDate.getTime()
const diff = this.orderTime + 30 * 60 * 1000 - now;
let remainingSeconds = Math.max(diff, 0); // 确保不出现负数
this.remainingSeconds = Math.floor(remainingSeconds/1000)
this.changeSeconds(this.remainingSeconds)
},
cancelModal(){
this.showModal = false
},
......@@ -733,9 +834,10 @@
this.orderData = {
...res.data
}
this.getOrderTime()
this.initOrderInfo();
this.formatStatus(
res.data.OrderStatus,
this.orderData.OrderStatus,
null,
null
);
......@@ -748,14 +850,30 @@
const parameter={ErpOrderId:this.orderId,OrderTypeStr:'DMC'}
this.apipost("GetDetailsByErpOrderId_post",parameter,res=>{
if(res.resultCode==1){
this.orderData = {
...this.orderData,
...res.data
}
this.OrderNo = res.data.OrderNo
// #ifdef MP-DI
this.formatStatus(
res.data.OrderStatus,
this.orderData.OrderStatus,
null,
null
);
// #endif
// #ifdef MP-AG
if (this.b2b_user.isGuideOrLeader==1&&this.orderData.OrderStatus==1&&this.orderData.SelectStartTime) {
this.getOrderTime()
};
this.formatStatus(
this.orderData.model.OrderState,
this.orderData.IsChargeLossOrders,
this.orderData.IsApplyForCancel
);
// #endif
}else{
}
......
pages/visa/visa_SureOrder.vue
View file @ 84552fd7
<style>
<style scoped>
@import url("@/asset/css/flex.css");
.jz_SureOrder {
position: relative;
}
......@@ -331,11 +334,60 @@
/deep/.showModalInfo .u-drawer-bottom{
background-color: rgba(23,23,23,0) !important;
}
.timecontent{
font-size: 26rpx;
padding: 0 30rpx;
}
.f-order .bold{
font-weight: bold;
}
.f-order .small{
font-size: 22rpx;
}
.f-order .flight-status {
background: #E1C278;
border-radius: 8rpx;
font-size: 24rpx;
color: #111111;
font-weight: 400;
padding: 7rpx 14rpx;
}
.day-diff{
position: absolute;
top: -35rpx;
line-height: 1;
font-size: 22rpx;
color: #FF5858;
left: 4rpx;
}
.thin{
line-height: 1;
margin-top: 16rpx;
font-weight: 400;
font-size: 22rpx;
color: #9999A5;
max-width: 45px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.f-order .used-time{
margin-top: -16rpx;
}
.f-order .how-time{
height: 24rpx;
font-size: 20rpx;
color: #9999A5;
}
</style>
<template>
<view class="jz_Reserve" v-if="orderData">
<view class="jz_ReserTop">
<view class="flex" style="margin-bottom: 30rpx">
<view class="orderStatusBox column" style="margin-bottom: 30rpx;justify-content: space-between">
<view class="row-sbas-n">
<view class="row items-center">
<u-icon customPrefix="iconfont" name="icondaizhifu-" size="52" color="#DFBE6E" v-if="orderStatus.code == 0"></u-icon>
<u-icon customPrefix="iconfont" name="iconquxiao" size="52" color="#f26c6c" v-if="orderStatus.code == -1"></u-icon>
<u-icon customPrefix="iconfont" name="iconshenhezhong" size="52" color="#86d9a5" v-if="orderStatus.code == -2"></u-icon>
......@@ -349,6 +401,57 @@
{{ orderStatus.text }}
</text>
</view>
<!-- #ifdef MP-AG -->
<u-count-down :showDays="false" :showHours="false" :timestamp="remainingSeconds"
@change="changeSeconds"
v-if="orderData.OrderModel.VisaOrderStatus==3&&b2b_user.isGuideOrLeader==1&&remainingSeconds>0"
color="#000" separator-color="#000" :show-days="false" bg-color="transparent"></u-count-down>
<!-- #endif -->
<!-- #ifdef MP-DI -->
<u-count-down :showDays="false" :showHours="false" :timestamp="remainingSeconds"
@change="changeSeconds"
v-if="orderData.OrderModel.VisaOrderStatus==3&&remainingSeconds>0"
color="#000" separator-color="#000" :show-days="false" bg-color="transparent"></u-count-down>
<!-- #endif -->
</view>
<!-- #ifdef MP-AG -->
<view class="timecontent q-mt-sm" v-if="b2b_user.isGuideOrLeader==1&&orderData.OrderModel&&(orderData.OrderModel.VisaOrderStatus==2||orderData.OrderModel.VisaOrderStatus==3)">
<view v-if="orderData.OrderModel&&orderData.OrderModel.VisaOrderStatus==3&&b2b_user.isGuideOrLeader==1&&remainingSeconds>0">
<view class="row">
<text>请您于{{dielineTime}}前支付：¥</text>
<text class="bold">{{(orderData.OrderModel.TotalPrice-orderData.OrderModel.DiscountMoney).toFixed(2)}}</text>
</view>
<view class="small">
完成支付才能锁定签证</view>
</view>
<view class="small" v-else-if="orderData.OrderModel&&(orderData.OrderModel.VisaOrderStatus==2||(orderData.OrderModel.VisaOrderStatus&&orderData.OrderModel.VisaOrderStatus==4))">
取消原因：用户超时未付款，自动取消
</view>
<view class="small" v-else>
感谢您的预定，服务专员将会持续为您提供服务
</view>
</view>
<!-- #endif -->
<!-- #ifdef MP-DI -->
<view class="timecontent q-mt-sm" v-if="orderData.OrderModel&&(orderData.OrderModel.VisaOrderStatus==2||orderData.OrderModel.VisaOrderStatus==3)">
<view v-if="orderData.OrderModel&&orderData.OrderModel.VisaOrderStatus==3&&remainingSeconds>0">
<view class="row">
<text>请您于{{dielineTime}}前支付：¥</text>
<text class="bold">{{(orderData.OrderModel.TotalPrice-orderData.OrderModel.DiscountMoney).toFixed(2)}}</text>
</view>
<view class="small">
完成支付才能锁定签证</view>
</view>
<view class="small" v-else-if="orderData.OrderModel&&(orderData.OrderModel.VisaOrderStatus==2||(orderData.OrderModel.VisaOrderStatus&&orderData.OrderModel.VisaOrderStatus==4))">
取消原因：用户超时未付款，自动取消
</view>
<view class="small" v-else>
感谢您的预定，服务专员将会持续为您提供服务
</view>
</view>
<!-- #endif -->
</view>
<view style="margin-bottom: 30rpx" v-if="
orderData.OrderModel.RejectRemark && orderData.OrderModel.RejectRemark != ''
">
......@@ -539,8 +642,9 @@
立即支付
</button>
<!-- #endif -->
<!-- #ifdef MP-AG -->
<button v-if="((b2b_user.isGuideOrLeader==1&&orderData.OrderModel.Income==0&&orderData.OrderModel.VisaOrderStatus==3)||b2b_user.isGuideOrLeader!=1)" class="jz_OrderReNow" @click="goCancel"
<button v-if="((b2b_user.isGuideOrLeader==1&&orderData.OrderModel.Income==0&&orderData.OrderModel.VisaOrderStatus==3)||(b2b_user.isGuideOrLeader==0&&orderData.OrderModel.VisaOrderStatus==3))" class="jz_OrderReNow" @click="goCancel"
style="background: #fff; color: #111; border: 1px solid #111"
:disabled="submitCancel"
:loading="submitCancel">
......@@ -563,9 +667,6 @@
</view>
</template>
<script>
</script>
<script>
import cancelPrompt from '@/components/cancelPrompt/cancelPrompt.vue'
import cancelProgress from '@/components/cancelPrompt/cancelProgress.vue'
......@@ -594,6 +695,12 @@
OrderNo: '',
showModal: false,
b2b_user: {},
remainingSeconds: null,
isExpired: false,
countdownInterval: null,
currentTime: Date.now(),
endts:0,
dielineTime: '',
};
},
created() {},
......@@ -610,6 +717,48 @@
}
},
methods: {
changeSeconds(seconds) {
if(seconds<=0) {
// #ifdef MP-AG
this.orderData.OrderModel.VisaOrderStatus = 2
// #endif
// #ifdef MP-DI
this.orderData.OrderStatus = 4
// #endif
this.isExpired = true
}else{
const now = Date.now();
const customStr = this.orderData.SelectStartTime
const [date, time] = customStr.split(' ')
const [year, month, day] = date.split('-')
const [hours, minutes, seconds] = time.split(':')
const parsedDate = new Date(year, month-1, day, hours, minutes, seconds)
this.orderTime = parsedDate.getTime()
const diff = this.orderTime + 30 * 60 * 1000 - now;
let remainingSeconds = Math.max(diff, 0); // 确保不出现负数
this.remainingSeconds = Math.floor(remainingSeconds/1000)
let endTime = new Date(this.orderData.CreateTime)
endTime.setMinutes(endTime.getMinutes() + 30)
this.endts = this.remainingSeconds
this.dielineTime = `${endTime.getHours()}时${endTime.getMinutes()}分`
}
},
getOrderTime(){
const now = Date.now();
const customStr = this.orderData.SelectStartTime
const [date, time] = customStr.split(' ')
const [year, month, day] = date.split('-')
const [hours, minutes, seconds] = time.split(':')
const parsedDate = new Date(year, month-1, day, hours, minutes, seconds)
this.orderTime = parsedDate.getTime()
const diff = this.orderTime + 30 * 60 * 1000 - now;
let remainingSeconds = Math.max(diff, 0); // 确保不出现负数
this.remainingSeconds = Math.floor(remainingSeconds/1000)
this.changeSeconds(this.remainingSeconds)
},
cancelModal(){
this.showModal = false
},
......@@ -680,8 +829,13 @@
...res.data
}
this.initOrderInfo(res.data.ErpOrderId);
// #ifdef MP-DI
if (this.orderData.OrderStatus==1&&this.orderData.SelectStartTime) {
this.getOrderTime()
};
// #endif
this.formatStatus(
res.data.OrderStatus,
this.orderData.OrderStatus,
null,
null,
null
......@@ -815,8 +969,11 @@
}
}
// #ifdef MP-AG
if (this.b2b_user.isGuideOrLeader==1&&this.orderData.OrderModel.VisaOrderStatus==3&&this.orderData.SelectStartTime) {
this.getOrderTime()
};
this.formatStatus(
res.data.OrderModel.VisaOrderStatus,
this.orderData.OrderModel.VisaOrderStatus,
res.data.OrderModel.Income,
res.data.OrderModel.TotalPrice,
res.data.OrderModel.PlatformTax
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment