320 lines
8.5 KiB
Vue
320 lines
8.5 KiB
Vue
<template>
|
||
<div class="wrap" >
|
||
<div class="headerWrap">
|
||
<div v-if="isWebFunc()" style="opacity: 0;" class="back"></div>
|
||
<img v-else class="back" @click="h5GoBack" src="@/assets/secondHandCar/back.png" />
|
||
<span>求购</span>
|
||
<div style="opacity: 0;" class="back"></div>
|
||
</div>
|
||
<div class="contentWrap">
|
||
<div class="titleWrap wrapCommon">
|
||
<div class="info">
|
||
<span>{{ detailInfo.vehicleType }}</span>
|
||
</div>
|
||
<div class="time">
|
||
<span>{{ detailInfo.createTime?.substring(0,10) }}</span><span>发布</span>
|
||
</div>
|
||
<div class="priceWrap">
|
||
<div class="price">
|
||
售价（含税）：
|
||
<span class="num">{{formatNumber(detailInfo.minPrice) }}</span> <span class="danwei">万</span>
|
||
<span class="su">~</span>
|
||
<span class="num">{{formatNumber(detailInfo.maxPrice) }}</span> <span class="danwei">万</span>
|
||
</div>
|
||
<div class="viewNum">{{detailInfo.attentionCount}}人想卖<span>{{detailInfo.browseCount}}人浏览</span></div>
|
||
</div>
|
||
<div class="priceWrap">
|
||
<div class="commonColor" style="margin-top: 5px">
|
||
车源ID: {{ detailInfo.code }}
|
||
<img class="copyIcon" @click="copyHandler(detailInfo.code)" src="@/assets/copy.png" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="detailInfoWrap wrapCommon">
|
||
<div>
|
||
<img class="descImg firstDescImg" src="@/assets/secondHandCar/details.png" />
|
||
</div>
|
||
<div class="descItem descCommon">
|
||
<div class="itemInfo">
|
||
<el-tooltip class="item" effect="dark" :content="detailInfo.vehicleType" placement="top">
|
||
<span style="cursor: pointer">{{ detailInfo.vehicleType }}</span>
|
||
</el-tooltip>
|
||
<span>车辆类型</span>
|
||
</div>
|
||
<div class="suGang"></div>
|
||
<div class="itemInfo">
|
||
<span>{{ detailInfo.boardType?.label }} </span>
|
||
<span>落板方式</span>
|
||
</div>
|
||
<div class="suGang"></div>
|
||
<div class="itemInfo">
|
||
<span>{{ detailInfo.emissionStandard?.label }}</span>
|
||
<span>排放标准</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<img class="descImg" src="@/assets/secondHandCar/description.png" />
|
||
</div>
|
||
<div class="descCommon desc">{{detailInfo.desc}}</div>
|
||
</div>
|
||
<div v-if="isList && !detailInfo.selfSupplierPublish" class="btn" @click="noMultipleClicks(handle)">我有车源</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {myMixins} from "@/utils/myMixins"
|
||
import {carInfoDetail, saveRecord} from "@/api/secondHandCar";
|
||
import {Dialog} from "vant";
|
||
export default {
|
||
name: "wantBuySale",
|
||
mixins:[myMixins],
|
||
data(){
|
||
return{
|
||
noClick:true,
|
||
id:'',
|
||
queryType:'',
|
||
detailInfo:'',
|
||
duration:'',
|
||
startTime: null, // 记录进入时间
|
||
isList:false,
|
||
recordResponseId:'',//信息记录获取的id，用于关闭界面掉接口所需参数
|
||
}
|
||
},
|
||
async mounted() {
|
||
window.addEventListener('message', (event) => {
|
||
if (event.data === 'dialogClosed') {
|
||
console.log('Dialog 已关闭');
|
||
this.getDuration(1)
|
||
}
|
||
});
|
||
this.startTime = new Date();
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
this.id=this.$route.query.id || urlParams.get('id');
|
||
this.queryType=this.$route.query.queryType || urlParams.get('queryType');
|
||
this.isList=this.$route.query.isList || urlParams.get('isList');
|
||
if( this.id) {
|
||
let res = await carInfoDetail({
|
||
id: this.id,
|
||
queryType: this.queryType,
|
||
})
|
||
this.detailInfo = res?.data
|
||
let result=await saveRecord({type: 1, carInfoId: this.id, duration:'',id:''});
|
||
this.recordResponseId=result?.data?.id
|
||
}
|
||
},
|
||
destroyed() {
|
||
this.getDuration(1)
|
||
},
|
||
methods:{
|
||
copyHandler(copyText){
|
||
let inputNode = document.createElement('input') // 创建input
|
||
inputNode.value = copyText // 赋值给 input 值
|
||
document.body.appendChild(inputNode) // 插入进去
|
||
inputNode.select() // 选择对象
|
||
document.execCommand('Copy') // 原生调用执行浏览器复制命令
|
||
inputNode.className = 'oInput'
|
||
inputNode.style.display = 'none' // 隐藏
|
||
this.$toast('复制成功')
|
||
},
|
||
getDuration(type){
|
||
const endTime = new Date();
|
||
const duration = (endTime - this.startTime) / 1000; // 计算时长（秒）
|
||
this.saveRecord(duration,type);
|
||
},
|
||
async saveRecord(duration,type){
|
||
await saveRecord({type:type,carInfoId:this.id,duration,id:this.recordResponseId || ''})
|
||
},
|
||
handle(){
|
||
this.getDuration(2)
|
||
Dialog.alert({
|
||
message:this.detailInfo.contactNumber ,
|
||
confirmButtonText:this.isWebFunc() ? '确定' : '拨打电话',
|
||
showCancelButton:true,
|
||
}).then(() => {
|
||
if(!this.isWebFunc()){
|
||
window.location.href = `tel:${this.detailInfo.contactNumber}`;
|
||
}
|
||
}).catch(() => {
|
||
// on cancel
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import '@/styles/mixin.scss';
|
||
.wrap {
|
||
@include wh(100%, 100%);
|
||
position: relative;
|
||
background-color: #F6F6F6;
|
||
}
|
||
.headerWrap{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 15px 16px;
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: #FFFFFF;
|
||
.back{
|
||
@include wh(15px,15px);
|
||
}
|
||
span{
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
color: #203152;
|
||
}
|
||
}
|
||
.contentWrap{
|
||
height: calc(100% - 42px);
|
||
overflow-y: auto;
|
||
.wrapCommon{
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
border-radius: 6px;
|
||
backdrop-filter: blur(5.602678571428572px);
|
||
box-sizing: border-box;
|
||
margin: 12px 0;
|
||
}
|
||
.titleWrap{
|
||
margin-top: 10px;
|
||
height: 108px;
|
||
padding: 18px 0 15px 21px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
.info{
|
||
font-weight: 600;
|
||
font-size: 15px;
|
||
color: #212020;
|
||
line-height: 21px;
|
||
span{
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
.time{
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
color: #999999;
|
||
line-height: 17px;
|
||
span:first-child{
|
||
margin-right: 20px;
|
||
}
|
||
}
|
||
.priceWrap{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.viewNum{
|
||
//color: #ccc;
|
||
margin-right: 15px;
|
||
span{
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
}
|
||
.price{
|
||
color: #FF5533;
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
.num{
|
||
font-size: 20px;
|
||
margin-right: 4px;
|
||
}
|
||
.danwei,.su{
|
||
font-size: 11px;
|
||
}
|
||
.su{
|
||
margin: 0 4px;
|
||
}
|
||
}
|
||
}
|
||
.detailInfoWrap{
|
||
box-sizing: border-box;
|
||
padding: 18px 28px 15px 22px;
|
||
.descImg{
|
||
@include wh(72px, 19px);
|
||
}
|
||
.firstDescImg{
|
||
margin-bottom: 24px;
|
||
}
|
||
.descCommon{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding-left: 15px;
|
||
}
|
||
.descItem{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
margin-bottom: 20px;
|
||
}
|
||
.itemInfo{
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 28%;
|
||
span:first-child{
|
||
width: 100%;
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
color: #282828;
|
||
line-height: 20px;
|
||
margin-bottom: 2px;
|
||
white-space: nowrap; /* 强制文本在一行显示 */
|
||
overflow: hidden; /* 隐藏超出部分 */
|
||
text-overflow: ellipsis; /* 超出部分显示省略号 */
|
||
}
|
||
span:last-child{
|
||
font-weight: 400;
|
||
font-size: 10px;
|
||
color: #999999;
|
||
line-height: 14px;
|
||
}
|
||
}
|
||
.suGang{
|
||
width: 1px;
|
||
height: 8px;
|
||
border-right: 1px solid #999999;
|
||
opacity: 0.5;
|
||
}
|
||
.desc{
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
color: #282828;
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
.btn{
|
||
width: 296px;
|
||
height: 46px;
|
||
line-height: 46px;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
border-radius: 5px;
|
||
color: #FFFFFF;
|
||
background: #4A7FEB;
|
||
margin: 0 auto;
|
||
font-size: 15px;
|
||
position: absolute;
|
||
bottom: 20px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.commonColor {
|
||
color: #999999 !important;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.copyIcon {
|
||
width: 35px;
|
||
height: 15px;
|
||
margin-left: 10px
|
||
}
|
||
</style>
|