495 lines
13 KiB
Vue
495 lines
13 KiB
Vue
<template>
|
||
<view class="page" v-if="payPriceShow">
|
||
<view class="pay-price">
|
||
<view class="title">实付金额</view>
|
||
<view class="price">
|
||
<text class="unit">￥</text>
|
||
<numberScroll :num='payPriceShow' color="#F12A65" width='30' height='50' fontSize='50'></numberScroll>
|
||
</view>
|
||
<view class="count-down">
|
||
支付剩余时间
|
||
<countDown :is-day="false" :is-show-hour='false' :tip-text="''" :day-text="''" :hour-text="''"
|
||
:minute-text="' : '" :second-text="' '" :datatime="invalidTime"></countDown>
|
||
</view>
|
||
</view>
|
||
<view class="payment">
|
||
<view class="title">
|
||
请选择支付方式
|
||
</view>
|
||
<view class="item acea-row row-between-wrapper" v-for="(item,index) in cartArr" :key="index"
|
||
v-show='item.payStatus' @click="payType(item.value, index)">
|
||
<view class="left acea-row row-between-wrapper">
|
||
<view class="iconfont" :class="item.icon"></view>
|
||
<view class="text">
|
||
<view class="name">{{item.name}}</view>
|
||
<view class="info" v-if="item.value == 'yue'">
|
||
{{item.title}} <span class="money">￥{{ item.number }}</span>
|
||
</view>
|
||
<!-- <view class="info" v-else>{{item.title}}</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="iconfont" :class="active==index?'icon-xuanzhong11 font-num':'icon-weixuan'"></view>
|
||
</view>
|
||
</view>
|
||
<view class="btn">
|
||
<view class="button acea-row row-center-wrapper pay-button" @click='goPay'>确认支付</view>
|
||
<view class="wait-pay" @click="cancelPayModalShow = true">暂不支付</view>
|
||
</view>
|
||
<view v-show="false" v-html="formContent"></view>
|
||
<u-modal :show="cancelPayModalShow" width="519rpx">
|
||
<view class="modal-wrap">
|
||
<view class="count-down">
|
||
支付剩余时间
|
||
<countDown :is-day="false" :is-show-hour='false' :tip-text="''" :day-text="''" :hour-text="''"
|
||
:minute-text="' : '" :second-text="' '" :datatime="invalidTime"></countDown>
|
||
</view>
|
||
<view class="model-content">确认要放弃付款吗？</view>
|
||
</view>
|
||
<view slot="confirmButton">
|
||
<view class="modal-btn-wrap">
|
||
<u-button class="give-up-btn" @click="onGiveUpPay">放弃</u-button>
|
||
<u-button class="continue-btn">继续支付</u-button>
|
||
</view>
|
||
</view>
|
||
</u-modal>
|
||
<!-- 支付宝支付链接复制组件 -->
|
||
<alipay-link-copy :show.sync="alipayShow" :alipayLink="alipayLink" @confirm="onConfirm" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import countDown from '@/components/countDown';
|
||
import numberScroll from '@/components/numberScroll.vue'
|
||
import AlipayLinkCopy from '@/components/aliPayLinkCopy'
|
||
import {
|
||
getOrderDetail,
|
||
orderPay,
|
||
wechatOrderPay
|
||
} from '@/api/order.js';
|
||
import uniPay from '@/libs/pay.js'
|
||
export default {
|
||
components: {
|
||
countDown,
|
||
numberScroll,
|
||
AlipayLinkCopy
|
||
},
|
||
data() {
|
||
return {
|
||
cancelPayModalShow: false,
|
||
backPayModalShow: true,
|
||
alipayShow: false,
|
||
alipayLink: '',
|
||
checked: false,
|
||
isClickGiveUpBtn: true,
|
||
//支付方式
|
||
cartArr: [{
|
||
"name": '微信支付',
|
||
"icon": "icon-weixin2",
|
||
value: 'WXPAY',
|
||
title: '使用微信快捷支付',
|
||
payStatus: 1,
|
||
},
|
||
{
|
||
"name": '支付宝支付',
|
||
"icon": "icon-zhifubao",
|
||
value: 'ALIPAY',
|
||
title: '使用支付宝支付',
|
||
payStatus: 1,
|
||
}
|
||
],
|
||
paytype: 'WXPAY',
|
||
orderId: 0,
|
||
active: 0,
|
||
payPrice: 10.00,
|
||
payPriceShow: 10.00,
|
||
invalidTime: 1684836534,
|
||
jumpData: {
|
||
orderId: '',
|
||
msg: ''
|
||
},
|
||
formContent: ''
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if (options.order_id) this.orderId = options.order_id
|
||
this.getCashierOrder()
|
||
},
|
||
onShow() {
|
||
let options = wx.getEnterOptionsSync();
|
||
window.history.pushState(null, null, document.url)
|
||
window.addEventListener('popstate', this.backShowPayModal)
|
||
/*
|
||
if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3' && this.initIn) {
|
||
// 代表从收银台小程序返回
|
||
let extraData = options.referrerInfo.extraData;
|
||
this.initIn = false
|
||
if (!extraData) {
|
||
// "当前通过物理按键返回，未接收到返参，建议自行查询交易结果";
|
||
this.$util.Tips({
|
||
title: `取消支付`
|
||
}, {
|
||
tab: 5,
|
||
url: `/pages/goods/order_pay_status/index?order_id=${this.orderId}&msg=取消支付&type=3&totalPrice=${this.payPriceShow}&status=2`
|
||
});
|
||
} else {
|
||
if (extraData.code == 'success') {
|
||
this.$util.Tips({
|
||
title: `支付成功`,
|
||
icon: 'success'
|
||
}, {
|
||
tab: 5,
|
||
url: `/pages/goods/order_pay_status/index?order_id=${this.orderId}&msg=${this.jumpData.msg}&type=3&totalPrice=${this.payPriceShow}`
|
||
});
|
||
} else if (extraData.code == 'cancel') {
|
||
// "支付已取消";
|
||
this.$util.Tips({
|
||
title: `取消支付`
|
||
}, {
|
||
tab: 5,
|
||
url: `/pages/goods/order_pay_status/index?order_id=${this.orderId}&msg=取消支付&type=3&totalPrice=${this.payPriceShow}&status=2`
|
||
});
|
||
} else {
|
||
// "支付失败：" + extraData.errmsg;
|
||
uni.reLaunch({
|
||
url: `/pages/goods/order_pay_status/index?order_id=${this.orderId}&msg=支付失败&totalPrice=${this.payPriceShow}`
|
||
})
|
||
}
|
||
}
|
||
}*/
|
||
},
|
||
onHide() {
|
||
window.removeEventListener('popstate', this.backShowPayModal)
|
||
},
|
||
onUnload() {
|
||
window.removeEventListener('popstate', this.backShowPayModal)
|
||
},
|
||
methods: {
|
||
backShowPayModal() {
|
||
this.isClickGiveUpBtn = false
|
||
this.cancelPayModalShow = this.backPayModalShow
|
||
},
|
||
onGiveUpPay() {
|
||
if (this.isClickGiveUpBtn) {
|
||
window.history.back()
|
||
}
|
||
this.cancelPayModalShow = false
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
},
|
||
getCashierOrder() {
|
||
uni.showLoading({
|
||
title: '加载中'
|
||
});
|
||
getOrderDetail(this.orderId).then(res => {
|
||
const orderInfo = res.data
|
||
this.invalidTime = new Date(res.data.endTime).getTime()
|
||
this.payPrice = parseFloat(orderInfo.proTotalPrice).toFixed(2)
|
||
this.payPriceShow = parseFloat(orderInfo.proTotalPrice).toFixed(2)
|
||
}).catch(err => {
|
||
return this.$util.Tips({
|
||
title: err
|
||
})
|
||
}).finally(uni.hideLoading)
|
||
},
|
||
payType(paytype, index) {
|
||
this.active = index;
|
||
this.paytype = paytype;
|
||
},
|
||
onConfirm() {
|
||
let that = this
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '您是否已支付？',
|
||
cancelText: '未支付',
|
||
confirmText: '已支付',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
// 如果是支付成功跳转到订单列表，触发popstate事件时，不需要弹出支付确认框
|
||
that.backPayModalShow = false
|
||
window.history.back()
|
||
setTimeout(()=>{
|
||
uni.redirectTo({
|
||
url: '/pages/users/order_list/index'
|
||
})
|
||
}, 200)
|
||
} else if (res.cancel) {
|
||
|
||
}
|
||
}
|
||
});
|
||
},
|
||
goPay() {
|
||
let that = this;
|
||
if (!that.orderId) return that.$util.Tips({
|
||
title: '请选择要支付的订单'
|
||
});
|
||
uni.showLoading({
|
||
title: '支付中'
|
||
})
|
||
uniPay({
|
||
payInfo: {
|
||
orderNo: that.orderId
|
||
},
|
||
payType: that.paytype,
|
||
createOrderFun: wechatOrderPay,
|
||
payResultHandle: (res) => {
|
||
return {
|
||
jsapiResult: res.jsapiConfig,
|
||
body: res.body
|
||
}
|
||
},
|
||
wxPaySuccess: () => {
|
||
// window.location.reload()
|
||
uni.redirectTo({
|
||
url: '/pages/users/order_list/index'
|
||
})
|
||
},
|
||
aliPaySuccess: (link) => {
|
||
that.alipayLink = link
|
||
setTimeout(() => {
|
||
document.querySelector(".clipboard").click();
|
||
that.alipayShow = true
|
||
}, 500)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
.count-down .time {
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.modal-btn-wrap {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.give-up-btn,
|
||
.continue-btn {
|
||
flex: 1;
|
||
height: 71rpx;
|
||
line-height: 71rpx;
|
||
background: #F3F3F3;
|
||
border: 1px solid #BFBFBF;
|
||
border-radius: 35rpx;
|
||
text-align: center
|
||
}
|
||
|
||
.continue-btn {
|
||
margin-left: 47rpx;
|
||
border: none;
|
||
color: #fff;
|
||
background: linear-gradient(0deg, #E83769 0%, #FE7E9D 100%);
|
||
}
|
||
}
|
||
|
||
.modal-wrap {
|
||
width: 100%;
|
||
text-align: center;
|
||
|
||
.count-down {
|
||
display: flex;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
color: #F4356B;
|
||
margin-bottom: 42rpx;
|
||
margin-top: 57rpx;
|
||
}
|
||
|
||
.model-content {
|
||
font-size: 30rpx;
|
||
color: #000;
|
||
}
|
||
}
|
||
|
||
.pay-price {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 88rpx 0 56rpx 0;
|
||
|
||
.title {
|
||
font-size: 28rpx;
|
||
color: #000;
|
||
margin-bottom: 34rpx;
|
||
}
|
||
|
||
.price {
|
||
color: #F12A65;
|
||
margin-bottom: 29rpx;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
|
||
.unit {
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
line-height: 41rpx;
|
||
}
|
||
|
||
.num {
|
||
font-size: 50rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.count-down {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
color: #7A7A7A;
|
||
|
||
.time {
|
||
margin-top: 0 !important;
|
||
}
|
||
|
||
/deep/.red {
|
||
margin: 0 !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.payment {
|
||
width: 690rpx;
|
||
border-radius: 14rpx 14rpx;
|
||
background-color: #fff;
|
||
z-index: 999;
|
||
margin: 0 30rpx;
|
||
|
||
.title {
|
||
color: #000;
|
||
font-size: 32rpx;
|
||
font-weight: 400;
|
||
padding: 30rpx 0 25rpx 30rpx;
|
||
}
|
||
|
||
.payMoney {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
text-align: center;
|
||
margin-top: 50rpx;
|
||
|
||
.font-color {
|
||
margin-left: 10rpx;
|
||
|
||
.money {
|
||
font-size: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.payment.on {
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
|
||
.icon-xuanzhong11 {
|
||
color: #E93323 !important;
|
||
}
|
||
|
||
.payment .item {
|
||
height: 80rpx;
|
||
margin-left: 30rpx;
|
||
padding-right: 30rpx;
|
||
}
|
||
|
||
.payment .item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.payment .item .left {
|
||
flex: 1;
|
||
}
|
||
|
||
.payment .item .left .text {
|
||
flex: 1;
|
||
}
|
||
|
||
.payment .item .left .text .name {
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.payment .item .left .text .info {
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.payment .item .left .text .info .money {
|
||
color: #ff9900;
|
||
}
|
||
|
||
.payment .item .left .iconfont {
|
||
font-size: 50rpx;
|
||
color: #09bb07;
|
||
margin-right: 28rpx;
|
||
}
|
||
|
||
.payment .item .left .iconfont.icon-zhifubao {
|
||
color: #00aaea;
|
||
}
|
||
|
||
.payment .item .left .iconfont.icon-yuezhifu {
|
||
color: #ff9900;
|
||
}
|
||
|
||
.payment .item .left .iconfont.icon-yuezhifu1 {
|
||
color: #eb6623;
|
||
}
|
||
|
||
.payment .item .left .iconfont.icon-tonglianzhifu1 {
|
||
color: #305fd8;
|
||
}
|
||
|
||
.payment .item .iconfont {
|
||
font-size: 40rpx;
|
||
color: #ccc;
|
||
}
|
||
|
||
.icon-haoyoudaizhifu {
|
||
color: #F34C3E !important;
|
||
}
|
||
|
||
.btn {
|
||
position: fixed;
|
||
left: 50rpx;
|
||
right: 50rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
bottom: 30rpx;
|
||
bottom: calc(30rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
|
||
bottom: calc(30rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
|
||
|
||
.pay-button {
|
||
width: 100%;
|
||
height: 87rpx;
|
||
background: linear-gradient(0deg, #E63163 0%, #FF819F 100%);
|
||
border-radius: 44px;
|
||
}
|
||
}
|
||
|
||
.wait-pay {
|
||
color: #aaa;
|
||
font-size: 24rpx;
|
||
padding-top: 20rpx;
|
||
}
|
||
|
||
.button {
|
||
width: 690rpx;
|
||
height: 90rpx;
|
||
border-radius: 45rpx;
|
||
color: #FFFFFF;
|
||
background-color: #E93323;
|
||
|
||
}
|
||
|
||
}
|
||
</style>
|