提交

src/components/edit/about-pop.vue

@@ -0,0 +1,171 @@
+<template>
+    <!-- 关于发布弹窗 -->
+    <div class="flexcenter pop-mask" v-if="popState">
+        <div class="pop about-pop shadow">
+            <div class="about-title">关于发布</div>
+            <div class="about-tab flexacenter">
+                <div class="about-tab-item flexcenter" :class="{ 'pitch': key === tab }" v-for="(value, key) in tabList"
+                    :key="key" @click="cutTab(key)">
+                    {{ value }}
+                </div>
+            </div>
+            <div class="about-list flexflex">
+                <div class="about-list-item" v-for="(item, index) in cutTabArray[tab]" :key="index">
+                    <div v-html="item"></div>
+                </div>
+            </div>
+
+            <div class="close flexcenter" @click="$emit('close')">关闭</div>
+        </div>
+    </div>
+</template>
+  
+<script>
+import { ref, reactive, onMounted, getCurrentInstance, watch, computed } from 'vue';
+
+export default {
+    name: 'GterFangAboutPop',
+    props: ['popState', "intermediary"],
+
+    setup(props) {
+
+        const { proxy } = getCurrentInstance()
+
+        const tabList = {
+            person: "个人账号",
+            intermediary: "中介账号",
+            more: "更多说明",
+        };
+
+        const tab = ref("person"); // person intermediary more
+        
+        computed(() => {
+            if (props['intermediary'] == 1) tab = "intermediary"
+            else tab = "person"
+        })
+
+
+        const cutTabArray = reactive({});
+
+
+        // 监听 prop 变化
+        watch(() => props.popState, (newValue) => {
+            if (newValue && Object.keys(cutTabArray).length === 0) init();
+        });
+
+
+        onMounted(() => {
+        });
+
+        const init = () => {
+            proxy.$post("/tenement/forum/about").then((res) => {
+                cutTabArray['person'] = res.data['person']
+                cutTabArray['intermediary'] = res.data['intermediary']
+                cutTabArray['more'] = res.data['more']
+            });
+        };
+
+        const cutTab = (tabvalue) => {
+            tab.value = tabvalue;
+        };
+
+
+
+
+        console.log("cutTabArray", cutTabArray);
+        return {
+            tabList,
+            tab,
+            cutTabArray,
+            init,
+            cutTab,
+            // popState,
+        };
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.close {
+    height: 50px;
+    width: 180px;
+    border: 1px solid rgba(215, 215, 215, 1);
+    border-radius: 55px;
+    margin: 0 auto;
+    cursor: pointer;
+}
+
+.pop-mask {
+    position: fixed;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.698039215686274);
+    z-index: 1000;
+}
+
+.pop {
+    &.about-pop {
+        width: 600px;
+        height: 627px;
+        background: inherit;
+        background-color: rgba(255, 255, 255, 1);
+        border-radius: 20px;
+
+        .about-title {
+            color: #000;
+            font-size: 24px;
+            font-weight: 650;
+            margin: 0 auto;
+            text-align: center;
+            padding: 30px 0;
+        }
+
+        .about-tab {
+            height: 70px;
+            background-color: rgba(246, 246, 246, 1);
+            justify-content: space-around;
+
+            .about-tab-item {
+
+                width: 120px;
+                height: 40px;
+                border-radius: 60px;
+                font-size: 18px;
+                color: #555;
+                cursor: pointer;
+
+                &.pitch {
+                    background: rgba(98, 177, 255, 1);
+                    font-weight: 650;
+                    color: #fff;
+                }
+            }
+
+
+        }
+
+        .about-list {
+            flex-direction: column;
+            color: #555;
+            font-size: 16px;
+            line-height: 30px;
+            padding: 0 30px 0 53px;
+            height: 374px;
+
+            .about-list-item {
+                padding: 30px 0;
+
+                &:not(:last-of-type) {
+                    border-bottom: 1px dashed #ebebeb;
+                }
+
+                b {
+                    color: #000;
+                }
+            }
+        }
+
+    }
+}
+</style>