epc/pages/mobile/SimpleOemSearch.vue

<template>
	<view class="box">
		<view class="brand">当前品牌：{{brand}}</view>

		<!-- 搜索 -->
		<view class="searchBox">
			<image src="../../static/img/icon_search.png" class="searchImg"></image>
			<input type="text" class="searchInput" placeholder='配件名称/原厂OEM' v-model="inputValue" @confirm="search" />
			<image src="../../static/img/icon_close.png" class="searchClose" v-if="inputValue!=''" @click="clear">
			</image>
		</view>

		<view @click="goCarModelList(item)" class="commentBox" v-for="(item,index) in itemList" :key="index">

			<view class="name">{{item.caption}}</view>
			<view class="comment">{{item.description}}</view>
			<view class="code">{{item.extened}}</view>
		</view>


	</view>
</template>

<script>
	export default {
		components: {

		},

		data() {
			return {
				inputValue: '',
				tabIndex: 0,

				historyList: [],
				itemData: {},
				itemList: [],
				brandList: [],
				brand: '',
				epc_id: '',
				vin: '',
				token: '',
				param: '',
				access_time: '',
				page: 1,
				total_page: 1,
				
				brand_name:'',
				title:'', //搜索
				caption:'',
			}
		},
		onLoad(opt) {
			this.brand = opt.brand_name;
			this.epc_id = opt.epc_id;
			this.vin = opt.vin;
			this.token = opt.token;
			this.param = opt.param;
			this.access_time = opt.access_time;
			this.brand_name = opt.brand_name;
			this.title = opt.title;
			this.inputValue = opt.title;
			this.caption = opt.caption;
			if(this.title){
				this.search();
			}
		},
		methods: {
			search() {
				if (!this.inputValue) return;
				this.$emit('search', this.inputValue);
				this.page = 1;
				this.getItemData();
			},
			clear() {
				this.inputValue = ''
				this.$emit('search', '');
			},
			goCarModelList(partnumObj) {
				let partnum = partnumObj.partnum;
				//查询 advancedEpc/findApplicableModels
				this.findApplicableModels(partnumObj);
				
			},
			tabClick(num) {
				this.tabIndex = num;
			},
			findApplicableModels(partnumObj){
				
				this.$http('/advancedEpc/findApplicableModels', {
					epc_id: this.epc_id,
					partnum: partnumObj.partnum,
					page: this.page
					
				}, 'GET').then(res => {
					
					if(res.code==0 && res.data.result.list.length > 0){
						const list = res.data.result.list;
						let thisItem = list.find(x => x.caption.includes(this.caption) )
						if(thisItem !=undefined){
							this.param = thisItem.param;
							this.token = thisItem.token;
							uni.navigateTo({
								url: 'SonGroup?epc_id=' + this.epc_id + '&token=' + this.token+'&param='+this.param
								+'&access_time='+this.access_time
							})
						}
						
					}
				});
			},
			getFindInModel(item){
				this.$http('/advancedEpc/findInModel', {
					epc_id: this.epc_id,
					token: item.token,
					param: item.param,
					access_time: this.access_time,
					page: this.page,
					
				}, 'GET').then(res => {
					if(res.code==0 && res.data.result.list.length > 0){
						const list = res.data.result.list;
						let thisItem = list.find(x => x.caption.includes(this.caption) )
						if(thisItem !=undefined){
							this.param = thisItem.param;
							this.token = thisItem.token;
						}
						
					}
				});
			},
			goSearch(str) {
				this.inputValue = str
				this.page = 1;
				this.getItemData();
			},
			// 配件查询
			getItemData() {
				uni.showLoading({
					title: '加载中'
				});
				this.$http('advancedEpc/findParts', {
					epc_id: this.epc_id,
					keyword: this.inputValue,
					vin: this.vin,
					token: this.token,
					param: this.param,
					access_time: this.access_time,
					page: this.page,
				}, 'GET').then(res => {
					uni.hideLoading();
					
					this.itemData = res.data.result;

					this.access_time = this.itemData.access_time;
					
					var list = res.data.result.list;

					this.total_page = res.data.result.total_page;
					if (this.page == 1) {
						this.itemList = list;
					} else if (list.length != 0) {
						this.itemList = this.itemList.concat(list)
					}
					if (this.itemList.length == 0) {
						uni.showToast({
							title: '暂无符合要求的配件',
							icon: 'none',
							duration: 2000
						});
					}


				});
			},

		},
		// 下拉刷新 上拉加载更多
		onPullDownRefresh() {
			// this.page = 1
			// this.getItemData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			if (this.page <= this.total_page) {
				this.page++;

				this.getItemData()
			}
		}
	}
</script>

<style>
	.box {
		min-height: 100vh;
		background: #FFFFFF;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.brand {

		/* background: linear-gradient(110deg, #48B9F9 0%, #3F90F7 100%); */
		background: #3F90F7;
		padding: 24rpx;
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.tab {
		background: #FFFFFF;
		display: flex;
		justify-content: space-around;
		line-height: 87rpx;
		/* position: fixed; */
		width: calc(100vw - 100rpx);
		padding-left: 50rpx;
		padding-right: 50rpx;
		height: 87rpx;
		/* z-index: 11; */
	}

	.tabLine {

		font-size: 32rpx;
		color: #999999;
		text-align: center;
	}

	.tabActive {
		color: #3F90F7;
		font-weight: bold;
		border-bottom: 4rpx solid #3F90F7;

	}

	.searchBoxBg {

		width: 100%;
		background-color: #FFFFFF;
		border-top: 1rpx solid #EEEEEE;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.searchBox {
		height: 72rpx;
		margin: 24rpx;
		background-color: #F4F5F7;
		border-radius: 36rpx;
		display: flex;
		position: relative;
	}

	.searchImg {
		margin-top: 20rpx;
		margin-left: 20rpx;
		width: 32rpx;
		height: 32rpx;
	}

	.searchInput {
		height: 72rpx;
		font-size: 28rpx;
		padding-left: 16rpx;
		width: 78%;
	}

	.searchClose {
		position: absolute;
		width: 36rpx;
		height: 36rpx;
		right: 36rpx;
		top: 20rpx;

	}

	.history {
		padding: 24rpx;
	}

	.historyTop {
		display: flex;
		justify-content: space-between;
	}

	.historyDelImg {
		width: 34rpx;
		height: 34rpx;
	}

	.historyTopTxt {
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
		line-height: 34rpx;
	}

	.historyLIneBox {
		display: inline-flex;

		flex-wrap: wrap;
	}

	.historyLIne {
		color: #333333;
		font-size: 24rpx;
		height: 64rpx;
		background: #F4F5F7;
		border-radius: 32rpx;
		line-height: 64rpx;
		padding: 0 24rpx;
		margin-top: 20rpx;
		margin-right: 24rpx;
	}

	.commentBox {

		padding: 20rpx 24rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}



	.name {
		color: #333333;
		font-size: 26rpx;
		font-weight: bold;
		padding-top: 16rpx;
		padding-bottom: 10rpx;
	}

	.comment {
		color: #999999;
		font-size: 24rpx;
		padding-bottom: 14rpx;
	}



	.code {
		color: #3F90F7;
		font-size: 24rpx;
	}
</style>