You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
497 lines
11 KiB
497 lines
11 KiB
<template>
|
|
<view class="m-content">
|
|
<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text=""
|
|
title="确认支付" @clickLeft="cancelOrder" />
|
|
|
|
<view class="m-order">
|
|
<view class="m-price">
|
|
<view class="m-num">
|
|
¥
|
|
<span>{{ orderPrice/100 }}</span>
|
|
</view>
|
|
<view class="m-tips">订单金额</view>
|
|
</view>
|
|
<view class="m-pay-way">
|
|
<view class="m-title">支付方式</view>
|
|
<view class="m-way">
|
|
<view class="m-way-item" v-for="(item, index) in way" :class="choose == item.id ? 'active' : ''"
|
|
@click="choose = item.id">
|
|
<image :src="item.imgPath" mode=""></image>
|
|
{{ item.title }}
|
|
<uni-icons class="m-cion" :type="choose == item.id ? 'checkbox-filled' : 'circle'"
|
|
size="26"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="m-block" v-if="choose == 'cash'">
|
|
<view class="m-title">实收金额</view>
|
|
<view class="m-input-box">
|
|
<uni-easyinput :inputBorder="false" :clearable="false" class="uni-mt-5 m-input" :class="errClass"
|
|
type="digit" trim="all" v-model="cashValue" placeholder="请输入收款金额">
|
|
<template #left>
|
|
<view>¥</view>
|
|
</template>
|
|
<template #right>
|
|
<view>元</view>
|
|
</template>
|
|
</uni-easyinput>
|
|
</view>
|
|
<view class="m-zl">
|
|
<view class="m-label">找零金额：</view>
|
|
<view>
|
|
<span m-red>{{ (Number(cashValue*100) - Number(orderPrice))/100 }}</span>
|
|
元
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="m-botom">
|
|
<button class="m-btn m-btn-line" @click="cancelOrder">取消订单</button>
|
|
<button :disabled="choose=='cash'&&cashValue - Number(orderPrice/100)<0" class="m-btn"
|
|
@click="resvcePrice(choose)">确认收款</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
paymentOrder,
|
|
printTicket,
|
|
cancelOrder,
|
|
submitOrder,
|
|
getOrder
|
|
} from '@/api/seal/seal.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
orderDetail: null,
|
|
orderPrice: 0,
|
|
cashValue: 0,
|
|
choose: 'cash',
|
|
interval: undefined,
|
|
way: [{
|
|
id: 1,
|
|
title: '微信支付',
|
|
imgPath: '/static/images/index/icon_wechat.png'
|
|
},
|
|
{
|
|
id: 2,
|
|
title: '支付宝支付',
|
|
imgPath: '/static/images/index/icon_alipay.png'
|
|
},
|
|
{
|
|
id: 3,
|
|
title: '银联支付',
|
|
imgPath: '/static/images/index/icon_unionpay.png'
|
|
},
|
|
{
|
|
id: 'cash',
|
|
title: '现金支付',
|
|
imgPath: '/static/images/index/icon_cash.png'
|
|
}
|
|
]
|
|
};
|
|
},
|
|
onLoad(params) {
|
|
uni.removeStorageSync('ALL_TICKET');
|
|
uni.removeStorageSync('EVENT');
|
|
if (params.order) {
|
|
uni.setStorageSync('payOrder', params.order);
|
|
this.orderDetail = null;
|
|
this.orderDetail = JSON.parse(params.order);
|
|
console.log('this.orderDetail', this.orderDetail);
|
|
this.orderPrice = this.orderDetail.orderInfo.settlementAmount*100;
|
|
}
|
|
},
|
|
onUnload() {
|
|
// this.cancelOrder();
|
|
this.clearQueryInterval()
|
|
},
|
|
computed: {
|
|
errClass() {
|
|
if (this.cashValue - Number(this.orderPrice/100) < 0) {
|
|
return 'err-border'
|
|
} else {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
checkPrice() {
|
|
|
|
},
|
|
cancelOrder() {
|
|
const that = this;
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定放弃支付吗',
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
uni.showLoading({
|
|
title: '请稍后...'
|
|
});
|
|
cancelOrder(that.orderDetail.orderInfo.orderNumber)
|
|
.then((res) => {
|
|
uni.hideLoading();
|
|
this.clearQueryInterval()
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '已取消',
|
|
duration: 1200
|
|
});
|
|
setTimeout(() => {
|
|
uni.reLaunch({
|
|
url: '/pages/index'
|
|
});
|
|
}, 1400);
|
|
})
|
|
.catch((err) => {
|
|
uni.hideLoading();
|
|
console.log(err);
|
|
});
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
},
|
|
createQueryInterval() {
|
|
let that = this
|
|
if (this.interval) {
|
|
return;
|
|
}
|
|
this.interval = setInterval(() => {
|
|
getOrder(that.orderDetail.orderInfo.belongingPayOrderId).then((response) => {
|
|
console.log('response',response)
|
|
// 已支付
|
|
if (response.data.status === 10) {
|
|
that.clearQueryInterval();
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '支付成功！',
|
|
duration: 1000
|
|
});
|
|
const ob = {
|
|
orderNumber: that.orderDetail.orderInfo.orderNumber
|
|
};
|
|
printTicket(ob)
|
|
.then((ress) => {
|
|
|
|
const datas = JSON.stringify(that.orderDetail.orderInfo
|
|
.ticketList);
|
|
// console.log(data)
|
|
uni.navigateTo({
|
|
url: '/pages/payResult/payResult?status=success&detail=' +
|
|
datas + '&tickets=' + ress.data
|
|
});
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
}
|
|
// 已取消
|
|
if (response.data.status === 20) {
|
|
that.clearQueryInterval();
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '支付失败，请重新扫码！',
|
|
duration: 1000
|
|
});
|
|
}
|
|
});
|
|
}, 1000 * 2);
|
|
},
|
|
/** 清空查询任务 */
|
|
clearQueryInterval() {
|
|
// 清空任务
|
|
clearInterval(this.interval);
|
|
this.interval = undefined;
|
|
},
|
|
resvcePrice(val) {
|
|
let that = this
|
|
console.log(val);
|
|
if (val != 'cash') {
|
|
uni.hideLoading();
|
|
uni.scanCode({
|
|
scanType: ['barCode', 'qrCode'],
|
|
success: function(resposon) {
|
|
console.log('条码内容：' + resposon.result);
|
|
// console.log('this.orderDetail', this.orderDetail);
|
|
const obj = {
|
|
channelCode: val==1?'wx_bar':val==2?'alipay_bar':'union_qr',
|
|
channelExtras: {
|
|
authCode: resposon.result,
|
|
auth_code: resposon.result,
|
|
},
|
|
id: that.orderDetail.orderInfo.belongingPayOrderId,
|
|
returnUrl: ''
|
|
};
|
|
submitOrder(obj).then((res) => {
|
|
console.log('支付结果', res)
|
|
const data = res.data;
|
|
if (data.status === 0) {
|
|
|
|
// 打开轮询任务
|
|
uni.showLoading({
|
|
title: '支付中...',
|
|
mask: true
|
|
});
|
|
that.createQueryInterval();
|
|
|
|
|
|
// that.clearQueryInterval();
|
|
// uni.showToast({
|
|
// icon: 'none',
|
|
// title: '支付成功！',
|
|
// duration: 1000
|
|
// });
|
|
// const ob = {
|
|
// orderNumber: that.orderDetail.orderInfo.orderNumber
|
|
// };
|
|
// printTicket(ob)
|
|
// .then((ress) => {
|
|
// console.log('ress',ress);
|
|
// const datas = JSON.stringify(that.orderDetail.orderInfo
|
|
// .ticketList);
|
|
// // console.log(data)
|
|
// uni.navigateTo({
|
|
// url: '/pages/payResult/payResult?status=success&detail=' +
|
|
// datas + '&tickets=' + ress.data
|
|
// });
|
|
// })
|
|
// .catch((err) => {
|
|
// console.log(err);
|
|
// });
|
|
|
|
return;
|
|
}
|
|
|
|
}).catch(err => {
|
|
// uni.showLoading({
|
|
// title: '支付中...'
|
|
// });
|
|
// this.createQueryInterval();
|
|
})
|
|
}
|
|
});
|
|
}
|
|
if (val == 'cash') {
|
|
|
|
const obj = {
|
|
orderNumber: this.orderDetail.orderInfo.orderNumber,
|
|
settlementAmount: Number(this.orderPrice/100),
|
|
payMethod: 'cash',
|
|
actualAmount: this.cashValue,
|
|
changeAmount: this.cashValue - Number(this.orderPrice/100)
|
|
};
|
|
paymentOrder(obj)
|
|
.then((res) => {
|
|
console.log(res);
|
|
const ob = {
|
|
orderNumber: this.orderDetail.orderInfo.orderNumber
|
|
};
|
|
printTicket(ob)
|
|
.then((ress) => {
|
|
const datas = JSON.stringify(this.orderDetail.orderInfo.ticketList);
|
|
// console.log(data)
|
|
uni.navigateTo({
|
|
url: '/pages/payResult/payResult?status=success&detail=' + datas +
|
|
'&tickets=' + ress.data
|
|
});
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
// uni.navigateTo({
|
|
// url:'/pages/payResult/payResult?status=fail'
|
|
// })
|
|
});
|
|
}
|
|
},
|
|
back() {
|
|
let that = this;
|
|
cancelOrder(that.orderDetail.orderInfo.orderNumber)
|
|
.then((res) => {
|
|
this.clearQueryInterval()
|
|
console.log(res);
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
this.clearQueryInterval()
|
|
});
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.m-order {
|
|
margin: 20upx 20upx 150upx;
|
|
|
|
.m-price {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.m-num {
|
|
color: #1b1b1b;
|
|
font-size: 40upx;
|
|
margin-top: 70upx;
|
|
|
|
span {
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 500;
|
|
font-size: 64upx;
|
|
color: #1b1b1b;
|
|
}
|
|
}
|
|
|
|
.m-tips {
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 400;
|
|
font-size: 26upx;
|
|
color: #1b1b1b;
|
|
margin-top: 20upx;
|
|
}
|
|
}
|
|
|
|
.m-pay-way {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 65upx;
|
|
|
|
.m-title {
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 400;
|
|
font-size: 24upx;
|
|
color: #666666;
|
|
margin-bottom: 20upx;
|
|
}
|
|
|
|
.m-way {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.m-way-item {
|
|
width: 49%;
|
|
height: 102upx;
|
|
display: flex;
|
|
align-items: center;
|
|
background: #ffffff;
|
|
border-radius: 20upx;
|
|
padding: 0 20upx;
|
|
margin-bottom: 14upx;
|
|
|
|
// &:nth-child(2),
|
|
// &:last-child {
|
|
// margin-left: 2%;
|
|
// }
|
|
|
|
image {
|
|
width: 36upx;
|
|
height: 36upx;
|
|
margin-right: 20upx;
|
|
}
|
|
|
|
.m-cion {
|
|
margin-left: auto;
|
|
color: #b3b3b3 !important;
|
|
}
|
|
}
|
|
|
|
.m-way-item.active {
|
|
.m-cion {
|
|
color: #2277f0 !important;
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.m-block {
|
|
background: #ffffff;
|
|
border-radius: 20upx;
|
|
padding: 20upx;
|
|
|
|
.m-title {
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 800;
|
|
font-size: 32upx;
|
|
color: #1b1b1b;
|
|
margin-bottom: 24upx;
|
|
}
|
|
|
|
.m-input-box {
|
|
::v-deep .m-input {
|
|
.uni-easyinput__content {
|
|
align-items: baseline;
|
|
|
|
.uni-easyinput__content-input {
|
|
font-size: 48upx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.m-zl {
|
|
display: flex;
|
|
margin-top: 36upx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.m-botom {
|
|
width: 100%;
|
|
height: 136upx;
|
|
background: #ffffff;
|
|
position: fixed;
|
|
bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
display: flex;
|
|
|
|
.m-btn {
|
|
width: 65%;
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 500;
|
|
font-size: 32upx;
|
|
color: #ffffff;
|
|
background: linear-gradient(90deg, #5097fa 0%, #2277f0 100%);
|
|
border-radius: 16upx;
|
|
}
|
|
|
|
.m-btn-line {
|
|
width: 25%;
|
|
color: #5097fa;
|
|
background: #fff;
|
|
border: solid 1upx #5097fa;
|
|
border-color: #5097fa;
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
::v-deep .err-border {
|
|
|
|
.uni-easyinput__content {
|
|
|
|
.uni-easyinput__content-input {
|
|
.uni-input-wrapper {
|
|
|
|
.uni-input-input {
|
|
color: #f07173;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |