合并冲突

src/components/detail/imageWatch.vue

@@ -6,10 +6,10 @@
                     <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" style="width:600px" v-if="item['type'] != 'attachment'">
-                                <video autoplay controls :src="item.url || item['videourl']"></video>
+                                <video autoplay="false" controls :src="item.url || item['videourl']"></video>
                             </div>
                             <div class="img-box dis-f jus-x" v-else>
-                                <img :src="item && item.url || item['imageurl'] || item['image']" class="img" alt="">
+                                <img v-lazy="item && item.url || item['imageurl'] || item['image']" class="img" alt="">
                             </div>
                         </div>
                     </el-carousel-item>
@@ -31,7 +31,7 @@
                     </div>
                     <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;">
+                        <img v-lazy="item.thumbnail || item.image" alt="" class="img-s" style="object-fit: cover;">
                     </div>
                 </div>
             </div>
@@ -61,11 +61,6 @@ const props = defineProps({
     }
 })
 
-setTimeout(() => {
-    console.log("list1111", props.list);
-}, 5000);
-
-
 let show = props.show
 let list = ref([])
 let close = props.close

src/components/public/group-QRcode.vue

@@ -0,0 +1,85 @@
+<template>
+    <div class="QRcode-box group-QRcode flexflex" v-if="true">
+        <img class="group-title" src="@/assets/img/apartmentDetail/group-title.png">
+        <div class="QRcode-case flexcenter">
+            <img class="QRcode-img" :src="wechat['wechatqrcode']" alt="">
+        </div>
+
+        <div class="group-QRcode-hint flexacenter">
+            <img class="scan-icon" src="@/assets/img/apartmentDetail/scan-icon.png">
+            入群请添加
+            <b>方同学的小助手</b>
+            <!-- <b>{{ wechat['nickname'] }}</b> -->
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { toRefs } from 'vue';
+import { useStore } from 'vuex';
+
+const store = useStore();
+
+const { wechat } = toRefs(store.state);
+
+</script>
+
+<style lang="less" scoped>
+.QRcode-box {
+    width: 304px;
+    // height: 304px;
+    background-color: rgba(255, 255, 255, 1);
+    border: 1px solid 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);
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 20px;
+
+    .scan-icon {
+        width: 14px;
+        height: 14px;
+        margin-right: 7px;
+    }
+
+    &.group-QRcode {
+        padding: 40px 0;
+
+        .group-title {
+            width: 140px;
+            height: 26px;
+            margin-bottom: 26px;
+        }
+
+        .QRcode-case {
+            width: 120px;
+            height: 120px;
+            background-color: rgba(255, 255, 255, 1);
+            border-radius: 15px;
+            -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
+            -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
+            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
+            margin-bottom: 28px;
+
+            .QRcode-img {
+                width: 100px;
+                height: 100px;
+            }
+        }
+
+        .group-QRcode-hint {
+            color: #555555;
+            font-size: 14px;
+
+            b {
+                font-size: 14px;
+                color: #000;
+                font-weight: 650;
+                margin-left: 5px;
+            }
+        }
+    }
+}
+</style>

src/components/public/login.vue

@@ -108,7 +108,7 @@ const executeScripts = () => {
 }
 
 
-.htmlCode .registerNewApp {
+.htmlCode #registerNewApp {
     color: #000;
 }
 

src/components/public/phoneQRcode.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="QRcode-box apartment-QRcode flexflex" v-if="true">
+        <img class="mini-program-title" src="@/assets/img/apartmentDetail/mini-program-title.png">
+        <div class="QRcode-case flexcenter">
+            <img class="QRcode-img" :src="props['qrcode']" alt="">
+        </div>
+        <div class="apartment-QRcode-hint flexacenter">
+            <img class="scan-icon" src="@/assets/img/apartmentDetail/scan-icon.png">
+            手机查看该{{ props['type'] == 'apartment' ? '公寓' : '房源' }}
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+    qrcode: String,
+    type: String,
+})
+</script>
+
+<style lang="less" scoped>
+.QRcode-box {
+    width: 304px;
+    background-color: rgba(255, 255, 255, 1);
+    border: 1px solid 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);
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 20px;
+
+    .scan-icon {
+        width: 14px;
+        height: 14px;
+        margin-right: 7px;
+    }
+
+    &.apartment-QRcode {
+        padding: 40px 0;
+
+        .mini-program-title {
+            width: 201px;
+            height: 24px;
+            margin-bottom: 28px;
+        }
+
+        .QRcode-case {
+            width: 130px;
+            height: 130px;
+            background-color: rgba(255, 255, 255, 1);
+            // border-radius: 50%;
+            // overflow: hidden;
+            // -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
+            // -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
+            // box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
+            margin-bottom: 33px;
+
+            .QRcode-img {
+                width: 110px;
+                // height: 110px;
+            }
+        }
+
+        .apartment-QRcode-hint {
+            font-size: 14px;
+            color: #000000;
+        }
+    }
+}
+</style>

