crm/resources/wechat/src/components/selectDesigner.vue

<template>
	<div class="xq-community-component">
		<div class="xq-community-mask" v-if="showDesigner" @click="showDesigner=false;">
			<div class="xq-community-block" @click.stop>
				<div class="xq-community-title font30">选择设计师</div>
				<div class="xq-community-content">
					<van-search v-model="keyword" show-action placeholder="请输入搜索关键词" @search="onSearch">
						<template #action>
							<div @click="onSearch">搜索</div>
						</template>
					</van-search>
					<van-radio-group v-model="val" @change="getChangeFunc">
						<van-cell-group>
							<template v-for="item in list">
								<van-cell :title="item.name" :key="item.id" clickable @click="val = item.id">
									<template #right-icon>
										<van-radio :name="item.id" />
									</template>
								</van-cell>
							</template>
						</van-cell-group>
					</van-radio-group>
					<!-- 搜索提示 -->
					<van-empty v-if="!list.length" image="search" description="没有查找到内容！" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		Search,
		RadioGroup,
		Radio,
		Empty
	} from 'vant';
	export default {
		components: {
			[Search.name]: Search,
			[RadioGroup.name]: RadioGroup,
			[Radio.name]: Radio,
			[Empty.name]: Empty
		},
		props: {
			dataArr: {
				type: Array,
				default: () => {
					return [];
				}
			},
			value: {
				type: String|Number,
				default: ""
			}
		},
		data() {
			return {
				showDesigner: false,
				keyword: "",
				val: "",
				list: [],
			}
		},
		watch: {
			dataArr: {
				handler(val) {
					if (val.length) {
						this.list = JSON.parse(JSON.stringify(val));
					}
				},
				immediate: true
			},
			value: {
				handler(val) {
					if (val) {
						this.val = parseInt(val);
					}
				},
				immediate: true
			}
		},
		methods: {
			onSearch() {
				if (this.keyword.trim()) {
					this.list = this.dataArr.filter(item => {
						if (item.name.indexOf(this.keyword) > -1) {
							return item;
						}
					})
				} else {
					this.list = JSON.parse(JSON.stringify(this.dataArr));
				}
			},
			getChangeFunc(e) {
				let item = this.dataArr.filter(v => v.id == e);
				this.$emit('setValClick',item[0]);
				this.showDesigner = false;
			}
		}
	}
</script>

<style scoped lang="less">
	.xq-community-component {
		.xq-community-mask {
			width: 100%;
			height: 100vh;
			position: fixed;
			top: 0px;
			left: 0px;
			background-color: rgba(0, 0, 0, 0.4);

			.xq-community-block {
				width: 100%;
				height: 70%;
				background-color: #fff;
				position: absolute;
				bottom: 0px;
				left: 0px;
				box-sizing: border-box;
				padding-top: 88px;

				.xq-community-title {
					width: 100%;
					height: 88px;
					background-color: #249EFB;
					color: #fff;
					text-align: center;
					line-height: 88px;
					position: absolute;
					top: 0px;
					left: 0px;
				}

				.xq-community-content {
					width: 100%;
					height: 100%;
					overflow: auto;
				}
			}
		}
	}
</style>