605 lines
17 KiB
Vue
605 lines
17 KiB
Vue
<template>
|
||
<view class="page flex-col">
|
||
<view class="section_1 flex-col">
|
||
<view class="section_3 flex-col">
|
||
<view class="w700 flex-row align-center justify-between padding-left padding-right radius"
|
||
style="margin:20rpx auto 0;height: 180rpx;background-image: linear-gradient(-81deg,rgba(255, 255, 255, 1) 0,rgba(255, 255, 255, 1) 0,rgba(225, 235, 255, 1) 100%,rgba(225, 235, 255, 1) 100%);"
|
||
@click="this.$tab.navigateTo('/subNoticePages/list/list?noticeType=1')">
|
||
<u--image :src="imagesUrl+'notice.png'" width="127rpx" height="123rpx"></u--image>
|
||
<view class="margin-top" style="width: 480rpx;">
|
||
<u-notice-bar :text="notice" direction="column" speed="250" color="#000" bgColor="none"
|
||
icon="false" fontSize="32rpx" :customStyle="{}"></u-notice-bar>
|
||
<text class="text-lg text-bold">{{notice.noticeTitle}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="group_3 flex-col" @click="getdetlis()">
|
||
<u--image :src="imagesUrl+'guide.png'" width="730rpx" height="207rpx" @click="click"></u--image>
|
||
</view>
|
||
<view class="group_5 flex justify-between flex-wrap">
|
||
<view style="margin-left: 22rpx;" @click="this.$tab.navigateTo('/subCarPages/buy/buy')">
|
||
<u--image :src="imagesUrl+'buy.png'" width="325rpx" height="170rpx"></u--image>
|
||
</view>
|
||
<view style="float: right;" @click="this.$tab.navigateTo('/subCarPages/sell/sell')">
|
||
<u--image :src="imagesUrl+'sell.png'" width="325rpx" height="170rpx"></u--image>
|
||
</view>
|
||
<view style="margin-left: 22rpx;" @click="this.$tab.navigateTo('/subCarPages/userPost/userPost')">
|
||
<u--image :src="imagesUrl+'car1.png'" width="325rpx" height="170rpx"></u--image>
|
||
</view>
|
||
<view style="float: right;"
|
||
@click="this.$tab.navigateTo('/subInspectionPages/details/details?id=888')">
|
||
<u--image :src="imagesUrl+'guohu.png'" width="325rpx" height="170rpx"></u--image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="section_4 flex-col">
|
||
<view class=" w700 flex-row justify-between align-end" style="margin: 0 auto;height: 70rpx;">
|
||
<view class="box_2 flex-row align-end justify-between">
|
||
<image class="image_8" :src="imagesUrl+'reg.png'" v-show="tab1Show" />
|
||
<text class="tab_text" v-show="tab2Show" @click="changeTab(2)">注册经销商</text>
|
||
<image class="image_9" :src="imagesUrl+'user_post.png'" v-show="tab2Show" />
|
||
<text class="tab_text" v-show="tab1Show" @click="changeTab(1)">会员发布</text>
|
||
</view>
|
||
<view class="margin-left" @click="this.$tab.navigateTo('/subCarPages/buyList/buyList')">
|
||
<text>二手车求购信息</text>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="box_3 flex-col" :style="{marginLeft:tab1Show ? '35rpx' :'200rpx' }"></view>
|
||
<view class="box_4 flex-row">
|
||
<u-search placeholder="品牌/车系/型号" v-model="keyword" :clearabled="true" @search="filterList"
|
||
@clear="filterList" :show-action="false"></u-search>
|
||
</view>
|
||
|
||
<view class="box_5 flex-row justify-between">
|
||
<view class="image-text_4 flex-col">
|
||
<view class="flex-row justify-between" @click="showPriceDownList">
|
||
<text class="text-group_4">排序</text>
|
||
<image class="thumbnail_3" :src="imagesUrl+'downarr.png'" />
|
||
</view>
|
||
<view class="downList flex-row flex-wrap" v-show="priceDownListShow">
|
||
<view class="btn" :style="{ 'background': orderBy == 'priceAsc' ? '#feebb2' :''}"
|
||
@click="orderBySelect('priceAsc')">
|
||
<text>价格最低</text>
|
||
</view>
|
||
<view class="btn" :style="{ 'background': orderBy == 'priceDesc' ? '#feebb2' :''}"
|
||
@click="orderBySelect('priceDesc')">
|
||
<text>价格最高</text>
|
||
</view>
|
||
<view class="btn" :style="{ 'background': orderBy == 'kilometersAsc' ? '#feebb2' :''}"
|
||
@click="orderBySelect('kilometersAsc')">
|
||
<text>里程最少</text>
|
||
</view>
|
||
<view class="btn" :style="{ 'background': orderBy == 'kilometersDesc' ? '#feebb2' :''}"
|
||
@click="orderBySelect('kilometersDesc')">
|
||
<text>里程最多</text>
|
||
</view>
|
||
<view class="btn" :style="{ 'background': orderBy == 'carRecordDateDesc' ? '#feebb2' :''}"
|
||
@click="orderBySelect('carRecordDateDesc')">
|
||
<text>车龄最短</text>
|
||
</view>
|
||
<view class="btn" :style="{ 'background': orderBy == 'carRecordDateAsc' ? '#feebb2' :''}"
|
||
@click="orderBySelect('carRecordDateAsc')">
|
||
<text>车龄最长</text>
|
||
</view>
|
||
<view class="btn" style="align-self: flex-end;" @click="orderBySelect('')">
|
||
<text>重置排序</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="image-text_7 flex-col">
|
||
<view class="flex-row justify-between" @click="showSelectDownList">
|
||
<image class="label_2" :src="imagesUrl+'select.png'" />
|
||
<text class="text-group_7">筛选</text>
|
||
</view>
|
||
|
||
<view v-show="selectDownListShow" class="flex-col "
|
||
style="position:relative;top:20rpx; height: auto; left:-650rpx; width: 750rpx; padding: 10rpx; background-color: #fff; z-index: 9999; border-radius: 5rpx; text-align: left;">
|
||
<view style="padding: 20rpx 0;">
|
||
<view style="margin: 20rpx;">
|
||
<text class="text-bold">价格区间</text>
|
||
</view>
|
||
<view style="margin: 20rpx;">
|
||
<u-radio-group class="flex-row justify-between" style="width: 750rpx;"
|
||
@change="setPriceRangeParams" placement="row">
|
||
<u-radio size="30rpx" labelSize="30rpx" v-for="(item, index) in priceRange"
|
||
shape="square" :key="index" :label="item.name" :name="item.value"
|
||
:customStyle="{marginRight: '35rpx'}">
|
||
</u-radio>
|
||
</u-radio-group>
|
||
</view>
|
||
</view>
|
||
<u-line></u-line>
|
||
<view style="padding: 20rpx 0;">
|
||
<view style="margin: 20rpx;">
|
||
<text class="text-bold">公里数区间</text>
|
||
</view>
|
||
<view style="margin: 20rpx;">
|
||
<u-radio-group class="flex-row justify-between" style="width: 750rpx;"
|
||
@change="setKilometersParams" placement="row">
|
||
<u-radio :labelDisabled="true" size="30rpx" labelSize="30rpx"
|
||
v-for="(item, index) in kilometersRange" shape="square" :key="index"
|
||
:label="item.name" :name="item.value" :customStyle="{marginRight: '35rpx'}">
|
||
</u-radio>
|
||
</u-radio-group>
|
||
</view>
|
||
</view>
|
||
<u-line></u-line>
|
||
<view style="padding: 20rpx 0;">
|
||
<view style="margin: 20rpx; " class="flex-row justify-between">
|
||
<u-button :plain="true" shape="circle" text="重置"
|
||
@click="resetFilterList"></u-button>
|
||
<u-button type="primary" shape="circle" text="确定" color="#ff5500"
|
||
@click="filterList()"></u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="carList" style="min-height: 250rpx;">
|
||
<view class="w700" style="margin: 0 auto;">
|
||
<u-loading-icon size="80" :show="loadingShow"></u-loading-icon>
|
||
</view>
|
||
|
||
<view class="goods" v-for="item,index in carList" :key="index" @click="goCarInfo(item.carId)">
|
||
<u--image class="goodImg" radius="10rpx" width="330rpx" height="180rpx" :showLoading="true"
|
||
:src=" baseUrl + firstSubstring(item.carPics)"></u--image>
|
||
<view class="hot">
|
||
<u--image :src=" imagesUrl + 'hot.png'" width="53rpx" height="30rpx"></u--image>
|
||
</view>
|
||
<view class="carTitle u-line-2">
|
||
<text>
|
||
{{ item.carBrand + item.carModel }}
|
||
</text>
|
||
</view>
|
||
<view class="carAge">
|
||
<text>
|
||
{{ getDurationFromDate(item.carRecordDate) }}
|
||
</text>
|
||
</view>
|
||
<view class="flex-row justify-between align-center">
|
||
<view class="text-wrapper_4" v-if="item.carPrice == '面议'">
|
||
<text class="text_10">价格面议</text>
|
||
</view>
|
||
<view v-else>
|
||
<text class="text_11">{{ formatAmountToWan(item.carPrice) }}</text>
|
||
<text class="text_12">万</text>
|
||
</view>
|
||
|
||
<view>
|
||
<text class="text_11">{{ item.carKilometers }}</text>
|
||
<text class="text_12">Km</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <u-loadmore :status="status" /> -->
|
||
<view class="jsx">
|
||
<view class="xian"></view>
|
||
<view class="dian">·</view>
|
||
<view class="xian"></view>
|
||
</view>
|
||
<view class="q-box" @click="gettel()">
|
||
<view class="baizi">{{rtel}}</view>
|
||
<image :src="imagesUrl + 'carTel.png'" mode=""></image>
|
||
</view>
|
||
<view class="box_28 flex-row justify-between">
|
||
<text class="text_70">免责声明</text>
|
||
<image class="image_27" :src="imagesUrl+'mian.png'" />
|
||
</view>
|
||
<text class="paragraph_12">
|
||
本平台仅提供交易信息，不对车辆进行任何评估或检测。请自行对车辆进行判断。
|
||
</text>
|
||
|
||
</view>
|
||
</view>
|
||
<!-- <view class="bai-yuan">
|
||
<view style="width: 100%; text-align: center; line-height: 36px;">
|
||
<uni-icons type="phone-filled" size="34" color="#4282D8"></uni-icons>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import Decimal from "decimal.js"; // 具体文件中引入
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
imagesUrl: getApp().globalData.config.imagesUrl,
|
||
baseUrl: getApp().globalData.config.baseUrl,
|
||
notice: null,
|
||
constants: {},
|
||
status: 'loadmore',
|
||
keyword: '',
|
||
carType: '',
|
||
indexList: [],
|
||
priceRange: [{
|
||
name: '5万以下',
|
||
value: [0, 50000]
|
||
},
|
||
{
|
||
name: '5-10万',
|
||
value: [50001, 100000]
|
||
},
|
||
{
|
||
name: '10-15万',
|
||
value: [100001, 150000]
|
||
}, {
|
||
name: '15万以上',
|
||
value: [150001, 9999999]
|
||
}
|
||
],
|
||
priceRangeParams: [],
|
||
kilometersRange: [{
|
||
name: '3万以下',
|
||
value: [0, 30000]
|
||
},
|
||
{
|
||
name: '3-5万',
|
||
value: [30001, 50000]
|
||
},
|
||
{
|
||
name: '5-10万',
|
||
value: [50001, 100000]
|
||
}, {
|
||
name: '10万以上',
|
||
value: [100001, 9999999]
|
||
}
|
||
],
|
||
kilometersParams: [],
|
||
tab1Show: true,
|
||
tab2Show: false,
|
||
tab3Show: false,
|
||
priceDownListShow: false,
|
||
selectDownListShow: false,
|
||
carList: [],
|
||
orderBy: '',
|
||
loadingShow: true,
|
||
isLoadMore: false, //是否加载中
|
||
params: {
|
||
pageSize: 10,
|
||
pageNum: 1,
|
||
},
|
||
rtel: '18715738821',
|
||
};
|
||
},
|
||
|
||
onLoad() {
|
||
this.getNotice();
|
||
this.getCarList()
|
||
this.getConfig()
|
||
},
|
||
onReachBottom() {
|
||
if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
|
||
this.status = 'loading';
|
||
this.isLoadMore = true
|
||
this.params.pageNum++
|
||
this.getCarList()
|
||
}
|
||
},
|
||
methods: {
|
||
async getConfig() {
|
||
const res = await this.$request({
|
||
url: '/system/shopconfig/listWx'
|
||
})
|
||
// console.log('电话号码', res.rows[0]);
|
||
let num = res.rows[0].carTel
|
||
this.rtel = this.addHyphenEveryThreeChars(num)
|
||
},
|
||
addHyphenEveryThreeChars(str) {
|
||
let modifiedPhoneNumber = str.replace(/(\d{3})(\d{4})(\d{4})/, "$1-$2-$3");
|
||
return modifiedPhoneNumber;
|
||
},
|
||
gettel() {
|
||
uni.makePhoneCall({
|
||
phoneNumber: this.rtel //仅为示例
|
||
});
|
||
},
|
||
getdetlis() {
|
||
uni.navigateTo({
|
||
url: '/subCarPages/details/details'
|
||
})
|
||
},
|
||
// 获取公告
|
||
async getNotice() {
|
||
const res = await this.$request({
|
||
url: '/system/notice/listWx',
|
||
data: {
|
||
noticeType: 1,
|
||
pageSize: 5
|
||
}
|
||
})
|
||
|
||
let notice = []
|
||
for (let i = 0; i < res.rows.length; i++) {
|
||
notice.push(
|
||
res.rows[i].noticeTitle
|
||
)
|
||
}
|
||
this.notice = notice;
|
||
},
|
||
// 获取注册经销商二手车列表
|
||
async getCarList() {
|
||
let carType = this.tab1Show ? '经销商' : '会员'
|
||
const res = await this.$request({
|
||
url: '/system/car/listWx',
|
||
data: {
|
||
carBrand: this.keyword,
|
||
orderBy: this.orderBy,
|
||
carType,
|
||
pageSize: this.params.pageSize,
|
||
pageNum: this.params.pageNum,
|
||
beginCarKilometers: this.kilometersParams.length > 0 ? this.kilometersParams[0] : '',
|
||
endCarKilometers: this.kilometersParams.length > 0 ? this.kilometersParams[1] : '',
|
||
beginCarPrice: this.priceRangeParams.length > 0 ? this.priceRangeParams[0] : '',
|
||
endCarPrice: this.priceRangeParams.length > 0 ? this.priceRangeParams[1] : '',
|
||
}
|
||
})
|
||
this.carList = this.carList.concat(res.rows);
|
||
|
||
if (res.rows.length < this.params.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
|
||
this.status = 'nomore';
|
||
this.isLoadMore = true
|
||
} else {
|
||
this.isLoadMore = false
|
||
}
|
||
|
||
this.loadingShow = false
|
||
// console.log(res);
|
||
},
|
||
// 筛选过滤
|
||
filterList() {
|
||
this.params.pageNum = 1
|
||
this.carList = []
|
||
this.getCarList()
|
||
this.selectDownListShow = false
|
||
},
|
||
resetFilterList() {
|
||
this.orderBy = ''
|
||
this.params.pageNum = 1
|
||
this.carList = []
|
||
this.kilometersParams = []
|
||
this.priceRangeParams = []
|
||
this.getCarList()
|
||
this.selectDownListShow = false
|
||
},
|
||
// 按逗号分隔字符串，获取第一个元素，用于图片展示
|
||
firstSubstring(string) {
|
||
if (string.includes(',')) {
|
||
return string.split(',')[0];
|
||
} else {
|
||
return string;
|
||
}
|
||
},
|
||
// 参数日期，获取据今天时间差
|
||
getDurationFromDate(dateString) {
|
||
// 将传入的日期字符串转换为 Date 对象
|
||
var inputDate = new Date(dateString);
|
||
|
||
// 获取当前日期
|
||
var currentDate = new Date();
|
||
|
||
// 计算年份差值
|
||
var yearDiff = currentDate.getFullYear() - inputDate.getFullYear();
|
||
|
||
// 计算月份差值
|
||
var monthDiff = (currentDate.getMonth() + 1) - (inputDate.getMonth() + 1);
|
||
|
||
// 如果月份差值为负数，年份差值减 1，月份差值加 12
|
||
if (monthDiff < 0) {
|
||
yearDiff--;
|
||
monthDiff += 12;
|
||
}
|
||
|
||
// 判断年份等于 0 且月份不等于 0 的情况，只返回月份
|
||
if (yearDiff === 0 && monthDiff !== 0) {
|
||
return monthDiff + '个月';
|
||
}
|
||
|
||
// 判断年份等于 0 且月份等于 0 的情况，返回"准新车"
|
||
if (yearDiff === 0 && monthDiff === 0) {
|
||
return "准新车";
|
||
}
|
||
|
||
// 返回年份和月份
|
||
return yearDiff + '年' + monthDiff + '个月';
|
||
},
|
||
|
||
// 格式化金额，转为万元单位
|
||
formatAmountToWan(num) {
|
||
num = Number(num);
|
||
if (num == 0) {
|
||
return num + "";
|
||
} else {
|
||
return new Decimal(num).div(new Decimal(10000)).toString();
|
||
}
|
||
},
|
||
// 切换tab页
|
||
changeTab(tabIndex) {
|
||
if (tabIndex == 1) {
|
||
this.tab1Show = false
|
||
this.tab2Show = true
|
||
|
||
}
|
||
if (tabIndex == 2) {
|
||
this.tab1Show = true
|
||
this.tab2Show = false
|
||
}
|
||
this.carList = []
|
||
this.params.pageNum = 1
|
||
this.params.pageSize = 10
|
||
this.getCarList()
|
||
},
|
||
|
||
// 价格下拉菜单
|
||
showPriceDownList() {
|
||
this.priceDownListShow = !this.priceDownListShow
|
||
},
|
||
// 筛选下拉菜单
|
||
showSelectDownList() {
|
||
this.selectDownListShow = !this.selectDownListShow
|
||
},
|
||
orderBySelect(orderBy) {
|
||
this.orderBy = orderBy
|
||
this.carList = []
|
||
this.params.pageNum = 1
|
||
this.getCarList()
|
||
this.priceDownListShow = false
|
||
this.kilometersDownListShow = false
|
||
this.selectDownListShow = false
|
||
},
|
||
setPriceRangeParams(e) {
|
||
this.priceRangeParams = e
|
||
},
|
||
setKilometersParams(e) {
|
||
this.kilometersParams = e
|
||
},
|
||
goCarInfo(id) {
|
||
this.$tab.navigateTo(`/subCarPages/carInfo/carInfo?id=${id}`)
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import './index.rpx.css';
|
||
|
||
.jsx {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.xian {
|
||
border: 1px solid black;
|
||
width: 30%;
|
||
height: 0px;
|
||
}
|
||
|
||
.dian {
|
||
font-size: 55px;
|
||
font-weight: bold;
|
||
margin: 0 10px;
|
||
}
|
||
|
||
.q-box {
|
||
width: 95%;
|
||
height: 103px;
|
||
border-radius: 8px;
|
||
margin: 0 auto;
|
||
overflow: hidden;
|
||
position: relative;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.baizi {
|
||
position: absolute;
|
||
width: 100%;
|
||
text-align: center;
|
||
transform: translate(-50%);
|
||
left: 50%;
|
||
top: 35px;
|
||
// left: 25%;
|
||
font-size: 26px;
|
||
text-shadow: 0px 0px 7px #42464C;
|
||
font-family: HuXiaoBo-NanShen;
|
||
font-weight: 600;
|
||
z-index: 99;
|
||
color: white;
|
||
font-style: italic
|
||
}
|
||
|
||
.bai-yuan {
|
||
box-shadow: 0px 0px 13px 5px rgba(216, 216, 216, 0.61);
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
background-color: white;
|
||
position: fixed;
|
||
bottom: 60px;
|
||
right: 20px;
|
||
z-index: 99;
|
||
overflow: hidden;
|
||
padding: 0px;
|
||
}
|
||
|
||
.text-top {
|
||
color: rgba(67, 67, 67, 1);
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
.carList {
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
width: 700rpx;
|
||
|
||
margin: 0 auto;
|
||
|
||
.goods {
|
||
width: 330rpx;
|
||
margin: 20rpx 0;
|
||
|
||
.hot {
|
||
position: relative;
|
||
top: -170rpx;
|
||
left: 10rpx
|
||
}
|
||
|
||
.carTitle {}
|
||
|
||
.carAge {
|
||
font-size: 12px;
|
||
color: #b5b5b5;
|
||
margin: 10rpx 0;
|
||
}
|
||
|
||
.goodImg {
|
||
border-radius: 25rpx;
|
||
margin: 10rpx 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.downList {
|
||
width: 750rpx;
|
||
position: relative;
|
||
top: 20rpx;
|
||
padding: 20rpx;
|
||
background-color: #fff;
|
||
z-index: 9999;
|
||
border-radius: 5rpx;
|
||
|
||
.btn {
|
||
width: 160rpx;
|
||
height: 50rpx;
|
||
padding: 10rpx;
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
margin-bottom: 10rpx;
|
||
margin-right: 10rpx;
|
||
background-color: #e5e5e5;
|
||
}
|
||
}
|
||
|
||
.postBtn {
|
||
|
||
|
||
padding: 10rpx 20rpx;
|
||
background: linear-gradient(to left, #4c78b5, #8cbdff);
|
||
border-radius: 15rpx;
|
||
color: #FFF;
|
||
|
||
}
|
||
</style> |