616 lines
17 KiB
Vue
616 lines
17 KiB
Vue
<template>
|
||
<div class="wrap">
|
||
<div class="headerWrap">
|
||
<img class="bg" src="@/assets/secondHandCar/bg.png" />
|
||
<img class="mine" src="@/assets/secondHandCar/mine.png" @click="goMine" />
|
||
<el-input
|
||
@blur="getList"
|
||
placeholder="请输入"
|
||
v-model.trim="topSearch">
|
||
<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="tabClick(0)" />
|
||
<img class="small com" v-show="activeTab === 1" src="@/assets/secondHandCar/cheyuanSmall.png" @click="tabClick(0)"/>
|
||
<img class="big" v-show="activeTab === 1" src="@/assets/secondHandCar/qiugouBig.png" @click="tabClick(1)"/>
|
||
<img class="small" v-show="activeTab === 0" src="@/assets/secondHandCar/qiugouSmall.png" @click="tabClick(1)"/>
|
||
</div>
|
||
<div @click="poupShow = true">
|
||
<img class="suggest" src="@/assets/secondHandCar/suggest.png" />
|
||
</div>
|
||
</div>
|
||
<div class="filterWrap">
|
||
<el-select v-model="licenseType" placeholder="牌照类型" :class="{'customSel':true , 'has-value': licenseType }" clearable>
|
||
<el-option
|
||
v-for="item in licenseTypeOption"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
<el-select v-model="vehicleType" placeholder="车辆类型" :class="{'customSel':true , 'has-value': vehicleType }" clearable>
|
||
<el-option
|
||
v-for="item in vehicleTypeOption"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.label">
|
||
</el-option>
|
||
</el-select>
|
||
<div class="customSel priceSel" @click.stop="changePrice">
|
||
<span :class="{'has-price': priceSort }">价格</span>
|
||
<span class="iconSpan">
|
||
<van-icon :class="{'has-price': priceSort==1 ,'icon':true}" name="arrow-up" />
|
||
<van-icon :class="{'has-price': priceSort==2 ,'icon':true}" name="arrow-down" />
|
||
</span>
|
||
<span v-show="priceSort"><van-icon @click.stop="clearPrice" :class="{'has-price': priceSort ,'icon':true}" name="close" /></span>
|
||
</div>
|
||
<el-select v-model="emissionStandard" placeholder="排放标准" :class="{'customSel':true , 'has-value': emissionStandard }" clearable>
|
||
<el-option
|
||
v-for="item in emissionStandardOption"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
<el-select v-model="boardType" placeholder="落板方式" :class="{'customSel':true , 'has-value': boardType }" clearable>
|
||
<el-option
|
||
v-for="item in boardTypeOption"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="contentWrap" v-show="!show">
|
||
<van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="min-height:85vh">
|
||
<van-list
|
||
v-model="loading"
|
||
:finished="finished"
|
||
finished-text="没有更多了"
|
||
@load="onLoad"
|
||
>
|
||
<div class="contentItem">
|
||
<div class="item" v-for="(item,index) in pageList" :key="index" @click="viewCarSource(item)">
|
||
<div class="left">
|
||
<img class="img" v-if="item.vehicleAnglePhoto" :src="item.vehicleAnglePhoto" />
|
||
<div v-else class="qiugou">{{item.vehicleType?.substring(0,2)}}</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="title">{{item.vehicleType}}</div>
|
||
<div v-if="activeTab==0" class="type">{{ item.boardType?.label ? item.boardType?.label+' | ' : ''}} {{ item.licenseType?.label }} |
|
||
{{ item.brandModel?.match(/^[\u4e00-\u9fa5]+/)?.[0]?.replace(/牌$/, '') }} | {{item.emissionStandard?.label}} | {{ formatToWan(item.mileage) }}公里</div>
|
||
<div v-else class="type">{{ item.boardType?.label ? item.boardType?.label+' | ' : ''}} {{item.emissionStandard?.label}}</div>
|
||
<div class="date" v-show="activeTab==0 && item.registerDate">注册日期： {{item.registerDate?.substring(0,10)}}</div>
|
||
<div v-if="activeTab==0" class="price"><span>￥</span> <span>{{formatNumber(item.minPrice) }}</span> <span>万</span> </div>
|
||
<div v-else class="priceRange">
|
||
<span class="num">{{formatNumber(item.minPrice) }}</span> <span class="danwei">万</span>
|
||
<span class="su">~</span>
|
||
<span class="num">{{formatNumber(item.maxPrice) }}</span> <span class="danwei">万</span>
|
||
</div>
|
||
<div class="line"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</van-list>
|
||
</van-pull-refresh>
|
||
</div>
|
||
<div class="empty" v-show="show">
|
||
<img src="@/assets/empty.png" />
|
||
</div>
|
||
<img v-show="activeTab==0" @click="releaseHandle(1)" class="fixImg" src="@/assets/secondHandCar/sellCar.png" />
|
||
<img v-show="activeTab==1" @click="releaseHandle(2)" class="fixImg" src="@/assets/secondHandCar/buyCar.png" />
|
||
<van-popup v-model="poupShow" closeable round :style="{ width: '90%',height:'40%' }" class="poupWrap">
|
||
<span class="title">反馈建议</span>
|
||
<div class="poupContent">
|
||
<div class="tip">如有任何建议，请及时反馈我们。</div>
|
||
<el-input class="ipt" v-model.trim="suggestContent" type="textarea" :autosize="{ minRows: 6, maxRows: 10 }"
|
||
maxlength="500" show-word-limit></el-input>
|
||
<div class="btnWrap">
|
||
<div class="btn" @click="submitSuggest">提交</div>
|
||
</div>
|
||
</div>
|
||
</van-popup>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {myMixins} from "@/utils/myMixins"
|
||
import {appPageList,userFeedback } from "@/api/secondHandCar"
|
||
export default {
|
||
name: "indexList",
|
||
mixins:[myMixins],
|
||
watch:{
|
||
/* topSearch(){
|
||
this.setSearchVal();
|
||
this.getList()
|
||
},*/
|
||
licenseType(){
|
||
this.setSearchVal();
|
||
this.getList()
|
||
},
|
||
vehicleType(){
|
||
this.setSearchVal();
|
||
this.getList()
|
||
},
|
||
emissionStandard(){
|
||
this.setSearchVal();
|
||
this.getList()
|
||
},
|
||
boardType(){
|
||
this.setSearchVal();
|
||
this.getList()
|
||
},
|
||
},
|
||
data(){
|
||
return{
|
||
pageList:[],
|
||
topSearch:'',
|
||
activeTab:0,
|
||
isLoading:"",
|
||
loading: false,
|
||
finished: false,
|
||
pageNum:1,
|
||
pageSize:10,
|
||
total:'',
|
||
licenseType:'',
|
||
vehicleType:'',
|
||
priceSort:'',
|
||
emissionStandard:'',
|
||
boardType:'',
|
||
licenseTypeOption:[
|
||
{value:2,label:'黄牌'},{value:3,label:'绿牌'},{value:1,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'}
|
||
],
|
||
emissionStandardOption:[
|
||
{value:1,label:'不限'},{value:4,label:'国四'},{value:5,label:'国五'},{value:6,label:'国六'}
|
||
],
|
||
boardTypeOption:[
|
||
{value:1,label:'全落地'},{value:2,label:'斜落地'},{value:3,label:'一般斜板'},{value:9,label:'不限'}
|
||
],
|
||
poupShow:false,
|
||
suggestContent:'',
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getSearchVal();
|
||
this.getList();
|
||
document.addEventListener('visibilitychange', async ( ) => {
|
||
let state = document.visibilityState
|
||
if (state == 'hidden') { // 用户离开了
|
||
}
|
||
if (state == 'visible') {
|
||
console.log('visible')
|
||
}
|
||
});
|
||
},
|
||
|
||
methods:{
|
||
formatToWan(num) {
|
||
let result = (num / 10000).toString();
|
||
if (result.includes('.')) {
|
||
let decimalPart = result.split('.')[1];
|
||
if (decimalPart.length > 2) {
|
||
result = parseFloat(result).toFixed(2);
|
||
}
|
||
}
|
||
return result + '万';
|
||
},
|
||
async tabClick(type){
|
||
this.activeTab=type
|
||
this.pageNum = 1
|
||
this.pageList = [];
|
||
this.total=0
|
||
await this.setSearchVal();
|
||
await this.getList()
|
||
},
|
||
async onLoad(){
|
||
this.pageNum++;
|
||
await this.getList()
|
||
this.loading = false;
|
||
if (this.pageList.length >= this.total) {
|
||
this.finished = true;
|
||
}
|
||
},
|
||
changePrice(){
|
||
if(!this.priceSort){
|
||
this.priceSort=1
|
||
}
|
||
if( this.priceSort==1){
|
||
this.priceSort=2
|
||
}else{
|
||
this.priceSort=1
|
||
}
|
||
this.getList();
|
||
},
|
||
clearPrice(){
|
||
this.priceSort=''
|
||
this.setSearchVal()
|
||
this.getList();
|
||
},
|
||
setSearchVal(){
|
||
sessionStorage.setItem('indexActiveTab',String(this.activeTab) );
|
||
sessionStorage.setItem('topSearch',this.topSearch);
|
||
sessionStorage.setItem('vehicleType',this.vehicleType);
|
||
sessionStorage.setItem('priceSort',this.priceSort);
|
||
sessionStorage.setItem('indexActiveTab',String(this.activeTab) );
|
||
sessionStorage.setItem('licenseType',String(this.licenseType));
|
||
sessionStorage.setItem('emissionStandard',String(this.emissionStandard));
|
||
sessionStorage.setItem('boardType',String(this.boardType));
|
||
},
|
||
getSearchVal(){
|
||
this.activeTab = Number(sessionStorage.getItem('indexActiveTab')) || 0;
|
||
this.topSearch = sessionStorage.getItem('topSearch') || '';
|
||
this.vehicleType = sessionStorage.getItem('vehicleType') || '';
|
||
this.priceSort = Number(sessionStorage.getItem('priceSort')) || '';
|
||
this.licenseType = Number(sessionStorage.getItem('licenseType')) || '';
|
||
this.emissionStandard = Number(sessionStorage.getItem('emissionStandard')) || '';
|
||
this.boardType = Number(sessionStorage.getItem('boardType')) || '';
|
||
},
|
||
goMine(){//我的发布
|
||
this.$router.push({ name: "mineRelease"})
|
||
sessionStorage.setItem('mineActiveTab',String(1) )
|
||
},
|
||
viewCarSource(item){
|
||
if(this.activeTab===0){//车源查看
|
||
this.$router.push({ name: "forSale", query: {type:1 , id:item.id,queryType:1,isList:true }})
|
||
}else{//求购查看
|
||
this.$router.push({ name: "wantBuySale", query: { type:1 ,id:item.id ,queryType:2,isList:true}})
|
||
}
|
||
this.setSearchVal();
|
||
},
|
||
releaseHandle(type){
|
||
if(type===1){//车源发布
|
||
this.$router.push({
|
||
name: "carSource",
|
||
query: { type:1,homePage:true }
|
||
})
|
||
}else{//求购发布
|
||
this.$router.push({ name: "wantBuy", query: { type:1,homePage:true } })
|
||
}
|
||
this.setSearchVal();
|
||
},
|
||
async submitSuggest(){
|
||
if(!this.suggestContent){
|
||
this.$toast('反馈提交不能为空')
|
||
return
|
||
}
|
||
//继续提交
|
||
await userFeedback ({
|
||
content:this.suggestContent,
|
||
})
|
||
this.poupShow=false
|
||
this.suggestContent=''
|
||
this.$toast('反馈建议提交成功')
|
||
},
|
||
onRefresh() {
|
||
this.pageNum=1
|
||
setTimeout(() => {
|
||
this.$toast('刷新成功');
|
||
this.isLoading = false;
|
||
}, 1000);
|
||
},
|
||
|
||
async getList(){
|
||
let res= await appPageList({
|
||
pageNum:this.pageNum,
|
||
pageSize:this.pageSize,
|
||
type:this.activeTab==0 ? 1 : 2,
|
||
topSearch:this.topSearch,
|
||
licenseType:this.licenseType,
|
||
vehicleType:this.vehicleType,
|
||
priceSort:this.priceSort,
|
||
boardType:this.boardType,
|
||
emissionStandard:this.emissionStandard,
|
||
})
|
||
this.total=res.total
|
||
if(this.pageNum == 1){// 第一页直接赋值
|
||
this.pageList=res.data
|
||
}else{// 第二页数据拼接
|
||
let preList = this.pageList;
|
||
let arr = res.data;
|
||
this.pageList = preList.concat(arr)
|
||
}
|
||
},
|
||
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");
|
||
}
|
||
},
|
||
},
|
||
computed:{
|
||
show() {
|
||
return (this.pageList.length < 0 || this.pageList.length == 0); // 判断数组长度是否大于 0
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
@import "@/styles/common.scss";
|
||
@import "@/styles/mixin.scss";
|
||
.wrap{
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.fixImg{
|
||
width: 210px;
|
||
height: 102px;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 11;
|
||
}
|
||
.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;
|
||
border: none;
|
||
}
|
||
::v-deep .el-input__icon{
|
||
line-height: 25px;
|
||
font-size: 12px;
|
||
width: 18px;
|
||
color: #2A5094;
|
||
}
|
||
::v-deep .el-input__suffix{
|
||
right: 2px;
|
||
}
|
||
}
|
||
.has-value ::v-deep .el-input__inner{
|
||
background: #F1F6FF ;
|
||
color: #007BE9;
|
||
font-weight: bold;
|
||
padding-left: 8px;
|
||
}
|
||
.has-value ::v-deep .el-input__icon{
|
||
color: #007BE9;
|
||
}
|
||
.priceSel{
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
color: #C0C4CC;
|
||
.iconSpan{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 8px;
|
||
}
|
||
}
|
||
.has-price{
|
||
color: #007BE9 !important;
|
||
}
|
||
}
|
||
.contentWrap{
|
||
width: 100%;
|
||
height: calc(100% - 80px);
|
||
overflow-y: auto;
|
||
background-color: #F2F2F2 ;
|
||
box-sizing: border-box;
|
||
padding: 10px 6px 0;
|
||
.contentItem{
|
||
width: 100%;
|
||
background-color: #FFFFFF;
|
||
border-radius: 10px;
|
||
box-sizing: border-box;
|
||
padding-left: 8px;
|
||
padding-top: 18px;
|
||
.item{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.left{
|
||
.img, .qiugou{
|
||
width: 115px;
|
||
height: 77px;
|
||
border-radius: 7px;
|
||
margin-right: 10px;
|
||
}
|
||
.qiugou{
|
||
line-height: 77px;
|
||
text-align: center;
|
||
color: #FFFFFF;
|
||
font-size: 18px;
|
||
letter-spacing: 5px;
|
||
background-color: #6C81CD;
|
||
}
|
||
}
|
||
.right{
|
||
.title{
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
color: #212020;
|
||
line-height: 28px;
|
||
}
|
||
.type{
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
color: #282828;
|
||
line-height: 23px;
|
||
width: 200px;
|
||
white-space: nowrap; /* 强制文本在一行显示 */
|
||
overflow: hidden; /* 隐藏超出部分 */
|
||
text-overflow: ellipsis; /* 超出部分显示省略号 */
|
||
}
|
||
.date{
|
||
font-weight: 400;
|
||
font-size: 11px;
|
||
color: #999999;
|
||
line-height: 20px;
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
.priceRange{
|
||
color: #FF5533;
|
||
display: flex;
|
||
align-items: center;
|
||
.num{
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
margin-right: 5px;
|
||
}
|
||
.danwei{
|
||
font-weight: 600;
|
||
font-size: 11px;
|
||
}
|
||
.su{
|
||
font-weight: 600;
|
||
font-size: 11px;
|
||
margin: 0 6px;
|
||
}
|
||
}
|
||
.line{
|
||
width: 224px;
|
||
border-bottom: 2px solid #F5F5F5;
|
||
margin: 10px 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.poupWrap{
|
||
width: 100%;
|
||
padding-top: 20px;
|
||
padding-left: 20px;
|
||
.title{
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: #c8c9cc;
|
||
}
|
||
.poupContent{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 10px 20px 10px 10px;
|
||
.tip,.ipt{
|
||
margin-bottom: 15px;
|
||
}
|
||
.ipt{
|
||
|
||
}
|
||
.btnWrap{
|
||
width: 100%;
|
||
text-align: -webkit-right;
|
||
.btn{
|
||
width: 80px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
background-color: #4C81F5;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
border-radius: 8px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.empty{
|
||
@include flexTwoCenter;
|
||
height:calc(100% - 86px);
|
||
background-color: #FAFAFA;
|
||
img{
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style>
|