CBB3/pages/user/bank/save/alipay.vue

<style lang="scss">
	.app-body{
		padding: 10px 0;
		.input-form {
			background: #fff;
			.item{
				padding: 35rpx 20rpx;
				border-bottom: 1px solid #f1f1f1;
				.label{
					width: 86px;
					font-weight: 400;
					color: #333;
				}
				.value{
					width: calc(100% - 86px);
				}
			}
			
		}
	}
	.input-placeholder {
	    color: #999;
	}
	
	.sbtn{
		font-size: 14px;
		color: #DB292B;
		margin-right: 10rpx;
	}
	.no-sbtn{
		font-size: 14px;
		color: #999999;
		margin-right: 10rpx;
	}
	
	.foot{
		padding: 40rpx 60rpx;
	}
	
	.btn{
		background: #DB292B;
		border-radius: 60rpx;
		text-align: center;
		font-weight: bold;
		font-size: 28rpx;
		padding: 30rpx 0;
		color: #FAFAFA;
	}
	
	.img{
		width: 160rpx;
		height: 160rpx;
	}
</style>
<template>
	<view class="app-body">
		
		<view class="input-form">
			<view class="item fx-r fx-bc">
				<view class="label">真实姓名</view>
				<view class="value">
					<input type="text" v-model="form.name"  placeholder-class="input-placeholder" placeholder="请输入真实姓名" />
				</view>
			</view>
			
			<view class="item fx-r fx-bc">
				<view class="label">支付宝账号</view>
				<view class="value">
					<input type="text" v-model="form.payment" placeholder-class="input-placeholder"  placeholder="请输入支付宝账号" />
				</view>
			</view>
			
			
			
			
			<view class="item fx-r fx-bc">
				<view class="label">验证码</view>
				<view class="value fx-r ">
					<input type="number" v-model="form.verify"  placeholder-class="input-placeholder" style="width: 186px;" placeholder="请输入验证码" />
					<view class="fx-g1"></view>
					<view v-if="verifyCount <= 0" class="sbtn" @tap="getVcode">验证码</view>
					<view v-else class="no-sbtn">{{ verifyCount }} S</view>
				</view>
			</view>
			
			<view class="item fx-r fx-bc">
				<view class="label">收款码</view>
				<view class="value" @tap="upImg" >
					<image src="/static/img/upimg.png" v-if="form.img == ''" class="img"></image>
					<image  :src="form.img" v-else mode="aspectFill" class="img"></image>
				</view>
			</view>
			
		</view>
		
		
		<view class="foot">
			<view class="btn ihover" @tap="tapSubmit">保存</view>
		</view>
		
	</view>
	
	
</template>


<script>
	import {mapState,mapMutations} from 'vuex';
	export default {
		computed: mapState(['user']),
		data() {
			return {
				form : {
					img : "",
					name : ""
				},
				verifyCount : 0,
				type : 2
			}
		},
		onLoad(options) {
			this.getData();
		},
		methods: {
		
			getData:function(e){
				uni.showLoading({ title: '获取数据中..' });
				var that = this;
				this
					.request
					.post("getBankItem",{type : this.type})
					.then(res => {
					uni.hideLoading();	
					if(res.code == 200) {
						if(res.data != null) this.form = res.data;
					} else {
						that.utils.Tip(res.msg);
					}
				}).catch(res => {
					uni.hideLoading();
					that.utils.Tip(res.msg);
				});
			},
			
			getVcode: function() {
				if (this.verifyCount > 0) return;
				uni.showLoading({ title: "获取中..."});
				this
					.request
					.post("userYzm",{type : "bank"})
					.then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							if (res.data.status == 2) {
								this.utils.CountDowm(res.data.time, (e, s) => {
									this.verifyCount = e;
								});
							}
			
							if (res.data.status == 1) {
								this.utils.CountDowm(120, (e, s) => {
									this.verifyCount = e;
								});
							}
						} else {
							uni.showToast({
								title: res.msg,
								mask: true,
								icon: 'none'
							});
						}
					})
					.catch(err => {
						uni.showToast({
							title: '获取失败',
							mask: true,
							icon: 'none'
						});
						uni.hideLoading();
					});
			},
			
			upImg(){
				// #ifdef APP-PLUS
					this.$store.dispatch('permission/requestPermissions', 'WRITE_EXTERNAL_STORAGE').then(res => {
						if(res !== 1) return;
						this.upImgS();
					});   
					return;
				// #endif
				this.upImgS();
			},
			
			
			upImgS() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (res) => {
						let img = res.tempFilePaths[0];
						this.utils.loadIng();
						this
							.request
							.post("qiniu")
							.then(res=>{
								uni.uploadFile({
									url: 'https://up-z0.qiniup.com', 
									filePath: img,
									name: 'file',
									formData: {
										'key': res.data.mk_str,
										'token': res.data.token
									},
									success: (uploadFileRes) => {
										uni.hideLoading();
										if(uploadFileRes.statusCode == 200) {
											this.form.img = res.data.url;
										} else {
											this.utils.Tip("上传失败，请重新尝试," + JSON.stringify(uploadFileRes));
										}
										
									},
									fail:()=>{
										uni.hideLoading();
										this.utils.Tip("上传失败，请重新尝试");
									}
								});
							})
							.catch(err=>{
								uni.hideLoading();
								this.utils.Tip("请重新上传图片");
							});	
					}
				});
			},
			
			tapSubmit:function(e){
				
				if(this.form.name == ""){
					uni.showToast({
						title:"请输入真实姓名",icon:"none",mask:true
					})
					return;
				}
				
				if(this.form.payment == ""){
					uni.showToast({
						title:"请输入支付宝账号",icon:"none",mask:true
					})
					return;
				}
				
					
				if (this.form.verify == '') {
					uni.showToast({
						title: '请输入验证码',
						mask: true,
						icon: 'none'
					});
					return;
				}	
				
				uni.showLoading({ title: '提交数据中..' });
				this.request
				.post("bankSave",{
					...this.form,
					type : this.type
				})
				.then(res=>{
					uni.hideLoading();
					if(res.code == 200) {
						uni.navigateBack();
					} else {
						uni.showToast({ title:res.msg,icon:"none",mask:true});
					}
				})
				.catch(res=>{
					uni.hideLoading();
					uni.showModal({title: '系统提示',content: '加载失败，重新点击尝试！',showCancel: false});
				});
			}
		}
	}
</script>