XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

4.6新样式

Browse Source
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-05-09 18:27:24 +08:00
parent 1ea3894be8
commit 3e4daeb420
11 changed files with 1062 additions and 563 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/img/publicImage/arrow-return.svg Normal file
View 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
View 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
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/assets/img/publicImage/gter-select.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 319 KiB

BIN
src/assets/img/publicImage/safety-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 858 B

BIN
src/assets/img/publicImage/walk-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

510
src/components/apartment/seachModule.vue
View File

@@ -1,10 +1,10 @@
<template> <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="body-maxWidth" :class="{ seachPage: !props.seachPage }">
<div class="s-w-100 seach-box-bg"> <div class="s-w-100 seach-box-bg">
<div class="seach-box"> <div class="seach-box">
<div class="top-seach dis-f al-item" v-if="props.seachPage"> <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"> <div class="location-box dis-f jus-x al-item">
<img src="../../assets/homeImage/addressImg.png" class="img" alt="" /> <img src="../../assets/homeImage/addressImg.png" class="img" alt="" />
香港 香港
@@ -15,18 +15,17 @@
<div class="flexacenter seek-input"> <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);"> <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> <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> </template>
<div class="dis-f al-item pos-r"> <div class="dis-f al-item pos-r">
<div class="seach-hiosory-box scrollbar"> <div class="seach-hiosory-box scrollbar">
<div class="seach-history-info"> <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="title">历史搜索</div>
<div class="info-box"> <div class="info-box">
<div :class="flexacenter" v-for="(item, i) in historyArr" :key="i" class="btn flexacenter" @click="handleKeyword(item)"> <div :class="flexacenter" v-for="(item, i) in historyArr" :key="i" class="btn flexacenter" @click="handleKeyword(item)">
<div class="flexflex">{{ item }}</div> <div class="flexflex">{{ item }}</div>
<img class="btn-icon" src="../../assets/homeImage/closeIcon.svg" @click.stop="deleteSeachVal(i)" alt="" /> <img class="btn-icon" src="../../assets/homeImage/closeIcon.svg" @click.stop="deleteSeachVal(i)" alt="" />
<img />
</div> </div>
</div> </div>
</div> </div>
@@ -46,8 +45,8 @@
</div> </div>
</div> </div>
<div class="tool-btn dis-f jus-x al-item add-btn" style="position: relative;"> <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="" /> <img style="margin-right: 5px" src="../../assets/homeImage/addBtn.png" class="img" alt="" />
发布房源 发布房源
<choosing-identity></choosing-identity> <choosing-identity></choosing-identity>
</div> </div>
@@ -75,7 +74,7 @@
<!-- 展示的 展开和隐藏按钮 --> <!-- 展示的 展开和隐藏按钮 -->
<div class="screen-btn flexcenter" v-if="state == 'pack'" @click="state = 'unfold'"> <div class="screen-btn flexcenter" v-if="state == 'pack'" @click="state = 'unfold'">
<b>筛选</b> <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> <div class="screen-btn-text">品牌</div>
| |
@@ -88,35 +87,105 @@
</div> </div>
<div class="option-area flexflex" :class="{ 'option-area-unfold': state == 'unfold' }"> <div class="option-area flexflex" :class="{ 'option-area-unfold': state == 'unfold' }">
<div class="option-left"> <div class="option-item flexflex" style="padding-bottom: 15px">
<div class="option-item flexflex" style="padding-bottom: 10px;"> <div class="option-title">学校附近</div>
<div class="option-title">学校附近</div> <div class="option-box flexflex flex1">
<div class="option-box flexflex flex1"> <div class="school-item flexcenter" :class="{ pitch: 0 == pitchValue['school'] }" @click="selectOption('nearSchool', 0)">不限</div>
<div class="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 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> </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>
<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-item flexflex">
<div class="option-title flexacenter">品牌</div> <div class="option-title flexacenter">品牌</div>
<div class="option-box flexacenter flex1"> <div class="option-box flexacenter flex1">
@@ -127,11 +196,11 @@
</div> </div>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <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> <div class="dropdown-value">不限</div>
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" /> <img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
</el-dropdown-item> </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> <div class="dropdown-value">{{ item["name"] }}</div>
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" /> <img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
</el-dropdown-item> </el-dropdown-item>
@@ -151,11 +220,11 @@
</div> </div>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <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> <div class="dropdown-value">不限</div>
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" /> <img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
</el-dropdown-item> </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> <div class="dropdown-value">{{ item["name"] }}</div>
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" /> <img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
</el-dropdown-item> </el-dropdown-item>
@@ -175,11 +244,11 @@
</div> </div>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <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> <div class="dropdown-value">不限</div>
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" /> <img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
</el-dropdown-item> </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> <div class="dropdown-value">{{ item["name"] }}</div>
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" /> <img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
</el-dropdown-item> </el-dropdown-item>
@@ -225,17 +294,17 @@
</template> </template>
<script setup> <script setup>
import { ref, toRefs, computed, watchEffect, reactive, defineProps, nextTick } from "vue" import { ref, toRefs, computed, watchEffect, reactive, defineProps, nextTick } from "vue";
import { useStore } from "vuex" import { useStore } from "vuex";
import store from "../../store/index" import store from "../../store/index";
import { useRoute, useRouter } from "vue-router" import { useRoute, useRouter } from "vue-router";
import choosingIdentity from "@/components/edit/choosingIdentity.vue" import choosingIdentity from "@/components/edit/choosingIdentity.vue";
const usestore = useStore() const usestore = useStore();
const { wechat } = toRefs(usestore.state) const { wechat } = toRefs(usestore.state);
const router = useRouter() const router = useRouter();
const route = useRoute() const route = useRoute();
const props = defineProps({ const props = defineProps({
count: { count: {
@@ -249,32 +318,32 @@ const props = defineProps({
initPitchValue: { initPitchValue: {
type: Object, 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 historyShow = ref(false);
let setHistoryShow = () => (historyShow.value = historyShow.value) // 修改历史记录框的显示状态 通过input的 焦点状态判断的 let setHistoryShow = () => (historyShow.value = historyShow.value); // 修改历史记录框的显示状态 通过input的 焦点状态判断的
let historyArr = ref([]) //历史查找记录 let historyArr = ref([]); //历史查找记录
let hotArr = reactive({ data: [] }) 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 roomTypeList = reactive([]); // 房型
let roomTypeKey = reactive([]) // 房型 键值对 let roomTypeKey = reactive([]); // 房型 键值对
let roomlistingsList = reactive([]) // 楼型 let roomlistingsList = reactive([]); // 楼型
let roomlistingsKey = reactive([]) // 楼型 键值对 let roomlistingsKey = reactive([]); // 楼型 键值对
let brandList = reactive([]) // 品牌数据 let brandList = reactive([]); // 品牌数据
let brandKey = reactive([]) // 品牌数据 键值对 let brandKey = reactive([]); // 品牌数据 键值对
// 筛选条件 // 筛选条件
let pitchValue = ref({ let pitchValue = ref({
@@ -285,102 +354,102 @@ let pitchValue = ref({
school: 0, school: 0,
roomlistings: 0, roomlistings: 0,
keyword: "", keyword: "",
}) });
watchEffect(() => { watchEffect(() => {
// nearSchoolList = store.state.apartment.school || [] // nearSchoolList = store.state.apartment.school || []
nearSchoolList = store.state.schoolList || [] nearSchoolList = store.state.schoolList || [];
roomTypeList = store.state.apartment.roomtype || [] roomTypeList = store.state.apartment.roomtype || [];
roomTypeKey = store.state.roomTypeKey || {} roomTypeKey = store.state.roomTypeKey || {};
roomlistingsList = store.state.apartment.roomlistings || [] roomlistingsList = store.state.apartment.roomlistings || [];
roomlistingsKey = store.state.roomlistingsKey || {} roomlistingsKey = store.state.roomlistingsKey || {};
brandList = store.state.apartment.brand || [] brandList = store.state.apartment.brand || [];
brandKey = store.state.brandKey || {} brandKey = store.state.brandKey || {};
hotArr.data = store.state.indexData.hotSearcheWords hotArr.data = store.state.indexData.hotSearcheWords;
pitchValue.value = { ...pitchValue.value, ...props.initPitchValue } pitchValue.value = { ...pitchValue.value, ...props.initPitchValue };
}) });
if (route.query["companyid"]) { if (route.query["companyid"]) {
pitchValue.value["companyid"] = route.query["companyid"] pitchValue.value["companyid"] = route.query["companyid"];
state.value = "unfold" state.value = "unfold";
} }
// 是否点击里 清除金额按钮 因为输入金额后再点击清除按钮是会先请求有金额的列表 // 是否点击里 清除金额按钮 因为输入金额后再点击清除按钮是会先请求有金额的列表
let clearingAmountState = false let clearingAmountState = false;
// 点击清除金额 // 点击清除金额
const clearingAmount = () => { const clearingAmount = () => {
clearingAmountState = true clearingAmountState = true;
pitchValue.value["rent_min"] = null pitchValue.value["rent_min"] = null;
pitchValue.value["rent_max"] = null pitchValue.value["rent_max"] = null;
emit("handleTransfer", pitchValue) emit("handleTransfer", pitchValue);
} };
// 金额的失去焦点事件 // 金额的失去焦点事件
const rentBlur = () => { const rentBlur = () => {
setTimeout(() => { setTimeout(() => {
if (!clearingAmountState) emit("handleTransfer", pitchValue) if (!clearingAmountState) emit("handleTransfer", pitchValue);
}, 300) }, 300);
} };
// 搜索框输入中 // 搜索框输入中
const rentInput = () => (clearingAmountState = false) const rentInput = () => (clearingAmountState = false);
// 点击历史搜索和热门推荐 // 点击历史搜索和热门推荐
const handleKeyword = value => { const handleKeyword = (value) => {
sessionStorage.setItem("houseingPageType", "") sessionStorage.setItem("houseingPageType", "");
router.push(`/seachPage?keyword=${value}`) router.push(`/seachPage?keyword=${value}`);
if (historyArr.value.indexOf(value) == -1 && value) { if (historyArr.value.indexOf(value) == -1 && value) {
historyArr.value.unshift(value) historyArr.value.unshift(value);
storingHistory() storingHistory();
} }
} };
//搜索数据 //搜索数据
let seachList = () => { let seachList = () => {
if (historyArr.value.indexOf(pitchValue.value["keyword"] && pitchValue.value["keyword"]) == -1) { if (historyArr.value.indexOf(pitchValue.value["keyword"] && pitchValue.value["keyword"]) == -1) {
historyArr.value.unshift(pitchValue.value["keyword"]) historyArr.value.unshift(pitchValue.value["keyword"]);
storingHistory() storingHistory();
} }
historyShow.value = false historyShow.value = false;
emit("handleTransfer", pitchValue) emit("handleTransfer", pitchValue);
} };
// 存储历史记录 并判断长度 // 存储历史记录 并判断长度
const storingHistory = () => { const storingHistory = () => {
if (historyArr.value.length > 10) historyArr.value = historyArr.value.slice(0, 10) if (historyArr.value.length > 10) historyArr.value = historyArr.value.slice(0, 10);
localStorage.setItem("historyArr", JSON.stringify(historyArr.value)) localStorage.setItem("historyArr", JSON.stringify(historyArr.value));
} };
// 选择选项 // 选择选项
const selectOption = (type, value) => { const selectOption = (type, value) => {
switch (type) { switch (type) {
case "nearSchool": case "nearSchool":
pitchValue.value["school"] = value pitchValue.value["school"] = value;
break break;
case "roomType": case "roomType":
pitchValue.value["roomtype"] = value pitchValue.value["roomtype"] = value;
break break;
case "brand": case "brand":
pitchValue.value["companyid"] = value pitchValue.value["companyid"] = value;
break break;
case "roomlistings": case "roomlistings":
pitchValue.value["roomlistings"] = value pitchValue.value["roomlistings"] = value;
break break;
default: default:
break break;
} }
nextTick(() => { nextTick(() => {
emit("handleTransfer", pitchValue) emit("handleTransfer", pitchValue);
}) });
} };
//删除历史记录 //删除历史记录
let deleteSeachVal = i => { let deleteSeachVal = (i) => {
historyArr.value.splice(i, 1) historyArr.value.splice(i, 1);
localStorage.setItem("historyArr", JSON.stringify(historyArr.value)) localStorage.setItem("historyArr", JSON.stringify(historyArr.value));
} };
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
* { * {
@@ -449,9 +518,10 @@ let deleteSeachVal = i => {
border-radius: 16px; border-radius: 16px;
.top-seach { .top-seach {
padding: 20px; // padding: 20px;
position: relative; position: relative;
justify-content: end; justify-content: end;
padding: 23px 20px 24px;
.intermediary-btn { .intermediary-btn {
background: rgba(241, 245, 247, 1); background: rgba(241, 245, 247, 1);
@@ -636,7 +706,8 @@ let deleteSeachVal = i => {
.quantity { .quantity {
color: #555555; color: #555555;
font-size: 15px; font-size: 15px;
height: 72px; // height: 72px;
height: 64px;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
.b { .b {
@@ -652,6 +723,7 @@ let deleteSeachVal = i => {
overflow: hidden; overflow: hidden;
// height: 0; // height: 0;
transition: height 0.25s linear 0s; transition: height 0.25s linear 0s;
padding-top: 22px;
&.option-area-unfold { &.option-area-unfold {
// height: 335px; // height: 335px;
@@ -659,101 +731,149 @@ let deleteSeachVal = i => {
border-bottom: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb;
} }
.option-left, // .option-left,
.option-right { // .option-right {
width: 600px; // width: 600px;
&:not(:last-of-type) { // &:not(:last-of-type) {
border-right: 1px #ebebeb dotted; // 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 { &.show-eliminate {
// width: 540px; .wid22 {
padding-top: 24px; width: 0;
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;
} }
.option-box { .option-box {
flex-wrap: wrap; .option-dropdown {
width: 145x;
}
}
}
.item { .wid22 {
padding: 5px 10px; 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; height: 30px;
display: flex; background-color: rgba(246, 246, 246, 1);
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; border-radius: 50px;
font-weight: 400;
font-size: 14px; font-size: 14px;
text-align: center;
line-height: 30px;
border-radius: 10px;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
color: #7f7f7f; color: #7f7f7f;
border: 1px solid transparent; cursor: pointer;
margin-left: 10px;
&:hover { .eliminate-icon {
border: 1px solid rgba(235, 235, 235, 1); width: 14px;
} height: 14px;
margin-right: 3px;
&.pitch {
color: #50e3c2;
border: 1px solid #50e3c2;
background: #eefcf9;
} }
} }
&.option-input-box { .option-input {
font-weight: 400; width: 100px;
height: 40px;
border: 1px solid rgba(179, 179, 179, 1);
border-radius: 10px;
// outline: none;
font-size: 14px; font-size: 14px;
color: #555555; margin: 0 10px;
line-height: 20px; padding: 10px;
.eliminate { &:first-of-type {
width: 96px; margin-left: 0;
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;
}
} }
}
}
.option-input { .option-dropdown {
width: 100px; width: 150px;
height: 40px; height: 40px;
border: 1px solid rgba(179, 179, 179, 1); transition: all 0.3s;
border-radius: 10px; background-color: rgba(246, 246, 246, 1);
// outline: none; border-radius: 10px;
font-size: 14px; justify-content: space-between;
margin: 0 10px; padding-left: 12px;
padding: 10px; padding-right: 10px;
cursor: pointer;
background-color: rgba(246, 246, 246, 0);
border: 1px solid rgba(179, 179, 179, 1);
&:first-of-type { .option-dropdown-value {
margin-left: 0; font-size: 14px;
} color: #000000;
} line-height: 24px;
}
.option-dropdown-img {
width: 12px;
height: 7px;
} }
} }
} }
} }
// }
.option-right { .option-right {
padding-top: 18px; padding-top: 18px;
@@ -920,7 +1040,8 @@ let deleteSeachVal = i => {
border-radius: 65px; border-radius: 65px;
overflow: hidden; overflow: hidden;
background-color: #f6f6f6; 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 { ::v-deep .el-input__wrapper {
box-shadow: none; box-shadow: none;
@@ -960,7 +1081,8 @@ let deleteSeachVal = i => {
<style lang="less"> <style lang="less">
.el-popper.el-dropdown__popper.option-dropdown-box { .el-popper.el-dropdown__popper.option-dropdown-box {
width: 477px; width: 260px;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
border-radius: 10px; border-radius: 10px;
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.188235294117647); -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.188235294117647);

391
src/components/public/apartment-item.vue
View File

@@ -1,82 +1,134 @@
<template> <template>
<div class="item flexflex" @click="goapArtmentDetails"> <div class="item flexflex" @click="goapArtmentDetails">
<div class="collect-box flexcenter" @click.stop="handleCollect1(item.uniqid)"> <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 class="collect-icon" v-if="item.iscollect == 0" src="@/assets/img/publicImage/collect-icon.svg" />
<!-- <img v-else class="collect-icon" src="@/assets/img/apartmentDetail/collecting-yellow-shadows.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-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 v-else class="collect-icon" src="@/assets/img/apartmentDetail/collect-star.jpg" /> -->
</div> </div>
<img class="img" v-lazy="item['image']" @load="loadload" /> <div class="img-box">
<div class="title">{{ item["title"] }}</div> <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="hint">{{ item["propaganda"] }}</div>
<div class="tab-box flexflex" v-if="item['tags']"> <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 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']"> <div class="location flexacenter" v-if="item['address']">
<img class="location-icon" src="@/assets/img/publicImage/location-icon.png" /> <img class="location-icon" src="@/assets/img/publicImage/location-icon.png" />
<div class="ellipsis">{{ item["address"] }}</div> <div class="ellipsis">{{ item["address"] }}</div>
<span class="area-distance" v-if="pitchValue?.school && item['distance']">{{ Math.round(item["distance"] * 10) / 10 }}km</span> <span class="area-distance" v-if="pitchValue?.school && item['distance']">{{ Math.round(item["distance"] * 10) / 10 }}km</span>
</div> </div>
<div class="type-list" v-if="item['roomlist']"> <div class="distance flexflex">
<div class="type-item flexacenter" v-for="(it, index) in item['roomlist']" :key="index"> <div class="figure flexacenter">
<div class="type-name flex1 ellipsis">{{ it["name"] }}</div> 距离
<div class="type-data flexacenter"> <div class="school">城大</div>
<div class="unit">HK$</div> <div class="mile">1.3km</div>
<div class="price">{{ it["price"] }}</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>
</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> <div class="type-quantity-number">{{ item["roomnum"] }}</div>
个房型 个房型
<img class="black-arrow" src="@/assets/img/publicImage/black-arrow.svg" /> <img class="black-arrow" src="@/assets/img/publicImage/black-arrow.svg" />
</div> </div> -->
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from "vue" import { ref } from "vue";
import { useRoute, useRouter } from "vue-router" import { useRoute, useRouter } from "vue-router";
import { redirectToExternalWebsite } from "@/utils/util.js" import { redirectToExternalWebsite } from "@/utils/util.js";
const router = useRouter() const router = useRouter();
const props = defineProps({ const props = defineProps({
item: Object, item: Object,
pitchValue: Object, pitchValue: Object,
masonryInstance: Object, masonryInstance: Object,
}) });
const emit = defineEmits(["handlecollect"]) const emit = defineEmits(["handlecollect"]);
const goapArtmentDetails = () => { const goapArtmentDetails = () => {
let url = `/apartmentDetail?uniqid=${props["item"].uniqid}` let url = `/apartmentDetail?uniqid=${props["item"].uniqid}`;
if (props?.pitchValue?.school) url += `&school=${props.pitchValue["school"]}` 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 = () => { const loadload = () => {
props.masonryInstance && props.masonryInstance.reloadItems() props.masonryInstance && props.masonryInstance.reloadItems();
props.masonryInstance && props.masonryInstance.layout() props.masonryInstance && props.masonryInstance.layout();
} };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.item { .item {
// width: 386px; width: 385px;
width: 288.75px; // width: 288.75px;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
border-radius: 20px; // border-radius: 20px;
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039); border-radius: 24px;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
flex-direction: column; flex-direction: column;
padding: 10px 10px 0; padding-top: 7px;
padding-bottom: 16px;
margin-bottom: 20px; margin-bottom: 20px;
position: relative; position: relative;
height: fit-content; height: fit-content;
@@ -89,29 +141,131 @@ const loadload = () => {
} }
.collect-box { .collect-box {
width: 50px; width: 24px;
height: 50px; height: 24px;
border-radius: 50%;
position: absolute; position: absolute;
top: 10px;
top: 5px; right: 10px;
right: 5px; z-index: 1;
// background: #447eb3;
cursor: pointer; cursor: pointer;
background-color: rgba(0, 0, 0, 0.4);
.collect-icon { .collect-icon {
width: 25px; width: 16px;
height: 25px; height: 15px;
border-radius: 50%;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
} }
} }
.img { .img-box {
// width: 366px; position: relative;
width: 268.75px;
// height: 244px;
border-radius: 16px; border-radius: 16px;
margin-bottom: 12px; overflow: hidden;
// object-fit: cover; 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 { .title {
@@ -160,8 +314,82 @@ const loadload = () => {
font-size: 14px; font-size: 14px;
color: #555555; color: #555555;
margin-bottom: 10px; margin: 0 12px 9px;
padding-left: 6px; // 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 { .type-list {
@@ -170,8 +398,7 @@ const loadload = () => {
background: rgba(246, 246, 246, 1); background: rgba(246, 246, 246, 1);
border-radius: 12px; border-radius: 12px;
padding: 0 10px; padding: 0 10px;
margin: 0 6px; margin: 0 12px;
.type-item { .type-item {
height: 54px; height: 54px;
@@ -185,23 +412,45 @@ const loadload = () => {
padding-right: 15px; padding-right: 15px;
} }
.type-data { .price {
.unit { flex-direction: column;
font-family: "Arial-Black", "Arial Black", sans-serif; align-items: flex-end;
font-weight: 900; .type-data {
color: #000000; .unit {
} font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900;
color: #000000;
}
.price { .price {
font-family: "Arial-Black", "Arial Black", sans-serif; font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900; font-weight: 900;
font-size: 18px; font-size: 18px;
color: #f95d5d; color: #f95d5d;
margin: 0 5px; margin: 0 5px;
} }
font-size: 13px; font-size: 13px;
color: #555555; 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;
}
}
} }
} }
} }

702
src/views/apartmentDetail.vue
View File

@@ -5,7 +5,7 @@
<div class="header"> <div class="header">
<div class="top flexflex"> <div class="top flexflex">
<div class="brand-abstract 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> <a class="item" href="/">港校租房</a>
<img class="arrow" alt="箭头" src="@/assets/img/publicImage/yellow-arrow.svg" /> <img class="arrow" alt="箭头" src="@/assets/img/publicImage/yellow-arrow.svg" />
<a class="item" href="/apartment">品牌公寓</a> <a class="item" href="/apartment">品牌公寓</a>
@@ -27,9 +27,7 @@
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
<div class="indicate-type flexacenter" v-if="indicateTypeState()"> <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 class="indicate-item" :class="{ pitch: allCarouselsData[carouselIndex]['type'] == 'lives' }" v-if="info['lives'] && info['lives'].length != 0" @click="slideshowType('lives')">直播</div>
直播
</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'] == '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 class="indicate-item" :class="{ pitch: allCarouselsData[carouselIndex]['type'] == 'attachment' }" v-if="info['attachment'] && info['attachment'].length != 0" @click="slideshowType('attachment')">图片</div>
</div> </div>
@@ -57,22 +55,48 @@
<div class="header-right flex1"> <div class="header-right flex1">
<img class="header-bj" alt="头部的地图背景" src="@/assets/img/apartmentDetail/apartmentDetail-header-bj.jpg" /> <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"> --> <!-- <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 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="apartment-name wordbreak" v-if="info['title']">{{ info["title"] }}</div>
<div class="synopsis wordbreak">{{ info["introduction"] }}</div> <div class="label-list flexacenter">
<div class="place flexacenter" v-if="info['address']"> <div class="label-item flexacenter blue">
<div class="left flexacenter"> <img class="safety-icon" src="@/assets/img/publicImage/safety-icon.png" />
<img class="icon" alt="位置与交通-图标" src="@/assets/img/publicImage/location-icon.png" /> 实地考察
<div class="place-text ellipsis">{{ info["address"] }}</div>
</div> </div>
<div class="right flexacenter" @click="handleClickNav('addressEle')"> <div class="label-item flexacenter violet">费用全包</div>
位置与交通 <div class="label-item flexacenter red">费用全包</div>
<img class="icon" alt="位置与交通-箭头" src="@/assets/img/publicImage/black-arrow.svg" /> <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> </div>
<div class="else flexacenter" v-if="withsameapartments"> <!-- <div class="else flexacenter" v-if="withsameapartments">
<div class="left flexacenter"> <div class="left flexacenter">
<img class="icon" alt="同品牌其他公寓-图标" src="@/assets/img/apartmentDetail/yellow-diamond.png" /> <img class="icon" alt="同品牌其他公寓-图标" src="@/assets/img/apartmentDetail/yellow-diamond.png" />
同品牌其他公寓 同品牌其他公寓
@@ -81,7 +105,7 @@
<div class="quantity flexcenter" :aria-label="withsameapartments + '个同品牌其他公寓'">{{ withsameapartments }}</div> <div class="quantity flexcenter" :aria-label="withsameapartments + '个同品牌其他公寓'">{{ withsameapartments }}</div>
<img class="icon" alt="同品牌其他公寓-箭头" src="@/assets/img/publicImage/black-arrow.svg" /> <img class="icon" alt="同品牌其他公寓-箭头" src="@/assets/img/publicImage/black-arrow.svg" />
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
</div> </div>
@@ -223,7 +247,7 @@
</div> </div>
<div class="distance-info-data dis-f"> <div class="distance-info-data dis-f">
<div class="distance-info-left"> <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> </div>
<el-scrollbar ref="elscrollbarRef" :style="{ height: 50 * annexSchoolList.length + 'px' }"> <el-scrollbar ref="elscrollbarRef" :style="{ height: 50 * annexSchoolList.length + 'px' }">
<div class="distance-info-right flex1"> <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 v-else-if="item.type == 'bus' && item.bustype == '地铁线路'" class="journey-value flex1 subway flexacenter">
<div class="subway-name flexcenter">{{ item.name }}</div> <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>
<!-- 公交 --> <!-- 公交 -->
<div v-else-if="item.type == 'bus' && item.bustype == '普通公交线路'" class="journey-value flex1 bus flexacenter"> <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="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> </div>
</div> </div>
@@ -325,7 +349,7 @@
<!-- 品牌介绍 --> <!-- 品牌介绍 -->
<div class="details-item company" v-if="company" ref="companyEle"> <div class="details-item company" v-if="company" ref="companyEle">
<div class="details-header flexacenter"> <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> </div>
<img class="company-img flexflex" v-lazy="company['imageurl']" /> <img class="company-img flexflex" v-lazy="company['imageurl']" />
@@ -333,9 +357,7 @@
</div> </div>
<div class="details-item hint-box"> <div class="details-item hint-box">
<div class="hint-item"> <div class="hint-item">温馨提示：房源信息均由公寓方/酒店提供并对其真实性、合法性等负责，平台不负责甄别和审核具体内容真实性和有效性等，请务必仔细核实相关信息，谨防上当受骗。</div>
温馨提示：房源信息均由公寓方/酒店提供并对其真实性、合法性等负责，平台不负责甄别和审核具体内容真实性和有效性等，请务必仔细核实相关信息，谨防上当受骗。
</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 class="hint-item flexacenter">公寓/酒店/中介房源推广合作请联系：<a @click="copy('ad@gter.net')">ad@gter.net</a></div>
</div> </div>
@@ -422,179 +444,179 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted, onUnmounted, toRefs, watch, getCurrentInstance, nextTick } from "vue" import { ref, onMounted, onUnmounted, toRefs, watch, getCurrentInstance, nextTick } from "vue";
import { ElMessage, valueEquals } from "element-plus" import { ElMessage, valueEquals } from "element-plus";
import { useStore } from "vuex" import { useStore } from "vuex";
import pageTopBar from "../components/pageTopBar/pageTopBar.vue" import pageTopBar from "../components/pageTopBar/pageTopBar.vue";
import footerpage from "@/components/footer/footer.vue" import footerpage from "@/components/footer/footer.vue";
import viewMap from "@/components/public/viewMap.vue" import viewMap from "@/components/public/viewMap.vue";
import transmitBtn from "@/components/public/transmitBtn.vue" import transmitBtn from "@/components/public/transmitBtn.vue";
import backToTop from "@/components/public/backToTop.vue" import backToTop from "@/components/public/backToTop.vue";
import imageWatch from "@/components/detail/imageWatch.vue" import imageWatch from "@/components/detail/imageWatch.vue";
import phoneqrcode from "@/components/public/phoneQRcode.vue" import phoneqrcode from "@/components/public/phoneQRcode.vue";
import groupqrcode from "@/components/public/group-QRcode.vue" import groupqrcode from "@/components/public/group-QRcode.vue";
import api from "@/utils/api" import api from "@/utils/api";
import { useRouter, useRoute } from "vue-router" import { useRouter, useRoute } from "vue-router";
let router = useRouter() let router = useRouter();
const route = useRoute() const route = useRoute();
watch(route, () => { watch(route, () => {
uniqid = router.currentRoute.value.query["uniqid"] uniqid = router.currentRoute.value.query["uniqid"];
pitchSchool = router.currentRoute.value.query["school"] || "" pitchSchool = router.currentRoute.value.query["school"] || "";
info.value = {} info.value = {};
roomList.value = [] roomList.value = [];
carouselsconfig.value = { lives: {}, videos: {}, attachment: {} } carouselsconfig.value = { lives: {}, videos: {}, attachment: {} };
navList.value = [] navList.value = [];
navTab.value = "roomEle" navTab.value = "roomEle";
dualBrandList.value = [] dualBrandList.value = [];
contactReservationState.value = false contactReservationState.value = false;
customerservicelist.value = [] customerservicelist.value = [];
mediaBtnstate.value = {} mediaBtnstate.value = {};
slideshowList.value = null slideshowList.value = null;
detailsLeft.value = null detailsLeft.value = null;
token = "" token = "";
carouselIndex.value = 0 carouselIndex.value = 0;
allCarouselsData.value = [] allCarouselsData.value = [];
// mediaBtnstate.value = {} // mediaBtnstate.value = {}
init() init();
distanceSchool() distanceSchool();
}) });
let { uniqid } = router.currentRoute.value.query let { uniqid } = router.currentRoute.value.query;
let pitchSchool = route.query.school || 0 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 { proxy } = getCurrentInstance();
const store = useStore() const store = useStore();
let imageShow = ref(false) // 查看大图弹窗的状态 let imageShow = ref(false); // 查看大图弹窗的状态
let imageList = ref([]) // 查看大图弹窗的状态 let imageList = ref([]); // 查看大图弹窗的状态
let imageIndex = ref(0) // 查看大图弹窗的状态 let imageIndex = ref(0); // 查看大图弹窗的状态
let imageType = "" // 查看大图弹窗的状态 let imageType = ""; // 查看大图弹窗的状态
const cloaseImageShow = (list, index, type) => { const cloaseImageShow = (list, index, type) => {
if (list && imageType != type) { if (list && imageType != type) {
imageList.value = list imageList.value = list;
imageIndex.value = index imageIndex.value = index;
imageType = type imageType = type;
} }
imageShow.value = !imageShow.value imageShow.value = !imageShow.value;
} };
// 房间类型 // 房间类型
let roomList = ref([]) let roomList = ref([]);
let info = ref({}) let info = ref({});
let facilitiesKeyValue = { let facilitiesKeyValue = {
// 设施的键值对 // 设施的键值对
public: "公共", public: "公共",
kitchen: "餐厨", kitchen: "餐厨",
lavatory: "洗手间", lavatory: "洗手间",
} };
let withsameapartments = ref(0) // 其他公寓数量 let withsameapartments = ref(0); // 其他公寓数量
let attachment = ref([]) // 轮播图数据 let attachment = ref([]); // 轮播图数据
let company = {} // 品牌数据 let company = {}; // 品牌数据
let token = "" let token = "";
let qrcode = ref("") // 小程序详情二维码 let qrcode = ref(""); // 小程序详情二维码
let allCarouselsData = ref([]) let allCarouselsData = ref([]);
onMounted(() => { onMounted(() => {
init() init();
distanceSchool() distanceSchool();
}) });
const init = () => { 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) { if (res.code != 200) {
ElMessage.error(res["message"]) ElMessage.error(res["message"]);
return return;
} }
let data = res.data let data = res.data;
data["roomList"].forEach(element => { data["roomList"].forEach((element) => {
element["images"].forEach(element => { element["images"].forEach((element) => {
element["type"] = "attachment" element["type"] = "attachment";
}) });
element["videos"].forEach(element => { element["videos"].forEach((element) => {
element["type"] = "videos" element["type"] = "videos";
}) });
}) });
roomList.value = data["roomList"] roomList.value = data["roomList"];
data["info"]["coordinate"] = data["info"]["coordinate"].split(",").map(item => { data["info"]["coordinate"] = data["info"]["coordinate"].split(",").map((item) => {
return +item return +item;
}) });
info.value = data["info"] info.value = data["info"];
attachment.value = data["info"]["attachment"] attachment.value = data["info"]["attachment"];
withsameapartments.value = data["withsameapartments"] withsameapartments.value = data["withsameapartments"];
company = data["company"] company = data["company"];
token = data["token"] token = data["token"];
qrcode.value = data["qrcode"] 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 // 处理 轮播图大图的索引 tab
const handleAllCarouselsData = () => { const handleAllCarouselsData = () => {
let targetInfo = { ...info.value } let targetInfo = { ...info.value };
let accumulativeTotal = 0 // 累计 let accumulativeTotal = 0; // 累计
for (const key in carouselsconfig.value) { for (const key in carouselsconfig.value) {
carouselsconfig.value[key] = { carouselsconfig.value[key] = {
amount: targetInfo[key].length, amount: targetInfo[key].length,
index: accumulativeTotal, index: accumulativeTotal,
} };
accumulativeTotal += targetInfo[key].length accumulativeTotal += targetInfo[key].length;
} }
targetInfo["lives"].forEach(element => { targetInfo["lives"].forEach((element) => {
element["type"] = "lives" element["type"] = "lives";
allCarouselsData.value.push(element) allCarouselsData.value.push(element);
}) });
targetInfo["videos"].forEach(element => { targetInfo["videos"].forEach((element) => {
element["type"] = "videos" element["type"] = "videos";
allCarouselsData.value.push(element) allCarouselsData.value.push(element);
}) });
let thumbnailList = targetInfo["thumbnailList"] let thumbnailList = targetInfo["thumbnailList"];
targetInfo["attachment"].forEach((element, index) => { targetInfo["attachment"].forEach((element, index) => {
element = { element = {
imageurl: element, imageurl: element,
thumbnail: thumbnailList[index], thumbnail: thumbnailList[index],
} };
element["type"] = "attachment" element["type"] = "attachment";
allCarouselsData.value.push(element) allCarouselsData.value.push(element);
}) });
} };
const roomEle = ref(null) const roomEle = ref(null);
const specialEle = ref(null) const specialEle = ref(null);
const addressEle = ref(null) const addressEle = ref(null);
const messageEle = ref(null) const messageEle = ref(null);
const facilitiesEle = ref(null) const facilitiesEle = ref(null);
const lifeEle = ref(null) const lifeEle = ref(null);
const companyEle = ref(null) const companyEle = ref(null);
const eleseEle = ref(null) const eleseEle = ref(null);
let navconfig = [ let navconfig = [
{ {
@@ -625,36 +647,36 @@ let navconfig = [
name: "品牌介绍", name: "品牌介绍",
value: "companyEle", value: "companyEle",
}, },
] ];
let navList = ref([]) let navList = ref([]);
let navTab = ref("roomEle") let navTab = ref("roomEle");
// 处理 navList 数据 // 处理 navList 数据
const handleNavData = () => { const handleNavData = () => {
navconfig.forEach(element => { navconfig.forEach((element) => {
if (eval(element["value"]).value) navList.value.push(element) if (eval(element["value"]).value) navList.value.push(element);
}) });
} };
// 处理点击nav 滚动事件 // 处理点击nav 滚动事件
const handleClickNav = value => { const handleClickNav = (value) => {
let scrollTop = eval(value).value.offsetTop + 136 let scrollTop = eval(value).value.offsetTop + 136;
window.scrollTo({ top: scrollTop, behavior: "smooth" }) window.scrollTo({ top: scrollTop, behavior: "smooth" });
} };
let dualBrandList = ref([]) // 同品牌数据 let dualBrandList = ref([]); // 同品牌数据
// 同品牌请求数据 // 同品牌请求数据
const dualBrandData = () => { const dualBrandData = () => {
proxy.$get("/tenement/pc/api/apartment", { token }).then(res => { proxy.$get("/tenement/pc/api/apartment", { token }).then((res) => {
if (res.code != 200) return if (res.code != 200) return;
let data = res.data let data = res.data;
dualBrandList.value = data.data dualBrandList.value = data.data;
}) });
} };
// 点击转发的复制链接按钮 // 点击转发的复制链接按钮
const copy = value => const copy = (value) =>
copyToClipboard(value).then(() => { copyToClipboard(value).then(() => {
ElMessage({ ElMessage({
message: "复制成功", message: "复制成功",
@@ -662,17 +684,17 @@ const copy = value =>
offset: 320, offset: 320,
duration: 1000, duration: 1000,
customClass: "message-info", customClass: "message-info",
}) });
}) });
let contactReservationState = ref(false) // 联系预订客服的弹窗状态 let contactReservationState = ref(false); // 联系预订客服的弹窗状态
let customerservicelist = ref([]) // 联系预订客服的弹窗状态 let customerservicelist = ref([]); // 联系预订客服的弹窗状态
// 修改 客服 弹窗状态 // 修改 客服 弹窗状态
const modificationContact = () => { const modificationContact = () => {
if (customerservicelist.value.length == 0) contactReservationService() if (customerservicelist.value.length == 0) contactReservationService();
else contactReservationState.value = !contactReservationState.value else contactReservationState.value = !contactReservationState.value;
} };
// 联系预订客服 请求数据 // 联系预订客服 请求数据
const contactReservationService = () => { const contactReservationService = () => {
@@ -681,212 +703,212 @@ const contactReservationService = () => {
customerservice: info.value["customerservice"], customerservice: info.value["customerservice"],
token, token,
}) })
.then(res => { .then((res) => {
if (res.code != 200) return if (res.code != 200) return;
let data = res.data let data = res.data;
customerservicelist.value = data["customerservicelist"] customerservicelist.value = data["customerservicelist"];
contactReservationState.value = !contactReservationState.value contactReservationState.value = !contactReservationState.value;
}) });
} };
let mediaBtnstate = ref({}) // 0 左边为不能点击 1 右边不能点击 2 是两个都能点击 let mediaBtnstate = ref({}); // 0 左边为不能点击 1 右边不能点击 2 是两个都能点击
const handleMediaBtn = (type, index) => { const handleMediaBtn = (type, index) => {
const element = document.querySelector(`.element${index}`) const element = document.querySelector(`.element${index}`);
if (element) { if (element) {
let left let left;
if (type == "left") left = element.scrollLeft - 86 if (type == "left") left = element.scrollLeft - 86;
else left = element.scrollLeft + 86 else left = element.scrollLeft + 86;
const scrollOptions = { const scrollOptions = {
left, left,
behavior: "smooth", behavior: "smooth",
} };
element.scrollTo(scrollOptions) element.scrollTo(scrollOptions);
nextTick(() => { nextTick(() => {
setTimeout(() => { setTimeout(() => {
if (element.scrollLeft == 0) mediaBtnstate.value[index] = 0 if (element.scrollLeft == 0) mediaBtnstate.value[index] = 0;
else if (element.scrollLeft + 460 == element.scrollWidth) mediaBtnstate.value[index] = 1 else if (element.scrollLeft + 460 == element.scrollWidth) mediaBtnstate.value[index] = 1;
else mediaBtnstate.value[index] = 2 else mediaBtnstate.value[index] = 2;
}, 150) }, 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 => { const carouselChange = (value) => {
carouselIndex.value = value carouselIndex.value = value;
const element = slideshowList.value const element = slideshowList.value;
const elementchild = element.querySelector(`.item${value}`) const elementchild = element.querySelector(`.item${value}`);
let left = elementchild.offsetLeft - element.offsetLeft let left = elementchild.offsetLeft - element.offsetLeft;
const scrollOptions = { const scrollOptions = {
left, left,
behavior: "smooth", behavior: "smooth",
} };
element.scrollTo(scrollOptions) element.scrollTo(scrollOptions);
} };
// 顶部轮播图的左右按钮 // 顶部轮播图的左右按钮
const handleslideshow = type => { const handleslideshow = (type) => {
if (type == "left" && carouselIndex.value != 0) remarkCaruselUp.value.prev() if (type == "left" && carouselIndex.value != 0) remarkCaruselUp.value.prev();
if (type != "left" && carouselIndex.value != allCarouselsData.value.length - 1) remarkCaruselUp.value.next() 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(() => { onMounted(() => {
window.addEventListener("scroll", handleScroll) window.addEventListener("scroll", handleScroll);
}) });
onUnmounted(() => { 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 = () => { const handleScroll = () => {
if (Math.random() > 0.3) return if (Math.random() > 0.3) return;
for (let i = 0; i < navList.value.length; i++) { 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 rect = eval(element.value).value.getBoundingClientRect();
const distanceToTop = rect.top const distanceToTop = rect.top;
if (distanceToTop >= 0) { if (distanceToTop >= 0) {
navTab.value = element.value navTab.value = element.value;
break break;
} }
} }
} };
const indicateTypeState = () => { const indicateTypeState = () => {
let total = 0 // 累计 let total = 0; // 累计
for (const key in carouselsconfig.value) { 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 = () => { const distanceSchool = () => {
api.detailsDistance({ api.detailsDistance({
uniqid, uniqid,
istype: 2, istype: 2,
}).then(res => { }).then((res) => {
const data = res.data const data = res.data;
if (res.code != 200) return if (res.code != 200) return;
let specialSchoolDistanceTarget = null let specialSchoolDistanceTarget = null;
let academyPitchIndexTarget = 0 let academyPitchIndexTarget = 0;
const school = pitchSchool || "" const school = pitchSchool || "";
let annexSchoolOmitTarget = [] let annexSchoolOmitTarget = [];
data.forEach((element, index) => { data.forEach((element, index) => {
element["distanceText"] = metersToKilometers(element.distance) element["distanceText"] = metersToKilometers(element.distance);
element.list.forEach(ele => { element.list.forEach((ele) => {
ele["durationText"] = secondsToHoursMinutes(ele.duration, "chinese") ele["durationText"] = secondsToHoursMinutes(ele.duration, "chinese");
ele["durationText2"] = secondsToHoursMinutes(ele.duration) ele["durationText2"] = secondsToHoursMinutes(ele.duration);
ele["distanceText"] = metersToKilometers(ele.distance) ele["distanceText"] = metersToKilometers(ele.distance);
if (Object.prototype.toString.call(ele.publictransport) === "[object Object]") { if (Object.prototype.toString.call(ele.publictransport) === "[object Object]") {
ele.publictransport["durationText"] = secondsToHoursMinutes(ele?.publictransport?.duration || 0, "chinese") ele.publictransport["durationText"] = secondsToHoursMinutes(ele?.publictransport?.duration || 0, "chinese");
ele.publictransport["durationText2"] = secondsToHoursMinutes(ele?.publictransport?.duration || 0) ele.publictransport["durationText2"] = secondsToHoursMinutes(ele?.publictransport?.duration || 0);
const segments = ele.publictransport["segments"] const segments = ele.publictransport["segments"];
if (Array.isArray(segments)) { if (Array.isArray(segments)) {
segments.forEach(e => { segments.forEach((e) => {
e["via_num"] = 1 + Math.floor(e.via_num) e["via_num"] = 1 + Math.floor(e.via_num);
e["durationText"] = secondsToHoursMinutes(e.duration) e["durationText"] = secondsToHoursMinutes(e.duration);
e["distanceText"] = metersToKilometers(e.distance, "chinese") e["distanceText"] = metersToKilometers(e.distance, "chinese");
}) });
} }
} else ele.publictransport = null } else ele.publictransport = null;
}) });
if (school == element.id) { if (school == element.id) {
academyPitchIndexTarget = index academyPitchIndexTarget = index;
const obj = element.list[0] || {} const obj = element.list[0] || {};
let toolText = "步行" let toolText = "步行";
if (Object.prototype.toString.call(obj.publictransport) === "[object Object]") toolText = "公交地铁" if (Object.prototype.toString.call(obj.publictransport) === "[object Object]") toolText = "公交地铁";
specialSchoolDistanceTarget = { specialSchoolDistanceTarget = {
alias: element.alias, alias: element.alias,
distanceText: obj["distanceText"], distanceText: obj["distanceText"],
durationText: obj.publictransport?.durationText2 || obj["durationText2"], durationText: obj.publictransport?.durationText2 || obj["durationText2"],
toolText, toolText,
} };
} else annexSchoolOmitTarget.push(element) } else annexSchoolOmitTarget.push(element);
}) });
if (specialSchoolDistanceTarget) annexSchoolOmitTarget = annexSchoolOmitTarget.slice(0, 4) if (specialSchoolDistanceTarget) annexSchoolOmitTarget = annexSchoolOmitTarget.slice(0, 4);
else annexSchoolOmitTarget = annexSchoolOmitTarget.slice(0, 5) else annexSchoolOmitTarget = annexSchoolOmitTarget.slice(0, 5);
annexSchoolOmit.value = annexSchoolOmitTarget annexSchoolOmit.value = annexSchoolOmitTarget;
annexSchoolList.value = data annexSchoolList.value = data;
targetAcademyPitch.value = data[academyPitchIndexTarget] targetAcademyPitch.value = data[academyPitchIndexTarget];
specialSchoolDistance.value = specialSchoolDistanceTarget specialSchoolDistance.value = specialSchoolDistanceTarget;
academyPitchIndex.value = academyPitchIndexTarget academyPitchIndex.value = academyPitchIndexTarget;
}) });
} };
let annexSchoolOmit = ref([]) // 附近院校 前面 7个 或者 6个的 let annexSchoolOmit = ref([]); // 附近院校 前面 7个 或者 6个的
let annexSchoolList = ref([]) // 附近院校数据 let annexSchoolList = ref([]); // 附近院校数据
let academyPitchIndex = ref(0) // 附近学校距离选中院校 下标 let academyPitchIndex = ref(0); // 附近学校距离选中院校 下标
let targetAcademyPitch = ref({}) // 附近学校距离选中院校 数据 let targetAcademyPitch = ref({}); // 附近学校距离选中院校 数据
let specialSchoolDistance = ref(null) // 特殊的 用户带有school参数 则需要特殊显示 学校距离 let specialSchoolDistance = ref(null); // 特殊的 用户带有school参数 则需要特殊显示 学校距离
const elscrollbarRef = ref(null) // 滚动条 const elscrollbarRef = ref(null); // 滚动条
// 选择附近学校距离的学校下标 // 选择附近学校距离的学校下标
const selectAcademyIndex = index => { const selectAcademyIndex = (index) => {
academyPitchIndex.value = index || 0 academyPitchIndex.value = index || 0;
targetAcademyPitch.value = annexSchoolList.value[academyPitchIndex.value] targetAcademyPitch.value = annexSchoolList.value[academyPitchIndex.value];
elscrollbarRef.value.setScrollTop(0) elscrollbarRef.value.setScrollTop(0);
} };
// 选择附近学校距离的学校下标 // 选择附近学校距离的学校下标
const selectIndex = id => { const selectIndex = (id) => {
if (!id) id = pitchSchool if (!id) id = pitchSchool;
const data = annexSchoolOmit.value || [] const data = annexSchoolOmit.value || [];
data.forEach((element, index) => { data.forEach((element, index) => {
if (element.id == id) { if (element.id == id) {
academyPitchIndex.value = index || 0 academyPitchIndex.value = index || 0;
targetAcademyPitch.value = annexSchoolList.value[academyPitchIndex.value] targetAcademyPitch.value = annexSchoolList.value[academyPitchIndex.value];
} }
}) });
// showDistance.value = true // showDistance.value = true
} };
//显示详情 //显示详情
let showDistance = ref(false) let showDistance = ref(false);
// 点击收藏 // 点击收藏
const handleCollect = () => { const handleCollect = () => {
api.apartmentCollection({ token }).then(res => { api.apartmentCollection({ token }).then((res) => {
if (res.code != 200) return if (res.code != 200) return;
const data = res.data const data = res.data;
info.value.iscollect = data.status || 0 info.value.iscollect = data.status || 0;
ElMessage.success(res.message) ElMessage.success(res.message);
}) });
} };
// 设置媒体列表的类名 // 设置媒体列表的类名
const getClass = index => { const getClass = (index) => {
return { return {
pitch: index === carouselIndex.value, pitch: index === carouselIndex.value,
[`item${index}`]: true, [`item${index}`]: true,
} };
} };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@@ -999,7 +1021,7 @@ const getClass = index => {
height: 340px; height: 340px;
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: 5px; border-radius: 8px;
.img { .img {
width: 100%; width: 100%;
@@ -1167,18 +1189,106 @@ const getClass = index => {
} }
.apartment-name { .apartment-name {
font-size: 28px; // font-size: 28px;
color: #000000; // color: #000000;
line-height: 46px; // line-height: 46px;
margin-bottom: 20px; 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 { .label-list {
font-size: 14px; flex-wrap: wrap;
color: #7f7f7f; padding-bottom: 14px;
line-height: 24px; border-bottom: 1px solid #ebebeb;
margin-bottom: 20px;
white-space: pre-wrap; .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 { .place-text {

4
src/views/housingView/apartment.vue
View File

@@ -72,7 +72,7 @@ onMounted(() => {
// 初始化瀑布流 // 初始化瀑布流
masonryInstance = new Masonry(gridContainer.value, { masonryInstance = new Masonry(gridContainer.value, {
itemSelector: ".item", itemSelector: ".item",
gutter: 15, gutter: 22,
}) })
// masonryInstanceMore = new Masonry(moreShowList.value, { // masonryInstanceMore = new Masonry(moreShowList.value, {
@@ -240,7 +240,7 @@ const handlecollect = uniqid => {
} }
.list { .list {
margin: 32px auto 0; margin: 20px auto 0;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;