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.
352 lines
8.8 KiB
352 lines
8.8 KiB
<template>
|
|
<view class="page">
|
|
<view class="tabs">
|
|
<view :class="activeIndex==item.id?'tabsItem active':'tabsItem'" @click="getPay(item)" v-for="item in list4" :key="item.id">
|
|
{{item.name}}
|
|
</view>
|
|
<view class="">
|
|
|
|
</view>
|
|
</view>
|
|
<view >
|
|
<view class="yhk" v-show="activeIndex==1">
|
|
<view class="list-input">
|
|
<view class="title">
|
|
<text>姓名</text>
|
|
</view>
|
|
<view class="content">
|
|
<input type="text" v-model="yhk.bank_realname" placeholder="请输入真实姓名">
|
|
</view>
|
|
</view>
|
|
<view class="list-input">
|
|
<view class="title">
|
|
<text>预留手机号</text>
|
|
</view>
|
|
<view class="content">
|
|
<input type="tel" v-model="yhk.bank_mobile" placeholder="请输入银行预留手机号">
|
|
</view>
|
|
</view>
|
|
<view class="list-input">
|
|
<view class="title">
|
|
<text>卡号</text>
|
|
</view>
|
|
<view class="content">
|
|
<input v-model="yhk.bank_no" placeholder="请输入银行卡号">
|
|
</view>
|
|
</view>
|
|
<view class="list-input">
|
|
<view class="title">
|
|
<text>开户行</text>
|
|
</view>
|
|
<view class="content">
|
|
<input v-model="yhk.bank_address" placeholder="请输入开户行信息">
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="zfb" v-show="activeIndex==2">
|
|
<u-upload
|
|
:fileList="zfbPic"
|
|
:previewFullImage="false"
|
|
@afterRead="afterRead"
|
|
width="176" height="176"
|
|
style="display: none;"
|
|
ref="uploadzfb"
|
|
name="1"
|
|
|
|
></u-upload>
|
|
<image :src="zfburl" v-if="zfburl" mode="aspectFit" @click="uploadZfb"></image>
|
|
<image src="/static/image/up_img.png" v-else mode="aspectFit" @click="uploadZfb"></image>
|
|
|
|
</view>
|
|
<view class="zfb" v-show="activeIndex==3">
|
|
<u-upload
|
|
:fileList="wxPic"
|
|
:previewFullImage="false"
|
|
@afterRead="afterRead"
|
|
width="176" height="176"
|
|
style="display: none;"
|
|
ref="uploadwx"
|
|
name="2"
|
|
|
|
></u-upload>
|
|
<image :src="wxurl" mode="aspectFit" v-if="wxurl" @click="uploadwx"></image>
|
|
<image src="/static/image/up_img.png" mode="aspectFit" v-else @click="uploadwx"></image>
|
|
<view class="mesInfo">
|
|
微信收款码，上传后将无法修改，请认真上传。
|
|
</view>
|
|
</view>
|
|
<view class="yhk">
|
|
<view class="list-input">
|
|
<view class="title">
|
|
<text>手机号</text>
|
|
</view>
|
|
<view class="content">
|
|
<input type="text" disabled v-model="mobileForm.simplephone" placeholder="请输入手机号">
|
|
</view>
|
|
</view>
|
|
<view class="list-input">
|
|
<view class="title">
|
|
<text>验证码</text>
|
|
</view>
|
|
<view class="content">
|
|
<input type="text" v-model="mobileForm.code" placeholder="请输入验证码">
|
|
</view>
|
|
<view class="yzmBtn" v-show="!codeSend" @click="getCode">
|
|
获取验证码
|
|
</view>
|
|
<view class="yzmBtn" v-show="codeSend">
|
|
{{timeNum}}s后重试
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="saveBtn" :style="issave?'opacity:1':'opacity:0.4'" @click="issave?submitSave():''">
|
|
|
|
{{activeIndex==1?'保存银行卡':activeIndex==2?'保存支付宝二维码':activeIndex==3?'保存微信二维码':''}}
|
|
</view>
|
|
<view style="color: #999;font-size: 30rpx;text-align: center;margin-top:30rpx;" @click="show=true">
|
|
请您仔细阅读并理解《委托寄售服务协议》
|
|
</view>
|
|
</view>
|
|
<u-popup :show="show" mode="bottom" @close="close" round="10" >
|
|
<view style="padding:24rpx;max-height:calc(60vh);overflow: auto;">
|
|
<u-parse :content="content" style="margin-top:45px;"></u-parse>
|
|
</view>
|
|
</u-popup>
|
|
<u-toast ref="uToast"></u-toast>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {getToken} from '@/common/auth.js'
|
|
import {updateUserInfo,smsSend,getUserInfo,smsCheck,privacyPolicy} from '@/common/api.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
show:false,
|
|
content:'',
|
|
activeIndex:1,
|
|
list4: [{
|
|
name: '银行卡',
|
|
id:1
|
|
}, {
|
|
name: '支付宝',
|
|
id:2
|
|
}, {
|
|
name: '微信',
|
|
id:3
|
|
}],
|
|
yhk:{
|
|
bank_realname:null,
|
|
bank_mobile:null,
|
|
bank_no:null,
|
|
bank_address:null,
|
|
},
|
|
codeSend:false,
|
|
timeNum:59,
|
|
timer:null,
|
|
fileList1:[],
|
|
fileList2:[],
|
|
zfbPic:[],
|
|
zfburl:'',
|
|
wxPic:[],
|
|
wxurl:'',
|
|
mobileForm:{
|
|
phone: '',
|
|
simplephone:'',
|
|
code: '',
|
|
},
|
|
issave:false,
|
|
|
|
};
|
|
},
|
|
onLoad(option) {
|
|
this.getUserInfoHandle()
|
|
this.getText()
|
|
},
|
|
methods:{
|
|
close() {
|
|
this.show = false
|
|
},
|
|
getText(){
|
|
privacyPolicy({id:4}).then(res=>{
|
|
this.content = res.data.content
|
|
})
|
|
},
|
|
//获取用户信息
|
|
getUserInfoHandle(){
|
|
getUserInfo().then(res=>{
|
|
this.mobileForm.phone =res.data.mobile
|
|
this.mobileForm.simplephone=this.mobileForm.phone.replace(/^(\d{3})\d{4}(\d{4})/,'$1****$2')
|
|
Object.keys(this.yhk).forEach(item=>{
|
|
this.yhk[item] = res.data[item]
|
|
})
|
|
this.zfburl = res.data.alipay_image;
|
|
this.wxurl = res.data.wechat_image;
|
|
})
|
|
},
|
|
getPay(item){
|
|
this.activeIndex = item.id;
|
|
clearInterval(this.timer);
|
|
this.mobileForm.code='';
|
|
this.timeNum = 59;
|
|
this.codeSend = false;
|
|
},
|
|
getCode(){
|
|
// let event = this.activeIndex==1?'bank':this.activeIndex==2?'alipay':'wechat'
|
|
if(!this.mobileForm.phone){
|
|
this.$refs.uToast.show({
|
|
message:'请输入手机号码'
|
|
})
|
|
return;
|
|
}
|
|
smsSend({mobile:this.mobileForm.phone,event:'notice'}).then(res=>{
|
|
if(res.code==1){
|
|
this.codeSend = true;
|
|
this.timer = setInterval(()=>{
|
|
if(this.timeNum>0){
|
|
this.timeNum--;
|
|
}else{
|
|
this.codeSend = false;
|
|
clearInterval(this.timer)
|
|
this.timer = null;
|
|
}
|
|
},1000)
|
|
}
|
|
})
|
|
},
|
|
submitSave(){
|
|
if(!this.mobileForm.code){
|
|
this.$refs.uToast.show({
|
|
message:'请输入验证码'
|
|
})
|
|
return;
|
|
}
|
|
|
|
smsCheck({mobile:this.mobileForm.phone,captcha:this.mobileForm.code,event:'notice'}).then(res=>{
|
|
|
|
if(res.code==1){
|
|
if(this.activeIndex==1){
|
|
updateUserInfo(this.yhk).then(res=>{
|
|
this.$refs.uToast.show({
|
|
message:'保存成功'
|
|
})
|
|
})
|
|
}else if(this.activeIndex==2){
|
|
updateUserInfo({alipay_image:this.zfburl}).then(res=>{
|
|
this.$refs.uToast.show({
|
|
message:'保存成功'
|
|
})
|
|
})
|
|
}else if(this.activeIndex==3){
|
|
updateUserInfo({wechat_image:this.wxurl}).then(res=>{
|
|
this.$refs.uToast.show({
|
|
message:'保存成功'
|
|
})
|
|
})
|
|
}
|
|
|
|
}
|
|
})
|
|
|
|
},
|
|
uploadZfb(){
|
|
this.$refs.uploadzfb.chooseFile()
|
|
},
|
|
uploadwx(){
|
|
this.$refs.uploadwx.chooseFile()
|
|
},
|
|
// 新增图片
|
|
async afterRead(event) {
|
|
console.log(event)
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|
let lists = [].concat(event.file)
|
|
let fileListLen = this[`fileList${event.name}`].length
|
|
lists.map((item) => {
|
|
this[`fileList${event.name}`].push({
|
|
...item,
|
|
status: 'uploading',
|
|
message: '上传中'
|
|
})
|
|
})
|
|
for (let i = 0; i < lists.length; i++) {
|
|
const result = await this.uploadFilePromise(lists[i].url)
|
|
if(event.name==1){
|
|
this.zfburl = JSON.parse(result).data.fullurl;
|
|
}else{
|
|
this.wxurl = JSON.parse(result).data.fullurl;
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
//上传照片
|
|
uploadFilePromise(url) {
|
|
console.log(url,"uu")
|
|
return new Promise((resolve, reject) => {
|
|
let a = uni.uploadFile({
|
|
url: this.baseUrl+'api/common/upload',
|
|
filePath: url,
|
|
name: 'file',
|
|
header:{
|
|
token:getToken()
|
|
},
|
|
formData: {
|
|
},
|
|
success: (res) => {
|
|
|
|
if(JSON.parse(res.data).code==1){
|
|
setTimeout(() => {
|
|
// this.finishImageList.push({url:JSON.parse(res.data).data.fullurl,path:JSON.parse(res.data).data.url})
|
|
resolve(res.data)
|
|
}, 1000)
|
|
}else{
|
|
uni.$u.toast(JSON.parse(res.data).msg)
|
|
|
|
resolve(res.data)
|
|
}
|
|
},
|
|
fail: (res) => {
|
|
console.log(res,"rrr")
|
|
}
|
|
});
|
|
})
|
|
},
|
|
},
|
|
destroyed() {
|
|
clearInterval(this.timer)
|
|
this.timer = null;
|
|
},
|
|
watch:{
|
|
activeIndex:{
|
|
handler(newValue, oldValue) {
|
|
if(newValue==1){
|
|
if(this.yhk.bank_realname && this.yhk.bank_mobile && this.yhk.bank_no && this.yhk.bank_address){
|
|
this.issave = true;
|
|
}else{
|
|
this.issave = false;
|
|
}
|
|
}else if(newValue==2){
|
|
this.issave = true;
|
|
}else if(newValue==3){
|
|
this.issave = true;
|
|
}
|
|
}
|
|
},
|
|
yhk:{
|
|
handler(newValue, oldValue) {
|
|
if(newValue.bank_realname && newValue.bank_mobile && newValue.bank_no && newValue.bank_address){
|
|
this.issave = true;
|
|
}else{
|
|
this.issave = false;
|
|
}
|
|
},
|
|
deep: true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import 'shoukuan.scss';
|
|
</style>
|
|
|