dev/dcp-web-gate/src_old/views/UpdatePwd.vue

<template>
  <div class="view-product" style="overflow-y: hidden;">
        <div>
            <div class="ibox-content" style="padding-top: 20px">
                <layui-form v-if="step == 1">
                    <template>
                        <layui-item style="text-align: center;">
                            <layui-inline-select
                                label="修改方式"
                                v-model="type"
                                required="required"
                                :items="types"></layui-inline-select>
                        </layui-item>  
                    </template>
                </layui-form>
                <layui-form v-if="step == 2" style="text-align: center;">
                    <layui-item v-if="type == 1">
                        <layui-inline-input
                                label="旧密码"
                                type="password"
                                placeholder="旧密码"
                                lay-verify="required"
                                v-model='originalPwd'
                        ></layui-inline-input>
                    </layui-item>
                    <div v-if="type == 2" class="layui-form layui-form-pane">
                        <div class="layui-form-item" style="padding-left: 102px;">
                            <div class="layui-inline">
                                <label title="验证码" class="layui-form-label layui-required">{{ '短信验证码' }}</label>
                                <div class="layui-input-block">
                                    <input
                                        v-model="code"
                                        lay-verify="required"
                                        autocomplete="off"
                                        placeholder="验证码"
                                        class="layui-input"
                                        style="width: 192px;margin-right: 8px;"
                                    >
                                </div>
                            </div>
                            <button
                                @click="getCode"
                                class="layui-btn layui-btn-primary btn_yz"
                                style="float: right;margin-right: 12px;display: block;width: 90px;">{{ getMobileCodeText() }}</button>
                        </div>
                    </div>
                    <layui-item>
                        <layui-inline-input
                                label="新密码"
                                placeholder="新密码"
                                type="password"
                                lay-verify="required"
                                v-model='newPwd'
                        ></layui-inline-input>
                    </layui-item>
                    <layui-item>
                        <layui-inline-input
                                label="确认新密码"
                                type="password"
                                placeholder="确认新密码"
                                lay-verify="required"
                                v-model='surePwd'
                        ></layui-inline-input>
                    </layui-item>
                    <hr class="layui-bg-blue" style="margin-bottom: 8px">
                    <div>
                        <ul class="pwd-rule">
                            <li style="font-weight: bold;">密码规则：</li>
                            <li>1. 密码长度：8-20位；</li>
                            <li>2. 密码格式：必须包含大写字母、小写字母和数字，并且符合安全规定。</li>
                            <li></li>
                        </ul>
                    </div>
                    <!-- <layui-inline :style="{width:'100%'}" class="layui-footer">
                        <div style="text-align:center;padding: 4px 0px;">
                            <button class="layui-btn layui-btn-lg layui-btn-blue" @click="saveUpatePwd()" ><i class="fa fa-save"></i> 保存</button>
                            <button class="layui-btn layui-btn-lg layui-btn-red" @click="closeUpdateFrame()"><i class="fa fa-times"></i> 关闭</button>
                        </div>
                    </layui-inline> -->
                </layui-form>
            </div>
        </div>
        <layui-inline class="btn-group-center step_1 layui-footer">
            <button v-if="step == 1" @click.stop="nextStep" class="layui-btn layui-btn-lg layui-btn-blue"><i class="fa fa-arrow-right"></i> 下一步</button>
            <button v-if="step == 2" class="layui-btn layui-btn-lg layui-btn-blue" @click="saveUpatePwd()" ><i class="fa fa-save"></i> 保存</button>
            <button @click="close" class="layui-btn layui-btn-lg layui-btn-red"><i class="fa fa-times"></i> 关闭</button>
        </layui-inline>
	</div>
</template>

<script>
import { getDicts } from '@/api/dict'
import { updatePwd, updatePwdLogout, getSmsCode, resetPwd } from '@/api/user'
import {formatDate} from "@/utils/formatUtils";
//import jssha from 'jssha';
var jsSHA = require("jssha");

