选择身份

2023-07-11 19:04:02 +08:00
parent ff631f5816
commit 5da24fa685
22 changed files with 6934 additions and 18734 deletions
--- a/src/components/edit/about-pop.vue
+++ b/src/components/edit/about-pop.vue
@@ -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']
--- a/src/components/edit/choosingIdentity.vue
+++ b/src/components/edit/choosingIdentity.vue
@@ -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>
--- a/src/components/public/head.vue
+++ b/src/components/public/head.vue
@@ -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;
+                }
+            }
        }

    }
--- a/src/components/user/systematic-notification-pop.vue
+++ b/src/components/user/systematic-notification-pop.vue
@@ -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>