emis-app/pages/address/edit.vue

<template>
	<tpx-page>
		<tpx-layout>
			<template v-slot:body>
				<view class="com-jianju pos-rlt pb-30" style="padding-top: 2rpx;">
					<view class="blcok-white radius-20">
						<u-textarea v-model="ansValue" border="none" height="110" placeholder="粘贴或输入地址，点击“智能识别”自动拆分姓名、电话和地址" custom-style="border:0;padding: 0;"></u-textarea>
						<u-row justify="end">
							<view class="mt-10">
								<u-button @click="handleAnsText()" type="primary" size="mini" shape="circle" custom-style="width: 130rpx;font-size: 24rpx;padding:0;">智能识别</u-button>
							</view>
						</u-row>
					</view>
					
					<view class="blcok-white radius-20">
						<view class="">
							
							<view style="margin-top: 10rpx;">
								<u-row>
									<u-col span="4">
										<tpx-input v-model:value="submitParam.name" placeholder="真实姓名"></tpx-input>
									</u-col>
									<u-col offset="1" span="7">
										<tpx-input v-model:value="submitParam.phone" placeholder="电话"></tpx-input>
									</u-col>
								</u-row>
							</view>
							
							<view class="mt-40 pos-rlt">
								<tpx-input :value="getAddressDetail(submitParam, false)" placeholder="所在地区"></tpx-input>
								<view @click="handleDialogClick(addressModal)" class="pos-abt-all"></view>
							</view>
							
							<view class="mt-30">
								<tpx-textarea v-model:value="submitParam.address" placeholder="详细地址（例如**街道**号**）"></tpx-textarea>
							</view>
							
							<view class="mt-30">
								<tpx-input v-model:value="submitParam.postCode" placeholder="邮编"></tpx-input>
							</view>
							
							<view class="mt-30">
								<tpx-input v-model:value="submitParam.email" placeholder="邮箱（选填"></tpx-input>
							</view>
							
							<view class="mt-30">
								<tpx-input v-model:value="submitParam.company" placeholder="公司名称（选填）"></tpx-input>
							</view>
						</view>
					</view>
				
					<view class="mt-30 pl-30 pr-30">
						<u-row justify="between">
							<view>
								<!-- <u-checkbox-group v-model="submitParam.blDefaultFlag" placement="column">
									<u-checkbox
										:name="true"
										shape="circle"
										size="30" label="默认地址" active-color="#B12D29"
										label-size="28"
									>
									</u-checkbox>
								  </u-checkbox-group> -->
							</view>
							<view @click="handleReset">
								<u-text text="清空" size="28" color="#0E0708"></u-text>
							</view>
						</u-row>
					</view>
				</view>
			</template>
			<template v-slot:footer>
				<view class="blcok-white-noradius">
					<u-button @click="handleSubmit()" type="primary" size="large" shape="circle" 
						custom-style="height:80rpx;font-size: 30rpx;"
					>确定</u-button>
				</view>
			</template>
		</tpx-layout>
		<buns-address-sheet v-model:show="addressModal.show" v-model:value="addressModal.values" @onSure="handleAddressChoose"></buns-address-sheet>
	</tpx-page>
</template>

<script>
	import { getAddressModels } from "./model"
	import * as apiService from "@/common/api"
	import { addressNameCodeMap } from "@/common/enum"
	import { pageEventNames } from "@/common/enum"
	import { getAddressDetail, setAddresModalParam } from "@/common/util"
	import { checkParams } from "@/common/validate"
	
	export default {
		props: {
		},
		computed: {

		},
		data() {
			return {
				queryOption: {
					id: undefined,
					addressType: undefined, // 1寄件 2收件
					listQuery: {}
				},
				addressModal: {
					show: false,
					values: {
						regIds: [],
						regNames: []
					}
				},
				ansValue: '',
				submitParam: {
					...getAddressModels(),
				},
				submitValidConfig: {
					name: { required: true, requiredMsg: '姓名不能为空' },
					phone: { required: true, requiredMsg: '手机号不能为空' },
					country: { required: true, requiredMsg: '国家不能为空' },
					province: { required: true, requiredMsg: '省份不能为空' },
					address: { required: true, requiredMsg: '详细地址' },
				},
			}
		},
		onShareAppMessage() {
			return {
				// title: '',
				// path: 'TODO'
			}
		},
		onLoad(queryOption) {
			this.queryOption = queryOption
			this.initData();
		},
		onUnload() {

		},
		methods: {
			getAddressDetail,
			async initData() {
				if(this.queryOption.id) {
					let res = await apiService.getAddressById({ id: this.queryOption.id, _loading: true })
					if(res.data.blDefaultFlag) {
						res.data.blDefaultFlag = [true]
					}
					// 回显 国家-省市区组件数据
					this.addressModal.values = setAddresModalParam(res.data);
					this.submitParam = res.data
				}
			},
			
			async handleAnsText(){
				let res = await apiService.parseAddress({ content: this.ansValue, _loading: true })
				let data = res.data || {}
				this.addressModal.values = setAddresModalParam(data);
				Object.assign(this.submitParam, data) 
			},
			handleAddressChoose(data) {
				data.regIds.map((regId, index)=> {
					let nameCodeMap = addressNameCodeMap[index]
					this.submitParam[nameCodeMap.codeKey] = regId
					this.submitParam[nameCodeMap.nameKey] = data.regNames[index]
				})
			},
			handleReset(){
				this.submitParam = getAddressModels()
				this.addressModal.values = {
					regIds: [],
					regNames: [],
				}
			},
			async handleSubmit() {
				let params = { ...this.submitParam }
				await checkParams(params, this.submitValidConfig)
				let curServiceHand = apiService.addAddress
				if(this.queryOption.id) {
					curServiceHand = apiService.editAddress
				} else {
					params.addressType = this.queryOption.addressType
				}
				params.blDefaultFlag = Number(!!(params.blDefaultFlag && params.blDefaultFlag.length > 0));
				await curServiceHand({ ...params, _loading: true })
				this.showToast("操作成功")
				uni.$emit(pageEventNames.addressSaveSuccess, {
					data: params
				})
				this.goBack()
			},
			handleDialogClick(curModal) {
				curModal.show = true
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/uni-nvue.scss';

	page {
		background-color: #F6F6F6;
		height: 100% !important;
	}
</style>
<style scoped lang="scss">
	
</style>