个人/中介页面 二维码组件
This commit is contained in:
6
src/assets/img/detail/authenticationInfoInte.svg
Normal file
6
src/assets/img/detail/authenticationInfoInte.svg
Normal 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="40px" height="40px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1059 -3502 )">
|
||||
<path d="M 40 16 L 40 40 C 40 17.5999999999999 22.3999999999999 0 0.00208182911637778 0 L 24 0 C 32.96 0 40 7.03999999999996 40 16 Z " fill-rule="nonzero" fill="#4a99c0" stroke="none" transform="matrix(1 0 0 1 1059 3502 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
src/assets/img/detail/authenticationInfoInteTab.svg
Normal file
6
src/assets/img/detail/authenticationInfoInteTab.svg
Normal 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="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -683 -3554 )">
|
||||
<path d="M 13.1875 6.78125 C 13.3125 6.65625 13.375 6.5 13.375 6.3125 C 13.375 6.11805555555556 13.3125 5.95833333333333 13.1875 5.83333333333333 L 12.2395833333333 4.89583333333333 C 12.1076388888889 4.76388888888889 11.9513888888889 4.69791666666667 11.7708333333333 4.69791666666667 C 11.5902777777778 4.69791666666667 11.4340277777778 4.76388888888889 11.3020833333333 4.89583333333333 L 7.05208333333333 9.13541666666667 L 4.69791666666667 6.78125 C 4.56597222222222 6.64930555555556 4.40972222222222 6.58333333333333 4.22916666666667 6.58333333333333 C 4.04861111111111 6.58333333333333 3.89236111111111 6.64930555555556 3.76041666666667 6.78125 L 2.8125 7.71875 C 2.6875 7.84375 2.625 8.00347222222222 2.625 8.19791666666667 C 2.625 8.38541666666667 2.6875 8.54166666666667 2.8125 8.66666666666667 L 6.58333333333333 12.4375 C 6.71527777777778 12.5694444444444 6.87152777777778 12.6354166666667 7.05208333333333 12.6354166666667 C 7.23958333333333 12.6354166666667 7.39930555555556 12.5694444444444 7.53125 12.4375 L 13.1875 6.78125 Z M 14.9270833333333 3.984375 C 15.6423611111111 5.21006944444444 16 6.54861111111111 16 8 C 16 9.45138888888889 15.6423611111111 10.7899305555556 14.9270833333333 12.015625 C 14.2118055555556 13.2413194444444 13.2413194444444 14.2118055555556 12.015625 14.9270833333333 C 10.7899305555556 15.6423611111111 9.45138888888889 16 8 16 C 6.54861111111111 16 5.21006944444444 15.6423611111111 3.984375 14.9270833333333 C 2.75868055555556 14.2118055555556 1.78819444444444 13.2413194444444 1.07291666666667 12.015625 C 0.357638888888889 10.7899305555556 0 9.45138888888889 0 8 C 0 6.54861111111111 0.357638888888889 5.21006944444444 1.07291666666667 3.984375 C 1.78819444444444 2.75868055555556 2.75868055555556 1.78819444444444 3.984375 1.07291666666667 C 5.21006944444444 0.357638888888888 6.54861111111111 0 8 0 C 9.45138888888889 0 10.7899305555556 0.357638888888888 12.015625 1.07291666666667 C 13.2413194444444 1.78819444444444 14.2118055555556 2.75868055555556 14.9270833333333 3.984375 Z " fill-rule="nonzero" fill="#4a99c0" stroke="none" transform="matrix(1 0 0 1 683 3554 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
src/assets/img/detail/authenticationInfoR.svg
Normal file
6
src/assets/img/detail/authenticationInfoR.svg
Normal 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="40px" height="40px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1030 -6917 )">
|
||||
<path d="M 40 16 L 40 40 C 40 17.5999999999999 22.3999999999999 0 0.00208182911637778 0 L 24 0 C 32.96 0 40 7.03999999999996 40 16 Z " fill-rule="nonzero" fill="#8685f7" stroke="none" transform="matrix(1 0 0 1 1030 6917 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
src/assets/img/detail/authenticationInfoTab.svg
Normal file
6
src/assets/img/detail/authenticationInfoTab.svg
Normal 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="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -654 -6969 )">
|
||||
<path d="M 13.1875 6.78125 C 13.3125 6.65625 13.375 6.5 13.375 6.3125 C 13.375 6.11805555555556 13.3125 5.95833333333333 13.1875 5.83333333333333 L 12.2395833333333 4.89583333333333 C 12.1076388888889 4.76388888888889 11.9513888888889 4.69791666666667 11.7708333333333 4.69791666666667 C 11.5902777777778 4.69791666666667 11.4340277777778 4.76388888888889 11.3020833333333 4.89583333333333 L 7.05208333333333 9.13541666666667 L 4.69791666666667 6.78125 C 4.56597222222222 6.64930555555556 4.40972222222222 6.58333333333333 4.22916666666667 6.58333333333333 C 4.04861111111111 6.58333333333333 3.89236111111111 6.64930555555556 3.76041666666667 6.78125 L 2.8125 7.71875 C 2.6875 7.84375 2.625 8.00347222222222 2.625 8.19791666666667 C 2.625 8.38541666666667 2.6875 8.54166666666667 2.8125 8.66666666666667 L 6.58333333333333 12.4375 C 6.71527777777778 12.5694444444444 6.87152777777778 12.6354166666667 7.05208333333333 12.6354166666667 C 7.23958333333333 12.6354166666667 7.39930555555556 12.5694444444444 7.53125 12.4375 L 13.1875 6.78125 Z M 14.9270833333333 3.984375 C 15.6423611111111 5.21006944444444 16 6.54861111111111 16 8 C 16 9.45138888888889 15.6423611111111 10.7899305555556 14.9270833333333 12.015625 C 14.2118055555556 13.2413194444444 13.2413194444444 14.2118055555556 12.015625 14.9270833333333 C 10.7899305555556 15.6423611111111 9.45138888888889 16 8 16 C 6.54861111111111 16 5.21006944444444 15.6423611111111 3.984375 14.9270833333333 C 2.75868055555556 14.2118055555556 1.78819444444444 13.2413194444444 1.07291666666667 12.015625 C 0.357638888888889 10.7899305555556 0 9.45138888888889 0 8 C 0 6.54861111111111 0.357638888888889 5.21006944444444 1.07291666666667 3.984375 C 1.78819444444444 2.75868055555556 2.75868055555556 1.78819444444444 3.984375 1.07291666666667 C 5.21006944444444 0.357638888888888 6.54861111111111 0 8 0 C 9.45138888888889 0 10.7899305555556 0.357638888888888 12.015625 1.07291666666667 C 13.2413194444444 1.78819444444444 14.2118055555556 2.75868055555556 14.9270833333333 3.984375 Z " fill-rule="nonzero" fill="#8685f7" stroke="none" transform="matrix(1 0 0 1 654 6969 )" />
|
||||
</g>
|
||||
</svg>
|
||||
126
src/components/seachModule/authenticationInfo.vue
Normal file
126
src/components/seachModule/authenticationInfo.vue
Normal 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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -493,10 +493,10 @@
|
||||
<img src="../assets/img/detail/home.png" class="icon"
|
||||
v-show="item && item.address" alt="">
|
||||
</div>
|
||||
<div style="width:200px">
|
||||
<div :style="{'width':index>0?'200px':'500px'}">
|
||||
{{ item && item.name }}
|
||||
</div>
|
||||
<div class="dis-f" style="flex-wrap: wrap;width:480px">
|
||||
<div class="dis-f" style="flex-wrap: wrap;width:480px" v-if="index!=0">
|
||||
<div v-for="(items, i) in item && item.point" :key="i">
|
||||
<span class="address-info">
|
||||
{{ items.title }}
|
||||
|
||||
Reference in New Issue
Block a user