From fc101307e36778f2e613c5e0161b4eefd50f5a0c Mon Sep 17 00:00:00 2001
From: ghusermoon <2673031505@qq.com>
Date: Tue, 29 Sep 2020 17:45:45 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E8=AF=9D=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                         |   1 +
 src/static/images/rank_first.png  | Bin 0 -> 6504 bytes
 src/static/images/rank_second.png | Bin 0 -> 6446 bytes
 src/static/images/rank_third.png  | Bin 0 -> 6906 bytes
 src/views/mine/Archives.vue       | 289 +++++++++++++++++++++++++++++-
 src/views/mine/RankList.vue       | 173 ++++++++++++++++++
 src/views/mine/ReleaseWebcast.vue |  89 ++++++++-
 7 files changed, 545 insertions(+), 7 deletions(-)
 create mode 100644 src/static/images/rank_first.png
 create mode 100644 src/static/images/rank_second.png
 create mode 100644 src/static/images/rank_third.png
 create mode 100644 src/views/mine/RankList.vue

diff --git a/README.md b/README.md
index 023c281..bd86548 100644
--- a/README.md
+++ b/README.md
@@ -20,5 +20,6 @@
 
 ## components 
 - Menu 左侧导航
+- NavBottom 底部导航
 
 ## views
diff --git a/src/static/images/rank_first.png b/src/static/images/rank_first.png
new file mode 100644
index 0000000000000000000000000000000000000000..b29b58a73d963b83974126b95b55e10ead781198
GIT binary patch
literal 6504
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
O0000<MNUMnLSTZoF@OXB

literal 0
HcmV?d00001

diff --git a/src/static/images/rank_second.png b/src/static/images/rank_second.png
new file mode 100644
index 0000000000000000000000000000000000000000..d0c798d4a60683dd7d3ed9aa78100b0686b7578b
GIT binary patch
literal 6446
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
IM6N<$f~0du{{R30

literal 0
HcmV?d00001

diff --git a/src/static/images/rank_third.png b/src/static/images/rank_third.png
new file mode 100644
index 0000000000000000000000000000000000000000..4614f59a22e343852f9e00cfc74ff2e1c5452333
GIT binary patch
literal 6906
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
AasU7T

literal 0
HcmV?d00001

diff --git a/src/views/mine/Archives.vue b/src/views/mine/Archives.vue
index e3cd19b..7898307 100644
--- a/src/views/mine/Archives.vue
+++ b/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;
diff --git a/src/views/mine/RankList.vue b/src/views/mine/RankList.vue
new file mode 100644
index 0000000..ef05ccb
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/mine/ReleaseWebcast.vue b/src/views/mine/ReleaseWebcast.vue
index 3113423..f13e899 100644
--- a/src/views/mine/ReleaseWebcast.vue
+++ b/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>
\ No newline at end of file
-- 
2.47.2