front-end/hdApp/src/admin/shop/add.vue

<template>
	<view class="app-content">
		<form @submit="formSubmit" @reset="formReset">
			<view class="module-com input-line-wrap">
				<tui-list-cell class="line-cell" :hover="false">
					<view class="tui-title required">门店名称</view>
					<input v-model="form.shopName" placeholder-class="phcolor" class="tui-input" name="shopName" placeholder="请输入名称，如同安店" maxlength="50" type="text" />
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false">
					<view class="tui-title">营业状态</view>
					<view><switch style="transform:scale(0.7,0.7)" :checked="form.open == 0 ? false : true" @change="openChange" /></view>
				</tui-list-cell>
				<template v-if="visible">
					<tui-list-cell class="line-cell" :hover="false">
						<view class="tui-title">营业时间</view>
						<radio-group class="tui-input" @change="radioChange">
							<label class="list" for="hourLink">
								<radio id="hourLink" value="0" :checked="form.openType == 0" />
								<span class="checkbox-text">24小时</span>
							</label>
							<label class="list" for="setTimeLink">
								<radio id="setTimeLink" value="1" :checked="form.openType == 1" />
								<span class="checkbox-text">指定时段</span>
							</label>
							<input v-model="form.openType" name="openType" hidden />
						</radio-group>
					</tui-list-cell>
					<template v-if="openTimeVisible">
						<tui-list-cell class="line-cell" :hover="false">
							<view class="tui-title">开店时间</view>
								<picker mode="time" :value="start_time" start="00:00" end="24:00" @change="startTimeChange">
										<view class="uni-input">{{start_time}}</view>
								</picker>
								<input v-model="form.openStartTime" name="openStartTime" hidden />
						</tui-list-cell>
						<tui-list-cell class="line-cell" :hover="false">
							<view class="tui-title">关店时间</view>
								<picker mode="time" :value="end_time" start="00:00" end="24:00" @change="endTimeChange">
										<view class="uni-input">{{end_time}}</view>
								</picker>
								<input v-model="form.openEndTime" name="openEndTime" hidden />
						</tui-list-cell>
					</template>
				</template>
				<tui-list-cell class="line-cell" :hover="false">
					<view class="tui-title">门店类型</view>
					<radio-group class="tui-input" @change="joinChange">
						<label class="list" for="chainLink">
							<radio id="chainLink" value="0" :checked="form.join == 0" />
							<span class="checkbox-text">直营店</span>
						</label>
						<label class="list" for="joinLink">
							<radio id="joinLink" value="1" :checked="form.join == 1" />
							<span class="checkbox-text">加盟店</span>
						</label>
					</radio-group>
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false">
					<view class="tui-title required">手机号</view>
					<input v-model="form.mobile" placeholder-class="phcolor" class="tui-input" name="mobile" placeholder="请输入手机号" maxlength="50" type="number" />
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="openAddres">
					<view class="tui-title required">所在城市</view>
					<view class="tui-input" v-if="form.province || form.city">{{ form.province + '-' + form.city }}</view>
					<view class="tui-placeholder" v-else>请选择</view>
					<input v-model="form.province" name="province" hidden />
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="selectRegion">
					<view class="tui-title required">地址</view>
					<view class="tui-input" v-if="form.address">{{ form.address }}</view>
					<view class="tui-placeholder" v-else>请填写详细地址</view>
					<input v-model="form.address" name="address" hidden />
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false">
					<view class="tui-title ">门牌号</view>
					<input v-model="form.floor" placeholder-class="phcolor" class="tui-input" name="floor" placeholder="楼号门牌号（选填）" />
				</tui-list-cell>
				<tui-list-cell class="line-cell remark-wrap" :hover="false">
					<view class="tui-title">简介</view>
					<view class="tui-input">
						<textarea v-model="form.introduction" class="tui-textarea remark" placeholder-class="phcolor" placeholder="请输入简介" />
					</view>
				</tui-list-cell>
			</view>
			<!-- 提交 -->
			<view class="confirm-btn">
				<button class="admin-button-com big blue" formType="submit">提交</button>
			</view>
		</form>
		<!-- 省市联动 -->
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onCityConfirm"></simple-address>
		<!-- 选择地区 -->
		<app-area-sel :show.sync="showRegion" :city="form.city" @change="changeAreaFn" />
	</view>
</template>

