XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

个人房源详情页

Browse Source
This commit is contained in:
luJianJun
2023-07-25 14:14:00 +08:00
parent becfe41039
commit 0fd2a83043
5 changed files with 181 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/views/detail.vue
View File

@@ -3,7 +3,7 @@
<pageTopBar></pageTopBar>
<div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35">
<breadcrumb :data="housingInfo['data']"></breadcrumb>
<breadcrumb :data="housingInfo['data']" :operation='setOperation'></breadcrumb>
<el-affix :offset="0" @change="changeTitleType">
<div class="top-bar-box dis-f jus-x" v-show="titleType">
<div class="top-bar dis-f al-item jus-bet">
@@ -45,7 +45,7 @@
</div>
</div>
<div class="concat-btn-box" :class="{ 'concat-btn-show': concatType }">
<div class="contact-btn" style="margin:0 0 0 10px;" @click="showConcat = true">
<div class="contact-btn" style="margin:0 0 0 10px;" @click="getConcatData">
联系方式
</div>
</div>
@@ -88,7 +88,7 @@
租期
</div>
<div class="type-text">
{{ housingInfo['data'] && housingInfo['data'].info.rentalduration === '0' ?
{{ !housingInfo['data']||housingInfo['data'] && housingInfo['data'].info.rentalduration === '0' ?
'不限' : `${housingInfo['data'] && housingInfo['data'].info.rentalduration}
${housingInfo['data'] && housingInfo['data'].info.rentalperiod}` }}
</div>
@@ -115,14 +115,14 @@
</div>
<div class="img-list-box dis-f jus-x al-item" @click="imageShow=true">
<img src="../assets/img/detail/moreNot.svg" class="icon left-icon" alt=""
@click="moveImageList('left')">
@click.stop="moveImageList('left')" v-show="imgListTab===0">
<img src="../assets/img/detail/moreAllow.svg" class="icon left-icon" alt=""
style="transform: rotate(180deg);" @click="moveImageList('left')">
style="transform: rotate(180deg);" @click.stop="moveImageList('left')" v-show="imgListTab>0">
<img src="../assets/img/detail/moreAllow.svg" class="icon right-icon" alt=""
@click="moveImageList('right')">
@click.stop="moveImageList('right')" v-show="imgList.length-1!==imgListTab">
<img src="../assets/img/detail/moreNot.svg" class="icon right-icon" alt=""
style="transform: rotate(180deg);" @click="moveImageList('right')">
<div class="dis-f al-item list-box" ref="imageList" v-if="imgList.length > 0">
style="transform: rotate(180deg);" @click.stop="moveImageList('right')" v-show="imgList.length-1===imgListTab">
<div class="dis-f al-item list-box" ref="imageList" v-if="imgList.length > 0" >
<div v-for="(item, i) in imgList" :key="i">
<div class="video" v-if="item && !item.thumbnail">
<div class="icon-box dis-f jus-x al-item">
@@ -131,9 +131,8 @@
<img class="video" ref="imgData" :src="item.image" @load="setImageWidth(i)"
@error="setImageWidth(i)" alt="">
</div>
<div class="img" v-if="item && item.thumbnail"
:style="{ 'background': i % 2 === 0 ? '#000' : '#eee' }">
<img class="img" ref="imgData" :src="item.thumbnail" @load="setImageWidth(i)"
<div class="img dis-f" v-if="item && item.thumbnail">
<img class="img" style="margin:0;" ref="imgData" :src="item.thumbnail" @load="setImageWidth(i)"
@error="setImageWidth(i)" alt="">
</div>
</div>
@@ -154,7 +153,9 @@
</div>
<span class="text">
{{
indexData['data'] && indexData['data']['config']['property'][housingInfo['data'] &&
indexData['data'] &&
indexData['data']['config']&&
indexData['data']['config']['property'][housingInfo['data'] &&
housingInfo['data'].info.property]
}}
</span>
@@ -169,7 +170,9 @@
|
<span class="text" style="margin-left:0;">
{{
indexData['data'] && indexData['data']['config']['elevator'][housingInfo['data'] &&
indexData['data'] &&
indexData['data']['config']&&
indexData['data']['config']['elevator'][housingInfo['data'] &&
housingInfo['data'].info.elevator]
}}
</span>
@@ -180,8 +183,11 @@
</div>
<span class="text">
{{
indexData['data'] && housingInfo['data'] && housingInfo['data'].info.sunshinearea
indexData['data'] &&
housingInfo['data'] &&
housingInfo['data'].info.sunshinearea
!== -1 ?
indexData['data']['config']&&
indexData['data']['config']['sunshinearea'][housingInfo['data'] &&
housingInfo['data'].info.sunshinearea] : ''
}}
@@ -204,7 +210,9 @@
</div>
<span class="text">
{{
indexData['data'] && indexData['data']['config']['gender'][housingInfo['data'] &&
indexData['data'] &&
indexData['data']['config']&&
indexData['data']['config']['gender'][housingInfo['data'] &&
housingInfo['data'].info.gender]
}}
</span>
@@ -214,20 +222,26 @@
<div class="map-box">
<div class="dis-f al-item title-box">
<img src="../assets/img/detail/mapIcon.png" class="img" alt="">
<span class="title">九龙 > 油麻地/旺角/太子</span>
<span class="title">{{
location[housingInfo['data']&&housingInfo['data']['info'].location.substring(0, 1)]
}} > {{
location[housingInfo['data']&&housingInfo['data']['info'].location]
}}</span>
</div>
<div class="dis-f jus-x" style="margin-top:15px;">
<div class="map-s">
<!-- <div class="map-s">
<div class="pop-box">
<div class="address-box dis-f al-item jus-bet">
<div class="dis-f al-item">
<img src="../assets/img/detail/mapMarkIcon.png" class="img" alt="">
<span>独立大厦</span>
<span>{{ housingInfo['data'] &&
housingInfo['data'].info.address }}</span>
</div>
<img src="../assets/img/detail/moreNot.svg" class="icon" alt="">
</div>
</div>
</div>
</div> -->
<!-- <mapInfo :info="housingInfo['data']&&housingInfo['data'].info"></mapInfo> -->
</div>
</div>
<div class="dis-f jus-x">
@@ -377,7 +391,9 @@
<div class="dis-f jus-x">
<div class="user-type">
{{
indexData['data'] && indexData['data']['config']['intermediary'][housingInfo['data'] &&
indexData['data'] &&
indexData['data']['config']&&
indexData['data']['config']['intermediary'][housingInfo['data'] &&
housingInfo['data'].info.intermediary]
}}
</div>
@@ -385,15 +401,11 @@
<div class="dis-f al-item jus-x time-box">
<img src="../assets/img/detail/timeIcon.svg" class="icon" alt="">
<span>
{{
(new Date().getTime() - new
Date().getTime(housingInfo['data'] && housingInfo['data'].info.updatetime)) / 3600000
< 3600000 ? '一小时内' : `${Math.floor((new Date().getTime() - new
Date().getTime(housingInfo['data'] && housingInfo['data'].info.updatetime)) /
3600000)}` }} </span>
{{ checkUpdateTime(housingInfo['data'] && housingInfo['data'].info.updatetime)
}} </span>
</div>
<div class="dis-f jus-x">
<div class="contact-btn">
<div class="contact-btn" @click="getConcatData">
联系方式
</div>
</div>
@@ -441,7 +453,7 @@
<div class="pop-box" v-show="showConcat" @click="showConcat = !showConcat">
<!-- 两种信息 -->
<!-- third-concat -->
<div class="pop-big-box ">
<div class="pop-big-box" v-show="concatData.data&&concatData.data.count>1">
<div class="pop-info-box dis-f jus-x al-item">
<div class="pop-big-bg dis-f jus-x al-item">
<div class="user-liner-box dis-f al-item">
@@ -556,16 +568,16 @@
<img src="../assets/img/detail/close.png" class="close-img" alt="">
</div>
<!-- 一种信息 -->
<!-- <div class="pop">
<div class="pop" v-show="concatData.data&&concatData.data.count===1">
<div class="pop-bg-s-box dis-f jus-x al-item">
<div class="pop-bg-s">
<div class="pos-a pop-bg-s" style="z-index:666;">
<div class="title s-w-100">
联系方式
</div>
<div class="s-w-100 mg-t-35">
<div class="wx-qrcode s-w-100">
<img src="" alt="">
<div class="s-w-100 mg-t-35" v-if="concatData.data&&concatData.data.wechatdata">
<div class="wx-qrcode s-w-100 dis-f al-item jus-x">
<img :src="concatData.data&&concatData.data.wechatdata.url" class="img" alt="">
</div>
<div style="margin-top:15px">
<div>
@@ -576,7 +588,7 @@
</div>
</div>
</div>
<div class="s-w-100">
<div class="s-w-100" v-if="concatData.data&&concatData.data.whatsapp">
<div class="whatsapp-title">
WhatsApp
</div>
@@ -585,7 +597,7 @@
</div>
</div>
<div class="s-w-100 dis-f jus-x al-item mg-t-35">
<div class="clone-btn dis-f al-item jus-x">
<div class="clone-btn dis-f al-item jus-x" v-if="concatData.data&&concatData.data.whatsapp">
<img src="../assets/img/detail/cloneIcon.png" class="icon" alt="">
复制
</div>
@@ -597,7 +609,7 @@
</div>
<img src="../assets/img/detail/close.png" class="close-img" alt="">
<img src="../assets/img/detail/popBg.svg" class="img" alt="">
</div> -->
</div>
</div>
</div>
<watchImage :show="imageShow" :close="cloaseImageShow" :list="imgList"></watchImage>
@@ -613,6 +625,7 @@ import api from "../utils/api";
import footerTool from '@/components/footer/footer.vue'
import watchImage from '../components/detail/imageWatch.vue'
import breadcrumb from '../components/detail/breadcrumb.vue'
import mapInfo from '../components/public/viewMap.vue'
import { ElMessage } from 'element-plus'
import store from '@/store';
@@ -625,26 +638,35 @@ let cloaseImageShow=()=>{
imageShow.value=false
}
//视频实例
//图片组实例
let imageList = ref(null)
//图片数组
let imgList = ref([])
//图片距离
let imageLIst=ref([])
let imgListTab = ref(0)
//计时器
let interval = ''
//点击方向按钮
let moveImageList = (type) => {
if ((type === 'left' && imgListTab.value === 0) || (imgListTab.value === imgList.value.length - 1 && type === 'right')) return
if ((type === 'left' && imgListTab.value === 0) || (imgListTab.value === imageLIst.value.length - 1 && type === 'right')) return
type === 'left' ? imgListTab.value-- : imgListTab.value++
setOffsetWidth(imgList.value[imgListTab.value]['value'] * imgListTab.value, type)
setOffsetWidth(imageLIst.value[imgListTab.value],type)
}
//设置滚动
let setOffsetWidth = (num, type) => {
let scroll = null
let scroll = 0
let clientWidth=imageList.value.clientWidth
let scrollWidth=imageList.value.scrollWidth
interval = setInterval(() => {
if(!imageList.value){
clearInterval(interval)
return
}
scroll = type === 'left' ? imageList.value.scrollLeft -= 10 : imageList.value.scrollLeft += 10
if (num === scroll) {
if ((type === 'left'?num>=scroll:num <= scroll)||scroll+clientWidth>=scrollWidth) {
clearInterval(interval)
}
})
@@ -653,7 +675,7 @@ let setOffsetWidth = (num, type) => {
let imgData = ref(null)
//获取图片宽度
let setImageWidth = (num) => {
imgList.value[num]['value'] = imgData.value[num] && imgData.value[num].offsetWidth + 10
imageLIst.value[num]=imgData.value[num] && imgData.value[num].offsetLeft-20
}
//学校地址数据
@@ -685,7 +707,7 @@ let changeTitleType = () => {
}
let concatType = ref(false)
//联系方式
//联系方式顶部显示
let changeConcatType = () => {
concatType.value = !concatType.value
}
@@ -723,15 +745,15 @@ let setHousingArr = () => {
arr = housingInfo['data'].info.video?arr.concat(housingInfo['data'] && housingInfo['data'].info.video):[]
arr = arr.concat(housingInfo['data'] && housingInfo['data'].info.picturegroup)
imgList.value = imgList.value.concat(arr)
// console.log('imgList',imgList.value)
imgList.value = imgList.value.concat(arr)
}
let location = store.state.indexData.config && store.state.indexData.config.location
//设置顶部导航
let setNavigation = () => {
let location = store.state.indexData.config && store.state.indexData.config.location
let type = store.state.indexData.config && store.state.indexData.config.type
indexData['data'] = store.state.indexData
// console.log(123, indexData['data'])
if(!location)return
store.state.routeList['thirdIndex'] = {
path: "",
title: `${location[housingInfo['data']['info'].location.substring(0, 1)]}${type[housingInfo['data']['info'].type.substring(0, 1)]}房源`
@@ -759,7 +781,6 @@ let getHousingInfo = () => {
name: housingInfo['data']['info'].address,
})
concatInfo['data']=store.state.indexData.wechat
console.log(distanceList.value)
} else {
ElMessage({
message: res.message
@@ -768,6 +789,62 @@ let getHousingInfo = () => {
})
}
//收藏
let setOperation=()=>{
api.operation({
token:housingInfo['data'].token
}).then(res=>{
console.log(res)
if(res.code===200){
housingInfo['data'].info.count_fav=res.data.count
housingInfo['data'].isfav=res.data.status
}else{
ElMessage({
message:res.message
})
}
})
}
//获取联系方式
let concatData=reactive({})
let getConcatData=()=>{
showConcat.value=true
if(concatData['data'])return
api.contactData({
token:housingInfo['data'].token
}).then(res=>{
console.log(res)
if(res.code===200){
concatData['data']=res.data
let dataCount=0
Object.keys(concatData['data']).map(res=>{
if(concatData['data'][res]){
dataCount++
}
})
concatData['data']['count']=dataCount
console.log(concatData)
}
})
}
//判断更新时间
let checkUpdateTime=(Time)=>{
const now = new Date();
let time = new Date(Time)
const diff = now - time;
const seconds = Math.floor(diff / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
const days = Math.floor(hours / 24);
if (seconds < 60) return `${seconds}秒前`;
else if (minutes < 60) return `${minutes}分钟前`;
else if (hours < 24) return `${hours}小时前`;
else if (days < 7) return `${days}天前`;
else return Time;
}
//监听滚动条
const onPageSrcoll = (e) => {
let body = document.documentElement ? document.documentElement : document.body ?
@@ -1120,6 +1197,10 @@ img {
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
margin: 0 auto;
.img{
width:130px;
height:130px;
}
}
.mg-t-35 {
@@ -1532,7 +1613,7 @@ img {
.list-box {
overflow-x: scroll;
height: 100px;
height: 120px;
color: #fff;
.icon-box {
@@ -1555,7 +1636,6 @@ img {
width: 100px;
height: 100px;
border-radius: 10px;
background: #000;
margin-right: 10px;
flex-shrink: 0;
position: relative;
@@ -1563,9 +1643,7 @@ img {
.img {
height: 100px;
width: 120px;
border-radius: 10px;
background: #000;
margin-right: 10px;
flex-shrink: 0
}