4.6接接口
This commit is contained in:
@@ -64,19 +64,16 @@
|
||||
<img class="safety-icon" src="@/assets/img/publicImage/safety-icon.png" />
|
||||
实地考察
|
||||
</div>
|
||||
<div class="label-item flexacenter violet">费用全包</div>
|
||||
<div class="label-item flexacenter red">费用全包</div>
|
||||
<div class="label-item flexacenter">费用全包</div>
|
||||
<div class="label-item flexacenter">费用全包</div>
|
||||
<div class="label-item flexacenter">费用全包</div>
|
||||
<div class="label-item flexacenter">费用全包</div>
|
||||
<div class="label-item flexacenter violet">0服务费</div>
|
||||
<div class="label-item red" v-for="(item, index) in info.hottags" :key="index">{{ item }}</div>
|
||||
<div class="label-item" v-for="(item, index) in info.tags" :key="index">{{ item }}</div>
|
||||
</div>
|
||||
|
||||
<div class="introduce">
|
||||
<div class="introduce-head flexacenter">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/yellow-diamond.png" />
|
||||
<div class="name">iRent</div>
|
||||
<div class="full-name flex1">油尖旺中心地带的品质公寓</div>
|
||||
<div class="name">{{ company.title }}</div>
|
||||
<div class="full-name flex1">{{ info.propaganda }}</div>
|
||||
<div class="more flexacenter">
|
||||
同品牌
|
||||
<img class="icon" src="@/assets/img/publicImage/black-arrow.svg" />
|
||||
@@ -85,7 +82,6 @@
|
||||
<div class="synopsis wordbreak">{{ info["introduction"] }}</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="synopsis wordbreak">{{ info["introduction"] }}</div> -->
|
||||
<div class="place flexflex" v-if="info['address']">
|
||||
<div class="place-head flex1 flexacenter">
|
||||
<img class="icon" alt="地图-图标" src="@/assets/img/publicImage/location-icon.png" />
|
||||
@@ -154,7 +150,7 @@
|
||||
</div>
|
||||
<div class="details-box flexflex">
|
||||
<div class="details-left flex1" ref="detailsLeft">
|
||||
<div class="special-offer">
|
||||
<div class="special-offer" v-if="info.promotionalactivities">
|
||||
<img class="special-bj" src="@/assets/img/publicImage/special-bj.svg" />
|
||||
<img class="head" src="@/assets/img/publicImage/special-title.png" />
|
||||
<img class="gift" src="@/assets/img/publicImage/special-gift.png" />
|
||||
@@ -164,7 +160,7 @@
|
||||
<img class="fireworks" src="@/assets/img/publicImage/special-fireworks.png" />
|
||||
<div class="board">
|
||||
<div class="gray">
|
||||
<p class="text" user-select>活动周期:即ntil8月28日 年付优惠:管理费5折+免1.5%跨境支付手续费活动周期:即ntil8月28日 年付优惠:管理费5折+免1.5%跨境支付手续费活动周期:即ntil8月28日 年付优惠:管理费5折+免1.5活动周期:即ntil8月28日 年付优惠:管理费5折+免1.5%跨境支付手续费活动周期:即ntil8月28日 年付优惠:管理费5折+免1.5%跨境支付手续费活动周期:即ntil8月28日 年付优惠:管理费5折+免1.5活动周期:即ntil8月28日 年付优惠:管理费5折+免1.5%跨境支付手续费活动周期:即ntil8月28日 年付优惠:管理费5折+免1.5%跨境支付手续费活动周期:即ntil8月28日 年付优惠:管理费5折+免1.5活动周期:即ntil8月28日 年付优惠:管理费5折+免1.5%跨境支付手续费活动周期:即ntil8月28日 年付优惠:管理费5折+免1.5%跨境支付手续费活动周期:即ntil8月28日 年付优惠:管理费5折+免1.5活动周期:即ntil8月28日 年付优惠:管理费5折+免1.5%跨境支付手续费活动周期:即ntil8月28日 年付优惠:管理费5折+免1.5%跨境支付手续费活动周期:即ntil8月28日 年付优惠:管理费5折+免1.5活动周期:即ntil8月28日 年付优惠:管理费5折+免1.5%跨境支付手续费活动周期:即ntil8月28日 年付优惠:管理费5折+免1.5%跨境支付手续费活动周期:即ntil8月28日 年付优惠:管理费5折+免1.5活动周期:即ntil8月28日 年付优惠:管理费5折+免1.5%跨境支付手续费活动周期:即ntil8月28日 年付优惠:管理费5折+免1.5%跨境支付手续费活动周期:即ntil8月28日 年付优惠:管理费5折+免1.5活动周期:即ntil8月28日 年付优惠:管理费5折+免1.5%跨境支付手续费活动周期:即ntil8月28日 年付优惠:管理费5折+免1.5%跨境支付手续费活动周期:即ntil8月28日 年付优惠:管理费5折+免1.5</p>
|
||||
<p class="text" user-select>{{ info.promotionalactivities }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<img class="bottom-white" src="@/assets/img/publicImage/special-bottom-white.svg" />
|
||||
@@ -216,7 +212,7 @@
|
||||
<!-- 房间类型 -->
|
||||
<div class="type-box" v-if="roomList.length !== 0" ref="roomEle">
|
||||
<div class="item flexacenter" v-for="(item, index) in roomList" :key="index">
|
||||
<div class="media" v-if="item.thumbnail" bindtap="mediaItem" data-current="0" data-index="{{ index }}">
|
||||
<div class="media" v-if="item.thumbnail" @click="cloaseImageShow([...item['videos'], ...item['images']], 0, `media${index}`)">
|
||||
<img class="icon" :src="item.thumbnail" />
|
||||
<img v-if="item.isVideo" class="play" src="@/assets/img/publicImage/video-icon.svg" />
|
||||
</div>
|
||||
@@ -292,18 +288,18 @@
|
||||
</div>
|
||||
|
||||
<!-- 费用说明 -->
|
||||
<div class="details-item cost">
|
||||
<div class="details-item cost" v-if="costList.length > 0">
|
||||
<div class="details-header flexacenter">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/cost-icon.png" />
|
||||
费用说明
|
||||
</div>
|
||||
<div class="cost-box">
|
||||
<div class="item" v-for="(item, index) in costArr" :key="index">
|
||||
<div class="item" v-for="(item, index) in costList" :key="index">
|
||||
<div class="head flexacenter">
|
||||
<img class="icon" :src="'@/assets/img/apartmentDetail/' + item.img" />
|
||||
<img class="icon" :src="require('@/assets/img/apartmentDetail/' + item.img)" />
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<div class="explain">长租房租期统一为 12 个月</div>
|
||||
<div class="explain">{{ item.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -686,6 +682,53 @@ let qrcode = ref(""); // 小程序详情二维码
|
||||
|
||||
let allCarouselsData = ref([]);
|
||||
|
||||
const costArr = [
|
||||
{
|
||||
tab: "lease",
|
||||
name: "租期",
|
||||
img: "tenancy-term-icon.png",
|
||||
},
|
||||
{
|
||||
tab: "payment",
|
||||
name: "付款方式",
|
||||
img: "payment-method-icon.png",
|
||||
},
|
||||
{
|
||||
tab: "water",
|
||||
name: "水电煤网",
|
||||
img: "water-electricity-icon.png",
|
||||
},
|
||||
{
|
||||
tab: "manage",
|
||||
name: "管理费",
|
||||
img: "management-cost-icon.png",
|
||||
},
|
||||
{
|
||||
tab: "tax",
|
||||
name: "印花税",
|
||||
img: "stamp-duty-icon.png",
|
||||
},
|
||||
{
|
||||
tab: "clean",
|
||||
name: "房间清洁",
|
||||
img: "clean-icon.png",
|
||||
},
|
||||
];
|
||||
|
||||
// 公寓设施
|
||||
const facilityKeyName = {
|
||||
public: "公用设施",
|
||||
service: "公寓服务",
|
||||
sport: "运动&娱乐",
|
||||
outdoor: "室外设施",
|
||||
security: "安保设施",
|
||||
room: "房间设施",
|
||||
};
|
||||
|
||||
const facilityArr = ["public", "service", "sport", "outdoor", "security", "room"]; // 公寓设施 顺序
|
||||
|
||||
let costList = ref([]);
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
distanceSchool();
|
||||
@@ -728,6 +771,56 @@ const init = () => {
|
||||
return +item;
|
||||
});
|
||||
|
||||
const facility = data.info.facility;
|
||||
console.log("facility", facility);
|
||||
|
||||
if (facility) {
|
||||
let facilitylist = [];
|
||||
facilityArr.forEach((key) => {
|
||||
const target = facility[key];
|
||||
let label = [];
|
||||
let images = [];
|
||||
if (Array.isArray(target)) {
|
||||
target.forEach((element) => {
|
||||
label.push(element.name);
|
||||
if (element.images.length > 0)
|
||||
images.push({
|
||||
name: element.name,
|
||||
img: element.images,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (label.length > 0) {
|
||||
facilitylist.push({
|
||||
key,
|
||||
name: facilityKeyName[key],
|
||||
label,
|
||||
images,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
console.log("facilitylist", facilitylist);
|
||||
}
|
||||
|
||||
const feedescription = data.info.feedescription;
|
||||
if (feedescription) {
|
||||
let list = [];
|
||||
costArr.forEach((element) => {
|
||||
if (feedescription[element.tab]) {
|
||||
list.push({
|
||||
text: feedescription[element.tab],
|
||||
...element,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
console.log("list", list);
|
||||
|
||||
costList.value = list;
|
||||
}
|
||||
|
||||
info.value = data["info"];
|
||||
attachment.value = data["info"]["attachment"];
|
||||
withsameapartments.value = data["withsameapartments"];
|
||||
@@ -1082,33 +1175,6 @@ const getClass = (index) => {
|
||||
[`item${index}`]: true,
|
||||
};
|
||||
};
|
||||
|
||||
const costArr = [
|
||||
{
|
||||
name: "租期",
|
||||
img: "tenancy-term-icon.png",
|
||||
},
|
||||
{
|
||||
name: "付款方式",
|
||||
img: "payment-method-icon.png",
|
||||
},
|
||||
{
|
||||
name: "水电煤网",
|
||||
img: "water-electricity-icon.png",
|
||||
},
|
||||
{
|
||||
name: "管理费",
|
||||
img: "management-cost-icon.png",
|
||||
},
|
||||
{
|
||||
name: "印花税",
|
||||
img: "stamp-duty-icon.png",
|
||||
},
|
||||
{
|
||||
name: "房间清洁",
|
||||
img: "clean-icon.png",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
Reference in New Issue
Block a user