search.vue

<template>
	<!-- 搜索界面 -->
	<view class="">
		<u-navbar :is-back="true" :borderBottom="false" :background="{ backgroundColor: '#F5F5F5' }" title="">
			<view class="slot-wrap">
				<view class="search-wrap">
					<u-search
						@change="changeCli"
						@search="searchEng"
						bg-color="#fff"
						border-color="#d5aa7a"
						placeholder="请输入名称"
						:show-action="false"
						v-model="value"
					></u-search>
				</view>
			</view>
		</u-navbar>
		<!-- 列表 -->
		<view class="home_con_order u-p-l-30 u-p-r-30">
			<view class="u-flex u-m-t-30 hs-height-120 u-border-bottom" @click="searchEng(item.materialName)" v-for="item in fiabricList">
				<image class="hs-img-48 u-m-r-20" src="@/static/images/home/search@2x.png" mode=""></image>
				<text class="u-font-28 u-flex-1 text-cut" v-html="brightenKeyword(item.materialName,value)"></text>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import home from '../mixin/index.js';
export default {
	mixins: [home],
	data() {
		return {
			value: '',
			size: 10,
			total: 0,
			state: 1,
			fiabricList: []
		};
	},
	onLoad(option) {
		this.state = option.state;
	},
	methods: {
		brightenKeyword(val, keyword) {
			val = val + '';
			if (val.indexOf(keyword) !== -1 && keyword !== '') {
				return val.replace(keyword, '<font color="#AF8D66">' + keyword + '</font>');
			} else {
				return val;
			}
		},
		filterSwitch() {
			const val = this.state;
			switch (val) {
				case 1:
					// 款式
					this.entrustmentPage();
					return;
				case 2:
					// 建模
					return;
				default:
					// 款式
					this.entrustmentPage();
					return;
			}
		},
		changeCli() {
			this.size = 10;
			this.filterSwitch();
		},
		searchEng(item) {
			let data = item || this.value;
			try {
				uni.setStorageSync('styleSearch', data);
				uni.navigateBack({
					delta: 1
				});
			} catch (e) {
				// error
			}
		},
		// 款式委托
		entrustmentPage() {
			this.$http(
				'orderTicket.entrustmentPage',
				{
					size: this.size,
					materialCode: '',
					status: 0,
					materialName: this.value
				},
				'加载中...'
			)
				.then(res => {
					let { code, data } = res;
					if (code == 200) {
						this.fiabricList = data.data;
						this.total = data.total;
						this.$refs.uToast.show({
							title: '操作成功'
						});
					}
				})
				.catch(err => {
					this.$refs.uToast.show({
						title: '操作失败'
					});
				});
		}
	}
};
</script>
<style lang="scss" scoped>
.slot-wrap {
	display: flex;
	align-items: center;
	flex: 1;
}
.search-wrap {
	margin: 0 20rpx;
	flex: 1;
}
.ver_middle {
	vertical-align: middle;
}
</style>