二手车交易，全部页面&对接部分接口
This commit is contained in:
@ -2,11 +2,12 @@
|
||||
<div class="wrap">
|
||||
<div class="headerWrap">
|
||||
<img class="bg" src="@/assets/secondHandCar/bg.png" />
|
||||
<img class="mine" src="@/assets/secondHandCar/mine.png" />
|
||||
<img class="mine" src="@/assets/secondHandCar/mine.png" @click="goMine" />
|
||||
<el-input
|
||||
@input="getList"
|
||||
placeholder="请输入"
|
||||
v-model="keyword">
|
||||
<img slot="suffix" class="search" src="@/assets/secondHandCar/search.png" />
|
||||
v-model.trim="topSearch">
|
||||
<img slot="suffix" class="search" src="@/assets/secondHandCar/search.png"/>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="firstTab">
|
||||
@ -16,28 +17,28 @@
|
||||
<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>
|
||||
<div @click="poupShow = true">
|
||||
<img class="suggest" src="@/assets/secondHandCar/suggest.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="filterWrap">
|
||||
<el-select v-model="plateType" placeholder="牌照类型" class="customSel">
|
||||
<el-select @change="getList" v-model="licenseType" placeholder="牌照类型" :class="{'customSel':true , 'has-value': licenseType }" clearable>
|
||||
<el-option
|
||||
v-for="item in plateTypeOption"
|
||||
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">
|
||||
<el-select @change="getList" 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.value">
|
||||
:value="item.label">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select v-model="price" placeholder="价格区间" class="customSel">
|
||||
<el-select @change="getList" v-model="price" placeholder="价格区间" :class="{'customSel':true , 'has-value': price }" clearable>
|
||||
<el-option
|
||||
v-for="item in priceOption"
|
||||
:key="item.value"
|
||||
@ -45,17 +46,17 @@
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select v-model="paiFang" placeholder="排放标准" class="customSel">
|
||||
<el-select @change="getList" v-model="emissionStandard" placeholder="排放标准" :class="{'customSel':true , 'has-value': emissionStandard }" clearable>
|
||||
<el-option
|
||||
v-for="item in paiFangOption"
|
||||
v-for="item in emissionStandardOption"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select v-model="luoBan" placeholder="落板方式" class="customSel">
|
||||
<el-select @change="getList" v-model="boardType" placeholder="落板方式" :class="{'customSel':true , 'has-value': boardType }" clearable>
|
||||
<el-option
|
||||
v-for="item in luoBanOption"
|
||||
v-for="item in boardTypeOption"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
@ -65,91 +66,73 @@
|
||||
<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="item" v-for="(item,index) in pageList" :key="index" @click="viewCarSource(item)">
|
||||
<div class="left">
|
||||
<img src="@/assets/secondHandCar/45angle.png" />
|
||||
<img :src="item.vehicleAnglePhoto" />
|
||||
</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 class="title">{{item.vehicleType}}</div>
|
||||
<div v-if="activeTab==0" class="type">{{ item.boardType?.label }} | {{ item.licenseType?.label }} |
|
||||
{{ item.mileage }}km | {{item.emissionStandard?.label}}</div>
|
||||
|
||||
<div v-else class="type">{{ item.boardType?.label }} |
|
||||
{{item.vehicleType }} | {{item.emissionStandard?.label}}</div>
|
||||
<!-- <div class="date" v-show="activeTab==0">注册日期： 2025-03-07</div>-->
|
||||
<div class="price"><span>￥</span> <span>{{priceHandle(item.maxPrice) }}</span> <span>万</span> </div>
|
||||
<div class="line"></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 class="empty" v-show="showEmpty">
|
||||
<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",
|
||||
computed: {
|
||||
},
|
||||
mixins:[myMixins],
|
||||
watch:{
|
||||
activeTab(){
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
pageList:[],
|
||||
keyword:'',
|
||||
topSearch:'',
|
||||
activeTab:0,
|
||||
showEmpty:false,
|
||||
isLoading:false,
|
||||
isFinished:false,
|
||||
plateType:'',
|
||||
licenseType:'',
|
||||
vehicleType:'',
|
||||
minPrice:'',
|
||||
maxPrice:'',
|
||||
price:'',
|
||||
paiFang:'',
|
||||
luoBan:'',
|
||||
plateTypeOption:[
|
||||
{value:1,label:'黄牌'},{value:2,label:'绿牌'},{value:3,label:'蓝牌'},
|
||||
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:'其他'},
|
||||
@ -157,52 +140,90 @@ export default {
|
||||
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:'不限'},
|
||||
emissionStandardOption:[
|
||||
{value:1,label:'不限'},{value:4,label:'国四'},{value:5,label:'国五'},{value:6,label:'国六'}
|
||||
],
|
||||
luoBanOption:[
|
||||
{value:1,label:'全落地'},{value:2,label:'斜落地'},{value:3,label:'一般斜板'}
|
||||
]
|
||||
boardTypeOption:[
|
||||
{value:1,label:'全落地'},{value:2,label:'斜落地'},{value:3,label:'一般斜板'},{value:9,label:'不限'}
|
||||
],
|
||||
poupShow:false,
|
||||
suggestContent:'',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
this.driverId = urlParams.get('driverId');
|
||||
// this.getList();
|
||||
this.getList();
|
||||
document.addEventListener('visibilitychange', async ( ) => {
|
||||
let state = document.visibilityState
|
||||
if (state == 'hidden') { // 用户离开了
|
||||
}
|
||||
if (state == 'visible') {
|
||||
// this.getList();
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
goMine(){//我的发布
|
||||
this.$router.push({ name: "mineRelease",})
|
||||
},
|
||||
priceHandle(item){
|
||||
return item/10000
|
||||
},
|
||||
viewCarSource(item){
|
||||
if(this.activeTab===0){//车源查看
|
||||
this.$router.push({ name: "forSale", query: {type:1 , id:item.id,queryType:1 }})
|
||||
}else{//求购查看
|
||||
this.$router.push({ name: "wantBuySale", query: { type:1 ,id:item.id ,queryType:2}})
|
||||
}
|
||||
},
|
||||
releaseHandle(type){
|
||||
if(type===1){//车源发布
|
||||
this.$router.push({
|
||||
name: "carSource",
|
||||
query: { type:1 }
|
||||
})
|
||||
}else{//求购发布
|
||||
this.$router.push({ name: "wantBuy", query: { type:1 } })
|
||||
}
|
||||
},
|
||||
async submitSuggest(){
|
||||
if(!this.suggestContent){
|
||||
this.$toast('反馈提交不能为空')
|
||||
return
|
||||
}
|
||||
//继续提交
|
||||
await userFeedback ({
|
||||
content:this.suggestContent,
|
||||
})
|
||||
this.poupShow=false
|
||||
this.suggestContent=''
|
||||
this.$toast('反馈建议提交成功')
|
||||
},
|
||||
onRefresh() {
|
||||
// this.getList()
|
||||
this.getList()
|
||||
setTimeout(() => {
|
||||
this.$toast('刷新成功');
|
||||
this.isLoading = false;
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
/* async getList(){
|
||||
let res= await driverTrainList({
|
||||
driverId:this.driverId,//79639
|
||||
async getList(){
|
||||
let res= await appPageList({
|
||||
type:this.activeTab==0 ? 1 : 2,
|
||||
topSearch:this.topSearch,
|
||||
licenseType:this.licenseType,
|
||||
vehicleType:this.vehicleType,
|
||||
minPrice:this.minPrice,
|
||||
maxPrice:this.maxPrice,
|
||||
boardType:this.boardType,
|
||||
emissionStandard:this.emissionStandard,
|
||||
brandModel:this.brandModel,
|
||||
})
|
||||
this.pageList=res.data?.list;
|
||||
if(res.data.assessState == 0){
|
||||
this.isFinished=false
|
||||
}else {
|
||||
this.isFinished=true //是否完成
|
||||
}
|
||||
this.pageList=res.data
|
||||
if(this.pageList?.length === 0){
|
||||
this.showEmpty = true
|
||||
}else {
|
||||
this.showEmpty = false
|
||||
}
|
||||
},*/
|
||||
},
|
||||
goApp(){
|
||||
let data = {"action":"goBack","params":""}
|
||||
var u = navigator.userAgent;
|
||||
@ -220,10 +241,19 @@ export default {
|
||||
@import "@/styles/common.scss";
|
||||
@import "@/styles/mixin.scss";
|
||||
.wrap{
|
||||
//position: relative;
|
||||
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;
|
||||
@ -301,44 +331,44 @@ export default {
|
||||
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;
|
||||
}
|
||||
.has-value ::v-deep .el-input__icon{
|
||||
color: #007BE9;
|
||||
}
|
||||
}
|
||||
.contentWrap{
|
||||
width: 100%;
|
||||
height: calc(100% - 150px);
|
||||
overflow-y: auto;
|
||||
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;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.left{
|
||||
img{
|
||||
@ -346,7 +376,7 @@ export default {
|
||||
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;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
@ -354,19 +384,23 @@ export default {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #212020;
|
||||
line-height: 20px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.type{
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #282828;
|
||||
line-height: 17px;
|
||||
line-height: 23px;
|
||||
width: 200px;
|
||||
white-space: nowrap; /* 强制文本在一行显示 */
|
||||
overflow: hidden; /* 隐藏超出部分 */
|
||||
text-overflow: ellipsis; /* 超出部分显示省略号 */
|
||||
}
|
||||
.date{
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: #999999;
|
||||
line-height: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.price{
|
||||
color: #FF5533;
|
||||
@ -386,7 +420,54 @@ export default {
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user