gter.net/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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/publicImage/circle-close.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

12
src/assets/img/publicImage/circle-pop-bj-green.svg Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="311px" height="156px" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="155.5" y1="0" x2="155.5" y2="166.947368421053" id="LinearGradient1149">
<stop id="Stop1150" stop-color="#50e3c2" stop-opacity="0.498039215686275" offset="0" />
<stop id="Stop1151" stop-color="#ffffff" offset="1" />
</linearGradient>
</defs>
<g transform="matrix(1 0 0 1 0 -150 )">
<path d="M 300 19 L 300 132.825678259056 L 310.325751537483 155.551844692598 L 285.147942993635 150 L 8 150 C 3.51999999999998 150 0 146.48 0 142 L 0 19 C 0 19 65.5521020354423 1.06581348766861 149 1 C 233.551997537432 0.933315733733053 300 19 300 19 Z " fill-rule="nonzero" fill="url(#LinearGradient1149)" stroke="none" transform="matrix(1 0 0 1 0 150 )" />
</g>
</svg>

22
src/assets/img/publicImage/circle-pop-bj.svg Normal file
View File

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="341px" height="336px" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask fill="white" id="clip1146">
<path d="M 300 8 L 300 282.825303133091 L 310.325751537483 305.551844692598 L 285.147942993635 300 L 8 300 C 3.51999999999998 300 0 296.48 0 292 L 0 8 C 0 3.51999999999998 3.51999999999998 0 8 0 L 292 0 C 296.48 0 300 3.51999999999998 300 8 Z " fill-rule="evenodd" />
</mask>
<filter x="-15px" y="-15px" width="341px" height="336px" filterUnits="userSpaceOnUse" id="filter1147">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetInner" />
<feGaussianBlur stdDeviation="7.5" in="shadowOffsetInner" result="shadowGaussian" />
<feComposite in2="shadowGaussian" operator="atop" in="SourceAlpha" result="shadowComposite" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.243137254901961 0 " in="shadowComposite" />
</filter>
<g id="widget1148">
<path d="M 300 8 L 300 282.825303133091 L 310.325751537483 305.551844692598 L 285.147942993635 300 L 8 300 C 3.51999999999998 300 0 296.48 0 292 L 0 8 C 0 3.51999999999998 3.51999999999998 0 8 0 L 292 0 C 296.48 0 300 3.51999999999998 300 8 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" />
<path d="M 300 8 L 300 282.825303133091 L 310.325751537483 305.551844692598 L 285.147942993635 300 L 8 300 C 3.51999999999998 300 0 296.48 0 292 L 0 8 C 0 3.51999999999998 3.51999999999998 0 8 0 L 292 0 C 296.48 0 300 3.51999999999998 300 8 Z " stroke-width="2" stroke="#ebebeb" fill="none" mask="url(#clip1146)" />
</g>
</defs>
<g transform="matrix(1 0 0 1 15 15 )">
<use xlink:href="#widget1148" filter="url(#filter1147)" />
<use xlink:href="#widget1148" />
</g>
</svg>

BIN
src/assets/img/publicImage/consult-hollow-out.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

