fourPayProject/51pay-uni/homePages/enterpriseMerchant/BusinessPhotos.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="wrap-box">
				<view class="img_">
					<u-upload :fileList="fileList1" @afterRead="addInfoImg" @delete="deletePic" name="1" multiple
						:maxCount="1">
						<image src="/static/imgs/yhkzm.png" mode="widthFix" style="width: 150px;height: 100px;">
						</image>
					</u-upload>
					<view class="size">店铺门头法人合照</view>
				</view>
				<view class="img_">
					<u-upload :fileList="fileList2" @afterRead="addInfoImg" @delete="deletePic" name="2" multiple
						:maxCount="1">
						<image src="/static/imgs/yhkzm.png" mode="widthFix" style="width: 150px;height: 100px;">
						</image>
					</u-upload>
					<view class="size">租赁合同或产证文件(可选)</view>
				</view>
				<view class="img_">
					<u-upload :fileList="fileList3" @afterRead="addInfoImg" @delete="deletePic" name="3" multiple
						:maxCount="1">
						<image src="/static/imgs/yhkzm.png" mode="widthFix" style="width: 150px;height: 100px;">
						</image>
					</u-upload>
					<view class="size">店铺环境照</view>
				</view>
			</view>
			<view class="button_p" @click="nextStep()">
				<view class="">提交认证</view>
			</view>
		</view>

	</view>
</template>

<script>
	import headers from '../../components/header/headers.vue'
	import request from '../../utils/request.js'
	import upload from '@/utils/upload.js'
	export default {
		data() {
			return {
				overlayShow: false,
				titles: "营业场所照片",
				msg: "1",
				dataList: [],
				fileList1: [],
				fileList2: [],
				fileList3: [],
				value1: '',
				show: false,
				status: 'loading',
				select: '',
				formData: {
					areaType: "7", //商户类型 7 小微 写死
					openAccEffectDate: "",
					openAccExpDate: "",
					legalPerson: {
						address: "",
						backPic: "",
						backPicUrl: "",
						certEffectDate: "",
						certExaDate: "",
						certNo: "",
						certType: "11",
						certTypeName: "身份证",
						city: "",
						cityName: "",
						county: "",
						countyName: "",
						email: "",
						facePic: "",
						facePicUrl: "",
						firstCareerName: "",
						firstCareerNo: "",
						gender: "1",
						mobileNo: "",
						nation: "CHN",
						nationLabel: "中国",
						participantName: "",
						province: "",
						provinceName: "",
						secondCareerName: "",
						secondCareerNo: "",
						sort: 0,
						thirdCareerName: "",
						thirdCareerNo: ""
					},
					openAccount: "",
					openAccountUrl: "",
					rate: "0.25",
					steps: "4" //步骤当前页面写死第一页
				},
				merchantId: null


			}
		},
		onLoad(options) {
			if (options && options.merchantId) {
				this.merchantId = options.merchantId
			}
			this.getMerchantInfo()
		},

		components: {
			headers,
		},
		methods: {
			async getMerchantInfo() {
				let ress = await request({
					url: 'app/report/newBaseInfo',
					method: 'post',
					data: {
						objectId: this.merchantId
					}
				})
				this.formData = ress.data
				this.formData.steps = '4'
				//处理图片问题
				if (this.formData.shopFrontPhotoUrl) {
					this.fileList1 = []
					let tempImg1 = {
						url: this.formData.shopFrontPhotoUrl,
					}
					this.fileList1.push(tempImg1)
				}
				if (this.formData.contractPhotoUrl) {
					this.fileList2 = []
					let tempImg2 = {
						url: this.formData.contractPhotoUrl
					}
					this.fileList2.push(tempImg2)
				}
				if (this.formData.storeEnvironmentPhotoUrl) {
					this.fileList3 = []
					let tempImg3 = {
						url: this.formData.storeEnvironmentPhotoUrl
					}
					this.fileList3.push(tempImg3)
				}
			},
			async uploadFile(url, fileName, type) {
				uni.showLoading({
					title: '上传中'
				});
				this.overlayShow = true
				upload({
					url: 'app/report/fileUplod',
					filePath: url,
					formData: {
						fileName: fileName,
						type: null,
					}

				}).then((res) => {
					let that = this
					if (res.code == 0) {
						if (type == 1) {

							this.formData.shopFrontPhoto = res.data.externalKey
							this.formData.shopFrontPhotoUrl = res.data.imgUrl

						} else if (type == 2) {
							//银行卡反面
							this.formData.contractPhoto = res.data.externalKey
							this.formData.contractPhotoUrl = res.data.imgUrl
						} else if (type == 3) {
							//银行卡反面
							this.formData.storeEnvironmentPhoto = res.data.externalKey
							this.formData.storeEnvironmentPhotoUrl = res.data.imgUrl
						}

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

			},
			//银行卡信息
			async addInfoImg(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,

					})
				})
				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++
				}

			},
			async nextStep() {
				let res = await request({
					url: 'app/report/newBaseInfoSaveOrUpdate',
					method: 'post',
					data: this.formData
				})
				if (res.code == 0) {

					uni.navigateTo({
						url: '/homePages/enterpriseMerchant/confirm?merchantId=' + res.merchantId
					})

				}

			},
			goback() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #f4f5f6;

		height: 100vh;
	}

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

	.button_p {
		width: 100%;
		background: #E4612E;
		height: 55px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		border-radius: 4px;
		position: fixed;
		bottom: 0px;
	}


	.wrap-box {
		width: 100%;
		flex-wrap: wrap;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 15px;
	}

	.img_ {
		width: 48%;
		border-radius: 8px;
		background: #fff;
		box-sizing: border-box;
		padding: 10px;
		margin-bottom: 15px;
	}

	.size {
		margin: 10px 0px;
		width: 100%;
		text-align: center;
		font-size: 12px;
	}
</style>