theluyuan/beelink
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

对话框

Browse Source
This commit is contained in:
ghusermoon
2020-09-29 17:45:45 +08:00
parent 27c2dbe86f
commit fc101307e3
7 changed files with 545 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

289
src/views/mine/Archives.vue
View File

@@ -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;