epc/pages/mobile/OESearch.vue

<template>
	<view class="box">
		<!-- <view class="brand">当前品牌：{{this.itemList[0].brands}}</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='OE/品牌号' 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('16176RTA004')">16176RTA004</view>
			</view>

		</view>


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

			<view class="name">{{item.description}}</view>
			<view class="comment">{{item.brands}}</view>
			<view class="code">{{inputValue}}</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,
				om:'',
			}
		},
		onLoad(opt) {
			console.log('opt+', opt);
			this.om = opt.om;
			this.inputValue=opt.om
			this.find()

		},
		methods: {
			search() {
				if (!this.inputValue) return;
				//console.log(this.inputValue);
				this.$emit('search', this.inputValue);
				this.page = 1;
				this.find();
			},
			clear() {
				this.inputValue = ''
				this.$emit('search', '');
			},
			goCarModelList(partnum) {
				uni.navigateTo({
					url: 'OEDetail?partnum=' + partnum
				})
			},
			tabClick(num) {
				this.tabIndex = num;
			},
			
			goSearch(str) {
				this.inputValue = str
				this.page = 1;
				this.getItemData();
			},
			// 配件查询
			find() {
				uni.showLoading({
					title: '加载中'
				});
				this.$http('advancedEpc/parts/find', {
					partsnums: this.inputValue,
				}, 'GET').then(res => {
					uni.hideLoading();
                    if (res.data.number == 200 || res.data.number == 5212) {
                    	this.itemList=res.data.result
                    				
                    } else {
                    	uni.showToast({
                    		title: res.data.message,
                    		icon: 'none',
                    		duration: 3000
                    	});
                    }
					


				});
			},

		},
		// 下拉刷新 上拉加载更多
		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>