import BaseModal from '@/views/base/BaseModal';

    export default {
        extends: BaseModal,
        data() {
            return {
               originalPwd:null,
               newPwd:null,
               surePwd:null,
               step: 1,
               type: 1,
               types: [
                    {
                        label: '旧密码',
                        value: 1
                    },
                    {
                        label: '短信验证码',
                        value: 2
                    }
               ],
               code: '',
               wait_timer: false,
            }
        },
        computed: {
            
        },
        mounted() {
            this.initData();
        },
        methods: {
            nextStep: function() {
                if (!this.type) {
                    msg("请先选择修改方式");
                    return;
                }
                this.step++; 
            },
            initData: function () {
               var vParent = this.$parent;
            },
            closeUpdateFrame:function(){
              this.$layer.close(this.layerid);
            },
            saveUpatePwd: function() {

                if(this.type == 1 && (this.originalPwd=="" || this.originalPwd==null)){
                    alert("旧密码不能为空");
                    return;
                }
                if(this.newPwd=="" || this.newPwd==null){
                    alert("新密码不能为空");
                    return;
                }
                if(this.surePwd=="" || this.surePwd==null){
                    alert("确认密码不能为空");
                    return;
                }
                if(this.originalPwd==this.newPwd){
                    alert("新密码和旧密码不能一样");
                    return;
                }
                if(this.surePwd!=this.newPwd){
                    alert("新密码和确认密码不一致");
                    return;
                }

                if (this.type == 2) {
                    let curUser = this.curUser || {};
                    resetPwd(curUser.username, this.newPwd, this.surePwd, this.code).then(res => {
                        alert("密码修改成功，请使用新密码重新登录系统！");
                        var interval= setInterval(() => {
                            updatePwdLogout().then(() => {
                               location.reload();
                            }).catch(() => { })
                            clearInterval(interval);
                        }, 2000);
                    }).catch(error => {
                        
                    });
                    return;
                }

                this.submitHandler((token) => {
                    var originalPwd=this.originalPwd;
                    var newPwd = this.newPwd;
                    var surePwd = this.surePwd;

                    var salt= token; 
                    var shaObj = new jsSHA("SHA-1", "TEXT");
                    shaObj.update(originalPwd);
                    originalPwd = shaObj.getHash("B64");
                    originalPwd = "{SHA}"+originalPwd+salt;
                    var shaObj2 = new jsSHA("SHA-1", "TEXT");
                    shaObj2.update(originalPwd);
                    originalPwd="{SHA}" + shaObj2.getHash("B64");
                    var params = {originalPwd:originalPwd,newPwd:newPwd,surePwd:surePwd};
                    updatePwd(params, token).then(result => {
                        var router = this.$router;
                        alert("密码修改成功，请使用新密码重新登录系统！");
                        var interval= setInterval(() => {
                            updatePwdLogout().then(() => {
                               location.reload();
                            }).catch(() => { })
                            clearInterval(interval);
                        }, 2000);
                    }).catch((error) => {
                        this.resetToken(error);
                    });
                });
            },
            getCode: function() {
                // 加载层-风格4
                var layId = layer.msg("验证码获取中", {
                    icon: 16,
                    shade: 0.01,
                    time: 0
                });
                let curUser = this.curUser || {};
                getSmsCode(this.account || curUser.username, 'Tx').then(res => {
                    layer.close(layId);
                    alert(res.msg);
                    // 验证码倒计时
                    var that = this;
                    this.wait_timer = 120;
                    var timer_interval = setInterval(function() {
                        if (that.wait_timer > 0) {
                            that.wait_timer--;
                        } else {
                            clearInterval(timer_interval);
                        }
                    }, 1000);
                }).catch(error => {
                    // alert("获取验证码超时，获取失败。");
                    layer.close(layId);
                });
            },
            // 验证码倒计时显示内容
            getMobileCodeText: function() {
                if (this.wait_timer > 0) {
                    $('.btn_yz').addClass('layui-btn-disabled').attr('disabled',"true");
                    return this.wait_timer + "s后获取";
                }

                if (this.wait_timer === 0) {
                    $('.btn_yz').removeClass('layui-btn-disabled').removeAttr('disabled',"false");
                    return "重新获取";
                }

                if (this.wait_timer === false) {
                    return "获取验证码";
                }
            }
        }, 
        filters: {
            formatDate(dateTime) {
                let date = new Date(dateTime);
                return formatDate(date, 'YYYY-MM-DD HH:mm:ss')
            },
            formatDate1(dateTime) {
                let date = new Date(dateTime);
                return formatDate(date, 'YYYY')
            },
        },
        watch: {},
    }
</script>

<style scoped>
    .pwd-rule {
        text-align: left;
    }
    .pwd-rule li {
        padding-bottom: 4px;
    }
    .layui-footer {
        width: 100%;
        text-align: center;
        position: fixed;
        bottom: 0;
        height: 44px;
        line-height: 44px;
        padding: 0 15px;
        background-color: #eee;
    }
</style>