tourism/uni_merchants_enter/pageA/enter/hotel.vue

<template>
	<view class='content'>
		<view class='wrap'>
			<u--form  ref="uForm">
				<u-form-item labelWidth='80' labelPosition='top' label="营业执照">
					<u-upload height='208' width='320' :fileList="fileList2" @afterRead="afterRead($event,1)" @delete="deletePic" name="2" multiple
						:maxCount="1">
						<image style='width:680rpx;height:417rpx;' src="../../static/image/enter/yingyezhizhao.png" mode=""></image>
					</u-upload>
				</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.hotelName" />
					</u-form-item>
					<u-form-item labelWidth='80' labelPosition='left' @click='placeSelect(),hideKeyboard()' label="店铺位置">
						<view style='text-align:right;' v-if="form.province">{{ form.province }}{{ form.city }}{{ form.area }}</view>
						<view style='text-align:right;' v-else>
							<text style='text-align:right;'>选择位置 </text>
							<image src="@/static/image/yjt.png" mode=""
								style="margin-left:10rpx;width:12rpx;height: 21rpx;"></image>
						</view>
					</u-form-item>
					<u-form-item labelWidth='80' labelPosition='left' label="详细地址">
						<u-input inputAlign='right' maxlength="15" border='none' placeholder='输入详细地址，不超过15个字' v-model="form.detailedAddress" />
					</u-form-item>
					<u-form-item  labelWidth='150' labelPosition='left' label="法人姓名">
						<u-input inputAlign='right' border='none' placeholder='输入法人姓名' v-model="form.legalName" />
					</u-form-item>
					<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  labelWidth='150' labelPosition='left' label="酒店座机(选填)">
					<u-input inputAlign='right' border='none' placeholder='输入座机号' v-model="form.landlinePhone" />
				</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:"2",
				},
				consentStatus:false,
				tips:'发送验证码',
				startDate:'',
				isSubmit:false,
				fileList2:[],
				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
			},
			placeSelect() {
				uni.chooseLocation({
					success: function(res) {
						console.log(res);
						that.form.location = res.latitude + ',' + res.longitude
						let _address = that.$helper.formatLocation(res.address)
						console.log(_address)
						that.form.province = _address.Province
						that.form.city = _address.City
						that.form.area = _address.Country
						that.form.detailedAddress = _address.Village
						that.$forceUpdate()
					}
				});
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			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.businessLicense = 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;
 }
 .path {
 	color: #2772FB;
 
 }
 .icon_merchants_enterweigouxuan{
	 color:#999;
 }
 .icon_merchants_entergouxuan{
	 color:#5F7DE9;
 }
</style>