gas-cylinder-h5/pages/mine/addAddress.vue

<template>
	<view>
		<u-navbar title="我的收货地址" :rightText="deleteState ? '删除' : ''" autoBack placeholder
			@rightClick="rightClick"></u-navbar>
		<view class="card_form">
			<x-form ref="personage" :list="list" :model="model" :rules="rules" btnTitle="保存地址" @confirm="confirm"
				@clientele="clientele"></x-form>
		</view>
		<x-modal :show="show" :title="title" @close="show = false"></x-modal>
	</view>
</template>

<script>
	import {
		urbanArea
	} from '@/static/js/districtCode.js'
	export default {
		data() {
			return {
				show: false,
				title: '地址删除后无法恢复是否删除地址？',
				areaData: urbanArea(), //原始数据
				deleteState: false,
				list: [{
					field: 'name',
					label: '姓名',
					placeholder: '请输入姓名',
					type: 'input',
					required: true,
				}, {
					field: 'phone',
					label: '手机号码',
					placeholder: '请输入手机号码',
					type: 'input',
					required: true,
				}, {
					field: 'region',
					label: '所在城市/地区',
					placeholder: '请选择所在城市/地区',
					type: 'cascader',
					required: true,
				}, {
					field: 'address',
					label: '详细地址',
					placeholder: '请输入详细地址',
					type: 'input',
					required: true,
				}, {
					field: 'isDefault',
					label: '设置默认地址',
					type: 'default',
				}],
				model: {
					name: '',
					phone: '',
					region: '',
					address: '',
					isDefault: false,
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					},
					'phone': {
						type: 'string',
						required: true,
						message: '请输入手机号码',
						trigger: ['blur', 'change']
					},
					'region': {
						type: 'string',
						required: true,
						message: '请选择所在城市/地区',
						trigger: ['blur', 'change']
					},
					'address': {
						type: 'string',
						required: true,
						message: '请输入详细地址',
						trigger: ['blur', 'change']
					},
				},
				regionCode: [],
				addressId: '',
			}
		},
		onLoad(value) {
			// console.log(value, 24)
			if (value.revamp == 'true') {
				this.deleteState = true
				this.getListDetails(value.id)
				this.addressId = value.id
			} else {
				this.deleteState = false
			}
		},
		methods: {
			confirm(value) {
				this.regionCode = value.value
				this.model.city = this.regionCode[0].value
				this.model.area = this.regionCode[1].value
				let arr1 = []
				let arr2 = []
				this.regionCode.forEach(item => {
					arr1.push(item.value)
					arr2.push(item.label)
				})
				this.model.hr = arr1.join('/')
				this.model.region = arr2.join('/')
			},
			clientele() {
				// console.log(this.model, 234)
				if (!this.deleteState) {
					// 添加
					const param = {
						...this.model
					}
					delete param.region
					this.$api.post('/api/applet/address', param).then(res => {
						if (res.code == 200) {
							uni.navigateBack({
								delta: 1
							});
						}
					})
				} else {
					// 修改
					const param = {
						...this.model
					}
					delete param.region
					delete param.hr
					console.log(param, 25)
					this.$api.put('/api/applet/address', param).then(res => {
						if (res.code == 200) {
							uni.navigateBack({
								delta: 1
							});
						}
					})
				}
			},
			// 删除
			rightClick() {
				this.show = true
				return
				this.$api.delete('/api/applet/address', {
					id: this.addressId,
				}).then(res => {
					if (res.code == 200) {
						uni.navigateBack({
							delta: 1
						});
					}
				})
			},
			getListDetails(id) {
				const arr = this.$cache.getCache('addressInfo')
				console.log(arr, 25)
				this.model.name = arr.name
				this.model.phone = arr.phone
				this.model.address = arr.address
				this.model.isDefault = arr.isDefault
				this.model.city = arr.city
				this.model.area = arr.area
				var city = this.cityScreening(arr.city, this.areaData)
				var area = this.cityScreening(arr.area, this.areaData)
				this.model.region = city + '/' + area
			},
			// 城市筛选
			cityScreening(value, list) {
				function getChildById(parentArray, id) {
					for (let i = 0; i < parentArray.length; i++) {
						if (parentArray[i].value === id) { // 如果当前元素的ID与目标ID相等，则返回该元素
							return parentArray[i];
						} else if (parentArray[i].children && Array.isArray(parentArray[i]
								.children)) { // 判断当前元素是否有子节点且类型为数组
							const result = getChildById(parentArray[i].children, id); // 对子节点进行递归调用
							if (result !== null) { // 若子节点存在结果，则返回该结果
								return result;
							}
						}
					}
					return null; // 没有找到符合条件的元素时返回null
				}
				var name = getChildById(list, value)
				if (name != null) {
					return name.label
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.card_form {
		margin: 10rpx 40rpx;
	}
</style>