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-14 18:52:31 +08:00
parent 4b84dd558e
commit d201c8892f
22 changed files with 1064 additions and 690 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/img/apartmentDetail/arrow-black.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="6px" height="11px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -514 -1044 )">
<path d="M 5.89690721649484 5.24649298597194 C 5.96563573883162 5.31997327989312 6 5.40447561790247 6 5.5 C 6 5.59552438209753 5.96563573883162 5.68002672010688 5.89690721649484 5.75350701402806 L 1.09278350515464 10.8897795591182 C 1.02405498281787 10.9632598530394 0.945017182130584 11 0.855670103092783 11 C 0.766323024054983 11 0.687285223367698 10.9632598530394 0.618556701030928 10.8897795591182 L 0.103092783505155 10.3386773547094 C 0.0343642611683849 10.2651970607882 0 10.1806947227789 0 10.0851703406814 C 0 9.98964595858383 0.0343642611683849 9.90514362057448 0.103092783505155 9.83166332665331 L 4.15463917525773 5.5 L 0.103092783505155 1.16833667334669 C 0.0343642611683849 1.09485637942552 0 1.01035404141617 0 0.914829659318638 C 0 0.819305277221107 0.0343642611683849 0.734802939211756 0.103092783505155 0.661322645290581 L 0.618556701030928 0.110220440881764 C 0.687285223367698 0.0367401469605875 0.766323024054983 0 0.855670103092783 0 C 0.945017182130584 0 1.02405498281787 0.0367401469605875 1.09278350515464 0.110220440881764 L 5.89690721649484 5.24649298597194 Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 514 1044 )" />
</g>
</svg>

BIN
src/assets/img/apartmentDetail/orientation.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
src/assets/img/apartmentDetail/same-brand-recommendation.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/img/apartmentDetail/same-brand.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
src/assets/img/apartmentDetail/subway-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/img/apartmentDetail/taxi-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

6
src/assets/img/apartmentDetail/tick-circle-red.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="24px" height="24px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -1676 -556 )">
<path d="M 19.78125 10.171875 C 19.96875 9.984375 20.0625 9.75 20.0625 9.46875 C 20.0625 9.17708333333333 19.96875 8.9375 19.78125 8.75 L 18.359375 7.34375 C 18.1614583333333 7.14583333333333 17.9270833333333 7.046875 17.65625 7.046875 C 17.3854166666667 7.046875 17.1510416666667 7.14583333333333 16.953125 7.34375 L 10.578125 13.703125 L 7.046875 10.171875 C 6.84895833333333 9.97395833333333 6.61458333333333 9.875 6.34375 9.875 C 6.07291666666667 9.875 5.83854166666667 9.97395833333333 5.640625 10.171875 L 4.21875 11.578125 C 4.03125 11.765625 3.9375 12.0052083333333 3.9375 12.296875 C 3.9375 12.578125 4.03125 12.8125 4.21875 13 L 9.875 18.65625 C 10.0729166666667 18.8541666666667 10.3072916666667 18.953125 10.578125 18.953125 C 10.859375 18.953125 11.0989583333333 18.8541666666667 11.296875 18.65625 L 19.78125 10.171875 Z M 22.390625 5.9765625 C 23.4635416666667 7.81510416666666 24 9.82291666666666 24 12 C 24 14.1770833333333 23.4635416666667 16.1848958333333 22.390625 18.0234375 C 21.3177083333333 19.8619791666667 19.8619791666667 21.3177083333333 18.0234375 22.390625 C 16.1848958333333 23.4635416666667 14.1770833333333 24 12 24 C 9.82291666666667 24 7.81510416666667 23.4635416666667 5.9765625 22.390625 C 4.13802083333333 21.3177083333333 2.68229166666667 19.8619791666667 1.609375 18.0234375 C 0.536458333333333 16.1848958333333 0 14.1770833333333 0 12 C 0 9.82291666666666 0.536458333333333 7.81510416666666 1.609375 5.9765625 C 2.68229166666667 4.13802083333333 4.13802083333333 2.68229166666666 5.9765625 1.609375 C 7.81510416666667 0.536458333333331 9.82291666666667 0 12 0 C 14.1770833333333 0 16.1848958333333 0.536458333333331 18.0234375 1.609375 C 19.8619791666667 2.68229166666666 21.3177083333333 4.13802083333333 22.390625 5.9765625 Z " fill-rule="nonzero" fill="#f95d5d" stroke="none" transform="matrix(1 0 0 1 1676 556 )" />
</g>
</svg>

BIN
src/assets/img/apartmentDetail/u1834.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/img/publicImage/apartment-title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

163
src/assets/styles/apartmentDetail.css
View File

