|
|
@@ -0,0 +1,295 @@
|
|
|
+<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>
|
