apps/supplier-dispatch-h5
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

二手车交易，静态列表页面

Browse Source
This commit is contained in:
zhouxueli
2025-03-07 17:22:41 +08:00
parent 4ca8385a36
commit 292e8bdfb1
4 changed files with 405 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/router/index.js
View File

@ -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({

11
src/router/second-hand-router.js Normal file
View File

@ -0,0 +1,11 @@
const kpiRouter = [
{
path: '/indexList',
name: 'indexList',
component: () => import('@/views/secondHandCar/indexList.vue'),
meta:{
title: '首页列表',
}
},
]
export default kpiRouter

1
src/styles/common.scss
View File

@ -45,7 +45,6 @@ select{
margin-left: 0;
font-weight: normal;
font-size: 14px;
//@include fontWeightSize(400,14px);
color: #000000;
}

392
src/views/secondHandCar/indexList.vue Normal file
View 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>