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-21 19:25:35 +08:00
parent 57b5448072
commit abae187b6d
14 changed files with 575 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

537
src/views/apartmentDetail.vue
View File

@@ -23,37 +23,175 @@
</div>
<div class="details-box flexflex">
<div class="details-left flex1">
<div class="type-box">
<div class="type-item">
<!-- 类型数据 -->
<!-- <div class="type-box" v-if="roomList.length != 0"> -->
<div class="type-box" v-if="false">
<div class="type-item flexacenter" v-for="item in roomList">
<img class="type-icon" v-if="item['status'] == 1"
src="@/assets/img/apartmentDetail/apartment-have.svg" />
<img class="type-icon" v-else src="@/assets/img/apartmentDetail/apartment-not.svg" />
<div class="type-left flex1">
<div class="type-name">双人套间A</div>
<div class="type-name">{{ item['name'] }}</div>
<div class="type-tags flexacenter">
<div class="tags-item flexcenter" :class="{ 'first': item == 1 }" v-for="item in 4">仅剩1间
</div>
<div class="tags-item flexcenter first" v-if="item.allowance">仅剩{{ item.allowance }}间</div>
<div class="tags-item flexcenter" v-for="it in item.tags">{{ it }}</div>
</div>
<div class="media-box flexflex">
<div class="media-item flexcenter" v-for="item in 5">
<img class="media-img"
src="https://axure-file.lanhuapp.com/md5__c1c85f2680e7e9a2026de4d381081fc6.svg">
<div class="media-item flexcenter" v-for="it in item['videos']">
<img class="media-img" :src="it['thumbnail']">
<img class="media-icon" src="@/assets/img/apartmentDetail/media-icon.svg" />
</div>
<div class="media-item flexcenter" v-for="it in item['images']">
<img class="media-img" :src="it['thumbnail']">
</div>
</div>
</div>
<div class="type-right">
<div class="type-right flexacenter">
<div class="price-box flexflex">
<div class="former">HK$ 7600/月</div>
<div class="former">HK$ {{ item['price'] }}/月</div>
<div class="new flexacenter">
<div class="unit">HK$</div>
<div class="cost">8200</div>
<div class="cost">{{ item['discountprice'] }}</div>
/月
</div>
</div>
<div class="consult-btn flexcenter">咨询</div>
<div class="consult-btn flexcenter" v-if="item['status'] == 1">咨询</div>
<div class="full-occupancy flexcenter" v-else>已租满</div>
</div>
</div>
</div>
<!-- 优惠活动 -->
<!-- <div class="details-item special-offer" v-if="info['promotionalactivities']"> -->
<div class="details-item special-offer" v-if="false">
<div class="details-header flexacenter">
<img class="icon" src="@/assets/img/apartmentDetail/special-offer.svg">
优惠活动
</div>
<div class="text" v-html="info['promotionalactivities']"></div>
</div>
<!-- 地址 -->
<div class="details-item location" v-if="false">
<div class="details-header flexacenter">
<img class="icon" src="@/assets/img/apartmentDetail/location-icon.png">
{{ info.location || '位置' }}
</div>
<!-- 交通 -->
<div class="traffic-box" v-if="info['traffic']">
<div class="traffic-title item-title flexcenter">交通</div>
<div class="traffic-content" v-html="info['traffic']"></div>
</div>
</div>
<!-- 房源详情 -->
<!-- <div class="details-item special-offer" v-if="info['message']"> -->
<div class="details-item listing-details" v-if="false">
<div class="details-header flexacenter">
<img class="icon" src="@/assets/img/apartmentDetail/listing-details.png">
房源详情
</div>
<div class="text" v-html="info['message']"></div>
</div>
<!-- 公寓设施 -->
<div class="details-item apartment-facilities" v-if="info['message']">
<div class="details-header flexacenter">
<img class="icon" src="@/assets/img/apartmentDetail/apartment-facilities.svg">
公寓设施
</div>
<div class="facilities-box">
<div class="facilities-item flexflex" v-for="(item, key) of facilitiesKeyValue">
<div class="facilities-header flexflex">
<div class="item-title">{{ item }}</div>
</div>
<div class="facilities-list flexflex flex1">
<div class="item flexcenter" v-for="it in info['facilities'][key]">
<img class="icon" src="@/assets/img/apartmentDetail/blue-tick.svg" />
{{ it }}
</div>
</div>
</div>
</div>
</div>
<!-- 生活 -->
<!-- <div class="details-item life" v-if="info['life']"> -->
<div class="details-item life" v-if="false">
<div class="details-header flexacenter">
<img class="icon" src="@/assets/img/apartmentDetail/live.png">
生活
</div>
<div class="text" v-html="info['life']"></div>
</div>
<!-- 品牌介绍 -->
<!-- <div class="details-item company" v-if="company"> -->
<div class="details-item company" v-if="false">
<div class="details-header flexacenter">
<img class="icon" src="@/assets/img/apartmentDetail/live.png">
品牌介绍
</div>
<img class="company-img flexflex" :src="company['imageurl']">
<div class="text" v-html="company['introduction']"></div>
</div>
<div class="details-item hint-box">
<div class="hint-item">
温馨提示：房源信息均由公寓方/酒店提供并对其真实性、合法性等负责，平台不负责甄别和审核具体内容真实性和有效性等，请务必仔细核实相关信息，谨防上当受骗。
</div>
<div class="hint-item"></div>
<div class="hint-item flexacenter">
公寓/酒店/中介房源推广合作请联系：<a href="mailto:ad@gter.net">ad@gter.net</a>
</div>
</div>
</div>
<div class="details-right flexacenter">
<div class="QRcode-box apartment-QRcode flexflex" v-if="false">
<img class="mini-program-title" src="@/assets/img/apartmentDetail/mini-program-title.png">
<div class="QRcode-case flexcenter">
<img class="QRcode-img" src="" alt="">
</div>
<div class="apartment-QRcode-hint flexacenter">
<img class="scan-icon" src="@/assets/img/apartmentDetail/scan-icon.png">
手机查看该公寓
</div>
</div>
<div class="QRcode-box group-QRcode flexflex" v-if="false">
<img class="group-title" src="@/assets/img/apartmentDetail/group-title.png">
<div class="QRcode-case flexcenter">
<img class="QRcode-img" src="" alt="">
</div>
<div class="group-QRcode-hint flexacenter">
<img class="scan-icon" src="@/assets/img/apartmentDetail/scan-icon.png">
入群请添加
<b>方同学的小助手</b>
</div>
</div>
<!-- 同品牌公寓 -->
<div class="same-brand-title flexcenter">
<img class="same-brand-icon" src="@/assets/img/apartmentDetail/same-brand.png">
同品牌其他公寓
</div>
<div class="same-brand-list">
<div class="same-brand-item">
<div class="same-brand-header">
<img class="same-brand-img"
src="https://axure-file.lanhuapp.com/md5__27da7a1a511d30b97b139f58626415e5.svg" />
<div class="apartment-name">ZHELI這裡佐敦学生公寓</div>
<div class="apartment-synopsis"></div>
</div>
</div>
</div>
</div>
</div>
@@ -62,12 +200,38 @@
</template>
<script setup>
import { ref } from 'vue';
import { ref, onMounted, onUnmounted, watch, getCurrentInstance, nextTick } from 'vue';
import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
const uniqid = "1qfWOLTPbyPH"
const uniqid = "zXGnbKbee4Kb"
const { proxy } = getCurrentInstance()
// 房间类型
let roomList = ref([])
let info = ref({})
let facilitiesKeyValue = { // 设施的键值对
public: "公共",
kitchen: "餐厨",
lavatory: "洗手间",
}
let company = {} // 品牌数据
proxy.$get("/tenement/pc/api/apartment/details", { uniqid }).then(res => {
console.log(res.data, "res");
if (res.code != 200) return
let data = res.data
roomList.value = data['roomList']
info.value = data['info']
company = data['company']
console.log(company);
})
let input = ref("")
</script>
<style lang="less" scoped>
@@ -115,6 +279,7 @@ let input = ref("")
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
font-size: 14px;
padding: 0 30px;
margin-bottom: 20px;
justify-content: space-between;
.nav-box {
@@ -174,14 +339,12 @@ let input = ref("")
.details-box {
justify-content: space-between;
height: 100px;
background-color: #FDDA55;
align-items: flex-start;
.details-left {
.type-box {
.type-item {
width: 876px;
height: 230px;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(235, 235, 235, 1);
border-radius: 16px;
@@ -189,6 +352,18 @@ let input = ref("")
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
font-size: 14px;
padding: 30px;
margin-bottom: 20px;
position: relative;
.type-icon {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
transform: rotate(270deg);
}
.type-left {
@@ -196,9 +371,12 @@ let input = ref("")
font-weight: 650;
font-size: 20px;
color: #000000;
margin-bottom: 16px;
}
.type-tags {
margin-bottom: 20px;
.tags-item {
height: 24px;
background-color: rgba(242, 242, 242, 1);
@@ -220,11 +398,16 @@ let input = ref("")
.media-box {
.media-item {
position: relative;
height: 80px;
margin-right: 10px;
.media-img {}
.media-img {
// width: 76px;
height: 80px;
border-radius: 10px;
cursor: pointer;
}
.media-icon {
position: absolute;
@@ -242,21 +425,36 @@ let input = ref("")
.price-box {
flex-direction: column;
align-items: flex-end;
margin-right: 20px;
.former {
color: #AAAAAA;
font-size: 14px;
text-decoration: line-through;
text-decoration-color: #797979;
margin-bottom: 3px;
}
.new {
.unit {
font-family: 'Arial-Black', 'Arial Black', sans-serif;
font-weight: 900;
color: #000000;
font-size: 16px;
}
.cost {
font-family: 'Arial-Black', 'Arial Black', sans-serif;
font-weight: 900;
font-size: 24px;
color: #F95D5D;
margin: 0 6px;
}
align-items: baseline;
font-size: 14px;
color: #555555;
}
}
@@ -272,14 +470,313 @@ let input = ref("")
color: #FFFFFF;
cursor: pointer;
}
.full-occupancy {
width: 90px;
height: 40px;
background-color: rgba(237, 246, 255, 0);
border: 1px solid rgba(215, 215, 215, 1);
border-radius: 36px;
font-weight: 400;
font-size: 16px;
color: #AAAAAA;
}
}
}
}
.item-title {
padding: 0 11px;
height: 26px;
background-color: rgba(51, 51, 51, 1);
border-radius: 8px;
font-size: 14px;
color: #FFFFFF;
line-height: 26px;
display: inline-block;
}
.details-item {
width: 876px;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(235, 235, 235, 1);
border-radius: 16px;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
font-size: 14px;
margin-bottom: 20px;
.details-header {
height: 82px;
padding: 0 30px;
border-bottom: 1px solid #ebebeb;
font-size: 16px;
color: #000000;
.icon {
width: 20px;
height: 22px;
margin-right: 4px;
}
}
.text {
font-weight: 400;
font-size: 16px;
color: #555555;
line-height: 30px;
padding: 20px 30px;
white-space: pre-line;
}
.traffic-box {
padding: 0 30px;
.traffic-title {
margin-bottom: 16px;
}
font-weight: 400;
font-size: 16px;
color: #555555;
line-height: 30px;
white-space: pre-line;
padding-bottom: 30px;
}
&.apartment-facilities {
.facilities-box {
padding: 30px;
.facilities-item {
align-items: flex-start;
&:not(:last-of-type) {
margin-bottom: 30px;
}
.facilities-header {
width: 100px;
}
.facilities-list {
flex-wrap: wrap;
.item {
font-size: 16px;
line-height: 26px;
color: #333333;
margin-bottom: 10px;
margin-right: 50px;
.icon {
width: 16px;
height: 16px;
margin-right: 10px;
}
}
}
}
}
}
&.company {
.company-img {
width: 420px;
height: 254px;
margin: 0 auto;
}
}
&.hint-box {
color: #7F7F7F;
line-height: 24px;
font-size: 13px;
padding: 30px;
.hint-item {
min-height: 24px;
a {
color: #7F7F7F;
text-decoration: underline;
}
}
}
}
}
.details-right {
width: 304px;
flex-direction: column;
.QRcode-box {
width: 304px;
height: 304px;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(235, 235, 235, 1);
border-radius: 16px;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
flex-direction: column;
align-items: center;
margin-bottom: 20px;
.scan-icon {
width: 14px;
height: 14px;
margin-right: 7px;
}
&.apartment-QRcode {
padding: 40px 0;
.mini-program-title {
width: 201px;
height: 24px;
margin-bottom: 28px;
}
.QRcode-case {
width: 120px;
height: 120px;
background-color: rgba(255, 255, 255, 1);
border-radius: 70px;
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
margin-bottom: 33px;
.QRcode-img {
width: 103px;
height: 103px;
}
}
.apartment-QRcode-hint {
font-size: 14px;
color: #000000;
}
}
&.group-QRcode {
padding: 40px 0;
.group-title {
width: 140px;
height: 26px;
margin-bottom: 26px;
}
.QRcode-case {
width: 120px;
height: 120px;
background-color: rgba(255, 255, 255, 1);
border-radius: 15px;
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
margin-bottom: 28px;
.QRcode-img {
width: 100px;
height: 100px;
}
}
.group-QRcode-hint {
color: #555555;
font-size: 14px;
b {
font-size: 14px;
color: #000;
font-weight: 650;
margin-left: 5px;
}
}
}
}
.same-brand-title {
margin-bottom: 20px;
font-size: 18px;
color: #000000;
background: -webkit-linear-gradient(350.348166533196deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%);
background: -moz-linear-gradient(99.6518334668042deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%);
background: linear-gradient(99.6518334668042deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%);
border-radius: 12px;
width: 304px;
height: 60px;
border: 5px solid #fff;
position: relative;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706);
&::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
background-color: #fff;
transform: rotate(45deg) translateX(-50%);
left: 50%;
bottom: -14px;
z-index: -1;
}
.same-brand-icon {
width: 24px;
height: 24px;
margin-right: 4px;
}
}
.same-brand-list {
.same-brand-item {
width: 304px;
height: 440px;
background-color: rgba(255, 255, 255, 1);
border-radius: 17px;
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
.same-brand-header {
width: 288px;
height: 192px;
overflow: hidden;
border-radius: 20px;
margin: 0 auto;
position: relative;
.same-brand-img {
width: 288px;
height: 192px;
}
.apartment-name {
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
padding: 0 15px;
height: 32px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.apartment-synopsis {}
}
}
}
}
}