对话框

src/views/mine/ReleaseWebcast.vue

@@ -46,13 +46,37 @@
                 <a-input size="small" v-model:value="form.number" placeholder="请输入直播人数" />
             </a-form-item>
             <a-form-item label="直播简介" class="brief">
-                <a-textarea v-model:value="form.brief" :autosize="true" class="brief-textarea" maxlength="200" placeholder="请输入您的直播简介" />
+                <a-textarea v-model:value="form.brief" :autoSize="true" class="brief-textarea" :maxlength="200" placeholder="请输入您的直播简介" />
                 <span class="words-number">{{ form.brief.length }}/200</span>
             </a-form-item>
             <a-form-item :wrapper-col="{ span: 4, offset: 0 }">
                 <a-button @click="onSubmit">发布直播</a-button>
             </a-form-item>
         </a-form>
+        <div class="modal-container">
+            <a-modal
+                centered
+                :footer="null"
+                :getContainer="modalNode"
+                dialogClass="modal-dialog"
+                v-model:visible="isEntitled"
+                @cancel="hideNoticeModal"
+            >
+                <template v-slot:closeIcon>
+                    <img src="@/static/images/delete.png" class="close" />
+                </template>
+                <div class="notice-container report" v-if="0">
+                    <div class="title">您尚未获得直播资格</div>
+                    <div class="title sub-title">您被 学生XXX<span class="red">举报，发生违规行为</span>,如有疑问，点击反馈</div>
+                    <div class="confirm-btn">意见反馈</div>
+                </div>
+                <div class="notice-container" v-else>
+                    <div class="title">您尚未获得直播资格</div>
+                    <div class="title sub-title">上一周/月您在平台视频点击量为 <span class="red">第24名</span>，要在前 <span class="bule">20名</span> 才能获得直播资格</div>
+                    <rank-list></rank-list>
+                </div>
+            </a-modal>
+        </div>
         <nav-bottom></nav-bottom>
     </div>
 </template>
@@ -61,6 +85,7 @@ import { defineComponent, reactive, Ref, ref, toRaw } from 'vue';
 import { PlaySquareOutlined, PlusOutlined } from '@ant-design/icons-vue';
 import { useForm } from '@ant-design-vue/use';
 import NavBottom from '@/components/NavBottom.vue';
+import RankList from './RankList.vue';
 import { previewCover } from '@/static/js/common';
 
 export default defineComponent({
@@ -69,6 +94,7 @@ export default defineComponent({
         PlaySquareOutlined,
         PlusOutlined,
         NavBottom,
+        RankList,
     },
     setup() {
         // 表单数据
@@ -144,9 +170,17 @@ export default defineComponent({
                 console.log('error', err);
             });
         };
+        const isEntitled: Ref<boolean> = ref(true);
+        /**
+         * 隐藏无资格提示
+         */
+        function hideNoticeModal(): void {
+            isEntitled.value = false;
+        }
         return {
             labelCol: { span: 4 },
             wrapperCol: { span: 14 },
+            modalNode: () => document.getElementsByClassName('modal-container')[0],
             validateInfos,
             resetFields,
             viewCover,
@@ -154,6 +188,8 @@ export default defineComponent({
             coverChange,
             form,
             onSubmit,
+            isEntitled,
+            hideNoticeModal,
         }
     }
 })
@@ -285,5 +321,56 @@ export default defineComponent({
             }
         }
     }
+    .modal-container {
+        ::v-deep .modal-dialog {
+            .close {
+                width: 14px;
+                height: 14px;
+            }
+            .ant-modal-content {
+                box-sizing: border-box;
+                padding: 25px 30px;
+                width: 569px;
+                background: #FFFFFF;
+                box-shadow: 0px 4px 6px 0px rgba(102, 102, 102, 0.07);
+                border-radius: 28px;
+                .notice-container {
+                    .title {
+                        font-size: 11px;
+                        font-weight: bold;
+                        color: #111111;
+                        margin-bottom: 16px;
+                    }
+                    .sub-title {
+                        .red {
+                            color: #D12C2D;
+                        }
+                        .bule {
+                            color: #0DBBA3;
+                        }
+                    }
+                    .confirm-btn {
+                        display: inline-block;
+                        background: #07AD97;
+                        border-radius: 2px;
+                        font-size: 9px;
+                        font-weight: 500;
+                        color: #FFFFFF;
+                        text-align: center;
+                        cursor: pointer;
+                        user-select: none;
+                        height: 22px;
+                        line-height: 22px;
+                        padding: 0 17px;
+                    }
+                }
+                .report {
+                    .sub-title {
+                        margin-bottom: 50px;
+                    }
+                }
+            }
+        }
+    }
 }
 </style>