assess-app/components/en-from/en-city/en-city.vue

<template>
	<view class="box">
		<view class="input-box" @click="showPickerObj">
			<view class="input-box-left size-28" :style="{'letter-spacing':labelWidth}">
				{{ label }}
			</view>
			<view class="input-box-right row-c">
				<text class="size-28 p-r10"
					:class="{'no-option':!optionName}">{{ optionName ? optionName : placeholder }}</text>
				<uni-icons type="forward" size="18" color="#D8D8D8"></uni-icons>
			</view>
		</view>
		<uni-data-picker :popup-title="'选择'+label" :localdata="localData" ref="pickerObj" v-show="showPicker"
			@change="pickerChange" :border="false" :clear-icon="false" @popupclosed="setPopupClosed">
		</uni-data-picker>
	</view>
</template>

<script>
	import {
		getRegion
	} from "@/api/common";
	import tools from "@/service/tools";

	export default {
		name: 'en-city',
		props: {
			label: {
				type: String,
				default: '地址'
			},
			placeholder: {
				type: String,
				default: '请选择地址'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			name: {
				type: String,
				default: 'text'
			},
			valueType: {
				type: String,
				default: '1'
			},
			value: {
				default: ''
			}
		},
		data() {
			return {
				localData: [],
				inputValue: [],
				optionName: '',
				labelWidth: 0,
				showPicker: false
			}
		},
		components: {},
		mounted() {
			this.setValue()
			this.setLabelWidth()
			this.getRegion()
		},
		watch: {
			'value': function() {
				this.setValue()
			},
			'inputValue': function() {
				console.log(this.inputValue)
				if (this.valueType === '1') {
					this.$emit('input', this.optionName)
				} else {
					this.$emit('input', this.optionName)
				}
			}
		},
		methods: {
			getRegion() {
				let localData = uni.getStorageSync('sysCityData')
				if (!localData) {
					getRegion({
						type: 1
					}).then((res) => {
						if (res.code === 1) {
							this.localData = res.data;
							uni.setStorageSync('sysCityData', JSON.stringify(this.localData))
						} else {
							tools.error(res.msg);
						}
					})
				} else {
					this.localData = JSON.parse(localData)
				}

			},
			setValue() {
				this.optionName = this.value
				// let value = this.value
				// if (!value) {
				//   value = []
				// } else if (typeof value === 'string') {
				//   value = value.split(',')
				// }
				// if (this.inputValue !== value) {
				//   this.inputValue = value
				//   this.optionName = "";
				//   this.localData.forEach((one) => {
				//     if (one.value + '' === this.inputValue[0] + '') {
				//       this.optionName += one.text + " ";
				//       if (one.children) {
				//         one.children.forEach((two) => {
				//           if (two.value + '' === this.inputValue[1] + '') {
				//             this.optionName += two.text + " ";
				//             if (two.children) {
				//               two.children.forEach((three) => {
				//                 if (three.value + '' === this.inputValue[2] + '') {
				//                   this.optionName += three.text + " ";
				//                 }
				//               })
				//             }
				//           }
				//         })
				//       }
				//     }
				//   })
				// }

			},
			setPopupClosed() {
				this.showPicker = false;
			},
			showPickerObj() {
				this.$refs.pickerObj.show();
				this.showPicker = true;
			},
			pickerChange(data) {
				this.optionName = "";
				this.inputValue = [];
				data.detail.value.forEach((item) => {
					this.optionName += item.text + " ";
					this.inputValue.push(item.value)
				});
				this.showPicker = false;
			},
			setLabelWidth() {
				let differenceNum = 4 - this.label.length;
				if (differenceNum === 2) {
					this.labelWidth = '2em'
				} else if (differenceNum === 1) {
					this.labelWidth = '0.5em'
				}
			}
		}

	}
</script>

<style lang="scss" scoped>
	@import url("../../static/css/en-common.css");

	::v-deep .selected-item-active {
		border-bottom: 2px solid #FF0000 !important;
	}

	.box {
		.input-box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.input-box-left {
				color: #333333;
			}

			.input-box-right {
				text-align: right;

				text {
					font-size: 28rpx;
					color: #333;
				}

				.iconfont {
					float: right;
				}

				.no-option {
					color: #999999;
				}

			}
		}
	}
</style>