tourism/uni_applet/pageA/find/edit.vue

<template>
	<view class='content'>
		<view class='wrap'>
			<u--form  ref="uForm">
				<u-form-item labelPosition='left' label="主体">
					<u-radio-group activeColor="#f8bc31" placement='row'  v-model="form.mainBody">
						<u-radio name="个人" >个人</u-radio>
						<u-radio name="商铺" >商铺</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item v-if='form.mainBody=="商铺"' labelWidth='80' labelPosition='left' label="店铺名称">	
					<u-input maxlength="15" inputAlign='right' border='none' placeholder='输入店铺名称' v-model="form.shopNames" />
				</u-form-item>
				<u-form-item v-if='form.mainBody=="个人"' labelWidth='80' labelPosition='left' label="服务名称">
					<u-input maxlength="15" inputAlign='right' border='none' placeholder='输入服务名称，如跑腿、代驾' v-model="form.shopNames" />
				</u-form-item>
				<u-form-item labelWidth='80' labelPosition='top' label="封面图片">
					<u-upload :fileList="fileList1" @afterRead="afterRead($event,0)" @delete="deletePic" name="1" multiple
						:maxCount="1"></u-upload>
				</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/find/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 maxlength="15" inputAlign='right' border='none' placeholder='输入详细地址，不超过15个字' v-model="form.detailedAddress" />
				</u-form-item>
				<u-form-item  labelWidth='80' labelPosition='top' label="业务描述">
					<u--textarea  v-model="form.serviceDescription" autoHeight placeholder="输入业务描述，0-200个字" ></u--textarea> 
				</u-form-item>
				<view class='title'>以下信息为选填信息</view>
				<u-form-item v-if='form.mainBody=="商铺"' labelWidth='160' labelPosition='left' label="联系人(仅平台可见)">
					<u-input inputAlign='right' placeholder='输入联系人' border='none' v-model="form.realname" type="select" />
				</u-form-item>
				<u-form-item  v-if='form.mainBody=="个人"' labelWidth='160' labelPosition='left' label="姓名(仅平台可见)">
					<u-input inputAlign='right' placeholder='输入姓名' border='none' v-model="form.realname" type="select" />
				</u-form-item>
				<u-form-item labelWidth='160' labelPosition='left' label="称呼(所有人可见)">
					<u-input inputAlign='right' placeholder='输入称呼,如李先生' border='none' v-model="form.sex" type="select" />
				</u-form-item>
				<u-form-item labelWidth='160' labelPosition='left' label="联系电话(所有人可见)">
					<u-input type='digit' inputAlign='right' maxlength="15" placeholder='输入联系电话' border='none' v-model="form.phone"  />
				</u-form-item>
				<u-form-item v-if='form.mainBody=="商铺"' 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:594rpx;height:378rpx;' src="../../static/image/find/yingyezhizhao.png" mode=""></image>
						</u-upload>
				</u-form-item>
				<view v-if='form.mainBody=="个人"' class='caution'>注：如提供风险类服务，请上传身份证信息</view>
				<u-form-item  v-if='form.mainBody=="个人"' labelWidth='120' labelPosition='top' label="身份证头像面">
					<u-upload height='208' width='320' :fileList="fileList4" @afterRead="afterRead($event,2)" @delete="deletePic" name="4" multiple
						:maxCount="1">
						<view class="bgc">
							<image class='circle' style='width:123rpx;height:123rpx;' src="../../static/image/find/camera.png" mode=""></image>
							<view>请上传头像面</view>
						</view>
						</u-upload>
				</u-form-item>
				<u-form-item  v-if='form.mainBody=="个人"' labelWidth='120' labelPosition='top' label="身份证国徽面">
					<u-upload  height='208' width='320' :fileList="fileList6" @afterRead="afterRead($event,3)" @delete="deletePic" name="6" multiple
						:maxCount="1">
						<view class="bgc1">
							<image class='circle' style='width:123rpx;height:123rpx;' src="../../static/image/find/camera.png" mode=""></image>
							<view>请上传国徽面</view>
						</view>
					</u-upload>
				</u-form-item>
				<u-form-item   v-if='form.mainBody=="个人"' labelWidth='120' labelPosition='left' label="身份证号码">
					<u-input  inputAlign='right' border='none' placeholder='请输入身份证号码' v-model="form.personNo" />
				</u-form-item>
				<view></view>
			</u--form>
			
			<view class="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';
	export default {
		data() {
			return {
				form:{
					mainBody:'商铺',
					city: '',
					area: '',
					province: '',
					location: '',
					detailedAddress: '',
					personImageFront:'',
					personImageBack:'',
					personNo:'',
					
				},
				id:'',
				content:'确定提交店铺信息',
				isSubmit:false,
				// 封面
				fileList:[],
				fileList1:[],
				// 营业执照
				fileList2:[],
				fileList3:[],
				// 头像面
				fileList4:[],
				fileList5:[],
				// 国徽面
				fileList6:[],
				fileList7:[],
			}
		},
		onLoad(options) {
			that = this
			this.id=options.id
		},
		onShow() {
			this.getList()
		},
		methods: {
			getList(){
				this.$request.baseRequest('admin.tourism.productManagement', 'get', {
					id: this.id
				}, failres => {
					uni.showToast({
						icon: "none",
						title: failres.errmsg,
						duration: 3000
					});
							
					uni.hideLoading()
				}).then(res => {
					console.log(res)
					this.form=res.data
							
				})
			},
			submit(){
				uni.showModal({
					title:'123',
					success: () => {
							console.log(123)
					}
				})
				
				
				
				if(this.form.mainBody=='商铺'){
					this.content='确定提交店铺信息'
				}else{
					this.content='确定提交服务信息'
				}
				if(this.form.mainBody=='商铺'&&this.form.shopNames.length<2||this.form.mainBody=='商铺'&&this.form.shopNames.length>15){
					uni.showToast({
						icon: "none",
						title: '店铺名称2-15个字！',
						duration: 2000
					});
					return
				}
				if(this.form.mainBody=='个人'&&this.form.shopNames.length<2||this.form.mainBody=='个人'&&this.form.shopNames.length>15){
					uni.showToast({
						icon: "none",
						title: '服务名称2-15个字！',
						duration: 2000
					});
					return
				}
				if(!this.form.coverImage){
					uni.showToast({
						icon: "none",
						title: '封面图片不能为空！',
						duration: 2000
					});
					return
				}
				if(this.form.mainBody=='商铺'&!this.form.province){
					uni.showToast({
						icon: "none",
						title: '店铺位置不能为空！',
						duration: 2000
					});
					return
				}
				if(this.form.mainBody=='个人'&!this.form.province){
					uni.showToast({
						icon: "none",
						title: '定位不能为空！',
						duration: 2000
					});
					return
				}
				if(this.form.detailedAddress.length<6||this.form.detailedAddress.length>15){
					uni.showToast({
						icon: "none",
						title: '详细地址6-15个字！',
						duration: 2000
					});
					return
				}
				if(this.form.realname&&this.form.realname.length>6&&this.form.mainBody=='商铺'){
					uni.showToast({
						icon: "none",
						title: '联系人最多6个字！',
						duration: 2000
					});
					return
				}
				if(this.form.realname&&this.form.realname.length>6&&this.form.mainBody=='个人'){
					uni.showToast({
						icon: "none",
						title: '姓名最多6个字！',
						duration: 2000
					});
					return
				}
				uni.showModal({
					title: '提示',
					content: this.content,
					success (res) {
					    if (res.confirm) {
							that.$u.debounce(that.confirmSubmit, 500)
					    } else if (res.cancel) {
					      console.log('用户点击取消')
					    }
					  }
				})
				// this.isSubmit = true
			},
			confirmSubmit() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$request.baseRequest('admin.tourism.productManagement', 'add', {
					productManagement: 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()
			
				})
			},
			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)
			},
			// 新增图片
			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==0){
								that.form.coverImage = result
							}else if(status==1){
								that.form.businessLicense = result
							}else if(status==2){
								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==3){
								that.form.personImageBack = result
							}
							resolve(res)
						}
					)
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
 .wrap{
	 padding:20rpx;
 }
 .title{
	 font-size:36rpx;
	 font-weight:600;
	 margin:20rpx 0;
 }
 /deep/.u-radio-group,/deep/.u-radio-group--row {
	flex-direction: row-reverse !important;
	.u-radio{
		margin-left:10rpx;
	}
 }
 // 人像
 .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%;
 }
 .circle{
	margin:110rpx 0 20rpx 0;
 }
 /deep/.u-upload {
 
 	.u-upload__deletable {
 		height: 40rpx;
 		width: 40rpx;
 		line-height: 40rpx;
 	}
 
 	.u-upload__deletable__icon {
 		top: 8rpx;
 	}
 
 	.uicon-close {
 		font-size: 20px !important;
 	}
 }
</style>