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.
589 lines
13 KiB
589 lines
13 KiB
<template>
|
|
<view>
|
|
<!-- 支付页面 -->
|
|
<view class="head">
|
|
<div class="df head-order">
|
|
<div>订单编号</div>
|
|
<div>{{list.order_no}}</div>
|
|
</div>
|
|
<div class="df head-number">
|
|
<div>应收金额</div>
|
|
<div v-if="list.sales_money>0">￥{{list.sales_money}}</div>
|
|
<div v-else-if="list.order_money>0">￥{{list.order_money}}</div>
|
|
<div v-else>￥{{list.goods_money}}</div>
|
|
</div>
|
|
<div class="df head-number">
|
|
<div>已收金额</div>
|
|
<div v-if="list.sales_money>0">￥{{pexync}}</div>
|
|
<div v-else-if="list.order_money>0">￥{{houtaitwo}}</div>
|
|
<div v-else>￥{{list.goods_money}}</div>
|
|
</div>
|
|
<div class="df head-confirmed">
|
|
<div>待支付金额</div>
|
|
<div v-if="list.sales_money>0">￥{{pay_money_no}}</div>
|
|
<div v-else-if="list.order_money>0">￥{{houtaisui}}</div>
|
|
<div v-else>￥{{list.goods_money}}</div>
|
|
</div>
|
|
<div class="df head-pay">
|
|
<div class="df aic">本次支付</div>
|
|
<div>
|
|
<input type="text" v-model="amount" @blur="blur" placeholder="请输入充值金额">
|
|
<div class="arr">￥</div>
|
|
<div class="box">元</div>
|
|
</div>
|
|
</div>
|
|
<div class="head-prepare">
|
|
<!-- <view class="df jcsb aic head-prepara">
|
|
<div>预存款支付</div>
|
|
<div class="df" @click="vacancies">
|
|
余额：00.00<u-icon name="arrow-right"></u-icon>
|
|
</div>
|
|
</view> -->
|
|
<div class="head-dotted"></div>
|
|
<view class="df jcsb aic head-prepara">
|
|
<div>填写转账记录</div>
|
|
<div class="df" @click="transfer">
|
|
<u-icon name="arrow-right"></u-icon>
|
|
</div>
|
|
</view>
|
|
<!-- <div class="head-dotted"></div>
|
|
<view class="df jcsb aic head-prepara">
|
|
<div>微信二维码收款</div>
|
|
<div class="df" @click="QRcode">
|
|
<u-icon name="arrow-right"></u-icon>
|
|
</div>
|
|
</view> -->
|
|
<!-- <div class="head-dotted"></div>
|
|
<view class="df jcsb aic head-prepara">
|
|
<div>支付宝二维码收款</div>
|
|
<div class="df" @click="show3=true">
|
|
<u-icon name="arrow-right"></u-icon>
|
|
</div>
|
|
</view> -->
|
|
|
|
</div>
|
|
</view>
|
|
<u-overlay :show="show" @click="show = false">
|
|
<div class="shade">
|
|
<div>提示</div>
|
|
<div>预存款不足</div>
|
|
<div class="df aic jcsa">我知道了</div>
|
|
</div>
|
|
</u-overlay>
|
|
<u-overlay :show="show1" @click="show1 = false">
|
|
<div class="shade-coin">
|
|
<div>提示</div>
|
|
<div class="df fdc aic jcsb">
|
|
<text>是否使用预存款支付金额</text>
|
|
<text>￥500.00</text>
|
|
</div>
|
|
<div class="df">
|
|
<view class="shade-cancel df aic jcsa">取消</view>
|
|
<view class="shade-affirm df aic jcsa">确认</view>
|
|
</div>
|
|
</div>
|
|
</u-overlay>
|
|
<u-overlay :show="show2" @click="show2 = false">
|
|
<div class="qr-code">
|
|
<div class="qr-barcode">
|
|
<div>本次支付金额</div>
|
|
<div v-if="list.sales_money>0">￥{{list.sales_money}}</div>
|
|
<div v-else-if="list.order_money>0">￥{{list.order_money}}</div>
|
|
<div v-else>￥{{list.goods_money}}</div>
|
|
<div>
|
|
<image :src="$util.img('/upload/weapp/user/erweima.gif')" mode=""></image>
|
|
|
|
</div>
|
|
<div>请在12月21日 17:30前支付订贷商扫码向我付款</div>
|
|
</div>
|
|
<div class="qr-barcodexx df aic jcsa">×</div>
|
|
</div>
|
|
</u-overlay>
|
|
<u-overlay :show="show3" @click="show3 = false">
|
|
<div class="qr-code">
|
|
<div class="qr-barcode">
|
|
<div>本次支付金额</div>
|
|
<div v-if="list.sales_money>0">￥{{list.sales_money}}</div>
|
|
<div v-else-if="list.order_money>0">￥{{list.order_money}}</div>
|
|
<div v-else>￥{{list.goods_money}}</div>
|
|
<div>
|
|
<image :src="$util.img('/upload/weapp/user/erweima.gif')" mode=""></image>
|
|
|
|
</div>
|
|
<div>请在12月21日 17:30前支付订贷商扫码向我付款</div>
|
|
</div>
|
|
<div class="qr-barcodexx df aic jcsa">×</div>
|
|
</div>
|
|
</u-overlay>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
show: false,
|
|
show1: false,
|
|
show2: false,
|
|
show3: false,
|
|
list: [],
|
|
amount: '',
|
|
order: '',
|
|
member: '',
|
|
order_id: '',
|
|
member_id: '',
|
|
pay_money_no: '',
|
|
pexync: '',
|
|
houtaione: '',
|
|
houtaitwo: '',
|
|
houtaisui: 0
|
|
};
|
|
},
|
|
onLoad(e) {
|
|
this.order = e.id
|
|
this.member = e.di
|
|
uni.$on('Collection', (data) => {
|
|
console.log(data, '新增收款');
|
|
this.list = data
|
|
|
|
if (data.sales_money > 0) {
|
|
this.$api.sendRequest({
|
|
url: '/api/salasmanorder/getOrderPayList',
|
|
data: {
|
|
order_id: data.order_id, //订单id
|
|
member_id: data.member_id //订单客户id
|
|
|
|
},
|
|
success: res => {
|
|
console.log(res.data, '收款记录');
|
|
this.pay_money_no = res.data.pay_money_no
|
|
// this.list = res.data.list
|
|
// this.pay_money = res.data.pay_money
|
|
// this.pay_money_yes = res.data.pay_money_yes
|
|
// this.pay_money_no = res.data.pay_money_no
|
|
this.amount = res.data.pay_money_no
|
|
this.pexync = Number(res.data.pay_money) - res.data.pay_money_no
|
|
}
|
|
})
|
|
|
|
return
|
|
}
|
|
if (data.order_money > 0) {
|
|
this.$api.sendRequest({
|
|
url: '/api/salasmanorder/getOrderPayList',
|
|
data: {
|
|
order_id: data.order_id, //订单id
|
|
member_id: data.member_id //订单客户id
|
|
|
|
},
|
|
success: res => {
|
|
console.log(res.data, '收款记录');
|
|
this.houtaisui = res.data.pay_money_no
|
|
// this.list = res.data.list
|
|
// this.pay_money = res.data.pay_money
|
|
// this.pay_money_yes = res.data.pay_money_yes
|
|
// this.pay_money_no = res.data.pay_money_no
|
|
this.amount = res.data.pay_money_no
|
|
this.houtaitwo = Number(res.data.pay_money) - res.data.pay_money_no
|
|
}
|
|
})
|
|
|
|
return
|
|
}
|
|
this.amount = data.goods_money
|
|
})
|
|
|
|
},
|
|
onUnload() {
|
|
uni.$off('Collection')
|
|
},
|
|
methods: {
|
|
blur(value) {
|
|
console.log(value.detail.value);
|
|
this.amount = (Number(value.detail.value)).toFixed(2)
|
|
},
|
|
vacancies() {
|
|
// this.show=true
|
|
this.show1 = true
|
|
},
|
|
QRcode() {
|
|
this.show2 = true
|
|
},
|
|
transfer() {
|
|
console.log(this.list.goods_money);
|
|
if (this.list.sales_money) {
|
|
this.list.goods_money = this.list.sales_money
|
|
}
|
|
console.log(this.list.order_money);
|
|
console.log(this.list.goods_money);
|
|
console.log(this.amount);
|
|
let _this = this
|
|
if (this.amount == 0) {
|
|
this.$util.showToast({
|
|
title: '请填写支付金额'
|
|
});
|
|
return
|
|
}
|
|
if (this.list.sales_money > 0) {
|
|
if (this.list.sales_money > 0) {
|
|
if (Number(this.amount) > Number(this.pay_money_no)) {
|
|
this.$util.showToast({
|
|
title: '不能超过应收金额'
|
|
});
|
|
return
|
|
}
|
|
} else {
|
|
if (Number(this.amount) > Number(this.list.goods_money)) {
|
|
this.$util.showToast({
|
|
title: '不能超过应收金额'
|
|
});
|
|
return
|
|
}
|
|
}
|
|
}
|
|
|
|
if (this.list.order_money > 0) {
|
|
// if (_this.list.order_money > 0) {
|
|
// if (Number(_this.amount) > Number(_this.houtaisui)) {
|
|
// console.log(Number(_this.amount), Number(_this.houtaisui));
|
|
// this.$util.showToast({
|
|
// title: '不能超过应收金额'
|
|
// });
|
|
// return
|
|
// }
|
|
// } else {
|
|
if (Number(this.amount) > Number(this.list.goods_money)) {
|
|
this.$util.showToast({
|
|
title: '不能超过应收金额'
|
|
});
|
|
return
|
|
}
|
|
// }
|
|
}
|
|
|
|
setTimeout(() => {
|
|
uni.$emit('money', this.amount)
|
|
}, 500)
|
|
uni.navigateTo({
|
|
// url:this.list[this.current.URL]
|
|
url: `/page_salesman_order/Offline_transfer/Offline_transfer?id=${this.order}&di=${this.member}`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.head {
|
|
margin: 24rpx;
|
|
width: 702rpx;
|
|
// height: 712rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
|
|
.head-order {
|
|
padding: 32rpx 0 0 32rpx;
|
|
}
|
|
|
|
.head-order div:nth-child(1) {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.head-order div:nth-child(2) {
|
|
margin-left: 68rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.head-number {
|
|
padding: 24rpx 0 0 32rpx;
|
|
}
|
|
|
|
.head-number div:nth-child(1) {
|
|
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.head-number div:nth-child(2) {
|
|
margin-left: 68rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.head-confirmed {
|
|
padding: 24rpx 0 0 32rpx;
|
|
}
|
|
|
|
.head-confirmed div:nth-child(1) {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.head-confirmed div:nth-child(2) {
|
|
margin-left: 40rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.head-pay {
|
|
padding: 24rpx 0 0 32rpx;
|
|
}
|
|
|
|
.head-pay div:nth-child(2) {
|
|
margin-left: 68rpx;
|
|
position: relative;
|
|
|
|
input {
|
|
// border: 1rpx solid red;
|
|
width: 458rpx;
|
|
height: 70rpx;
|
|
background: #F6F6F6;
|
|
border-radius: 16rpx;
|
|
padding: 0 68rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.arr {
|
|
font-size: 36rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #21BBF3;
|
|
line-height: 44rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -44rpx;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.box {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
right: 24rpx;
|
|
}
|
|
}
|
|
|
|
.head-prepare {
|
|
// height: 100rpx;
|
|
padding: 0 24rpx 0 32rpx;
|
|
|
|
.head-dotted {
|
|
width: 638rpx;
|
|
height: 2rpx;
|
|
background: #F2F2F2;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.head-prepara {
|
|
height: 100rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.shade {
|
|
box-sizing: border-box;
|
|
width: 540rpx;
|
|
height: 300rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24px 24px 24px 24px;
|
|
position: fixed;
|
|
top: 556rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.shade div:nth-child(1) {
|
|
text-align: center;
|
|
margin-top: 40rpx;
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 44rpx;
|
|
}
|
|
|
|
.shade div:nth-child(2) {
|
|
margin-top: 8rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #585858;
|
|
line-height: 44rpx;
|
|
}
|
|
|
|
.shade div:nth-child(3) {
|
|
width: 444rpx;
|
|
height: 72rpx;
|
|
background: #21BBF3;
|
|
border-radius: 40rpx;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
margin-top: 56rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.shade-coin {
|
|
box-sizing: border-box;
|
|
width: 540rpx;
|
|
height: 340rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24px 24px 24px 24px;
|
|
position: fixed;
|
|
top: 556rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.shade-coin div:nth-child(1) {
|
|
margin-top: 40rpx;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 44rpx;
|
|
}
|
|
|
|
.shade-coin div:nth-child(2) {
|
|
width: 444rpx;
|
|
height: 88rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #585858;
|
|
line-height: 44rpx;
|
|
margin: 0 auto;
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
.shade-coin div:nth-child(3) {
|
|
margin-top: 30rpx;
|
|
|
|
.shade-cancel {
|
|
width: 206rpx;
|
|
height: 72rpx;
|
|
border-radius: 40rpx;
|
|
border: 2rpx solid #E8E8E8;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
line-height: 40rpx;
|
|
margin: 0 32rpx 0 48rpx;
|
|
}
|
|
|
|
.shade-affirm {
|
|
width: 206rpx;
|
|
height: 72rpx;
|
|
background: #21BBF3;
|
|
border-radius: 40rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.qr-code {
|
|
box-sizing: border-box;
|
|
|
|
.qr-barcode {
|
|
width: 540rpx;
|
|
height: 546rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
position: fixed;
|
|
top: 332rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
}
|
|
|
|
.qr-barcode div:nth-child(1) {
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 44rpx;
|
|
text-align: center;
|
|
margin-top: 40rpx;
|
|
}
|
|
|
|
.qr-barcode div:nth-child(2) {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #F33B50;
|
|
line-height: 44rpx;
|
|
text-align: center;
|
|
margin-top: 12rpx;
|
|
}
|
|
|
|
.qr-barcode div:nth-child(3) {
|
|
width: 270rpx;
|
|
height: 270rpx;
|
|
|
|
margin: 0 auto;
|
|
margin-top: 20rpx;
|
|
|
|
image {
|
|
width: 270rpx;
|
|
height: 270rpx;
|
|
}
|
|
}
|
|
|
|
.qr-barcode div:nth-child(4) {
|
|
width: 310rpx;
|
|
height: 68rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #585858;
|
|
line-height: 34rpx;
|
|
margin: 0 auto;
|
|
margin-top: 22rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.qr-barcodexx {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
border: 2rpx solid #fff;
|
|
color: #fff;
|
|
border-radius: 50%;
|
|
position: fixed;
|
|
top: 912rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
}
|
|
}
|
|
</style>
|