newEdition/pages/mine/help/helpSearch.vue

<template>
	<view class="help-box">
		<view class="search-box">
			<u-search placeholder="输入要搜索的问题" @change="searchFun" :show-action="true" action-text="搜索" shape="round" v-model="keyword"></u-search>
		</view>
		<view class='result-box'>
			<view class='list-item' @click="todetail(item)" v-for="(item,index) in list" :key="index">
				<view class="title u-line-2">
					{{keywordColor1(item.name)}}<text class="blue">{{keyword}}</text>{{keywordColor2(item.name)}}
				</view>
				<view class="desc u-line-2">{{item.desc}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	let domain = require("@/utils/domain")
	export default {
		data() {
			return {
				keyword: "",
				list: [
					{name:'您好，职工管家为您服务，你这边大概是想要什么样的户型？我们这边只要是有ABC这三种户型，分别有120平以内的，120到260之间的，300平以上的',desc: '1、打开小程序查看设备如何查看设备是否开启如何查看设备是否开启管理查看设备电量；'},
					{name:'如何查看设备开否联网',desc: '您好，职工管家为您服务，你这边大概是想要什么样的户型？我们这边只要是有ABC这三种户型，分别有120平以内的，120到260之间的，300平以上的'},
					{name:'你这边大概是想要什么样的户型？我们这边只要是有ABC这三种户型',desc: '打开小程序查看设备管理查看设备电量。'},
					{name:'如何查看设备是否开电',desc: '打开小程序查看设备管理查看设备电量。'},
				]
			};
		},
		onShow() {
		},
		computed: {
			
		},
		created(){
		},
		methods: {
			
			searchFun(){

			},
			todetail(item){
				uni.navigateTo({
					url: '/pages/mine/help/helpDetail'
				})
			},
			keywordColor1(name1){
				let name = name1
				if(!name||!this.keyword) return ''
				let index = name.indexOf(this.keyword)
				let pre = name.slice(0,index)
				return pre
			},
			keywordColor2(name1){
				let name = name1
				if(!name||!this.keyword) return ''
				let index = name.indexOf(this.keyword)
				let last = name.slice(index + this.keyword.length)
				return last
			},
		},
	}
</script>

<style lang="scss">
.help-box{
	width: 100%;
	height: 100%;
	.search-box{
		width: 690rpx;
		height: 70rpx;
		margin-top: 16rpx;
		margin-left: 30rpx;
	}
	.result-box{
		width: 100%;
		padding: 0 30rpx;
		.list-item{
			width: 690rpx;
			padding: 24rpx 0;
			border-bottom: 1rpx solid #E0E0E0;
			&:last-child{
				border: 0;
			}
			.title{
				width: 690rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 42rpx;
				margin-bottom: 16rpx;
				.blue{
					line-height: 42rpx;
					color: #2671E2;
					display: inline;
				}
			}
			.desc{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
			}
		}
	}
}

</style>