src/views/apartmentDetail.vue

@@ -144,12 +144,12 @@
                                 <div class="media-list flexacenter no-scrollbar" :class="`element${index}`">
                                     <div class="media-item flexcenter" v-for="it in item['videos']"
                                         @click="cloaseImageShow([...item['videos'], ...item['images']])">
-                                        <img class="media-img" :src="it['thumbnail']">
+                                        <img class="media-img" v-lazy="it['thumbnail']">
                                         <img class="media-icon" src="@/assets/img/apartmentDetail/media-icon.svg" />
                                     </div>
                                     <div class="media-item flexcenter" v-for="it in item['images']"
                                         @click="cloaseImageShow([...item['videos'], ...item['images']])">
-                                        <img class="media-img" :src="it['thumbnail']">
+                                        <img class="media-img" v-lazy="it['thumbnail']">
                                     </div>
                                 </div>
                                 <div class="media-btn flexcenter" @click="handleMediaBtn('right', index)"
@@ -262,7 +262,9 @@
                 </div>
             </div>
             <div class="details-right flexacenter">
-                <div class="QRcode-box apartment-QRcode flexflex" v-if="true">
+                <phoneqrcode :type="apartment" :qrcode="qrcode"></phoneqrcode>
+                <groupqrcode></groupqrcode>
+                <!-- <div class="QRcode-box apartment-QRcode flexflex" v-if="true">
                     <img class="mini-program-title" src="@/assets/img/apartmentDetail/mini-program-title.png">
                     <div class="QRcode-case flexcenter">
                         <img class="QRcode-img" :src="qrcode" alt="">
@@ -272,8 +274,8 @@
                         <img class="scan-icon" src="@/assets/img/apartmentDetail/scan-icon.png">
                         手机查看该公寓
                     </div>
-                </div>
+                </div> -->
-                <div class="QRcode-box group-QRcode flexflex" v-if="true">
+                <!-- <div class="QRcode-box group-QRcode flexflex" v-if="true">
                     <img class="group-title" src="@/assets/img/apartmentDetail/group-title.png">
                     <div class="QRcode-case flexcenter">
                         <img class="QRcode-img" :src="wechat['wechatqrcode']" alt="">
@@ -283,9 +285,9 @@
                         <img class="scan-icon" src="@/assets/img/apartmentDetail/scan-icon.png">
                         入群请添加
                         <b>方同学的小助手</b>
-                        <!-- <b>{{ wechat['nickname'] }}</b> -->
+                        <b>{{ wechat['nickname'] }}</b>
                     </div>
-                </div>
+                </div> -->
                 <!-- 同品牌公寓 -->
                 <div class="same-brand-title flexcenter" v-if="dualBrandList.length != 0" ref="eleseEle">
                     <img class="same-brand-icon" src="@/assets/img/apartmentDetail/same-brand.png">
@@ -378,6 +380,8 @@ import viewMap from '@/components/public/viewMap.vue'
 import transmitBtn from '@/components/public/transmitBtn.vue'
 import backToTop from '@/components/public/backToTop.vue'
 import imageWatch from '@/components/detail/imageWatch.vue';
+import phoneqrcode from '@/components/public/phoneQRcode.vue';
+import groupqrcode from '@/components/public/group-QRcode.vue';
 
 import { useRouter, useRoute } from 'vue-router'
 let router = useRouter()
