hezhiying/pages/shoukuan/shoukuan.vue

<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 type="tel" v-model="yhk.bank_no" placeholder="请输入银行卡号">
					</view>
				</view>
				<view class="list-input">
					<view class="title">
						<text>开户行</text>
					</view>
					<view class="content">
						<input type="tel" 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="" @click="uploadZfb"></image>
				<image src="/static/image/up_img.png" v-else mode="" @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="" v-if="wxurl"  @click="uploadwx"></image>
				<image src="/static/image/up_img.png" mode="" 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>