front-end/hdApp/src/admin/member/modify.vue

<template>
	<view class="app-content">
		<form @submit="formSubmit">
			<view class="module-com input-line-wrap">
				<tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="openAddres">
					<view class="tui-title">城市</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 v-if="hasMap == 0" class="line-cell" :hover="false">
					<view class="tui-title">地址</view>
					<input v-model="form.address" placeholder-class="phcolor" class="tui-input" name="address" placeholder="请填写地址" />
				</tui-list-cell>
				<tui-list-cell v-else class="line-cell" :hover="false" :arrow="true" @click="selectRegion">
					<view class="tui-title">地址</view>
					<view v-if="form.address" class="tui-input">{{ form.address }}</view>
					<view v-else class="tui-placeholder">请填写地址</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>
			</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 SimpleAddress from '@/components/plugin/simple-address'
import AppAreaSel from '@/components/app-area-sel'
const form = require('@/utils/formValidation.js')
import { modifyAddress } from '@/api/custom'
import {getHasMap} from "@/api/express"

export default {
	name: 'modify',
	components: {
		TuiListCell,
		SimpleAddress,
		AppAreaSel
	},
	data() {
		return {
			form: {
				province: '',
				city: '',
				address: '',
				floor: '',
				showAddress:''
			},
			showRegion: false,
			region: {
				lat: 0,
				long: 0
			},
			cityPickerValueDefault: [0, 0],
			hasMap: 0
		}
	},
	onLoad() {
		if(this.option.name){
			uni.setNavigationBarTitle({ title: this.option.name })
		}
	},
	methods: {
		init() {
			getHasMap().then(res=>{
				this.hasMap = res.data.hasMap
			})
		},
		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
		},
		selectRegion() {
			if (!this.form.city) {
				this.$msg('请选择城市')
				return false
			}
			this.showRegion = true
		},
		changeAreaFn(e) {
			this.form.address = e.name
			let locationStr = e.location
			let fruits = locationStr.split(",").map(fruit => fruit.trim())
			this.region.lat = fruits[1]||''
			this.region.long = fruits[0]||''
			this.form.showAddress = e.address||''

			// 提取地区信息，按遇到第一个"市"字后，把"市"后面的字符串作为地区
			const districtStr = e.district || '';
			const cityIndex = districtStr.indexOf('市');
			this.form.dist = cityIndex !== -1 ? districtStr.substring(cityIndex + 1) : districtStr;
		},
		confirmFn() {
			let that = this
			this.form.id = this.option.id ? this.option.id : 0
			this.form = {...this.form,...this.region}
			uni.showLoading({mask:true})
			modifyAddress(this.form).then(res=>{
				if(res.code == 1){
					that.$msg('修改成功')
					setTimeout(() => {
						uni.navigateBack({})
					}, 1200)
				}
			})
		},
		formSubmit(e) {
			let rules = [
				{
					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: 180upx;
			}
		}
	}
	// 按钮
	.confirm-btn {
		width: calc(100% - 60upx);
		margin: 60upx 30upx 20upx;
		.admin-button-com {
			width: 100%;
		}
	}
</style>