对话框

README.md

@@ -20,5 +20,6 @@
 
 ## components 
 - Menu 左侧导航
+- NavBottom 底部导航
 
 ## views

src/views/mine/Archives.vue

@@ -121,7 +121,7 @@
                     <div class="input-box phone-box">
                         <div class="label">手机号</div>
                         <div class="phone">{{ formData.phone }}</div>
-                        <div class="update-btn" @click="updatePhoneNumber">更换手机号</div>
+                        <div class="update-btn" @click="togglePhoneModal(true)">更换手机号</div>
                     </div>
                 </div>
             </div>
@@ -131,7 +131,7 @@
                     <div class="input-box password-box">
                         <div class="label">密码</div>
                         <div class="password">{{ formData.password }}</div>
-                        <div class="update-btn" @click="updateUserPassword">修改密码</div>
+                        <div class="update-btn" @click="togglePasswordModal(true)">修改密码</div>
                     </div>
                     <div class="input-box time-zone-box">
                         <div class="label">时区</div>
@@ -177,6 +177,80 @@
                     </div>
                 </div>
             </div>
+            <div class="modal-container">
+                <a-modal
+                    centered
+                    :footer="null"
+                    :getContainer="modalNode"
+                    dialogClass="modal-dialog"
+                    v-model:visible="updatePhoneVisible"
+                    @cancel="hidePhoneModal"
+                >
+                    <template v-slot:closeIcon>
+                        <img src="@/static/images/delete.png" class="close" />
+                    </template>
+                    <!-- 换绑手机号第一步 -->
+                    <div class="public-class phone-container" v-if="!isSecondStep">
+                        <div class="title">完成以下操作，修改账号密码</div>
+                        <div class="title sub-title">请输入{{ formData.phone }}收到的验证短信码</div>
+                        <div class="form-box">
+                            <div class="form-item">
+                                <label class="label">手机验证码</label>
+                                <a-input size="small" v-model:value="verificationCode" />
+                                <div @click="sendVerificationCode" class="confirm-btn">获取验证码<span v-if="remainTime>0">（{{ remainTime }}s）</span></div>
+                            </div>
+                        </div>
+                        <div @click="nextPhoneStep" class="confirm-btn">下一步</div>
+                    </div>
+                    <!-- 换绑手机号第二步 -->
+                    <div class="public-class phone-container second-step" v-else>
+                        <div class="title">完成以下操作，修改账号密码</div>
+                        <div class="form-box">
+                            <div class="form-item">
+                                <label class="label">手机号</label>
+                                <a-input size="small" v-model:value="bindPhone.number" />
+                            </div>
+                            <div class="form-item">
+                                <label class="label">手机验证码</label>
+                                <a-input size="small" v-model:value="bindPhone.code" />
+                                <div @click="sendVerificationCode" class="confirm-btn">获取验证码<span v-if="remainTime>0">（{{ remainTime }}s）</span></div>
+                            </div>
+                        </div>
+                        <div @click="nextPhoneStep" class="confirm-btn">绑定手机</div>
+                    </div>
+                </a-modal>
+                <!-- 修改密码 -->
+                <a-modal
+                    centered
+                    :footer="null"
+                    :getContainer="modalNode"
+                    dialogClass="modal-dialog"
+                    v-model:visible="updatePasswordVisible"
+                    @cancel="hidePasswordModal"
+                >
+                    <template v-slot:closeIcon>
+                        <img src="@/static/images/delete.png" class="close" />
+                    </template>
+                    <div class="public-class password-container">
+                        <div class="title">完成以下操作，修改账号密码</div>
+                        <div class="form-box">
+                            <div class="form-item">
+                                <label class="label">原密码</label>
+                                <a-input-password size="small" :visibilityToggle="false" v-model:value="passwordForm.original" />
+                            </div>
+                            <div class="form-item">
+                                <label class="label">新密码</label>
+                                <a-input-password size="small" :visibilityToggle="false" v-model:value="passwordForm.new" />
+                            </div>
+                            <div class="form-item">
+                                <label class="label">确认新密码</label>
+                                <a-input-password size="small" :visibilityToggle="false" v-model:value="passwordForm.confirm" />
+                            </div>
+                        </div>
+                        <div @click="updateUserPassword" class="confirm-btn">修改密码</div>
+                    </div>
+                </a-modal>
+            </div>
             <div class="submit-btn" @click="submitInfo">保存信息</div>
         </div>
         <nav-bottom></nav-bottom>
@@ -184,7 +258,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from "vue";
+import { defineComponent, reactive, Ref, ref } from "vue";
 import { UserOutlined, SmileOutlined, PlaySquareOutlined } from '@ant-design/icons-vue';
 import NavBottom from '@/components/NavBottom.vue';
 
@@ -240,6 +314,60 @@ export default defineComponent({
                 proficiency: 0,
             });
         }
