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.
306 lines
6.4 KiB
306 lines
6.4 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="back" />
|
|
|
|
<view class="m-order">
|
|
<view class="m-price">
|
|
<view class="m-num">
|
|
¥
|
|
<span>{{ orderPrice }}</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" 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>{{ cashValue - Number(orderPrice) }}</span>
|
|
元
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="m-botom">
|
|
<button class="m-btn m-btn-line" @click="cancelOrder">取消订单</button>
|
|
<button class="m-btn" @click="resvcePrice">确认收款</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { paymentOrder,printTicket,cancelOrder } from '@/api/seal/seal.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
orderDetail: null,
|
|
orderPrice: 0.0,
|
|
cashValue: 0,
|
|
choose: 'cash',
|
|
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) {
|
|
this.orderDetail = null;
|
|
this.orderDetail = JSON.parse(params.order);
|
|
this.orderPrice = this.orderDetail.orderInfo.settlementAmount;
|
|
}
|
|
},
|
|
onUnload() {
|
|
this.back()
|
|
},
|
|
methods: {
|
|
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();
|
|
uni.showToast({
|
|
icon:'none',
|
|
title:'已取消'
|
|
})
|
|
setTimeout(()=>{
|
|
uni.reLaunch({
|
|
url:'/pages/index'
|
|
})
|
|
},2100)
|
|
}).catch(err=>{
|
|
uni.hideLoading();
|
|
console.log(err)
|
|
})
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
|
|
},
|
|
resvcePrice() {
|
|
const obj = {
|
|
orderNumber: this.orderDetail.orderInfo.orderNumber,
|
|
settlementAmount: Number(this.orderPrice),
|
|
payMethod: 'cash',
|
|
actualAmount: this.cashValue,
|
|
changeAmount: this.cashValue - Number(this.orderPrice)
|
|
};
|
|
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() {
|
|
|
|
this.cancelOrder()
|
|
}
|
|
}
|
|
};
|
|
</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;
|
|
|
|
.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>
|
|
|