assess-app/page_task/apply/components/property-select.vue

<template>
	<view class="box">
		<view class="input-box row-justify-sb center">
			<view class="input-box-left" :style="{'letter-spacing':labelWidth}">
				{{ label }}
			</view>
			<view class="row-c" @click="showUploadingImg(true)">
				<text class="p-r10 size-28"
					:class="{'no-option':!optionName}">{{ optionName ? optionName : placeholder }}</text>
				<uni-icons type="forward" size="18" color="#D8D8D8"></uni-icons>
			</view>
		</view>
		<uni-popup ref="popup" :safeArea="false" type="bottom" @change="closePopup">
			<view class="popup-block">
				<view class="popup-title">
					<view class="popup-title-text">选择资产</view>
					<view class="title-del" @click="showUploadingImg(false)">
						<image src="/page_task/static/img/information/del-title.png"></image>
					</view>
				</view>
				<view class="add-row" @click.stop="setAddId(addItem.value)"
					:class="{'checked-row':inputValue.indexOf(addItem.value)>=0,'row-one':addItem.type===2,'row-two':addItem.type===3,'row-three':addItem.type===4}"
					v-for="addItem in localData">
					<view class="row-data">
						<view class="row-item row-content">
							<view class="content-title">{{addItem.text}}</view>
							<view class="content-remark">{{addItem.remark}}</view>
						</view>
						<view class="row-item">
							<text class="iconfont">
								&#xe621;
							</text>
						</view>
					</view>

				</view>

				<view class="add-but" @click.stop="showUploadingImg(false)">确定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: 'property-select',
		props: {
			'propertyList': {
				default: []
			},
			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 {
				addList: [],
				inputValue: [],
				localData: [],
				optionName: '',
				labelWidth: 0,
				showPicker: false
			}
		},
		components: {},
		mounted() {
			this.setLocalData()

			this.setLabelWidth()
		},
		watch: {
			'value': function() {
				this.setValue()
			},
			'inputValue': function() {
				this.$emit('input', this.inputValue)
				this.setValue()
			},
			'propertyList': function() {
				this.setLocalData()
			}
		},
		methods: {
			closePopup(e) {

			},
			setLocalData() {
				// 设置资产选择列表
				this.localData = [];
				let typeOne = 1;
				let typeTwo = 1;
				let typeThree = 1;
				let typeFour = 1;
				this.propertyList.forEach((item) => {
					let propertyType = item.property_type * 1;
					let propertyItem = {
						'value': item.property_sn,
						'type': propertyType
					}
					if (propertyType === 1) {
						propertyItem.text = '房产信息(' + typeOne + ')'
						propertyItem.remark = '房产地址：' + item.data.house_address
							++typeOne;
					} else if (propertyType === 2) {
						propertyItem.text = '车辆信息(' + typeTwo + ')'
						propertyItem.remark = '车牌号：' + item.data.car_num
							++typeTwo;
					} else if (propertyType === 3) {
						propertyItem.text = '保单信息(' + typeThree + ')'
						propertyItem.remark = '保险公司：' + item.data.insurance_name
							++typeThree;
					} else {
						propertyItem.text = '企业信息(' + typeFour + ')'
						propertyItem.remark = '企业名称：' + item.data.firm_name
							++typeFour;
					}
					this.localData.push(propertyItem)
				})
				this.setValue()
			},
			setAddId(id) {
				console.log('id:' + id)
				let key = this.inputValue.indexOf(id)
				if (key >= 0) {
					this.inputValue.splice(key, 1)
				} else {
					this.inputValue.push(id)
				}
			},
			showUploadingImg(showImg) {
				this.addItemIds = []
				if (showImg) {
					this.$refs.popup.open("bottom");
				} else {
					this.$refs.popup.close();
					this.isUploading = false
				}
			},
			setValue() {
				this.inputValue = this.value
				if (this.inputValue) {
					this.optionName = "";
					this.localData.forEach((one) => {
						if (this.inputValue.indexOf(one.value) >= 0) {
							if (this.optionName) this.optionName += "，"
							this.optionName += one.text;
						}
					})
				}
			},
			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 "@/components/static/css/en-common.css";

	.box {

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

			.input-box-left {
				font-size: 28rpx;
				color: #333333;
			}

			.no-option {
				color: #999999;
			}

			.input-box-text {
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
		}

		.popup-block {
			border-radius: 20rpx 20rpx 0 0;
			background: #F6F7FB;
			padding: 0 0 calc(env(safe-area-inset-bottom) - 10rpx);
			max-height: 60vh;
			overflow-y: auto;

			.popup-title {
				background: #fff;
				border-bottom: 2rpx solid #F0F0F0;
				padding: 40rpx 0;
				position: relative;

				.popup-title-text {
					text-align: center;
					font-size: 34rpx;
					font-weight: 600;
				}

				.title-del {
					position: absolute;
					top: 40rpx;
					right: 40rpx;

					image {
						height: 40rpx;
						width: 40rpx;
					}
				}

			}

			.add-row {
				margin: 20rpx 32rpx 0;
				background: #F20303;
				border-radius: 10rpx;
				height: 144rpx;
				position: relative;

				.row-data {
					position: absolute;
					left: 4rpx;
					top: -1rpx;
					box-sizing: border-box;
					//padding: 36rpx 30rpx;
					width: 100%;
					height: 148rpx;
					display: flex;
					justify-content: space-between;
					background: #fff;
					border-radius: 10rpx;

					.row-item {
						color: #333333;
						font-size: 32rpx;
					}

					.row-item:last-child {
						display: none;
					}

					.row-content {
						padding: 36rpx 26rpx;

						.content-title {
							color: #333333;
							font-size: 32rpx;
							font-weight: 600;
							height: 45rpx;
							line-height: 45rpx;
						}

						.content-remark {
							margin-top: 24rpx;
							color: #999999;
							font-size: 24rpx;
							height: 39rpx;
							line-height: 39rpx;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
							overflow: hidden;
						}
					}
				}


			}

			.row-one {
				background: #219653;
			}

			.row-two {
				background: #FD8537;
			}

			.row-three {
				background:#219653;
			}

			.checked-row {
				.row-data {
					.row-item:last-child {
						margin-top: 35rpx;
						margin-right: 28rpx;
						display: block;

						.iconfont {
							color: #219653;
							font-size: 42rpx;
						}
					}
				}

			}

			.add-but {
				margin: 50rpx 32rpx 0;
				border-radius: 10rpx;
				padding: 36rpx 30rpx;
				font-size: 32rpx;
				color: #fff;
				text-align: center;
				background: #219653;
			}
		}
	}
</style>