322 lines
11 KiB
Vue
322 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<view class="waper">
|
|||
|
|
<u-navbar :autoBack="true" :placeholder="true" bgColor="#FFFFFF">
|
|||
|
|
<view slot='center' style="font-size: 36rpx; font-weight: bold;">
|
|||
|
|
提交订单
|
|||
|
|
</view>
|
|||
|
|
</u-navbar>
|
|||
|
|
<view class="content">
|
|||
|
|
<view class="order">
|
|||
|
|
<view class="residue">
|
|||
|
|
<view class="label">支付剩余时间</view>
|
|||
|
|
<view class="time">{{secondsToTime(timeNum)}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="price">
|
|||
|
|
<text class="unit">￥</text>{{detail.totalAmount}}
|
|||
|
|
</view>
|
|||
|
|
<view class="specs">
|
|||
|
|
<view class="tags_box">
|
|||
|
|
<view class="tag" v-if="detail.roomClassifyName">{{detail.roomClassifyName}}</view>
|
|||
|
|
<view class="tag" v-if="detail.roomQuantity">{{detail.roomQuantity}}间</view>
|
|||
|
|
<view class="tag" v-if="detail.inDateTime">{{detail.inDateTime}}入住</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="detailed" @click="showPopupDetailed = true">
|
|||
|
|
<text>订单明细</text>
|
|||
|
|
<u-icon name="arrow-right" color="#03AE80" size="28rpx"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="pay">
|
|||
|
|
<view class="item" v-for="(item, index) in payList" :key="index" v-if="getiPass(item)" @click="changePay(item.dictValue)">
|
|||
|
|
<image :src="'../../static/image/mine/pay' + (item.paymentScene == 'WECHAT_MINI_PROGRAM' ? '2' : item.dictValue) + '.png'" mode=""></image>
|
|||
|
|
<view class="title">{{item.paymentScene == 'WECHAT_MINI_PROGRAM' ? '微信' : item.dictLabel}}
|
|||
|
|
<text class="balance" v-if="item.dictValue == 7">（可用¥{{cardInfo.balance}}）</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="noChange" v-if="payType != item.dictValue"></view>
|
|||
|
|
<view class="isChange" v-if="payType == item.dictValue">
|
|||
|
|
<u-icon name="checkmark" color="#fff" size="28rpx"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="footer" :style="'padding-bottom: ' + windowBottom + 'px;'">
|
|||
|
|
<view class="btn" @click="confirmPay">确认支付</view>
|
|||
|
|
</view>
|
|||
|
|
<u-popup :show="showPopupDetailed" :round="10" mode="bottom">
|
|||
|
|
<view class="detailed_con">
|
|||
|
|
<view class="head">
|
|||
|
|
<view class="title">明细</view>
|
|||
|
|
<view class="close" @click="showPopupDetailed = false">
|
|||
|
|
<u-icon name="close" color="#000000" size="36rpx" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="add">
|
|||
|
|
<view class="label">订单合计</view>
|
|||
|
|
<view class="all">共<text>¥{{detail.totalAmount}}</text></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="row">
|
|||
|
|
<view class="col">
|
|||
|
|
<view class="key">房费 </view>
|
|||
|
|
<view class="value">￥{{detail.totalAmount}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="col" v-for="(item, index) in detail.roomChargeDetails" :key="index">
|
|||
|
|
<view class="key">{{item.stayDate}}</view>
|
|||
|
|
<view class="value">{{item.roomQuantity}}x ¥{{item.roomPrice}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="col" v-if="detail.stayType !== 'HOURLY'">
|
|||
|
|
<view class="key">{{detail.outDateTime}}</view>
|
|||
|
|
<view class="value"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="footer" :style="'padding-bottom: ' + windowBottom + 'px;'">
|
|||
|
|
<view class="btn" @click="confirmPay">确认支付</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</u-popup>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data () {
|
|||
|
|
return {
|
|||
|
|
windowBottom: 0,
|
|||
|
|
id: '',
|
|||
|
|
hotelId: '',
|
|||
|
|
detail: {},
|
|||
|
|
timeNum: 0,
|
|||
|
|
timer: null,
|
|||
|
|
payList: [],
|
|||
|
|
payType: null,
|
|||
|
|
cardInfo: null,
|
|||
|
|
showPopupDetailed: false,
|
|||
|
|
configData: null,
|
|||
|
|
source: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad (options) {
|
|||
|
|
this.id = options.id;
|
|||
|
|
this.hotelId = options.hotelId;
|
|||
|
|
this.source = options.source;
|
|||
|
|
this.getDetail();
|
|||
|
|
this.windowBottom = this.$safeAreaBottom || uni.upx2px(13);
|
|||
|
|
},
|
|||
|
|
onUnload () {
|
|||
|
|
clearInterval(this.timer);
|
|||
|
|
this.timer = null;
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
async getDetail() {
|
|||
|
|
let res=await this.$http.hotelOrderDetail(this.id);
|
|||
|
|
res.data.inDateTime = this.$moment(res.data.inDateTime).format("MM月DD日");
|
|||
|
|
res.data.outDateTime = this.$moment(res.data.outDateTime).format("YYYY-MM-DD");
|
|||
|
|
this.detail=res.data;
|
|||
|
|
|
|||
|
|
this.configData = uni.getStorageSync('configData');
|
|||
|
|
let creaetdTime = parseInt(new Date(res.data.createTime).getTime() / 1000);
|
|||
|
|
let nowtime = parseInt(new Date().getTime() / 1000);
|
|||
|
|
if ((creaetdTime + this.configData.expirationTime * 60) >= nowtime) {
|
|||
|
|
this.timeNum = (creaetdTime + this.configData.expirationTime * 60) - nowtime;
|
|||
|
|
this.setIntervalFn()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.payList = this.configData.payConfig;
|
|||
|
|
if (this.payList.length) {
|
|||
|
|
this.payType = this.payList[0].dictValue;
|
|||
|
|
}
|
|||
|
|
let cardInfo = await this.$http.getPrepaidCard();
|
|||
|
|
this.cardInfo = cardInfo.data;
|
|||
|
|
},
|
|||
|
|
secondsToTime(seconds) {
|
|||
|
|
const minutes = Math.floor((seconds % 3600) / 60);
|
|||
|
|
const remainingSeconds = seconds % 60;
|
|||
|
|
return (minutes >= 10 ? minutes : '0' + minutes) + ":" + (remainingSeconds >= 10 ? remainingSeconds : '0' + remainingSeconds);
|
|||
|
|
},
|
|||
|
|
setIntervalFn () {
|
|||
|
|
clearInterval(this.timer);
|
|||
|
|
this.timer = setInterval(() => {
|
|||
|
|
if (this.timeNum <= 0) {
|
|||
|
|
clearInterval(this.timer)
|
|||
|
|
uni.redirectTo({ url: `/pages/hotelOrder/detail?id=` + this.detail.id });
|
|||
|
|
}
|
|||
|
|
this.timeNum --;
|
|||
|
|
}, 1000)
|
|||
|
|
},
|
|||
|
|
changePay(e) {
|
|||
|
|
this.payType = e;
|
|||
|
|
},
|
|||
|
|
getiPass(e) {
|
|||
|
|
if (e.dictValue != 7) {
|
|||
|
|
return true;
|
|||
|
|
} else {
|
|||
|
|
if (this.cardInfo) {
|
|||
|
|
return true;
|
|||
|
|
} else {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async confirmPay() {
|
|||
|
|
uni.showLoading({ mask: true });
|
|||
|
|
let parmas = {};
|
|||
|
|
parmas.id = this.detail.id;
|
|||
|
|
parmas.paymentMethod = this.payType;
|
|||
|
|
if (this.detail.totalAmount <= 0) {
|
|||
|
|
parmas.paymentMethod = '4';
|
|||
|
|
}
|
|||
|
|
parmas.paymentScene = null;
|
|||
|
|
let f = this.payList.find(m => m.dictValue == parmas.paymentMethod);
|
|||
|
|
if (f) parmas.paymentScene = f.paymentScene;
|
|||
|
|
parmas.authCode = this.cardInfo ? this.cardInfo.accountNo : '';
|
|||
|
|
let info = await this.$http.hotelPayment(parmas);
|
|||
|
|
|
|||
|
|
if (parmas.paymentMethod == '7') {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
if (info.data.errorMessage) {
|
|||
|
|
uni.showToast({ mask: true, title: info.data.errorMessage, icon: 'none' })
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.goPage();
|
|||
|
|
}, 1500)
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({ mask: true, title: '支付成功', icon: 'success' })
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.redirectTo({ url: `/pages/hotel/paySuccess?id=${this.id}&hotelId=${this.hotelId}&source=${this.source}` })
|
|||
|
|
}, 1500)
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (info.data.payUrl) {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
let str = info.data.payUrl;
|
|||
|
|
let newStr = str.replace("?", "&");
|
|||
|
|
uni.showToast({ mask: true, title: '小程序不支持此支付方式', icon: 'none' })
|
|||
|
|
} else if (info.data.tradeSession) {
|
|||
|
|
const prepayId = JSON.parse(info.data.tradeSession);
|
|||
|
|
uni.requestPayment({
|
|||
|
|
provider: 'wxpay',
|
|||
|
|
timeStamp: prepayId.timeStamp,
|
|||
|
|
nonceStr: prepayId.nonceStr,
|
|||
|
|
package: prepayId.packageValue,
|
|||
|
|
signType: prepayId.signType,
|
|||
|
|
paySign: prepayId.paySign,
|
|||
|
|
success: (res) => {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
uni.showToast({ mask: true, title: '支付成功', icon: 'success' })
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.redirectTo({ url: `/pages/hotel/paySuccess?id=${this.id}&hotelId=${this.hotelId}&source=${this.source}` })
|
|||
|
|
}, 1500)
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
uni.showToast({ mask: true, title: '支付取消', icon: 'none' })
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.goPage();
|
|||
|
|
}, 1500)
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({ mask: true, title: '支付失败', icon: 'none' });
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
goPage() {
|
|||
|
|
if (this.source == 'order') {
|
|||
|
|
uni.navigateBack();
|
|||
|
|
} else {
|
|||
|
|
uni.redirectTo({ url: `/pages/hotelOrder/detail?id=${this.id}` });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.waper { min-height: 100vh; background-color: #F6F6F6; }
|
|||
|
|
.content{
|
|||
|
|
width: 100%; box-sizing: border-box; padding: 24rpx;
|
|||
|
|
.order {
|
|||
|
|
background: #FFFFFF; border-radius: 10rpx; padding: 32rpx 24rpx; box-sizing: border-box;
|
|||
|
|
.residue {
|
|||
|
|
display: flex; align-items: center;
|
|||
|
|
.label { font-size: 28rpx; color: rgba(0,0,0,0.45); margin-right: 10rpx; }
|
|||
|
|
.time { font-weight: 500; font-size: 32rpx; color: rgba(0,0,0,0.85); }
|
|||
|
|
}
|
|||
|
|
.price {
|
|||
|
|
margin: 12rpx 0 0 3rpx; font-weight: bold; font-size: 56rpx; color: #E54042;
|
|||
|
|
.unit { font-weight: 400; font-size: 28rpx; }
|
|||
|
|
}
|
|||
|
|
.specs {
|
|||
|
|
display: flex; align-items: center; justify-content: space-between; margin-top: 12rpx;
|
|||
|
|
.tags_box {
|
|||
|
|
display: flex; align-items: center; flex-wrap: wrap; flex: 1;
|
|||
|
|
.tag {
|
|||
|
|
padding: 0 18rpx; position: relative; font-size: 28rpx; color: rgba(0,0,0,0.45);
|
|||
|
|
&::after{ content: ""; width: 1rpx; height: 23rpx; background: #ECEAEA; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
|
|||
|
|
&:first-child { padding-left: 0; }
|
|||
|
|
&:last-child {
|
|||
|
|
padding-right: 0;
|
|||
|
|
&::after {display: none;}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.detailed {
|
|||
|
|
display: flex; align-items: center; width: 140rpx;
|
|||
|
|
text { font-size: 24rpx; color: #03AE80; margin-right: 4rpx; }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.pay {
|
|||
|
|
background: #FFFFFF; border-radius: 10rpx; margin-top: 32rpx; padding: 0 24rpx; box-sizing: border-box;
|
|||
|
|
.item {
|
|||
|
|
height: 112rpx; border-bottom: 1rpx solid #E8E8E8; display: flex; align-items: center;
|
|||
|
|
&:last-child { border-bottom: none; }
|
|||
|
|
image { width: 48rpx; height: 48rpx; margin-right: 16rpx; }
|
|||
|
|
.title {
|
|||
|
|
flex: 1; font-size: 30rpx; color: rgba(0,0,0,0.85);
|
|||
|
|
.balance { font-size: 28rpx; color: rgba(0,0,0,0.45); }
|
|||
|
|
}
|
|||
|
|
.noChange { width: 42rpx; height: 42rpx; border-radius: 50%; border: 1rpx solid rgba(0,0,0,0.2); }
|
|||
|
|
.isChange {
|
|||
|
|
width: 42rpx; height: 42rpx; border-radius: 50%; background-color: #03AE80; position: relative;
|
|||
|
|
::v-deep .u-icon {
|
|||
|
|
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.footer {
|
|||
|
|
width: 100%; background: #FFFFFF; padding-top: 13rpx; box-sizing: border-box; position: fixed; left: 0; bottom: 0; display: flex; align-items: center; justify-content: center;
|
|||
|
|
.btn { width: 654rpx; height: 90rpx; background: #03AE80; border-radius: 49rpx; line-height: 90rpx; text-align: center; font-weight: 500; font-size: 32rpx; color: #FFFFFF; }
|
|||
|
|
}
|
|||
|
|
.detailed_con {
|
|||
|
|
padding: 32rpx 0 150rpx; position: relative;
|
|||
|
|
.head {
|
|||
|
|
position: relative; text-align: center; margin: 0 32rpx 30rpx;
|
|||
|
|
.title { font-weight: 500; font-size: 34rpx; color: rgba(0,0,0,0.85); }
|
|||
|
|
.close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
|
|||
|
|
}
|
|||
|
|
.add {
|
|||
|
|
padding: 54rpx 0 24rpx; margin: 0 32rpx; display: flex; align-items: center; justify-content: space-between; border-bottom: 1rpx solid #ECEAEA;
|
|||
|
|
.label { font-size: 32rpx; color: rgba(0,0,0,0.85); }
|
|||
|
|
.all {
|
|||
|
|
font-size: 28rpx; color: rgba(0,0,0,0.85);
|
|||
|
|
text { font-weight: bold; font-size: 28rpx; color: #E54042; }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.row {
|
|||
|
|
padding: 0 32rpx;
|
|||
|
|
.col {
|
|||
|
|
display: flex; align-items: center; justify-content: space-between; margin-bottom: 8rpx;
|
|||
|
|
&:first-child {
|
|||
|
|
margin: 24rpx 0 13rpx;
|
|||
|
|
.key, .value { font-weight: 500; font-size: 28rpx; color: rgba(0,0,0,0.85); }
|
|||
|
|
}
|
|||
|
|
.key, .value { font-size: 28rpx; color: rgba(0,0,0,0.65); }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.footer {
|
|||
|
|
width: 100%; background: #FFFFFF; padding-top: 13rpx; box-sizing: border-box; position: fixed; left: 0; bottom: 0; display: flex; align-items: center; justify-content: center;
|
|||
|
|
.btn { width: 654rpx; height: 90rpx; background: #03AE80; border-radius: 49rpx; line-height: 90rpx; text-align: center; font-weight: 500; font-size: 32rpx; color: #FFFFFF; }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|