6
src/assets/img/publicImage/half-circle-green.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -5 -5 )">
<path d="M 30 5 C 43.8071187457698 5 55 16.1928812542302 55 30 C 55 36.708490750192 52.3038607582961 43.1355107787992 47.5177003721064 47.8362040152356 L 30 30 L 12.8592828539676 11.801213894336 C 17.4974236322781 7.43273246360162 23.6285025394262 5 30 5 Z " fill-rule="nonzero" fill="#eefcf9" stroke="none" />
</g>
</svg>

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}`)

7
src/router/index.js
View File

@ -78,6 +78,13 @@ const routes = [
meta: {
title: "品牌公寓"
}
},
{
path: "/apartmentDetail",
component: () => import(/* webpackChunkName: "housing" */ '@/views/apartmentDetail.vue'),
meta: {
title: "品牌公寓详情"
}
}
]

14
src/views/apartmentDetail.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<page-top-bar></page-top-bar>
asgdaskhjdkhsk jkhkhkjhkjhjhjjjjjhjkhh
</template>
<script setup>
import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
const uniqid = "1qfWOLTPbyPH"
</script>
<style lang="less" scoped></style>

42
src/views/housingView/apartment.vue
View File

@ -1,22 +1,24 @@
<template>
<div>
<pageTopBar></pageTopBar>
<!-- 筛选 -->
<div class="screen-box wid1200">
<seach-module @handleTransfer="handleTransfer" :count="listCount"></seach-module>
</div>
<div class="list wid1200 flexflex" ref="gridContainer">
<apartment-item v-if="list.length != 0" v-for="item in list" :item="item"></apartment-item>
</div>
<div v-if="list.length == 0" class="empty-box wid1200 flexcenter">
<empty-duck :hintTextTwo="'建议放宽筛选条件'"></empty-duck>
</div>
<have-questions></have-questions>
<page-footer></page-footer>
<pageTopBar></pageTopBar>
<!-- 筛选 -->
<div class="screen-box wid1200">
<seach-module @handleTransfer="handleTransfer" :count="listCount"></seach-module>
</div>
<div class="list wid1200 flexflex" ref="gridContainer">
<apartment-item v-if="list.length != 0" v-for="item in list" :item="item"></apartment-item>
</div>
<div v-if="list.length == 0" class="empty-box wid1200 flexcenter">
<empty-duck :hintTextTwo="'建议放宽筛选条件'"></empty-duck>
</div>
<have-questions></have-questions>
<page-footer></page-footer>
<!-- 右下角咨询 -->
<circle-btn></circle-btn>
</template>
<script setup>
@ -27,6 +29,7 @@ import apartmentItem from '@/components/public/apartment-item.vue';
import haveQuestions from '@/components/public/have-questions.vue'
import pageFooter from '@/components/footer/footer.vue'
import emptyDuck from '@/components/public/empty-duck.vue'
import circleBtn from '@/components/public/circle-btn.vue'
import { ref, onMounted, onUnmounted, watch, getCurrentInstance, nextTick } from 'vue';
import { ElLoading } from 'element-plus'
import Masonry from 'masonry-layout';
@ -114,9 +117,6 @@ const handleTransfer = (data) => {
list.value = []
getData()
}
// if () {
// }
}
@ -151,4 +151,6 @@ const handleTransfer = (data) => {
justify-content: center;
margin: 0 auto;
}
</style>

5
src/views/housingView/intermediary.vue
View File

@ -21,6 +21,8 @@
</div>
<listBtmPrompt></listBtmPrompt>
</div>
<!-- 右下角咨询 -->
<circle-btn></circle-btn>
</template>
<script setup>
@ -30,6 +32,7 @@ import seachModule from "../../components/seachModule/seachModule.vue";
import biserialItem from '../../components/biserialListItem/biserialListItem.vue'
import listBtmPrompt from "../../components/public/have-questions.vue";
import noList from "../../components/public/empty-duck.vue";
import circleBtn from '@/components/public/circle-btn.vue'
import api from "../../utils/api";
import tool from '../../toolJs/downLoadMore'
@ -66,7 +69,7 @@ let getDataList = (data) => {
loading.value = false
let postData = {
page: pages.value,
intermediary:1,
intermediary: 1,
...data
}
api.getLists(postData).then(res => {

8
src/views/housingView/needHousing.vue
View File

@ -21,6 +21,9 @@
</div>
<listBtmPrompt></listBtmPrompt>
</div>
<!-- 右下角咨询 -->
<circle-btn></circle-btn>
</template>
<script setup>
@ -30,6 +33,7 @@ import seachModule from "../../components/seachModule/seachModule.vue";
import biserialItem from '../../components/biserialListItem/biserialListItem.vue'
import listBtmPrompt from "../../components/public/have-questions.vue";
import noList from "../../components/public/empty-duck.vue";
import circleBtn from '@/components/public/circle-btn.vue'
import api from "../../utils/api";
import tool from '../../toolJs/downLoadMore'
@ -53,7 +57,7 @@ let setSeachSelectData = (data) => {
...data
}
loading.value = true
console.log('seachSelectData',seachSelectData.data)
console.log('seachSelectData', seachSelectData.data)
return
getDataList(seachSelectData.data)
}
@ -72,7 +76,7 @@ let getDataList = (data) => {
loading.value = false
let postData = {
page: pages.value,
intermediary:0,
intermediary: 0,
...data
}
api.getLists(postData).then(res => {

6
src/views/housingView/person.vue
View File

@ -21,6 +21,9 @@
</div>
<listBtmPrompt></listBtmPrompt>
</div>
<!-- 右下角咨询 -->
<circle-btn></circle-btn>
</template>
<script setup>
@ -30,6 +33,7 @@ import seachModule from "../../components/seachModule/seachModule.vue";
import biserialItem from '../../components/biserialListItem/biserialListItem.vue'
import listBtmPrompt from "../../components/public/have-questions.vue";
import noList from "../../components/public/empty-duck.vue";
import circleBtn from '@/components/public/circle-btn.vue'
import api from "../../utils/api";
import tool from '../../toolJs/downLoadMore'
import { useRouter } from 'vue-router'
@ -72,7 +76,7 @@ let getDataList = (data) => {
loading.value = false
let postData = {
page: pages.value,
intermediary:0,
intermediary: 0,
...data
}
api.getLists(postData).then(res => {

7
src/views/user.vue
View File

@ -144,10 +144,7 @@ const identityObj = {
"-1": "房源认证"
}
async function init() {
const init = () => {
proxy.$post("/tenement/v2/api/user").then(res => {
if (res.code != 200) return
let data = res.data
@ -160,8 +157,6 @@ async function init() {
getFavData()
}
// getFavData()
user.value = data.user
count.value = data.count
newmessagenum.value = data.newmessagenum