tourism/uni_merchants_enter/pageA/enter/homestay.vue

<template>
	<view class='content'>
		<view class='wrap'>
			<u--form  ref="uForm">
				<u-form-item   labelWidth='120' labelPosition='top' label="身份证头像面">
					<u-upload height='208' width='320' :fileList="fileList4" @afterRead="afterRead($event,1)" @delete="deletePic" name="4" multiple
						:maxCount="1">
						<view class="bgc">
							<image class='circle' style='width:123rpx;height:123rpx;' src="../../static/image/enter/camera.png"  mode=""></image>
							<view>请上传头像面</view>
						</view>
						</u-upload>
				</u-form-item>
				<u-form-item   labelWidth='120' labelPosition='top' label="身份证国徽面">
					<u-upload  height='208' width='320' :fileList="fileList6" @afterRead="afterRead($event,2)" @delete="deletePic" name="6" multiple
						:maxCount="1">
						<view class="bgc1">
							<image class='circle' style='width:123rpx;height:123rpx;' src="../../static/image/enter/camera.png" mode=""></image>
							<view>请上传国徽面</view>
						</view>
					</u-upload>
				</u-form-item>
				<u-form-item  labelWidth='120' labelPosition='left' label="身份证号码">
					<u-input inputAlign='right' border='none' placeholder='请输入身份证号码' v-model="form.personNo" />
				</u-form-item>
				<uni-calendar
				   :insert="false"
				   :lunar="true" 
					ref="calendar"
				   :start-date="startDate"
				   @confirm="confirm"
				    />
					<u-form-item  labelWidth='150' labelPosition='left' label="姓名">
						<u-input inputAlign='right' border='none' placeholder='输入姓名' v-model="form.realname" />
					</u-form-item>
					<u-form-item  labelWidth='150' labelPosition='left' label="手机号">
						<u-input inputAlign='right' border='none' placeholder='输入手机号' v-model="form.phone" />
					</u-form-item>
					<u-form-item  labelWidth='150' labelPosition='left' label="验证码">
						<u-input inputAlign='right' border='none' placeholder='输入验证码' v-model="form.verifyCode" >
							<template slot="suffix">
								<u-code ref="uCode"
									@change="codeChange"
									seconds="60"
									changeText="X秒重新获取"
								></u-code>

								<view class='get_code' @click='getCode'>{{tips}}</view>
							</template>
						</u-input>
					</u-form-item>
				</u-form-item>
				<u-form-item>
					<view class="flex service align-center">
						<view @click='' :class='consentStatus?"icon_merchants_entergouxuan":"icon_merchants_enterweigouxuan"' class="iconfont_no"></view>
						我已阅读并同意
						<navigator
							url="/pageA/webview?can_share=false&url=https://liangxin.zthymaoyi.com/userAgreement.html"
							class="path" hover-class="navigator-hover">《民宿入驻协议》</navigator>的相关规定
					</view>
				</u-form-item>
			</u--form>
			<view class="footer">
				<button @click='submit' class="submit">提交</button>
			</view>
			<u-modal :show="isSubmit" :content='content' @confirm="$u.debounce(confirmSubmit, 500)" showCancelButton
				@cancel="isSubmit=false" @close="isSubmit=false" closeOnClickOverlay></u-modal>
		</view>
	</view>
</template>

