huazhiyu/pages/warehouse/pay.vue

<template>
	<view class="page">
		<view class="priceNum">
			<view class="num">
				<view class="flag">￥</view>
				<view class="text">1.00</view>
			</view>
			<image src="../../static/image/copy.png" mode="widthFix"></image>
		</view>
		<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) {
				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">
.page{
	min-height:calc(100vh - 45px);
	background-color: #f5f5f5;
	padding:24rpx;
	.priceNum{
		padding:30rpx;
		justify-content: center;
		width:100%;
		background-color: #ffffff;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		color:$base;
		margin-bottom:20rpx;
		.num{
			display: flex;
			align-items: center;
			.text{
				font-size: 40rpx;
			}
		}
		image{
			margin-left:10rpx;
			width:30rpx;
			height:auto;
		}
	}
	.tabs{
		height: 80rpx;
		background-color: rgb(35, 96, 48);
		padding: 6rpx;
		border-radius: 5px;
		display: flex;
		.tabsItem{
			flex:1;
			text-align: center;
			line-height: 70rpx;
			font-size: 26rpx;
			color: #ffffff;
		}
		.active{
			background-color: #fff;
			font-size: 30rpx;
			font-weight: bold;
			border-radius: 5px;
			color: rgb(35, 96, 48);
		}
	}
	.yhk{
		width: 100%;
		background-color: #FFFFFF;
		margin-top:20rpx;
		border-radius: 10px;
		.list-input{
			display: flex;
			align-items: center;
			padding: 0 4%;
			height: 100rpx;
			border-bottom: 2rpx solid #f6f6f6;
			.title{
				display: flex;
				align-items: center;
				width: 30%;
				height: 100%;
				text{
					 color: #236030;
					font-size: 26rpx;
				}
			}
			.content{
				display: flex;
				align-items: center;
				width: 70%;
				height: 100%;
				input{
					width: 100%;
					height: 100%;
					font-size: 26rpx;
					color: #222222;
				}
			}
		}
		.yzmBtn{
			background: rgb(35, 96, 48);
			color: rgb(255, 255, 255);
			margin-bottom: 5px;
			padding: 0px;
			width: 126px;
			overflow: hidden;
			font-size: 14px;
			height: 38px;
			line-height: 38px;
			color: #fff;
			text-align: center;
			border-radius:10rpx;
		}
		
	}
	.saveBtn{
		background: rgb(35, 96, 48);
		color: rgb(255, 255, 255);
		border: 1px solid rgb(35, 96, 48);
		overflow: hidden;
		font-size: 28rpx;
		height: 44px;
		line-height: 44px;
		text-align: center;
		border-radius: 10rpx;
		margin-top:50rpx;
	}
	.input-info{
	  padding: 0 6%;
	  .info{
	    display: flex;
	    align-items:center;
	    justify-content: space-between;
	    width: 100%;
	    height: 100rpx;
	    border-bottom: 2rpx solid #f6f6f6;
	    input{
	      width: 70%;
	      height: 100%;
	      font-size: 26rpx;
	      color: #222222;
	    }
	    .more{
	      display: flex;
	      align-items: center;
	      justify-content: flex-end;
	      width: 30%;
	      height: 100%;
	      .iconfont{
	        font-size: 34rpx;
	      }
	      .mo{
	        font-size: 26rpx;
	        padding-left: 20rpx;
	        margin-left: 10rpx;
	        border-left: 2rpx solid #EEEEEE;
	      }
	    }
	  }
	}
}
.zfb{
	text-align: center;
	image{
		width:200rpx;
		height:200rpx;
		margin:100rpx auto;
	}
	.mesInfo{
		margin-top: 26rpx;
		font-size: 26rpx;
		color: #999;
	}
}
</style>