提交

2023-07-20 19:27:46 +08:00
parent 8cc4549dca
commit d5c86e2038
12 changed files with 274 additions and 41 deletions
--- a/src/components/apartment/seachModule.vue
+++ b/src/components/apartment/seachModule.vue
@@ -44,22 +44,38 @@
                                    </div>
                                </div>
                            </el-popover>
-                            <div class="seach-btn dis-f al-item jus-x" @click="seachList">
+                            <div class="seach-btn dis-f al-item jus-x" @click="handleKeyword">
                                <img src="../../assets/homeImage/seachImg.svg" class="img" alt="">
                                搜索
                            </div>
                        </div>

-
                        <div class="tool-btn dis-f jus-x al-item add-btn">
                            <img src="../../assets/homeImage/addBtn.png" class="img" alt="">
                            发布房源
                        </div>

-                        <div class="tool-btn consult-btn flexcenter">
-                            <img class="consult-icon" src="@/assets/img/publicImage/consult-icon.png">
-                            咨询小助手
-                        </div>
+                        <el-popover placement="bottom-end" popper-class="consult-popover flexcenter" :width="300"
+                            trigger="click" :show-arrow="false"
+                            popper-style="background-color:transparent;border: none;box-shadow: none;padding:0;">
+                            <template #reference>
+                                <div class="tool-btn consult-btn flexcenter">
+                                    <img class="consult-icon" src="@/assets/img/publicImage/consult-icon.png">
+                                    咨询小助手
+                                </div>
+                            </template>
+                            <div class="consult-pop flexacenter">
+                                <div class="consult-title flexacenter">欢迎联系 <b>{{ wechat['nickname'] }}</b> 咨询房源</div>
+                                <div class="consult-QRcode flexcenter">
+                                    <img class="consult-QRcode-img" :src="wechat['wechatqrcode']" />
+                                </div>
+                                <div class="consult-hint">微信扫码添加好友</div>
+                                <div class="consult-remark flexacenter">备注：<b>寄托租房</b></div>
+                            </div>
+                            <!-- <img class="QR-code" :src="wechat['wechatqrcode']" alt=""> -->
+                        </el-popover>
+
+
                    </div>

                    <!-- 展示的 展开和隐藏按钮 -->
@@ -151,7 +167,6 @@
                        <div class="quantity flexacenter">
                            共 <b class="b">{{ count }}</b> 个品牌公寓
                        </div>
-
                    </div>
                </div>
            </div>
@@ -160,8 +175,14 @@
 </template>
  
 <script setup>
-import { ref, watchEffect, reactive, defineProps, nextTick } from 'vue';
+import { ref, toRefs, watchEffect, reactive, defineProps, nextTick } from 'vue';
+import { useStore } from 'vuex';
 import store from '../../store/index';
+import { useRouter } from 'vue-router';
+
+const usestore = useStore();
+const { wechat } = toRefs(usestore.state);
+const router = useRouter()

 const props = defineProps({
    count: {
@@ -234,13 +255,17 @@ const rentInput = () => clearingAmountState = false

 // 点击历史搜索和热门推荐
 const handleKeyword = value => {
-    pitchValue.value['keyword'] = value
-    seachList()
+    // pitchValue.value['keyword'] = value
+
+    if (!value) value = pitchValue.value['keyword']
+
+    router.push(`/seachPage?keyword=${value}`)
+    // seachList()
 }

 //搜索数据
 let seachList = () => {
-    if (historyArr.value.indexOf(pitchValue.value['keyword']) == -1) {
+    if (historyArr.value.indexOf(pitchValue.value['keyword'] && pitchValue.value['keyword']) == -1) {
        historyArr.value.unshift(pitchValue.value['keyword'])
        storingHistory()
    }
@@ -661,5 +686,66 @@ const selectOption = (type, value) => {
    }

 }
+
+.el-popover.el-popper.consult-popover {
+    .consult-pop {
+        width: 300px;
+        height: 300px;
+        border-radius: 10px;
+        padding-top: 45px;
+        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+        -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.101960784313725);
+        -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.101960784313725);
+        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.101960784313725);
+        background-color: #fff;
+        flex-direction: column;
+
+        .consult-title {
+            font-size: 15px;
+            color: #555555;
+            margin-bottom: 24px;
+
+            b {
+                color: #000;
+                font-weight: 650;
+                margin: 0 5px;
+            }
+        }
+
+        .consult-QRcode {
+            width: 120px;
+            height: 120px;
+            border-radius: 20px;
+            -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.101960784313725);
+            -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.101960784313725);
+            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.101960784313725);
+            margin-bottom: 20px;
+            background: #fff;
+
+            .consult-QRcode-img {
+                width: 100px;
+                height: 100px;
+            }
+        }
+
+        .consult-hint {
+            margin-bottom: 6px;
+        }
+
+        .consult-hint,
+        .consult-remark {
+            font-size: 13px;
+            color: #555555;
+            line-height: 18px;
+        }
+
+        .consult-remark {
+            b {
+                font-weight: 650;
+                color: #000000;
+            }
+        }
+    }
+}
 </style>
  
