图片查看更新

2023-07-27 14:21:48 +08:00
parent ad303096ca
commit 25561ff12d
9 changed files with 94 additions and 67 deletions
--- a/src/components/biserialListItem/biserialListItem.vue
+++ b/src/components/biserialListItem/biserialListItem.vue
@@ -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 
    } 
 })

--- a/src/components/detail/imageWatch.vue
+++ b/src/components/detail/imageWatch.vue
@@ -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>
  
--- a/src/components/seachPage/input.vue
+++ b/src/components/seachPage/input.vue
@@ -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'] = ''
    }
--- a/src/components/selectTabBox/selectTabBox.vue
+++ b/src/components/selectTabBox/selectTabBox.vue
@@ -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>