gter.net/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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/detail/breadcrumb.vue
View File

@ -24,11 +24,12 @@
<div class="line">
</div>
<div class="btn-s dis-f al-item jus-x">
<div class="btn-s dis-f al-item jus-x" style="position: relative;">
<img src="../../assets/img/detail/forward.png" class="img" alt="">
<span class="mg-l-5">
转发
</span>
<transmit-btn v-if="data.data['info']" :qrcode="data.data['qrcode']" :title="data.data.info['title']"></transmit-btn>
</div>
</div>
</div>
@ -39,6 +40,7 @@
import { ArrowRight } from '@element-plus/icons-vue'
import { reactive, onMounted, ref, defineProps,watchEffect } from 'vue'
import store from '@/store'
import transmitBtn from '@/components/public/transmitBtn.vue'
const props=defineProps({
data: {
@ -52,6 +54,7 @@ const props=defineProps({
}
})
let data=reactive({})
let operation=props.operation
//导航数据

172
src/components/public/transmitBtn.vue Normal file
View File

@ -0,0 +1,172 @@
<template>
<el-popover placement="bottom" :width="674" trigger="click" popper-style="padding:0;border-radius: 10px;">
<template #reference>
<div class="btn" @click="transmit"></div>
</template>
<div class="transmit-unfold-box">
<div class="transmit-item">
<div class="transmit-head">转发网页版</div>
<div class="transmit-box transmit-webpage-box">
<div class="transmit-webpage-title">{{ props['title'] }}</div>
<div class="transmit-link">{{ url }}</div>
</div>
<div class="copy-link-btn flexcenter" @click="copy">复制链接</div>
</div>
<div class="transmit-item">
<div class="transmit-head">转发小程序版</div>
<div class="transmit-box transmit-QRCode-box"><img :src="props['qrcode']" class="QRCode">
<div class="hint"><img src="//offer.gter.net/image/gter/offer/imgdetails/u161.png?v=4.0.1_1689898293"
class="saoma-icom">手机查看该Offer
</div>
</div>
</div>
</div>
<!-- <img v-if="user.identity == 1" style="width: 360px;"
src="@/assets/img/publicImage/mediation-authentication-code.svg">
<img v-else style="width: 360px;" src="@/assets/img/publicImage/housing-certification-code.svg"> -->
</el-popover>
</template>
<script setup>
import { defineProps } from 'vue';
import { copyToClipboard } from '@/utils/util.js'
import { ElMessage } from 'element-plus'
const props = defineProps({
title: String,
qrcode: String,
})
let url = location.href
const copy = () => {
copyToClipboard(`${props['title']} - ${url}`).then(() => {
ElMessage.success("复制成功！！！")
})
}
</script>
<style lang="less" scoped>
.btn {
// background-color: antiquewhite;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.transmit-unfold-box,
.transmit-unfold-box * {
box-sizing: content-box;
}
.transmit-unfold-box {
background-color: #fff;
padding: 42px 54px 12px 44px;
display: flex;
border-radius: 10px;
// box-shadow: 0px 2px 11px -2px #dcebef;
// border: 1px solid #e0e0e0;
}
.transmit-unfold-box .transmit-unfold-close {
display: flex;
justify-content: flex-end;
position: absolute;
top: 0;
right: 0;
}
.transmit-unfold-box .transmit-unfold-close .transmit-close-icon {
width: 16px;
height: 16px;
padding: 10px 12px;
cursor: pointer;
}
.transmit-unfold-box .transmit-item {
display: flex;
flex-direction: column;
}
.transmit-unfold-box .transmit-item:last-of-type {
margin-left: 74px;
}
.transmit-unfold-box .transmit-item .transmit-head {
font-size: 16px;
line-height: 16px;
// font-weight: 550;
color: #000;
}
.transmit-unfold-box .transmit-item .transmit-box {
border-radius: 16px;
border: 1px solid #f0f0f0;
margin-top: 28px;
margin-bottom: 32px;
}
.transmit-unfold-box .transmit-item .transmit-webpage-box {
width: 265px;
padding: 12px 18px 12px 15px;
font-size: 14px;
}
.transmit-unfold-box .transmit-item .transmit-webpage-box .transmit-webpage-title {
line-height: 24px;
word-break: break-word;
color: #000;
}
.transmit-unfold-box .transmit-item .transmit-webpage-box .transmit-link {
line-height: 18px;
color: #a0a0a0;
word-wrap: break-word;
}
.transmit-unfold-box .transmit-item .transmit-QRCode-box {
width: 198px;
height: 128px;
flex-direction: column;
padding: 20px 0;
display: flex;
justify-content: space-between;
}
.transmit-unfold-box .transmit-item .transmit-QRCode-box .QRCode {
width: 98px;
height: 98px;
margin: 0 auto;
}
.transmit-unfold-box .transmit-item .transmit-QRCode-box .hint {
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
text-align: center;
}
.transmit-unfold-box .transmit-item .transmit-QRCode-box .hint .saoma-icom {
width: 14px;
height: 14px;
margin-right: 8px;
}
.transmit-unfold-box .copy-link-btn {
background-color: #46dfba;
border-radius: 5px;
width: 120px;
height: 38px;
user-select: none;
cursor: pointer;
color: #000;
}
</style>

2
src/utils/util.js
View File

@ -28,6 +28,8 @@ function copyToClipboard(text) {
});
}
module.exports = {
setSeoTitle,
redirectToExternalWebsite,

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;
}
}

3
src/views/detail.vue
View File

@ -464,7 +464,8 @@
</div>
</div>
<div class="dis-f jus-x al-item">
<div class="body-maxWidth" ref="gridContainer" style="margin-top:15px;display: flex;flex-wrap: wrap; margin-bottom: 50px;">
<div class="body-maxWidth" ref="gridContainer"
style="margin-top:15px;display: flex;flex-wrap: wrap;margin-bottom: 50px;">
<indexWaterfallBox v-for="(items, i) in recommendListData" :data="items" :key="items.id">
</indexWaterfallBox>
</div>