个人房源详情页

src/components/biserialListItem/biserialListItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="list-item" ref="list">
+    <div class="list-item" ref="list" @click="watchInfo">
         <div class="authentication-box dis-f al-item" v-if="data && data.data && data.data.verified == 1">
             <img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
             <img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt="">
@@ -136,6 +136,17 @@ location.data = store.state.indexData && store.state.indexData.config && store.s
 let listData = reactive({ data: {} })
 listData.data = store.state.indexData && store.state.indexData.config
 
+//跳转
+let router=useRouter()
+let watchInfo = ()=>{
+    router.push({
+        path:'/detail',
+        query:{
+            id:data.data.uniqid
+        }
+    })
+}
+
 onMounted(() => {
     imgRef = getCurrentInstance()
 })

src/components/detail/breadcrumb.vue

@@ -14,11 +14,11 @@
                 {{ data['data']['info']&&data['data']['info'].subject }}
             </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="">
+                <div class="btn-s dis-f al-item jus-x" @click="operation">
+                    <img src="../../assets/img/detail/collect.png" v-show="!data.data.isfav" class="img" alt="">
+                    <img src="../../assets/img/detail/collectT.png" v-show="data.data.isfav" class="img" alt="">
                     <span class="mg-l-5">
-                        {{'收藏'}}
+                        {{data.data.isfav?data['data']['info'].count_fav:'收藏'}}
                     </span>
                 </div>
                 <div class="line">
@@ -46,9 +46,13 @@ const props=defineProps({
         default: function () {
             return {}
         }
+    },
+    operation:{
+        type:Function
     }
 })
 let data=reactive({})
+let operation=props.operation
 
 //导航数据
 let storeData = store.state.routeList

src/components/detail/imageWatch.vue

@@ -5,8 +5,7 @@
                 <el-carousel arrow="never" height="600px" :autoplay="false" indicator-position="none" ref="carousel">
                     <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">
-                                {{ item }}
+                            <div class="img-box dis-f jus-x">
                                 <img :src="item&&item.url" class="img" alt="">
                             </div>
                         </div>
@@ -20,14 +19,16 @@
             {{ `${imageTab + 1}/${list.length}` }}
         </div>
         <div class="dis-f jus-x al-item">
-            <div class="list-img-box dis-f al-item">
+            <div class="list-img-box dis-f al-item jus-x">
                 <div v-for="(item, i) in list" :key="i">
-                    <div class="voide" :class="{ 'select-box': imageTab === i }">
+                    <!-- <div class="voide" :class="{ 'select-box': imageTab === i }">
                         <div class="icon-box dis-f jus-x al-item">
                             <img src="" class="icon" alt="">
                         </div>
+                    </div> -->
+                    <div class="img-box-s dis-f jus-x" :class="{ 'select-box': imageTab === i }">
+                        <img :src="item.thumbnail" alt="" class="img-s">
                     </div>
-                    <!-- <div class="img" :class="{ 'select-box': imageTab === i }"></div> -->
                 </div>
             </div>
         </div>
@@ -39,10 +40,12 @@
 import { reactive, onMounted, ref, defineProps,watchEffect } from 'vue'
 
 const props = defineProps({
+    //url:展示图   thumbnail:缩略图
+    // list:[{url:'',thumbnail:''}]
     list: {
         type: Array,
         default: function () {
-            return [1, 2, 3, 4, 5]
+            return []
         }
     },
     close:{
@@ -55,17 +58,16 @@ const props = defineProps({
 })
 
 let show=props.show
-let list = props.list
+let list =ref([])
 let close=props.close
 
 let carousel = ref(null)
 let imageTab = ref(0)
 //上一张
 let prev = () => {
-    if (imageTab.value === list.length) return
+    if (imageTab.value === list.value.length-1) return
     imageTab.value++
     carousel.value.prev()
-    console.log(imageTab.value)
 }
 
 //下一张
@@ -73,13 +75,13 @@ let next = () => {
     if (imageTab.value <= 0) return
     imageTab.value--
     carousel.value.next()
-    console.log(imageTab.value)
 }
 
 watchEffect(()=>{
     show=props.show
-    list = props.list
-    console.log('url',list)
+    list.value= props.list
+    if(imageTab.value>0)carousel.value.setActiveItem(imageTab.value)
+    
 })
 </script>
 <style scoped>
@@ -122,6 +124,7 @@ img {
     position: absolute;
     right: 20px;
     top: 20px;
+    cursor: pointer;
 }
 
 .right-arrow {
@@ -139,11 +142,15 @@ img {
     width: 18px;
     height: 30px;
     position: absolute;
+    cursor: pointer;
 }
 
 .mg-t-60 {
     margin-top: 60px;
 }
+.select-box {
+            border: 1px solid #50e3c2 !important;
+        }
 
 .watch-box {
     width: 100%;
@@ -166,18 +173,18 @@ img {
 
     .list-img-box {
         overflow-x: scroll;
-        width: 800px;
+        width: 1200px;
         height: 100px;
 
-        .select-box {
-            border: 1px solid #50e3c2;
-        }
-
-        .img {
-            height: 60px;
+        .img-box-s {
+            height:62px;
             border: 1px solid transparent;
-            margin-left: 5px;
             border-radius: 8px;
+            margin-left: 5px;
+            .img-s{
+                height:60px;
+                border-radius: 8px;
+            }
         }
 
         .voide {
@@ -206,7 +213,6 @@ img {
     .img-box {
         width:1200px;
         height: 600px;
-        background: #fff;
         border-radius: 10px;
         overflow: hidden;