gas-cylinder-h5/pages/order/completionTasks.vue

<template>
	<!-- 补全客户信息 -->
	<view>
		<u-navbar title="补全客户信息" autoBack placeholder></u-navbar>
		<view class="card_form">
			<x-form ref="customer" :list="list" :model="model" :rules="rules" @confirm="confirm"
				@clientele="clientele"></x-form>
		</view>
	</view>
</template>

<script>
	import {
		urbanArea
	} from '@/static/js/districtCode.js'
	export default {
		data() {
			return {
				areaData: urbanArea(), //原始数据
				list: [{
					field: 'name',
					label: '姓名',
					placeholder: '请输入姓名',
					type: 'input',
					required: true,
				}, {
					field: 'principalPhone',
					label: '电话',
					placeholder: '请输入电话',
					type: 'input',
					required: true,
				}, {
					field: 'type',
					label: '类型',
					placeholder: '请选择类型',
					type: 'radio',
					options: [{
							label: '商户',
							value: 0,
						},
						{
							label: '私人',
							value: 1,
						}
					],
					required: true,
				}, {
					field: 'region',
					label: '所在城市/地区',
					placeholder: '请选择所在城市/地区',
					type: 'cascader',
					required: true,
				}, {
					field: 'address',
					label: '地址',
					placeholder: '请输入详细地址',
					type: 'input',
					required: true,
				}, {
					field: 'addressImg',
					label: '现场图片',
					placeholder: '请上传现场图片',
					type: 'upload',
					required: true,
				}, {
					field: 'remark',
					label: '备注',
					placeholder: '请输入备注',
					type: 'textarea',
				}],
				model: {
					name: '',
					principalPhone: '',
					address: '',
					addressImg: '',
					city: '',
					area: '',
					region: '',
					lat: null,
					lng: null,
					remark: '',
					type: 1,
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					},
					'principalPhone': {
						type: 'string',
						required: true,
						message: '请输入号码',
						trigger: ['blur', 'change']
					},
					'type': {
						type: 'number',
						required: true,
						message: '请选择客户类型',
						trigger: ['blur', 'change']
					},
					'region': {
						type: 'string',
						required: true,
						message: '请选择所在城市/地区',
						trigger: ['blur', 'change']
					},
					'address': {
						type: 'string',
						required: true,
						message: '请输入详细地址',
						trigger: ['blur', 'change']
					},
					'addressImg': {
						required: true,
						message: '请上传现场图片',
						trigger: ['blur', 'change']
					},
					remark: {
						required: false,
					}
				},
				regionCode: [],
				customerId: '',
			}
		},
		onLoad(e) {
			this.customerId = e.customerId
			this.getCustomerList(e.customerId)
		},
		methods: {
			getCustomerList(customerId) {
				this.$api.get('/api/customer/' + customerId).then(res => {
					if (res.code == 200) {
						const param = res.data
						let arrImg = []
						if (res.data.addressImg) {
							arrImg = res.data.addressImg.split(',')
						}
						let arrimage = []
						arrImg.forEach(item => {
							var arr = {
								thumb: this.$baseUrl + item,
								url: item,
							}
							arrimage.push(arr)
						})
						this.$refs.customer.fileList1 = arrimage
						this.model.name = param.principalName
						this.model.principalPhone = param.principalPhone
						this.model.address = param.address
						this.model.addressImg = res.data.addressImg
						this.model.city = param.city
						this.model.area = param.area
						this.model.type = param.type
						this.model.lng = param.lng
						this.model.lat = param.lng
						this.model.remark = param.remark
						this.model.hr = param.city + '/' + param.area
						var city = this.cityScreening(param.city, this.areaData)
						var area = this.cityScreening(param.area, this.areaData)
						this.model.region = city + '/' + area
					}
				})
			},
			// 补全客户信息
			clientele() {
				const param = {
					id: this.customerId,
					...this.model
				}
				delete param.hr
				this.$api.put('/api/customer', param).then(res => {
					if (res.code == 200) {
						uni.$u.toast('操作成功')
						setTimeout(() => {
							uni.$emit('refresh');
							uni.navigateBack({
								delta: 1
							});
						}, 1500)
					}
				})
			},
			// 城市筛选
			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
				}
			},
			confirm(value) {
				this.regionCode = value.value
				this.model.city = this.regionCode[0].value
				this.model.area = this.regionCode[1].value
				this.model.region = value.value[0].label + '/' + value.value[1].label
			},
			// 获取经纬度
			longitude() {
				uni.getLocation(({
					type: "gcj02",
					altitude: true,
					isHighAccuracy: true,
					geocode: true,
					success: function(res) {
						console.log('getLocation---', res);
						var jw_json = {
							jingdu: parseFloat(res.longitude).toFixed(6),
							weidu: parseFloat(res.latitude).toFixed(6),
							address: res.address.district + res.address.poiName + res.address.street +
								res
								.address.streetNum
						};
						uni.setStorageSync('jw_json', jw_json);
					},
					fail: function(error) {
						console.log(error)
						this.toast(JSON.stringify(error));
					},
				}));
			}
		}
	}
</script>

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