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

个人/中介页面 二维码组件

Browse Source
This commit is contained in:
luJianJun
2023-08-07 17:51:26 +08:00
parent 33c1d6e865
commit 7d0c5331d5
7 changed files with 183 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/components/seachModule/authenticationInfo.vue Normal file
View File

@@ -0,0 +1,126 @@
<template>
<div class="info-box dis-f al-item" :class="{'intermediary-housing-s':path==='/intermediaryHousing'}">
<img src="../../assets/img/detail/authenticationInfoR.svg" v-if="path==='/personHousing'" class="tab-img" alt="">
<img src="../../assets/img/detail/authenticationInfoInte.svg" v-if="path==='/intermediaryHousing'" class="tab-img" alt="">
<div class="dis-f al-item">
<div class="tab-text">
<div class="dis-f al-item" v-for="(item, i) in tabText" :key="i" :class="{ 'mg-t-25': i > 0 }">
<img src="../../assets/img/detail/authenticationInfoTab.svg" class="tab-icon" alt="" v-if="path==='/personHousing'">
<img src="../../assets/img/detail/authenticationInfoInteTab.svg" class="tab-icon" alt="" v-if="path==='/intermediaryHousing'">{{ item }}
</div>
</div>
<div class="mg-l-100">
<div class="qr-code-bg dis-f jus-x al-item">
<img src="https://app.gter.net/tenement/pc/api/qrcode?type=propertyAuth" v-if="path==='/personHousing'" class="qr-code" alt="">
<img src="https://app.gter.net/tenement/pc/api/qrcode?type=middlemanAuth" v-if="path==='/intermediaryHousing'" class="qr-code" alt="">
</div>
<div class="code-text">
微信扫码认证
</div>
</div>
</div>
</div>
</template>
<script setup>
import { } from 'vue'
import { useRouter } from "vue-router";
//路由
let router=useRouter()
let path = router.currentRoute.value.path
let tabText=null
path==='/personHousing'?tabText = ['认证标识', '发布更多房源', '求房源对接']:
path==='/intermediaryHousing'?tabText = ['身份标识', '发布更多房源', '求房源对接']:[]
</script>
<style scoped lang="less">
.dis-f {
display: flex;
}
.jus-x {
justify-content: center;
}
.al-item {
align-items: center;
}
img {
object-fit: contain;
}
.mg-t-25 {
margin-top: 25px;
}
.mg-l-100 {
margin-left: 100px;
}
.intermediary-housing-s{
background: #f1f5f7 !important;
border:1px solid #dbe7ed !important;
}
.info-box {
width: 462px;
height: 217px;
border-radius: 16px;
border: 1px solid #e4e4f6;
background: #f4f3ff;
position: relative;
padding:0 45px;
.tab-icon {
width: 16px;
height: 16px;
margin-right: 8px;
}
.tab-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
color: #333;
}
.qr-code-bg {
width: 120px;
height: 120px;
background: inherit;
background-color: rgba(255, 255, 255, 1);
border: none;
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);
.qr-code {
width: 102px;
height: 102px;
border-radius: 50%;
}
}
.code-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #7F7F7F;
text-align: center;
margin-top:15px;
}
}
.tab-img {
width: 40px;
height: 40px;
position: absolute;
right: -1px;
top: -1px;
}</style>

37
src/components/seachModule/seachModule.vue
View File

@@ -29,7 +29,7 @@
<div class="info-box">
<div v-for="(item, i) in historyArr.data" :key="i" class="btn"
@click="setSeachVal(item)">
{{ item }}
{{ item }} <img src="../../assets/homeImage/closeIcon.svg" @click.stop="deleteSeachVal(i)" class="img" alt="">
</div>
</div>
</div>
@@ -62,8 +62,9 @@
<img src="../../assets/homeImage/authenticationBtnImg.png" class="text-img" alt="">
<img src="../../assets/homeImage/authenticationBtnCode.svg" class="code-img" alt="">
<div class="btn-qrcode">
<img class="bj" src="@/assets/img/publicImage/housing-certification-bj.jpg">
<img class="QR-code" src="https://app.gter.net/tenement/pc/api/qrcode?type=propertyAuth">
<authentication-info></authentication-info>
<!-- <img class="bj" src="@/assets/img/publicImage/housing-certification-bj.jpg">
<img class="QR-code" src="https://app.gter.net/tenement/pc/api/qrcode?type=propertyAuth"> -->
</div>
</div>
<div class=" dis-f jus-x al-item authentication-btn intermediary-btn"
@@ -71,8 +72,9 @@
<img src="../../assets/homeImage/intermediaryText.png" class="text-img" alt="">
<img src="../../assets/homeImage/intermediaryCode.svg" class="code-img" alt="">
<div class="btn-qrcode">
<img class="bj" src="@/assets/img/publicImage/mediation-authentication-bj.jpg">
<img class="QR-code" src="https://app.gter.net/tenement/pc/api/qrcode?type=middlemanAuth">
<authentication-info></authentication-info>
<!-- <img class="bj" src="@/assets/img/publicImage/mediation-authentication-bj.jpg">
<img class="QR-code" src="https://app.gter.net/tenement/pc/api/qrcode?type=middlemanAuth"> -->
</div>
</div>
</div>
@@ -106,6 +108,7 @@ import choosingIdentity from '@/components/edit/choosingIdentity.vue'
import { useRouter } from 'vue-router';
import store from '../../store/index';
import api from "../../utils/api";
import authenticationInfo from './authenticationInfo.vue'
const props = defineProps({
getDataList: {
@@ -223,6 +226,11 @@ let setSeachVal = (item) => {
seachList()
// getDataList(seachAllType)
}
//删除历史记录
let deleteSeachVal=(i)=>{
historyArr.data.splice(i,1)
localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
}
//点击热门地区
let setHotSeach = (item) => {
@@ -390,6 +398,10 @@ defineExpose({
color: #000000;
}
.info-box :hover .img{
display: block;
}
.info-box {
display: flex;
flex-wrap: wrap;
@@ -400,11 +412,24 @@ defineExpose({
color: #555555;
text-align: left;
.img {
width: 8px;
height: 8px;
position: absolute;
top:6px;
right:-8px;
cursor: pointer;
display: none;
}
.btn {
margin: 20px 30px 0 0;
margin: 10px 30px 0 0;
padding: 0 10px 0 0;
cursor: pointer;
word-wrap: break-word;
max-width: 100%;
position: relative;
flex-wrap: wrap;
}
}
}