<script>
	import TuiListCell from '@/components/plugin/list-cell'
	import AppAvatarModule from '@/components/module/app-avatar'
	import AppUploader from "@/components/app-uploader";
	import SimpleAddress from '@/components/plugin/simple-address'
	import AppAreaSel from '@/components/app-area-sel'
	const form = require('@/utils/formValidation.js')
	import {mapActions} from "vuex";
	import { updateShop as update, addShop as add } from '@/api/shop'
	export default {
		name: 'staff-add',
		components: {
			TuiListCell,
			AppAvatarModule,
			SimpleAddress,
			AppAreaSel,
			AppUploader
		},
		data() {
			return {
				visible: true,
				openTimeVisible: false,
				start_time: '00:00',
      			end_time: '00:00',
				form: {
					join:0,
					shopName: '',
					province: '',
					city: '',
					address: '',
					floor: '',
					open: 1,
					openType: 0, // openType: 0. 表示 24小时营业 1. 表示 xx ~ xx
					openStartTime: '',
					openEndTime: '',
					introduction: '',
					mobile: '',
					img: []
				},
				showRegion: false,
				region: {
					lat: 0,
					long: 0
				},
		        regionData: [],
				cityPickerValueDefault: [0, 0],
		        img: []
			}
		},
		onLoad() {
		},
		onShow() {
			if (this.option.id) {
				uni.setNavigationBarTitle({
					title: `修改门店`
				})
			} else {
				uni.setNavigationBarTitle({
					title: `添加门店`
				})
			}
		},
		methods: {
      ...mapActions(['setUserShopAll']),
			init() {
                this._getDet()
			},
			_getDet() {
				let data = uni.getStorageSync('modifyShopB')
				if (this.$util.isEmpty(data)){
					return
				} 
				Object.keys(this.form).forEach((i, index) => {
					this.form[i] = data[i]
				})
				this.region.lat = data.lat
				this.region.long = data.long

				// 营业时间初始化
				this.visible = this.form.open == 1 ? true : false
				this.openTimeVisible = true
				this.form.openType = 1
				this.start_time = this.form.openStartTime
				this.end_time = this.form.openEndTime
				if (data.openStartTime == '') {
					this.openTimeVisible = false
					this.form.openType = 0
					this.start_time = '09:00'
					this.form.openStartTime = this.start_time
				}
				if (data.openEndTime == '') {
					this.end_time = '18:00'
					this.form.openEndTime = this.end_time
				}
			},
			openChange(e) {
				this.visible = e.target.value ? true : false
				this.form.open = e.target.value ? 1 : 0
			},
			startTimeChange: function(e) {
				this.start_time = e.detail.value
        		this.form.openStartTime = e.detail.value
			},
			joinChange(e){
				this.form.join = e.detail.value
			},
			endTimeChange: function(e) {
				this.end_time = e.detail.value
				this.form.openEndTime = e.detail.value
			},
			radioChange(e) {
				this.openTimeVisible = e.detail.value == 0 ? false : true;
				this.form.openType = e.detail.value == 0 ? 0 : 1; // openType: 0. 24小时 1. xx ~ xx
				if (this.openTimeVisible) {
					this.start_time = '09:00'
					this.end_time = '18:00'
				}
			},
			selectRegion() {
				if (!this.form.city) {
					this.$msg('请先选择城市！')
					return false
				}
				this.showRegion = true
			},
			_resultData(val) {
				console.log(val)
				this.form.img = val;
			},
			changeAreaFn(e) {
				console.log('changeAreaFn', e)
				this.form.address = e.title
				this.region.lat = e.location.lat
				this.region.long = e.location.lng
			},
			// 省市联动
			openAddres() {
				this.$refs.simpleAddress.open()
			},
			onCityConfirm(e) {
				this.form.province = e.provinceName
				this.form.city = e.cityName
				this.form.address = ''
				this.region.lat = 0
				this.region.long = 0
			},
			confirmFn() {
				let hostFn = this.option.id ? update : add
				if (this.option.id) {
					this.form.id = this.option.id
				}
				this.form = {...this.form,...this.region}
				uni.showLoading({mask:true})
				hostFn(this.form).then(res => {
					uni.hideLoading()
          			this.setUserShopAll();
					let promptText = this.option.id ? '修改成功！' : '添加成功！'
					this.$msg(promptText)
					uni.removeStorageSync('modifyShopB')
					setTimeout(() => {
					    this.$util.pageTo(1)
          			}, 1000)
				})
			},
			// 表单验证
			formSubmit(e) {
				// 表单规则
				let rules = [
					{
						name: 'shopName',
						rule: ['required'],
						msg: ['请输入名称']
					},
					{
						name: 'mobile',
						rule: ['required'],
						msg: ['请输入手机号']
					},
					{
						name: 'province',
						rule: ['required'],
						msg: ['请选择地址']
					},
					{
						name: 'address',
						rule: ['required'],
						msg: ['请填写详细地址']
					}
				]
				// 进行表单检查
				let formData = e.detail.value
				let checkRes = form.validation(formData, rules)
				// 验证通过!
				if (!checkRes) {
					this.confirmFn()
				} else {
					this.$msg(checkRes)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-content {
		min-height: calc(100vh - 20upx);
		padding-top: 20upx;
	}
	.prompt-text {
		color: $fontColor3;
		padding-left: 30upx;
		margin-bottom: 30upx;
	}
	.module-com {
		margin-bottom: 20upx;
		.member-wrap {
			.member-det {
				font-size: 24upx;
				margin-left: 20upx;
			}
		}
		.remark-wrap {
			align-items: flex-start;
			.remark {
				height: 240upx;
			}
		}
	}
	// 按钮
	.confirm-btn {
		width: calc(100% - 60upx);
		margin: 60upx 30upx 20upx;
		.admin-button-com {
			width: 100%;
		}
	}
</style>