tourism/uni_applet/pageA/enter/cateringindustry.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($event,1)" name="2" multiple
						:maxCount="1">
						<image style='width:594rpx;height:378rpx;' src="../../static/image/enter/yingyezhizhao.png" mode=""></image>
					</u-upload>
				</u-form-item>
				<u-form-item labelWidth='80' labelPosition='top' label="经营许可证">
					<u-upload height='208' width='320' :fileList="fileList3" @afterRead="afterRead($event,2)" @delete="deletePic($event,2)" name="3" multiple
						:maxCount="1">
						<image style='width:594rpx;height:378rpx;' src="../../static/image/enter/jingyingxukezheng.png" mode=""></image>
					</u-upload>
				</u-form-item>
				<u-form-item  labelWidth='150' labelPosition='left' label="经营许可证有效期">
					<view style='text-align:right;' @click='openjyxkz'>{{form.operateCertificateDate?form.operateCertificateDate:'选择日期'}}<image src="@/static/image/yjt.png" mode=""
								style="margin-left:10rpx;width:12rpx;height: 21rpx;"></image></view>
				</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.shopNames" />
					</u-form-item>
					<u-form-item  labelWidth='150' labelPosition='left' label="经营者">
						<u-input inputAlign='right' border='none' placeholder='输入经营者姓名' v-model="form.operater" />
					</u-form-item>
					<u-form-item  labelWidth='150' labelPosition='left' label="经营者手机号">
						<u-input inputAlign='right' maxlength="15" border='none' placeholder='输入经营者手机号' v-model="form.operaterPhone" />
					</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  labelWidth='150' labelPosition='left' label="业务联系人(选填)">
						<u-input inputAlign='right' border='none' placeholder='输入联系人姓名' v-model="form.contacts" />
					</u-form-item>
					<u-form-item  labelWidth='150' labelPosition='left' label="业务联系电话(选填)">
						<u-input inputAlign='right' maxlength="15" border='none' placeholder='输入联系电话' v-model="form.contactsPhone" />
					</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="营业时间">
						<view style='text-align:right;' @click='selectTime'>{{form.timesection}}<image src="@/static/image/yjt.png" mode=""
								style="margin-left:10rpx;width:12rpx;height: 21rpx;"></image></view>
					</u-form-item>
					<smh-time-range :is-under='show' :time="['18','0','42']" @confrim="confrim" @cancel="cancel"></smh-time-range>
					<!-- label -->
					<view class='flex justify-space-between align-item-center'>
						<view>标签（2-4个，最多5个字）</view> 
						<view class='add_label' @click='addLabel'>新增</view>
					</view>
					<view style='flex-wrap: wrap;' class='flex'>
						<view style='margin:10rpx;width:47%;' class='flex align-item-center' v-for='item in labelList'>
							<u-input inputAlign='right' placeholder='输入标签文字' v-model="item.value" />
							<view class="iconfont_no icon_merchants_enterjianshao"></view>
						</view>
					</view>
					
				<u-form-item labelWidth='240' labelPosition='top' label="门面及门头照片(1张,店名文字清晰)">
					<u-upload :fileList="fileList4" @afterRead="afterRead($event,3)" @delete="deletePic($event,3)" name="4" multiple
						:maxCount="1">
						
					</u-upload>
				</u-form-item>
				<u-form-item labelWidth='120' labelPosition='top' label="室内照片(1-6张)">
					<u-upload :fileList="fileList5" @afterRead="afterRead($event,4)" @delete="deletePic($event,4)" name="5" multiple
						:maxCount="6">
						
					</u-upload>
				</u-form-item>
			</u--form>
			<view class="mercharts_footer">
				<button @click='submit' class="submit">提交</button>
			</view>
		</view>
		<u-modal :show="isSubmit" :content='content' @confirm="$u.debounce(confirmSubmit, 500)" showCancelButton
			@cancel="isSubmit=false" @close="isSubmit=false" closeOnClickOverlay></u-modal>
	</view>
</template>

