选择身份
592
package-lock.json
generated
@ -10,6 +10,7 @@
|
||||
"axios": "^1.4.0",
|
||||
"core-js": "^3.8.3",
|
||||
"element-plus": "^2.3.7",
|
||||
"qs": "^6.11.2",
|
||||
"sass-loader": "^8.0.0",
|
||||
"vue": "^3.2.13",
|
||||
"vue-router": "^4.0.3",
|
||||
|
6
src/assets/img/edit/green-arrow.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 -1968 -804 )">
|
||||
<path d="M 13.1979166666667 8.46875 C 13.3229166666667 8.34375 13.3854166666667 8.1875 13.3854166666667 8 C 13.3854166666667 7.8125 13.3229166666667 7.65625 13.1979166666667 7.53125 L 12.25 6.58333333333333 L 8.47916666666667 2.8125 C 8.35416666666667 2.6875 8.19791666666667 2.625 8.01041666666667 2.625 C 7.82291666666667 2.625 7.66666666666667 2.6875 7.54166666666667 2.8125 L 6.59375 3.76041666666667 C 6.46875 3.88541666666667 6.40625 4.04166666666667 6.40625 4.22916666666667 C 6.40625 4.41666666666667 6.46875 4.57291666666667 6.59375 4.69791666666667 L 8.5625 6.66666666666667 L 3.33333333333333 6.66666666666667 C 3.15277777777778 6.66666666666667 2.99652777777778 6.73263888888889 2.86458333333333 6.86458333333333 C 2.73263888888889 6.99652777777778 2.66666666666667 7.15277777777778 2.66666666666667 7.33333333333333 L 2.66666666666667 8.66666666666667 C 2.66666666666667 8.84722222222222 2.73263888888889 9.00347222222222 2.86458333333333 9.13541666666667 C 2.99652777777778 9.26736111111111 3.15277777777778 9.33333333333333 3.33333333333333 9.33333333333333 L 8.5625 9.33333333333333 L 6.59375 11.3020833333333 C 6.46180555555556 11.4340277777778 6.39583333333333 11.5902777777778 6.39583333333333 11.7708333333333 C 6.39583333333333 11.9513888888889 6.46180555555556 12.1076388888889 6.59375 12.2395833333333 L 7.54166666666667 13.1875 C 7.66666666666667 13.3125 7.82291666666667 13.375 8.01041666666667 13.375 C 8.19791666666667 13.375 8.35416666666667 13.3125 8.47916666666667 13.1875 L 12.25 9.41666666666667 L 13.1979166666667 8.46875 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="#50e3c2" stroke="none" transform="matrix(1 0 0 1 1968 804 )" />
|
||||
</g>
|
||||
</svg>
|
6
src/assets/img/publicImage/QR-code.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 -43 -47 )">
|
||||
<path d="M 2.90909090909091 11.6363636363636 L 4.36363636363636 11.6363636363636 L 4.36363636363636 13.0909090909091 L 2.90909090909091 13.0909090909091 L 2.90909090909091 11.6363636363636 Z M 2.90909090909091 2.90909090909091 L 4.36363636363636 2.90909090909091 L 4.36363636363636 4.36363636363636 L 2.90909090909091 4.36363636363636 L 2.90909090909091 2.90909090909091 Z M 11.6363636363636 2.90909090909091 L 13.0909090909091 2.90909090909091 L 13.0909090909091 4.36363636363636 L 11.6363636363636 4.36363636363636 L 11.6363636363636 2.90909090909091 Z M 1.45454545454545 10.1818181818182 L 1.45454545454545 14.5340909090909 L 5.81818181818182 14.5340909090909 L 5.81818181818182 10.1818181818182 L 1.45454545454545 10.1818181818182 Z M 1.45454545454545 1.45454545454546 L 1.45454545454545 5.81818181818182 L 5.81818181818182 5.81818181818182 L 5.81818181818182 1.45454545454546 L 1.45454545454545 1.45454545454546 Z M 10.1818181818182 1.45454545454546 L 10.1818181818182 5.81818181818182 L 14.5454545454545 5.81818181818182 L 14.5454545454545 1.45454545454546 L 10.1818181818182 1.45454545454546 Z M 0 8.72727272727273 L 7.27272727272727 8.72727272727273 L 7.27272727272727 16 L 0 16 L 0 8.72727272727273 Z M 11.6363636363636 14.5454545454545 L 13.0909090909091 14.5454545454545 L 13.0909090909091 16 L 11.6363636363636 16 L 11.6363636363636 14.5454545454545 Z M 14.5454545454545 14.5454545454545 L 16 14.5454545454545 L 16 16 L 14.5454545454545 16 L 14.5454545454545 14.5454545454545 Z M 14.5454545454545 8.72727272727273 L 16 8.72727272727273 L 16 13.0909090909091 L 11.6363636363636 13.0909090909091 L 11.6363636363636 11.6363636363636 L 10.1818181818182 11.6363636363636 L 10.1818181818182 16 L 8.72727272727273 16 L 8.72727272727273 8.72727272727273 L 13.0909090909091 8.72727272727273 L 13.0909090909091 10.1818181818182 L 14.5454545454545 10.1818181818182 L 14.5454545454545 8.72727272727273 Z M 0 0 L 7.27272727272727 0 L 7.27272727272727 7.27272727272727 L 0 7.27272727272727 L 0 0 Z M 8.72727272727273 0 L 16 0 L 16 7.27272727272727 L 8.72727272727273 7.27272727272727 L 8.72727272727273 0 Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 43 47 )" />
|
||||
</g>
|
||||
</svg>
|
6
src/assets/img/publicImage/add-icon.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 -1309 -57 )">
|
||||
<path d="M 15.6818181818182 6.13636363636364 C 15.8939393939394 6.34848484848485 16 6.60606060606061 16 6.90909090909091 L 16 9.09090909090909 C 16 9.39393939393939 15.8939393939394 9.65151515151515 15.6818181818182 9.86363636363636 C 15.469696969697 10.0757575757576 15.2121212121212 10.1818181818182 14.9090909090909 10.1818181818182 L 10.1818181818182 10.1818181818182 L 10.1818181818182 14.9090909090909 C 10.1818181818182 15.2121212121212 10.0757575757576 15.469696969697 9.86363636363636 15.6818181818182 C 9.65151515151515 15.8939393939394 9.39393939393939 16 9.09090909090909 16 L 6.90909090909091 16 C 6.60606060606061 16 6.34848484848485 15.8939393939394 6.13636363636364 15.6818181818182 C 5.92424242424242 15.469696969697 5.81818181818182 15.2121212121212 5.81818181818182 14.9090909090909 L 5.81818181818182 10.1818181818182 L 1.09090909090909 10.1818181818182 C 0.787878787878788 10.1818181818182 0.53030303030303 10.0757575757576 0.318181818181818 9.86363636363636 C 0.106060606060606 9.65151515151515 0 9.39393939393939 0 9.09090909090909 L 0 6.90909090909091 C 0 6.60606060606061 0.106060606060606 6.34848484848485 0.318181818181818 6.13636363636364 C 0.53030303030303 5.92424242424242 0.787878787878788 5.81818181818182 1.09090909090909 5.81818181818182 L 5.81818181818182 5.81818181818182 L 5.81818181818182 1.09090909090909 C 5.81818181818182 0.787878787878787 5.92424242424242 0.530303030303029 6.13636363636364 0.318181818181818 C 6.34848484848485 0.106060606060606 6.60606060606061 0 6.90909090909091 0 L 9.09090909090909 0 C 9.39393939393939 0 9.65151515151515 0.106060606060606 9.86363636363636 0.318181818181818 C 10.0757575757576 0.530303030303029 10.1818181818182 0.787878787878787 10.1818181818182 1.09090909090909 L 10.1818181818182 5.81818181818182 L 14.9090909090909 5.81818181818182 C 15.2121212121212 5.81818181818182 15.469696969697 5.92424242424242 15.6818181818182 6.13636363636364 Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 1309 57 )" />
|
||||
</g>
|
||||
</svg>
|
Before Width: | Height: | Size: 7.0 KiB After Width: | Height: | Size: 7.0 KiB |
6
src/assets/img/publicImage/cut-off-rule.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="2px" height="75px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1236 -43 )">
|
||||
<path d="M 1236.5 43 L 1236.5 117 " stroke-width="1" stroke="#62b1ff" fill="none" stroke-opacity="0.168627450980392" />
|
||||
</g>
|
||||
</svg>
|
BIN
src/assets/img/publicImage/edit-pen.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
21
src/assets/img/publicImage/housing-certification-code.svg
Normal file
BIN
src/assets/img/publicImage/intermediary-icon.png
Normal file
After Width: | Height: | Size: 1.4 KiB |
21
src/assets/img/publicImage/mediation-authentication-code.svg
Normal file
18
src/assets/img/publicImage/message-icon.svg
Normal file
@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="28px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<filter x="1141px" y="51px" width="32px" height="28px" filterUnits="userSpaceOnUse" id="filter1074">
|
||||
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetInner" />
|
||||
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetInner" result="shadowGaussian" />
|
||||
<feComposite in2="shadowGaussian" operator="atop" in="SourceAlpha" result="shadowComposite" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.313725490196078 0 0 0 0 0.890196078431372 0 0 0 0 0.76078431372549 0 0 0 1 0 " in="shadowComposite" />
|
||||
</filter>
|
||||
<g id="widget1075">
|
||||
<image preserveAspectRatio="none" style="overflow:visible" width="22" height="18" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAqCAYAAAD8pHgAAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAANKADAAQAAAABAAAAKgAAAACCb8TgAAACqklEQVRoBe2WjW3bMBCFk6ADaARtUI3AEbyBtUGzQbhBvUG8gbOBvEHUCeINok7Qfq8AhbNs6s+1LAV+wBOPvHv3I8qAHx6+GB5b5knwfW/x39L1i+JV3wYcgQX8M3O+098aRqEb2cG5D9LsT4Op9xMscZgwnIY6QsouOJe6rjTRkx4g/fdc9iNrtp9zsNTb2TaHCXtNWcElDZaH5mNrgmMP5z7UgR5PPjPOotjgmetQe3rTix+MHEUF5zSYXvRFyFCX8NZD6cWu+k6SECjGIN8W3mqoktopbENmnY5N9C+ECcyxKzjlYBtT/5yZcFhAb52OjZr8hEeTsm9C/hJee6iKGqtm8cZevegi1IuHNRyWbTCvPeeNhOMttJr/aZfkTmEbNKwuINT1NtgZRwh4tQERW0mrM9qQY8zqI7Xs8cuZmkc6dyZAzeg6U9iGFOcejmneag7kcLANCc4dtLpgeyt0kSAF61p1E13wBITkQ9cNWjXbhgznB4zl9lbsWgJDgp9WELFVtOyRK+Q8EOtgF34QEDSx1dskrodAid6hmu7CMwEVjBXXuYcJbIP8BWzLE3zeJnI9RUGsN9YFNbOBQRPWLWcp7MKKgE8YdF2rtwndAGFIXKBJYRc02DP0MIVdUPwOhjp9V28TuxEJQqEXm+hCe41+yK2EHrR6W9uxsc6h9gd6fSJjkSEs4NC6Nt7b4u7CZCGxmlKuvkgJfIVBf8nqyVPDYV2SrKktyLeus58ajqMxv5NmHbv3KvNNjyvAkVPcwjdYQkGfloMJvAquNZBtdsVGnARPk1SZsMh9oAlf9qhS9xsa9domFN1vaMKXPapUuKED6t+jMsxDpN7fmq2kHJTQ/p1Ygn2g5wxGkeM5wLkPox49TGCNx9o6NVKOxDmioil9TV8ffwGMIuR2B9TYZwAAAABJRU5ErkJggg==" x="1146px" y="56px" />
|
||||
</g>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -1141 -51 )">
|
||||
<use xlink:href="#widget1075" filter="url(#filter1074)" />
|
||||
<use xlink:href="#widget1075" />
|
||||
</g>
|
||||
</svg>
|
BIN
src/assets/img/publicImage/smiling.png
Normal file
After Width: | Height: | Size: 1.8 KiB |
BIN
src/assets/img/user/inform-icon.png
Normal file
After Width: | Height: | Size: 107 KiB |
BIN
src/assets/img/user/inform-text.png
Normal file
After Width: | Height: | Size: 12 KiB |
@ -49,7 +49,7 @@ export default {
|
||||
});
|
||||
|
||||
const init = () => {
|
||||
proxy.$post("/tenement/forum/about").then(res => {
|
||||
proxy.$post("/tenement/pc/api/publish/about").then(res => {
|
||||
cutTabArray['person'] = res.data['person']
|
||||
cutTabArray['intermediary'] = res.data['intermediary']
|
||||
cutTabArray['more'] = res.data['more']
|
||||
|
@ -22,51 +22,123 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="agent" v-else>
|
||||
<div class="pop-header flexcenter">身份确认</div>
|
||||
<div class="affirm-hint affirm-a-hint" v-if="popType == 'agent'">确认中介身份后将不能更改</div>
|
||||
<div class="affirm-hint affirm-b-hint" v-else>由于您上架的房源信息中包括了中介房源,系统需要确认您是否属于中介身份:</div>
|
||||
<div class="rules-box">
|
||||
<div class="rules-item flexflex" v-for="item in 2" :key="item">
|
||||
<img class="rules-icon" src="@/assets/img/edit/green-arrow.svg" alt="">
|
||||
<div class="rules-text" v-html="html"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer flexcenter">
|
||||
<div class="footer-item flexcenter">重新选择</div>
|
||||
<div class="footer-item affirm flexcenter">确认并继续</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'GterFangChoosingIdentity',
|
||||
<!-- <script> -->
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
choiceTypeState: true,
|
||||
popType: "choice", //
|
||||
identityList: [{
|
||||
desc: "出租自有物业",
|
||||
key: 3,
|
||||
value: "我是房东",
|
||||
}, {
|
||||
desc: "持有房产代理牌照",
|
||||
key: 1,
|
||||
value: "我是中介",
|
||||
}, {
|
||||
desc: "我已租房,需要招室友",
|
||||
key: 4,
|
||||
value: "有房招室友",
|
||||
}, {
|
||||
desc: "二房东、物业租赁公司等",
|
||||
key: 5,
|
||||
value: "其他",
|
||||
}, {
|
||||
desc: "发布找房源的需求",
|
||||
key: 6,
|
||||
value: "求房源",
|
||||
}]
|
||||
};
|
||||
},
|
||||
let html = `中介账号只能发布“<span style="color: #000; font-weight:650;">中介房源</span>”,如您已上架个人房源或求房源信息,在你确认中介身份后,将会自动下架;`
|
||||
|
||||
mounted() {
|
||||
let identityList = ref([])
|
||||
|
||||
},
|
||||
let popType = ref('agent') // choice agent: 确认是否是中介(有个人房源) affirmAgent: 确认是否是中介(有中介房源)
|
||||
|
||||
let agent = ref([{
|
||||
content: `中介账号发布的房源信息,均展示在“<span style="color: #000; font-weight:650;">中介房源</span>”频道中,即不能发布“<span style="color: #000; font-weight:650;">个人房源</span>”、“<span style="color: #000; font-weight:650;">求房源</span>”;如您已上架个人房源或求房源信息,在你确认中介身份后,将会自动下架`,
|
||||
type: 1,
|
||||
}])
|
||||
|
||||
let affirmAgent = ref([{
|
||||
content: `个人账号只能发布“<span style="color: #000; font-weight:650;">个人房源</span>”、“<span style="color: #000; font-weight:650;">求房源</span>”,在您确认不是中介身份后,将会自动下架您的中介房源;`,
|
||||
type: 1,
|
||||
}, {
|
||||
content: `中介账号只能发布“<span style="color: #000; font-weight:650;">中介房源</span>”,如您已上架个人房源或求房源信息,在你确认中介身份后,将会自动下架;`,
|
||||
type: 1,
|
||||
}])
|
||||
|
||||
let rulesList = ref([{
|
||||
content: `中介账号(未认证)最多可同时上架 <span style="color: #000; font-weight:650;">3</span> 条房源信息`,
|
||||
type: 1,
|
||||
}, {
|
||||
content: `中介账号(有认证)最多可同时上架 <span style="color: #000; font-weight:650;">20</span> 条房源信息`,
|
||||
type: 1,
|
||||
}, {
|
||||
content: `中介帐号(有认证)拥有搜索、过滤“<span style="color: #000; font-weight:650;">求房源</span>”信息的功能`,
|
||||
type: 1,
|
||||
}])
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
// init()
|
||||
})
|
||||
|
||||
async function init() {
|
||||
proxy.$post("/tenement/pc/api/publish/checkidentity").then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
console.log("data", data);
|
||||
|
||||
// identityList.value = data.data
|
||||
// if (data['ispopup'] == 1) {
|
||||
// }
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// /tenement/pc/api/publish/checkidentity
|
||||
// export default {
|
||||
// name: 'GterFangChoosingIdentity',
|
||||
|
||||
// data() {
|
||||
// return {
|
||||
// visible: false,
|
||||
// choiceTypeState: true,
|
||||
// popType: "choice", //
|
||||
// identityList: [{
|
||||
// desc: "出租自有物业",
|
||||
// key: 3,
|
||||
// value: "我是房东",
|
||||
// }, {
|
||||
// desc: "持有房产代理牌照",
|
||||
// key: 1,
|
||||
// value: "我是中介",
|
||||
// }, {
|
||||
// desc: "我已租房,需要招室友",
|
||||
// key: 4,
|
||||
// value: "有房招室友",
|
||||
// }, {
|
||||
// desc: "二房东、物业租赁公司等",
|
||||
// key: 5,
|
||||
// value: "其他",
|
||||
// }, {
|
||||
// desc: "发布找房源的需求",
|
||||
// key: 6,
|
||||
// value: "求房源",
|
||||
// }]
|
||||
// };
|
||||
// },
|
||||
|
||||
// mounted() {
|
||||
|
||||
// },
|
||||
|
||||
// methods: {
|
||||
|
||||
// },
|
||||
// };
|
||||
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@ -75,11 +147,8 @@ export default {
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.117647058823529);
|
||||
}
|
||||
|
||||
.pop-box {
|
||||
// position: fixed;
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, -50%);
|
||||
position: relative;
|
||||
z-index: 1111;
|
||||
box-sizing: border-box;
|
||||
@ -96,7 +165,7 @@ export default {
|
||||
font-size: 24px;
|
||||
font-weight: 650;
|
||||
color: #000000;
|
||||
margin-bottom: 35px;
|
||||
// margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.please-choose {
|
||||
@ -196,4 +265,77 @@ export default {
|
||||
height: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.affirm-hint {
|
||||
color: #333333;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.affirm-a-hint {
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.affirm-b-hint {
|
||||
font-size: 27px;
|
||||
margin: 36px auto 0;
|
||||
}
|
||||
|
||||
.rules-box {
|
||||
background: rgba(246, 246, 246, 1);
|
||||
margin: 20px;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
|
||||
.rules-item {
|
||||
line-height: 24px;
|
||||
|
||||
&:not(:last-of-type) .rules-text {
|
||||
border-bottom: 1px dashed #ebebeb;
|
||||
}
|
||||
|
||||
.rules-text {
|
||||
padding: 20px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rules-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: 23px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 0 15px;
|
||||
height: 100px;
|
||||
border-top: 1px solid #ebebeb;
|
||||
|
||||
.footer-item {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
border-radius: 40px;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
background-color: #ffffff;
|
||||
border: 1px solid rgba(215, 215, 215, 1);
|
||||
|
||||
&:first-of-type {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
&.affirm {
|
||||
border: none;
|
||||
background-color: rgba(98, 177, 255, 1);
|
||||
color: #ffffff;
|
||||
font-size: 22px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
@ -13,31 +13,46 @@
|
||||
<div class="header-bj-box"></div>
|
||||
|
||||
|
||||
<nav class="nav-box flexflex">
|
||||
<nav class="nav-box flexflex" v-if="!isNoTabList">
|
||||
<div class="nav-list wid1200 flexflex">
|
||||
<div class="nav-item" v-for="item in tabList" :key="item">{{ item.name }}</div>
|
||||
<div class="nav-item flexcenter" :class="{ pitch: item['name'] == '我的' }" v-for="item in tabList"
|
||||
:key="item">{{ item.name }}</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
// 是否不需要导航栏
|
||||
const props = defineProps({
|
||||
isNoTabList: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
const navList = ["寄托首页", "论坛", "Offer榜", "港校租房", "院校库", "兑换店", "搜索", "招生官", "中外合办院校"]
|
||||
|
||||
const tabList = [{
|
||||
name: '首页',
|
||||
value: "index"
|
||||
}, {
|
||||
name: '个人房源'
|
||||
name: '个人房源',
|
||||
value: "personage"
|
||||
}, {
|
||||
name: '中介房源'
|
||||
name: '中介房源',
|
||||
value: "intermediary"
|
||||
}, {
|
||||
name: '品牌公寓'
|
||||
name: '品牌公寓',
|
||||
value: "brand"
|
||||
}, {
|
||||
name: '求房源'
|
||||
name: '求房源',
|
||||
value: "asking"
|
||||
}, {
|
||||
name: '我的'
|
||||
}
|
||||
]
|
||||
name: '我的',
|
||||
value: "user"
|
||||
}]
|
||||
|
||||
</script>
|
||||
|
||||
@ -140,13 +155,41 @@ const tabList = [{
|
||||
transform: translateX(-50%);
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 43px;
|
||||
height: 47px;
|
||||
background: rgba(0, 0, 0, 0.596078431372549);
|
||||
border-bottom: 4px solid rgba(78, 144, 204, 1);
|
||||
|
||||
.nav-list {
|
||||
background: red;
|
||||
// background: red;
|
||||
color: #e2edf7;
|
||||
font-size: 18px;
|
||||
margin: 0 auto;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
height: 47px;
|
||||
|
||||
.nav-item {
|
||||
margin-right: 40px;
|
||||
cursor: pointer;
|
||||
height: 43px;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.pitch {
|
||||
border-width: 0px;
|
||||
padding: 0 42px;
|
||||
height: 43px;
|
||||
background-color: rgba(98, 177, 255, 1);
|
||||
border-radius: 8px 8px 0 0;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
78
src/components/user/systematic-notification-pop.vue
Normal file
@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div class="pop-mask flexcenter">
|
||||
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="header flexcenter">
|
||||
<img class="header-icon" src="@/assets/img/user/inform-icon.png" />
|
||||
<img class="header-text" src="@/assets/img/user/inform-text.png" />
|
||||
</div>
|
||||
|
||||
|
||||
<!--
|
||||
<div class="attention flexacenter">
|
||||
<div class="attention-text"></div>
|
||||
<div class="attention-btn"></div>
|
||||
</div>
|
||||
|
||||
<div class="list"></div> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.pop-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.698039215686274);
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 700px;
|
||||
height: 750px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 16px;
|
||||
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
|
||||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
background: -webkit-linear-gradient(157.579749142889deg, rgba(82, 217, 219, 1) 0%, rgba(44, 100, 235, 1) 59%);
|
||||
background: -moz-linear-gradient(-67.5797491428887deg, rgba(82, 217, 219, 1) 0%, rgba(44, 100, 235, 1) 59%);
|
||||
background: linear-gradient(-67.5797491428887deg, rgba(82, 217, 219, 1) 0%, rgba(44, 100, 235, 1) 59%);
|
||||
border-radius: 16px 16px 0 0;
|
||||
|
||||
.header-icon {
|
||||
width: 52px;
|
||||
height: 57px;
|
||||
margin-right: 21px;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
width: 145px;
|
||||
height: 47px;
|
||||
}
|
||||
}
|
||||
|
||||
.attention {
|
||||
// margin: 0 auto;
|
||||
// width: 660px;
|
||||
// height: 50px;
|
||||
// background-color: rgba(255, 255, 255, 1);
|
||||
// border-radius: 230px;
|
||||
// -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
// -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
// box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
}
|
||||
}
|
||||
</style>
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<header-nav></header-nav>
|
||||
|
||||
<header-nav :isNoTabList="true"></header-nav>
|
||||
|
||||
<map-component v-if="mapComponentState" :info="info" @choosingLocation="choosingLocation" />
|
||||
<choosing-identity v-if="false"></choosing-identity>
|
||||
<div class="content-box flexflex">
|
||||
@ -14,7 +14,7 @@
|
||||
香港
|
||||
</div>
|
||||
<img v-if="userIntermediary" class="housing-info-certifying"
|
||||
src="@/assets/img/edit/certifying-agent.png">
|
||||
src="@/assets/img/publicImage/certifying-agent.png">
|
||||
<div v-else class="housing-info-identity flexcenter">{{ intermediaryObj[intermediary] }}</div>
|
||||
</div>
|
||||
<div class="housing-info-list" v-if="type != 'plus'">
|
||||
@ -313,8 +313,7 @@
|
||||
|
||||
<!-- 所在区域 -->
|
||||
<div class="form-option modeOne flexacenter" v-if="intermediary != 6 && item.field == 'location'">
|
||||
<el-popover placement="bottom" :width="640" :show-arrow="false" trigger="click"
|
||||
popper-style="padding: 0;border-radius:16px;">
|
||||
<el-popover placement="bottom" :width="640" :show-arrow="false" trigger="click">
|
||||
<template #reference>
|
||||
<div ref="location" class="modeOne-item flexacenter"
|
||||
:class="{ 'pitch': info['location'], 'disabled': verified == 1 }"
|
||||
@ -695,7 +694,6 @@
|
||||
<page-footer></page-footer>
|
||||
<!-- 如何获取微信二维码 -->
|
||||
<how :howBoxState="howBoxState" @close="howBoxState = false"></how>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import aboutPop from '@/components/edit/about-pop.vue'
|
||||
|
@ -2,48 +2,129 @@
|
||||
<header-nav></header-nav>
|
||||
|
||||
<div class="user-box">
|
||||
|
||||
<div class="info-box flexacenter">
|
||||
<div class="info-left flexacenter">
|
||||
<img class="info-user-icon"
|
||||
src="https://oss.gter.net/avatar/97KwEWIDY-QTHTXcpEbnWQxaRv6Xz0ll1wRhYWNh/middle?random=1687145465">
|
||||
<div class="info-left flexacenter flex1">
|
||||
<a href="https://bbs.gter.net/account.php?a=avatar" target="_blank">
|
||||
<img class="info-user-icon" :src="user['avatar']">
|
||||
</a>
|
||||
|
||||
<div class="info-user-box">
|
||||
<div class="info-user-top flexacenter">
|
||||
<div class="info-user-username">Ada.W</div>
|
||||
<a href="https://bbs.gter.net/account.php?a=info" target="_blank" class="info-user-username">{{
|
||||
user['nickname'] }}</a>
|
||||
<a href="https://bbs.gter.net/account.php?a=info" target="_blank">
|
||||
<img class="info-user-edit" src="@/assets/img/publicImage/edit-pen.png">
|
||||
</a>
|
||||
<img class="info-user-certifying" v-if="user.intermediary == 1"
|
||||
src="@/assets/img/publicImage/certifying-agent.png">
|
||||
<div class="info-user-validity" v-if="validityidentity">(有效期至{{ validityidentity }})</div>
|
||||
</div>
|
||||
<div class="info-user-bottom">UID:56789</div>
|
||||
<div class="info-user-bottom flexacenter">UID:{{ user['uid'] }}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="info-right flexacenter">
|
||||
<div class="operate-item message flexcenter">
|
||||
<div class="operate-item-shell flexcenter">
|
||||
<div class="newmessagenum flexcenter" v-if="newmessagenum > 0">{{ newmessagenum }}</div>
|
||||
<img class="operate-icon" src="@/assets/img/publicImage/message-icon.svg">
|
||||
</div>
|
||||
<div class="operate-text">消息提醒</div>
|
||||
</div>
|
||||
<img class="" src="@/assets/img/publicImage/cut-off-rule.svg">
|
||||
<div class="operate-item flexcenter add">
|
||||
<div class="operate-item-shell flexcenter">
|
||||
<img class="operate-icon" src="@/assets/img/publicImage/add-icon.svg">
|
||||
</div>
|
||||
<div class="operate-text">发布房源</div>
|
||||
</div>
|
||||
<template v-if="user.identity != 0">
|
||||
<img class="" src="@/assets/img/publicImage/cut-off-rule.svg">
|
||||
<el-popover placement="bottom" :width="360" trigger="click" :show-arrow="false"
|
||||
popper-style="background: transparent;padding:0;box-shadow: none;border: none;">
|
||||
<template #reference>
|
||||
<div class="operate-item flexcenter identity">
|
||||
<div class="operate-item-shell flexcenter"
|
||||
:class="{ 'intermediary': user.identity == 1, 'personage': user.identity == -1 }">
|
||||
<img class="operate-icon" src="@/assets/img/publicImage/intermediary-icon.png">
|
||||
</div>
|
||||
<div class="operate-text">{{ identityObj[user.identity || -1] }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<img v-if="user.identity == 1" style="width: 360px;"
|
||||
src="@/assets/img/publicImage/mediation-authentication-code.svg">
|
||||
<img v-else style="width: 360px;" src="@/assets/img/publicImage/housing-certification-code.svg">
|
||||
</el-popover>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-box flexacenter">
|
||||
<div class="tab-item flexcenter pitch">我的收藏</div>
|
||||
<div class="tab-item flexcenter">我的发布</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 有疑问 -->
|
||||
<div class="flexcenter" style="padding: 78px 0;">
|
||||
<el-popover placement="bottom" popper-class="have-questions flexcenter" :width="160" trigger="hover"
|
||||
popper-style="border-radius: 14px;padding: 20px;">
|
||||
<template #reference>
|
||||
<div class="have-questions flexcenter">
|
||||
<div class="have-questions-text flexacenter">有疑问?来找<img class="smiling"
|
||||
src="@/assets/img/publicImage/smiling.png">寄托方同学!</div>
|
||||
<div class="have-questions-btn flexcenter">
|
||||
<img class="have-questions-icon" src="@/assets/img/publicImage/QR-code.svg" />扫码加微信
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<img class="QR-code"
|
||||
src="https://oss.gter.net/Zvt57TuJSUvkyhw-xG7Y2l-S_J8rcn3qqsgFptxhXa6RWi26P-BuTQQWELrL49kb8MVYZjQ0Mjk~"
|
||||
alt="">
|
||||
</el-popover>
|
||||
</div>
|
||||
|
||||
<!-- 系统通知弹窗 -->
|
||||
<systematic-notification-pop></systematic-notification-pop>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import headerNav from '@/components/public/head.vue'
|
||||
import systematicNotificationPop from '@/components/user/systematic-notification-pop.vue'
|
||||
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
export default {
|
||||
name: 'GterFangUser',
|
||||
console.log("proxy", proxy);
|
||||
|
||||
data() {
|
||||
return {
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
|
||||
};
|
||||
},
|
||||
let user = ref({})
|
||||
let count = ref({})
|
||||
let newmessagenum = ref(0)
|
||||
let validityidentity = ref('')
|
||||
|
||||
mounted() {
|
||||
const identityObj = {
|
||||
1: "中介认证",
|
||||
"-1": "房源认证"
|
||||
}
|
||||
|
||||
},
|
||||
components: {
|
||||
headerNav,
|
||||
},
|
||||
methods: {
|
||||
async function init() {
|
||||
proxy.$post("/tenement/v2/api/user").then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
data.user['identity'] = -1
|
||||
user.value = data.user
|
||||
count.value = data.count
|
||||
newmessagenum.value = data.newmessagenum
|
||||
validityidentity.value = data.validityidentity
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
<style lang="less">
|
||||
.user-box {
|
||||
width: 1200px;
|
||||
height: 238px;
|
||||
@ -56,10 +137,9 @@ export default {
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
|
||||
.info-box {
|
||||
height: 135px;
|
||||
height: 160px;
|
||||
border-bottom: 2px solid #ddeeff;
|
||||
|
||||
|
||||
.info-left {
|
||||
padding-left: 40px;
|
||||
|
||||
@ -73,13 +153,31 @@ export default {
|
||||
margin-left: 20px;
|
||||
|
||||
.info-user-top {
|
||||
height: 26px;
|
||||
height: 28px;
|
||||
|
||||
.info-user-username {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.info-user-edit {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
margin-right: 29px;
|
||||
}
|
||||
|
||||
.info-user-certifying {
|
||||
width: 85px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.info-user-validity {
|
||||
color: #aaa;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.info-user-bottom {
|
||||
@ -88,6 +186,163 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-right {
|
||||
|
||||
.operate-item {
|
||||
flex-direction: column;
|
||||
margin: 0 52px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
.operate-item-shell {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
&.message {
|
||||
|
||||
.operate-item-shell {
|
||||
position: relative;
|
||||
background-color: rgba(80, 227, 194, 1);
|
||||
border-radius: 8px;
|
||||
-moz-box-shadow: 0px 0px 5px rgba(80, 227, 194, 1);
|
||||
-webkit-box-shadow: 0px 0px 5px rgba(80, 227, 194, 1);
|
||||
box-shadow: 0px 0px 5px rgba(80, 227, 194, 1);
|
||||
|
||||
.operate-icon {
|
||||
width: 32px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.newmessagenum {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(50%, -50%);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
font-size: 13px;
|
||||
background: #f95d5d;
|
||||
color: #FFFFFF;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.add {
|
||||
.operate-item-shell {
|
||||
background-color: rgba(253, 223, 109, 1);
|
||||
-moz-box-shadow: 0px 0px 5px rgba(253, 223, 109, 1);
|
||||
-webkit-box-shadow: 0px 0px 5px rgba(253, 223, 109, 1);
|
||||
box-shadow: 0px 0px 5px rgba(253, 223, 109, 1);
|
||||
|
||||
.operate-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.identity {
|
||||
.operate-item-shell {
|
||||
&.intermediary {
|
||||
background-color: rgba(46, 207, 226, 1);
|
||||
-moz-box-shadow: 0px 0px 5px rgba(46, 207, 226, 1);
|
||||
-webkit-box-shadow: 0px 0px 5px rgba(46, 207, 226, 1);
|
||||
box-shadow: 0px 0px 5px rgba(46, 207, 226, 1);
|
||||
}
|
||||
|
||||
&.personage {
|
||||
background-color: rgba(171, 169, 255, 1);
|
||||
-moz-box-shadow: 0px 0px 5px rgba(123, 121, 255, 1);
|
||||
-webkit-box-shadow: 0px 0px 5px rgba(123, 121, 255, 1);
|
||||
box-shadow: 0px 0px 5px rgba(123, 121, 255, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.operate-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.operate-text {
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.tab-box {
|
||||
height: 78px;
|
||||
padding-left: 20px;
|
||||
|
||||
.tab-item {
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
background-color: rgba(205, 227, 247, 1);
|
||||
border-radius: 8px;
|
||||
font-size: 18px;
|
||||
color: #555555;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
&.pitch {
|
||||
background-color: rgba(98, 177, 255, 1);
|
||||
border-radius: 8px;
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
.have-questions {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
|
||||
.QR-code {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.have-questions-text {
|
||||
color: #7F7F7F;
|
||||
font-size: 14px;
|
||||
margin-bottom: 14px;
|
||||
|
||||
.smiling {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.have-questions-btn {
|
||||
width: 166px;
|
||||
height: 40px;
|
||||
border-radius: 40px;
|
||||
font-size: 18px;
|
||||
font-weight: 650;
|
||||
color: #333;
|
||||
border: 1px solid #7f7f7f;
|
||||
cursor: pointer;
|
||||
|
||||
.have-questions-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|