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-27 14:21:48 +08:00
parent ad303096ca
commit 25561ff12d
9 changed files with 94 additions and 67 deletions
Show Stats 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(() => {
imgRef = getCurrentInstance()
let {type}=router.currentRoute.value.query
console.log(data.data)
if(type){
pageType.value=type
}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">
<div class="dis-f jus-x al-item" v-if="item">
<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 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>
</el-carousel-item>
@ -25,12 +26,13 @@
<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 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="">
</div>
</div>
<div class="img-box-s dis-f jus-x" :class="[{ 'select-box': imageTab === i },{'voide':!item.thumbnail}]">
<img :src="item.thumbnail||item.image" alt="" class="img-s">
<div class="img-box-s dis-f jus-x"
: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>
@ -40,7 +42,7 @@
</template>
<script setup>
import { reactive, onMounted, ref, defineProps,watchEffect } from 'vue'
import { reactive, onMounted, ref, defineProps, watchEffect } from 'vue'
const props = defineProps({
//url:展示图 thumbnail:缩略图
@ -51,24 +53,24 @@ const props = defineProps({
return []
}
},
close:{
type:Function
close: {
type: Function
},
show:{
type:Boolean,
default:false
show: {
type: Boolean,
default: false
}
})
let show=props.show
let list =ref([])
let close=props.close
let show = props.show
let list = ref([])
let close = props.close
let carousel = ref(null)
let imageTab = ref(0)
//上一张
let prev = () => {
if (imageTab.value === list.value.length-1) return
if (imageTab.value === list.value.length - 1) return
imageTab.value++
carousel.value.prev()
}
@ -81,16 +83,16 @@ let next = () => {
}
//点击预览图
let watchSet=(num)=>{
imageTab.value=num
let watchSet = (num) => {
imageTab.value = num
carousel.value.setActiveItem(num)
}
watchEffect(()=>{
show=props.show
list.value= props.list
if(imageTab.value>0)carousel.value.setActiveItem(imageTab.value)
watchEffect(() => {
show = props.show
list.value = props.list
if (imageTab.value > 0) carousel.value.setActiveItem(imageTab.value)
})
</script>
<style scoped>
@ -157,9 +159,10 @@ img {
.mg-t-60 {
margin-top: 60px;
}
.select-box {
border: 1px solid #50e3c2 !important;
}
border: 1px solid #50e3c2 !important;
}
.watch-box {
width: 100%;
@ -186,17 +189,29 @@ img {
height: 100px;
.img-box-s {
height:62px;
height: 62px;
border: 1px solid transparent;
border-radius: 8px;
margin-left: 5px;
cursor: pointer;
.img-s{
height:60px;
object-fit: cover;
.img-s {
height: 60px;
border-radius: 8px;
}
}
.voide-img {
width: 60px;
height: 60px;
border: 1px solid transparent;
margin-left: 5px;
border-radius: 8px;
cursor: pointer;
overflow: hidden;
}
.voide {
width: 60px;
height: 60px;
@ -205,16 +220,19 @@ img {
border-radius: 8px;
cursor: pointer;
position: absolute;
top:0;
left:0;
top: 0;
left: 0;
.bor-r-8{
border-radius:8px !important;
}
.icon-box {
width: 60px;
height: 60px;
width: 58px;
height: 58px;
background: inherit;
background-color: rgba(51, 51, 51, 0.733333333333333);
border: none;
border-radius: 8px;
border-radius: 6px;
.icon {
width: 18px;
@ -225,7 +243,7 @@ img {
}
.img-box {
width:1200px;
width: 1200px;
height: 600px;
border-radius: 10px;
overflow: hidden;
@ -238,6 +256,5 @@ img {
::-webkit-scrollbar {
display: none;
}
</style>
}</style>

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

@ -215,8 +215,12 @@ let selectPage = (type) => {
seachAllType['searchid'] = setPageKey()
if (type === 'person') {
seachAllType['intermediary'] = 0
route.currentRoute.value.query.houseingPageType='0'
selectTabBoxInfo.value.routerQuerySet()
} else if (type === 'intermediary') {
seachAllType['intermediary'] = 1
route.currentRoute.value.query.houseingPageType='1'
selectTabBoxInfo.value.routerQuerySet()
} else {
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: [] })
//设置其他
@ -579,9 +579,11 @@ let routerQuerySet = () => {
if (!setRouterQuerySet.value) return
//路由参数设置
if ((routeQuery.data && routeQuery.data.houseingPageType === '1') || (routePath.value === '/intermediaryHousing')) {
otherData = reactive([{ title: '认证中介', id: 'isintermediary' }, { title: '有电梯', id: 'iselevator' }, { title: '有阳台', id: 'issunshinearea' }])
} else {
otherData = reactive([{ title: '认证房源', id: 'isverified' }, { title: '有电梯', id: 'iselevator' }, { title: '有阳台', id: 'issunshinearea' }])
otherData.value = [{ title: '认证中介', id: 'isintermediary' }, { title: '有电梯', id: 'iselevator' }, { title: '有阳台', id: 'issunshinearea' }]
} else if((routeQuery.data && routeQuery.data.houseingPageType === '6') || (routePath.value === '/needHousing')){
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 (!routeQuery.data || routeQuery.data && !routeQuery.data.data) return
@ -601,7 +603,6 @@ let routerQuerySet = () => {
selectTabCheck.title = areaItem.name
selectTabCheck.data = list[areaItem.id].data;
selectData.data = seachAreaId(data)
console.log(selectData.data.length)
if (routeQuery.data.types) {
let types = JSON.parse(routeQuery.data.types)
let {data} = types
@ -631,7 +632,8 @@ watchEffect(() => {
})
defineExpose({
cleanSelect
cleanSelect,
routerQuerySet
})
</script>
<script>

18
src/views/detail.vue
View File

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

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

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

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

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

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

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

29
src/views/seachIndex.vue
View File

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