4.6接接口

src/components/apartment/seachModule.vue

@@ -97,8 +97,8 @@
                         <div class="option-item flexflex" style="padding-bottom: 15px">
                             <div class="option-title">标签筛选</div>
                             <div class="option-box flexflex flex1">
-                                <div class="school-item flexcenter" :class="{ pitch: 0 == pitchValue['school'] }" @click="selectOption('nearSchool', 0)">不限</div>
+                                <div class="school-item flexcenter" :class="{ pitch: tag == '' }" @click="selectOption('nearSchool', 0)">不限</div>
-                                <div class="school-item flexcenter" v-for="(item, index) in nearSchoolList" :key="index" :class="{ pitch: item['id'] == pitchValue['school'] }" @click="selectOption('nearSchool', item.id)">{{ item["name"] }}</div>
+                                <div class="school-item flexcenter" v-for="(item, index) in tagList" :key="index" :class="{ pitch: item == pitchValue['tag'] }" @click="selectOption('tag', item)">{{ item }}</div>
                             </div>
                         </div>
                         <div class="option-item flexflex" :class="{ 'show-eliminate': pitchValue['rent_min'] || pitchValue['rent_max'] }" style="padding-bottom: 23px">
@@ -437,6 +437,9 @@ const selectOption = (type, value) => {
         case "roomlistings":
             pitchValue.value["roomlistings"] = value;
             break;
+        case "tag":
+            pitchValue.value["tag"] = value;
+            break;
         default:
             break;
     }
@@ -450,6 +453,10 @@ let deleteSeachVal = (i) => {
     historyArr.value.splice(i, 1);
     localStorage.setItem("historyArr", JSON.stringify(historyArr.value));
 };
