front-end/hdApp/src/components/plugin/selectList.vue

<template>
	<view class="select-view">
		<view class="select-mark-view" v-show="showList" @click="touchMarkEvent">
		</view>
		<view class="content-view" @click.stop="touchContent">
			<slot> </slot>
			<view class="filter-view">
				<view class="filter-header">
					<view
						class="filter-title"
						v-for="(item, listIndex) in dataList"
						:key="listIndex"
					>
						<view @click="showListEvent(listIndex)">
							<text>{{ getListCheckName(item) }}</text>
							<text
								v-if="listIndex == curIndex"
								class="iconfont iconsanjiaoshang"
							></text>
							<text v-else class="iconfont iconsanjiao_xia"></text>
						</view>
					</view>
				</view>

				<view class="filter-list" v-if="showList">
					<view
						class="filter-item"
						v-for="(item, index) in dataList[curIndex].data"
						:key="index"
						@click="selectItemEvent(item)"
					>
						<text class="iconfont icondagou" v-if="item.checked"> </text>
						<text>
							{{ item.name }}
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { copyObject } from "@/utils/util";
const SELECT_TYPES = {
	RADIO: "radio",
	MULTIPLE: "multiple"
};
export default {
	props: {
		list: {
			type: Array,
			default() {
				return [
					//   {
					//       title:'',  //标题
					//        key:'',  //字段名
					//       data:[
					//           {
					//               name:'',
					//               value:''
					//           }
					//       ]
					//   }
				];
			}
		},
		type: {
			type: String,
			default: SELECT_TYPES.RADIO //multiple
		}
	},

	data() {
		return {
			curValue: "",
			curIndex: -1,
			showList: false,
			dataList: []
		};
	},
	onLoad() {},
	created() {
		this.initList();
	},
	computed: {
		curItemName() {
			let curlist = [];
			if (this.dataList && this.dataList[this.curIndex]) {
				curlist = this.dataList[this.curIndex].data;
			}
			let item = curlist.find(ele => {
				return ele.value == this.curValue;
			});
			if (item) {
				return item.name;
			}
			return false;
		}
	},
	methods: {
		initList() {
			this.dataList = [];
			for (const item of this.list) {
				let ele = copyObject(item);
				ele.data.forEach(element => {
					if (element.value == ele.default) {
						element.checked = true;
					} else {
						element.checked = false;
					}
				});
				this.dataList.push(ele);
			}
		},
		getListCheckName(info) {
			let name = info.title;
			for (const item of info.data) {
				if (item.checked) {
					name = item.name;
					break;
				}
			}
			return name;
		},
		touchContent() {},
		touchMarkEvent() {
			this.showList = false;
			this.curIndex = -1;
		},
		selectItemEvent(item) {
			if (SELECT_TYPES.RADIO == this.type) {
				let list = this.dataList[this.curIndex].data;
				list.forEach(element => {
					element.checked = false;
				});

				console.log(444444, list);
			}
			this.curValue = item.value;
			item.checked = true;

			this.$nextTick(() => {
				this.searchEvent();
			});
		},
		showListEvent(index) {
			this.curIndex = index;
			this.showList = true;
		},
		searchEvent() {
			this.showList = false;
			let params = this.getParams();
			this.$emit("search", params);
		},
		getParams() {
			let params = {};
			for (const item of this.dataList) {
				for (const listItem of item.data) {
					params[item.key] = "";
					if (listItem.checked) {
						params[item.key] = listItem.value;
						break;
					}
				}
			}
			return params;
		}
	},
	watch: {
		list(val, old) {
			if (val && val instanceof Array) {
				this.initList();
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.select-view {
	display: fixed;
	width: 100%;

	.select-mark-view {
		/*  #ifndef  H5  */
		height: 100vh;
		/*  #endif  */
		/*  #ifdef  H5  */
		height: 100%;
		/*  #endif  */
		position: absolute;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.content-view {
		position: relative;
		z-index: 1;
		.filter-view {
			.filter-header {
				display: flex;
				background-color: #fff;
				.filter-title {
					position: relative;
					flex: 1;
					height: 80upx;
					line-height: 80upx;
					text-align: center;
					&:not(:last-child):after {
						position: absolute;
						content: "";
						width: 1px;
						height: 50%;
						background-color: #dddddd;
						top: 50%;
						right: 0;
						transform: translateY(-50%);
					}
					.iconfont {
						font-size: 30upx;
					}
				}
			}
			.filter-list {
				position: absolute;
				top: 100%;
				left: 0;
				width: 100%;
				padding: 20upx 30upx;
				max-height: 400upx;
				background-color: #f8f9fb;
				border-radius: 0 0 25upx 25upx;
				.filter-item {
					width: 100%;
					height: 70upx;
					line-height: 70upx;
					font-size: 26upx;
					.iconfont {
						font-size: 36upx;
						color: $mainColor;
					}
					text {
						margin: 0 10upx;
					}
				}
			}
		}
	}
}
</style>