<script>
	var that
	
	import uploadImage from '@/components/ossutil/uploadFile.js';
	import uniCalendar from '@/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue'
	export default {
		components: {
			"uniCalendar": uniCalendar
		},
		data() {
			return {
				content:'确定提交入驻信息？',
				isSubmit:false,
				form:{
					commonId:uni.getStorageSync("userInfo").id,
					mainBody:'商铺',
					lookFlag:0,
					startDate:'',
					city: '',
					area: '',
					province: '',
					location: '',
					detailedAddress: '',
					businessLicense:'',
					operateCertificate:'',
					coverImage:'',
					indoorImage:'',
					timesection:'09:00~21:00',
					startDate:'09:00',
					endDate:'21:00',
					operateCertificateDate:'',
				},
				indoorImageArray:[],
				tips:'发送验证码',
				startDate:'',
				show:false,
				labelList:[{value:''},{value:''}],
				fileList2:[],
				fileList3:[],
				fileList4:[],
				fileList5:[],
				
			}
		},
		onLoad() {
			that = this
		},
		onShow(){
			var date = new Date().toISOString().slice(0, 10)
			this.startDate=date
			console.log(date)
			
		},
		methods: {
			submit(){
				if(this.labelList.length>0){
					var arr=[]
					for(var i=0;i<this.labelList.length;i++){
						if(!this.labelList[i].value){
							uni.showToast({
								icon: "none",
								title: '标签请输入内容！',
								duration: 3000
							});
							return
						}
						if(this.labelList[i].value.length>5){
							uni.showToast({
								icon: "none",
								title: '标签最多5个字！',
								duration: 3000
							});
							return
						}
						arr.push(this.labelList[i].value)
					}
					this.form.label=arr.toString()
				}
				uni.showModal({
						title: '提示',
						content: '确定提交入驻信息？',
						success (res) {
						    if (res.confirm) {
								that.$u.debounce(confirmSubmit, 500)
						    } else if (res.cancel) {
						      console.log('用户点击取消')
						    }
						  }
					})
			},
			confirmSubmit() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$request.baseRequest('admin.tourism.foodInfo', 'add', {
					foodInfo: 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
					});
					that.indoorImageArray=[]
					uni.navigateBack()
			
				})
			},
			concel(e){
				this.show=false
				console.log(e)
			},
			confrim(e){
				console.log(e)
				this.show=false
				this.form.timesection=e.time
				this.form.startDate=e.start
				this.form.endDate=e.end
			},
			selectTime(){
				this.show=true
			},
			addLabel(){
				if(this.labelList.length>=4){
					uni.showToast({
						icon: "success",
						title: '最多4个标签！',
						duration: 2000
					});
					return
				}
				this.labelList.push({value:''})
			},
			codeChange(text) {
			    this.tips = text;
			},
			getCode() {
				if(!this.form.operaterPhone){
					uni.showToast({
						icon: "none",
						title: '请输入手机号再获取验证码！',
						duration: 2000
					});
					return
				}
			    if (this.$refs.uCode.canGetCode) {
			         // 模拟向后端请求验证码
			        uni.showLoading({
			        title: '正在获取验证码'
			        })
					this.$request.baseRequest('user', 'sendVerifyCode', {
						phone: this.form.operaterPhone
					}, 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
			        });
			    }
			},
			confirm(e){
				this.form.operateCertificateDate = e.fulldate
				this.$forceUpdate()
				console.log(e)
			},
			openjyxkz(){
				  this.$refs.calendar.open();
			},
			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()
			},
			// 删除图片
			deletePic(event,status) {
				this[`fileList${event.name}`].splice(event.index, 1)
				that.indoorImageArray.splice(event.index, 1)
				that.form.indoorImage =that.indoorImageArray.toString()
			},
			// 新增图片
			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
							}else if(status==2){
								that.form.operateCertificate = result
							}else if(status==3){
								that.form.coverImage = result
							}else if(status==4){
								that.indoorImageArray.push(result)
								that.form.indoorImage =that.indoorImageArray.toString()
							}
							resolve(res)
						}
					)
				})
			},
		}
	}
</script>

<style lang='scss' scoped>
 .icon_merchants_enterjianshao{
	 margin-left:10rpx;
	 font-size:50rpx;
	 color:#666;
 }
 .add_label,.get_code{

	background: #5F7DE9;
	color: #fff;
	padding: 10rpx 20rpx;
	border-radius: 10rpx;
	font-size: 26rpx;
 }
</style>