gter.net/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

详情部分

Browse Source
This commit is contained in:
luJianJun 2023-07-20 19:03:08 +08:00
parent 4adeb65dbd
commit 8cc4549dca
14 changed files with 331 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/detail/collect.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
src/assets/img/detail/collectT.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
src/assets/img/detail/forward.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

180
src/components/detail/breadcrumb.vue Normal file
View File

@ -0,0 +1,180 @@
<template>
<div class="title-top-box">
<div class="breadcrumb-box">
<el-breadcrumb :separator-icon="ArrowRight">
<el-breadcrumb-item v-for="(item, i) in storeData" :key="i" :to="{ path: item.path }">
<span class="breadcrumb-text">
{{ item.title }}
</span>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="dis-f al-item jus-bet title-box">
<div class="detail-title">
房东直租 | 中城浸教公大理公，近地铁，新装修，两房一厅，采光通风好，设备齐全拎包入住
</div>
<div class="tool-btn-box dis-f al-item">
<div class="btn-s dis-f al-item jus-x">
<img src="../../assets/img/detail/collect.png" class="img" alt="">
<img src="../../assets/img/detail/collectT.png" v-show="false" class="img" alt="">
<span class="mg-l-5">
{{'收藏'}}
</span>
</div>
<div class="line">
</div>
<div class="btn-s dis-f al-item jus-x">
<img src="../../assets/img/detail/forward.png" class="img" alt="">
<span class="mg-l-5">
转发
</span>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { reactive, onMounted, ref, defineProps } from 'vue'
import store from '@/store'
defineProps({
data: {
type: Array,
default: function () {
return []
}
}
})
//导航数据
let storeData = store.state.routeList
console.log(storeData)
</script>
<style scoped>
img {
object-fit: contain;
}
.dis-f {
display: flex;
}
.jus-x {
justify-content: center;
}
.al-item {
align-items: center;
}
.pos-r {
position: relative;
}
.body-maxWidth {
width: 1200px;
min-width: 1200px;
}
.s-w-100 {
width: 100%;
}
.jus-bet {
justify-content: space-between;
}
.title-top-box {
width: 1200px;
height: 186px;
background: inherit;
background-color: rgba(255, 255, 255, 1);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(235, 235, 235, 1);
border-radius: 16px;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
font-size: 14px;
transform: translateY(-38px);
.breadcrumb-box {
padding: 20px;
border-bottom: 1px solid #ebebeb;
.breadcrumb-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
color: #AAAAAA;
}
}
.title-box {
padding: 20px 20px 25px 20px;
.detail-title {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 24px;
color: #000000;
line-height: 35px;
width: 820px;
}
.tool-btn-box {
width: 244px;
height: 48px;
background: inherit;
background-color: rgba(246, 246, 246, 1);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(235, 235, 235, 1);
border-radius: 9px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
font-size: 14px;
justify-content: center;
.mg-l-5{
margin-left: 5px;
}
.btn-s {
color: #333333;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
text-align: center;
width:80px;
height:40px;
line-height:40px;
cursor: pointer;
.img{
width:20px;
height:20px;
}
}
.line {
width: 1px;
height: 21px;
background: #d7d7d7;
margin:0 15px;
}
}
}
}
</style>

2
src/components/pageTopBar/pageTopBar.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="top-bg-img-box pos-r" :style="{ 'height': routePath === '/' ? '568px' : '260px' }">
<img src="../../assets/homeImage/indexBg.png" class="bg-img" alt="">
<img src="../../assets/img/edit/bj-img1920.png" class="bg-img" alt="">
<div class="info-box">
<!-- 顶部导航 -->
<div class="dis-f jus-x al-item index-top-navigation-box">

4
src/components/seachModule/seachModule.vue
View File

