front-end/ghsApp/src/pagesOrder/modify.vue

<template>
	<view class="app-content">
		<form @submit="formSubmit">
			<view class="module-com input-line-wrap">

				<view style="background-color: white;font-size:36upx;font-weight:bold;padding:20upx 0 10upx 30upx;">修改本单客户地址：</view>

				<tui-list-cell class="line-cell" :hover="false" v-if="hasMap == 1">
					<view class="tui-title">地址类型</view>
					<button :class="[couldNavigation==1?'blue':'default']" class="admin-button-com middle" @click.stop="setStyle(1)" style="width:180upx;">支持导航</button>
					<button :class="[couldNavigation==0?'blue':'default']" class="admin-button-com middle" style="width:180upx;margin-left:60upx;" @click.stop="setStyle(0)">不用导航</button>
				</tui-list-cell>

				<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="couldNavigation == 1" 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 v-else 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 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" :hover="false">
			<view class="tui-title">地址类型</view>
			<button :class="[syncDefaultAddress==1?'blue':'default']" class="admin-button-com middle" @click.stop="setDefaultAddress(1)" style="width:180upx;">设为默认</button>
			<button :class="[syncDefaultAddress==0?'blue':'default']" class="admin-button-com middle" style="width:180upx;margin-left:60upx;" @click.stop="setDefaultAddress(0)">临时使用</button>
		</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/order'
import { getInfo } from '@/api/shop'
import {getHasMap} from "@/api/express"
export default {
	name: 'modify',
	components: {
		TuiListCell,
		SimpleAddress,
		AppAreaSel
	},
	data() {
		return {
			form: {
				province: '',
				city: '',
				dist: '',
				address: '',
				floor: '',
				showAddress:''
			},
			region:{lat:'',long:''},
			regionData: {
				lat: 0,
				long: 0
			},
		cityPickerValueDefault: [0, 0],
		showRegion: false,
		hasMap: 0,
		couldNavigation:1,
		syncDefaultAddress: 1
		}
	},
	onLoad() {
	},
	methods: {
		setStyle(flag){
			this.couldNavigation = flag
			this.form.address = ''
		},
		setDefaultAddress(flag){
			this.syncDefaultAddress = flag
		},
		onHere(){
			this.form.province = '云南省'
			this.form.city = '昆明市'
		},
		init() {
			getHasMap().then(res=>{
				this.hasMap = res.data.hasMap
				if(this.hasMap == 0){
					this.couldNavigation = 0
				}else{
					this.couldNavigation = 1
				}
			})
			getInfo().then(res=>{
				if(res.code == 1){
					let city = res.data.city ? res.data.city : ''
					let province = res.data.province?res.data.province:''
					this.form.province = province
					this.form.city = city
				}
			})
		},
		//省市联动
		openAddres() {
			this.$refs.simpleAddress.open()
		},
		onCityConfirm(e) {
			this.form.province = e.provinceName
			this.form.city = e.cityName
			this.form.address = ''
			this.form.showAddress = ''
			this.region.lat = ''
			this.region.long = ''
		},
		selectRegion() {
			if (!this.form.city) {
				this.$msg('请先选择城市！')
				return false
			}
			this.showRegion = true
		},
		changeAreaFn(e) {
			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
			this.form.address = e.name

			// 提取地区信息，按遇到第一个"市"字后，把"市"后面的字符串作为地区
			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, syncDefaultAddress: this.syncDefaultAddress}
		uni.showLoading()
		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%;
		}
	}
	// 复选框
	.checkbox-wrap {
		padding: 20upx 30upx;
		background-color: white;
		border-bottom: 1px solid #f0f0f0;
		display: flex;
		justify-content: flex-end;
		.checkbox-label {
			display: flex;
			align-items: center;
			font-size: 36upx;
			color: #333;
		}
	}
</style>