zd_wechatApp/components/selectPicker/select_picker.vue

<template>
	<view class="content">
		<view class="liy-select-fixed">
			<view class="liy-search-warp">

				<view class="liy-search-input">
					<view @click="closeOverlay">
						取消
					</view>
					<view class="lsi-warp">
						<image src="../../static/images/search.png" mode="widthFix" class="lsi-icon"></image>
						<input class="lsi-input" v-model="keyword" placeholder="请输入搜索内容" @input="getParamsList" />

					</view>
					<view @click="confirm">
						确定
					</view>
				</view>
				<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower">
					<view class="liy-search-list" v-if="outPutList.length > 0">
						<view class="liy-search-li" v-for="(item,index) in outPutList" :key="index"
							@click="mapSelectMenu(item,index)">
							<view class="liy-search-left">
								<view class="liy-search-title" v-if="titleKey">{{item[titleKey]}}
								</view>
								<view class="liy-search-title" v-else>未选择标题
								</view>
								<view class="liy-search-desc" v-if="subtitleKey">{{item[subtitleKey]}}</view>
							</view>
							<view class="liy-search-icon" v-if="mapSelectIndex == index">
								<image class="lsi-icon" src="../../static/images/check_mark.png" mode="widthFix">
								</image>
							</view>
						</view>
						<!-- <view class="liy-loading">
							<image class="liy-loading-img" src="../../static/images/complete.png" mode="widthFix">
							</image>
							<view class="liy-loading-text">加载完成</view>
						</view> -->
					</view>
					<view v-else class="liy-void">
						<image class="liy-void-img" src="../../static/images/void.png" mode="widthFix"></image>
						<view class="liy-void-text">未查询到内容</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="liy-overlay" @click="closeOverlay"></view>
	</view>
</template>

<script>
	export default {
		name: 'select_picker',
		props: {
			list: {
				type: Array,
				default: []
			},
			titleKey: {
				type: [String, null],
				default: null
			},
			subtitleKey: {
				type: [String, null],
				default: null
			},
		},
		data() {
			return {
				mapSelectIndex: null,
				keyword: "",
				outPutList: [],
				openClass: false
			}
		},
		watch: {
			list(newList, oldList) {
				this.getParamsList();
			},
		},
		created() {
			this.getParamsList();
		},
		methods: {
			mapSelectMenu(item, index) {
				this.mapSelectIndex = index;
				this.$emit("change", item, index)
				// this.$parent.open=false;
			},
			getParamsList() {
				var selectList = this.list;
				this.mapSelectIndex = null;
				if (!this.keyword) {
					this.outPutList = selectList;

					return false;
				}
				var arr = [];
				for (var i = 0; i < selectList.length; i++) {
					let item = selectList[i];
					if (item[this.titleKey].indexOf(this.keyword) > -1) {
						arr.push(item);
					} else {

					}
				}
				this.outPutList = arr;
			},
			lower() {

			},
			closeOverlay() {
				this.$emit("close");
			},
			confirm(){
				// console.log(this.mapSelectIndex)
			}
		}
	}
</script>

<style scoped lang="scss">
	.liy-overlay {
		transition-duration: 300ms;
		transition-timing-function: ease-out;
		position: fixed;
		inset: 0px;
		z-index: 100;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.liy-select-fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 150;
		transition: transform .5s ease-in-out;
		transform: translateY(calc(100% + 40rpx));

		animation: showHandler 0.3s forwards;

		.liy-search-warp {
			background: #fff;
			border-radius: 10rpx 10rpx 0 0;

			.liy-search-input {
				padding: 30rpx 40rpx;
				font-size: 28rpx;

				.lsi-warp {
					display: flex;
					align-items: center;
					border: 2rpx solid #e3e3e3;
					padding: 16rpx 20rpx;
					border-radius: 50rpx;

					.lsi-icon {
						width: 30rpx;
						height: 30rpx;
					}

					.lsi-input {
						width: 90%;
						padding-left: 16rpx;
						font-size: 28rpx;
					}
				}
			}

			.liy-search-list {
				.liy-search-li {
					padding: 20rpx 30rpx;
					display: flex;
					align-items: center;
					border-bottom: 1rpx solid #f7f7f7;
					min-height: 50rpx;

					.liy-search-left {
						width: 90%;

						.liy-search-title {
							font-size: 28rpx;
							line-height: 36rpx;
							color: #333;
						}

						.liy-search-desc {
							padding-top: 10rpx;
							font-size: 24rpx;
							line-height: 36rpx;
							color: #999;
						}
					}

					.liy-search-icon {
						.lsi-icon {
							width: 40rpx;
							height: 40rpx;
						}
					}

				}
			}

		}

	}

	.scroll-Y {
		height: 500rpx;
	}

	.liy-loading {
		color: #333;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;

		.liy-loading-img {
			width: 32rpx;
			height: 32rpx;
			// animation: turn 3s linear infinite;
		}

		.liy-loading-text {
			padding-left: 12rpx;
			padding-right: 32rpx;
		}
	}

	@keyframes turn {
		0% {
			transform: rotate(0deg);
		}

		25% {
			transform: rotate(90deg);
		}

		50% {
			transform: rotate(180deg);
		}

		75% {
			transform: rotate(270deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes showHandler {
		0% {
			transform: translateY(calc(100% + 40rpx));
		}

		100% {
			transform: translateY(0);
		}
	}

	@keyframes hideHandler {
		0% {
			transform: translateY(0);
		}


		100% {
			transform: translateY(calc(100% + 40rpx));
		}
	}

	.liy-void {
		text-align: center;
		padding-top: 60rpx;

		.liy-void-img {
			width: 40%;
		}

		.liy-void-text {
			padding-top: 30rpx;
			font-size: 26rpx;
			color: #909090;
		}
	}
</style>