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

详情页的转发组件

Browse Source
This commit is contained in:
A1300399510
2023-07-25 16:54:18 +08:00
parent d49eed70a8
commit 35ec051717
5 changed files with 208 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/views/apartmentDetail.vue
View File

@@ -4,7 +4,7 @@
<div class="content wid1200">
<div class="header">
<div class="top flexflex">
<div class="brand-name flexcenter">ZHELI這裡</div>
<div class="brand-name flexcenter">{{ company.title }}</div>
<div class="brand-abstract">{{ info['propaganda'] }}</div>
</div>
<div class="header-content flexflex">
@@ -75,6 +75,7 @@
<div class="btn-item transmit-btn flexcenter" @click="handleTransmit">
<img class="transmit-icon" src="@/assets/img/publicImage/transmit-icon.png" />
转发
<transmit-btn :qrcode="qrcode" :title="info['title']"></transmit-btn>
</div>
<div class="btn-item consult-btn flexcenter" @click="modificationContact">咨询</div>
</div>
@@ -94,14 +95,12 @@
<div class="tags-item flexcenter" v-for="it in item.tags">{{ it }}</div>
</div>
<!-- <view class="room-type-media" wx:if="{{ item.videos.length != 0 || item.images.length != 0 }}"> -->
<!-- {{ mediaBtnstate[index] != 1 }} -->
<div class="media-box flexflex" v-if="item.videos.length != 0 || item.images.length != 0">
<div class="media-btn flexcenter" @click="handleMediaBtn('left', index)"
v-if="item.videos.length + item.images.length > 5">
<img v-show="mediaBtnstate[index] != 1" class="left arrow"
<img v-show="mediaBtnstate[index] != 0" class="rotate180 arrow"
src="@/assets/img/publicImage/black-arrow.svg" alt="">
<img v-show="mediaBtnstate[index] == 1" class="arrow"
<img v-show="mediaBtnstate[index] == 0" class="arrow"
src="@/assets/img/publicImage/gray-arrow.svg" alt="">
</div>
<div class="media-list flexacenter" :class="`element${index}`">
@@ -115,7 +114,10 @@
</div>
<div class="media-btn flexcenter" @click="handleMediaBtn('right', index)"
v-if="item.videos.length + item.images.length > 5">
<img class="arrow" src="@/assets/img/publicImage/black-arrow.svg" alt="">
<img v-show="mediaBtnstate[index] != 1" class="arrow"
src="@/assets/img/publicImage/black-arrow.svg" alt="">
<img v-show="mediaBtnstate[index] == 1" class="rotate180 arrow"
src="@/assets/img/publicImage/gray-arrow.svg" alt="">
</div>
</div>
</div>
@@ -150,9 +152,8 @@
<img class="icon" src="@/assets/img/apartmentDetail/location-icon.png">
{{ info.location || '位置' }}
</div>
<view-map :latlng="{ longitude: info['coordinate'][0], latitude: info['coordinate'][1] }"
:name="info['address']"></view-map>
<!-- <view-map :latlng="{ longitude: info['coordinate'][0], latitude: info['coordinate'][1] }"
:name="info['address']"></view-map> -->
<!-- 交通 -->
<div class="traffic-box" v-if="info['traffic']">
@@ -336,8 +337,9 @@ import { useStore } from 'vuex';
import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
import footerpage from '@/components/footer/footer.vue'
import viewMap from '@/components/public/viewMap.vue'
import transmitBtn from '@/components/public/transmitBtn.vue'
import { copyToClipboard } from '@/utils/util.js'
import { transmit } from '@/utils/util.js'
const uniqid = "aWqSz58aKKvn"
// uniqid=aWqSz58aKKvn
const { proxy } = getCurrentInstance()
@@ -481,10 +483,12 @@ const dualBrandData = () => {
// 点击转发
const handleTransmit = () => {
let url = location.href
copyToClipboard(`${info.value['title']} - ${url}`).then(() => {
ElMessage.success("复制成功！！！")
})
// let url = location.href
// transmit(`${info.value['title']} - ${url}`)
// copyToClipboard(`${info.value['title']} - ${url}`).then(() => {
// ElMessage.success("复制成功！！！")
// })
}
let contactReservationState = ref(false) // 联系预订客服的弹窗状态
@@ -525,11 +529,12 @@ const handleMediaBtn = (type, index) => {
element.scrollTo(scrollOptions);
nextTick(() => {
console.log(element.scrollLeft + 460, element.scrollWidth);
if (element.scrollLeft == 0) mediaBtnstate.value[index] = 0
else if (element.scrollLeft + 460 == element.scrollWidth) mediaBtnstate.value[index] = 1
else mediaBtnstate.value[index] = 2
setTimeout(() => {
if (element.scrollLeft == 0) mediaBtnstate.value[index] = 0
else if (element.scrollLeft + 460 == element.scrollWidth) mediaBtnstate.value[index] = 1
else mediaBtnstate.value[index] = 2
}, 150);
})
}
@@ -810,6 +815,7 @@ const handleMediaBtn = (type, index) => {
border: 1px solid rgba(235, 235, 235, 1);
color: #333333;
margin-right: 10px;
position: relative;
.transmit-icon {
width: 20px;
@@ -939,7 +945,9 @@ const handleMediaBtn = (type, index) => {
height: 80px;
width: 30px;
cursor: pointer;
.rotate180{
user-select: none;
.rotate180 {
transform: rotate(180deg);
}
@@ -1121,7 +1129,7 @@ const handleMediaBtn = (type, index) => {
.company-img {
width: 420px;
height: 254px;
margin: 0 auto;
margin: 10px auto 0;
}
}