tourism/uni_applet/pageA/enter/myCateringdustry/shopSetting/editShopInformation.vue

<template>
	<view class='content'>
		<view class='wrap'>
			<u--form  ref="uForm">
				
				<u-form-item  labelWidth='150' labelPosition='left' label="店铺名称">
					<u-input inputAlign='right' border='none' placeholder='输入店铺名称' v-model="currectData.shopNames" />
				</u-form-item>
				<u-form-item  labelWidth='150' labelPosition='left' label="经营者">
					<u-input inputAlign='right' border='none' placeholder='输入经营者姓名' v-model="currectData.operater" />
				</u-form-item>
				<u-form-item  labelWidth='150' labelPosition='left' label="经营者手机号">
					<u-input inputAlign='right' maxlength="15" border='none' placeholder='输入经营者手机号' v-model="currectData.operaterPhone" />
				</u-form-item>
				<u-form-item  labelWidth='150' labelPosition='left' label="验证码">
					<u-input inputAlign='right' border='none' placeholder='输入验证码' v-model="currectData.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="currectData.contacts" />
				</u-form-item>
				<u-form-item  labelWidth='150' labelPosition='left' label="业务联系电话(选填)">
					<u-input inputAlign='right' maxlength="15" border='none' placeholder='输入联系电话' v-model="currectData.contactsPhone" />
				</u-form-item>
				<u-form-item labelWidth='80' labelPosition='left' @click='placeSelect(),hideKeyboard()' label="店铺位置">
					<view style='text-align:right;' v-if="currectData.province">{{ currectData.province }}{{ currectData.city }}{{ currectData.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="currectData.detailedAddress" />
				</u-form-item>
			</u--form>
			<view class="mercharts_footer">
				<button @click='submit' class="submit">提交</button>
			</view>
			<u-modal :show="isSubmit" content='确定提交店铺信息？' @confirm="$u.debounce(confirmSubmit, 500)" showCancelButton
				@cancel="isSubmit=false" @close="isSubmit=false" closeOnClickOverlay></u-modal>
		</view>
	</view>
</template>

<script>
	var that
	export default {
		data() {
			return {
				currectData:{
					
				},
				isSubmit:false,
				tips:'发送验证码',
			}
		},
		onLoad() {
			that = this
		},
		onShow(){
			if(uni.getStorageSync('myCateringdustry')){
				this.currectData=JSON.parse(uni.getStorageSync('myCateringdustry'))
			}
		},
		methods: {
			placeSelect() {
				uni.chooseLocation({
					success: function(res) {
						console.log(res);
						that.currectData.location = res.latitude + ',' + res.longitude
						let _address = that.$helper.formatLocation(res.address)
						console.log(_address)
						that.currectData.province = _address.Province
						that.currectData.city = _address.City
						that.currectData.area = _address.Country
						that.currectData.detailedAddress = _address.Village
						that.$forceUpdate()
					}
				});
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			codeChange(text) {
			    this.tips = text;
			},
			getCode() {
				if(!this.currectData.operaterPhone){
					uni.showToast({
						icon: "none",
						title: '请输入手机号再获取验证码！',
						duration: 2000
					});
					return
				}
			    if (this.$refs.uCode.canGetCode) {
			         // 模拟向后端请求验证码
			        uni.showLoading({
			        title: '正在获取验证码'
			        })
					this.$request.baseRequest('user', 'sendVerifyCode', {
						phone: this.currectData.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
			        });
			    }
			},
			submit(){
				uni.showModal({
						title: '提示',
						content: '确定提交店铺信息？',
						success (res) {
						    if (res.confirm) {
								that.$u.debounce(that.confirmSubmit, 500)
						    } else if (res.cancel) {
						      console.log('用户点击取消')
						    }
						  }
					})
			},
			confirmSubmit() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$request.baseRequest('admin.tourism.foodInfo', 'update', {
					foodInfo: JSON.stringify(this.currectData)
				}, 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.setStorageSync('myCateringdustry',JSON.stringify(this.currectData))
					uni.navigateBack()
			
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.get_code{
		background: #5F7DE9;
		color: #fff;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		font-size: 26rpx;
	 }
</style>