xwfb/pages/purchase/upload.vue

<template>
	<view class="content">
		
		
		<view class="tit">
			上传支付凭证
		</view>
		<view class="up-wrap" @click="imgsub('upimg')">
			<image :src="upimg" mode="" v-if="upimg"></image>
			<image v-else src="../../static/img/upimg.png" mode=""></image>
		</view>
		<view class="btn" @click="evaluationUpload">提交审核</view>
		<view class=" flex btn" style="justify-content: center;">
			<!-- <view class="zftype">
				支付方式：
			</view> -->
			<picker mode="selector" :range="chooseList" @change="bangTypeChange" style="width: 100%;">
				<view>支付方式：{{type || '请选择支付方式'}}</view>
			</picker>
		</view>
		<view class="base-info" v-if="type !== ''">
			<view class="base-item flex" v-if="type == '微信'">
				<view class="item-name">微信号</view>
				<input type="text" value="" class="item-val" placeholder="" v-model="toUser.wx_no" />
			</view>
			<view class="base-item flex" v-if="type == '微信'">
				<view class="item-name">收款码</view>
				<view class="img-wrap">
					<image :src="toUser.wx_qr" mode=""></image>
				</view>
				
			</view>
			<view class="base-item flex" v-if="type == '支付宝'">
				<view class="item-name">支付宝姓名</view>
				<input type="text" value="" class="item-val" placeholder="" v-model="toUser.alipay_name" disabled/>
			</view>
			<view class="base-item flex" v-if="type == '支付宝'">
				<view class="item-name">支付宝账号</view>
				<input type="text" value="" class="item-val" placeholder="" v-model="toUser.alipay_no" disabled/>
			</view>
			<view class="base-item flex" v-if="type=='银行卡'">
				<view class="item-name">开户行</view>
				<input type="text" value="" class="item-val" placeholder="" v-model="toUser.account_Bank" disabled/>
			</view>
			<view class="base-item flex" v-if="type=='银行卡'">
				<view class="item-name">所属支行</view>
				<input type="text" value="" class="item-val" placeholder="" v-model="toUser.bank_branch" disabled/>
			</view>
			<view class="base-item flex" v-if="type=='银行卡'">
				<view class="item-name">开户行姓名</view>
				<input type="text" value="" class="item-val" placeholder="" v-model="toUser.bank_name" disabled/>
			</view>
			<view class="base-item flex" v-if="type=='银行卡'">
				<view class="item-name">银行卡账号</view>
				<input type="text" value="" class="item-val" placeholder="" v-model="toUser.bank_card" disabled/>
			</view>
		</view>
	</view>
</template>

<script>
	import { upload } from '@/api/user.js';
	import { evaluationUpload } from '@/api/package.js'
	
	export default {
		data() {
			return {
				upimg: '',
				type: '',
				toUser: {},
				chooseList: ['微信','支付宝','银行卡'],
				chooseId: ''
			}
		},
		onLoad(opt) {
			console.log(opt)
			if(opt.id) {
				this.chooseId = opt.id
				console.log(this.chooseId,'this.chooseId')
			}
			this.toUser = JSON.parse(opt.paytype)
			console.log(this.toUser,'dd')
		},
		methods: {
			bangTypeChange(e) {
				
				this.type = this.chooseList[e.detail.value]
			},
			imgsub(text) {
				console.log('imgsub');
				upload({
					filename: ''
				}).then(data => {
					// this.upimg = data[0].url;
					this.$set(this,text,data[0].url)
				});
			},
			//提交审核
			evaluationUpload() {
				let obj = this
				if(obj.type == '') {
					obj.$api.msg('请选择支付方式')
					return 
				}
				if(obj.upimg == '') {
					obj.$api.msg('请选择上传的凭证')
					return 
				}
				evaluationUpload({
					pay_evaluation: obj.upimg,
					id: obj.chooseId
				}).then( res => {
					uni.showToast({
						title:'提交成功',
						duration:2000
					});
					obj.$api.prePage().refresh();
					setTimeout(() => {
						uni.navigateBack({
							
						})
					},2000)
					// this.page = 1
					// this.list = []
					// this.loadingType = 'more'
					// this.loadData()
					console.log(res,'上传凭证+++++')
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tit {
		padding: 30rpx 25rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #101010;
	}
	
	.up-wrap {
		margin:auto;
		width: 225rpx;
		height: 225rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
	
		image {
			width: 225rpx;
			height: 225rpx;
			border-radius: 10rpx;
		}
	}
	.btn {
		margin: 70rpx auto 0;
		width: 702rpx;
		line-height: 84rpx;
		background: linear-gradient(30deg, #FF4C4C, #FE6238);
		border-radius: 10rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
	}
	.choose-wrap {
		justify-content: flex-start;
		padding-left: 30rpx;
		line-height: 100rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		// color: #333333;
	}
	.base-info {
		margin: auto;
		width: 702rpx;
		// height: 1106px;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 20rpx;
	
		.base-item {
			border: 1px solid #eee;
			line-height: 100rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			padding-left: 25rpx;
			.img-wrap {
					width: 478rpx;
				image {
					width: 200rpx;
					height: 200rpx;
				}
			}
			
			.avatar {
				margin: auto;
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
				// background-color: #aaa;
				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 50%;
				}
			}
			.item-name {
				font-weight: bold;
			}
			.item-val {
				display: block;
				line-height: 100rpx;
				height: 100rpx;
				width: 478rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000;
			}
		}
	
	}
</style>