4.6新样式
This commit is contained in:
DESKTOP-RQ919RC\Pc
6
src/assets/img/publicImage/arrow-return.svg
Normal file
6
src/assets/img/publicImage/arrow-return.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="12px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -716 -1275 )">
|
||||
<path d="M 5.25 10.046875 C 5.38541666666667 10.046875 5.50260416666667 9.99739583333333 5.6015625 9.8984375 L 9.1484375 6.3515625 C 9.24739583333333 6.25260416666667 9.296875 6.13541666666667 9.296875 6 C 9.296875 5.86458333333333 9.24739583333333 5.74739583333333 9.1484375 5.6484375 L 5.6015625 2.1015625 C 5.50260416666667 2.00260416666667 5.38541666666667 1.953125 5.25 1.953125 C 5.11458333333333 1.953125 4.99739583333333 2.00260416666667 4.8984375 2.1015625 L 4.1015625 2.8984375 C 4.00260416666667 2.99739583333333 3.953125 3.11458333333333 3.953125 3.25 C 3.953125 3.38541666666667 4.00260416666667 3.50260416666667 4.1015625 3.6015625 L 6.5 6 L 4.1015625 8.3984375 C 4.00260416666667 8.49739583333333 3.953125 8.61458333333333 3.953125 8.75 C 3.953125 8.88541666666667 4.00260416666667 9.00260416666667 4.1015625 9.1015625 L 4.8984375 9.8984375 C 4.99739583333333 9.99739583333333 5.11458333333333 10.046875 5.25 10.046875 Z M 11.1953125 2.98828125 C 11.7317708333333 3.90755208333333 12 4.91145833333333 12 6 C 12 7.08854166666667 11.7317708333333 8.09244791666666 11.1953125 9.01171875 C 10.6588541666667 9.93098958333333 9.93098958333333 10.6588541666667 9.01171875 11.1953125 C 8.09244791666667 11.7317708333333 7.08854166666667 12 6 12 C 4.91145833333333 12 3.90755208333333 11.7317708333333 2.98828125 11.1953125 C 2.06901041666667 10.6588541666667 1.34114583333333 9.93098958333333 0.8046875 9.01171875 C 0.268229166666667 8.09244791666666 0 7.08854166666667 0 6 C 0 4.91145833333333 0.268229166666667 3.90755208333333 0.8046875 2.98828125 C 1.34114583333333 2.06901041666667 2.06901041666667 1.34114583333333 2.98828125 0.8046875 C 3.90755208333333 0.268229166666666 4.91145833333333 0 6 0 C 7.08854166666667 0 8.09244791666667 0.268229166666666 9.01171875 0.8046875 C 9.93098958333333 1.34114583333333 10.6588541666667 2.06901041666667 11.1953125 2.98828125 Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 716 1275 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
src/assets/img/publicImage/collect-icon.svg
Normal file
6
src/assets/img/publicImage/collect-icon.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="15px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1123 -864 )">
|
||||
<path d="M 11.625 13.1663516068053 L 10.9326923076923 9.18714555765596 L 13.875 6.37996219281663 L 9.81730769230769 5.79395085066163 L 8 2.18336483931947 L 6.18269230769231 5.79395085066163 L 2.125 6.37996219281663 L 5.06730769230769 9.18714555765596 L 4.36538461538461 13.1663516068053 L 8 11.2854442344045 L 11.625 13.1663516068053 Z M 15.4615384615385 5.37807183364839 C 15.8205128205128 5.43478260869565 16 5.57971014492754 16 5.81285444234405 C 16 5.95148078134846 15.9166666666667 6.10270951480781 15.75 6.26654064272212 L 12.2596153846154 9.6124763705104 L 13.0865384615385 14.3383742911153 C 13.0929487179487 14.3824826717076 13.0961538461538 14.4454946439824 13.0961538461538 14.5274102079395 C 13.0961538461538 14.8424700693132 12.9647435897436 15 12.7019230769231 15 C 12.5801282051282 15 12.4519230769231 14.9621928166352 12.3173076923077 14.8865784499055 L 8 12.65595463138 L 3.68269230769231 14.8865784499055 C 3.54166666666667 14.9621928166352 3.41346153846154 15 3.29807692307692 15 C 3.16346153846154 15 3.0625 14.9543163201008 2.99519230769231 14.8629489603025 C 2.92788461538462 14.7715816005041 2.89423076923077 14.6597353497164 2.89423076923077 14.5274102079395 C 2.89423076923077 14.4896030245747 2.90064102564103 14.4265910522999 2.91346153846154 14.3383742911153 L 3.74038461538462 9.6124763705104 L 0.240384615384615 6.26654064272212 C 0.0801282051282051 6.09640831758034 0 5.94517958412098 0 5.81285444234405 C 0 5.57971014492754 0.179487179487179 5.43478260869565 0.538461538461538 5.37807183364839 L 5.36538461538461 4.68809073724008 L 7.52884615384615 0.387523629489602 C 7.65064102564103 0.1291745431632 7.80769230769231 0 8 0 C 8.19230769230769 0 8.34935897435897 0.1291745431632 8.47115384615385 0.387523629489602 L 10.6346153846154 4.68809073724008 L 15.4615384615385 5.37807183364839 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 1123 864 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
src/assets/img/publicImage/collect-pitch-icon.svg
Normal file
6
src/assets/img/publicImage/collect-pitch-icon.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="15px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -715 -864 )">
|
||||
<path d="M 15.4615384615385 5.37807183364839 C 15.8205128205128 5.43478260869565 16 5.57971014492754 16 5.81285444234405 C 16 5.95148078134846 15.9166666666667 6.10270951480781 15.75 6.26654064272212 L 12.2596153846154 9.6124763705104 L 13.0865384615385 14.3383742911153 C 13.0929487179487 14.3824826717076 13.0961538461538 14.4454946439824 13.0961538461538 14.5274102079395 C 13.0961538461538 14.6597353497164 13.0625 14.7715816005041 12.9951923076923 14.8629489603025 C 12.9278846153846 14.9543163201008 12.8301282051282 15 12.7019230769231 15 C 12.5801282051282 15 12.4519230769231 14.9621928166352 12.3173076923077 14.8865784499055 L 8 12.65595463138 L 3.68269230769231 14.8865784499055 C 3.54166666666667 14.9621928166352 3.41346153846154 15 3.29807692307692 15 C 3.16346153846154 15 3.0625 14.9543163201008 2.99519230769231 14.8629489603025 C 2.92788461538462 14.7715816005041 2.89423076923077 14.6597353497164 2.89423076923077 14.5274102079395 C 2.89423076923077 14.4896030245747 2.90064102564103 14.4265910522999 2.91346153846154 14.3383742911153 L 3.74038461538462 9.6124763705104 L 0.240384615384615 6.26654064272212 C 0.0801282051282051 6.09640831758034 0 5.94517958412098 0 5.81285444234405 C 0 5.57971014492754 0.179487179487179 5.43478260869565 0.538461538461538 5.37807183364839 L 5.36538461538461 4.68809073724008 L 7.52884615384615 0.387523629489602 C 7.65064102564103 0.1291745431632 7.80769230769231 0 8 0 C 8.19230769230769 0 8.34935897435897 0.1291745431632 8.47115384615385 0.387523629489602 L 10.6346153846154 4.68809073724008 L 15.4615384615385 5.37807183364839 Z " fill-rule="nonzero" fill="#fddf6d" stroke="none" transform="matrix(1 0 0 1 715 864 )" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
src/assets/img/publicImage/flame-icon.png
Normal file
BIN
src/assets/img/publicImage/flame-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/img/publicImage/gter-select.png
Normal file
BIN
src/assets/img/publicImage/gter-select.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 319 KiB |
BIN
src/assets/img/publicImage/safety-icon.png
Normal file
BIN
src/assets/img/publicImage/safety-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 858 B |
BIN
src/assets/img/publicImage/walk-icon.png
Normal file
BIN
src/assets/img/publicImage/walk-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="dis-f jus-x al-item" style="position: relative; z-index: 333;">
|
||||
<div class="dis-f jus-x al-item" style="position: relative; z-index: 333">
|
||||
<div class="body-maxWidth" :class="{ seachPage: !props.seachPage }">
|
||||
<div class="s-w-100 seach-box-bg">
|
||||
<div class="seach-box">
|
||||
<div class="top-seach dis-f al-item" v-if="props.seachPage">
|
||||
<div style="position: absolute; left: -8px; top: 20px;">
|
||||
<div style="position: absolute; left: -8px; top: 20px">
|
||||
<div class="location-box dis-f jus-x al-item">
|
||||
<img src="../../assets/homeImage/addressImg.png" class="img" alt="" />
|
||||
香港
|
||||
@@ -15,18 +15,17 @@
|
||||
<div class="flexacenter seek-input">
|
||||
<el-popover v-model:visible="historyShow" placement="bottom" :width="560" trigger="click" :show-arrow="false" popper-style="background: transparent;padding:0;box-shadow: none;border: none;transform: translateX(50px);">
|
||||
<template #reference>
|
||||
<el-input class="search-input" v-model="pitchValue['keyword']" placeholder="搜索房源或输入房源ID" @keyup.enter="handleKeyword(pitchValue['keyword'])" style="height: 40px; width: 460px;" maxlength="15"></el-input>
|
||||
<el-input class="search-input" v-model="pitchValue['keyword']" placeholder="搜索房源或输入房源ID" @keyup.enter="handleKeyword(pitchValue['keyword'])" style="height: 40px; width: 460px" maxlength="15"></el-input>
|
||||
</template>
|
||||
<div class="dis-f al-item pos-r">
|
||||
<div class="seach-hiosory-box scrollbar">
|
||||
<div class="seach-history-info">
|
||||
<div v-if="historyArr.length != 0" style="margin-bottom: 30px;">
|
||||
<div v-if="historyArr.length != 0" style="margin-bottom: 30px">
|
||||
<div class="title">历史搜索</div>
|
||||
<div class="info-box">
|
||||
<div :class="flexacenter" v-for="(item, i) in historyArr" :key="i" class="btn flexacenter" @click="handleKeyword(item)">
|
||||
<div class="flexflex">{{ item }}</div>
|
||||
<img class="btn-icon" src="../../assets/homeImage/closeIcon.svg" @click.stop="deleteSeachVal(i)" alt="" />
|
||||
<img />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -46,8 +45,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tool-btn dis-f jus-x al-item add-btn" style="position: relative;">
|
||||
<img style="margin-right: 5px;" src="../../assets/homeImage/addBtn.png" class="img" alt="" />
|
||||
<div class="tool-btn dis-f jus-x al-item add-btn" style="position: relative">
|
||||
<img style="margin-right: 5px" src="../../assets/homeImage/addBtn.png" class="img" alt="" />
|
||||
发布房源
|
||||
<choosing-identity></choosing-identity>
|
||||
</div>
|
||||
@@ -75,7 +74,7 @@
|
||||
<!-- 展示的 展开和隐藏按钮 -->
|
||||
<div class="screen-btn flexcenter" v-if="state == 'pack'" @click="state = 'unfold'">
|
||||
<b>筛选</b>
|
||||
<div class="screen-btn-text" style="margin-left: 0;">：学校附近</div>
|
||||
<div class="screen-btn-text" style="margin-left: 0">：学校附近</div>
|
||||
|
|
||||
<div class="screen-btn-text">品牌</div>
|
||||
|
|
||||
@@ -88,35 +87,105 @@
|
||||
</div>
|
||||
|
||||
<div class="option-area flexflex" :class="{ 'option-area-unfold': state == 'unfold' }">
|
||||
<div class="option-left">
|
||||
<div class="option-item flexflex" style="padding-bottom: 10px;">
|
||||
<div class="option-title">学校附近</div>
|
||||
<div class="option-box flexflex flex1">
|
||||
<div class="item flexcenter" :class="{ pitch: 0 == pitchValue['school'] }" @click="selectOption('nearSchool', 0)">不限</div>
|
||||
<div class="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>
|
||||
<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" v-for="(item, index) in nearSchoolList" :key="index" :class="{ pitch: item['id'] == pitchValue['school'] }" @click="selectOption('nearSchool', item.id)">{{ item["name"] }}</div>
|
||||
</div>
|
||||
<div class="option-item flexflex" style="padding-top: 20px;">
|
||||
<div class="option-title flexacenter">租金</div>
|
||||
<div class="option-box flexacenter flex1 option-input-box">
|
||||
<div class="flex1"><input class="option-input" type="number" v-model="pitchValue['rent_min']" @blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" /><span style="font-size: 18px;">~</span><input class="option-input" type="number" v-model="pitchValue['rent_max']" @blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" />HK$/月</div>
|
||||
|
||||
<div class="eliminate flexcenter" @click="clearingAmount" v-if="pitchValue['rent_min'] || pitchValue['rent_max']">
|
||||
<img class="eliminate-icon" src="@/assets/img/publicImage/round-fork.svg" />
|
||||
清除金额
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="option-item flexflex">
|
||||
<div class="option-title">房型</div>
|
||||
<div class="option-box flexflex flex1">
|
||||
<div class="item flexcenter" :class="{ pitch: 0 == pitchValue['roomtype'] }" @click="selectOption('roomType', 0)">不限</div>
|
||||
<div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['roomtype'] }" v-for="(item, index) in roomTypeList" :key="index" @click="selectOption('roomType', item.id)">{{ item["name"] }}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="option-right">
|
||||
<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" v-for="(item, index) in nearSchoolList" :key="index" :class="{ pitch: item['id'] == pitchValue['school'] }" @click="selectOption('nearSchool', item.id)">{{ item["name"] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option-item flexflex" :class="{ 'show-eliminate': pitchValue['rent_min'] || pitchValue['rent_max'] }" style="padding-bottom: 23px">
|
||||
<div class="option-title flexacenter">租金</div>
|
||||
<div class="option-box flexacenter option-input-box" style="white-space: nowrap">
|
||||
<div class="flex1"><input class="option-input" type="number" v-model="pitchValue['rent_min']" @blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" /><span style="font-size: 18px">~</span><input class="option-input" type="number" v-model="pitchValue['rent_max']" @blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" />HK$/月</div>
|
||||
|
||||
<div class="eliminate flexcenter" @click="clearingAmount" v-if="pitchValue['rent_min'] || pitchValue['rent_max']">
|
||||
<img class="eliminate-icon" src="@/assets/img/publicImage/round-fork.svg" />
|
||||
清除金额
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fill"></div>
|
||||
|
||||
<div class="option-title flexacenter">品牌</div>
|
||||
|
||||
<div class="option-box flexacenter">
|
||||
<el-dropdown trigger="click" popper-class="option-dropdown-box">
|
||||
<div class="option-dropdown flexacenter">
|
||||
<span class="option-dropdown-value ellipsis">{{ brandKey[pitchValue["companyid"]] || "不限" }}</span>
|
||||
<img class="option-dropdown-img" src="@/assets/img/publicImage/arrow-black-down.svg" />
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item :class="{ pitch: 0 == pitchValue['companyid'] }" @click="selectOption('brand', 0)">
|
||||
<div class="dropdown-value">不限</div>
|
||||
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :class="{ pitch: item.id == pitchValue['companyid'] }" v-for="(item, index) in brandList" :key="index" @click="selectOption('brand', item.id)">
|
||||
<div class="dropdown-value">{{ item["name"] }}</div>
|
||||
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
<div class="fill"></div>
|
||||
|
||||
<div class="option-title flexacenter">房型</div>
|
||||
<div class="option-box flexacenter flex1">
|
||||
<el-dropdown trigger="click" popper-class="option-dropdown-box">
|
||||
<div class="option-dropdown flexacenter">
|
||||
<span class="option-dropdown-value ellipsis">{{ roomTypeKey[pitchValue["roomtype"]] || "不限" }}</span>
|
||||
<img class="option-dropdown-img" src="@/assets/img/publicImage/arrow-black-down.svg" />
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item :class="{ pitch: 0 == pitchValue['roomtype'] }" @click="selectOption('roomType', 0)">
|
||||
<div class="dropdown-value">不限</div>
|
||||
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :class="{ pitch: item.id == pitchValue['roomtype'] }" v-for="(item, index) in roomTypeList" :key="index" @click="selectOption('roomType', item.id)">
|
||||
<div class="dropdown-value">{{ item["name"] }}</div>
|
||||
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
<div class="fill"></div>
|
||||
|
||||
<div class="option-title flexacenter">楼型</div>
|
||||
<div class="option-box flexacenter flex1">
|
||||
<el-dropdown trigger="click" popper-class="option-dropdown-box">
|
||||
<div class="option-dropdown flexacenter">
|
||||
<span class="option-dropdown-value ellipsis">{{ roomlistingsKey[pitchValue["roomlistings"]] || "不限" }}</span>
|
||||
<img class="option-dropdown-img" src="@/assets/img/publicImage/arrow-black-down.svg" />
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item :class="{ pitch: 0 == pitchValue['roomlistings'] }" @click="selectOption('roomlistings', 0)">
|
||||
<div class="dropdown-value">不限</div>
|
||||
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :class="{ pitch: item.id == pitchValue['roomlistings'] }" v-for="(item, index) in roomlistingsList" :key="index" @click="selectOption('roomlistings', item.id)">
|
||||
<div class="dropdown-value">{{ item["name"] }}</div>
|
||||
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option-right" v-if="false">
|
||||
<div class="option-item flexflex">
|
||||
<div class="option-title flexacenter">品牌</div>
|
||||
<div class="option-box flexacenter flex1">
|
||||
@@ -127,11 +196,11 @@
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item :class="{ 'pitch': 0 == pitchValue['companyid'] }" @click="selectOption('brand', 0)">
|
||||
<el-dropdown-item :class="{ pitch: 0 == pitchValue['companyid'] }" @click="selectOption('brand', 0)">
|
||||
<div class="dropdown-value">不限</div>
|
||||
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :class="{ 'pitch': item.id == pitchValue['companyid'] }" v-for="(item, index) in brandList" :key="index" @click="selectOption('brand', item.id)">
|
||||
<el-dropdown-item :class="{ pitch: item.id == pitchValue['companyid'] }" v-for="(item, index) in brandList" :key="index" @click="selectOption('brand', item.id)">
|
||||
<div class="dropdown-value">{{ item["name"] }}</div>
|
||||
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
|
||||
</el-dropdown-item>
|
||||
@@ -151,11 +220,11 @@
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item :class="{ 'pitch': 0 == pitchValue['roomtype'] }" @click="selectOption('roomType', 0)">
|
||||
<el-dropdown-item :class="{ pitch: 0 == pitchValue['roomtype'] }" @click="selectOption('roomType', 0)">
|
||||
<div class="dropdown-value">不限</div>
|
||||
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :class="{ 'pitch': item.id == pitchValue['roomtype'] }" v-for="(item, index) in roomTypeList" :key="index" @click="selectOption('roomType', item.id)">
|
||||
<el-dropdown-item :class="{ pitch: item.id == pitchValue['roomtype'] }" v-for="(item, index) in roomTypeList" :key="index" @click="selectOption('roomType', item.id)">
|
||||
<div class="dropdown-value">{{ item["name"] }}</div>
|
||||
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
|
||||
</el-dropdown-item>
|
||||
@@ -175,11 +244,11 @@
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item :class="{ 'pitch': 0 == pitchValue['roomlistings'] }" @click="selectOption('roomlistings', 0)">
|
||||
<el-dropdown-item :class="{ pitch: 0 == pitchValue['roomlistings'] }" @click="selectOption('roomlistings', 0)">
|
||||
<div class="dropdown-value">不限</div>
|
||||
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :class="{ 'pitch': item.id == pitchValue['roomlistings'] }" v-for="(item, index) in roomlistingsList" :key="index" @click="selectOption('roomlistings', item.id)">
|
||||
<el-dropdown-item :class="{ pitch: item.id == pitchValue['roomlistings'] }" v-for="(item, index) in roomlistingsList" :key="index" @click="selectOption('roomlistings', item.id)">
|
||||
<div class="dropdown-value">{{ item["name"] }}</div>
|
||||
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
|
||||
</el-dropdown-item>
|
||||
@@ -225,17 +294,17 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, toRefs, computed, watchEffect, reactive, defineProps, nextTick } from "vue"
|
||||
import { useStore } from "vuex"
|
||||
import store from "../../store/index"
|
||||
import { useRoute, useRouter } from "vue-router"
|
||||
import choosingIdentity from "@/components/edit/choosingIdentity.vue"
|
||||
import { ref, toRefs, computed, watchEffect, reactive, defineProps, nextTick } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
import store from "../../store/index";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import choosingIdentity from "@/components/edit/choosingIdentity.vue";
|
||||
|
||||
const usestore = useStore()
|
||||
const { wechat } = toRefs(usestore.state)
|
||||
const router = useRouter()
|
||||
const usestore = useStore();
|
||||
const { wechat } = toRefs(usestore.state);
|
||||
const router = useRouter();
|
||||
|
||||
const route = useRoute()
|
||||
const route = useRoute();
|
||||
|
||||
const props = defineProps({
|
||||
count: {
|
||||
@@ -249,32 +318,32 @@ const props = defineProps({
|
||||
initPitchValue: {
|
||||
type: Object,
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
const emit = defineEmits(["handleTransfer"])
|
||||
const emit = defineEmits(["handleTransfer"]);
|
||||
|
||||
let state = ref("unfold") // 筛选状态 unfold 展开 pack 收起
|
||||
let state = ref("unfold"); // 筛选状态 unfold 展开 pack 收起
|
||||
|
||||
//搜索框
|
||||
let historyShow = ref(false)
|
||||
let setHistoryShow = () => (historyShow.value = historyShow.value) // 修改历史记录框的显示状态 通过input的 焦点状态判断的
|
||||
let historyShow = ref(false);
|
||||
let setHistoryShow = () => (historyShow.value = historyShow.value); // 修改历史记录框的显示状态 通过input的 焦点状态判断的
|
||||
|
||||
let historyArr = ref([]) //历史查找记录
|
||||
let hotArr = reactive({ data: [] })
|
||||
let historyArr = ref([]); //历史查找记录
|
||||
let hotArr = reactive({ data: [] });
|
||||
|
||||
//获取历史搜索记录
|
||||
historyArr.value = JSON.parse(localStorage.getItem("historyArr")) || []
|
||||
historyArr.value = JSON.parse(localStorage.getItem("historyArr")) || [];
|
||||
|
||||
let nearSchoolList = reactive([{ name: "不限", id: 0 }]) //学校附近
|
||||
let nearSchoolList = reactive([{ name: "不限", id: 0 }]); //学校附近
|
||||
|
||||
let roomTypeList = reactive([]) // 房型
|
||||
let roomTypeKey = reactive([]) // 房型 键值对
|
||||
let roomTypeList = reactive([]); // 房型
|
||||
let roomTypeKey = reactive([]); // 房型 键值对
|
||||
|
||||
let roomlistingsList = reactive([]) // 楼型
|
||||
let roomlistingsKey = reactive([]) // 楼型 键值对
|
||||
let roomlistingsList = reactive([]); // 楼型
|
||||
let roomlistingsKey = reactive([]); // 楼型 键值对
|
||||
|
||||
let brandList = reactive([]) // 品牌数据
|
||||
let brandKey = reactive([]) // 品牌数据 键值对
|
||||
let brandList = reactive([]); // 品牌数据
|
||||
let brandKey = reactive([]); // 品牌数据 键值对
|
||||
|
||||
// 筛选条件
|
||||
let pitchValue = ref({
|
||||
@@ -285,102 +354,102 @@ let pitchValue = ref({
|
||||
school: 0,
|
||||
roomlistings: 0,
|
||||
keyword: "",
|
||||
})
|
||||
});
|
||||
|
||||
watchEffect(() => {
|
||||
// nearSchoolList = store.state.apartment.school || []
|
||||
nearSchoolList = store.state.schoolList || []
|
||||
roomTypeList = store.state.apartment.roomtype || []
|
||||
roomTypeKey = store.state.roomTypeKey || {}
|
||||
roomlistingsList = store.state.apartment.roomlistings || []
|
||||
roomlistingsKey = store.state.roomlistingsKey || {}
|
||||
brandList = store.state.apartment.brand || []
|
||||
brandKey = store.state.brandKey || {}
|
||||
hotArr.data = store.state.indexData.hotSearcheWords
|
||||
pitchValue.value = { ...pitchValue.value, ...props.initPitchValue }
|
||||
})
|
||||
nearSchoolList = store.state.schoolList || [];
|
||||
roomTypeList = store.state.apartment.roomtype || [];
|
||||
roomTypeKey = store.state.roomTypeKey || {};
|
||||
roomlistingsList = store.state.apartment.roomlistings || [];
|
||||
roomlistingsKey = store.state.roomlistingsKey || {};
|
||||
brandList = store.state.apartment.brand || [];
|
||||
brandKey = store.state.brandKey || {};
|
||||
hotArr.data = store.state.indexData.hotSearcheWords;
|
||||
pitchValue.value = { ...pitchValue.value, ...props.initPitchValue };
|
||||
});
|
||||
|
||||
if (route.query["companyid"]) {
|
||||
pitchValue.value["companyid"] = route.query["companyid"]
|
||||
state.value = "unfold"
|
||||
pitchValue.value["companyid"] = route.query["companyid"];
|
||||
state.value = "unfold";
|
||||
}
|
||||
|
||||
// 是否点击里 清除金额按钮 因为输入金额后再点击清除按钮是会先请求有金额的列表
|
||||
let clearingAmountState = false
|
||||
let clearingAmountState = false;
|
||||
// 点击清除金额
|
||||
const clearingAmount = () => {
|
||||
clearingAmountState = true
|
||||
pitchValue.value["rent_min"] = null
|
||||
pitchValue.value["rent_max"] = null
|
||||
emit("handleTransfer", pitchValue)
|
||||
}
|
||||
clearingAmountState = true;
|
||||
pitchValue.value["rent_min"] = null;
|
||||
pitchValue.value["rent_max"] = null;
|
||||
emit("handleTransfer", pitchValue);
|
||||
};
|
||||
|
||||
// 金额的失去焦点事件
|
||||
const rentBlur = () => {
|
||||
setTimeout(() => {
|
||||
if (!clearingAmountState) emit("handleTransfer", pitchValue)
|
||||
}, 300)
|
||||
}
|
||||
if (!clearingAmountState) emit("handleTransfer", pitchValue);
|
||||
}, 300);
|
||||
};
|
||||
|
||||
// 搜索框输入中
|
||||
const rentInput = () => (clearingAmountState = false)
|
||||
const rentInput = () => (clearingAmountState = false);
|
||||
|
||||
// 点击历史搜索和热门推荐
|
||||
const handleKeyword = value => {
|
||||
sessionStorage.setItem("houseingPageType", "")
|
||||
router.push(`/seachPage?keyword=${value}`)
|
||||
const handleKeyword = (value) => {
|
||||
sessionStorage.setItem("houseingPageType", "");
|
||||
router.push(`/seachPage?keyword=${value}`);
|
||||
if (historyArr.value.indexOf(value) == -1 && value) {
|
||||
historyArr.value.unshift(value)
|
||||
storingHistory()
|
||||
historyArr.value.unshift(value);
|
||||
storingHistory();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//搜索数据
|
||||
let seachList = () => {
|
||||
if (historyArr.value.indexOf(pitchValue.value["keyword"] && pitchValue.value["keyword"]) == -1) {
|
||||
historyArr.value.unshift(pitchValue.value["keyword"])
|
||||
storingHistory()
|
||||
historyArr.value.unshift(pitchValue.value["keyword"]);
|
||||
storingHistory();
|
||||
}
|
||||
|
||||
historyShow.value = false
|
||||
historyShow.value = false;
|
||||
|
||||
emit("handleTransfer", pitchValue)
|
||||
}
|
||||
emit("handleTransfer", pitchValue);
|
||||
};
|
||||
|
||||
// 存储历史记录 并判断长度
|
||||
const storingHistory = () => {
|
||||
if (historyArr.value.length > 10) historyArr.value = historyArr.value.slice(0, 10)
|
||||
localStorage.setItem("historyArr", JSON.stringify(historyArr.value))
|
||||
}
|
||||
if (historyArr.value.length > 10) historyArr.value = historyArr.value.slice(0, 10);
|
||||
localStorage.setItem("historyArr", JSON.stringify(historyArr.value));
|
||||
};
|
||||
|
||||
// 选择选项
|
||||
const selectOption = (type, value) => {
|
||||
switch (type) {
|
||||
case "nearSchool":
|
||||
pitchValue.value["school"] = value
|
||||
break
|
||||
pitchValue.value["school"] = value;
|
||||
break;
|
||||
case "roomType":
|
||||
pitchValue.value["roomtype"] = value
|
||||
break
|
||||
pitchValue.value["roomtype"] = value;
|
||||
break;
|
||||
case "brand":
|
||||
pitchValue.value["companyid"] = value
|
||||
break
|
||||
pitchValue.value["companyid"] = value;
|
||||
break;
|
||||
case "roomlistings":
|
||||
pitchValue.value["roomlistings"] = value
|
||||
break
|
||||
pitchValue.value["roomlistings"] = value;
|
||||
break;
|
||||
default:
|
||||
break
|
||||
break;
|
||||
}
|
||||
nextTick(() => {
|
||||
emit("handleTransfer", pitchValue)
|
||||
})
|
||||
}
|
||||
emit("handleTransfer", pitchValue);
|
||||
});
|
||||
};
|
||||
|
||||
//删除历史记录
|
||||
let deleteSeachVal = i => {
|
||||
historyArr.value.splice(i, 1)
|
||||
localStorage.setItem("historyArr", JSON.stringify(historyArr.value))
|
||||
}
|
||||
let deleteSeachVal = (i) => {
|
||||
historyArr.value.splice(i, 1);
|
||||
localStorage.setItem("historyArr", JSON.stringify(historyArr.value));
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
* {
|
||||
@@ -449,9 +518,10 @@ let deleteSeachVal = i => {
|
||||
border-radius: 16px;
|
||||
|
||||
.top-seach {
|
||||
padding: 20px;
|
||||
// padding: 20px;
|
||||
position: relative;
|
||||
justify-content: end;
|
||||
padding: 23px 20px 24px;
|
||||
|
||||
.intermediary-btn {
|
||||
background: rgba(241, 245, 247, 1);
|
||||
@@ -636,7 +706,8 @@ let deleteSeachVal = i => {
|
||||
.quantity {
|
||||
color: #555555;
|
||||
font-size: 15px;
|
||||
height: 72px;
|
||||
// height: 72px;
|
||||
height: 64px;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
|
||||
.b {
|
||||
@@ -652,6 +723,7 @@ let deleteSeachVal = i => {
|
||||
overflow: hidden;
|
||||
// height: 0;
|
||||
transition: height 0.25s linear 0s;
|
||||
padding-top: 22px;
|
||||
|
||||
&.option-area-unfold {
|
||||
// height: 335px;
|
||||
@@ -659,101 +731,149 @@ let deleteSeachVal = i => {
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
}
|
||||
|
||||
.option-left,
|
||||
.option-right {
|
||||
width: 600px;
|
||||
// .option-left,
|
||||
// .option-right {
|
||||
// width: 600px;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-right: 1px #ebebeb dotted;
|
||||
// &:not(:last-of-type) {
|
||||
// border-right: 1px #ebebeb dotted;
|
||||
// }
|
||||
|
||||
.option-item {
|
||||
// width: 540px;
|
||||
// padding-top: 24px;
|
||||
padding-bottom: 20px;
|
||||
margin: 0 0 0 20px;
|
||||
|
||||
// &:not(:last-of-type) {
|
||||
// border-bottom: 1px #ebebeb dotted;
|
||||
// }
|
||||
|
||||
.option-title {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
width: 61px;
|
||||
padding: 0 2px;
|
||||
line-height: 30px;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
margin-right: 20px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.option-item {
|
||||
// width: 540px;
|
||||
padding-top: 24px;
|
||||
padding-bottom: 20px;
|
||||
margin: 0 30px 0 20px;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 1px #ebebeb dotted;
|
||||
}
|
||||
|
||||
.option-title {
|
||||
font-size: 14px;
|
||||
color: #b5b5b5;
|
||||
width: 90px;
|
||||
line-height: 30px;
|
||||
&.show-eliminate {
|
||||
.wid22 {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.option-box {
|
||||
flex-wrap: wrap;
|
||||
.option-dropdown {
|
||||
width: 145x;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 5px 10px;
|
||||
.wid22 {
|
||||
width: 12px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.option-box {
|
||||
flex-wrap: wrap;
|
||||
|
||||
.school-item {
|
||||
padding: 5px 10px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
border-radius: 10px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
background-color: rgba(242, 242, 242, 1);
|
||||
color: #333333;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid rgba(235, 235, 235, 1);
|
||||
}
|
||||
|
||||
&.pitch {
|
||||
background-color: #50e3c2;
|
||||
color: #fff;
|
||||
border: 1px solid #50e3c2;
|
||||
}
|
||||
}
|
||||
|
||||
&.option-input-box {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
line-height: 20px;
|
||||
|
||||
.eliminate {
|
||||
width: 96px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border-radius: 50px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
border-radius: 10px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
color: #7f7f7f;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid rgba(235, 235, 235, 1);
|
||||
}
|
||||
|
||||
&.pitch {
|
||||
color: #50e3c2;
|
||||
border: 1px solid #50e3c2;
|
||||
background: #eefcf9;
|
||||
.eliminate-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&.option-input-box {
|
||||
font-weight: 400;
|
||||
.option-input {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border: 1px solid rgba(179, 179, 179, 1);
|
||||
border-radius: 10px;
|
||||
// outline: none;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
line-height: 20px;
|
||||
margin: 0 10px;
|
||||
padding: 10px;
|
||||
|
||||
.eliminate {
|
||||
width: 96px;
|
||||
height: 30px;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border-radius: 50px;
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
cursor: pointer;
|
||||
|
||||
.eliminate-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
&:first-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.option-input {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border: 1px solid rgba(179, 179, 179, 1);
|
||||
border-radius: 10px;
|
||||
// outline: none;
|
||||
font-size: 14px;
|
||||
margin: 0 10px;
|
||||
padding: 10px;
|
||||
.option-dropdown {
|
||||
width: 150px;
|
||||
height: 40px;
|
||||
transition: all 0.3s;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border-radius: 10px;
|
||||
justify-content: space-between;
|
||||
padding-left: 12px;
|
||||
padding-right: 10px;
|
||||
cursor: pointer;
|
||||
background-color: rgba(246, 246, 246, 0);
|
||||
border: 1px solid rgba(179, 179, 179, 1);
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.option-dropdown-value {
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.option-dropdown-img {
|
||||
width: 12px;
|
||||
height: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// }
|
||||
|
||||
.option-right {
|
||||
padding-top: 18px;
|
||||
@@ -920,7 +1040,8 @@ let deleteSeachVal = i => {
|
||||
border-radius: 65px;
|
||||
overflow: hidden;
|
||||
background-color: #f6f6f6;
|
||||
border: solid 1px var(--el-input-border-color, var(--el-border-color));
|
||||
border: solid 1px rgb(235, 235, 235);
|
||||
height: 40px;
|
||||
|
||||
::v-deep .el-input__wrapper {
|
||||
box-shadow: none;
|
||||
@@ -960,7 +1081,8 @@ let deleteSeachVal = i => {
|
||||
|
||||
<style lang="less">
|
||||
.el-popper.el-dropdown__popper.option-dropdown-box {
|
||||
width: 477px;
|
||||
width: 260px;
|
||||
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 10px;
|
||||
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.188235294117647);
|
||||
|
||||
@@ -1,82 +1,134 @@
|
||||
<template>
|
||||
<div class="item flexflex" @click="goapArtmentDetails">
|
||||
<div class="collect-box flexcenter" @click.stop="handleCollect1(item.uniqid)">
|
||||
<!-- <img v-if="item.iscollect == 0" class="collect-icon" style="width: 30px; height: 30px;" src="@/assets/img/apartmentDetail/collecting-shadows.svg" /> -->
|
||||
<!-- <img v-else class="collect-icon" src="@/assets/img/apartmentDetail/collecting-yellow-shadows.svg" /> -->
|
||||
<img v-if="item.iscollect == 0" class="collect-icon" src="@/assets/img/apartmentDetail/collect.jpg" />
|
||||
<img v-else class="collect-icon" src="@/assets/img/apartmentDetail/collect-star.jpg" />
|
||||
<img class="collect-icon" v-if="item.iscollect == 0" src="@/assets/img/publicImage/collect-icon.svg" />
|
||||
<img class="collect-icon" v-else src="@/assets/img/publicImage/collect-pitch-icon.svg" />
|
||||
<!-- <img v-if="item.iscollect == 0" class="collect-icon" src="@/assets/img/apartmentDetail/collect.jpg" /> -->
|
||||
<!-- <img v-else class="collect-icon" src="@/assets/img/apartmentDetail/collect-star.jpg" /> -->
|
||||
</div>
|
||||
<img class="img" v-lazy="item['image']" @load="loadload" />
|
||||
<div class="title">{{ item["title"] }}</div>
|
||||
<div class="img-box">
|
||||
<img class="gter-select" src="@/assets/img/publicImage/gter-select.png" />
|
||||
<div class="name flexflex">iRent佐敦一期公寓</div>
|
||||
<img class="img" v-lazy="item['image']" @load="loadload" />
|
||||
<div class="apartment-introduce flexacenter">
|
||||
<div class="remark-on flexacenter">
|
||||
<img class="fang-icon" src="https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-d_Zwocn3qqsgFptxhcq_cQnrld6YjDgwVBq_D-81qNDQyOQ~~" />
|
||||
方同学点评
|
||||
</div>
|
||||
<div class="remark-text flex1 ellipsis">交通和生活都非常便利，房间整洁完善交通和生活都非常便利，房间整洁完善交通和生活都非常便利，房间整洁完善</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="label-list flexacenter">
|
||||
<div class="label-item flexacenter blue">
|
||||
<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>
|
||||
<!-- <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> -->
|
||||
<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="type-list" v-if="item['roomlist']">
|
||||
<div class="type-item flexacenter" v-for="(it, index) in item['roomlist']" :key="index">
|
||||
<div class="type-name flex1 ellipsis">{{ it["name"] }}</div>
|
||||
<div class="type-data flexacenter">
|
||||
<div class="unit">HK$</div>
|
||||
<div class="price">{{ it["price"] }}</div>
|
||||
/月
|
||||
<div class="distance flexflex">
|
||||
<div class="figure flexacenter">
|
||||
距离
|
||||
<div class="school">城大</div>
|
||||
<div class="mile">1.3km</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">
|
||||
<img class="vehicle-icon" src="@/assets/img/publicImage/walk-icon.png" />
|
||||
42min
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="type-quantity flexacenter">
|
||||
|
||||
<div class="collect-type flexacenter">
|
||||
<div class="collect flexacenter flex1">
|
||||
<img class="flame-icon" src="@/assets/img/publicImage/flame-icon.png" />
|
||||
近15天36人收藏
|
||||
</div>
|
||||
<div class="house-type flexacenter">
|
||||
共8个房型
|
||||
<img class="icon" src="@/assets/img/publicImage/arrow-return.svg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="type-list" v-if="item['roomlist']">
|
||||
<div class="type-item flexacenter" v-for="(it, index) in item['roomlist']" :key="index">
|
||||
<div class="type-name flex1 ellipsis">{{ it["name"] }}</div>
|
||||
<div class="price flexflex">
|
||||
<div class="type-data flexacenter">
|
||||
<div class="unit">HK$</div>
|
||||
<div class="price">{{ it["price"] }}</div>
|
||||
/月
|
||||
</div>
|
||||
<div class="original-price">HK$8600/月</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="type-quantity flexacenter">
|
||||
共
|
||||
<div class="type-quantity-number">{{ item["roomnum"] }}</div>
|
||||
个房型
|
||||
<img class="black-arrow" src="@/assets/img/publicImage/black-arrow.svg" />
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue"
|
||||
import { useRoute, useRouter } from "vue-router"
|
||||
import { redirectToExternalWebsite } from "@/utils/util.js"
|
||||
const router = useRouter()
|
||||
import { ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { redirectToExternalWebsite } from "@/utils/util.js";
|
||||
const router = useRouter();
|
||||
|
||||
const props = defineProps({
|
||||
item: Object,
|
||||
pitchValue: Object,
|
||||
masonryInstance: Object,
|
||||
})
|
||||
});
|
||||
|
||||
const emit = defineEmits(["handlecollect"])
|
||||
const emit = defineEmits(["handlecollect"]);
|
||||
|
||||
const goapArtmentDetails = () => {
|
||||
let url = `/apartmentDetail?uniqid=${props["item"].uniqid}`
|
||||
if (props?.pitchValue?.school) url += `&school=${props.pitchValue["school"]}`
|
||||
let url = `/apartmentDetail?uniqid=${props["item"].uniqid}`;
|
||||
if (props?.pitchValue?.school) url += `&school=${props.pitchValue["school"]}`;
|
||||
|
||||
redirectToExternalWebsite(url)
|
||||
}
|
||||
redirectToExternalWebsite(url);
|
||||
};
|
||||
|
||||
// 点击收藏后传过父组件
|
||||
const handleCollect1 = uniqid => emit("handlecollect", uniqid)
|
||||
const handleCollect1 = (uniqid) => emit("handlecollect", uniqid);
|
||||
const loadload = () => {
|
||||
props.masonryInstance && props.masonryInstance.reloadItems()
|
||||
props.masonryInstance && props.masonryInstance.layout()
|
||||
}
|
||||
props.masonryInstance && props.masonryInstance.reloadItems();
|
||||
props.masonryInstance && props.masonryInstance.layout();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.item {
|
||||
// width: 386px;
|
||||
width: 288.75px;
|
||||
width: 385px;
|
||||
// width: 288.75px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 20px;
|
||||
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
|
||||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
|
||||
// border-radius: 20px;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
|
||||
flex-direction: column;
|
||||
padding: 10px 10px 0;
|
||||
padding-top: 7px;
|
||||
padding-bottom: 16px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
height: fit-content;
|
||||
@@ -89,29 +141,131 @@ const loadload = () => {
|
||||
}
|
||||
|
||||
.collect-box {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
// background: #447eb3;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
|
||||
.collect-icon {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
|
||||
width: 16px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
// width: 366px;
|
||||
width: 268.75px;
|
||||
// height: 244px;
|
||||
.img-box {
|
||||
position: relative;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 12px;
|
||||
// object-fit: cover;
|
||||
overflow: hidden;
|
||||
margin: 0 7px 16px;
|
||||
|
||||
.gter-select {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 158px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.name {
|
||||
height: 32px;
|
||||
background-color: rgba(255, 255, 255, 0.847058823529412);
|
||||
border: 1px solid rgba(255, 255, 255, 1);
|
||||
border-radius: 16px;
|
||||
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
padding: 0 25px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.img {
|
||||
// width: 366px;
|
||||
// width: 268.75px;
|
||||
width: 371px;
|
||||
// height: 244px;
|
||||
// object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.apartment-introduce {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background-color: rgba(0, 0, 0, 0.63921568627451);
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
padding-left: 6px;
|
||||
padding-right: 17px;
|
||||
|
||||
.remark-on {
|
||||
font-size: 13px;
|
||||
color: #d7d7d7;
|
||||
margin-right: 6px;
|
||||
|
||||
.fang-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.remark-text {
|
||||
width: 247px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label-list {
|
||||
flex-wrap: wrap;
|
||||
margin: 0 12px 7px;
|
||||
.label-item {
|
||||
color: #555555;
|
||||
text-align: center;
|
||||
height: 22px;
|
||||
background-color: rgba(235, 235, 235, 1);
|
||||
border-radius: 8px;
|
||||
padding: 0 8px;
|
||||
font-size: 13px;
|
||||
width: fit-content;
|
||||
margin-bottom: 8px;
|
||||
margin-right: 10px;
|
||||
|
||||
&.blue {
|
||||
color: #ffffff;
|
||||
background-color: rgba(98, 177, 255, 1);
|
||||
}
|
||||
|
||||
&.violet {
|
||||
color: #ffffff;
|
||||
background-color: rgba(128, 128, 255, 1);
|
||||
}
|
||||
|
||||
&.red {
|
||||
color: #ffffff;
|
||||
background-color: rgba(249, 93, 93, 1);
|
||||
}
|
||||
|
||||
.safety-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
@@ -160,8 +314,82 @@ const loadload = () => {
|
||||
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 6px;
|
||||
margin: 0 12px 9px;
|
||||
// margin-bottom: 9px;
|
||||
// padding-left: 6px;
|
||||
}
|
||||
|
||||
.distance {
|
||||
padding: 0 12px 12px 29px;
|
||||
border-bottom: 1px dashed #d7d7d7;
|
||||
.figure {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
text-align: right;
|
||||
line-height: 26px;
|
||||
margin-right: 5px;
|
||||
|
||||
.school {
|
||||
font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.mile {
|
||||
font-size: 14px;
|
||||
color: #50e3c2;
|
||||
}
|
||||
}
|
||||
|
||||
.vehicle-list {
|
||||
flex-wrap: wrap;
|
||||
|
||||
.vehicle-item {
|
||||
height: 22px;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
border: 1px solid rgba(127, 127, 127, 1);
|
||||
border-radius: 30px;
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
padding: 0 8px;
|
||||
margin-right: 6px;
|
||||
|
||||
.vehicle-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.collect-type {
|
||||
margin: 0 12px;
|
||||
height: 52px;
|
||||
.collect {
|
||||
.flame-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
font-size: 13px;
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
.house-type {
|
||||
font-size: 13px;
|
||||
color: #555555;
|
||||
|
||||
.icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.type-list {
|
||||
@@ -170,8 +398,7 @@ const loadload = () => {
|
||||
background: rgba(246, 246, 246, 1);
|
||||
border-radius: 12px;
|
||||
padding: 0 10px;
|
||||
margin: 0 6px;
|
||||
|
||||
margin: 0 12px;
|
||||
.type-item {
|
||||
height: 54px;
|
||||
|
||||
@@ -185,23 +412,45 @@ const loadload = () => {
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.type-data {
|
||||
.unit {
|
||||
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
color: #000000;
|
||||
}
|
||||
.price {
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
.type-data {
|
||||
.unit {
|
||||
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 18px;
|
||||
color: #f95d5d;
|
||||
margin: 0 5px;
|
||||
}
|
||||
.price {
|
||||
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 18px;
|
||||
color: #f95d5d;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
font-size: 13px;
|
||||
color: #555555;
|
||||
font-size: 13px;
|
||||
color: #555555;
|
||||
}
|
||||
.original-price {
|
||||
text-align: right;
|
||||
font-size: 13px;
|
||||
color: #7f7f7f;
|
||||
position: relative;
|
||||
width: max-content;
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -4px;
|
||||
transform: translateY(-50%);
|
||||
content: "";
|
||||
width: calc(100% + 6px);
|
||||
height: 1px;
|
||||
display: block;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<div class="header">
|
||||
<div class="top flexflex">
|
||||
<div class="brand-abstract flexflex">
|
||||
<div class="flexacenter" style="height: min-content;">
|
||||
<div class="flexacenter" style="height: min-content">
|
||||
<a class="item" href="/">港校租房</a>
|
||||
<img class="arrow" alt="箭头" src="@/assets/img/publicImage/yellow-arrow.svg" />
|
||||
<a class="item" href="/apartment">品牌公寓</a>
|
||||
@@ -27,9 +27,7 @@
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<div class="indicate-type flexacenter" v-if="indicateTypeState()">
|
||||
<div class="indicate-item" :class="{ pitch: allCarouselsData[carouselIndex]['type'] == 'lives' }" v-if="info['lives'] && info['lives'].length != 0" @click="slideshowType('lives')">
|
||||
直播
|
||||
</div>
|
||||
<div class="indicate-item" :class="{ pitch: allCarouselsData[carouselIndex]['type'] == 'lives' }" v-if="info['lives'] && info['lives'].length != 0" @click="slideshowType('lives')">直播</div>
|
||||
<div class="indicate-item" :class="{ pitch: allCarouselsData[carouselIndex]['type'] == 'videos' }" v-if="info['videos'] && info['videos'].length != 0" @click="slideshowType('videos')">视频</div>
|
||||
<div class="indicate-item" :class="{ pitch: allCarouselsData[carouselIndex]['type'] == 'attachment' }" v-if="info['attachment'] && info['attachment'].length != 0" @click="slideshowType('attachment')">图片</div>
|
||||
</div>
|
||||
@@ -57,22 +55,48 @@
|
||||
<div class="header-right flex1">
|
||||
<img class="header-bj" alt="头部的地图背景" src="@/assets/img/apartmentDetail/apartmentDetail-header-bj.jpg" />
|
||||
<!-- <img class="header-shade" src="@/assets/img/apartmentDetail/apartmentDetail-header-shade.svg"> -->
|
||||
<div class="tab-box flexflex" v-if="info['tags'] && info['tags'].length != 0">
|
||||
<!-- <div class="tab-box flexflex" v-if="info['tags'] && info['tags'].length != 0">
|
||||
<div class="tab-item wordbreak flexcenter" v-for="(item, index) in info['tags']" :key="index">{{ item }}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="apartment-name wordbreak" v-if="info['title']">{{ info["title"] }}</div>
|
||||
<div class="synopsis wordbreak">{{ info["introduction"] }}</div>
|
||||
<div class="place flexacenter" v-if="info['address']">
|
||||
<div class="left flexacenter">
|
||||
<img class="icon" alt="位置与交通-图标" src="@/assets/img/publicImage/location-icon.png" />
|
||||
<div class="place-text ellipsis">{{ info["address"] }}</div>
|
||||
<div class="label-list flexacenter">
|
||||
<div class="label-item flexacenter blue">
|
||||
<img class="safety-icon" src="@/assets/img/publicImage/safety-icon.png" />
|
||||
实地考察
|
||||
</div>
|
||||
<div class="right flexacenter" @click="handleClickNav('addressEle')">
|
||||
位置与交通
|
||||
<img class="icon" alt="位置与交通-箭头" src="@/assets/img/publicImage/black-arrow.svg" />
|
||||
<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>
|
||||
|
||||
<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="more flexacenter">
|
||||
同品牌
|
||||
<img class="icon" src="@/assets/img/publicImage/black-arrow.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="synopsis wordbreak">{{ info["introduction"] }}</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="synopsis wordbreak">{{ info["introduction"] }}</div> -->
|
||||
<div class="place flexacenter" v-if="info['address']">
|
||||
<div class="place-head flexacenter">
|
||||
<img class="icon" alt="位置与交通-图标" src="@/assets/img/publicImage/location-icon.png" />
|
||||
<div class="text flex1 ellipsis">{{ info["address"] }}</div>
|
||||
<div class="more flexacenter" @click="handleClickNav('addressEle')">
|
||||
位置与交通
|
||||
<img class="icon" alt="位置与交通-箭头" src="@/assets/img/publicImage/black-arrow.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="else flexacenter" v-if="withsameapartments">
|
||||
<!-- <div class="else flexacenter" v-if="withsameapartments">
|
||||
<div class="left flexacenter">
|
||||
<img class="icon" alt="同品牌其他公寓-图标" src="@/assets/img/apartmentDetail/yellow-diamond.png" />
|
||||
同品牌其他公寓
|
||||
@@ -81,7 +105,7 @@
|
||||
<div class="quantity flexcenter" :aria-label="withsameapartments + '个同品牌其他公寓'">{{ withsameapartments }}</div>
|
||||
<img class="icon" alt="同品牌其他公寓-箭头" src="@/assets/img/publicImage/black-arrow.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -223,7 +247,7 @@
|
||||
</div>
|
||||
<div class="distance-info-data dis-f">
|
||||
<div class="distance-info-left">
|
||||
<div class="distance-info-left-item flexcenter" :class="{ 'pitch': index == academyPitchIndex }" v-for="(item, index) in annexSchoolList" :key="index" @click="selectAcademyIndex(index)">{{ item.alias }}</div>
|
||||
<div class="distance-info-left-item flexcenter" :class="{ pitch: index == academyPitchIndex }" v-for="(item, index) in annexSchoolList" :key="index" @click="selectAcademyIndex(index)">{{ item.alias }}</div>
|
||||
</div>
|
||||
<el-scrollbar ref="elscrollbarRef" :style="{ height: 50 * annexSchoolList.length + 'px' }">
|
||||
<div class="distance-info-right flex1">
|
||||
@@ -258,12 +282,12 @@
|
||||
<!-- 地铁 -->
|
||||
<div v-else-if="item.type == 'bus' && item.bustype == '地铁线路'" class="journey-value flex1 subway flexacenter">
|
||||
<div class="subway-name flexcenter">{{ item.name }}</div>
|
||||
<div class="flex1" style="white-space: nowrap;">{{ item.via_num }}站·{{ item.durationText }}</div>
|
||||
<div class="flex1" style="white-space: nowrap">{{ item.via_num }}站·{{ item.durationText }}</div>
|
||||
</div>
|
||||
<!-- 公交 -->
|
||||
<div v-else-if="item.type == 'bus' && item.bustype == '普通公交线路'" class="journey-value flex1 bus flexacenter">
|
||||
<div class="bus-name flexcenter">{{ item.name }}</div>
|
||||
<div class="flex1" style="white-space: nowrap;">{{ item.via_num }}站·{{ item.durationText }}</div>
|
||||
<div class="flex1" style="white-space: nowrap">{{ item.via_num }}站·{{ item.durationText }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -325,7 +349,7 @@
|
||||
<!-- 品牌介绍 -->
|
||||
<div class="details-item company" v-if="company" ref="companyEle">
|
||||
<div class="details-header flexacenter">
|
||||
<img class="icon" style="width: 20px; height: 20px;" src="@/assets/img/apartmentDetail/introduce-icon.png" />
|
||||
<img class="icon" style="width: 20px; height: 20px" src="@/assets/img/apartmentDetail/introduce-icon.png" />
|
||||
品牌介绍
|
||||
</div>
|
||||
<img class="company-img flexflex" v-lazy="company['imageurl']" />
|
||||
@@ -333,9 +357,7 @@
|
||||
</div>
|
||||
|
||||
<div class="details-item hint-box">
|
||||
<div class="hint-item">
|
||||
温馨提示：房源信息均由公寓方/酒店提供并对其真实性、合法性等负责，平台不负责甄别和审核具体内容真实性和有效性等，请务必仔细核实相关信息，谨防上当受骗。
|
||||
</div>
|
||||
<div class="hint-item">温馨提示：房源信息均由公寓方/酒店提供并对其真实性、合法性等负责，平台不负责甄别和审核具体内容真实性和有效性等，请务必仔细核实相关信息，谨防上当受骗。</div>
|
||||
<div class="hint-item"></div>
|
||||
<div class="hint-item flexacenter">公寓/酒店/中介房源推广合作请联系：<a @click="copy('ad@gter.net')">ad@gter.net</a></div>
|
||||
</div>
|
||||
@@ -422,179 +444,179 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, toRefs, watch, getCurrentInstance, nextTick } from "vue"
|
||||
import { ElMessage, valueEquals } from "element-plus"
|
||||
import { useStore } from "vuex"
|
||||
import { ref, onMounted, onUnmounted, toRefs, watch, getCurrentInstance, nextTick } from "vue";
|
||||
import { ElMessage, valueEquals } from "element-plus";
|
||||
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 backToTop from "@/components/public/backToTop.vue"
|
||||
import imageWatch from "@/components/detail/imageWatch.vue"
|
||||
import phoneqrcode from "@/components/public/phoneQRcode.vue"
|
||||
import groupqrcode from "@/components/public/group-QRcode.vue"
|
||||
import api from "@/utils/api"
|
||||
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 backToTop from "@/components/public/backToTop.vue";
|
||||
import imageWatch from "@/components/detail/imageWatch.vue";
|
||||
import phoneqrcode from "@/components/public/phoneQRcode.vue";
|
||||
import groupqrcode from "@/components/public/group-QRcode.vue";
|
||||
import api from "@/utils/api";
|
||||
|
||||
import { useRouter, useRoute } from "vue-router"
|
||||
let router = useRouter()
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
let router = useRouter();
|
||||
|
||||
const route = useRoute()
|
||||
const route = useRoute();
|
||||
|
||||
watch(route, () => {
|
||||
uniqid = router.currentRoute.value.query["uniqid"]
|
||||
pitchSchool = router.currentRoute.value.query["school"] || ""
|
||||
info.value = {}
|
||||
roomList.value = []
|
||||
carouselsconfig.value = { lives: {}, videos: {}, attachment: {} }
|
||||
navList.value = []
|
||||
navTab.value = "roomEle"
|
||||
dualBrandList.value = []
|
||||
contactReservationState.value = false
|
||||
customerservicelist.value = []
|
||||
mediaBtnstate.value = {}
|
||||
uniqid = router.currentRoute.value.query["uniqid"];
|
||||
pitchSchool = router.currentRoute.value.query["school"] || "";
|
||||
info.value = {};
|
||||
roomList.value = [];
|
||||
carouselsconfig.value = { lives: {}, videos: {}, attachment: {} };
|
||||
navList.value = [];
|
||||
navTab.value = "roomEle";
|
||||
dualBrandList.value = [];
|
||||
contactReservationState.value = false;
|
||||
customerservicelist.value = [];
|
||||
mediaBtnstate.value = {};
|
||||
|
||||
slideshowList.value = null
|
||||
detailsLeft.value = null
|
||||
token = ""
|
||||
slideshowList.value = null;
|
||||
detailsLeft.value = null;
|
||||
token = "";
|
||||
|
||||
carouselIndex.value = 0
|
||||
allCarouselsData.value = []
|
||||
carouselIndex.value = 0;
|
||||
allCarouselsData.value = [];
|
||||
// mediaBtnstate.value = {}
|
||||
init()
|
||||
distanceSchool()
|
||||
})
|
||||
init();
|
||||
distanceSchool();
|
||||
});
|
||||
|
||||
let { uniqid } = router.currentRoute.value.query
|
||||
let pitchSchool = route.query.school || 0
|
||||
let { uniqid } = router.currentRoute.value.query;
|
||||
let pitchSchool = route.query.school || 0;
|
||||
|
||||
import { copyToClipboard, metersToKilometers, secondsToHoursMinutes } from "@/utils/util.js"
|
||||
import { copyToClipboard, metersToKilometers, secondsToHoursMinutes } from "@/utils/util.js";
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const store = useStore()
|
||||
const { proxy } = getCurrentInstance();
|
||||
const store = useStore();
|
||||
|
||||
let imageShow = ref(false) // 查看大图弹窗的状态
|
||||
let imageList = ref([]) // 查看大图弹窗的状态
|
||||
let imageIndex = ref(0) // 查看大图弹窗的状态
|
||||
let imageType = "" // 查看大图弹窗的状态
|
||||
let imageShow = ref(false); // 查看大图弹窗的状态
|
||||
let imageList = ref([]); // 查看大图弹窗的状态
|
||||
let imageIndex = ref(0); // 查看大图弹窗的状态
|
||||
let imageType = ""; // 查看大图弹窗的状态
|
||||
const cloaseImageShow = (list, index, type) => {
|
||||
if (list && imageType != type) {
|
||||
imageList.value = list
|
||||
imageIndex.value = index
|
||||
imageType = type
|
||||
imageList.value = list;
|
||||
imageIndex.value = index;
|
||||
imageType = type;
|
||||
}
|
||||
imageShow.value = !imageShow.value
|
||||
}
|
||||
imageShow.value = !imageShow.value;
|
||||
};
|
||||
|
||||
// 房间类型
|
||||
let roomList = ref([])
|
||||
let info = ref({})
|
||||
let roomList = ref([]);
|
||||
let info = ref({});
|
||||
|
||||
let facilitiesKeyValue = {
|
||||
// 设施的键值对
|
||||
public: "公共",
|
||||
kitchen: "餐厨",
|
||||
lavatory: "洗手间",
|
||||
}
|
||||
};
|
||||
|
||||
let withsameapartments = ref(0) // 其他公寓数量
|
||||
let attachment = ref([]) // 轮播图数据
|
||||
let withsameapartments = ref(0); // 其他公寓数量
|
||||
let attachment = ref([]); // 轮播图数据
|
||||
|
||||
let company = {} // 品牌数据
|
||||
let token = ""
|
||||
let qrcode = ref("") // 小程序详情二维码
|
||||
let company = {}; // 品牌数据
|
||||
let token = "";
|
||||
let qrcode = ref(""); // 小程序详情二维码
|
||||
|
||||
let allCarouselsData = ref([])
|
||||
let allCarouselsData = ref([]);
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
distanceSchool()
|
||||
})
|
||||
init();
|
||||
distanceSchool();
|
||||
});
|
||||
|
||||
const init = () => {
|
||||
proxy.$get("/tenement/pc/api/apartment/details", { uniqid }).then(res => {
|
||||
proxy.$get("/tenement/pc/api/apartment/details", { uniqid }).then((res) => {
|
||||
if (res.code != 200) {
|
||||
ElMessage.error(res["message"])
|
||||
return
|
||||
ElMessage.error(res["message"]);
|
||||
return;
|
||||
}
|
||||
let data = res.data
|
||||
let data = res.data;
|
||||
|
||||
data["roomList"].forEach(element => {
|
||||
element["images"].forEach(element => {
|
||||
element["type"] = "attachment"
|
||||
})
|
||||
element["videos"].forEach(element => {
|
||||
element["type"] = "videos"
|
||||
})
|
||||
})
|
||||
data["roomList"].forEach((element) => {
|
||||
element["images"].forEach((element) => {
|
||||
element["type"] = "attachment";
|
||||
});
|
||||
element["videos"].forEach((element) => {
|
||||
element["type"] = "videos";
|
||||
});
|
||||
});
|
||||
|
||||
roomList.value = data["roomList"]
|
||||
data["info"]["coordinate"] = data["info"]["coordinate"].split(",").map(item => {
|
||||
return +item
|
||||
})
|
||||
roomList.value = data["roomList"];
|
||||
data["info"]["coordinate"] = data["info"]["coordinate"].split(",").map((item) => {
|
||||
return +item;
|
||||
});
|
||||
|
||||
info.value = data["info"]
|
||||
attachment.value = data["info"]["attachment"]
|
||||
withsameapartments.value = data["withsameapartments"]
|
||||
company = data["company"]
|
||||
token = data["token"]
|
||||
qrcode.value = data["qrcode"]
|
||||
info.value = data["info"];
|
||||
attachment.value = data["info"]["attachment"];
|
||||
withsameapartments.value = data["withsameapartments"];
|
||||
company = data["company"];
|
||||
token = data["token"];
|
||||
qrcode.value = data["qrcode"];
|
||||
|
||||
handleAllCarouselsData()
|
||||
handleAllCarouselsData();
|
||||
|
||||
document.title = data?.info?.title || "港校租房-品牌公寓详情"
|
||||
document.title = data?.info?.title || "港校租房-品牌公寓详情";
|
||||
|
||||
nextTick(() => handleNavData())
|
||||
nextTick(() => handleNavData());
|
||||
|
||||
if (data.withsameapartments > 0) dualBrandData()
|
||||
})
|
||||
}
|
||||
if (data.withsameapartments > 0) dualBrandData();
|
||||
});
|
||||
};
|
||||
|
||||
let carouselsconfig = ref({ lives: {}, videos: {}, attachment: {} })
|
||||
let carouselsconfig = ref({ lives: {}, videos: {}, attachment: {} });
|
||||
|
||||
// 处理 轮播图大图的索引 tab
|
||||
const handleAllCarouselsData = () => {
|
||||
let targetInfo = { ...info.value }
|
||||
let targetInfo = { ...info.value };
|
||||
|
||||
let accumulativeTotal = 0 // 累计
|
||||
let accumulativeTotal = 0; // 累计
|
||||
for (const key in carouselsconfig.value) {
|
||||
carouselsconfig.value[key] = {
|
||||
amount: targetInfo[key].length,
|
||||
index: accumulativeTotal,
|
||||
}
|
||||
accumulativeTotal += targetInfo[key].length
|
||||
};
|
||||
accumulativeTotal += targetInfo[key].length;
|
||||
}
|
||||
|
||||
targetInfo["lives"].forEach(element => {
|
||||
element["type"] = "lives"
|
||||
allCarouselsData.value.push(element)
|
||||
})
|
||||
targetInfo["lives"].forEach((element) => {
|
||||
element["type"] = "lives";
|
||||
allCarouselsData.value.push(element);
|
||||
});
|
||||
|
||||
targetInfo["videos"].forEach(element => {
|
||||
element["type"] = "videos"
|
||||
allCarouselsData.value.push(element)
|
||||
})
|
||||
targetInfo["videos"].forEach((element) => {
|
||||
element["type"] = "videos";
|
||||
allCarouselsData.value.push(element);
|
||||
});
|
||||
|
||||
let thumbnailList = targetInfo["thumbnailList"]
|
||||
let thumbnailList = targetInfo["thumbnailList"];
|
||||
|
||||
targetInfo["attachment"].forEach((element, index) => {
|
||||
element = {
|
||||
imageurl: element,
|
||||
thumbnail: thumbnailList[index],
|
||||
}
|
||||
element["type"] = "attachment"
|
||||
allCarouselsData.value.push(element)
|
||||
})
|
||||
}
|
||||
};
|
||||
element["type"] = "attachment";
|
||||
allCarouselsData.value.push(element);
|
||||
});
|
||||
};
|
||||
|
||||
const roomEle = ref(null)
|
||||
const specialEle = ref(null)
|
||||
const addressEle = ref(null)
|
||||
const messageEle = ref(null)
|
||||
const facilitiesEle = ref(null)
|
||||
const lifeEle = ref(null)
|
||||
const companyEle = ref(null)
|
||||
const eleseEle = ref(null)
|
||||
const roomEle = ref(null);
|
||||
const specialEle = ref(null);
|
||||
const addressEle = ref(null);
|
||||
const messageEle = ref(null);
|
||||
const facilitiesEle = ref(null);
|
||||
const lifeEle = ref(null);
|
||||
const companyEle = ref(null);
|
||||
const eleseEle = ref(null);
|
||||
|
||||
let navconfig = [
|
||||
{
|
||||
@@ -625,36 +647,36 @@ let navconfig = [
|
||||
name: "品牌介绍",
|
||||
value: "companyEle",
|
||||
},
|
||||
]
|
||||
let navList = ref([])
|
||||
];
|
||||
let navList = ref([]);
|
||||
|
||||
let navTab = ref("roomEle")
|
||||
let navTab = ref("roomEle");
|
||||
|
||||
// 处理 navList 数据
|
||||
const handleNavData = () => {
|
||||
navconfig.forEach(element => {
|
||||
if (eval(element["value"]).value) navList.value.push(element)
|
||||
})
|
||||
}
|
||||
navconfig.forEach((element) => {
|
||||
if (eval(element["value"]).value) navList.value.push(element);
|
||||
});
|
||||
};
|
||||
|
||||
// 处理点击nav 滚动事件
|
||||
const handleClickNav = value => {
|
||||
let scrollTop = eval(value).value.offsetTop + 136
|
||||
window.scrollTo({ top: scrollTop, behavior: "smooth" })
|
||||
}
|
||||
const handleClickNav = (value) => {
|
||||
let scrollTop = eval(value).value.offsetTop + 136;
|
||||
window.scrollTo({ top: scrollTop, behavior: "smooth" });
|
||||
};
|
||||
|
||||
let dualBrandList = ref([]) // 同品牌数据
|
||||
let dualBrandList = ref([]); // 同品牌数据
|
||||
// 同品牌请求数据
|
||||
const dualBrandData = () => {
|
||||
proxy.$get("/tenement/pc/api/apartment", { token }).then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
dualBrandList.value = data.data
|
||||
})
|
||||
}
|
||||
proxy.$get("/tenement/pc/api/apartment", { token }).then((res) => {
|
||||
if (res.code != 200) return;
|
||||
let data = res.data;
|
||||
dualBrandList.value = data.data;
|
||||
});
|
||||
};
|
||||
|
||||
// 点击转发的复制链接按钮
|
||||
const copy = value =>
|
||||
const copy = (value) =>
|
||||
copyToClipboard(value).then(() => {
|
||||
ElMessage({
|
||||
message: "复制成功",
|
||||
@@ -662,17 +684,17 @@ const copy = value =>
|
||||
offset: 320,
|
||||
duration: 1000,
|
||||
customClass: "message-info",
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
let contactReservationState = ref(false) // 联系预订客服的弹窗状态
|
||||
let customerservicelist = ref([]) // 联系预订客服的弹窗状态
|
||||
let contactReservationState = ref(false); // 联系预订客服的弹窗状态
|
||||
let customerservicelist = ref([]); // 联系预订客服的弹窗状态
|
||||
|
||||
// 修改 客服 弹窗状态
|
||||
const modificationContact = () => {
|
||||
if (customerservicelist.value.length == 0) contactReservationService()
|
||||
else contactReservationState.value = !contactReservationState.value
|
||||
}
|
||||
if (customerservicelist.value.length == 0) contactReservationService();
|
||||
else contactReservationState.value = !contactReservationState.value;
|
||||
};
|
||||
|
||||
// 联系预订客服 请求数据
|
||||
const contactReservationService = () => {
|
||||
@@ -681,212 +703,212 @@ const contactReservationService = () => {
|
||||
customerservice: info.value["customerservice"],
|
||||
token,
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
customerservicelist.value = data["customerservicelist"]
|
||||
contactReservationState.value = !contactReservationState.value
|
||||
})
|
||||
}
|
||||
.then((res) => {
|
||||
if (res.code != 200) return;
|
||||
let data = res.data;
|
||||
customerservicelist.value = data["customerservicelist"];
|
||||
contactReservationState.value = !contactReservationState.value;
|
||||
});
|
||||
};
|
||||
|
||||
let mediaBtnstate = ref({}) // 0 左边为不能点击 1 右边不能点击 2 是两个都能点击
|
||||
let mediaBtnstate = ref({}); // 0 左边为不能点击 1 右边不能点击 2 是两个都能点击
|
||||
|
||||
const handleMediaBtn = (type, index) => {
|
||||
const element = document.querySelector(`.element${index}`)
|
||||
const element = document.querySelector(`.element${index}`);
|
||||
if (element) {
|
||||
let left
|
||||
if (type == "left") left = element.scrollLeft - 86
|
||||
else left = element.scrollLeft + 86
|
||||
let left;
|
||||
if (type == "left") left = element.scrollLeft - 86;
|
||||
else left = element.scrollLeft + 86;
|
||||
const scrollOptions = {
|
||||
left,
|
||||
behavior: "smooth",
|
||||
}
|
||||
element.scrollTo(scrollOptions)
|
||||
};
|
||||
element.scrollTo(scrollOptions);
|
||||
|
||||
nextTick(() => {
|
||||
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)
|
||||
})
|
||||
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);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let slideshowList = ref(null) // 轮播图小图的节点
|
||||
let slideshowList = ref(null); // 轮播图小图的节点
|
||||
|
||||
let carouselIndex = ref(0) // 轮播图的索引
|
||||
let carouselIndex = ref(0); // 轮播图的索引
|
||||
|
||||
const remarkCaruselUp = ref(null)
|
||||
const remarkCaruselUp = ref(null);
|
||||
|
||||
const carouselChange = value => {
|
||||
carouselIndex.value = value
|
||||
const element = slideshowList.value
|
||||
const elementchild = element.querySelector(`.item${value}`)
|
||||
const carouselChange = (value) => {
|
||||
carouselIndex.value = value;
|
||||
const element = slideshowList.value;
|
||||
const elementchild = element.querySelector(`.item${value}`);
|
||||
|
||||
let left = elementchild.offsetLeft - element.offsetLeft
|
||||
let left = elementchild.offsetLeft - element.offsetLeft;
|
||||
const scrollOptions = {
|
||||
left,
|
||||
behavior: "smooth",
|
||||
}
|
||||
element.scrollTo(scrollOptions)
|
||||
}
|
||||
};
|
||||
element.scrollTo(scrollOptions);
|
||||
};
|
||||
|
||||
// 顶部轮播图的左右按钮
|
||||
const handleslideshow = type => {
|
||||
if (type == "left" && carouselIndex.value != 0) remarkCaruselUp.value.prev()
|
||||
if (type != "left" && carouselIndex.value != allCarouselsData.value.length - 1) remarkCaruselUp.value.next()
|
||||
}
|
||||
const handleslideshow = (type) => {
|
||||
if (type == "left" && carouselIndex.value != 0) remarkCaruselUp.value.prev();
|
||||
if (type != "left" && carouselIndex.value != allCarouselsData.value.length - 1) remarkCaruselUp.value.next();
|
||||
};
|
||||
|
||||
// 直接点击轮播图的小图就行切换
|
||||
const slideshowItem = index => remarkCaruselUp.value.setActiveItem(index)
|
||||
const slideshowItem = (index) => remarkCaruselUp.value.setActiveItem(index);
|
||||
// 直接点击大图的 类型
|
||||
const slideshowType = type => slideshowItem(carouselsconfig.value[type].index)
|
||||
const slideshowType = (type) => slideshowItem(carouselsconfig.value[type].index);
|
||||
|
||||
let detailsLeft = ref(null)
|
||||
let detailsLeft = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener("scroll", handleScroll)
|
||||
})
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("scroll", handleScroll)
|
||||
})
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
});
|
||||
|
||||
const gobrand = item => router.push(`/apartmentDetail?uniqid=${item.uniqid}`)
|
||||
const gobrand = (item) => router.push(`/apartmentDetail?uniqid=${item.uniqid}`);
|
||||
|
||||
const handleScroll = () => {
|
||||
if (Math.random() > 0.3) return
|
||||
if (Math.random() > 0.3) return;
|
||||
for (let i = 0; i < navList.value.length; i++) {
|
||||
let element = navList.value[i]
|
||||
let element = navList.value[i];
|
||||
|
||||
const rect = eval(element.value).value.getBoundingClientRect()
|
||||
const distanceToTop = rect.top
|
||||
const rect = eval(element.value).value.getBoundingClientRect();
|
||||
const distanceToTop = rect.top;
|
||||
if (distanceToTop >= 0) {
|
||||
navTab.value = element.value
|
||||
break
|
||||
navTab.value = element.value;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const indicateTypeState = () => {
|
||||
let total = 0 // 累计
|
||||
let total = 0; // 累计
|
||||
for (const key in carouselsconfig.value) {
|
||||
if (carouselsconfig.value[key]["amount"] > 0) total++
|
||||
if (carouselsconfig.value[key]["amount"] > 0) total++;
|
||||
}
|
||||
|
||||
return total > 1 ? true : false
|
||||
}
|
||||
return total > 1 ? true : false;
|
||||
};
|
||||
|
||||
// 公共跳转
|
||||
const publicJump = path => router.push(path)
|
||||
const publicJump = (path) => router.push(path);
|
||||
|
||||
// 获取 距离学校距离
|
||||
const distanceSchool = () => {
|
||||
api.detailsDistance({
|
||||
uniqid,
|
||||
istype: 2,
|
||||
}).then(res => {
|
||||
const data = res.data
|
||||
if (res.code != 200) return
|
||||
}).then((res) => {
|
||||
const data = res.data;
|
||||
if (res.code != 200) return;
|
||||
|
||||
let specialSchoolDistanceTarget = null
|
||||
let academyPitchIndexTarget = 0
|
||||
const school = pitchSchool || ""
|
||||
let annexSchoolOmitTarget = []
|
||||
let specialSchoolDistanceTarget = null;
|
||||
let academyPitchIndexTarget = 0;
|
||||
const school = pitchSchool || "";
|
||||
let annexSchoolOmitTarget = [];
|
||||
data.forEach((element, index) => {
|
||||
element["distanceText"] = metersToKilometers(element.distance)
|
||||
element.list.forEach(ele => {
|
||||
ele["durationText"] = secondsToHoursMinutes(ele.duration, "chinese")
|
||||
ele["durationText2"] = secondsToHoursMinutes(ele.duration)
|
||||
ele["distanceText"] = metersToKilometers(ele.distance)
|
||||
element["distanceText"] = metersToKilometers(element.distance);
|
||||
element.list.forEach((ele) => {
|
||||
ele["durationText"] = secondsToHoursMinutes(ele.duration, "chinese");
|
||||
ele["durationText2"] = secondsToHoursMinutes(ele.duration);
|
||||
ele["distanceText"] = metersToKilometers(ele.distance);
|
||||
if (Object.prototype.toString.call(ele.publictransport) === "[object Object]") {
|
||||
ele.publictransport["durationText"] = secondsToHoursMinutes(ele?.publictransport?.duration || 0, "chinese")
|
||||
ele.publictransport["durationText2"] = secondsToHoursMinutes(ele?.publictransport?.duration || 0)
|
||||
const segments = ele.publictransport["segments"]
|
||||
ele.publictransport["durationText"] = secondsToHoursMinutes(ele?.publictransport?.duration || 0, "chinese");
|
||||
ele.publictransport["durationText2"] = secondsToHoursMinutes(ele?.publictransport?.duration || 0);
|
||||
const segments = ele.publictransport["segments"];
|
||||
if (Array.isArray(segments)) {
|
||||
segments.forEach(e => {
|
||||
e["via_num"] = 1 + Math.floor(e.via_num)
|
||||
e["durationText"] = secondsToHoursMinutes(e.duration)
|
||||
e["distanceText"] = metersToKilometers(e.distance, "chinese")
|
||||
})
|
||||
segments.forEach((e) => {
|
||||
e["via_num"] = 1 + Math.floor(e.via_num);
|
||||
e["durationText"] = secondsToHoursMinutes(e.duration);
|
||||
e["distanceText"] = metersToKilometers(e.distance, "chinese");
|
||||
});
|
||||
}
|
||||
} else ele.publictransport = null
|
||||
})
|
||||
} else ele.publictransport = null;
|
||||
});
|
||||
|
||||
if (school == element.id) {
|
||||
academyPitchIndexTarget = index
|
||||
const obj = element.list[0] || {}
|
||||
let toolText = "步行"
|
||||
if (Object.prototype.toString.call(obj.publictransport) === "[object Object]") toolText = "公交地铁"
|
||||
academyPitchIndexTarget = index;
|
||||
const obj = element.list[0] || {};
|
||||
let toolText = "步行";
|
||||
if (Object.prototype.toString.call(obj.publictransport) === "[object Object]") toolText = "公交地铁";
|
||||
specialSchoolDistanceTarget = {
|
||||
alias: element.alias,
|
||||
distanceText: obj["distanceText"],
|
||||
durationText: obj.publictransport?.durationText2 || obj["durationText2"],
|
||||
toolText,
|
||||
}
|
||||
} else annexSchoolOmitTarget.push(element)
|
||||
})
|
||||
};
|
||||
} else annexSchoolOmitTarget.push(element);
|
||||
});
|
||||
|
||||
if (specialSchoolDistanceTarget) annexSchoolOmitTarget = annexSchoolOmitTarget.slice(0, 4)
|
||||
else annexSchoolOmitTarget = annexSchoolOmitTarget.slice(0, 5)
|
||||
if (specialSchoolDistanceTarget) annexSchoolOmitTarget = annexSchoolOmitTarget.slice(0, 4);
|
||||
else annexSchoolOmitTarget = annexSchoolOmitTarget.slice(0, 5);
|
||||
|
||||
annexSchoolOmit.value = annexSchoolOmitTarget
|
||||
annexSchoolList.value = data
|
||||
targetAcademyPitch.value = data[academyPitchIndexTarget]
|
||||
specialSchoolDistance.value = specialSchoolDistanceTarget
|
||||
academyPitchIndex.value = academyPitchIndexTarget
|
||||
})
|
||||
}
|
||||
annexSchoolOmit.value = annexSchoolOmitTarget;
|
||||
annexSchoolList.value = data;
|
||||
targetAcademyPitch.value = data[academyPitchIndexTarget];
|
||||
specialSchoolDistance.value = specialSchoolDistanceTarget;
|
||||
academyPitchIndex.value = academyPitchIndexTarget;
|
||||
});
|
||||
};
|
||||
|
||||
let annexSchoolOmit = ref([]) // 附近院校 前面 7个 或者 6个的
|
||||
let annexSchoolList = ref([]) // 附近院校数据
|
||||
let academyPitchIndex = ref(0) // 附近学校距离选中院校 下标
|
||||
let targetAcademyPitch = ref({}) // 附近学校距离选中院校 数据
|
||||
let specialSchoolDistance = ref(null) // 特殊的 用户带有school参数 则需要特殊显示 学校距离
|
||||
const elscrollbarRef = ref(null) // 滚动条
|
||||
let annexSchoolOmit = ref([]); // 附近院校 前面 7个 或者 6个的
|
||||
let annexSchoolList = ref([]); // 附近院校数据
|
||||
let academyPitchIndex = ref(0); // 附近学校距离选中院校 下标
|
||||
let targetAcademyPitch = ref({}); // 附近学校距离选中院校 数据
|
||||
let specialSchoolDistance = ref(null); // 特殊的 用户带有school参数 则需要特殊显示 学校距离
|
||||
const elscrollbarRef = ref(null); // 滚动条
|
||||
|
||||
// 选择附近学校距离的学校下标
|
||||
const selectAcademyIndex = index => {
|
||||
academyPitchIndex.value = index || 0
|
||||
targetAcademyPitch.value = annexSchoolList.value[academyPitchIndex.value]
|
||||
elscrollbarRef.value.setScrollTop(0)
|
||||
}
|
||||
const selectAcademyIndex = (index) => {
|
||||
academyPitchIndex.value = index || 0;
|
||||
targetAcademyPitch.value = annexSchoolList.value[academyPitchIndex.value];
|
||||
elscrollbarRef.value.setScrollTop(0);
|
||||
};
|
||||
|
||||
// 选择附近学校距离的学校下标
|
||||
const selectIndex = id => {
|
||||
if (!id) id = pitchSchool
|
||||
const data = annexSchoolOmit.value || []
|
||||
const selectIndex = (id) => {
|
||||
if (!id) id = pitchSchool;
|
||||
const data = annexSchoolOmit.value || [];
|
||||
data.forEach((element, index) => {
|
||||
if (element.id == id) {
|
||||
academyPitchIndex.value = index || 0
|
||||
targetAcademyPitch.value = annexSchoolList.value[academyPitchIndex.value]
|
||||
academyPitchIndex.value = index || 0;
|
||||
targetAcademyPitch.value = annexSchoolList.value[academyPitchIndex.value];
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
// showDistance.value = true
|
||||
}
|
||||
};
|
||||
|
||||
//显示详情
|
||||
let showDistance = ref(false)
|
||||
let showDistance = ref(false);
|
||||
|
||||
// 点击收藏
|
||||
const handleCollect = () => {
|
||||
api.apartmentCollection({ token }).then(res => {
|
||||
if (res.code != 200) return
|
||||
const data = res.data
|
||||
info.value.iscollect = data.status || 0
|
||||
ElMessage.success(res.message)
|
||||
})
|
||||
}
|
||||
api.apartmentCollection({ token }).then((res) => {
|
||||
if (res.code != 200) return;
|
||||
const data = res.data;
|
||||
info.value.iscollect = data.status || 0;
|
||||
ElMessage.success(res.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 设置媒体列表的类名
|
||||
const getClass = index => {
|
||||
const getClass = (index) => {
|
||||
return {
|
||||
pitch: index === carouselIndex.value,
|
||||
[`item${index}`]: true,
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -999,7 +1021,7 @@ const getClass = index => {
|
||||
height: 340px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
border-radius: 8px;
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
@@ -1167,18 +1189,106 @@ const getClass = index => {
|
||||
}
|
||||
|
||||
.apartment-name {
|
||||
font-size: 28px;
|
||||
color: #000000;
|
||||
line-height: 46px;
|
||||
// font-size: 28px;
|
||||
// color: #000000;
|
||||
// line-height: 46px;
|
||||
margin-bottom: 20px;
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 32px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.synopsis {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
line-height: 24px;
|
||||
margin-bottom: 20px;
|
||||
white-space: pre-wrap;
|
||||
.label-list {
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: 14px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
|
||||
.label-item {
|
||||
.safety-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
color: #555555;
|
||||
text-align: center;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
background-color: rgba(235, 235, 235, 1);
|
||||
border-radius: 8px;
|
||||
color: #555555;
|
||||
line-height: 26px;
|
||||
padding: 0 8px;
|
||||
font-size: 13px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&.blue {
|
||||
color: #ffffff;
|
||||
background-color: rgba(98, 177, 255, 1);
|
||||
}
|
||||
|
||||
&.violet {
|
||||
color: #ffffff;
|
||||
background-color: rgba(128, 128, 255, 1);
|
||||
}
|
||||
|
||||
&.red {
|
||||
color: #ffffff;
|
||||
background-color: rgba(249, 93, 93, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.introduce {
|
||||
padding-top: 20px;
|
||||
.introduce-head {
|
||||
margin-bottom: 12px;
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
margin-left: 12px;
|
||||
margin-right: 11px;
|
||||
}
|
||||
|
||||
.full-name {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.more {
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
.icon {
|
||||
width: 6px;
|
||||
height: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.synopsis {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
line-height: 24px;
|
||||
margin-bottom: 20px;
|
||||
white-space: pre-wrap;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
padding-left: 29px;
|
||||
}
|
||||
}
|
||||
|
||||
.place-text {
|
||||
|
||||
@@ -72,7 +72,7 @@ onMounted(() => {
|
||||
// 初始化瀑布流
|
||||
masonryInstance = new Masonry(gridContainer.value, {
|
||||
itemSelector: ".item",
|
||||
gutter: 15,
|
||||
gutter: 22,
|
||||
})
|
||||
|
||||
// masonryInstanceMore = new Masonry(moreShowList.value, {
|
||||
@@ -240,7 +240,7 @@ const handlecollect = uniqid => {
|
||||
}
|
||||
|
||||
.list {
|
||||
margin: 32px auto 0;
|
||||
margin: 20px auto 0;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user