XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加咨询右下角组件

Browse Source
This commit is contained in:
A1300399510
2023-07-20 11:56:24 +08:00
parent e625743205
commit 7d2ac77df4
16 changed files with 273 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/apartment/seachModule.vue
View File

@@ -24,7 +24,7 @@
<div class="dis-f al-item pos-r">
<div class="seach-hiosory-box scrollbar" :class="{ 'seach-history-h': historyShow }">
<div class="seach-history-info">
<div>
<div v-if="historyArr.length != 0" style="margin-bottom: 30px;">
<div class="title">历史搜索</div>
<div class="info-box">
<div v-for="(item, i) in historyArr" :key="i" class="btn"
@@ -32,7 +32,7 @@
</div>
</div>
</div>
<div style="margin-top:30px;">
<div>
<div class="title">热门推荐</div>
<div class="info-box">
<div v-for="(item, i) in hotArr.data" :key="i" class="btn"
@@ -516,7 +516,6 @@ const selectOption = (type, value) => {
.option-area {
flex-wrap: wrap;
border-top: 1px solid #ebebeb;
height: 0;
overflow: hidden;
.option-left,

160
src/components/public/circle-btn.vue Normal file
View File

@@ -0,0 +1,160 @@
<template>
<div class="circle-btn flexcenter" @click="circleState = true">
<div class="circle-inside flexcenter">
<img class="circle-bj" src="@/assets/img/publicImage/half-circle-green.svg" />
<img class="circle-icon" src="@/assets/img/publicImage/consult-hollow-out.png" />
<div class="circle-text">咨询</div>
</div>
<div class="circle-pop flexacenter" v-if="circleState">
<img class="close-icon" src="@/assets/img/publicImage/circle-close.png" alt=""
@click.stop="circleState = false">
<img class="circle-bj" src="@/assets/img/publicImage/circle-pop-bj.svg">
<img class="circle-bj-green" src="@/assets/img/publicImage/circle-pop-bj-green.svg">
<div class="circle-title flexacenter">欢迎联系 <b>{{ wechat['nickname'] }}</b> 咨询房源</div>
<div class="circle-QRcode flexcenter">
<img class="circle-QRcode-img" :src="wechat['wechatqrcode']" />
</div>
<div class="circle-hint">微信扫码添加好友</div>
<div class="circle-remark flexacenter">备注：<b>寄托租房</b></div>
</div>
</div>
</template>
<script setup>
import { ref, toRefs } from 'vue'
import { useStore } from 'vuex';
const store = useStore();
const { wechat } = toRefs(store.state);
let circleState = ref(false)
</script>
<style lang="less" scoped>
.circle-btn {
position: fixed;
bottom: 58px;
right: 58px;
width: 60px;
height: 60px;
background-color: #50e3c2;
border-radius: 50%;
cursor: pointer;
z-index: 10000;
.circle-inside {
flex-direction: column;
background-color: #cbf7ed;
width: 50px;
height: 50px;
border-radius: 50%;
position: relative;
z-index: 1;
color: #000;
font-size: 14px;
.circle-bj {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
z-index: -1;
}
.circle-icon {
width: 20px;
height: 17px;
margin-bottom: 2px;
}
}
}
.circle-pop {
position: absolute;
bottom: 65px;
right: 65px;
width: 300px;
height: 300px;
border-radius: 10px;
flex-direction: column;
z-index: 1100;
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);
.close-icon {
position: absolute;
right: 10px;
top: 10px;
width: 16px;
height: 16px;
cursor: pointer;
}
.circle-bj {
position: absolute;
top: -15px;
left: -15px;
width: 341px;
height: 336px;
z-index: -1;
}
.circle-bj-green {
width: 311px;
height: 156px;
position: absolute;
bottom: -7.5px;
left: 0;
z-index: -1;
}
.circle-title {
font-size: 15px;
color: #555555;
margin-bottom: 24px;
b {
color: #000;
font-weight: 650;
margin: 0 5px;
}
}
.circle-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;
.circle-QRcode-img {
width: 100px;
height: 100px;
}
}
.circle-hint {
margin-bottom: 6px;
}
.circle-hint,
.circle-remark {
font-size: 13px;
color: #555555;
line-height: 18px;
}
.circle-remark {
b {
font-weight: 650;
color: #000000;
}
}
}
</style>

