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

图片查看更新

Browse Source
This commit is contained in:
luJianJun
2023-07-27 14:21:48 +08:00
parent ad303096ca
commit 25561ff12d
9 changed files with 94 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/biserialListItem/biserialListItem.vue
View File

@@ -182,10 +182,11 @@ let watchInfo = () => {
onMounted(() => { onMounted(() => {
imgRef = getCurrentInstance() imgRef = getCurrentInstance()
let {type}=router.currentRoute.value.query let {type}=router.currentRoute.value.query
console.log(data.data)
if(type){ if(type){
pageType.value=type pageType.value=type
}else{ }else{
pageType.value=routePath.value==='/personHousing'?1:routePath.value==='/intermediaryHousing'?2:routePath.value==='/needHousing'?3:routePath.value==='/seachPage'?4:'' pageType.value=data.data.intermediary===1?2:data.data.intermediary===6?3:1
} }
}) })

87
src/components/detail/imageWatch.vue
View File

@@ -6,10 +6,11 @@
<el-carousel-item v-for="(item, i) in list" :key="i"> <el-carousel-item v-for="(item, i) in list" :key="i">
<div class="dis-f jus-x al-item" v-if="item"> <div class="dis-f jus-x al-item" v-if="item">
<div class="img-box dis-f jus-x" v-if="item.thumbnail"> <div class="img-box dis-f jus-x" v-if="item.thumbnail">
<img :src="item&&item.url || item['imageurl'] || item['image']" class="img" alt=""> <img :src="item && item.url || item['imageurl'] || item['image']" class="img" alt="">
</div> </div>
<div class="img-box dis-f jus-x" style="width:600px" v-if="!item.thumbnail"> <div class="img-box dis-f jus-x" style="width:600px" v-if="!item.thumbnail">
<source :src="item&&item.url || item['videourl']" class="img" style="width:600px" type="video/mp4"> <source :src="item && item.url || item['videourl']" class="img" style="width:600px"
type="video/mp4">
</div> </div>
</div> </div>
</el-carousel-item> </el-carousel-item>
@@ -25,12 +26,13 @@
<div class="list-img-box dis-f al-item jus-x"> <div class="list-img-box dis-f al-item jus-x">
<div v-for="(item, i) in list" :key="i" @click="watchSet(i)" class="pos-r"> <div v-for="(item, i) in list" :key="i" @click="watchSet(i)" class="pos-r">
<div class="voide" :class="{ 'select-box': imageTab === i }" v-if="!item.thumbnail"> <div class="voide" :class="{ 'select-box': imageTab === i }" v-if="!item.thumbnail">
<div class="icon-box dis-f jus-x al-item"> <div class="icon-box dis-f jus-x al-item" :class="{'bor-r-8':imageTab === i}">
<img src="../../assets/img/detail/videoStop.svg" class="icon" alt=""> <img src="../../assets/img/detail/videoStop.svg" class="icon" alt="">
</div> </div>
</div> </div>
<div class="img-box-s dis-f jus-x" :class="[{ 'select-box': imageTab === i },{'voide':!item.thumbnail}]"> <div class="img-box-s dis-f jus-x"
<img :src="item.thumbnail||item.image" alt="" class="img-s"> :class="[{ 'select-box': imageTab === i&&item.thumbnail }, { 'voide-img': !item.thumbnail }]">
<img :src="item.thumbnail || item.image" alt="" class="img-s" style="object-fit: cover;">
</div> </div>
</div> </div>
</div> </div>
@@ -40,7 +42,7 @@
</template> </template>
<script setup> <script setup>
import { reactive, onMounted, ref, defineProps,watchEffect } from 'vue' import { reactive, onMounted, ref, defineProps, watchEffect } from 'vue'
const props = defineProps({ const props = defineProps({
//url:展示图 thumbnail:缩略图 //url:展示图 thumbnail:缩略图
@@ -51,24 +53,24 @@ const props = defineProps({
return [] return []
} }
}, },
close:{ close: {
type:Function type: Function
}, },
show:{ show: {
type:Boolean, type: Boolean,
default:false default: false
} }
}) })
let show=props.show let show = props.show
let list =ref([]) let list = ref([])
let close=props.close let close = props.close
let carousel = ref(null) let carousel = ref(null)
let imageTab = ref(0) let imageTab = ref(0)
//上一张 //上一张
let prev = () => { let prev = () => {
if (imageTab.value === list.value.length-1) return if (imageTab.value === list.value.length - 1) return
imageTab.value++ imageTab.value++
carousel.value.prev() carousel.value.prev()
} }
@@ -81,16 +83,16 @@ let next = () => {
} }
//点击预览图 //点击预览图
let watchSet=(num)=>{ let watchSet = (num) => {
imageTab.value=num imageTab.value = num
carousel.value.setActiveItem(num) carousel.value.setActiveItem(num)
} }
watchEffect(()=>{ watchEffect(() => {
show=props.show show = props.show
list.value= props.list list.value = props.list
if(imageTab.value>0)carousel.value.setActiveItem(imageTab.value) if (imageTab.value > 0) carousel.value.setActiveItem(imageTab.value)
}) })
</script> </script>
<style scoped> <style scoped>
@@ -157,9 +159,10 @@ img {
.mg-t-60 { .mg-t-60 {
margin-top: 60px; margin-top: 60px;
} }
.select-box { .select-box {
border: 1px solid #50e3c2 !important; border: 1px solid #50e3c2 !important;
} }
.watch-box { .watch-box {
width: 100%; width: 100%;
@@ -186,17 +189,29 @@ img {
height: 100px; height: 100px;
.img-box-s { .img-box-s {
height:62px; height: 62px;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 8px; border-radius: 8px;
margin-left: 5px; margin-left: 5px;
cursor: pointer; cursor: pointer;
.img-s{ object-fit: cover;
height:60px;
.img-s {
height: 60px;
border-radius: 8px; border-radius: 8px;
} }
} }
.voide-img {
width: 60px;
height: 60px;
border: 1px solid transparent;
margin-left: 5px;
border-radius: 8px;
cursor: pointer;
overflow: hidden;
}
.voide { .voide {
width: 60px; width: 60px;
height: 60px; height: 60px;
@@ -205,16 +220,19 @@ img {
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
top:0; top: 0;
left:0; left: 0;
.bor-r-8{
border-radius:8px !important;
}
.icon-box { .icon-box {
width: 60px; width: 58px;
height: 60px; height: 58px;
background: inherit; background: inherit;
background-color: rgba(51, 51, 51, 0.733333333333333); background-color: rgba(51, 51, 51, 0.733333333333333);
border: none; border: none;
border-radius: 8px; border-radius: 6px;
.icon { .icon {
width: 18px; width: 18px;
@@ -225,7 +243,7 @@ img {
} }
.img-box { .img-box {
width:1200px; width: 1200px;
height: 600px; height: 600px;
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
@@ -238,6 +256,5 @@ img {
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none; display: none;
} }</style>
</style>

4
src/components/seachPage/input.vue
View File

@@ -215,8 +215,12 @@ let selectPage = (type) => {
seachAllType['searchid'] = setPageKey() seachAllType['searchid'] = setPageKey()
if (type === 'person') { if (type === 'person') {
seachAllType['intermediary'] = 0 seachAllType['intermediary'] = 0
route.currentRoute.value.query.houseingPageType='0'
selectTabBoxInfo.value.routerQuerySet()
} else if (type === 'intermediary') { } else if (type === 'intermediary') {
seachAllType['intermediary'] = 1 seachAllType['intermediary'] = 1
route.currentRoute.value.query.houseingPageType='1'
selectTabBoxInfo.value.routerQuerySet()
} else { } else {
seachAllType['intermediary'] = '' seachAllType['intermediary'] = ''
} }

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

@@ -541,7 +541,7 @@ let setReleaseObj = (item) => {
} }
//其他 //其他
let otherData = reactive([{ title: '认证房源', id: 'isverified' }, { title: '有电梯', id: 'iselevator' }, { title: '有阳台', id: 'issunshinearea' }]) let otherData = ref([{ title: '认证房源', id: 'isverified' }, { title: '有电梯', id: 'iselevator' }, { title: '有阳台', id: 'issunshinearea' }])
let otherCheck = reactive({ list: [] }) let otherCheck = reactive({ list: [] })
//设置其他 //设置其他
@@ -579,9 +579,11 @@ let routerQuerySet = () => {
if (!setRouterQuerySet.value) return if (!setRouterQuerySet.value) return
//路由参数设置 //路由参数设置
if ((routeQuery.data && routeQuery.data.houseingPageType === '1') || (routePath.value === '/intermediaryHousing')) { if ((routeQuery.data && routeQuery.data.houseingPageType === '1') || (routePath.value === '/intermediaryHousing')) {
otherData = reactive([{ title: '认证中介', id: 'isintermediary' }, { title: '有电梯', id: 'iselevator' }, { title: '有阳台', id: 'issunshinearea' }]) otherData.value = [{ title: '认证中介', id: 'isintermediary' }, { title: '有电梯', id: 'iselevator' }, { title: '有阳台', id: 'issunshinearea' }]
} else { } else if((routeQuery.data && routeQuery.data.houseingPageType === '6') || (routePath.value === '/needHousing')){
otherData = reactive([{ title: '认证房源', id: 'isverified' }, { title: '有电梯', id: 'iselevator' }, { title: '有阳台', id: 'issunshinearea' }]) otherData.value = [{ title: '有电梯', id: 'iselevator' }, { title: '有阳台', id: 'issunshinearea' }]
}else{
otherData.value = [{ title: '认证房源', id: 'isverified' }, { title: '有电梯', id: 'iselevator' }, { title: '有阳台', id: 'issunshinearea' }]
} }
if (Object.keys(routeQuery.data).length > 0) { if (Object.keys(routeQuery.data).length > 0) {
if (!routeQuery.data || routeQuery.data && !routeQuery.data.data) return if (!routeQuery.data || routeQuery.data && !routeQuery.data.data) return
@@ -601,7 +603,6 @@ let routerQuerySet = () => {
selectTabCheck.title = areaItem.name selectTabCheck.title = areaItem.name
selectTabCheck.data = list[areaItem.id].data; selectTabCheck.data = list[areaItem.id].data;
selectData.data = seachAreaId(data) selectData.data = seachAreaId(data)
console.log(selectData.data.length)
if (routeQuery.data.types) { if (routeQuery.data.types) {
let types = JSON.parse(routeQuery.data.types) let types = JSON.parse(routeQuery.data.types)
let {data} = types let {data} = types
@@ -631,7 +632,8 @@ watchEffect(() => {
}) })
defineExpose({ defineExpose({
cleanSelect cleanSelect,
routerQuerySet
}) })
</script> </script>
<script> <script>

18
src/views/detail.vue
View File

@@ -311,7 +311,7 @@
</div> </div>
</div> </div>
<!-- --> <!-- -->
<div class="info-box-s" v-if="pageType == 1 || pageType == 2"> <div class="info-box-s" v-if="pageType !=3">
<div class="info dis-f al-item"> <div class="info dis-f al-item">
<div class="title-box"> <div class="title-box">
房屋类型 房屋类型
@@ -413,7 +413,7 @@
</div> </div>
</div> </div>
<!-- --> <!-- -->
<div class="map-box" v-if="pageType == 1 || pageType == 2"> <div class="map-box" v-if="pageType !=3&&housingInfo['data']&&housingInfo['data'].info.longitude">
<div class="dis-f al-item title-box"> <div class="dis-f al-item title-box">
<img src="../assets/img/detail/mapIcon.png" class="img" alt=""> <img src="../assets/img/detail/mapIcon.png" class="img" alt="">
<span class="title">{{ <span class="title">{{
@@ -442,6 +442,7 @@
<span class="title">房源距离院校</span> <span class="title">房源距离院校</span>
<img src="../assets/img/detail/close.png" class="close-icon" @click="showDistance=false" alt=""> <img src="../assets/img/detail/close.png" class="close-icon" @click="showDistance=false" alt="">
</div> </div>
{{ distanceList }}
<div class="distance-info-data dis-f" v-if="distanceList.length > 0"> <div class="distance-info-data dis-f" v-if="distanceList.length > 0">
<div class="dis-f al-item school-info" v-for="(item, index) in distanceList" <div class="dis-f al-item school-info" v-for="(item, index) in distanceList"
:key="index" :class="{ 'mg-t-50': index > 0 }"> :key="index" :class="{ 'mg-t-50': index > 0 }">
@@ -1129,12 +1130,12 @@ let setNavigation = () => {
id:1 id:1
} }
} , } ,
title: `${location[housingInfo['data']['info'].location.substring(0, 1)]}${type[housingInfo['data']['info'].type.substring(0, 1)]}房源` title: ``
} }
if (housingInfo['data']['info'].location.length > 0) if (housingInfo['data']['info'].location.length > 0)
store.state.routeList['fourthIndex'] = { store.state.routeList['fourthIndex'] = {
path: `${store.state.routeList['secondaryIndex'].path}`, path: `${store.state.routeList['secondaryIndex'].path}`,
title: `${location[housingInfo['data']['info'].location]}${type[housingInfo['data']['info'].type]}` title: ``
} }
} }
} }
@@ -1154,7 +1155,7 @@ let getHousingInfo = () => {
housingInfo['data'] = res.data housingInfo['data'] = res.data
setHousingArr() setHousingArr()
setNavigation() setNavigation()
distanceList.value = distanceList.value.concat(housingInfo['data']['info'].pointData) distanceList.value = distanceList.value.concat(housingInfo['data']['info'].pointData||[])
distanceList.value.unshift({ distanceList.value.unshift({
address: true, address: true,
name: housingInfo['data']['info'].address, name: housingInfo['data']['info'].address,
@@ -1334,7 +1335,7 @@ let router = useRouter()
onMounted(() => { onMounted(() => {
let { id, type } = router.currentRoute.value.query let { id, type } = router.currentRoute.value.query
uniqid.value = id uniqid.value = id
pageType.value = type //1个人 2中介 3求房源 4搜索 pageType.value = type //1个人 2中介 3求房源
getHousingInfo() getHousingInfo()
masonryInstance = new Masonry(gridContainer.value, { masonryInstance = new Masonry(gridContainer.value, {
itemSelector: '.waterfall-box', itemSelector: '.waterfall-box',
@@ -2559,7 +2560,6 @@ img {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
.distance-info-box { .distance-info-box {
background: inherit; background: inherit;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
@@ -2572,8 +2572,8 @@ img {
z-index: 666; z-index: 666;
width: 100%; width: 100%;
max-height: 610px; max-height: 610px;
overflow-y: scroll;
transition: all 0.2s linear; transition: all 0.2s linear;
overflow: hidden;
.top-box { .top-box {
height: 70px; height: 70px;
@@ -2616,6 +2616,8 @@ img {
} }
.school-info { .school-info {
height:500px;
overflow-y: scroll;
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif; font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650; font-weight: 650;
font-style: normal; font-style: normal;

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

@@ -104,7 +104,7 @@ let getDataList = (data) => {
let addListData = () => { let addListData = () => {
let num = null 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){ if(dataList.data.length>=20){
loading.value = true loading.value = true
}else{ }else{
loading.value = false loading.value = false

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

@@ -106,7 +106,7 @@ let addListData = () => {
let num = null 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) console.log(dataList.data.length,20,loading.value)
if(dataList.data.length>20){ if(dataList.data.length>=20){
loading.value = true loading.value = true
}else{ }else{
loading.value = false loading.value = false

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

@@ -110,7 +110,7 @@ let getDataList = (data) => {
let addListData = () => { let addListData = () => {
let num = null 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) { if (dataList.data.length >= 20) {
loading.value = true loading.value = true
} else { } else {
loading.value = false loading.value = false

29
src/views/seachIndex.vue
View File

@@ -15,7 +15,8 @@
listId="2"></biserialItem> listId="2"></biserialItem>
</div> </div>
</div> </div>
<div v-show="seachSelectData.data.intermediary === ''&&dataList.data && dataList.data.length > 0" ref="gridContainer"> <div v-show="seachSelectData.data.intermediary === '' && dataList.data && dataList.data.length > 0"
ref="gridContainer">
<apartment-item v-for="item in listApartment" :item="item"></apartment-item> <apartment-item v-for="item in listApartment" :item="item"></apartment-item>
</div> </div>
<div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0"> <div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0">
@@ -23,7 +24,7 @@
</div> </div>
</div> </div>
</div> </div>
<loadMoreText :loadText="loading?'加载中....':'到底了'"></loadMoreText> <loadMoreText :loadText="loading ? '加载中....' : '到底了'"></loadMoreText>
<listBtmPrompt></listBtmPrompt> <listBtmPrompt></listBtmPrompt>
<footerTool></footerTool> <footerTool></footerTool>
</div> </div>
@@ -89,7 +90,7 @@ let getDataList = (data) => {
if (!loading.value) return if (!loading.value) return
let postData = { let postData = {
page: pages.value, page: pages.value,
limit:20, limit: 20,
...data ...data
} }
loading.value = false loading.value = false
@@ -112,8 +113,8 @@ let getDataList = (data) => {
dataList.count = res.data.count dataList.count = res.data.count
dataCount.value = res.data.count dataCount.value = res.data.count
nextTick(() => { nextTick(() => {
if(dataList.data[0])pageList['1'].push(dataList.data[0]) if (dataList.data[0]) pageList['1'].push(dataList.data[0])
if(dataList.data[1])pageList['2'].push(dataList.data[1]) if (dataList.data[1]) pageList['2'].push(dataList.data[1])
}) })
} else { } else {
let data = res.data let data = res.data
@@ -125,7 +126,7 @@ let getDataList = (data) => {
masonryInstance.layout(); masonryInstance.layout();
}) })
} }
inputModuleInfo.value.setListCount(seachSelectData.data,dataList.count) inputModuleInfo.value.setListCount(seachSelectData.data, dataList.count)
} else { } else {
ElMessage({ ElMessage({
@@ -140,10 +141,10 @@ let getDataList = (data) => {
let addListData = () => { let addListData = () => {
let num = null let num = null
// console.log(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 (pageList.tab > (dataList.count > 20 ? dataList.data.length - 2 : dataList.count - 2)) {
if(dataList.data.length>20){ if (dataList.data.length >= 20) {
loading.value = true loading.value = true
}else{ } else {
loading.value = false loading.value = false
} }
return return
@@ -174,7 +175,7 @@ let downLoadMore = () => {
} }
let inputModuleInfo=ref(null) let inputModuleInfo = ref(null)
const gridContainer = ref(null); const gridContainer = ref(null);
//listImg //listImg
onMounted(() => { onMounted(() => {
@@ -183,10 +184,10 @@ onMounted(() => {
gutter: 20 gutter: 20
}); });
routeQuery.data = route.currentRoute.value.query routeQuery.data = route.currentRoute.value.query
if(routeQuery.data.keyword&&routeQuery.data.keyword.replace(/\s/g, "")){ if (routeQuery.data.keyword && routeQuery.data.keyword.replace(/\s/g, "")&&routeQuery.data.houseingPageType!=6) {
inputModuleInfo.value.searchInit(routeQuery.data.keyword)//调用搜索组件的搜索功能 inputModuleInfo.value.searchInit(routeQuery.data.keyword)//调用搜索组件的搜索功能
route.currentRoute.value.query.keyword='' route.currentRoute.value.query.keyword = ''
}else{ } else {
console.log(seachSelectData.data) console.log(seachSelectData.data)
inputModuleInfo.value.checkPageType() inputModuleInfo.value.checkPageType()
// getDataList(seachSelectData.data) // getDataList(seachSelectData.data)