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="searchBoxBg">
			<searchBox placeholder="配件名称/原厂OEM" @search='search($event)'></searchBox>
		</view>


		<!-- <view class="history" v-if="searchValue.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 historyList" class="historyLIneBox">
				<view class="historyLIne" @click="gogroup">前刹车片</view>
			</view>

		</view> -->


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

			<view class="name">{{item.caption}}</view>
			<view class="comment">{{item.description}}</view>
			<view @click="goCarModelList(item.partnum)" class="code">{{item.extened}}</view>
		</view>


	</view>
</template>

<script>
	import searchBox from '@/components/searchBox/searchBox.vue'
	export default {
		components: {
			searchBox
		},

		data() {
			return {
				tabIndex: 0,
				searchValue: '',
				historyList: [1, 2, 3, 4, 5],
				itemData: {},
				itemList: [],
				brandList: [],
				brand: '',
				epc_id: '1014',
				page: 1,
				total_page: 1
			}
		},
		onLoad(opt) {
			console.log('opt+',opt);
			this.brand = opt.brand;
			this.epc_id = opt.epc_id;
			
			
		},
		methods: {
			goCarModelList(partnum) {
				uni.navigateTo({
					url: 'CarModelList?epc_id=' + this.epc_id + '&partnum=' + partnum
				})
			},
			tabClick(num) {
				this.tabIndex = num;
			},
			search(val) {
				// console.log(val);
				this.searchValue = val
				this.page = 1;
				this.getItemData();
			},
			
			// 配件查询
			getItemData() {
				uni.showLoading({
					title: '加载中'
				});
				this.$http('advancedEpc/findParts', {
					epc_id: this.epc_id,
					keyword: this.searchValue,
					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 (list.length != 0) {
						this.itemList = this.itemList.concat(list)
					}
					
					

				});
			},

		},
		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 {
		display: flex;
		height: 72rpx;
		margin: 24rpx;
		background-color: #F4F5F7;
		border-radius: 36rpx;
	}

	.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>