@@ -235,7 +235,6 @@
background-color: #ebebeb; background-color: #ebebeb;
border-radius: 8px; border-radius: 8px;
color: #555555; color: #555555;
line-height: 26px;
padding: 0 8px; padding: 0 8px;
font-size: 13px; font-size: 13px;
margin-right: 10px; margin-right: 10px;
@@ -288,6 +287,7 @@
.content .header .header-content .header-right .introduce .introduce-head .more { .content .header .header-content .header-right .introduce .introduce-head .more {
color: #333333; color: #333333;
font-size: 14px; font-size: 14px;
cursor: pointer;
} }
.content .header .header-content .header-right .introduce .introduce-head .more .icon { .content .header .header-content .header-right .introduce .introduce-head .more .icon {
width: 6px; width: 6px;
@@ -424,7 +424,7 @@
margin-right: 4px; margin-right: 4px;
} }
.content .operate-box-bj .operate-box .btn-box .btn-item.consult-btn { .content .operate-box-bj .operate-box .btn-box .btn-item.consult-btn {
width: 180px; width: 138px;
background: -webkit-linear-gradient(324.8544545deg, #62b1ff -11%, #80ffff 135%); background: -webkit-linear-gradient(324.8544545deg, #62b1ff -11%, #80ffff 135%);
background: -moz-linear-gradient(125.1455455deg, #62b1ff -11%, #80ffff 135%); background: -moz-linear-gradient(125.1455455deg, #62b1ff -11%, #80ffff 135%);
background: linear-gradient(125.1455455deg, #62b1ff -11%, #80ffff 135%); background: linear-gradient(125.1455455deg, #62b1ff -11%, #80ffff 135%);
@@ -452,10 +452,12 @@
} }
.content .details-box .details-left .special-offer .special-bj { .content .details-box .details-left .special-offer .special-bj {
width: 876px; width: 876px;
height: 169px; height: 100px;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
object-fit: cover;
border-radius: 10px;
} }
.content .details-box .details-left .special-offer .head { .content .details-box .details-left .special-offer .head {
width: 125px; width: 125px;
@@ -675,6 +677,7 @@
.content .details-box .details-left .type-box .item .info .tags { .content .details-box .details-left .type-box .item .info .tags {
margin-bottom: 16px; margin-bottom: 16px;
margin-bottom: 5px; margin-bottom: 5px;
flex-wrap: wrap;
} }
.content .details-box .details-left .type-box .item .info .tags .tags-item { .content .details-box .details-left .type-box .item .info .tags .tags-item {
width: fit-content; width: fit-content;
@@ -825,10 +828,17 @@
.content .details-box .details-left .details-item .traffic-box .traffic-title { .content .details-box .details-left .details-item .traffic-box .traffic-title {
margin-bottom: 16px; margin-bottom: 16px;
} }
.content .details-box .details-left .details-item.apartment-facilities .facility-box { .content .details-box .details-left .details-item.apartment-facilities {
padding: 30px; transition: all 0.3s;
position: relative; position: relative;
} }
.content .details-box .details-left .details-item.apartment-facilities.hide {
height: 820px;
overflow: hidden;
}
.content .details-box .details-left .details-item.apartment-facilities .facility-box {
padding: 30px 30px 30px 46px;
}
.content .details-box .details-left .details-item.apartment-facilities .facility-box .item:not(:last-of-type) { .content .details-box .details-left .details-item.apartment-facilities .facility-box .item:not(:last-of-type) {
margin-bottom: 40px; margin-bottom: 40px;
} }
@@ -855,7 +865,6 @@
box-sizing: border-box; box-sizing: border-box;
} }
.content .details-box .details-left .details-item.apartment-facilities .facility-box .item .label { .content .details-box .details-left .details-item.apartment-facilities .facility-box .item .label {
margin-bottom: 7px;
flex-wrap: wrap; flex-wrap: wrap;
} }
.content .details-box .details-left .details-item.apartment-facilities .facility-box .item .label .label-item { .content .details-box .details-left .details-item.apartment-facilities .facility-box .item .label .label-item {
@@ -873,11 +882,15 @@
height: 16px; height: 16px;
margin-right: 10px; margin-right: 10px;
} }
.content .details-box .details-left .details-item.apartment-facilities .facility-box .item .img-box {
margin-top: 7px;
}
.content .details-box .details-left .details-item.apartment-facilities .facility-box .item .img-box .img-item { .content .details-box .details-left .details-item.apartment-facilities .facility-box .item .img-box .img-item {
width: 110px; width: 110px;
height: 110px; height: 110px;
margin-right: 10px; margin-right: 10px;
position: relative; position: relative;
cursor: pointer;
} }
.content .details-box .details-left .details-item.apartment-facilities .facility-box .item .img-box .img-item .icon { .content .details-box .details-left .details-item.apartment-facilities .facility-box .item .img-box .img-item .icon {
width: 110px; width: 110px;
@@ -898,6 +911,14 @@
border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px;
padding-left: 10px; padding-left: 10px;
} }
.content .details-box .details-left .details-item.details-message {
transition: all 0.3s;
position: relative;
}
.content .details-box .details-left .details-item.details-message.hide {
height: 820px;
overflow: hidden;
}
.content .details-box .details-left .details-item .bottom-btn { .content .details-box .details-left .details-item .bottom-btn {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@@ -970,8 +991,6 @@
margin-bottom: 20px; margin-bottom: 20px;
font-size: 18px; font-size: 18px;
color: #000000; color: #000000;
background: -webkit-linear-gradient(350.34816653deg, #fdda55 0%, #e5d7be 50%, #cbfebf 100%);
background: -moz-linear-gradient(99.65183347deg, #fdda55 0%, #e5d7be 50%, #cbfebf 100%);
background: linear-gradient(99.65183347deg, #fdda55 0%, #e5d7be 50%, #cbfebf 100%); background: linear-gradient(99.65183347deg, #fdda55 0%, #e5d7be 50%, #cbfebf 100%);
border-radius: 12px; border-radius: 12px;
width: 304px; width: 304px;
@@ -980,6 +999,13 @@
position: relative; position: relative;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706);
} }
.content .details-box .details-right .same-brand-title.like {
background: linear-gradient(-80.34816653deg, #d6dcf0 0%, #dae6f2 19%, #eff2cc 62%, #eff9f1 100%);
}
.content .details-box .details-right .same-brand-title.like .same-brand-icon {
width: 24px;
height: 24px;
}
.content .details-box .details-right .same-brand-title::after { .content .details-box .details-right .same-brand-title::after {
content: ""; content: "";
position: absolute; position: absolute;
@@ -993,124 +1019,9 @@
transform: translateX(-50%); transform: translateX(-50%);
} }
.content .details-box .details-right .same-brand-title .same-brand-icon { .content .details-box .details-right .same-brand-title .same-brand-icon {
width: 24px; width: 22px;
height: 24px; height: 22px;
margin-right: 4px; margin-right: 7px;
}
.content .details-box .details-right .same-brand-list .same-brand-item {
width: 304px;
background-color: #ffffff;
border-radius: 17px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706);
padding: 8px 0;
margin-bottom: 20px;
cursor: pointer;
}
.content .details-box .details-right .same-brand-list .same-brand-item:hover {
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25686275);
}
.content .details-box .details-right .same-brand-list .same-brand-item .same-brand-header {
width: 288px;
height: 192px;
overflow: hidden;
border-radius: 17px;
margin: 0 auto 20px;
position: relative;
}
.content .details-box .details-right .same-brand-list .same-brand-item .same-brand-header .same-brand-img {
width: 288px;
height: 192px;
object-fit: none;
}
.content .details-box .details-right .same-brand-list .same-brand-item .same-brand-header .apartment-name {
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
height: 32px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.7);
padding: 0 15px;
border-radius: 40px;
width: max-content;
line-height: 30px;
max-width: 100%;
}
.content .details-box .details-right .same-brand-list .same-brand-item .same-brand-header .apartment-synopsis {
width: 100%;
height: 32px;
line-height: 32px;
background-color: rgba(0, 0, 0, 0.63921569);
border-radius: 0 0 10px 10px;
position: absolute;
bottom: 0;
font-size: 13px;
color: #d7d7d7;
padding: 0 10px;
}
.content .details-box .details-right .same-brand-list .same-brand-item .site {
margin: 0 20px 20px;
color: #555555;
font-size: 14px;
}
.content .details-box .details-right .same-brand-list .same-brand-item .site .site-icon {
width: 18px;
height: 18px;
margin-right: 4px;
}
.content .details-box .details-right .same-brand-list .same-brand-item .price-box {
font-size: 14px;
color: #555555;
margin: 0 20px 31px;
}
.content .details-box .details-right .same-brand-list .same-brand-item .price-box .price-item {
justify-content: space-between;
height: 50px;
}
.content .details-box .details-right .same-brand-list .same-brand-item .price-box .price-item:not(:last-of-type) {
border-bottom: 1px solid #ebebeb;
}
.content .details-box .details-right .same-brand-list .same-brand-item .price-box .room-name {
font-size: 15px;
color: #000000;
padding-right: 5px;
}
.content .details-box .details-right .same-brand-list .same-brand-item .price-box .unit {
font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900;
color: #000000;
font-size: 13px;
}
.content .details-box .details-right .same-brand-list .same-brand-item .price-box .quantity {
font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900;
font-size: 18px;
color: #f95d5d;
margin: 0 5px;
}
.content .details-box .details-right .same-brand-list .same-brand-item .same-brand-quantity {
font-size: 14px;
color: #555555;
margin: 21px auto;
}
.content .details-box .details-right .same-brand-list .same-brand-item .same-brand-quantity .quantity {
font-weight: 650;
font-size: 14px;
color: #000000;
line-height: 18px;
height: 18px;
background-color: #fddf6d;
border-radius: 9px;
padding: 0 8px;
margin: 0 8px;
}
.content .details-box .details-right .same-brand-list .same-brand-item .same-brand-quantity .same-brand-quantity-icon {
width: 7px;
height: 12px;
margin-left: 8px;
} }
.add-customer-mask { .add-customer-mask {
position: fixed; position: fixed;

183
src/assets/styles/apartmentDetail.less
View File

@@ -290,7 +290,6 @@
background-color: rgba(235, 235, 235, 1); background-color: rgba(235, 235, 235, 1);
border-radius: 8px; border-radius: 8px;
color: #555555; color: #555555;
line-height: 26px;
padding: 0 8px; padding: 0 8px;
font-size: 13px; font-size: 13px;
margin-right: 10px; margin-right: 10px;
@@ -344,6 +343,7 @@
.more { .more {
color: #333333; color: #333333;
font-size: 14px; font-size: 14px;
cursor: pointer;
.icon { .icon {
width: 6px; width: 6px;
height: 10px; height: 10px;
@@ -555,7 +555,7 @@
} }
&.consult-btn { &.consult-btn {
width: 180px; width: 138px;
background: -webkit-linear-gradient(324.854454500294deg, rgba(98, 177, 255, 1) -11%, rgba(128, 255, 255, 1) 135%); background: -webkit-linear-gradient(324.854454500294deg, rgba(98, 177, 255, 1) -11%, rgba(128, 255, 255, 1) 135%);
background: -moz-linear-gradient(125.145545499706deg, rgba(98, 177, 255, 1) -11%, rgba(128, 255, 255, 1) 135%); background: -moz-linear-gradient(125.145545499706deg, rgba(98, 177, 255, 1) -11%, rgba(128, 255, 255, 1) 135%);
background: linear-gradient(125.145545499706deg, rgba(98, 177, 255, 1) -11%, rgba(128, 255, 255, 1) 135%); background: linear-gradient(125.145545499706deg, rgba(98, 177, 255, 1) -11%, rgba(128, 255, 255, 1) 135%);
@@ -590,10 +590,12 @@
.special-bj { .special-bj {
width: 876px; width: 876px;
height: 169px; height: 100px;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
object-fit: cover;
border-radius: 10px;
} }
.head { .head {
@@ -861,6 +863,7 @@
.tags { .tags {
margin-bottom: 16px; margin-bottom: 16px;
margin-bottom: 5px; margin-bottom: 5px;
flex-wrap: wrap;
.tags-item { .tags-item {
width: fit-content; width: fit-content;
@@ -1218,9 +1221,15 @@
} }
&.apartment-facilities { &.apartment-facilities {
&.hide {
height: 820px;
overflow: hidden;
}
transition: all 0.3s;
position: relative;
.facility-box { .facility-box {
padding: 30px; padding: 30px 30px 30px 46px;
position: relative; // position: relative;
.item { .item {
&:not(:last-of-type) { &:not(:last-of-type) {
margin-bottom: 40px; margin-bottom: 40px;
@@ -1249,7 +1258,6 @@
} }
.label { .label {
margin-bottom: 7px;
flex-wrap: wrap; flex-wrap: wrap;
.label-item { .label-item {
font-size: 14px; font-size: 14px;
@@ -1270,11 +1278,13 @@
} }
.img-box { .img-box {
margin-top: 7px;
.img-item { .img-item {
width: 110px; width: 110px;
height: 110px; height: 110px;
margin-right: 10px; margin-right: 10px;
position: relative; position: relative;
cursor: pointer;
.icon { .icon {
width: 110px; width: 110px;
height: 110px; height: 110px;
@@ -1331,6 +1341,15 @@
} }
} }
&.details-message {
&.hide {
height: 820px;
overflow: hidden;
}
transition: all 0.3s;
position: relative;
}
.bottom-btn { .bottom-btn {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@@ -1418,16 +1437,21 @@
margin-bottom: 20px; margin-bottom: 20px;
font-size: 18px; font-size: 18px;
color: #000000; color: #000000;
background: -webkit-linear-gradient(350.348166533196deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%);
background: -moz-linear-gradient(99.6518334668042deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%);
background: linear-gradient(99.6518334668042deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%); background: linear-gradient(99.6518334668042deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%);
border-radius: 12px; border-radius: 12px;
width: 304px; width: 304px;
height: 60px; height: 60px;
border: 5px solid #fff; border: 5px solid #fff;
position: relative; position: relative;
// box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
&.like {
background: linear-gradient(-80.3481665331958deg, rgba(214, 220, 240, 1) 0%, rgba(218, 230, 242, 1) 19%, rgba(239, 242, 204, 1) 62%, rgba(239, 249, 241, 1) 100%);
.same-brand-icon {
width: 24px;
height: 24px;
}
}
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
@@ -1442,148 +1466,13 @@
} }
.same-brand-icon { .same-brand-icon {
width: 24px; width: 22px;
height: 24px; height: 22px;
margin-right: 4px; margin-right: 7px;
} }
} }
.same-brand-list { .same-brand-list {
.same-brand-item {
width: 304px;
background-color: rgba(255, 255, 255, 1);
border-radius: 17px;
// -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
// -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
// box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
padding: 8px 0;
margin-bottom: 20px;
cursor: pointer;
&:hover {
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25686275);
}
.same-brand-header {
width: 288px;
height: 192px;
overflow: hidden;
border-radius: 17px;
margin: 0 auto 20px;
position: relative;
.same-brand-img {
width: 288px;
height: 192px;
object-fit: none;
}
.apartment-name {
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
padding: 0 15px;
height: 32px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.7);
padding: 0 15px;
border-radius: 40px;
width: max-content;
line-height: 30px;
max-width: 100%;
}
.apartment-synopsis {
width: 100%;
height: 32px;
line-height: 32px;
background-color: rgba(0, 0, 0, 0.63921568627451);
border-radius: 0 0 10px 10px;
position: absolute;
bottom: 0;
font-size: 13px;
color: #d7d7d7;
padding: 0 10px;
}
}
.site {
margin: 0 20px 20px;
color: #555555;
font-size: 14px;
.site-icon {
width: 18px;
height: 18px;
margin-right: 4px;
}
}
.price-box {
font-size: 14px;
color: #555555;
margin: 0 20px 31px;
.price-item {
justify-content: space-between;
height: 50px;
&:not(:last-of-type) {
border-bottom: 1px solid #ebebeb;
}
}
.room-name {
font-size: 15px;
color: #000000;
padding-right: 5px;
}
.unit {
font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900;
color: #000000;
font-size: 13px;
}
.quantity {
font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900;
font-size: 18px;
color: #f95d5d;
margin: 0 5px;
}
}
.same-brand-quantity {
font-size: 14px;
color: #555555;
margin: 21px auto;
.quantity {
font-weight: 650;
font-size: 14px;
color: #000000;
line-height: 18px;
height: 18px;
background-color: #fddf6d;
border-radius: 9px;
padding: 0 8px;
margin: 0 8px;
}
.same-brand-quantity-icon {
width: 7px;
height: 12px;
margin-left: 8px;
}
}
}
} }
} }
} }

176
src/components/apartment/sameBrandItem.vue Normal file
View File

@@ -0,0 +1,176 @@
<template>
<div class="same-brand-item" @click="gobrand(props.item)">
<div class="same-brand-header">
<img class="same-brand-img" v-lazy="props.item['image']" />
<div class="apartment-name ellipsis">{{ props.item["title"] }}</div>
<div class="apartment-synopsis ellipsis">{{ props.item["propaganda"] }}</div>
</div>
<div class="site flexacenter">
<img class="site-icon" src="@/assets/img/publicImage/location-icon.png" />
<div class="site-text ellipsis">{{ props.item["address"] }}</div>
</div>
<div class="price-box">
<div class="price-item flexacenter" v-for="(it, i) in props.item['roomlist']" :key="i">
<div class="room-name ellipsis flex1">{{ it["name"] }}</div>
<div class="flexacenter">
<div class="unit">HK$</div>
<div class="quantity">{{ it["price"] }}</div>
/月
</div>
</div>
</div>
<div class="same-brand-quantity flexcenter">
共
<div class="quantity">{{ props.item["roomnum"] }}</div>
个房型
<img class="same-brand-quantity-icon" src="@/assets/img/publicImage/black-arrow.svg" />
</div>
</div>
</template>
<script setup>
import { defineProps } from "vue"
const props = defineProps({
item: Object,
});
const gobrand = (item) => router.push(`/apartmentDetail?uniqid=${item.uniqid}`);
</script>
<style scoped lang="less">
.same-brand-item {
width: 304px;
background-color: rgba(255, 255, 255, 1);
border-radius: 17px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
padding: 8px 0;
margin-bottom: 20px;
cursor: pointer;
&:hover {
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25686275);
}
.same-brand-header {
width: 288px;
height: 192px;
overflow: hidden;
border-radius: 17px;
margin: 0 auto 20px;
position: relative;
.same-brand-img {
width: 288px;
height: 192px;
object-fit: none;
}
.apartment-name {
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
padding: 0 15px;
height: 32px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.7);
padding: 0 15px;
border-radius: 40px;
width: max-content;
line-height: 30px;
max-width: 100%;
}
.apartment-synopsis {
width: 100%;
height: 32px;
line-height: 32px;
background-color: rgba(0, 0, 0, 0.63921568627451);
border-radius: 0 0 10px 10px;
position: absolute;
bottom: 0;
font-size: 13px;
color: #d7d7d7;
padding: 0 10px;
}
}
.site {
margin: 0 20px 20px;
color: #555555;
font-size: 14px;
.site-icon {
width: 18px;
height: 18px;
margin-right: 4px;
}
}
.price-box {
font-size: 14px;
color: #555555;
margin: 0 20px 31px;
.price-item {
justify-content: space-between;
height: 50px;
&:not(:last-of-type) {
border-bottom: 1px solid #ebebeb;
}
}
.room-name {
font-size: 15px;
color: #000000;
padding-right: 5px;
}
.unit {
font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900;
color: #000000;
font-size: 13px;
}
.quantity {
font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900;
font-size: 18px;
color: #f95d5d;
margin: 0 5px;
}
}
.same-brand-quantity {
font-size: 14px;
color: #555555;
margin: 21px auto;
.quantity {
font-weight: 650;
font-size: 14px;
color: #000000;
line-height: 18px;
height: 18px;
background-color: #fddf6d;
border-radius: 9px;
padding: 0 8px;
margin: 0 8px;
}
.same-brand-quantity-icon {
width: 7px;
height: 12px;
margin-left: 8px;
}
}
}
</style>

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

@@ -97,7 +97,7 @@
<div class="option-item flexflex" style="padding-bottom: 15px"> <div class="option-item flexflex" style="padding-bottom: 15px">
<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: tag == '' }" @click="selectOption('nearSchool', 0)">不限</div> <div class="school-item flexcenter" :class="{ pitch: pitchValue['tag'] == '' }" @click="selectOption('tag', 0)">不限</div>
<div class="school-item flexcenter" v-for="(item, index) in tagList" :key="index" :class="{ pitch: item == pitchValue['tag'] }" @click="selectOption('tag', item)">{{ item }}</div> <div class="school-item flexcenter" v-for="(item, index) in tagList" :key="index" :class="{ pitch: item == pitchValue['tag'] }" @click="selectOption('tag', item)">{{ item }}</div>
</div> </div>
</div> </div>

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

@@ -41,23 +41,23 @@
</div> </div>
<div class="distance flexflex"> <div class="distance flexflex">
<div class="figure flexacenter" v-if="item.distance?.distance"> <div class="figure flexflex" v-if="item.distance?.distance">
距离 距离
<div class="school">{{ item.distance.alias }}</div> <div class="school">{{ item.distance.alias }}</div>
<div class="mile">{{ item.distance.distance }}km</div> <div class="mile">{{ calculateDistance(item.distance.distance) }}km</div>
</div> </div>
<div class="vehicle-list flex1 flexflex"> <div class="vehicle-list flex1 flexflex">
<div class="vehicle-item flexacenter" v-if="item.distance?.walking_duration"> <div class="vehicle-item flexacenter" v-if="item.distance?.walking_duration">
<img class="vehicle-icon" src="@/assets/img/publicImage/walk-icon.png" /> <img class="vehicle-icon" src="@/assets/img/apartmentDetail/walk-icon.png" />
{{ item.distance.walking_duration }} {{ calculateDuration(item.distance.walking_duration) }}
</div> </div>
<div class="vehicle-item flexacenter" v-if="item.distance?.transit_duration"> <div class="vehicle-item flexacenter" v-if="item.distance?.transit_duration">
<img class="vehicle-icon" src="@/assets/img/publicImage/walk-icon.png" /> <img class="vehicle-icon" src="@/assets/img/apartmentDetail/taxi-icon.png" />
{{ item.distance.transit_duration }} {{ calculateDuration(item.distance.transit_duration) }}
</div> </div>
<div class="vehicle-item flexacenter" v-if="item.distance?.driving_duration"> <div class="vehicle-item flexacenter" v-if="item.distance?.driving_duration">
<img class="vehicle-icon" src="@/assets/img/publicImage/walk-icon.png" /> <img class="vehicle-icon" src="@/assets/img/apartmentDetail/subway-icon.png" />
{{ item.distance.driving_duration }} {{ calculateDuration(item.distance.driving_duration) }}
</div> </div>
</div> </div>
</div> </div>
@@ -98,7 +98,7 @@
<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, calculateDuration, calculateDistance } from "@/utils/util.js";
const router = useRouter(); const router = useRouter();
const props = defineProps({ const props = defineProps({
@@ -327,13 +327,13 @@ const loadload = () => {
.distance { .distance {
padding: 0 12px 12px 29px; padding: 0 12px 12px 29px;
border-bottom: 1px dashed #d7d7d7; border-bottom: 1px dotted #d7d7d7;
.figure { .figure {
font-size: 14px; font-size: 14px;
color: #555555; color: #555555;
text-align: right; text-align: right;
line-height: 26px; line-height: 22px;
margin-right: 5px; margin-right: 8px;
.school { .school {
font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif; font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
@@ -355,6 +355,7 @@ const loadload = () => {
.vehicle-item { .vehicle-item {
height: 22px; height: 22px;
line-height: 22px;
background-color: rgba(255, 255, 255, 0); background-color: rgba(255, 255, 255, 0);
border: 1px solid rgba(127, 127, 127, 1); border: 1px solid rgba(127, 127, 127, 1);
border-radius: 30px; border-radius: 30px;
@@ -362,6 +363,7 @@ const loadload = () => {
color: #333333; color: #333333;
padding: 0 8px; padding: 0 8px;
margin-right: 6px; margin-right: 6px;
margin-bottom: 5px;
.vehicle-icon { .vehicle-icon {
width: 14px; width: 14px;

7
src/components/public/viewMap.vue
View File

@@ -18,7 +18,7 @@
</template> </template>
<script setup> <script setup>
import { ref, defineProps } from 'vue'; import { ref, defineProps, defineExpose } from 'vue';
const props = defineProps({ const props = defineProps({
latlng: Object, latlng: Object,
@@ -67,6 +67,11 @@ const showPop = () => {
// map.addControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION); // map.addControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);
} }
// 使用 defineExpose 暴露方法，这样父组件就能访问到
defineExpose({
showPop
})
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

81
src/store/index.js
View File

@@ -1,46 +1,39 @@
import { createStore } from 'vuex' import { createStore } from "vuex";
export default createStore({ export default createStore({
state: { state: {
advData: [], advData: [],
seachTypeData: [], seachTypeData: [],
indexData: [],//首页数据 indexData: [], //首页数据
ListSelectBtn: [],//瀑布流选项 ListSelectBtn: [], //瀑布流选项
user: {}, // 我的信息数据 user: {}, // 我的信息数据
wechat: {}, // 微信号 二维码等数据 wechat: {}, // 微信号 二维码等数据
nav: [], // 顶部的导航数据 nav: [], // 顶部的导航数据
apartment: {}, // 公寓筛选的字段 apartment: {}, // 公寓筛选的字段
routeList: { routeList: {
index: { index: {
path: '/', path: "/",
title: '港校租房' title: "港校租房",
}, },
secondaryIndex: { secondaryIndex: {
path: '', path: "",
title: '', title: "",
} },
},//导航路由列表 }, //导航路由列表
seachSelect: { seachSelect: {
seachPage: {} seachPage: {},
},//保存筛选条件 }, //保存筛选条件
showloginmodal: false, // 是否需要登录状态 showloginmodal: false, // 是否需要登录状态
apartmentPitchValue: {}, // 公寓筛选的值 全局化 apartmentPitchValue: {}, // 公寓筛选的值 全局化
needPitchValue: {}, // 求房源筛选的值 全局化 needPitchValue: {}, // 求房源筛选的值 全局化
personPitchValue: {}, // 个人筛选的值 全局化 personPitchValue: {}, // 个人筛选的值 全局化
intermediaryPitchValue: {}, // 中介筛选的值 全局化 intermediaryPitchValue: {}, // 中介筛选的值 全局化
locationObj: {}, // 地区数据 locationObj: {}, // 地区数据
bannerData: {}, // 所有轮播数据 bannerData: {}, // 所有轮播数据
}, },
getters: { getters: {},
mutations: {},
}, actions: {},
mutations: { modules: {},
}, plugins: [],
actions: { });
},
modules: {
},
plugins: [
]
})

8
src/utils/util.js
View File

@@ -70,7 +70,15 @@ function metersToKilometers(input, type) {
return text return text
} }
// 计算路程时间
const calculateDuration = value => (value / 60).toFixed(1) + 'min';
// 计算路程公里数
const calculateDistance = value => (value / 1000).toFixed(1);
module.exports = { module.exports = {
calculateDistance,
calculateDuration,
setSeoTitle, setSeoTitle,
redirectToExternalWebsite, redirectToExternalWebsite,
goTologin, goTologin,

533
src/views/apartmentDetail.vue
View File

@@ -74,7 +74,7 @@
<img class="icon" src="@/assets/img/apartmentDetail/yellow-diamond.png" /> <img class="icon" src="@/assets/img/apartmentDetail/yellow-diamond.png" />
<div class="name">{{ company.title }}</div> <div class="name">{{ company.title }}</div>
<div class="full-name flex1">{{ info.propaganda }}</div> <div class="full-name flex1">{{ info.propaganda }}</div>
<div class="more flexacenter"> <div class="more flexacenter" @click="handleClickNav('eleseEle')">
同品牌 同品牌
<img class="icon" src="@/assets/img/publicImage/black-arrow.svg" /> <img class="icon" src="@/assets/img/publicImage/black-arrow.svg" />
</div> </div>
@@ -94,23 +94,17 @@
<div class="figure flexacenter"> <div class="figure flexacenter">
距离 距离
<div class="school">城大</div> <div class="school">{{ distancePitch.alias }}</div>
1.3km {{ distancePitch.distance }}km
<div class="btn">[切换院校]</div> <div class="btn" @click="openSelectSchool">[切换院校]</div>
</div> </div>
<div class="vehicle flexflex"> <div class="vehicle flexflex">
<div class="item flexacenter"> <div class="item flexacenter" v-for="(item, index) in distancePitch.obj" :key="index">
<img class="icon" src="@/assets/img/publicImage/walk-icon.png" /> <img v-if="index == 'walking'" class="icon" src="@/assets/img/apartmentDetail/walk-icon.png" />
2min <img v-if="index == 'driving'" class="icon" src="@/assets/img/apartmentDetail/taxi-icon.png" />
</div> <img v-if="index == 'transit'" class="icon" src="@/assets/img/apartmentDetail/subway-icon.png" />
<div class="item flexacenter"> {{ item }}
<img class="icon" src="@/assets/img/publicImage/walk-icon.png" />
2min
</div>
<div class="item flexacenter">
<img class="icon" src="@/assets/img/publicImage/walk-icon.png" />
2min
</div> </div>
</div> </div>
</div> </div>
@@ -139,18 +133,18 @@
<img v-else alt="收藏图标" class="transmit-icon" src="@/assets/img/detail/collect.png" /> <img v-else alt="收藏图标" class="transmit-icon" src="@/assets/img/detail/collect.png" />
收藏 收藏
</div> </div>
<div class="btn-item transmit-btn flexcenter" @click="handleTransmit"> <!-- <div class="btn-item transmit-btn flexcenter" @click="handleTransmit">
<img alt="转发图标" class="transmit-icon" src="@/assets/img/publicImage/transmit-icon.png" /> <img alt="转发图标" class="transmit-icon" src="@/assets/img/publicImage/transmit-icon.png" />
转发 转发
<transmit-btn :qrcode="qrcode" :title="info['title']" type="apartment"></transmit-btn> <transmit-btn :qrcode="qrcode" :title="info['title']" type="apartment"></transmit-btn>
</div> </div> -->
<div class="btn-item consult-btn flexcenter" @click="modificationContact">咨询</div> <div class="btn-item consult-btn flexcenter" @click="modificationContact">咨询</div>
</div> </div>
</div> </div>
</div> </div>
<div class="details-box flexflex"> <div class="details-box flexflex">
<div class="details-left flex1" ref="detailsLeft"> <div class="details-left flex1" ref="detailsLeft">
<div class="special-offer" v-if="info.promotionalactivities"> <div class="special-offer" v-if="info.promotionalactivities" ref="specialEle">
<img class="special-bj" src="@/assets/img/publicImage/special-bj.svg" /> <img class="special-bj" src="@/assets/img/publicImage/special-bj.svg" />
<img class="head" src="@/assets/img/publicImage/special-title.png" /> <img class="head" src="@/assets/img/publicImage/special-title.png" />
<img class="gift" src="@/assets/img/publicImage/special-gift.png" /> <img class="gift" src="@/assets/img/publicImage/special-gift.png" />
@@ -167,7 +161,7 @@
<img class="bottom-orange" src="@/assets/img/publicImage/special-bottom-orange.svg" /> <img class="bottom-orange" src="@/assets/img/publicImage/special-bottom-orange.svg" />
</div> </div>
<div class="remark"> <div class="remark" ref="inspectEle">
<div class="head flexacenter"> <div class="head flexacenter">
<div class="text">寄托实地考察</div> <div class="text">寄托实地考察</div>
<div class="more flexacenter"> <div class="more flexacenter">
@@ -188,7 +182,7 @@
</div> </div>
</div> </div>
<div class="remark"> <div class="remark" ref="followEle">
<div class="head flexacenter"> <div class="head flexacenter">
<div class="text">寄托回访</div> <div class="text">寄托回访</div>
<div class="more flexacenter"> <div class="more flexacenter">
@@ -235,7 +229,7 @@
<img class="icon" src="@/assets/img/apartmentDetail/collect-hollow-black.svg" /> <img class="icon" src="@/assets/img/apartmentDetail/collect-hollow-black.svg" />
收藏 收藏
</div> </div>
<div v-if="item.status == 1" class="consult flexcenter"> <div v-if="item.status == 1" class="consult flexcenter" @click="modificationContact">
<img class="icon" src="@/assets/img/apartmentDetail/consult-icon.png" /> <img class="icon" src="@/assets/img/apartmentDetail/consult-icon.png" />
咨询 咨询
</div> </div>
@@ -288,7 +282,7 @@
</div> </div>
<!-- 费用说明 --> <!-- 费用说明 -->
<div class="details-item cost" v-if="costList.length > 0"> <div class="details-item cost" v-if="costList.length > 0" ref="costEle">
<div class="details-header flexacenter"> <div class="details-header flexacenter">
<img class="icon" src="@/assets/img/apartmentDetail/cost-icon.png" /> <img class="icon" src="@/assets/img/apartmentDetail/cost-icon.png" />
费用说明 费用说明
@@ -319,7 +313,7 @@
<img class="icon" src="@/assets/img/apartmentDetail/bus-icon.svg" /> <img class="icon" src="@/assets/img/apartmentDetail/bus-icon.svg" />
{{ info.location || "交通" }} {{ info.location || "交通" }}
</div> </div>
<view-map :latlng="{ latitude: info['coordinate'][0], longitude: info['coordinate'][1] }" :name="info['address']"></view-map> <view-map ref="viewMapRef" :latlng="{ latitude: info['coordinate'][0], longitude: info['coordinate'][1] }" :name="info['address']"></view-map>
<template v-if="false"> <template v-if="false">
<el-popover :width="814" trigger="click" popper-style="padding: 0" :show-arrow="false" v-model:visible="showDistance"> <el-popover :width="814" trigger="click" popper-style="padding: 0" :show-arrow="false" v-model:visible="showDistance">
@@ -429,43 +423,46 @@
</div> </div>
<!-- 公寓设施 --> <!-- 公寓设施 -->
<div class="details-item apartment-facilities" v-if="info['facilities']" ref="facilitiesEle"> <div class="details-item apartment-facilities" :class="{ hide: isHideFacilities }" v-if="facilitylist.length > 0" ref="facilitiesEle">
<div class="details-header flexacenter"> <div class="details-header flexacenter">
<img class="icon" src="@/assets/img/apartmentDetail/apartment-facilities.svg" /> <img class="icon" src="@/assets/img/apartmentDetail/apartment-facilities.svg" />
公寓设施 公寓设施
</div> </div>
<div class="facility-box"> <div class="facility-box">
<div class="item" v-for="item in 4"> <div class="item" v-for="(item, index) in facilitylist" :key="index">
<div class="head">公用设施（6）</div> <div class="head">{{ item.name }}（{{ item.label.length }}）</div>
<div class="label flexflex"> <div class="label flexflex">
<div class="label-item flexacenter" v-for="item in 4"> <div class="label-item flexacenter" v-for="(item, index) in item.label" :key="index">
<img class="icon" src="@/assets/img/apartmentDetail/tick-circle-baby-blue.svg" /> <img class="icon" src="@/assets/img/apartmentDetail/tick-circle-baby-blue.svg" />
无线网络 {{ item }}
</div> </div>
</div> </div>
<div class="img-box flexflex"> <div class="img-box flexflex" v-if="item.images.length > 0">
<div class="img-item" v-for="item in 4"> <div class="img-item" v-for="(item, index) in item.images" :key="index" @click="openFacilitiesImg(item.img[0])">
<img class="icon" src="https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-d-JktdHnqqsgFptxhcq_cQnrld6R3X1dHBq_D-81qNDQyOQ~~" /> <img class="icon" :src="item.img[0]" />
<div class="name">洗衣房</div> <div class="name">{{ item.name }}</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="bottom-btn flexcenter"> <div class="bottom-btn flexcenter" v-if="isHideFacilities" @click="openFacilities">
展开全部 展开全部
<img class="icon" src="@/assets/img/publicImage/arrow-black-solid.svg" /> <img class="icon" src="@/assets/img/publicImage/arrow-black-solid.svg" />
</div>
</div> </div>
</div> </div>
<!-- 房源详情 --> <!-- 房源详情 -->
<div class="details-item" v-if="info['message']" ref="messageEle"> <div class="details-item details-message" :class="{ hide: isHideDetails }" v-if="info['message']" ref="messageEle">
<div class="details-header flexacenter"> <div class="details-header flexacenter">
<img class="icon" src="@/assets/img/apartmentDetail/listing-details.png" /> <img class="icon" src="@/assets/img/apartmentDetail/listing-details.png" />
房源详情 房源详情
</div> </div>
<div class="text" v-html="info['message']"></div> <div class="text" v-html="info['message']"></div>
<div class="bottom-btn flexcenter" v-if="isHideDetails" @click="openDetails">
展开全部
<img class="icon" src="@/assets/img/publicImage/arrow-black-solid.svg" />
</div>
</div> </div>
<!-- 公寓设施 --> <!-- 公寓设施 -->
@@ -525,38 +522,14 @@
同品牌其他公寓 同品牌其他公寓
</div> </div>
<div class="same-brand-list" v-if="dualBrandList.length != 0"> <same-brand-item v-for="(item, index) in dualBrandList" :item="item" :key="index"></same-brand-item>
<div class="same-brand-item" v-for="(item, index) in dualBrandList" @click="gobrand(item)" :key="index">
<div class="same-brand-header">
<img class="same-brand-img" v-lazy="item['image']" />
<div class="apartment-name ellipsis">{{ item["title"] }}</div>
<div class="apartment-synopsis ellipsis">{{ item["propaganda"] }}</div>
</div>
<div class="site flexacenter"> <div class="same-brand-title like flexcenter" v-if="likeList.length != 0">
<img class="site-icon" src="@/assets/img/publicImage/location-icon.png" /> <img class="same-brand-icon" src="@/assets/img/apartmentDetail/same-brand-recommendation.png" />
<div class="site-text ellipsis">{{ item["address"] }}</div> 猜你喜欢
</div>
<div class="price-box">
<div class="price-item flexacenter" v-for="(it, i) in item['roomlist']" :key="i">
<div class="room-name ellipsis flex1">{{ it["name"] }}</div>
<div class="flexacenter">
<div class="unit">HK$</div>
<div class="quantity">{{ it["price"] }}</div>
/月
</div>
</div>
</div>
<div class="same-brand-quantity flexcenter">
共
<div class="quantity">{{ item["roomnum"] }}</div>
个房型
<img class="same-brand-quantity-icon" src="@/assets/img/publicImage/black-arrow.svg" />
</div>
</div>
</div> </div>
<same-brand-item v-for="(item, index) in likeList" :item="item" :key="index"></same-brand-item>
</div> </div>
</div> </div>
</div> </div>
@@ -595,11 +568,52 @@
</div> </div>
<footerpage></footerpage> <footerpage></footerpage>
<back-to-top></back-to-top> <back-to-top></back-to-top>
<!-- 选择院校弹窗 -->
<el-dialog v-model="isSelectSchool" width="600" class="selectSchoolPop" :show-close="false">
<div class="title-box dis-f al-item jus-x">
选择院校
<img src="@/assets/img/detail/close.png" class="close-icon" @click="isSelectSchool = false" />
</div>
<div class="site flexacenter" bind:tap="to_map">
<img class="site-img" src="@/assets/img/apartmentDetail/orientation.png" />
<div class="site-text flex1">{{ info.address }}</div>
<div class="btn flexacenter" @click="openMap">
地图
<img class="btn-img" src="@/assets/img/apartmentDetail/arrow-black.svg" />
</div>
</div>
<div class="select-list" ref="selectSchoolRef">
<div class="select-item flexflex" :class="['item' + item.sid, { pitch: distancePitch.sid == item.sid }]" v-for="(item, index) in distanceList" :key="index" @click.stop="selectSchool(item.sid)">
<div class="select-icon flexcenter">
<img class="select-img" src="@/assets/img/apartmentDetail/u1834.png" />
</div>
<div class="select-info flex1">
<div class="select-name">{{ item.name }}</div>
<div class="distance flexacenter">
距离
<div class="abbreviation">{{ item.alias }}</div>
{{ item.distance }}km
</div>
<div class="vehicle flexflex flex1">
<div class="item flexcenter" v-for="(item, index) in item.obj" :key="index">
<img v-if="index == 'walking'" class="vehicle-icon" src="@/assets/img/apartmentDetail/walk-icon.png" />
<img v-else-if="index == 'driving'" class="vehicle-icon" src="@/assets/img/apartmentDetail/taxi-icon.png" />
<img v-else class="vehicle-icon" src="@/assets/img/apartmentDetail/subway-icon.png" />
{{ item }}
</div>
</div>
</div>
<img class="tick" v-if="distancePitch.sid == item.sid" src="@/assets/img/apartmentDetail/tick-circle-red.svg" />
</div>
</div>
</el-dialog>
</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, ElDialog } 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";
@@ -610,6 +624,8 @@ 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 sameBrandItem from "@/components/apartment/sameBrandItem.vue";
import api from "@/utils/api"; import api from "@/utils/api";
import { useRouter, useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router";
@@ -624,7 +640,7 @@ watch(route, () => {
roomList.value = []; roomList.value = [];
carouselsconfig.value = { lives: {}, videos: {}, attachment: {} }; carouselsconfig.value = { lives: {}, videos: {}, attachment: {} };
navList.value = []; navList.value = [];
navTab.value = "roomEle"; navTab.value = "specialEle";
dualBrandList.value = []; dualBrandList.value = [];
contactReservationState.value = false; contactReservationState.value = false;
customerservicelist.value = []; customerservicelist.value = [];
@@ -636,6 +652,12 @@ watch(route, () => {
carouselIndex.value = 0; carouselIndex.value = 0;
allCarouselsData.value = []; allCarouselsData.value = [];
isHideFacilities.value = false;
facilitylist.value = [];
costList.value = [];
isHideDetails.value = false;
// mediaBtnstate.value = {} // mediaBtnstate.value = {}
init(); init();
distanceSchool(); distanceSchool();
@@ -644,7 +666,7 @@ watch(route, () => {
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, calculateDuration, calculateDistance } from "@/utils/util.js";
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const store = useStore(); const store = useStore();
@@ -726,12 +748,20 @@ const facilityKeyName = {
}; };
const facilityArr = ["public", "service", "sport", "outdoor", "security", "room"]; // 公寓设施 顺序 const facilityArr = ["public", "service", "sport", "outdoor", "security", "room"]; // 公寓设施 顺序
let facilitylist = ref([]);
let costList = ref([]); let costList = ref([]);
let pitchScreenSchool = ref(0); // 选择的学校
onMounted(() => { onMounted(() => {
init(); init();
distanceSchool(); distanceSchool();
let value = localStorage.getItem("apartmentPitchValue");
if (value) {
value = JSON.parse(value);
pitchScreenSchool = value.school;
}
}); });
const init = () => { const init = () => {
@@ -772,10 +802,12 @@ const init = () => {
}); });
const facility = data.info.facility; const facility = data.info.facility;
console.log("facility", facility);
if (facility) { if (facility) {
let facilitylist = []; facility["public"][0].images = ["https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5skdX7qqsgFptxhXa6QWi2uePJ5Bg8WFLPIqoYV7MtZCjvF5wr_-kU8uRQ0NDI5", "https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5skfHvqqsgFptxhXa6QWi2uePJ5Bg8WFLPIqoYV7MsIAzvG5Ar_-kU8uRQ0NDI5"];
facility["public"][1].images = ["https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5skdXfqqsgFptxhXa6QWi2uePJ5Bg8WFLPIqoYV7MtdDG6W5Q7_-kU8uRQ0NDI5", "https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5skfXnqqsgFptxhXa6QWi2uePJ5Bg8WFLPIqoYV7MtcA2vF5A7_-kU8uRQ0NDI5"];
let list = [];
facilityArr.forEach((key) => { facilityArr.forEach((key) => {
const target = facility[key]; const target = facility[key];
let label = []; let label = [];
@@ -792,7 +824,7 @@ const init = () => {
} }
if (label.length > 0) { if (label.length > 0) {
facilitylist.push({ list.push({
key, key,
name: facilityKeyName[key], name: facilityKeyName[key],
label, label,
@@ -801,7 +833,7 @@ const init = () => {
} }
}); });
console.log("facilitylist", facilitylist); facilitylist.value = list;
} }
const feedescription = data.info.feedescription; const feedescription = data.info.feedescription;
@@ -815,9 +847,6 @@ const init = () => {
}); });
} }
}); });
console.log("list", list);
costList.value = list; costList.value = list;
} }
@@ -832,12 +861,82 @@ const init = () => {
document.title = data?.info?.title || "港校租房-品牌公寓详情"; document.title = data?.info?.title || "港校租房-品牌公寓详情";
nextTick(() => handleNavData()); nextTick(() => {
handleNavData();
getFacilitiesHeight();
getDetailsHeight();
getLikeList();
getMapDistance();
if (!data.info.promotionalactivities) navTab.value = "inspectEle";
});
if (data.withsameapartments > 0) dualBrandData(); if (data.withsameapartments > 0) dualBrandData();
}); });
}; };
let isHideDetails = ref(false);
// 获取详情的高度
const getDetailsHeight = () => {
let target = messageEle.value;
if (target) {
let height = target.offsetHeight;
if (height > 820) isHideDetails.value = true;
}
};
// 切换 详情 显示
const openDetails = () => {
isHideDetails.value = !isHideDetails.value;
let target = messageEle.value;
let header = target.querySelector(".details-header");
let box = target.querySelector(".text");
if (target) target.style.height = header.offsetHeight + box.offsetHeight + "px";
};
let isHideFacilities = ref(false);
// 获取设施的高度
const getFacilitiesHeight = () => {
let target = facilitiesEle.value;
if (target) {
let height = target.offsetHeight;
if (height > 820) isHideFacilities.value = true;
}
};
// 切换 设施 显示
const openFacilities = () => {
isHideFacilities.value = !isHideFacilities.value;
let target = facilitiesEle.value;
let header = target.querySelector(".details-header");
let box = target.querySelector(".facility-box");
if (target) target.style.height = header.offsetHeight + box.offsetHeight + "px";
};
// 点击打开设施图片预览
const openFacilitiesImg = (current) => {
const list = facilitylist.value || [];
let urls = [];
list.forEach((element) => {
element.images.forEach((ele) => {
ele.img.forEach((imageurl) => {
urls.push({
imageurl,
thumbnail: imageurl,
type: "attachment",
});
});
});
});
const index = urls.findIndex((item) => item.imageurl == current);
cloaseImageShow(urls, index, "facilities");
};
let carouselsconfig = ref({ lives: {}, videos: {}, attachment: {} }); let carouselsconfig = ref({ lives: {}, videos: {}, attachment: {} });
// 处理 轮播图大图的索引 tab // 处理 轮播图大图的索引 tab
@@ -879,34 +978,51 @@ 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 costEle = 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);
const inspectEle = ref(null); // 实地考察 节点
const followEle = ref(null); // 寄托回访 节点
const viewMapRef = ref(null); // 地图组件
let navconfig = [ let navconfig = [
{
name: "房间类型",
value: "roomEle",
},
{ {
name: "优惠活动", name: "优惠活动",
value: "specialEle", value: "specialEle",
}, },
{ {
name: "位置与交通", name: "实地考察",
value: "addressEle", value: "inspectEle",
}, },
{ {
name: "房源详情", name: "寄托回访",
value: "messageEle", value: "followEle",
},
{
name: "房间类型",
value: "roomEle",
},
{
name: "费用说明",
value: "costEle",
},
{
name: "交通",
value: "addressEle",
}, },
{ {
name: "公寓设施", name: "公寓设施",
value: "facilitiesEle", value: "facilitiesEle",
}, },
{ {
name: "生活", name: "房源详情",
value: "messageEle",
},
{
name: "生活配套",
value: "lifeEle", value: "lifeEle",
}, },
{ {
@@ -916,7 +1032,7 @@ let navconfig = [
]; ];
let navList = ref([]); let navList = ref([]);
let navTab = ref("roomEle"); let navTab = ref("specialEle");
// 处理 navList 数据 // 处理 navList 数据
const handleNavData = () => { const handleNavData = () => {
@@ -1041,8 +1157,6 @@ onUnmounted(() => {
window.removeEventListener("scroll", handleScroll); window.removeEventListener("scroll", handleScroll);
}); });
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++) {
@@ -1175,6 +1289,86 @@ const getClass = (index) => {
[`item${index}`]: true, [`item${index}`]: true,
}; };
}; };
let likeList = ref([]); // 猜你喜欢 数据
// 获取猜你喜欢 数据
const getLikeList = () => {
proxy.$get("https://api.gter.net/v1/apartment/lists", { token, guess: 1 }).then((res) => {
if (res.code != 200) return;
let data = res.data;
likeList.value = data.data;
});
};
let isSelectSchool = ref(false); // 选择学校状态
let distancePitch = ref({});
let distanceList = ref([]);
const getMapDistance = () => {
proxy.$get("https://api.gter.net/v1/apartment/mapDistance", { token }).then((res) => {
if (res.code != 200) return;
const data = res.data || [];
const sid = pitchScreenSchool;
const distance = data.distance || [];
distance.sort((a, b) => a.distance - b.distance);
let arr = [];
let pitch = null;
distance.forEach((element) => {
let obj = {};
element.distance = calculateDistance(element.distance);
if (element.walking) obj["walking"] = calculateDuration(element.walking.duration);
if (element.transit) obj["transit"] = calculateDuration(element.transit.duration);
if (element.driving) obj["driving"] = calculateDuration(element.driving.duration);
const target = {
name: element.name,
distance: element.distance,
alias: element.alias,
sid: element.sid,
obj,
};
arr.push(target);
if (element.sid == sid) pitch = target;
});
if (pitch == null) pitch = arr[0];
distanceList.value = arr;
distancePitch.value = pitch;
});
};
const selectSchoolRef = ref(null);
const openSelectSchool = () => {
isSelectSchool.value = true;
nextTick(() => {
const item = selectSchoolRef.value.querySelector(`.item${distancePitch.value.sid}`);
if (!item) return;
selectSchoolRef.value.scrollTo({ top: item.offsetTop - 20, behavior: "smooth" });
});
};
const selectSchool = (sid) => {
let list = distanceList.value;
distancePitch.value = list.find((item) => item.sid == sid);
isSelectSchool.value = false;
// 修改本地存储
let pitchValue = localStorage.getItem("apartmentPitchValue");
if (pitchValue) {
pitchValue = JSON.parse(pitchValue);
pitchValue.school = sid;
localStorage.setItem("apartmentPitchValue", JSON.stringify(pitchValue));
}
};
const openMap = () => {
viewMapRef.value.showPop();
isSelectSchool.value = false;
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@@ -1547,4 +1741,159 @@ const getClass = (index) => {
.el-popper.is-light { .el-popper.is-light {
border-radius: 10px !important; border-radius: 10px !important;
} }
.selectSchoolPop {
border-radius: 16px;
overflow: hidden;
.el-dialog__header {
display: none;
}
.el-dialog__body {
padding: 0;
.title-box {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 25px;
line-height: 26px;
color: #000000;
text-align: center;
padding-top: 25px;
padding-bottom: 16px;
.close-icon {
width: 20px;
height: 20px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
}
.site {
height: 35px;
background-color: rgba(242, 242, 242, 1);
margin: 0 20px 24px;
border-radius: 210px;
padding-left: 10px;
.site-img {
width: 16px;
height: 16px;
margin-right: 6px;
}
.site-text {
font-size: 14px;
color: #000000;
}
.btn {
font-size: 13px;
color: #555555;
padding: 0 10px;
height: 100%;
cursor: pointer;
.btn-img {
width: 6px;
height: 11px;
margin-left: 8px;
}
}
}
.select-list {
max-height: 500px;
overflow: auto;
position: relative;
.select-item {
padding: 10px 15px;
border-top: 1px dotted #d7d7d7;
cursor: pointer;
&.pitch {
background-color: rgba(245, 244, 249, 1);
.select-icon {
background-color: #fddf6d;
}
}
&:last-of-type {
border-radius: 0 0 16px 16px;
}
.select-icon {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #f2f2f2;
align-self: flex-start;
margin-right: 10px;
.select-img {
width: 20px;
height: 20px;
}
}
.select-info {
.select-name {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
}
.distance {
font-size: 14px;
color: #555555;
margin-top: 7px;
.abbreviation {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
color: #000000;
margin: 0 4px;
}
}
.vehicle {
flex-wrap: wrap;
.item {
height: 20px;
line-height: 20px;
background-color: rgba(255, 255, 255, 0);
border: 1px solid rgba(127, 127, 127, 1);
border-radius: 30px;
font-size: 14px;
color: #333333;
width: fit-content;
padding: 0 5px;
margin-top: 5px;
margin-right: 10px;
.vehicle-icon {
width: 16px;
height: 16px;
margin-right: 5px;
}
}
}
}
.tick {
width: 20px;
height: 20px;
align-self: center;
}
}
}
}
}
</style> </style>

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

@@ -36,36 +36,36 @@
</template> </template>
<script setup> <script setup>
import pageTopBar from "../../components/pageTopBar/pageTopBar.vue" import pageTopBar from "../../components/pageTopBar/pageTopBar.vue";
import seachModule from "@/components/apartment/seachModule.vue" import seachModule from "@/components/apartment/seachModule.vue";
import apartmentItem from "@/components/public/apartment-item.vue" import apartmentItem from "@/components/public/apartment-item.vue";
import haveQuestions from "@/components/public/have-questions.vue" import haveQuestions from "@/components/public/have-questions.vue";
import pageFooter from "@/components/footer/footer.vue" import pageFooter from "@/components/footer/footer.vue";
import emptyDuck from "@/components/public/empty-duck.vue" import emptyDuck from "@/components/public/empty-duck.vue";
import circleBtn from "@/components/public/circle-btn.vue" import circleBtn from "@/components/public/circle-btn.vue";
import { ref, onMounted, onUnmounted, watch, getCurrentInstance, nextTick, reactive } from "vue" import { ref, onMounted, onUnmounted, watch, getCurrentInstance, nextTick, reactive } from "vue";
import { ElLoading } from "element-plus" import { ElLoading } from "element-plus";
import Masonry from "masonry-layout" import Masonry from "masonry-layout";
import { useRoute, useRouter } from "vue-router" import { useRoute, useRouter } from "vue-router";
import backToTop from "@/components/public/backToTop.vue" import backToTop from "@/components/public/backToTop.vue";
import store from "../../store/index" import store from "../../store/index";
import api from "../../utils/api" import api from "../../utils/api";
import { ElMessage } from "element-plus" import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance();
const route = useRoute() const route = useRoute();
const props = defineProps({ const props = defineProps({
item: Object, item: Object,
}) });
const gridContainer = ref(null) const gridContainer = ref(null);
let list = ref([]) let list = ref([]);
let listCount = ref(0) // 列表数量 let listCount = ref(0); // 列表数量
let masonryInstance = null let masonryInstance = null;
// let masonryInstanceMore = null // let masonryInstanceMore = null
onMounted(() => { onMounted(() => {
@@ -73,59 +73,65 @@ onMounted(() => {
masonryInstance = new Masonry(gridContainer.value, { masonryInstance = new Masonry(gridContainer.value, {
itemSelector: ".item", itemSelector: ".item",
gutter: 22, gutter: 22,
}) });
// masonryInstanceMore = new Masonry(moreShowList.value, { // masonryInstanceMore = new Masonry(moreShowList.value, {
// itemSelector: ".item", // itemSelector: ".item",
// gutter: 20, // gutter: 20,
// }) // })
pitchValue.value = store.state.apartmentPitchValue // pitchValue.value = store.getters.getApartmentPitchValue
if (route.query["companyid"]) pitchValue.value["companyid"] = route.query["companyid"]
const value = localStorage.getItem("apartmentPitchValue");
if (value) pitchValue.value = JSON.parse(value);
if (route.query["companyid"]) pitchValue.value["companyid"] = route.query["companyid"];
// banner() // 获取轮播图数据 // banner() // 获取轮播图数据
getData() // 获取列表数据 getData(); // 获取列表数据
window.addEventListener("scroll", handleScroll) window.addEventListener("scroll", handleScroll);
}) });
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener("scroll", handleScroll) window.removeEventListener("scroll", handleScroll);
window.removeEventListener("scroll", getMoreScroll, true) window.removeEventListener("scroll", getMoreScroll, true);
}) });
let loading = null // 加载 let loading = null; // 加载
let requestLoading = false // 接口加载中 let requestLoading = false; // 接口加载中
let page = 1 let page = 1;
const getData = () => { const getData = () => {
if (page == 0 || requestLoading) return if (page == 0 || requestLoading) return;
loading = ElLoading.service({ loading = ElLoading.service({
lock: true, lock: true,
text: "Loading", text: "Loading",
background: "rgba(0, 0, 0, 0.7)", background: "rgba(0, 0, 0, 0.7)",
}) });
requestLoading = true requestLoading = true;
localStorage.setItem("apartmentPitchValue", JSON.stringify(pitchValue.value));
proxy proxy
.$post("/tenement/pc/api/apartment", { .$post("https://api.gter.net/v1/apartment/lists", {
limit: 10, limit: 10,
page, page,
...pitchValue.value, ...pitchValue.value,
}) })
.then(res => { .then((res) => {
if (res.code != 200) return if (res.code != 200) return;
let data = res.data let data = res.data;
list.value = list.value.concat(data.data || []) list.value = list.value.concat(data.data || []);
page = data.page * data.limit >= data.count ? 0 : page + 1 page = data.page * data.limit >= data.count ? 0 : page + 1;
listCount = data.count listCount = data.count;
nextTick(() => { nextTick(() => {
masonryInstance.reloadItems() masonryInstance.reloadItems();
masonryInstance.layout() masonryInstance.layout();
loading.close() loading.close();
requestLoading = false requestLoading = false;
}) });
// 小于20 代表筛选 数据不够了，需要加载更多的 随便在这里初始化 更多的 瀑布流 HTML // 小于20 代表筛选 数据不够了，需要加载更多的 随便在这里初始化 更多的 瀑布流 HTML
// if (data.data.length < 20 && (pitchValue.value["school"] || pitchValue.value["location"].length != 0)) { // if (data.data.length < 20 && (pitchValue.value["school"] || pitchValue.value["location"].length != 0)) {
@@ -133,18 +139,18 @@ const getData = () => {
// getMoreList() // getMoreList()
// } // }
}) })
.catch(err => { .catch((err) => {
loading.close() loading.close();
requestLoading = false requestLoading = false;
}) });
} };
const handleScroll = () => { const handleScroll = () => {
const scrollHeight = document.documentElement.scrollHeight const scrollHeight = document.documentElement.scrollHeight;
const clientHeight = document.documentElement.clientHeight const clientHeight = document.documentElement.clientHeight;
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop + clientHeight >= scrollHeight - 350) getData() if (scrollTop + clientHeight >= scrollHeight - 350) getData();
} };
let pitchValue = ref({ let pitchValue = ref({
companyid: 0, companyid: 0,
@@ -155,84 +161,85 @@ let pitchValue = ref({
school: 0, school: 0,
roomlistings: 0, roomlistings: 0,
keyword: "", keyword: "",
}) tag: "",
});
// 筛选组件的参数的中转 // 筛选组件的参数的中转
const handleTransfer = data => { const handleTransfer = (data) => {
for (const key in data.value) { for (const key in data.value) {
if (data.value[key] != pitchValue.value[key]) { if (data.value[key] != pitchValue.value[key]) {
pitchValue.value = { ...data.value } pitchValue.value = { ...data.value };
store.state.apartmentPitchValue = pitchValue.value store.state.apartmentPitchValue = pitchValue.value;
page = 1 page = 1;
list.value = [] list.value = [];
getData() getData();
break break;
} }
} }
} };
let moreShowList = ref(null) let moreShowList = ref(null);
let moreState = ref(false) // 更多列表 显示状态 let moreState = ref(false); // 更多列表 显示状态
let morePage = ref(1) let morePage = ref(1);
let moreList = ref([]) let moreList = ref([]);
let moreLoading = ref(false) let moreLoading = ref(false);
// 加载更多数据列表 // 加载更多数据列表
const getMoreList = () => { const getMoreList = () => {
if (morePage.value == 0 || moreLoading.value) return if (morePage.value == 0 || moreLoading.value) return;
moreLoading.value = true moreLoading.value = true;
let postData = { let postData = {
page: morePage.value, page: morePage.value,
...pitchValue.value, ...pitchValue.value,
} };
api.getMoreLists(postData).then(res => { api.getMoreLists(postData).then((res) => {
if (res.code != 200) return if (res.code != 200) return;
const data = res.data const data = res.data;
if (!data.data) return if (!data.data) return;
moreList.value = moreList.value.concat(data.data) moreList.value = moreList.value.concat(data.data);
moreState.value = true moreState.value = true;
if (data.data && data.data.length < data.limit) morePage.value = 0 if (data.data && data.data.length < data.limit) morePage.value = 0;
else { else {
morePage.value++ morePage.value++;
window.addEventListener("scroll", getMoreScroll, true) window.addEventListener("scroll", getMoreScroll, true);
} }
nextTick(() => { nextTick(() => {
masonryInstanceMore.reloadItems() masonryInstanceMore.reloadItems();
masonryInstanceMore.layout() masonryInstanceMore.layout();
moreLoading.value = false moreLoading.value = false;
}) });
}) });
} };
const getMoreScroll = () => { const getMoreScroll = () => {
let body = document.documentElement ? document.documentElement : document.body ? document.body : document.querySelector(".element") let body = document.documentElement ? document.documentElement : document.body ? document.body : document.querySelector(".element");
let scrollTop = body.scrollTop let scrollTop = body.scrollTop;
let clientHeight = body.clientHeight let clientHeight = body.clientHeight;
let offsetHeight = body.offsetHeight let offsetHeight = body.offsetHeight;
if (scrollTop + clientHeight >= offsetHeight - 200 && !moreLoading.value) getMoreList() if (scrollTop + clientHeight >= offsetHeight - 200 && !moreLoading.value) getMoreList();
} };
// 处理列表的点击收藏 // 处理列表的点击收藏
const handlecollect = uniqid => { const handlecollect = (uniqid) => {
let targetIndex = 0 let targetIndex = 0;
let token = "" let token = "";
list.value.forEach((element, index) => { list.value.forEach((element, index) => {
if (element.uniqid == uniqid) { if (element.uniqid == uniqid) {
targetIndex = index targetIndex = index;
token = element.token || "" token = element.token || "";
} }
}) });
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;
list.value[targetIndex]["iscollect"] = data.status list.value[targetIndex]["iscollect"] = data.status;
ElMessage.success(res.message) ElMessage.success(res.message);
}) });
} };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.screen-box { .screen-box {

336
src/views/user.vue
View File

@@ -38,15 +38,15 @@
<template v-if="user['uid'] && user.identity != 0"> <template v-if="user['uid'] && user.identity != 0">
<img class="" src="@/assets/img/publicImage/cut-off-rule.svg" /> <img class="" src="@/assets/img/publicImage/cut-off-rule.svg" />
<div class="operate-item flexcenter identity"> <div class="operate-item flexcenter identity">
<div class="operate-item-shell flexcenter" :class="{ 'intermediary': user.identity == 1, 'personage': user.identity == -1 }"> <div class="operate-item-shell flexcenter" :class="{ intermediary: user.identity == 1, personage: user.identity == -1 }">
<img class="operate-icon" src="@/assets/img/publicImage/intermediary-icon.png" /> <img class="operate-icon" src="@/assets/img/publicImage/intermediary-icon.png" />
</div> </div>
<div class="operate-text">{{ identityObj[user.identity || -1] }}</div> <div class="operate-text">{{ identityObj[user.identity || -1] }}</div>
<div v-if="user.identity == 1" class="btn-qrcode"> <div v-if="user.identity == 1" class="btn-qrcode">
<authentication-info :type="2" style="height: 217px;"></authentication-info> <authentication-info :type="2" style="height: 217px"></authentication-info>
</div> </div>
<div v-else class="btn-qrcode"> <div v-else class="btn-qrcode">
<authentication-info :type="1" style="height: 217px;"></authentication-info> <authentication-info :type="1" style="height: 217px"></authentication-info>
</div> </div>
</div> </div>
</template> </template>
@@ -54,8 +54,8 @@
</div> </div>
<div class="tab-box flexacenter"> <div class="tab-box flexacenter">
<div class="tab-item flexcenter" :class="{ 'pitch': tabState == 'fav' }" @click="cutTab('fav')">我的收藏</div> <div class="tab-item flexcenter" :class="{ pitch: tabState == 'fav' }" @click="cutTab('fav')">我的收藏</div>
<div class="tab-item flexcenter" :class="{ 'pitch': tabState == 'publish' }" @click="cutTab('publish')">我的发布</div> <div class="tab-item flexcenter" :class="{ pitch: tabState == 'publish' }" @click="cutTab('publish')">我的发布</div>
</div> </div>
</div> </div>
@@ -73,6 +73,10 @@
<div class="list wid1200 flexflex" v-show="tabState == 'fav'" ref="gridContainer"> <div class="list wid1200 flexflex" v-show="tabState == 'fav'" ref="gridContainer">
<div class="item" v-for="(item, index) in favData['list']" :key="item.id" @click="goApartmentDetail(item)"> <div class="item" v-for="(item, index) in favData['list']" :key="item.id" @click="goApartmentDetail(item)">
<div v-if="item.collectiontype == 'apartment'" class="apartment-item"> <div v-if="item.collectiontype == 'apartment'" class="apartment-item">
<div class="apartment-top flexacenter">
<img class="icon" src="@/assets/img/publicImage/apartment-icon.png" />
<img class="title" src="@/assets/img/publicImage/apartment-title.png" />
</div>
<div class="apartment-header flexflex"> <div class="apartment-header flexflex">
<img class="apartment-header-img" :src="item.image || item.imageurl" /> <img class="apartment-header-img" :src="item.image || item.imageurl" />
<div class="apartment-header-content flexflex"> <div class="apartment-header-content flexflex">
@@ -125,9 +129,7 @@
<empty-duck></empty-duck> <empty-duck></empty-duck>
</div> </div>
<div class="bottom-tps" v-if="(tabState == 'fav' && favData['list'].length != 0 && favData['page'] == 0) || (tabState == 'publish' && publishData['list'].length != 0 && publishData['page'] == 0)"> <div class="bottom-tps" v-if="(tabState == 'fav' && favData['list'].length != 0 && favData['page'] == 0) || (tabState == 'publish' && publishData['list'].length != 0 && publishData['page'] == 0)">- 到底了 -</div>
- 到底了 -
</div>
<!-- 有疑问 --> <!-- 有疑问 -->
<have-questions></have-questions> <have-questions></have-questions>
@@ -141,271 +143,272 @@
</template> </template>
<script setup> <script setup>
import pageTopBar from "../components/pageTopBar/pageTopBar.vue" import pageTopBar from "../components/pageTopBar/pageTopBar.vue";
import systematicNotificationPop from "@/components/user/systematic-notification-pop.vue" import systematicNotificationPop from "@/components/user/systematic-notification-pop.vue";
import haveQuestions from "@/components/public/have-questions.vue" import haveQuestions from "@/components/public/have-questions.vue";
import pageFooter from "@/components/footer/footer.vue" import pageFooter from "@/components/footer/footer.vue";
import publicListItem from "@/components/public/public-list-item.vue" import publicListItem from "@/components/public/public-list-item.vue";
import emptyDuck from "@/components/public/empty-duck.vue" import emptyDuck from "@/components/public/empty-duck.vue";
import choosingIdentity from "@/components/edit/choosingIdentity.vue" import choosingIdentity from "@/components/edit/choosingIdentity.vue";
import backToTop from "@/components/public/backToTop.vue" import backToTop from "@/components/public/backToTop.vue";
import authenticationInfo from "@/components/seachModule/authenticationInfo.vue" import authenticationInfo from "@/components/seachModule/authenticationInfo.vue";
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, nextTick, pushScopeId } from "vue" import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, nextTick, pushScopeId } from "vue";
import { useRoute, useRouter } from "vue-router" import { useRoute, useRouter } from "vue-router";
import { ElLoading, ElMessage } from "element-plus" import { ElLoading, ElMessage } from "element-plus";
import Masonry from "masonry-layout" import Masonry from "masonry-layout";
import store from "@/store/index" import store from "@/store/index";
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance();
const route = useRoute() const route = useRoute();
let router = useRouter() let router = useRouter();
const gridContainer = ref(null) const gridContainer = ref(null);
const gridContainerpublish = ref(null) const gridContainerpublish = ref(null);
let masonryInstance = null let masonryInstance = null;
let masonryInstancepublish = null let masonryInstancepublish = null;
onMounted(() => { onMounted(() => {
masonryInstance = new Masonry(gridContainer.value, { masonryInstance = new Masonry(gridContainer.value, {
itemSelector: ".item", itemSelector: ".item",
gutter: 20, gutter: 20,
}) });
masonryInstancepublish = new Masonry(gridContainerpublish.value, { masonryInstancepublish = new Masonry(gridContainerpublish.value, {
itemSelector: ".item", itemSelector: ".item",
gutter: 20, gutter: 20,
}) });
init() init();
window.addEventListener("scroll", handleScroll) window.addEventListener("scroll", handleScroll);
}) });
let systematicState = ref(false) // 系统通知 let systematicState = ref(false); // 系统通知
let user = ref({}) let user = ref({});
let count = ref({}) // 发布和收藏的数量 let count = ref({}); // 发布和收藏的数量
let newmessagenum = ref(0) let newmessagenum = ref(0);
let validityidentity = ref("") let validityidentity = ref("");
let tabState = ref("publish") // fav publish let tabState = ref("publish"); // fav publish
const identityObj = { const identityObj = {
1: "中介认证", 1: "中介认证",
"-1": "房源认证", "-1": "房源认证",
} };
// 打开消息提醒 并且 删除未读消息数 // 打开消息提醒 并且 删除未读消息数
const handleOpenMessage = () => { const handleOpenMessage = () => {
systematicState.value = true systematicState.value = true;
newmessagenum.value = 0 newmessagenum.value = 0;
} };
const init = () => { const init = () => {
proxy proxy
.$post("/tenement/pc/api/user") .$post("/tenement/pc/api/user")
.then(res => { .then((res) => {
if (res.code != 200) return if (res.code != 200) return;
let data = res.data let data = res.data;
if (!route.query["tab"]) { if (!route.query["tab"]) {
if (data.count["publish"] > 0) tabState.value = "publish" if (data.count["publish"] > 0) tabState.value = "publish";
else if (data.count["fav"] == 0) tabState.value = "publish" else if (data.count["fav"] == 0) tabState.value = "publish";
else tabState.value = "fav" else tabState.value = "fav";
} else tabState.value = route.query["tab"] } else tabState.value = route.query["tab"];
if (tabState.value == "publish") getPublishData() if (data.user?.uin == 4171117) tabState.value = "fav";
else getFavData()
// tabState.value = "fav" if (tabState.value == "publish") getPublishData();
else getFavData();
// getFavData() // getFavData()
user.value = data.user user.value = data.user;
count.value = data.count count.value = data.count;
newmessagenum.value = data.newmessagenum newmessagenum.value = data.newmessagenum;
store.state.user["messagenum"] = data.newmessagenum store.state.user["messagenum"] = data.newmessagenum;
validityidentity.value = data.validityidentity validityidentity.value = data.validityidentity;
}) })
.finally(() => {}) .finally(() => {});
} };
let loading = ElLoading.service({ let loading = ElLoading.service({
lock: true, lock: true,
text: "Loading", text: "Loading",
background: "rgba(0, 0, 0, 0.7)", background: "rgba(0, 0, 0, 0.7)",
visible: false, visible: false,
}) });
let publishData = ref({ let publishData = ref({
page: 1, page: 1,
list: [], list: [],
}) });
let stat = ref({}) // 我的发布的详细数量 let stat = ref({}); // 我的发布的详细数量
// 获取发布数据 // 获取发布数据
const getPublishData = () => { const getPublishData = () => {
if (publishData.value["page"] == 0 || loading["visible"].value) return if (publishData.value["page"] == 0 || loading["visible"].value) return;
loading = ElLoading.service({ loading = ElLoading.service({
lock: true, lock: true,
text: "Loading", text: "Loading",
background: "rgba(0, 0, 0, 0.7)", background: "rgba(0, 0, 0, 0.7)",
}) });
proxy proxy
.$post("/tenement/pc/api/user/publishList", { .$post("/tenement/pc/api/user/publishList", {
page: publishData.value["page"], page: publishData.value["page"],
}) })
.then(res => { .then((res) => {
if (res.code != 200) return if (res.code != 200) return;
let data = res.data let data = res.data;
// data.data[0]['verifiedstatus'] = 1 // data.data[0]['verifiedstatus'] = 1
stat.value = data["stat"] stat.value = data["stat"];
publishData.value["page"] = data["page"] * data["limit"] >= data["count"] ? 0 : data["page"] + 1 publishData.value["page"] = data["page"] * data["limit"] >= data["count"] ? 0 : data["page"] + 1;
publishData.value["list"] = publishData.value["list"].concat(data["data"] || []) publishData.value["list"] = publishData.value["list"].concat(data["data"] || []);
nextTick(() => { nextTick(() => {
masonryInstancepublish.reloadItems() masonryInstancepublish.reloadItems();
masonryInstancepublish.layout() masonryInstancepublish.layout();
loading.close() loading.close();
}) });
}) })
.finally(() => { .finally(() => {
loading.close() loading.close();
}) });
} };
let favData = ref({ let favData = ref({
page: 1, page: 1,
list: [], list: [],
}) });
// 获取收藏数据 // 获取收藏数据
const getFavData = () => { const getFavData = () => {
if (favData.value["page"] == 0 || loading["visible"].value) return if (favData.value["page"] == 0 || loading["visible"].value) return;
loading = ElLoading.service({ loading = ElLoading.service({
lock: true, lock: true,
text: "Loading", text: "Loading",
background: "rgba(0, 0, 0, 0.7)", background: "rgba(0, 0, 0, 0.7)",
}) });
proxy proxy
// .$post("/tenement/pc/api/user/favList", { // .$post("/tenement/pc/api/user/favList", {
.$post("/tenement/pc/api/user/collectionList", { .$post("/tenement/pc/api/user/collectionList", {
page: favData.value["page"], page: favData.value["page"],
}) })
.then(res => { .then((res) => {
if (res.code != 200) return if (res.code != 200) return;
let data = res.data let data = res.data;
favData.value["page"] = data["page"] * data["limit"] >= data["count"] ? 0 : data["page"] + 1 favData.value["page"] = data["page"] * data["limit"] >= data["count"] ? 0 : data["page"] + 1;
favData.value["list"] = favData.value["list"].concat(data["data"] || []) favData.value["list"] = favData.value["list"].concat(data["data"] || []);
favData.value["limit"] = data["limit"] favData.value["limit"] = data["limit"];
nextTick(() => { nextTick(() => {
masonryInstance.reloadItems() masonryInstance.reloadItems();
masonryInstance.layout() masonryInstance.layout();
loading.close() loading.close();
}) });
}) })
.finally(() => { .finally(() => {
loading.close() loading.close();
}) });
} };
// 切换 tab // 切换 tab
const cutTab = value => { const cutTab = (value) => {
tabState.value = value tabState.value = value;
if (tabState.value == "publish" && publishData.value["list"].length == 0) getPublishData() if (tabState.value == "publish" && publishData.value["list"].length == 0) getPublishData();
else if (tabState.value == "fav" && favData.value["list"].length == 0) getFavData() else if (tabState.value == "fav" && favData.value["list"].length == 0) getFavData();
} };
// 取消收藏 // 取消收藏
let cancelCollection = data => { let cancelCollection = (data) => {
let url = "/tenement/pc/api/user/operation" let url = "/tenement/pc/api/user/operation";
if (data["collectiontype"] == "apartment") url = "/tenement/pc/api/user/apartmentCollection" if (data["collectiontype"] == "apartment") url = "/tenement/pc/api/user/apartmentCollection";
proxy proxy
.$post(url, { .$post(url, {
token: data["token"], token: data["token"],
}) })
.then(res => { .then((res) => {
if (res.code != 200) return if (res.code != 200) return;
favData.value.list.splice(data["index"], 1) favData.value.list.splice(data["index"], 1);
count.value["fav"]-- count.value["fav"]--;
if (favData.value.list.length == 0 && favData.value["page"] != 0) { if (favData.value.list.length == 0 && favData.value["page"] != 0) {
favData.value["page"] = 1 favData.value["page"] = 1;
getFavData() getFavData();
} else refillData(data["index"]) } else refillData(data["index"]);
nextTick(() => { nextTick(() => {
masonryInstance.reloadItems() masonryInstance.reloadItems();
masonryInstance.layout() masonryInstance.layout();
loading.close() loading.close();
}) });
}) });
} };
// 取消输出后重新补充一条数据 // 取消输出后重新补充一条数据
const refillData = index => { const refillData = (index) => {
if (favData.value["page"] == 0 || loading["visible"].value) return if (favData.value["page"] == 0 || loading["visible"].value) return;
const page = favData.value["page"] - 1 const page = favData.value["page"] - 1;
proxy proxy
.$post("/tenement/pc/api/user/favList", { .$post("/tenement/pc/api/user/favList", {
page, page,
limit: favData.value["limit"], limit: favData.value["limit"],
}) })
.then(res => { .then((res) => {
if (res.code != 200) return if (res.code != 200) return;
let data = res.data["data"] || [] let data = res.data["data"] || [];
favData.value["list"].push(data[data.length - 1]) favData.value["list"].push(data[data.length - 1]);
nextTick(() => { nextTick(() => {
masonryInstance.reloadItems() masonryInstance.reloadItems();
masonryInstance.layout() masonryInstance.layout();
}) });
}) });
} };
// 点击下架都修改状态 // 点击下架都修改状态
const undercarriage = (index, status) => { const undercarriage = (index, status) => {
stat.value["listing"]-- stat.value["listing"]--;
stat.value["offshelf"]++ stat.value["offshelf"]++;
publishData.value["list"][index].status = status publishData.value["list"][index].status = status;
nextTick(() => { nextTick(() => {
masonryInstance.reloadItems() masonryInstance.reloadItems();
masonryInstance.layout() masonryInstance.layout();
}) });
} };
// 点击顶上去后改 数据 状态 // 点击顶上去后改 数据 状态
const goUp = index => (publishData.value["list"][index].isding = 1) const goUp = (index) => (publishData.value["list"][index].isding = 1);
// 点击删除 // 点击删除
const handleDelete = (index, status) => { const handleDelete = (index, status) => {
if (status == 0) stat.value["draft"]-- if (status == 0) stat.value["draft"]--;
else if (status == 1) stat.value["listing"]-- else if (status == 1) stat.value["listing"]--;
else stat.value["offshelf"]-- else stat.value["offshelf"]--;
count.value["publish"]-- count.value["publish"]--;
publishData.value["list"].splice(index, 1) publishData.value["list"].splice(index, 1);
nextTick(() => { nextTick(() => {
masonryInstancepublish.reloadItems() masonryInstancepublish.reloadItems();
masonryInstancepublish.layout() masonryInstancepublish.layout();
loading.close() loading.close();
}) });
} };
// 监听滚动到底部 // 监听滚动到底部
const handleScroll = () => { const handleScroll = () => {
if (!user.value["uid"]) return if (!user.value["uid"]) return;
const scrollHeight = document.documentElement.scrollHeight const scrollHeight = document.documentElement.scrollHeight;
const clientHeight = document.documentElement.clientHeight const clientHeight = document.documentElement.clientHeight;
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop + clientHeight >= scrollHeight - 350) { if (scrollTop + clientHeight >= scrollHeight - 350) {
if (tabState.value == "publish") getPublishData() if (tabState.value == "publish") getPublishData();
else getFavData() else getFavData();
} }
} };
// 跳转公寓详情页 // 跳转公寓详情页
const goApartmentDetail = item => router.push(`/apartmentDetail?uniqid=${item.uniqid}`) const goApartmentDetail = (item) => router.push(`/apartmentDetail?uniqid=${item.uniqid}`);
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener("scroll", handleScroll) window.removeEventListener("scroll", handleScroll);
}) });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@@ -682,7 +685,7 @@ onUnmounted(() => {
.apartment-item { .apartment-item {
width: 590px; width: 590px;
height: 360px; height: 360px;
padding: 20px; padding: 0 0 20px;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
border-radius: 16px; border-radius: 16px;
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196); -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
@@ -690,6 +693,25 @@ onUnmounted(() => {
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
margin-bottom: 20px; margin-bottom: 20px;
.apartment-top {
// width: 590px;
height: 32px;
background: linear-gradient(93.1045259092644deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%);
border-radius: 15px 15px 0 0;
padding-left: 11px;
margin-bottom: 23px;
.icon {
width: 18px;
height: 18px;
margin-right: 6px;
}
.title {
width: 77px;
height: 18px;
}
}
.apartment-header { .apartment-header {
margin-bottom: 20px; margin-bottom: 20px;
.apartment-header-img { .apartment-header-img {