--- a/src/components/public/apartment-item.vue
+++ b/src/components/public/apartment-item.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="item flexflex">
+    <div class="item flexflex" @click="goapArtmentDetails">
        <img class="img" :src="item['image']">
        <div class="title">{{ item['title'] }}</div>
        <div class="hint">{{ item['propaganda'] }}</div>
@@ -31,11 +31,16 @@

 <script setup>
 import { ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+const router = useRouter()

 const props = defineProps({
    item: Object,
 });

+const goapArtmentDetails = () => router.push(`/apartmentDetail?uniqid=${props['item'].uniqid}`)
+
 </script>

 <style lang="less" scoped>
@@ -51,6 +56,7 @@ const props = defineProps({
    margin-bottom: 20px;
    position: relative;
    height: fit-content;
+    cursor: pointer;

    .img {
        width: 366px;
--- a/src/components/public/login.vue
+++ b/src/components/public/login.vue
@@ -0,0 +1,126 @@
+<template>
+    <div v-if="store.state.showloginmodal" class="htmlCode flexcenter" v-html="htmlCode" ref="htmlRef"></div>
+</template>
+
+<script setup>
+import { goTologin } from '@/utils/util';
+import { ref, watch, onMounted, getCurrentInstance, nextTick, createApp } from 'vue'
+import store from '@/store/index';
+
+
+console.log("store", store);
+let showLoginModal = ref(false);
+
+watch(() => store.state.showloginmodal, (newValue) => {
+    console.log("newValue", newValue);
+    // store.state.showloginmodal = false
+    if (newValue) init1()
+});
+
+
+store.state.showloginmodal ? init1() : ''
+
+const { proxy } = getCurrentInstance()
+
+let htmlCode = ref("")
+let htmlRef = ref(null)
+
+const init1 = () => {
+
+    if (document.documentElement.clientHeight <= 724) {
+        goTologin()
+        return
+    }
+
+    let url = encodeURIComponent(location.href);
+    proxy.$get(`https://passport.gter.net/login/ajax?inajax=1&referer=${url}`).then(res => {
+        htmlCode.value = res
+        nextTick(() => {
+            executeScripts()
+        })
+    })
+}
+
+
+const aaa = () => {
+    clearInterval(timer1);
+    clearInterval(timer);
+    clearInterval(timee)
+    dragValidationState = false
+    isSuccess = false
+    store.state.showloginmodal = false
+};
+
+const scriptTags = []; // 存储创建的 script 标签
+
+let scripts = ""
+const executeScripts = () => {
+    const closeEleent = htmlRef.value.querySelector("#registerNewApp #app"); // 使用 querySelector 获取元素
+
+    const customElement = document.createElement('div'); // 创建一个真实的 DOM 节点
+    customElement.className = 'qwe'; // 设置节点的类名为 "qwe"
+    customElement.addEventListener('click', aaa); // 绑定事件 "poi"
+    closeEleent.appendChild(customElement); // 将真实的 DOM 节点添加到具有 ref="aa" 的元素中
+
+    scripts = htmlRef.value.querySelectorAll('script');
+
+    scripts.forEach((script, index) => {
+        if (script.src) {
+            // 创建一个新的script标签来加载外部脚本
+            const newScript = document.createElement('script');
+            newScript.src = script.src;
+            newScript.onload = () => {
+                console.log('外部脚本已加载');
+                // 可以在这里使用外部脚本提供的功能
+            };
+            document.body.appendChild(newScript);
+        } else {
+            if (typeof openWin != undefined) {
+                // 创建一个新的script标签并将其中的JavaScript代码执行
+                const newScript = document.createElement('script');
+                newScript.innerHTML = script.innerHTML;
+                newScript.setAttribute('data-name', `script-${index}`); // 为每个 script 标签设置一个名称
+                if (typeof openWin === 'undefined') {
+                    document.body.appendChild(newScript);
+                    scriptTags.push(newScript)
+                } else init()
+            }
+
+        }
+    });
+}
+
+
+</script>
+
+<style lang="less">
+.htmlCode {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1111;
+}
+
+.htmlCode * {
+    box-sizing: content-box;
+}
+
+.htmlCode .register .box,
+.htmlCode .register .box {
+    border-radius: 10px;
+}
+
+.qwe {
+    position: absolute;
+    top: -48px;
+    right: -48px;
+    height: 35px;
+    width: 35px;
+    overflow: hidden;
+    z-index: 1000;
+    cursor: pointer;
+}
+</style>