@ -143,7 +143,7 @@ let getLocationData = (data) => {
const route = useRouter()
let routePath = ref('')
routePath.value = route.currentRoute.value.path
console.log(route)
// console.log(route)
watchEffect(() => {
seachSchoolBtn.data = store.state.seachTypeData[0] ? store.state.seachTypeData[0].where : []
@ -159,7 +159,7 @@ historyArr.data = JSON.parse(localStorage.getItem('historyArr')) || []
//搜索数据
let seachList = (item) => {
console.log(123)
// console.log(123)
let string=seachAllType.keyword
if (!string.replace(/\s/g, "")) return
if (historyArr.data.indexOf(seachAllType.keyword) === -1) {

6
src/components/selectTabBox/selectTabBox.vue
View File

@ -426,6 +426,9 @@ let selectSeach = (data = []) => {
if (data.length === 0 && selectTabCheck.id) {
data.push(selectTabCheck.id)
}
// console.log(selectData,selectTabCheck)
// store.state.routeList['hireTypeObj']=JSON.parse(JSON.stringify(hireTypeObj))
// return
setSeachCondition('location', data)
}
@ -478,6 +481,7 @@ let setHireId = (item) => {
let dropdownCommand = (obj) => {
hireTypeObj.id = obj.id
hireTypeObj.title = obj.title
store.state.routeList['hireTypeObj']=JSON.parse(JSON.stringify(hireTypeObj))
setSeachCondition('types', obj.id)
}
@ -555,7 +559,7 @@ let cleanSelect = () => {
//根据路由设置参数
let setRouterQuerySet = ref(true)
let routerQuerySet = () => {
console.log(setRouterQuerySet.value)
// console.log(setRouterQuerySet.value)
if (!setRouterQuerySet.value) return
//路由参数设置
if (Object.keys(routeQuery.data).length > 0) {

8
src/router/index.js
View File

@ -1,6 +1,7 @@
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import { setSeoTitle } from '@/utils/util.js'
import store from '@/store'
const routes = [
{
@ -97,6 +98,13 @@ const router = createRouter({
router.beforeEach((to, from, next) => {
//导航数据
if(/['seachPage','needHousing','intermediaryHousing','personHousing']/.test(from.path)){
store.state.routeList.secondaryIndex.title=from.meta.title
store.state.routeList.secondaryIndex.path=from.path
}
//
next()
let meta = to['meta'] || {}
let title = meta['title']

11
src/store/index.js
View File

@ -9,7 +9,16 @@ export default createStore({
wechat: {}, // 微信号 二维码等数据
nav: [], // 顶部的导航数据
apartment: {}, // 公寓筛选的字段
routeList:[],//路由列表
routeList:{
index:{
path:'/',
title:'港校租房'
},
secondaryIndex:{
path:'',
title:'',
}
},//导航路由列表
},
getters: {

127
src/views/detail.vue
View File

@ -3,17 +3,55 @@
<pageTopBar></pageTopBar>
<div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35">
<div class="title-top-box">
<div class="breadcrumb-box">
<el-breadcrumb :separator-icon="ArrowRight">
<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
<el-breadcrumb-item>promotion management</el-breadcrumb-item>
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
</el-breadcrumb>
<breadcrumb></breadcrumb>
<div class="dis-f jus-bet" style="transform: translateY(-15px);">
<div class="info-box">
<div class="detail-price-box">
<span class="unit">HK$</span><span class="rent">123456</span><span>/月</span>
</div>
<div class="dis-f al-item detail-condition-box">
<div class="condition condition-border">
<div class="dis-f al-item">
<div class="icon">
</div>
整租
</div>
<div class="type-text">
两房
</div>
</div>
<div class="condition condition-border">
<div class="dis-f al-item">
<div class="icon">
</div>
租期
</div>
<div class="type-text">
一年
</div>
</div>
<div class="condition condition-border">
<div class="dis-f al-item">
<div class="icon">
</div>
起租日期
</div>
<div class="type-text">
随时
</div>
</div>
</div>
<div>
</div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
@ -31,6 +69,7 @@ import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
import circleBtn from '@/components/public/circle-btn.vue'
import api from "../utils/api";
import footerTool from '@/components/footer/footer.vue'
import breadcrumb from '../components/detail/breadcrumb.vue'
@ -69,9 +108,9 @@ img {
justify-content: space-between;
}
.title-top-box {
width: 1200px;
height: 186px;
.info-box {
width: 876px;
height: 1650px;
background: inherit;
background-color: rgba(255, 255, 255, 1);
box-sizing: border-box;
@ -83,10 +122,68 @@ img {
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
font-size: 14px;
transform: translateY(-38px);
padding: 30px 20px;
.breadcrumb-box {
padding: 20px;
.detail-price-box {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-size: 16px;
color: #555555;
.rent {
font-family: 'Arial-Black', 'Arial Black', sans-serif;
font-weight: 900;
font-size: 28px;
color: #F95D5D;
margin: 0 5px;
}
.unit {
font-family: 'Arial-Black', 'Arial Black', sans-serif;
font-weight: 900;
color: #000000;
}
}
.detail-condition-box {
width: 816px;
height: 80px;
background: inherit;
background-color: rgba(246, 246, 246, 1);
border: none;
border-radius: 12px;
margin-top: 30px;
.condition-border {
border-right: 1px solid #ebebeb;
}
.condition {
padding: 15px 0;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
color: #7F7F7F;
width: 272px;
.icon {
border: 6px solid #61b1fc;
border-top: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;
margin-right: 10px;
}
.type-text {
margin-top: 8px;
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-style: normal;
font-size: 17px;
color: #000000;
margin-left: 22px;
}
}
}
}
</style>

2
src/views/housingView/intermediary.vue
View File

@ -101,7 +101,7 @@ let getDataList = (data) => {
//添加数据
let addListData = () => {
let num = null
if (pageList.tab >= (dataList.count>20?dataList.data.length-2:dataList.count-2)) {
if (pageList.tab > (dataList.count>20?dataList.data.length-2:dataList.count-2)) {
if(dataList.data.length>=20){
loading.value = true
}else{

2
src/views/housingView/needHousing.vue
View File

@ -102,7 +102,7 @@ let getDataList = (data) => {
//添加数据
let addListData = () => {
let num = null
if (pageList.tab >= (dataList.count>20?dataList.data.length-2:dataList.count-2)) {
if (pageList.tab > (dataList.count>20?dataList.data.length-2:dataList.count-2)) {
console.log(dataList.data.length,20,loading.value)
if(dataList.data.length>=20){
loading.value = true

10
src/views/housingView/person.vue
View File

@ -2,6 +2,9 @@
<div>
<pageTopBar></pageTopBar>
<seachModule :getDataList="setSeachSelectData"></seachModule>
<div @click="btns">
1
</div>
<div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35">
<div class="dis-f jus-bet" v-show="dataList.data && dataList.data.length > 0">
@ -107,7 +110,7 @@ let getDataList = (data) => {
//添加数据
let addListData = () => {
let num = null
if (pageList.tab >= (dataList.count>20?dataList.data.length-2:dataList.count-2)) {
if (pageList.tab > (dataList.count>20?dataList.data.length-2:dataList.count-2)) {
if(dataList.data.length>=20){
loading.value = true
}else{
@ -139,6 +142,11 @@ let downLoadMore = () => {
getDataList(seachSelectData.data)
})
}
let btns=()=>{
router.push({
path:'/detail'
})
}
//listImg
onMounted(() => {

3
src/views/seachIndex.vue
View File

@ -135,7 +135,8 @@ let getDataList = (data) => {
//添加数据
let addListData = () => {
let num = null
if (pageList.tab >= (dataList.count>20?dataList.data.length-2:dataList.count-2)) {
console.log(pageList.tab , (dataList.count>20?dataList.data.length-2:dataList.count-2))
if (pageList.tab > (dataList.count>20?dataList.data.length-2:dataList.count-2)) {
if(dataList.data.length>=20){
loading.value = true
}else{