二手车交易，静态列表页面
This commit is contained in:
@ -3,6 +3,7 @@ import VueRouter from "vue-router";
|
|||||||
Vue.use(VueRouter);
|
Vue.use(VueRouter);
|
||||||
import kpiRouter from './kpi-router'
|
import kpiRouter from './kpi-router'
|
||||||
import invoiceRouter from "@/router/invoice-router";
|
import invoiceRouter from "@/router/invoice-router";
|
||||||
|
import secondHandRouter from "@/router/second-hand-router";
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
@ -267,6 +268,7 @@ const routes = [
|
|||||||
},
|
},
|
||||||
...kpiRouter,
|
...kpiRouter,
|
||||||
...invoiceRouter,
|
...invoiceRouter,
|
||||||
|
...secondHandRouter,
|
||||||
]
|
]
|
||||||
|
|
||||||
const router = new VueRouter({
|
const router = new VueRouter({
|
||||||
|
|||||||
11
src/router/second-hand-router.js
Normal file
11
src/router/second-hand-router.js
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
const kpiRouter = [
|
||||||
|
{
|
||||||
|
path: '/indexList',
|
||||||
|
name: 'indexList',
|
||||||
|
component: () => import('@/views/secondHandCar/indexList.vue'),
|
||||||
|
meta:{
|
||||||
|
title: '首页列表',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
]
|
||||||
|
export default kpiRouter
|
||||||
@ -45,7 +45,6 @@ select{
|
|||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
//@include fontWeightSize(400,14px);
|
|
||||||
color: #000000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
392
src/views/secondHandCar/indexList.vue
Normal file
392
src/views/secondHandCar/indexList.vue
Normal file
@ -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>
|
||||||
Reference in New Issue
Block a user