+
+const tagList = ["单人间", "大床房", "独立卫浴", "两房整租", "电梯"];
+let tag = ref(""); //  标签筛选选择
+
 </script>
 <style scoped lang="less">
 * {

src/components/public/apartment-item.vue

@@ -7,8 +7,8 @@
             <!-- <img v-else class="collect-icon" src="@/assets/img/apartmentDetail/collect-star.jpg" /> -->
         </div>
         <div class="img-box">
-            <img class="gter-select" src="@/assets/img/publicImage/gter-select.png" />
+            <img v-if="item.selection" class="gter-select" src="@/assets/img/publicImage/gter-select.png" />
-            <div class="name flexflex">iRent佐敦一期公寓</div>
+            <div class="name flexflex">{{ item.title }}</div>
             <img class="img" v-lazy="item['image']" @load="loadload" />
             <div class="apartment-introduce flexacenter">
                 <div class="remark-on flexacenter">
@@ -23,35 +23,41 @@
                 <img class="safety-icon" src="@/assets/img/publicImage/safety-icon.png" />
                 实地考察
             </div>
-            <div class="label-item flexacenter violet">费用全包</div>
+            <div class="label-item flexacenter violet">0服务费</div>
-            <div class="label-item flexacenter red">费用全包</div>
+            <div class="label-item flexacenter red" v-for="(item, index) in item.hottags" :key="index">{{ item }}</div>
-            <div class="label-item flexacenter">费用全包</div>
+            <template v-if="item.tags">
-            <div class="label-item flexacenter">费用全包</div>
+                <div class="label-item flexacenter" v-for="(item, index) in item.tags.split(',')" :key="index">{{ item }}</div>
-            <div class="label-item flexacenter">费用全包</div>
+            </template>
-            <div class="label-item flexacenter">费用全包</div>
         </div>
         <!-- <div class="title">{{ item["title"] }}</div>
         <div class="hint">{{ item["propaganda"] }}</div>
         <div class="tab-box flexflex" v-if="item['tags']">
             <div class="tab-item flexcenter" v-for="(it, index) in item['tags'].split(',')" :key="index">{{ it }}</div>
         </div> -->
+
         <div class="location flexacenter" v-if="item['address']">
             <img class="location-icon" src="@/assets/img/publicImage/location-icon.png" />
             <div class="ellipsis">{{ item["address"] }}</div>
-            <span class="area-distance" v-if="pitchValue?.school && item['distance']">{{ Math.round(item["distance"] * 10) / 10 }}km</span>
         </div>
 
         <div class="distance flexflex">
-            <div class="figure flexacenter">
+            <div class="figure flexacenter" v-if="item.distance?.distance">
                 距离
-                <div class="school">城大</div>
+                <div class="school">{{ item.distance.alias }}</div>
-                <div class="mile">1.3km</div>
+                <div class="mile">{{ item.distance.distance }}km</div>
             </div>
-            <!-- <span class="area-distance">1.36km</span> -->
             <div class="vehicle-list flex1 flexflex">
-                <div class="vehicle-item flexacenter" v-for="item in 3" :key="index">
+                <div class="vehicle-item flexacenter" v-if="item.distance?.walking_duration">
                     <img class="vehicle-icon" src="@/assets/img/publicImage/walk-icon.png" />
-                    42min
+                    {{ item.distance.walking_duration }}
+                </div>
+                <div class="vehicle-item flexacenter" v-if="item.distance?.transit_duration">
+                    <img class="vehicle-icon" src="@/assets/img/publicImage/walk-icon.png" />
+                    {{ item.distance.transit_duration }}
+                </div>
+                <div class="vehicle-item flexacenter" v-if="item.distance?.driving_duration">
+                    <img class="vehicle-icon" src="@/assets/img/publicImage/walk-icon.png" />
+                    {{ item.distance.driving_duration }}
                 </div>
             </div>
         </div>
@@ -59,10 +65,10 @@
         <div class="collect-type flexacenter">
             <div class="collect flexacenter flex1">
                 <img class="flame-icon" src="@/assets/img/publicImage/flame-icon.png" />
-                近15天36人收藏
+                近15天{{ item.collectnum }}人收藏
             </div>
             <div class="house-type flexacenter">
-                共8个房型
+                共{{ item.roomnum || 0 }}个房型
                 <img class="icon" src="@/assets/img/publicImage/arrow-return.svg" />
             </div>
         </div>
@@ -73,10 +79,10 @@
                 <div class="price flexflex">
                     <div class="type-data flexacenter">
                         <div class="unit">HK$</div>
-                        <div class="price">{{ it["price"] }}</div>
+                        <div class="price">{{ it.discountprice || it["price"] }}</div>
                         /月
                     </div>
-                    <div class="original-price">HK$8600/月</div>
+                    <div class="original-price" v-if="it.discountprice">HK${{ it.discountprice }}/月</div>
                 </div>
             </div>
         </div>

src/utils/axios.js

@@ -19,8 +19,7 @@ axios.interceptors.request.use(
 
         if (config.url != "/tenement/pc/api/user/operation" && !noMask) showFullScreenLoading()
         // 开发时登录用的，可以直接替换小程序的 authorization
-        // if (process.env.NODE_ENV == "development") config['headers']['authorization'] = "x2mmnl9grt51bpplj2k6ioiuummzhnw3"
+        if (process.env.NODE_ENV == "development") config["headers"]["authorization"] = "3b68118f285ff5e63842efc74b2f2b28"
-        if (process.env.NODE_ENV == "development") config["headers"]["authorization"] = "63ffbd4e4790accd31a0dafd21cd5f12"
 
         // 当 noMask == true 和 confing.method == 'get' 时,删除 config.params['noMask']
         if (noMask && config.method == "get") delete config.params["noMask"]

src/views/apartmentDetail.vue

@@ -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 violet">0服务费</div>
-                        <div class="label-item flexacenter red">费用全包</div>
+                        <div class="label-item red" v-for="(item, index) in info.hottags" :key="index">{{ item }}</div>
-                        <div class="label-item flexacenter">费用全包</div>
+                        <div class="label-item" v-for="(item, index) in info.tags" :key="index">{{ item }}</div>
-                        <div class="label-item flexacenter">费用全包</div>
-                        <div class="label-item flexacenter">费用全包</div>
-                        <div class="label-item flexacenter">费用全包</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="name">{{ company.title }}</div>
-                            <div class="full-name flex1">油尖旺中心地带的品质公寓</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>