fourPayProject/51uni/homePages/Agent/AddAgent.vue

<template>
	<view class="content">
		<u-overlay :show="overlayShow"></u-overlay>
		<view class="container">
			<headers :titles="titles"><uni-icons type="arrow-left" color="#fff" size="22px"></uni-icons></headers>
			<view class="h-box">
				<view class="">代理商名称</view>
				<view class="right-input">
					<input type="text" v-model="agentName" placeholder="请输入代理商名称" />
				</view>

			</view>
			<view class="h-box">
				<view class="">法人姓名</view>
				<view class="right-input">
					<input type="text" v-model="corpName" placeholder="请输入法人姓名" />
				</view>
			</view>
			<view class="h-box">
				<view class="">法人手机号</view>
				<view class="right-input">
					<input type="number" v-model="corpPhone" placeholder="请输入法人手机号" />
				</view>
			</view>
			<view class="h-box">
				<view class="">结算卡号</view>
				<view class="right-input">
					<input type="text" v-model="accNo" placeholder="请输入结算卡号" />
				</view>
			</view>
			<view class="h-box">
				<view class="">账户名称</view>
				<view class="right-input">
					<input type="text" v-model="accName" placeholder="请输入账户名称" />
				</view>
			</view>
			<view class="h-box">
				<view class="">银行名称</view>
				<view class="d-s" @click="gobankList()">
					<view class="hui-size" v-if="this.bankName ">{{this.bankName}}</view>
					<view class="hui-size" v-else>请选择银行</view>
					<u-icon name="arrow-right" size="16"></u-icon>
				</view>
			</view>
			<view class="h-box">
				<view class="">预留手机号</view>
				<view class="right-input">
					<input type="number" v-model="mobile" placeholder="请输入预留手机号" />
				</view>
			</view>
			<view class="h-box">
				<view class="">员工工号</view>
				<view class="right-input">
					<input type="text" v-model="employeeNumber" placeholder="员工工号(非必填)" />
				</view>
			</view>
			<view class="bs-img">
				<view class="">
					<u-upload :fileList="fileList1" @afterRead="addInfoImg" @delete="deletePic" name="1" multiple
						:maxCount="1" width="160" height="80">
						<image src="/static/imgs/ghimg.png" mode="widthFix" style="width: 160px;height: 80px;"></image>
					</u-upload>
				</view>
				<view class="">
					<u-upload :fileList="fileList2" @afterRead="addInfoImg" @delete="deletePic" name="2" multiple
						:maxCount="1" width="160" height="80">
						<image src="/static/imgs/ghimg.png" mode="widthFix" style="width: 160px;height: 80px;"></image>
					</u-upload>
				</view>

			</view>
			<view class="bs-img">
				<view class="">
					<u-upload :fileList="fileList3" @afterRead="addInfoImg" @delete="deletePic" name="3" multiple
						:maxCount="1" width="160" height="80">
						<image src="/static/imgs/ghimg.png" mode="widthFix" style="width: 160px;height: 80px;"></image>
					</u-upload>
				</view>


			</view>
			<view class="bs-img">

			</view>

			<view class="annniu" @click="addAgent()">
				提交
			</view>
			<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
		</view>

	</view>
</template>

<script>
	import request from '../../utils/request.js'
	import headers from '../../components/header/headers.vue'
	import upload from '@/utils/upload.js'
	export default {
		data() {
			return {
				overlayShow: false,
				agentName: '',
				corpName: '',
				corpPhone: '',
				accNo: '',
				accName: '',
				bankName: '',
				mobile: '',
				employeeNumber: '',
				idCardZ: '',
				idCardF: '',
				idCardInPerson: '',
				titles: "添加代理商",
				fileList1: [],
				fileList2: [],
				fileList3: [],
				show: false,
				columns: [
					['银行', '银行', '银行']
				],

			}
		},
		onLoad(option) {
			this.bankName = option.bankName;
			this.objectId = option.objectId;
			uni.$on('bankIdzx', (res) => {
				this.bankName = res
				console.log('监听到了', res)
			})
		},
		components: {
			headers
		},
		methods: {
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)

			},
			async uploadFile(url, fileName, type) {
				uni.showLoading({
					title: '上传中'
				});
				this.overlayShow = true
				upload({
					url: 'app/base/upload',
					filePath: url,
					name: 'test'

				}).then((res) => {
					console.log(res, type);
					let that = this
					if (res.code == 0) {
						if (type == 1) {
							this.idCardZ = res.url
						} else if (type == 2) {
							this.idCardF = res.url
						} else if (type == 3) {
							this.idCardInPerson = res.url
						}

					}
				}).finally((res) => {
					this.overlayShow = false
					uni.hideLoading();
				})
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)

			},
			//银行卡信息
			async addInfoImg(event) {
				console.log('169169');
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,

					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFile(lists[i].url, lists[i].name, event.name)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			//新增代理商
			addAgent() {
				request({
					url: '/app/uaAgent/addtwoAgent',
					method: 'post',
					data: {
						agentName: this.agentName,
						corpName: this.corpName,
						corpPhone: this.corpPhone,
						accNo: this.accNo,
						accName: this.accName,
						bankName: this.bankName,
						mobile: this.mobile,
						employeeNumber: this.employeeNumber,
						idCardZ: this.idCardZ,
						idCardF: this.idCardF,
						idCardInPerson: this.idCardInPerson
					}
				}).then(res => {

					if (res.code == 0) {

						uni.navigateBack()
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			confirm() {
				this.show = false
			},
			cancel() {
				this.show = false
			},
			gobankList() {
				uni.navigateTo({
					url: '/homePages/Agent/bankList'
				})
			},
			goback() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #fff;
		height: 100vh;
	}

	.container {
		width: 100%;
		background: #fff;
		box-sizing: border-box;
		padding-top: 88px;
	}

	.h-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 15px;
		border-bottom: 1px solid #e3e3e3;
	}

	.d-s {
		display: flex;
		align-items: center;
	}

	.right-input {
		text-align: right;
	}

	.hui-size {
		color: #a3a3a3;
	}

	.bs-img {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 15px;

	}

	.annniu {
		width: 100%;
		height: 45px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #E4612E;
		color: white;
	}
</style>