对话框
This commit is contained in:
parent
27c2dbe86f
commit
fc101307e3
BIN
src/static/images/rank_first.png
Normal file
BIN
src/static/images/rank_first.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
BIN
src/static/images/rank_second.png
Normal file
BIN
src/static/images/rank_second.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
BIN
src/static/images/rank_third.png
Normal file
BIN
src/static/images/rank_third.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
@ -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;
|
||||
|
||||
173
src/views/mine/RankList.vue
Normal file
173
src/views/mine/RankList.vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user