+        // 验证码
+        const verificationCode: Ref<string> = ref(''),
+            updatePhoneVisible: Ref<boolean> = ref(false);
+        /**
+         * 关闭手机对话框 清空数据
+         */
+        function hidePhoneModal(): void {
+            verificationCode.value = '';
+        }
+        /**
+         * 显示修改手机号对话框
+         */
+        function togglePhoneModal(value: boolean): void {
+            updatePhoneVisible.value = value;
+            if(!value) {
+                hidePhoneModal();
+            }
+        }
+        // 获取验证码间隔
+        const remainTime: Ref<number> = ref(0);
+        /**
+         * 计算验证码倒计时
+         */
+        function computedVerificationCode(): void {
+            remainTime.value = 60;
+            const timer = setInterval(() => {
+                if(remainTime.value > 0) remainTime.value --;
+                else clearInterval(timer);
+            }, 1000)
+        }
+        /**
+         * 发送验证码
+         */
+        function sendVerificationCode(): void {
+            if(remainTime.value === 0) {
+                computedVerificationCode();
+            }
+        }
+        // 绑定手机号是否是第二步
+        const isSecondStep: Ref<boolean> = ref(false);
+        interface BindPhoneItem{
+            number: string | number;
+            code: string | number;
+        }
+        const bindPhone: BindPhoneItem = reactive({
+            number: '',
+            code: '',
+        });
+        /**
+         * 绑定手机号下一步
+         */
+        function nextPhoneStep(): void {
+            isSecondStep.value = true;
+        }
         /**
          * 修改手机号
          * @return { void }
@@ -248,13 +376,46 @@ export default defineComponent({
             console.log('修改手机号');
             
         }
+        // 是否显示修改密码框
+        const updatePasswordVisible: Ref<boolean> = ref(false);
+        interface PassWord {
+            original?: string;
+            new?: string;
+            confirm?: string;
+        }
+        const passwordForm: PassWord = reactive({
+            original: '',
+            new: '',
+            confirm: '',
+        })
+        /**
+         * 密码对话框清空数据
+         */
+        function hidePasswordModal(): void {
+            passwordForm.original = '';
+            passwordForm.new = '';
+            passwordForm.confirm = '';
+        }
+        /**
+         * 显示修改密码对话框
+         */
+        function togglePasswordModal(value: boolean): void {
+            updatePasswordVisible.value = value;
+            if(!value) {
+                hidePasswordModal();
+            }
+        }
         /**
          * 修改密码
          * @return { void }
          */
         function updateUserPassword(): void {
-            console.log('修改密码');
+            if(passwordForm.new === passwordForm.confirm) {
-            
+                if(passwordForm.original === '') {
+                    console.log(passwordForm.new);
+                    togglePasswordModal(false);
+                }
+            }
         }
         /**
          * 提交表单
@@ -264,12 +425,25 @@ export default defineComponent({
             console.log('12');
             
         }
-
         return {
+            modalNode: () => document.getElementsByClassName('modal-container')[0],
             formData,
             updateUserName,
             addSpeakLang,
+            verificationCode,
+            updatePhoneVisible,
+            hidePhoneModal,
+            sendVerificationCode,
+            remainTime,
+            isSecondStep,
+            nextPhoneStep,
+            bindPhone,
             updatePhoneNumber,
+            togglePhoneModal,
+            updatePasswordVisible,
+            togglePasswordModal,
+            hidePasswordModal,
+            passwordForm,
             updateUserPassword,
             submitInfo,
         }
@@ -428,6 +602,109 @@ export default defineComponent({
                 }
             }
         }
+        ::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;
+                .public-class {
+                    .title {
+                        font-size: 11px;
+                        font-weight: bold;
+                        color: #111111;
+                    }
+                    .form-box {
+                        .form-item {
+                            display: flex;
+                            align-items: center;
+                            .label {
+                                font-size: 11px;
+                                font-weight: 500;
+                                color: #7F7F7F;
+                            }
+                        }
+                    }
+                    .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;
+                    }
+                }
+                .password-container {
+                    .title {
+                        margin-bottom: 30px;
+                    }
+                    .form-box {
+                        margin-bottom: 50px;
+                        .form-item {
+                            .label {
+                                width: 90px;
+                                margin-right: 10px;
+                            }
+                            &:not(:last-child) {
+                                margin-bottom: 28px;
+                            }
+                            .ant-input-password {
+                                width: 170px;
+                                font-size: 11px;
+                                color: #3F3F3F;
+                                // .ant-input {
+                                //     letter-spacing: 0;
+                                // }
+                            }
+                        }
+                    }
+                }
+                .phone-container {
+                    .sub-title {
+                        margin: 16px 0 40px;
+                    }
+                    .form-box {
+                        margin-bottom: 50px;
+                        .form-item {
+                            .label {
+                                width: 80px;
+                                margin-right: 10px;
+                            }
+                            .ant-input {
+                                width: 170px;
+                                font-size: 11px;
+                                color: #3F3F3F;
+                                margin-right: 28px;
+                            }
+                        }
+                    }
+                }
+                .second-step {
+                    .title {
+                        margin-bottom: 33px;
+                    }
+                    .form-box {
+                        .form-item {
+                            &:not(:last-child) {
+                                margin-bottom: 28px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
         .submit-btn {
             width: 63px;
             height: 23px;

src/views/mine/RankList.vue

@@ -0,0 +1,173 @@
+<template>
+    <div class="rank-list">
+        <div class="list-thead">
+            <div class="ranking-number">排名</div>
+            <div class="user-info">姓名</div>
+            <div class="hits">视频点击量</div>
+        </div>
+        <div class="list-body">
+            <div class="rank-item" v-for="item in rankData" :key="item.uid" :class="{'mine-item': item.uid === 8 }">
+                <div class="other-rank" :class="{'mine-rank': item.uid === 8 }">
+                    <div class="ranking-number">
+                        <span v-if="item.uid === 8" class="mine">我的成绩</span>
+                        <div v-else>
+                            <img src="@/static/images/rank_first.png" class="rank-img" v-if="item.id === 1" />
+                            <img src="@/static/images/rank_second.png" class="rank-img" v-else-if="item.id === 2" />
+                            <img src="@/static/images/rank_third.png" class="rank-img" v-else-if="item.id === 3" />
+                            <span class="other" v-else>{{ item.id }}</span>
+                        </div>
+                    </div>
+                    <div class="user-info">
+                        <a-avatar :size="34">
+                            <template v-slot:icon><UserOutlined /></template>
+                        </a-avatar>
+                        <span class="name">{{ item.name }}</span>
+                    </div>
+                    <div class="hits">{{ item.value }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent, reactive } from 'vue';
+import { UserOutlined } from '@ant-design/icons-vue';
+
+export default defineComponent({
+    name: 'RankList',
+    components: {
+        UserOutlined
+    },
+    setup() {
+        interface RankItem {
+            uid: number;
+            id: number;
+            avatar: string;
+            name: string;
+            value: number | string;
+        }
+        const rankData: Array<RankItem> = reactive([{
+            uid: 1,
+            id: 1,
+            avatar: '',
+            name: '1',
+            value: '123456',
+        }, {
+            uid: 2,
+            id: 2,
+            avatar: '',
+            name: '12',
+            value: '12345',
+        }, {
+            uid: 3,
+            id: 3,
+            avatar: '',
+            name: '123',
+            value: '1234',
+        }, {
+            uid: 4,
+            id: 4,
+            avatar: '',
+            name: '1234',
+            value: '123',
+        }, {
+            uid: 5,
+            id: 5,
+            avatar: '',
+            name: '15',
+            value: '12',
+        }, {
+            uid: 6,
+            id: 6,
+            avatar: '',
+            name: '61',
+            value: '1',
+        }]);
+        return {
+            rankData
+        }
+    }
+})
+</script>
+<style lang="scss" scoped>
+.rank-list {
+    @mixin rank-public {
+        display: flex;
+        align-items: center;
+        .ranking-number {
+            width: 135px;
+            text-align: left;
+        }
+        .user-info {
+            flex: 1;
+        }
+        .hits {
+            width: 170px;
+            text-align: center;
+        }
+    }
+    .list-thead {
+        @include rank-public;
+        font-size: 11px;
+        font-weight: 500;
+        color: #656565;
+        margin-bottom: 24px;
+    }
+    .list-body {
+        .rank-item {
+            position: relative;
+            &:not(:last-child) {
+                margin-bottom: 28px;
+            }
+            .other-rank {
+                @include rank-public;
+            }
+            .mine-rank {
+                margin: 28px 0;
+                width: 100%;
+                display: flex;
+                align-items: center;
+                height: 56px;
+                position: absolute;
+                top: 0;
+                left: -14px;
+                background: #FFFFFF;
+                box-shadow: 0px 3px 24px 0px rgba(58, 58, 58, 0.31);
+                border-radius: 7px;
+                box-sizing: border-box;
+                padding-left: 14px;
+            }
+            .ranking-number {
+                .rank-img {
+                    width: 27px;
+                    height: 28px;
+                }
+                .other {
+                    display: inline-block;
+                    width: 27px;
+                    text-align: center;
+                }
+                .mine {
+                    color: #0DBBA3;
+                }
+            }
+            .user-info {
+                .name {
+                    margin-left: 11px;
+                    font-size: 11px;
+                    font-weight: bold;
+                    color: #000000;
+                }
+            }
+            .hits {
+                font-size: 11px;
+                font-weight: bold;
+                color: #111111;
+            }
+        }
+        .mine-item {
+            padding-bottom: 80px;
+        }
+    }
+}
+</style>

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>