2
src/components/public/have-questions.vue
View File

@@ -6,7 +6,7 @@
<template #reference>
<div class="have-questions flexcenter">
<div class="have-questions-text flexacenter">有疑问？来找<img class="smiling"
src="@/assets/img/publicImage/smiling.png">寄托方同学！</div>
src="@/assets/img/publicImage/smiling.png">{{ wechat['nickname'] }}！</div>
<div class="have-questions-btn flexcenter">
<img class="have-questions-icon" src="@/assets/img/publicImage/QR-code.svg" />扫码加微信
</div>

27
src/components/public/public-list-item.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="list-item" ref="list">
<div class="list-item" ref="list" @click="goDetail">
<div class="authentication-box dis-f al-item" v-if="data.verified == 1">
<img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
<img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt="">
@@ -87,14 +87,15 @@
class="tab-img" alt="">
</div>
<div class="publish-footer flexacenter" v-if="ispublish">
<div class="publish-item flexcenter" v-if="stateData.btn >= 0 || stateData.btn == -2" @click="handleDelete">删除
<div class="publish-item flexcenter" v-if="stateData.btn >= 0 || stateData.btn == -2"
@click.stop="handleDelete">删除
</div>
<div class="publish-item flexcenter" v-if="stateData.btn >= 0" @click="goEdit">{{ stateData.btn
<div class="publish-item flexcenter" v-if="stateData.btn >= 0" @click.stop="goEdit">{{ stateData.btn
== 1 ? "编辑上架" : "编辑" }}</div>
<div class="publish-item flexcenter" v-if="stateData.btn == 2" @click="undercarriage">下架</div>
<div class="publish-item flexcenter" v-if="stateData.btn == 2" @click.stop="undercarriage">下架</div>
<div class="publish-item flexcenter go-up"
:class="{ 'go-up': data.isding == 0, 'already-go-up': data.isding == 1 }" v-if="stateData.btn == 2"
@click="goUp">{{
@click.stop="goUp">{{
data.isding == 0 ? '顶上去' : '今天已顶' }}
</div>
<!-- <div class="publish-item flexcenter already-go-up" v-if="stateData.btn == 2 && item.isding == 1"></div> -->
@@ -107,7 +108,7 @@
listData.intermediary[data.intermediary] }}</div>
<img src="../../assets/homeImage/intermediaryTabImg.png" v-else class="intermediary-tab-img" alt="">
</div>
<div class="cancel-collection flexcenter" @click="cancelCollection(data.token)">
<div class="cancel-collection flexcenter" @click.stop="cancelCollection(data.token)">
<img class="icon" src="@/assets/img/publicImage/black-circle-cross.svg">
取消收藏
</div>
@@ -127,9 +128,7 @@ const { proxy } = getCurrentInstance()
const router = useRouter()
let props = defineProps({
item: {
type: Object,
},
item: Object,
index: Number,
ispublish: Boolean,
})
@@ -139,10 +138,6 @@ data = props.item
const emit = defineEmits(['cancelCollection', 'goUp', 'undercarriage'])
// console.log("item", props.item);
//监听路由
const route = useRoute()
let routePath = ref('')
@@ -192,10 +187,10 @@ watch(() => props.item.status, (newValue, oldValue) => {
stateData.value = stateObj[data.status]
})
const cancelCollection = token => {
emit('cancelCollection', { token, index: props['index'] })
}
const cancelCollection = token => emit('cancelCollection', { token, index: props['index'] })
// 点击跳转详情页
const goDetail = () => router.push(`/detail?uniqid=${data.uniqid}`)
// 跳转编辑页面
const goEdit = () => router.push(`/edit?token=${data.token}`)