emis-app/pages/address/edit.vue

<template>
	<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="submitParam.otherDes" 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 v-model:value="_area" 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>
</template>

<script>
	import { getAddressModels } from "./model"
	import * as apiService from "@/common/api"
	
	export default {
		props: {
		},
		computed: {

		},
		data() {
			return {
				queryOption: {
					id: undefined
				},
				addressModal: {
					show: false,
					values: {
						regIds: [],
						regNames: []
					}
				},
				submitParam: {
					...getAddressModels(),
				}
			}
		},
		onShareAppMessage() {
			return {
				// title: '',
				// path: 'TODO'
			}
		},
		onLoad(queryOption) {
			this.queryOption = queryOption
			this.initData();
		},
		onUnload() {

		},
		methods: {
			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.submitParam = res.data
				}
			},
			handleAnsText(){
				
			},
			handleAddressChoose(data) {
				this.submitParam.country = data.regIds[0]
				this.submitParam.province = data.regIds[1]
				this.submitParam.city = data.regIds[2]
				this.submitParam.county = data.regIds[3]
			},
			handleReset(){
				this.submitParam = getAddressModels()
				this.addressModal.values = {
					regIds: [],
					regNames: [],
				}
			},
			async handleSubmit() {
				let params = { ...this.submitParam }
				let curServiceHand = apiService.addAddress
				if(this.queryOption.id) {
					curServiceHand = apiService.editAddress
				}
				params.blDefaultFlag = !!(params.blDefaultFlag && params.blDefaultFlag.length > 0);
				
				await curServiceHand({ ...params, _loading: true })
				this.showToast("操作成功")
				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>