From 292e8bdfb1cde19347972e3164eccabc0473143a Mon Sep 17 00:00:00 2001
From: zhouxueli <2841188632@qq.com>
Date: Fri, 7 Mar 2025 17:22:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=8C=E6=89=8B=E8=BD=A6=E4=BA=A4=E6=98=93?=
 =?UTF-8?q?=EF=BC=8C=E9=9D=99=E6=80=81=E5=88=97=E8=A1=A8=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                   |   2 +
 src/router/second-hand-router.js      |  11 +
 src/styles/common.scss                |   1 -
 src/views/secondHandCar/indexList.vue | 392 ++++++++++++++++++++++++++
 4 files changed, 405 insertions(+), 1 deletion(-)
 create mode 100644 src/router/second-hand-router.js
 create mode 100644 src/views/secondHandCar/indexList.vue

diff --git a/src/router/index.js b/src/router/index.js
index 3be42fd9..4b1fd4b4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,6 +3,7 @@ import VueRouter from "vue-router";
 Vue.use(VueRouter);
 import kpiRouter from './kpi-router'
 import invoiceRouter from "@/router/invoice-router";
+import secondHandRouter from "@/router/second-hand-router";
 const routes = [
     {
       path: '/',
@@ -267,6 +268,7 @@ const routes = [
     },
     ...kpiRouter,
     ...invoiceRouter,
+    ...secondHandRouter,
   ]
 
 const router = new VueRouter({
diff --git a/src/router/second-hand-router.js b/src/router/second-hand-router.js
new file mode 100644
index 00000000..47a047e4
--- /dev/null
+++ b/src/router/second-hand-router.js
@@ -0,0 +1,11 @@
+const kpiRouter = [
+    {
+        path: '/indexList',
+        name: 'indexList',
+        component: () => import('@/views/secondHandCar/indexList.vue'),
+        meta:{
+            title: '首页列表',
+        }
+    },
+]
+export default kpiRouter
diff --git a/src/styles/common.scss b/src/styles/common.scss
index b440e15f..79b9b150 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -45,7 +45,6 @@ select{
   margin-left: 0;
   font-weight: normal;
   font-size: 14px;
-  //@include fontWeightSize(400,14px);
   color: #000000;
 }
 
diff --git a/src/views/secondHandCar/indexList.vue b/src/views/secondHandCar/indexList.vue
new file mode 100644
index 00000000..e1c9c7f3
--- /dev/null
+++ b/src/views/secondHandCar/indexList.vue
@@ -0,0 +1,392 @@
+<template>
+  <div class="wrap">
+    <div class="headerWrap">
+      <img class="bg" src="@/assets/secondHandCar/bg.png" />
+      <img class="mine" src="@/assets/secondHandCar/mine.png" />
+      <el-input
+          placeholder="请输入"
+          v-model="keyword">
+        <img slot="suffix" class="search" src="@/assets/secondHandCar/search.png" />
+      </el-input>
+    </div>
+    <div class="firstTab">
+      <div>
+        <img class="big com" v-show="activeTab === 0"  src="@/assets/secondHandCar/cheyuanBig.png" @click="activeTab = 0" />
+        <img class="small com" v-show="activeTab === 1" src="@/assets/secondHandCar/cheyuanSmall.png" @click="activeTab = 0"/>
+        <img class="big" v-show="activeTab === 1" src="@/assets/secondHandCar/qiugouBig.png" @click="activeTab = 1"/>
+        <img class="small" v-show="activeTab === 0" src="@/assets/secondHandCar/qiugouSmall.png" @click="activeTab = 1"/>
+      </div>
+      <div>
+        <img class="suggest" src="@/assets/secondHandCar/suggest.png" />
+      </div>
+    </div>
+    <div class="filterWrap">
+      <el-select v-model="plateType" placeholder="牌照类型" class="customSel">
+        <el-option
+            v-for="item in plateTypeOption"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+        </el-option>
+      </el-select>
+      <el-select v-model="vehicleType" placeholder="车辆类型" class="customSel">
+        <el-option
+            v-for="item in vehicleTypeOption"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+        </el-option>
+      </el-select>
+      <el-select v-model="price" placeholder="价格区间" class="customSel">
+        <el-option
+            v-for="item in priceOption"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+        </el-option>
+      </el-select>
+      <el-select v-model="paiFang" placeholder="排放标准" class="customSel">
+        <el-option
+            v-for="item in paiFangOption"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+        </el-option>
+      </el-select>
+      <el-select v-model="luoBan" placeholder="落板方式" class="customSel">
+        <el-option
+            v-for="item in luoBanOption"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+        </el-option>
+      </el-select>
+    </div>
+    <div class="contentWrap" v-show="!showEmpty">
+      <van-pull-refresh v-model="isLoading" @refresh="onRefresh"  style="min-height:85vh">
+        <div class="contentItem">
+          <div class="item">
+            <div class="left">
+              <img  src="@/assets/secondHandCar/45angle.png" />
+            </div>
+            <div class="right">
+              <div class="title">牵引车</div>
+              <div class="type">全落地 | 黄牌 | 粤海 | 18万km | 国5</div>
+              <div class="date">注册日期： 2025-03-07</div>
+              <div class="price"><span>￥</span> <span>10.25</span> <span>万</span> </div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="left">
+              <img  src="@/assets/secondHandCar/45angle.png" />
+            </div>
+            <div class="right">
+              <div class="title">牵引车</div>
+              <div class="type">全落地 | 黄牌 | 粤海 | 18万km | 国5</div>
+              <div class="date">注册日期： 2025-03-07</div>
+              <div class="price"><span>￥</span> <span>10.25</span> <span>万</span> </div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="left">
+              <img  src="@/assets/secondHandCar/45angle.png" />
+            </div>
+            <div class="right">
+              <div class="title">牵引车</div>
+              <div class="type">全落地 | 黄牌 | 粤海 | 18万km | 国5</div>
+              <div class="date">注册日期： 2025-03-07</div>
+              <div class="price"><span>￥</span> <span>10.25</span> <span>万</span> </div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="left">
+              <img  src="@/assets/secondHandCar/45angle.png" />
+            </div>
+            <div class="right">
+              <div class="title">牵引车</div>
+              <div class="type">全落地 | 黄牌 | 粤海 | 18万km | 国5</div>
+              <div class="date">注册日期： 2025-03-07</div>
+              <div class="price"><span>￥</span> <span>10.25</span> <span>万</span> </div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="left">
+              <img  src="@/assets/secondHandCar/45angle.png" />
+            </div>
+            <div class="right">
+              <div class="title">牵引车</div>
+              <div class="type">全落地 | 黄牌 | 粤海 | 18万km | 国5</div>
+              <div class="date" v-show="activeTab==0">注册日期： 2025-03-07</div>
+              <div class="price"><span>￥</span> <span>10.25</span> <span>万</span> </div>
+            </div>
+          </div>
+        </div>
+      </van-pull-refresh>
+      <img v-show="activeTab==0" class="fixImg" src="@/assets/secondHandCar/sellCar.png" />
+      <img v-show="activeTab==1" class="fixImg" src="@/assets/secondHandCar/buyCar.png" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {myMixins} from "@/utils/myMixins"
+export default {
+  name: "indexList",
+  computed: {
+  },
+  mixins:[myMixins],
+  data(){
+    return{
+      pageList:[],
+      keyword:'',
+      activeTab:0,
+      showEmpty:false,
+      isLoading:false,
+      isFinished:false,
+      plateType:'',
+      vehicleType:'',
+      price:'',
+      paiFang:'',
+      luoBan:'',
+      plateTypeOption:[
+        {value:1,label:'黄牌'},{value:2,label:'绿牌'},{value:3,label:'蓝牌'},
+      ],
+      vehicleTypeOption:[
+        {value:1,label:'拖车'},{value:2,label:'地库车'},{value:3,label:'牵引车'},{value:4,label:'随车吊'},{value:5,label:'其他'},
+      ],
+      priceOption:[
+        {value:1,label:'5~6'},{value:2,label:'7~8'},{value:3,label:'8~9'}
+      ],
+      paiFangOption:[
+        {value:1,label:'国四'},{value:2,label:'国五'},{value:3,label:'国六'},{value:4,label:'不限'},
+      ],
+      luoBanOption:[
+        {value:1,label:'全落地'},{value:2,label:'斜落地'},{value:3,label:'一般斜板'}
+      ]
+    }
+  },
+  mounted() {
+    const urlParams = new URLSearchParams(window.location.search);
+    this.driverId = urlParams.get('driverId');
+    // this.getList();
+    document.addEventListener('visibilitychange', async (  ) => {
+      let state = document.visibilityState
+      if (state == 'hidden') {  // 用户离开了
+      }
+      if (state == 'visible') {
+        // this.getList();
+      }
+    });
+  },
+  methods:{
+    onRefresh() {
+      // this.getList()
+      setTimeout(() => {
+        this.$toast('刷新成功');
+        this.isLoading = false;
+      }, 1000);
+    },
+
+  /*  async getList(){
+      let res= await driverTrainList({
+        driverId:this.driverId,//79639
+      })
+      this.pageList=res.data?.list;
+      if(res.data.assessState == 0){
+        this.isFinished=false
+      }else {
+        this.isFinished=true //是否完成
+      }
+      if(this.pageList?.length === 0){
+        this.showEmpty  = true
+      }else {
+        this.showEmpty = false
+      }
+    },*/
+    goApp(){
+      let data = {"action":"goBack","params":""}
+      var u = navigator.userAgent;
+      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+      if(isiOS){
+        window.webkit.messageHandlers.nativeObject.postMessage(data);
+      }else {
+        window.android.sendMessage("goBack");
+      }
+    },
+  }
+}
+</script>
+<style scoped lang="scss">
+@import "@/styles/common.scss";
+@import "@/styles/mixin.scss";
+.wrap{
+  //position: relative;
+  width: 100%;
+  height: 100%;
+}
+.headerWrap{
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  padding-left: 15px;
+  padding-right: 10px;
+  padding-top: 10px;
+  position: relative;
+  .bg{
+    position: absolute;
+    width: 100%;
+    height: 144px;
+    top: 0;
+    left: 0;
+    z-index: -1;
+  }
+  .mine{
+    width: 55px;
+    height: 43px;
+    margin-right: 15px;
+  }
+  .search{
+    width: 17px;
+    height: 17px;
+  }
+  ::v-deep .el-input__inner{
+    background: rgba(255,255,255,0.8);
+    border-radius: 20px;
+    border: 2px solid #264B94;
+  }
+  ::v-deep .el-input__suffix{
+    top: 12px;
+    right: 10px;
+  }
+}
+.firstTab{
+  width: 100%;
+  padding-top: 18px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  img{
+    cursor: pointer;
+  }
+  .big,.small{
+    width: 52px;
+    height: 21px;
+  }
+  .com{
+    margin-left: 32px;
+    margin-right: 25px;
+  }
+  .suggest{
+    width: 87px;
+    height: 38px;
+  }
+}
+.filterWrap {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  padding-bottom: 10px;
+  .customSel {
+    width: 69px;
+    height: 25px;
+    background: #F5F5F5;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #323233;
+    ::v-deep .el-input__inner{
+      padding: 0 2px;
+      height: 25px;
+      font-size: 12px;
+      background: #F5F5F5;
+      border-radius: 4px;
+    }
+    ::v-deep .el-input__icon{
+      line-height: 25px;
+      font-size: 12px;
+      width: 18px;
+    }
+    ::v-deep .el-input__suffix{
+      right: 2px;
+    }
+  }
+}
+.contentWrap{
+  width: 100%;
+  background-color: #F2F2F2 ;
+  box-sizing: border-box;
+  padding: 10px 6px 0;
+  position: relative;
+  .fixImg{
+    width: 210px;
+    height: 102px;
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 11;
+  }
+  .contentItem{
+    width: 100%;
+    height: 100%;
+    background-color: #FFFFFF;
+    //border-top-left-radius: 10px;
+    //border-top-right-radius: 10px;
+    border-radius: 10px;
+    box-sizing: border-box;
+    padding-left: 8px;
+    padding-top: 18px;
+    .item{
+      display: flex;
+    }
+    .left{
+      img{
+        width: 115px;
+        height: 77px;
+        background: linear-gradient( 90deg, rgba(5,32,54,0.88) 0%, rgba(69,87,103,0.19) 64%, rgba(133,141,152,0) 100%);
+        border-radius: 7px;
+        margin-right: 8px;
+      }
+    }
+    .right{
+      .title{
+        font-weight: 600;
+        font-size: 14px;
+        color: #212020;
+        line-height: 20px;
+      }
+      .type{
+        font-weight: 400;
+        font-size: 12px;
+        color: #282828;
+        line-height: 17px;
+      }
+      .date{
+        font-weight: 400;
+        font-size: 11px;
+        color: #999999;
+        line-height: 16px;
+      }
+      .price{
+        color: #FF5533;
+        span:first-child{
+          font-weight: 600;
+          font-size: 13px;
+        }
+        span:nth-child(2){
+          font-weight: bold;
+          font-size: 18px;
+          line-height: 25px;
+          margin-right: 2px;
+        }
+        span:nth-child(3){
+          font-weight: 600;
+          font-size: 11px;
+          line-height: 16px;
+        }
+      }
+    }
+  }
+}
+</style>