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.
454 lines
9.5 KiB
454 lines
9.5 KiB
<template>
|
|
<view>
|
|
<view class="df aic jcsb head-fangshi">
|
|
<div>付款方式</div>
|
|
<div v-if="name.length > 0" @click="show = true">{{ name }}></div>
|
|
<div v-else style="color: #ccc;" @click="show = true">请选择支付方式 ></div>
|
|
</view>
|
|
<view class="make-collections" v-if="name == '银行卡'">
|
|
<div>收款账户</div>
|
|
<div v-for="(item, index) in simg ? radiolist1 : listtwo" :key="index">
|
|
<div class="df aic bommsd" @click="btn(index, item)">
|
|
<div class="make-dem">
|
|
<image v-if="indexa == index" :src="$util.img(`/upload/weapp/user/gou.png`)" mode=""></image>
|
|
<image v-else :src="$util.img(`/upload/weapp/user/un_gou.png`)" mode=""></image>
|
|
</div>
|
|
<div class="make-two">
|
|
<div>银行名称 <span>{{ item.branch_bank_name }}</span></div>
|
|
<div>开户名称 <span>{{ item.realname }}</span></div>
|
|
<div>对公账号 <span>{{ item.bank_account }}</span></div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- <div class="xu"></div> -->
|
|
</div>
|
|
<div class="Order-commodity df jcsa">
|
|
<div class="df aic" @click="simga">
|
|
展开
|
|
<image v-if="simg == true" :src="$util.img('/upload/weapp/user/arrow-top.png')" mode="">
|
|
</image>
|
|
<image v-if="simg == false" :src="$util.img('/upload/weapp/user/arrow-bottom.png')" mode="">
|
|
</image>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
<view class="upload">
|
|
<div>上传汇款凭证：<span>限制上传5张凭证，单张不超过3M</span></div>
|
|
<div class="visittwo">
|
|
<view class="Visit-img" v-if="list.length < 5">
|
|
<div @click="upload()" class="df aic jcsa">
|
|
<image :src="$util.img(`/upload/weapp/pageSalesman/reportForm/plussign.png`)" mode=""></image>
|
|
</div>
|
|
</view>
|
|
<view class="visitsui df">
|
|
<view class="" v-for="(item, index) in list" :key="index">
|
|
<image :src="$util.img(item[0])" mode=""></image>
|
|
</view>
|
|
</view>
|
|
|
|
</div>
|
|
|
|
</view>
|
|
<view class="df aic jcsb button-box">
|
|
<div class="df aic jcsa">金额￥{{ money }}</div>
|
|
<div class="df aic jcsa" @click="btnti">提交</div>
|
|
</view>
|
|
<view>
|
|
<u-action-sheet :actions="zhifufangshi" @select="selectClick" :title="title" :show="show"
|
|
@close="show = false"></u-action-sheet>
|
|
<!-- <u-button @click="show = true">打开ActionSheet</u-button> -->
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
simg: false,
|
|
fileList5: [],
|
|
title: '请选择支付方式',
|
|
show: false,
|
|
value: '2022-9-12',
|
|
value1: '',
|
|
indexa: 0,
|
|
radiolist1: [{
|
|
name: '中国银行xx支行',
|
|
disabled: false,
|
|
unit: '北京市朝阳区安国药业有限公司',
|
|
account: '02984884'
|
|
},
|
|
{
|
|
name: '邮政银行xx银行',
|
|
disabled: false,
|
|
unit: '北京市朝阳区安国药业有限公司',
|
|
account: '02984884'
|
|
},
|
|
|
|
{
|
|
name: '邮政银行xx银行',
|
|
disabled: false,
|
|
unit: '北京市朝阳区安国药业有限公司',
|
|
account: '02984884'
|
|
}
|
|
|
|
],
|
|
list: [],
|
|
listtwo: [],
|
|
money: '',
|
|
zhifufangshi: [
|
|
{ id: 1, name: '微信' },
|
|
{ id: 2, name: '支付宝' },
|
|
{ id: 3, name: '银行卡' }
|
|
// {id:4,name:'其它'},
|
|
],
|
|
id: '',
|
|
name: '',
|
|
order_id: '',
|
|
member_id: '',
|
|
// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
|
|
radiovalue1: '中国银行xx支行',
|
|
};
|
|
},
|
|
onLoad(e) {
|
|
this.order_id = e.id
|
|
this.member_id = e.di
|
|
uni.$on('money', (data) => {
|
|
this.money = data
|
|
// console.log(data,'amount');
|
|
})
|
|
},
|
|
onUnload() {
|
|
uni.$off('money')
|
|
},
|
|
onShow() {
|
|
this.$api.sendRequest({
|
|
url: '/api/salasmanorder/getBankList',
|
|
data: {},
|
|
success: res => {
|
|
console.log(res.data.list, '平台收款账户列表');
|
|
this.radiolist1 = res.data.list
|
|
this.itemlist = res.data.list[0]
|
|
this.listtwo = [...res.data.list].slice(0, 2)
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
selectClick(index) {
|
|
this.id = index.id
|
|
this.name = index.name
|
|
console.log(index)
|
|
},
|
|
upload(type, size = 1) {
|
|
this.$util.upload(size, {
|
|
path: 'otherImage'
|
|
}, res => {
|
|
this.list.push(res)
|
|
console.log(this.list);
|
|
})
|
|
},
|
|
simga() {
|
|
this.simg = !this.simg
|
|
let _this = this
|
|
if (!_this.simg) {
|
|
_this.listtwo = [..._this.radiolist1].slice(0, 2)
|
|
|
|
} else {
|
|
|
|
}
|
|
},
|
|
groupChange(n) {
|
|
console.log('groupChange', n);
|
|
},
|
|
radioChange(n) {
|
|
console.log('radioChange', n);
|
|
},
|
|
btn(index, item) {
|
|
console.log(item);
|
|
this.itemlist = item
|
|
this.indexa = index
|
|
},
|
|
btnti() {
|
|
if (this.name.length == 0) {
|
|
this.$util.showToast({
|
|
title: '请选择付款方式'
|
|
});
|
|
return
|
|
}
|
|
if (this.list.length == 0) {
|
|
this.$util.showToast({
|
|
title: '请上传凭证'
|
|
});
|
|
return
|
|
}
|
|
if (this.name == '银行卡') {
|
|
this.$api.sendRequest({
|
|
url: '/api/salasmanorder/orderPayAdd',
|
|
header: {
|
|
'Content-Type': 'application/json' //自定义请求头信息
|
|
},
|
|
data: {
|
|
order_id: this.order_id,//订单id
|
|
member_id: this.member_id,//订单客户id
|
|
pay_type: this.id,//付款方式 1微信 2支付宝 3银行卡
|
|
bank_num: this.itemlist.bank_account,//银行卡号
|
|
bank_name: this.itemlist.branch_bank_name,//银行卡开户行名称
|
|
name: this.itemlist.realname,//开户名称
|
|
money: this.money,//收款金额
|
|
images: this.list//凭证 数组
|
|
},
|
|
success: res => {
|
|
this.$util.showToast({
|
|
title: '提交成功'
|
|
});
|
|
setTimeout(() => {
|
|
uni.navigateTo({
|
|
url: `/page_salesman_order/Collection_record/Collection_record?id=${this.member_id}&di=${this.order_id}`
|
|
})
|
|
}, 500)
|
|
}
|
|
})
|
|
} else {
|
|
this.$api.sendRequest({
|
|
url: '/api/salasmanorder/orderPayAdd',
|
|
header: {
|
|
'Content-Type': 'application/json' //自定义请求头信息
|
|
},
|
|
data: {
|
|
order_id: this.order_id,//订单id
|
|
member_id: this.member_id,//订单客户id
|
|
pay_type: this.id,//付款方式 1微信 2支付宝 3银行卡
|
|
money: this.money,//收款金额
|
|
images: this.list//凭证 数组
|
|
},
|
|
success: res => {
|
|
setTimeout(() => {
|
|
uni.navigateTo({
|
|
url: `/page_salesman_order/Collection_record/Collection_record?id=${this.member_id}&di=${this.order_id}`
|
|
})
|
|
}, 500)
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.head-fangshi {
|
|
width: 702rpx;
|
|
background: #FFFFFF;
|
|
padding: 12rpx 6rpx;
|
|
box-sizing: border-box;
|
|
margin: 0 auto;
|
|
margin-top: 24rpx;
|
|
}
|
|
|
|
.visittwo {
|
|
height: 264rpx;
|
|
width: 600rpx;
|
|
border: 1rpx solid #ccc;
|
|
position: relative;
|
|
|
|
.visitsui {
|
|
// margin-left: 12rpx;
|
|
margin-top: 12rpx;
|
|
|
|
image {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
margin-left: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.Visit-img {
|
|
position: absolute;
|
|
bottom: 12rpx;
|
|
left: 12rpx;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
background: #EFEFEF;
|
|
border-radius: 16rpx;
|
|
|
|
image {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
}
|
|
}
|
|
|
|
.head-time {
|
|
width: 750rpx;
|
|
height: 110rpx;
|
|
background: #FFFFFF;
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
.head-time div:nth-child(1) {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 40rpx;
|
|
margin-left: 24rpx;
|
|
}
|
|
|
|
.head-time div:nth-child(2) {
|
|
width: 550rpx;
|
|
height: 70rpx;
|
|
background: #F6F6F6;
|
|
border-radius: 16rpx;
|
|
box-sizing: border-box;
|
|
margin-left: 40rpx;
|
|
|
|
input {
|
|
// width: 550rpx;
|
|
// height: 70rpx;
|
|
// background: #F6F6F6;
|
|
// border-radius: 16rpx;
|
|
padding-left: 68rpx;
|
|
// margin-left: 40rpx;
|
|
// box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.make-collections {
|
|
width: 702rpx;
|
|
// height: 572rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
box-sizing: border-box;
|
|
padding-bottom: 24rpx;
|
|
margin: 24rpx;
|
|
|
|
.bommsd {
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
|
|
.Order-commodity {
|
|
margin-top: 34rpx;
|
|
|
|
div {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
image {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-left: 24rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.make-dem {
|
|
image {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin: 0 28rpx 0 32rpx;
|
|
}
|
|
}
|
|
|
|
.make-two {
|
|
div {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 40rpx;
|
|
margin-top: 22rpx;
|
|
|
|
span {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
line-height: 40rpx;
|
|
margin-left: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.xu {
|
|
width: 638rpx;
|
|
height: 2rpx;
|
|
background: #F2F2F2;
|
|
border-radius: 16rpx;
|
|
margin-top: 24rpx;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.upload {
|
|
width: 702rpx;
|
|
// height: 602rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
margin: 0 24rpx;
|
|
box-sizing: border-box;
|
|
padding: 32rpx;
|
|
margin-top: 24rpx;
|
|
|
|
.Upload-pictures {
|
|
border-radius: 16rpx;
|
|
margin-top: 24rpx;
|
|
}
|
|
}
|
|
|
|
.upload div:nth-child(1) {
|
|
font-size: 30rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 42rpx;
|
|
margin-bottom: 24rpx;
|
|
|
|
span {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.button-box {
|
|
width: 750rpx;
|
|
height: 100rpx;
|
|
background: #FFFFFF;
|
|
position: fixed;
|
|
bottom: 74rpx;
|
|
}
|
|
|
|
.button-box div:nth-child(1) {
|
|
margin-left: 24rpx;
|
|
font-size: 30rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #585858;
|
|
line-height: 42rpx;
|
|
}
|
|
|
|
.button-box div:nth-child(2) {
|
|
width: 192rpx;
|
|
height: 72rpx;
|
|
background: #21BBF3;
|
|
border-radius: 40rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
line-height: 40rpx;
|
|
margin-right: 32rpx;
|
|
}
|
|
</style>
|
|
|