hjt_erdao_WeChatApplet/pages/merchant/home/modify.vue

<template>
	<view class="main main-bg">
		<u-form :model="form" ref="uForm" :rules="rules">
			<u-form-item 
				label="店铺名称"
				label-width="180" 
				:label-position="labelPosition"
				prop="shopsName">
				<u-input 
					v-model="form.shopsName" 
					placeholder-style="color: #2E4F1C;"
					placeholder="请输入店铺名称" />
			</u-form-item>
			<u-form-item
				label="店铺电话"
				label-width="180" 
				:label-position="labelPosition"
				prop="shopsTel">
				<view class="form-item">
					<u-input 
						v-model="form.shopsTel" 
						placeholder-style="color: #2E4F1C;"
						placeholder="请输入店铺电话" />
				</view>
			</u-form-item>
			<u-form-item
			  :label-position="labelPosition" 
			  label="场景种类" 
			  prop="shopsType" 
			  label-width="180">
				<u-input placeholder-style="color: #2E4F1C;" type="select" :select-open="selectShow" v-model="form.type" placeholder="请选择场景种类" @click="selectShow = true"></u-input>
				<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
			</u-form-item>
			<!-- <u-form-item
				label="优惠"
				label-width="180" 
				:label-position="labelPosition"
				prop="shopsDiscount">
				<u-input 
					v-model="form.shopsDiscount" 
					placeholder-style="color: #2E4F1C;"
					placeholder="请输入优惠" />
			</u-form-item> -->
			<view class="store-dis">
				<view class="store-address">
					<view class="select-address">
						<view class="font-color3 font-twenty">
							店铺地址
						</view>
						<u-input
							v-model="form.shopsAddress" 
							placeholder-style="color: #2E4F1C;"
							placeholder="请选择地址"/>
					</view>
				</view>
				<view class="map-icon" @click="chooseLocation()">
					<image src="../../../static/map.png" class="icon-img"></image>
					<!-- <u-icon name="map" color="#ffffff" size="56rpx"></u-icon> -->
				</view>
			</view>
			
			<u-form-item
			 label-position="top"
			  label="简介"
			  prop="shopsIntroduce">
				<u-input type="textarea" placeholder="请填写店铺简介" v-model="form.shopsIntroduce" />
			</u-form-item>
			<view class="form-upload">
				<view class="upload-title font-twenty font-color2">
					照片修改（重新上传一张新照片，否则默认之前）
				</view>
				<view style="display: flex;">
					<image v-if="flag" :src="image(form.shopsPic)" style="width:160rpx; height:160rpx"></image>
					<u-upload
						width="160"
						height="160"
						:action="action"
						max-count="1" 
						@on-success="onSuccess">
					</u-upload>
				</view>
			</view>
		</u-form>
		<view @click="submit" class="form-submit">确认</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import http from '@/common/http.js'
	import amap from '@/lib/amap-wx.130.js'
	import server from "@/api/index";
	export default {
		data() {
			return {
				action: http.webUrl+`/wx/common/upload`,
				labelPosition: 'left',
				addressName: '',
				flag: true,
				selectShow: false,
				form: {
					shopsName: '',
					shopsTel: '',
					// shopsDiscount: 1,
					shopsIntroduce: '',
					shopsPic: '',
					shopsAddress:'',
					shopsLat: null,
					shopsLng: null,
					shopsType: null
				},
				selectList: [],
				rules: {
					shopsTel: [
						{ 
							required: true, 
							message: '手机号格式不正确!',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.rangeLength(value, [1, 11]);
							},
							message: '手机号最多输入11个字符!',
							trigger: ['change','blur'],
						}
					],
					shopsIntroduce: [
						{ 
							validator: (rule, value, callback) => {
								return this.$u.test.rangeLength(value, [0, 50]);
							},
							message: '简介最多输入50个字符!',
							trigger: ['change','blur'],
						}
					],
					shopsName: [
						{ 
							validator: (rule, value, callback) => {
								return this.$u.test.rangeLength(value, [1, 15]);
							},
							message: '名称最多输入15个字符!',
							trigger: ['change','blur'],
						}
					],
					// shopsDiscount: [
					// 	{
					// 		required: true, 
					// 		message: '请输入优惠!',
					// 		trigger: ['change','blur'],
					// 	},
					// 	{
					// 		validator: (rule, value, callback) => {
					// 			return this.$u.test.range(value, [0, 1]);
					// 		},
					// 		message: '优惠必须是小数!',
					// 		trigger: ['change','blur'],
					// 	}
					// ]
				},
				id: null,
				key:'1dc63f21c12985e199a715faf4c02f36',
				userInfo:{}
			}
		},
		onLoad(e) {
			this.userInfo = uni.getStorageSync('userInfo');
			this.id = e.id;
			if(this.userInfo.nickName !== "null"){
				this.getListFn();
			}
			this.amapPulgin = new amap.AMapWX({
				key: this.key
			})
			this.getDicFn()
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		// onShow() {
		// 	this.getListFn();
		// },
		methods:{
			image(e) {
				return http.webUrl + e
			},
			selectConfirm(e) {
				console.log(e)
				this.form.shopsType = e[0].value
				this.form.type = e[0].label
			},
			getDicFn(){
				server.getDic({dictType: 'shops_type'}).then(res =>{
					console.log(res)
					this.selectList = res
				})
			},
			getListFn(){
				server.getYongJunDetails(this.userInfo.nickName).then(res =>{
					this.form = res
				})
			},
			onSuccess(data, index, lists, name){
				this.form.shopsPic = data.fileName
				this.flag = false;
			},
			submit() {
				console.log(this.form)
				let _this = this;
				let form = this.form
				form.shopsStatus = '1';
				if(this.userInfo.nickName === "null"){
					form.userId = _this.userInfo.userId;
					this.$refs.uForm.validate(valid => {
						if (valid) {
							server.getAddShops(form).then(res =>{
								_this.$refs.uToast.show({
									title: '添加店铺信息成功!',
									type: 'default',
								})
								setTimeout(function()  {
									uni.redirectTo({
									    url: '/pages/login/index'
									});
								}, 2000);
							})
						} else {
						}
					});
				}else{
					form.shopsId = _this.userInfo.nickName;
					this.$refs.uForm.validate(valid => {
						if (valid) {
							server.getIndexData(form).then(res =>{
								_this.$refs.uToast.show({
									title: '修改店铺信息成功!',
									type: 'default',
								})
								setTimeout(function()  {
									uni.navigateBack({
									    delta: 1
									});
								}, 2000);
							})
						} else {
						}
					});
				}
			},
			getLocation() {
				let that = this;
				that.amapPulgin.getRegeo({
					success: res => {
						console.log('当前定位', res);
						that.addressName = `${res[0].regeocodeData.addressComponent.city}`
						// uni.hideLoading();
					},
					fail: err => {
						console.log(err)
					}
				})
			},
			chooseLocation(e) {
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.form.shopsAddress = res.name
						this.form.shopsLat = res.latitude
						this.form.shopsLng = res.longitude
						// let result = res.address.substring(0, res.address.indexOf('市'))
						// if(result.indexOf('省') != -1){
						// 	this.form.address = result.match(/省(\S*)/)[1];
						// }else{
						// 	this.form.address = result
						// }
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-list-item{
		margin: 0rpx 0rpx 0rpx 16rpx!important;
	}
	/deep/ .u-icon__icon{
		position: relative;
		// color: #2E4F1C!important;
		color: #FFFFFF!important;
	}
	/deep/ .u-form-item__message{
		padding-right: 0rpx!important;
		text-align: right;
	}
	/deep/ .u-input__input{
		color: #2E4F1C!important;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		text-align: right;
	}
	/deep/ .u-border, .u-border-bottom, .u-border-left, .u-border-right, .u-border-top, .u-border-top-bottom{
		
	}
	/deep/ .u-form-item{
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		box-sizing: border-box;
		line-height: 96rpx;
		-webkit-flex-direction: column;
		flex-direction: column;
		background: rgba(46, 79, 28, 0.13);
		border-radius: 24rpx;
		margin-bottom: 40rpx;
		padding-left: 30rpx!important;
		padding-right: 30rpx!important;
	}
	.main{
		width: 100%;
		height: auto;
		min-height: 100vh;
		padding: 60rpx 30rpx 30rpx;
		.store-dis{
			display: flex;
			margin-bottom: 30rpx;
			.store-address{
				width: 580rpx;
				padding: 16rpx 30rpx;
				background: rgba(46, 79, 28, 0.13);
				border-radius: 16rpx 0rpx 0rpx 16rpx;
				.select-address{
					display: flex; 
					align-items: center;
					justify-content: space-between; 
				}
			}
			.map-icon{
				width: 110rpx;
				background: #2E4F1C;
				text-align: center;
				border-radius: 0rpx 16rpx 16rpx 0rpx;
				padding-top: 31rpx;
				.icon-img{
					width: 42rpx;
					height: 42rpx;
				}
			}
		}
	
		.form-upload{
			width: 100%;
			height: 300rpx;
			background: rgba(46, 79, 28, 0.13);
			border-radius: 16rpx;
			padding-left: 30rpx;
			.upload-title{
				height: 100rpx;
				line-height: 100rpx;
			}
		}
		.form-submit{
			margin: 60rpx auto;
			width: 570rpx;
			height: 96rpx;
			line-height: 96rpx;
			background: #2E4F1C;
			border-radius: 49rpx;
			font-size: 36rpx;
			text-align: center;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #fff;
		}
	}
</style>