<template>
<view class="content">
<!-- <view class="flex nav-list">
<view class="item" v-for="(item,index) in navList" :class="{'action': current == index}"
@click="changeNavT(index)">
{{item.tit}}
</view>
</view> -->
<view class="" style="height: 20rpx;">
</view>
<view class="tab">
<template v-if="current == 0">
<view class="bd-wrap flex">
<view class="bg-name">
真实姓名：
</view>
<view class="bg-val">
<input type="text" value="" placeholder="请输入真实姓名" class="val-ipt" v-model="bankInfo.fullname"
ref="name" />
</view>
</view>
<!-- <view class="bd-wrap flex">
<view class="bg-name">
手机号：
</view>
<view class="bg-val">
<input type="text" value="" placeholder="请输入手机号" class="val-ipt" v-model="bankInfo.phone"
ref="phone" />
</view>
</view> -->
<view class="bd-wrap flex">
<view class="bg-name">
银行卡号：
</view>
<view class="bg-val">
<input type="text" value="" placeholder="请输入银行卡号" class="val-ipt" v-model="bankInfo.bankno"
ref="address" />
</view>
</view>
<view class="bd-wrap flex">
<view class="bg-name">
开户行：
</view>
<view class="bg-val">
<input type="text" value="" placeholder="请输入开户行" class="val-ipt" v-model="bankInfo.bank"
ref="storenamae" />
</view>
</view>
<view class="bd-wrap flex">
<view class="bg-name">
所属支行：
</view>
<view class="bg-val">
<input type="text" value="" placeholder="请输入所属支行" class="val-ipt" v-model="bankInfo.subbranch"
ref="storenamae" />
</view>
</view>
</template>
<template v-if="current == 1">
<view class="bd-wrap flex">
<view class="bg-name">
真实姓名：
</view>
<view class="bg-val">
<input type="text" value="" placeholder="请输入真实姓名" class="val-ipt" v-model="aliInfo.fullname"
ref="name" />
</view>
</view>
<view class="bd-wrap flex">
<view class="bg-name">
支付宝账号：
</view>
<view class="bg-val">
<input type="text" value="" placeholder="请输入支付宝账号" class="val-ipt" v-model="aliInfo.alino"
ref="name" />
</view>
</view>
<view class="bd-wrap flex">
<view class="bg-name">
收款码：
</view>
<view class="bg-val">
<image v-if="!aliInfo.qr" src="../../static/img/add.png" mode="" @click="upimg(1)"></image>
<image v-else :src="aliInfo.qr" mode="" @click="upimg(1)"></image>
</view>
</view>
</template>
<template v-if="current == 2">
<view class="bd-wrap flex">
<view class="bg-name">
真实姓名：
</view>
<view class="bg-val">
<input type="text" value="" placeholder="请输入真实姓名" class="val-ipt" v-model="wxInfo.fullname"
ref="name" />
</view>
</view>
<view class="bd-wrap flex">
<view class="bg-name">
微信账号：
</view>
<view class="bg-val">
<input type="text" value="" placeholder="请输入微信账号" class="val-ipt" v-model="wxInfo.wxno"
ref="name" />
</view>
</view>
<view class="bd-wrap flex">
<view class="bg-name">
收款码：
</view>
<view class="bg-val">
<image v-if="!wxInfo.qr" src="../../static/img/add.png" mode="" @click="upimg(2)"></image>
<image v-else :src="wxInfo.qr" mode="" @click="upimg(2)"></image>
</view>
</view>
</template>
</view>
<view class="btm-btn" @click="bank">
{{current == 0? '保存银行卡信息': (current == 1? '保存支付宝信息': '保存微信信息')}}
</view>
</view>
</template>
<script>
import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
import {
enroll
} from '@/api/index.js'
import {
getLevelList,
bank,
bankInfo,
setWx,
setAli,
getAli,
getWx
} from '@/api/user.js'
import {
mapState,
mapMutations
} from 'vuex';
import { upload } from '@/api/order.js';
export default {
components: {
pickerAddress
},
data() {
return {
current: 0,
navList: [{
tit: '银行卡',
info: {},
}, {
tit: '支付宝',
info: {}
},
{
tit: '微信',
info: {}
}
],
type: 1,
aliInfo: {
fultname: '',
alino: '',
qr: '',
id: 0
},
wxInfo: {
fultname: '',
wxno: '',
qr: '',
id: 0
},
bankInfo: {
fullname: '',
phone: '',
bankno: '',
bank: '',
subbranch: '',
},
loading: false,
};
},
onLoad(opt) {
},
watch: {
current(n, o) {
}
},
onShow() {
this.getbankInfo()
},
onReachBottom() {
},
computed: {
...mapState('user', ['userInfo'])
},
methods: {
upimg(type) {
let that = this
upload({
file: ''
})
.then(e => {
console.log(e,'e')
if(type == 1) {
that.aliInfo.qr = e[0].url
}else {
that.wxInfo.qr = e[0].url
}
})
.catch(e => {});
},
changeNavT(index) {
if (index == this.current) {
return
}
this.current = index
},
getbankInfo() {
bankInfo().then(res => {
console.log(res);
if (res.data && res.data.id) {
this.bankInfo = res.data
}
})
getAli().then(res => {
if (res.data && res.data.id) {
this.aliInfo = res.data
}
})
getWx().then(res => {
if (res.data && res.data.id) {
this.wxInfo = res.data
}
})
},
// 选中城市切换
onCityClick({
data
}) {
// let address = this.addressData.address;
// address.province = data[0];
// address.city = data[1];
// address.district = data[2];
this.address = data.join('-');
},
bank() {
let that = this
let setInfo,qdata;
if (that.loading) {
return
}
if (that.current == 0) {
// 校验银行卡
setInfo = bank
if (that.bankInfo.fullname == '') {
return that.$api.msg('请输入您的姓名')
}
// if (that.bankInfo.phone == '') {
// return that.$api.msg('请输入手机号')
// }
if (that.bankInfo.bankno == '') {
return that.$api.msg('请输入银行卡号')
}
if (that.bankInfo.bank == '') {
return that.$api.msg('请输入银行')
}
if (that.bankInfo.subbranch == '') {
return that.$api.msg('请输入所属支行')
}
qdata = that.bankInfo
} else if (that.current == 1) {
//校验支付宝
setInfo = setAli
if (that.aliInfo.fullname == '') {
return that.$api.msg('请输入您的姓名')
}
if (that.aliInfo.wxno == '') {
return that.$api.msg('请输入支付宝账号')
}
if (that.aliInfo.qr == '') {
return that.$api.msg('请上传支付宝收款码')
}
qdata = that.aliInfo
} else if (that.current == 2) {
//校验微信
setInfo = setWx
if (that.wxInfo.fullname == '') {
return that.$api.msg('请输入您的姓名')
}
if (that.wxInfo.wxno == '') {
return that.$api.msg('请输入微信账号')
}
if (that.wxInfo.qr == '') {
return that.$api.msg('请上传微信收款码')
}
qdata = that.wxInfo
}
that.loading = true
setInfo(qdata).then(res => {
console.log(res);
uni.showToast({
title: '提交成功',
duration: 2000
});
}).catch(err => {
console.log('err');
that.loading = false
})
}
}
};
</script>
<style lang="scss" scoped>
.tab {
width: 690rpx;
margin: auto;
// height: 606rpx;
background: #FFFFFF;
border-radius: 10rpx;
}
.bd-wrap {
width: 690rpx;
// height: 100rpx;
padding: 20rpx 0;
background-color: #fff;
border-bottom: 1px solid #f2f2f2;
// line-height: 100rpx;
font-size: 32rpx;
position: relative;
.code {
position: absolute;
width: 100rpx;
height: 100rpx;
right: 10rpx;
color: #f64342;
font-size: 23rpx;
}
.bg-name {
width: 280rpx;
height: 100%;
padding-left: 20rpx;
}
.bg-val {
width: 430rpx;
height: 100%;
.val-ipt {
padding-top: 10rpx;
display: inline-block;
width: 100%;
height: 100%;
// background-color: #009100;
padding-left: 10rpx;
}
image {
width: 150rpx;
height: 150rpx;
}
}
}
.btm-btn {
margin: 60rpx auto 0;
font-size: 34rpx;
font-weight: 500;
color: #FFFFFF;
text-align: center;
line-height: 82rpx;
width: 560rpx;
height: 80rpx;
background: #FA2740;
border-radius: 40rpx;
}
.nav-list {
justify-content: space-around;
background-color: #fff;
font-weight: 500;
color: #333333;
.item {
padding: 28rpx 20rpx 16rpx;
}
.action {
color: #EC5A54;
border-bottom: 2px solid red;
}
}
</style>