<script>
	var that
	import uploadImage from '@/components/ossutil/uploadFile.js';
	export default {
		data() {
			return {
				form:{
					commonId:uni.getStorageSync("userInfo").id,
					type:"1",
				},
				consentStatus:false,
				tips:'发送验证码',
				startDate:'',
				isSubmit:false,
				fileList4:[],
				fileList6:[],
				content:'确定提交入驻信息',
			}
		},
		onLoad() {
			that = this
		},
		onShow(){
			var date = new Date().toISOString().slice(0, 10)
			this.startDate=date
		},
		methods: {
			codeChange(text) {
			    this.tips = text;
			},
			getCode() {
				if(!this.form.phone){
					uni.showToast({
						icon: "none",
						title: '请输入手机号再获取验证码！',
						duration: 2000
					});
					return
				}
			    if (this.$refs.uCode.canGetCode) {
			         // 模拟向后端请求验证码
			        uni.showLoading({
			        title: '正在获取验证码'
			        })
					this.$request.baseRequest('user', 'sendVerifyCode', {
						phone: this.form.phone
					}, failres => {
						uni.showToast({
							icon: "none",
							title: failres.errmsg,
							duration: 3000
						});
						uni.hideLoading()
					}).then(res => {
						
								
					})
			        setTimeout(() => {
			            uni.hideLoading();
			            // 这里此提示会被this.start()方法中的提示覆盖
			         
			            // 通知验证码组件内部开始倒计时
			            this.$refs.uCode.start();
			        }, 2000);
			    } else {
			        uni.showToast({
			        	icon: "success",
			        	title: '提交成功！',
			        	duration: 2000
			        });
			    }
			},
			submit(){
				this.isSubmit = true
			},
			confirmSubmit(){
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$request.baseRequest('admin.tourism.homestayInfo', 'add', {
					homestayInfo: JSON.stringify(this.form)
				}, failres => {
					uni.showToast({
						icon: "none",
						title: failres.errmsg,
						duration: 3000
					});
							
					uni.hideLoading()
				}).then(res => {
					this.isSubmit = false
					uni.showToast({
						icon: "success",
						title: '提交成功，请等待平台审核',
						duration: 2000
					});
					uni.navigateBack()
							
				})
			},
			// 删除图片
			deletePic(event,status) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event,status) {
				// 当设置 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,status)
					
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
					console.log(that.form, this[`fileList${event.name}`])
					
				}
			},
			uploadFilePromise(res,status) {
				return new Promise((resolve, reject) => {
					uploadImage(res, 'cardImages/',
						result => {
							if(status==1){
								that.form.personImageFront = result
									uni.showLoading({
										title: '加载中',
										mask: true
									})
									that.$request.baseRequest('admin.tourism.productManagement', 'personShibie', {
										personImageFront: that.form.personImageFront
									}, failres => {
										uni.showToast({
											icon: "none",
											title: failres.errmsg,
											duration: 3000
										});	
										uni.hideLoading()
									}).then(res => {
										console.log(res)
										uni.hideLoading()
										that.form.personNo=res.data.recPersonNo
										console.log(that.form)
										that.$forceUpdate()	
									})
							}else if(status==2){
								that.form.personImageBack = result
							}
							resolve(res)
						}
					)
				})
			},
		}
	}
</script>

<style lang='scss' scoped>
 .wrap{
	 padding:20rpx;
 }
 .icon_merchants_enterjian1{
	 margin-left:10rpx;
	 font-size:50rpx;
 }
 .add_label,.get_code{

	background: #5F7DE9;
	color: #fff;
	padding: 10rpx 20rpx;
	border-radius: 10rpx;
	font-size: 26rpx;
 }
 .circle{
 	margin:110rpx 0 20rpx 0;
 }
 // 人像
 .bgc,.bgc1{
 	 width:672rpx;
 	 height:417rpx;
 	 background:url('https://taohaoliang.oss-cn-beijing.aliyuncs.com/pcfiles/card2.png') no-repeat center;
 	 background-size: 100%;
 	 text-align:center;
 }
 // 国徽
 .bgc1{
 	 background:url('https://taohaoliang.oss-cn-beijing.aliyuncs.com/pcfiles/card.png') no-repeat center;
 	 background-size: 100%;
 }
 .path {
 	color: #2772FB;
 
 }
 .icon_merchants_enterweigouxuan{
	 color:#999;
 }
 .icon_merchants_entergouxuan{
	 color:#5F7DE9;
 }
</style>