@@ -454,7 +458,10 @@ onMounted(() => {
 
 const init = () => {
     proxy.$get("/tenement/pc/api/apartment/details", { uniqid }).then(res => {
-        if (res.code != 200) return
+        if (res.code != 200) {
+            ElMessage.error(res['message'])
+            return
+        }
         let data = res.data
 
         data['roomList'].forEach(element => {
@@ -1388,96 +1395,6 @@ const publicJump = path => router.push(path)
             width: 304px;
             flex-direction: column;
 
-            .QRcode-box {
-                width: 304px;
-                height: 304px;
-                background-color: rgba(255, 255, 255, 1);
-                border: 1px solid 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);
-                flex-direction: column;
-                align-items: center;
-                margin-bottom: 20px;
-
-                .scan-icon {
-                    width: 14px;
-                    height: 14px;
-                    margin-right: 7px;
-                }
-
-                &.apartment-QRcode {
-                    padding: 40px 0;
-
-                    .mini-program-title {
-                        width: 201px;
-                        height: 24px;
-                        margin-bottom: 28px;
-                    }
-
-                    .QRcode-case {
-                        width: 120px;
-                        height: 120px;
-                        background-color: rgba(255, 255, 255, 1);
-                        border-radius: 70px;
-                        -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
-                        -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
-                        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
-                        margin-bottom: 33px;
-
-                        .QRcode-img {
-                            width: 103px;
-                            height: 103px;
-                            border-radius: 70px;
-                        }
-                    }
-
-                    .apartment-QRcode-hint {
-                        font-size: 14px;
-                        color: #000000;
-                    }
-                }
-
-                &.group-QRcode {
-                    padding: 40px 0;
-
-                    .group-title {
-                        width: 140px;
-                        height: 26px;
-                        margin-bottom: 26px;
-                    }
-
-                    .QRcode-case {
-                        width: 120px;
-                        height: 120px;
-                        background-color: rgba(255, 255, 255, 1);
-                        border-radius: 15px;
-                        -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
-                        -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
-                        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
-                        margin-bottom: 28px;
-
-                        .QRcode-img {
-                            width: 100px;
-                            height: 100px;
-                        }
-                    }
-
-                    .group-QRcode-hint {
-                        color: #555555;
-                        font-size: 14px;
-
-                        b {
-                            font-size: 14px;
-                            color: #000;
-                            font-weight: 650;
-                            margin-left: 5px;
-                        }
-                    }
-                }
-            }
-
             .same-brand-title {
                 margin-bottom: 20px;
                 font-size: 18px;

src/views/detail.vue

@@ -675,7 +675,12 @@
                         </div>
                         <el-affix position="top" :offset="0" @change="changeConcatType">
                         </el-affix>
-                        <div class="right-tool-box mg-t-20 dis-f al-item jus-x" style="flex-wrap:wrap;">
+                        <phoneqrcode class="mg-t-20" :type="housing"
+                            :qrcode="housingInfo['data'] && housingInfo['data'].qrcode">
+                        </phoneqrcode>
+                        <groupqrcode></groupqrcode>
+
+                        <!-- <div class="right-tool-box mg-t-20 dis-f al-item jus-x" style="flex-wrap:wrap;">
                             <div class="dis-f jus-x ">
                                 <img src="../assets/img/detail/wxTitle.png" class="wx-title" alt="">
                             </div>
@@ -690,8 +695,8 @@
                                     手机查看该房源
                                 </div>
                             </div>
-                        </div>
+                        </div> -->
-                        <div class="right-tool-box mg-t-20 dis-f al-item jus-x" style="flex-wrap:wrap;">
+                        <!-- <div class="right-tool-box mg-t-20 dis-f al-item jus-x" style="flex-wrap:wrap;">
                             <div class="dis-f jus-x ">
                                 <img src="../assets/img/detail/crowdTitle.png" class="wx-title" alt="">
                             </div>
@@ -707,7 +712,7 @@
                                     <span class="name-text">方同学的小助手</span>
                                 </div>
                             </div>
-                        </div>
+                        </div> -->
                     </div>
                 </div>
             </div>
@@ -980,6 +985,8 @@ import Masonry from 'masonry-layout';
 import transmitBtn from '@/components/public/transmitBtn.vue'
 import biserialItem from '../components/biserialListItem/biserialListItem.vue'
 import backToTop from '@/components/public/backToTop.vue'
+import phoneqrcode from '@/components/public/phoneQRcode.vue';
+import groupqrcode from '@/components/public/group-QRcode.vue';
 
 import store from '@/store';
 
@@ -1158,7 +1165,11 @@ let setNavigation = () => {
                     areaItem: housingInfo['data']['info'].location.substring(0, 1),
                     types: housingInfo['data']['info'].type
                 },
+<<<<<<< HEAD
                 path: `${store.state.routeList['secondaryIndex'].path}`,
+=======
+                path: `${store.state.routeList['secondaryIndex'].path}}/${JSON.stringify({ name: location[housingInfo['data']['info'].location.substring(0, 1)] })}/${JSON.stringify({ type: 'types', data: { name: type[housingInfo['data']['info'].type.substring(0, 3)], id: housingInfo['data']['info'].type } })}`,
+>>>>>>> 2d161e5 (封装组件和修改bug)
                 title: `${location[housingInfo['data']['info'].location]}${type[housingInfo['data']['info'].type]}`
             }
     }else{
@@ -1223,14 +1234,13 @@ let setOperation = () => {
 //获取联系方式
 let concatData = reactive({})
 let getConcatData = () => {
-    showConcat.value = true
-    console.log(concatData['data'])
     if (concatData['data']) return
     api.contactData({
         token: housingInfo['data'].token
     }).then(res => {
         console.log(res)
         if (res.code === 200) {
+            showConcat.value = true
             concatData['data'] = res.data
             let dataCount = 0
             Object.keys(concatData['data']).map(res => {