epc/pages/mobile/OemSearch.vue

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

		<!-- <view class="tab">
			<view class="tabLine" :class="{tabActive:tabIndex==0}" @click="tabClick(0)">品牌下搜索</view>
			<view class="tabLine" :class="{tabActive:tabIndex==1}" @click="tabClick(1)">车型下搜索</view>

		</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 class="history" v-if="inputValue.length==0">
			<view class="historyTop">
				<view class="historyTopTxt">示例数据</view>
				<!-- <image src="../../static/img/icon_delete.png" mode="" class="historyDelImg"></image> -->
			</view>
			<view v-for="(item,index) in 1" class="historyLIneBox">
				<view class="historyLIne" @click="goSearch('16400RZDH01')">16400RZDH01</view>
			</view>

		</view>


		<view @click="goCarModelList(item.partnum)" 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
			}
		},
		onLoad(opt) {
			console.log('opt+', opt);
			this.brand = opt.brand;
			this.epc_id = opt.epc_id;
			this.vin = opt.vin;
			this.token = opt.token;
			this.param = opt.param;
			this.access_time = opt.access_time;

		},
		methods: {
			search() {
				if (!this.inputValue) return;
				//console.log(this.inputValue);
				this.$emit('search', this.inputValue);
				this.page = 1;
				this.getItemData();
			},
			clear() {
				this.inputValue = ''
				this.$emit('search', '');
			},
			goCarModelList(partnum) {
				uni.navigateTo({
					url: 'CarModelList?epc_id=' + this.epc_id + '&partnum=' + partnum
				})
			},
			tabClick(num) {
				this.tabIndex = num;
			},
			
			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;

					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%);
		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>