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">{{item.desc}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	let domain = require("@/utils/domain")
	export default {
		data() {
			return {
				keyword: "",
				list: [
					{name:'如何查看设备是否开启如何查看设备是否开启',desc: '1、打开小程序查看设备管理查看设备电量；'},
					{name:'如何查看设备开否联网',desc: '1、打开小程序查看设备管理查看设备电量；2、通过PC设备监控查看设备电量。'},
					{name:'如何查看设备是开了电',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%;
		margin-top: 36rpx;
		padding: 0 30rpx;
		.list-item{
			width: 690rpx;
			padding: 24rpx 0;
			border-bottom: 1rpx solid #E0E0E0;
			&:last-child{
				border: 0;
			}
			.title{
				width: 690rpx;
				height: 42rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 42rpx;
				margin-bottom: 16rpx;
				display: flex;
				.blue{
					line-height: 42rpx;
					color: #2671E2;
					display: inline-block;
				}
			}
			.desc{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
			}
		}
	}
}

</style>