front-end/hdApp/src/components/app-address-group.vue

<template>
	<view>
		<tui-list-cell
			class="line-cell"
			:hover="false"
			:arrow="false"
			@click="openAddres"
		>
			<view class="tui-title ">{{ cityTitle }}</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="selRegionFn"
		>
			<view class="tui-title ">{{ detailTitle }}</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 v-if="isFloor" class="line-cell" :hover="false">
			<view class="tui-title ">门牌号</view>
			<input
				v-model="form.floor"
				placeholder-class="phcolor"
				class="tui-input"
				name="floor"
				@input="changeFloor"
				placeholder="楼号门牌号（选填）"
			/>
		</tui-list-cell>
		<!-- 选择地区 -->
		<app-area-sel
			:show.sync="showRegion"
			@change="changeAreaFn"
			:city="form.city"
		/>
		<!-- 省市联动 -->
		<simple-address
			ref="simpleAddress"
			:pickerValueDefault="cityPickerValueDefault"
			@onConfirm="onCityConfirm"
		></simple-address>
	</view>
</template>

<script>
import SimpleAddress from "@/components/plugin/simple-address";
import AppAreaSel from "@/components/app-area-sel";
import TuiListCell from "@/components/plugin/list-cell";
import { getUserDet } from "@/api/member/index";
export default {
	name: "AppAddressGroup",
	components: {
		AppAreaSel,
		SimpleAddress,
		TuiListCell
	},
	props: {
		customId:'',
		cityTitle: {
			type: String,
			default: "所在城市"
		},
		detailTitle: {
			type: String,
			default: "地址"
		},
		isFloor: {
			type: Boolean,
			default: true
		},
		getFormObj: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			// 省市联动
			regionData: [],
			cityPickerValueDefault: [0, 0],
			form: {
				province: "",
				city: "",
				address: "",
				floor: "",
				longitude: "",
				latitude: ""
			},
			showRegion: false
		};
	},
	mounted(){
		if(this.customId!=''){this.initAdress();}
	},
	methods: {
		initAdress(){
			return getUserDet({ id: this.customId }).then(res => {
				this.form.province = res.data.province;
				this.form.city = res.data.city;
				this.form.address = res.data.address;
				this.form.latitude = res.data.lat;
				this.form.longitude = res.data.long;
				this.$emit("selectAdress", this.form);
			})
		},
		formatForm() {
			Object.keys(this.form).forEach(i => {
				this.form[i] = this.getFormObj[i];
			});
		},
		selRegionFn() {
			if (!this.form.city) {
				this.$msg("请先选择城市！");
				return false;
			}
			this.showRegion = true;
		},
		onCityConfirm(e) {
			this.form.province = e.provinceName;
			this.form.city = e.cityName;
			this.$emit("selectAdress", this.form);
		},
		// 省市联动
		openAddres() {
			return;
			this.$refs.simpleAddress.open();
		},
		changeAreaFn(e) {
			this.form.address = e.title;
			this.form.latitude = e.location.lat;
			this.form.longitude = e.location.lng;
			this.$emit("selectAdress", this.form);
		},
		changeFloor(e) {
			this.$emit("selectAdress", this.form);
		}
	},
	watch: {
		getFormObj() {
			if (this.$util.isEmpty(this.getFormObj)) {
				this.formatForm();
			}
		}
	}
};
</script>

<style lang="scss" scoped></style>