jobslink-user-clent/pageMy/my/resume/selectTemplate.vue

<template>
	<view class="select-template">
		<view class="select-template-head">
			<view class="titles">
				{{title}}
			</view>
			<view class="slo">
				{{slo}}
			</view>
			<view class="seach" v-if="search">
				<image class="seach-image" src="../../../static/img/search.svg" mode=""></image>
				<input type="text" v-model="inputValue" placeholder="请输入技能名称" placeholder-style="color:#ccc" />
			</view>
			<view class="borderbotom" v-if="search"></view>
			<view class="scroll-view" v-if="searchShow" :style="{top:height}">
				<ul class="search-result">
					<li class="search-result-list" v-for="(item,index) in searchResultList" :key="index" @click="handlerSelect(item)">
						<div class="search-result-list-title">
							<rich-text :nodes="getInf(item)"></rich-text>
						</div>
					</li>
				</ul>
			</view>
		</view>
		<view :style="{height}"></view>
		<view class="levelbody" v-if="!searchShow">
			<block v-for="(item,index) in list" :key="index">
				<view v-bind:class="['levellist', {checked:item[prop.key] === activeId}]" @click="chooseLev(item)">
					{{item[prop.name]}}
				</view>
			</block>
		</view>
		<view class="bottom"></view>
		<view class="btn">
			<view v-if="activeId" class="bottombtn" @click="submit">确定</view>
			<view v-else class="bottombtn disabledBtn">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			search: Boolean,
			title: String,
			slo: String,
			list: Array,
			prop: {
				type: Object,
				default () {
					return {
						name: 'name',
						key: 'id'
					}
				}
			}
		},
		data() {
			return {
				height: '0px',
				inputValue: '',
				activeName: '',
				activeId: '',
				searchShow: false,
			}
		},
		// 在test.vue页面接受参数
		onLoad: function({
			id
		}) {
			this.activeId = id
		},
		mounted() {
			// uni.createSelectorQuery().in(this).select('.select-template-head').boundingClientRect().exec((node) => {
			// 	this.height = node[0].height + 'px'
			// });
		},
		computed: {
			searchResultList() {
				const prop = this.prop
				if (this.inputValue && this.searchShow) {
					return this.list.filter(item => {
						return item[prop.name].indexOf(this.inputValue) !== -1
					})
				} else {
					return undefined
				}
			}
		},
		methods: {
			getInf(item) {
				const key = this.inputValue
				const str = item[this.prop.name]
				let replaceReg = new RegExp(key, 'g') // 匹配关键字正则
				let replaceString = "<span style='color: #1b66ff;'>" + key + "</span>" // 高亮替换
				return str.replace(replaceReg, replaceString);
			},
			setActiveId(id) {
				this.activeId = id
			},
			chooseLev(item) {
				const prop = this.prop
				this.activeId = item[prop.key]
				this.activeName = item[prop.name]
			},
			handlerSelect(item) {
				this.searchShow = false
				this.chooseLev(item)
			},
			submit() {
				this.$emit('submit', {
					id: this.activeId,
					name: this.activeName
				})
			}
		},
		watch: {
			inputValue(val) {
				this.searchShow = !!val
			}
		}
	}
</script>

<style scoped>
	.select-template {
		background-color: #fefefe;
	}

	.select-template-head {
		background-color: #fefefe;
		position: fixed;
		width: 100%;
		top: 0;
	}

	/*搜索结果*/
	.scroll-view {
		width: 100%;
		flex: 1;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.search-result {
		background-color: #fff;
		padding: 0rpx;
	}

	.search-result-list {
		font-weight: normal;
		text-align: left;
		border-bottom: 1rpx solid #f2f2f2;
		padding: 28rpx 30rpx;
		list-style: none;
	}

	.search-result-list-title {
		font-size: 32rpx;
		color: #333333;
	}

	.highlight {
		color: #1b66ff;
	}

	.borderbotom {
		width: 720rpx;
		margin-left: 30rpx;
		border-bottom: 2rpx solid #ddd;
	}

	.seach-image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 15rpx;
	}

	.seach {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 30rpx;

	}

	.levellist.checked {
		color: #1B66FF !important;
		border: 1rpx solid #1B66FF;
		background: rgba(77, 136, 255, 0.10) !important;
	}

	.levellist {
		background: #f6f6f6;
		border: 1rpx solid #f6f6f6;
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #666666;
		text-align: center;
		margin-right: 15rpx;
		padding: 10rpx 15rpx;
		border-radius: 5rpx;
		margin: 0 30rpx;
		margin-top: 25rpx;
	}

	.levelbody {
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.bottom {
		height: 200rpx;
	}

	.bottombtn {
		background-color: #1b66ff;
		color: #fff;
		text-align: center;
		border-radius: 10rpx;
		font-family: PingFangSC-Medium;
		font-size: 32rpx;
		height: 90rpx;
		line-height: 90rpx;
	}

	.disabledBtn {
		background-color: #c8c9cc;
	}

	.btn {
		background-color: #fefefe;
		width: 690rpx;
		padding: 30rpx;
		padding-bottom: 80rpx;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.slo {
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #999999;

		padding: 0 30rpx;
		padding-top: 10rpx;
	}

	.titles {
		font-family: PingFangSC-Medium;
		font-size: 40rpx;
		color: #333333;
		font-weight: bold;
		padding: 0 30rpx;
		padding-top: 30rpx;
	}

	.border {
		margin-left: 30rpx;
		width: 720rpx;
		border-bottom: 2rpx solid #ddd;
		opacity: 0.6;
	}

	.jobText {
		font-family: PingFangSC-Regular;
		font-size: 32rpx;
		color: #666666;
	}

	.jobAddress {
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #999999;
	}

	.jobcontent {
		padding: 30rpx;

		background: #fefefe;
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 63rpx;
	}

	.jobcontent image {
		width: 40rpx;
		height: 40rpx;

	}

	.listBody {}

	.list_text {
		font-family: PingFangSC-Regular;
		font-size: 32rpx;
		color: #666666;
	}

	.list image {
		width: 40rpx;
		height: 40rpx;
		margin-left: auto;
	}

	.list {
		padding: 0 30rpx;
		height: 126rpx;
		background: #fefefe;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

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

	.title {
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #999999;
		display: flex;
		padding: 10rpx 30rpx;
		background-color: #fefefe;
		align-items: center;
		justify-content: space-between;
	}

	.userInfo {
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #999999;
	}

	.name {
		margin-left: 20rpx;
		font-family: PingFangSC-Medium;
		font-size: 36rpx;
		color: #333333;
		line-height: 50rpx;
	}

	.head image:last-child {
		width: 40rpx;
		height: 40rpx;
		margin-left: auto;
	}

	.head image {
		width: 100rpx;
		height: 100rpx;
	}

	.head {
		padding: 30rpx;
		width: 690rpx;
		background-color: #fefefe;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
</style>