忘记密码

src/views/forgotPwd.vue

@@ -0,0 +1,361 @@
+<template>
+  <div class="forgot-container">
+    <h2 class="title-big">找回密码</h2>
+        <el-form label-position="top" label-width="80px" ref="loginCodeForm" :model="loginCodeForm" class="form" :hide-required-asterisk="true" :rules="rulesCode" v-if="stepIndex===0">
+            <el-form-item label="手机号" prop="phone">
+                <el-input v-model="loginCodeForm.phone" autocomplete="off" placeholder="请输入完整手机号" @blur="handleTrim('loginCodeForm','phone')" maxlength="20">
+                    <template slot="prepend">+86</template>
+                </el-input>
+            </el-form-item>
+            <el-form-item label="验证码" prop="code" class="code-box">
+                <el-input v-model="loginCodeForm.code" autocomplete="off" placeholder="请输入验证码" class="code-input" @blur="handleTrim('loginCodeForm','code')" @input="handeleInput" maxlength="20">
+                </el-input>
+                <el-button type="primary" @click="sendCode('time','phone','verificationCodeShow')" size="small" class="sendCode" @input="handeleInput">
+                    {{ verificationCodeShow ? time+'s' : '发送验证码' }}
+                </el-button>
+            </el-form-item>
+            <el-form-item class="btn-box">
+                <el-button type="primary" @click="onSubmitPassword('loginCodeForm')" size="small" :disabled="submitDis" :loading="loading">下一步</el-button>
+                <el-button @click="onCancel('loginCodeForm')" size="small">取消</el-button>
+            </el-form-item>
+        </el-form>
+        <div v-else class="result-box">
+            <img src="../assets/mail-check-line.png" />
+            <p>密码已通过短信发送至您的手机中，请注意查收。</p>
+            <div class="btn-box">
+                <el-button type="primary" @click="onCancel('loginCodeForm')" size="small">确定</el-button>
+            </div>
+        </div>
+  </div>
+</template>
+
+<script>
+import { getLogin } from "@/api/ajax";
+import { setToken } from "@/utils/auth";
+export default {
+  name: "forgotPwd",
+  props: [],
+  data() {
+    const validatePhone = (rule, value, callback) => {
+        if (value === '') {
+            callback(new Error('请输入手机号'));
+        } else {
+            let reg = /^1[3-9]\d{9}$/;
+            let result = reg.test(value);
+            if (result) {
+                callback();
+            } else {
+                callback(new Error('请输入正确的手机号'));
+            }
+        }
+    };
+    return {
+        loginCodeForm:{
+            type: 'ADMIN',
+            phone:'',
+            code:''
+        },
+        rulesCode:{
+            phone:[
+                { required: true, validator: validatePhone, trigger: 'blur' }
+            ],
+            code:[
+                { required: true, message: '请输入验证码', trigger: 'blur' }
+            ]
+        },
+        time: 60, //获取验证码的时间
+        verificationCodeShow: false, //是否已经获取了验证码
+        loading: false,
+        timer: null,
+        submitDis: true,
+        stepIndex: 0
+    };
+  },
+  watch: {
+    
+  },
+  methods: {
+    // 密码登录提交表单
+    onSubmitPassword(formName){
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.loading = true
+            let MethodName = "/OrgServer/LoginControl/ResetRandomPassword";
+            let data = {
+                    user_type:this.loginCodeForm.type,
+                    phone_or_email:this.loginCodeForm.phone,
+                    dynamic_verification_code:this.loginCodeForm.code,
+                    dynamic_verification_code_send_type:"SMS"
+                }
+            getLogin(MethodName, data)
+            .then((res) => {
+                this.loading = false
+                if(res.status===1){
+                    this.stepIndex++
+                }
+            })
+            .catch(() => {
+                this.loading = false
+                this.verificationCodeShow = false;
+                clearInterval(this.timer);
+                this.time = 60;
+            });
+          } else {
+            return false;
+          }
+        });
+    },
+    // 取消 恢复到修改前状态
+    onCancel(formName){
+        this.$emit('cancelFot')
+    },
+    // 发送验证码
+    sendCode(time,phone,flag,obj){
+        let this_ = this;
+        if(this_[time] != 60){
+            return
+        }
+        this_.timer = null;
+        if (this_.loginCodeForm[phone]) {
+            let reg = /^1[3-9]\d{9}$/;
+            let result = reg.test(this_.loginCodeForm[phone]);
+            if (!result) {
+                this_.$message.warning('请输入正确的手机号');
+                return
+            }
+            this_[flag] = true;
+            this_.timer = setInterval(() => {
+                this_[time]--;
+                if (this_[time] == 0) {
+                    this_[flag] = false;
+                    clearInterval(this_.timer);
+                    this_.timer = null;
+                    this_[time] = 60;
+                }
+            }, 1000);
+            let MethodName = "/OrgServer/LoginControl/SendVerificationCode";
+            let data = {
+                send_type: 'SMS',
+                phone_or_email: this_.loginCodeForm.phone,
+            };
+            getLogin(MethodName, data).then((res) => {
+            }).catch(()=>{
+                this_[flag] = false;
+                clearInterval(this_.timer);
+                this_.timer = null;
+                this_[time] = 60;
+            });
+        } else {
+            this_.$message.warning('请先输入手机号');
+        }
+    },
+    // 去掉前后空格
+    handleTrim(form,fild){
+        this[form][fild] = this[form][fild].trim()
+        if(this.loginCodeForm.phone&&this.loginCodeForm.code){
+            this.submitDis = false
+        }else{
+            this.submitDis = true
+        }
+    },
+    handeleInput(){
+        if(this.loginCodeForm.phone&&this.loginCodeForm.code){
+            this.submitDis = false
+        }else{
+            this.submitDis = true
+        }
+    }
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.forgot-container{
+    background: #FFFFFF;
+    padding: 64px 72px;
+    .title-big{
+        font-weight: 400;
+        font-size: 32px;
+        line-height: 40px;
+        margin: 0;
+        color: #1D2129;
+    }
+    .title-name{
+        font-size: 14px;
+        line-height: 22px;
+        color: #86909C;
+        margin: 0 0 40px 0;
+    }
+    .tabs-box{
+        display: flex;
+        a{
+            font-size: 14px;
+            line-height: 22px;
+            color: #4E5969;
+            border-radius: 100px;
+            padding: 5px 16px;
+            margin-right: 16px;
+            &:hover{
+                background: #F2F3F5;
+            }
+            &.active{
+                background: #F2F3F5;
+                font-weight: 500;
+                color: #165DFF;
+            }
+        }
+    }
+    .form{
+        margin-top: 40px;
+        .show-icon{
+            cursor: pointer;
+            color: #4E5969;
+        }
+        .forgotPwd{
+            font-size: 14px;
+            line-height: 22px;
+            color: #165DFF;
+        }
+    }
+}
+.result-box{
+    text-align: center;
+    padding-top: 46px;
+    img{
+        width: 64px;
+    }
+    p{
+        width: 260px;
+        color: #000;
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 24px; 
+        margin: 16px auto 62px auto;
+    }
+    .el-button{
+        width: 100%;
+    }
+}
+</style>
+<style lang="scss">
+.forgot-container{
+    .form{
+        .el-form-item__label{
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 22px;
+            color: #4E5969;
+            padding-bottom: 8px;
+        }
+        .userAgree-box{
+            .el-form-item__content{
+                display: flex;
+                justify-content: space-between;
+                line-height: 22px;
+            }
+            .el-checkbox-group{
+                flex: 1;
+                .el-checkbox{
+                    color: rgba(0, 0, 0, 0.88);
+                    font-weight: 400;
+                }
+            }
+        }
+        .btn-box{
+            .el-button{
+                width: 100%;
+            }
+            .el-button+.el-button{
+                margin-left: 0;
+                margin-top: 8px;
+            }
+        }
+        .el-button--primary{
+            background: #165DFF;
+            border-color: #165DFF;
+            border-radius: 2px;
+            &:hover{
+                background: #4080FF;
+                border-color: #4080FF;
+            }
+            &:focus{
+                background: #0E42D2;
+                border-color: #0E42D2;
+            }
+        }
+        .el-button--default{
+            background: #F2F3F5;
+            border-radius: 2px;
+            border: none;
+            color: #4E5969;
+            &:hover{
+                background: #E5E6EB;
+            }
+            &:focus{
+                background: #C9CDD4;
+            }
+        }
+        .code-box{
+            .el-form-item__content{
+                display: flex;
+            }
+        }
+        .code-input{
+            height: 32px;
+            .el-input__inner{
+                border-radius: 4px 0 0 4px;
+            }
+        }
+        .sendCode{
+            border-radius: 0 4px 4px 0;
+            margin-top: 1px;
+            width: 92px;
+            flex-shrink: 0;
+        }
+        .el-form-item__content,.el-input__icon{
+            line-height: 32px;
+            color: #4E5969 !important;
+        }
+        .el-input__inner{
+            height: 32px;
+            color: #1D2129;
+            background: #F2F3F5;
+            border: none;
+        }
+        .el-textarea__inner,.el-input-group__prepend{
+            color: #1D2129;
+        }
+        .el-checkbox__input.is-checked+.el-checkbox__label{
+            color: #165DFF;
+        }
+        .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
+            background: #165DFF;
+            border-color: #165DFF;
+        }
+        .el-input-group__prepend{
+            width: 54px;
+            height: 32px;
+            border: none;
+            background: #F2F3F5;
+            border-radius: 2px 0px 0px 2px;
+            line-height: 32px;
+            text-align: center;
+            padding: 0;
+        }
+        .el-input-group--prepend{
+            display: flex;
+            .el-input__inner{
+                margin-left: 8px;
+                flex: 1;
+            }
+        }
+    }
+    .el-button--primary.is-disabled, .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover{
+        background-color: #a0cfff;
+        border-color: #a0cfff;
+    }
+}
+</style>

src/views/login.vue

@@ -52,7 +52,7 @@
                     <el-checkbox-group v-model="loginCodeForm.userAgreeCheck">
                         <el-checkbox label="1" name="userAgreeCheck"><a @click.prevent="lookUserAgreement">阅读并同意《用户协议》</a></el-checkbox>
                     </el-checkbox-group>
-                    <a class="forgotPwd">忘记密码？</a>
+                    <a class="forgotPwd" @click="forgotPwd">忘记密码？</a>
                 </el-form-item>
                 <el-form-item class="btn-box">
                     <el-button type="primary" @click="onSubmitPassword('loginCodeForm')" size="small" :loading="loading">登录</el-button>
@@ -61,6 +61,16 @@
             </el-form>
         </div>
     </div>
+    <el-dialog
+        :visible.sync="forgotPwdFlag"
+        :show-close="false"
+        :close-on-click-modal="false"
+        :modal-append-to-body="false"
+        width="504px"
+        class="login-dialog"
+        v-if="forgotPwdFlag">
+        <forgot-pwd @cancelFot="cancelFot"></forgot-pwd>
+    </el-dialog>
   </div>
   
 </template>
@@ -68,9 +78,11 @@
 <script>
 import { getLogin } from "@/api/ajax";
 import { setToken } from "@/utils/auth";
+import ForgotPwd from "./forgotPwd.vue"
 export default {
   name: "Login",
   props: [],
+  components: { ForgotPwd },
   data() {
     const validatePhone = (rule, value, callback) => {
         if(this.tabsIndex===1){
@@ -127,7 +139,8 @@ export default {
         time: 60, //获取验证码的时间
         verificationCodeShow: false, //是否已经获取了验证码
         loading: false,
-        timer: null
+        timer: null,
+        forgotPwdFlag: false
     };
   },
   watch: {
@@ -233,6 +246,13 @@ export default {
     // 去掉前后空格
     handleTrim(form,fild){
         this[form][fild] = this[form][fild].trim()
+    },
+    // 忘记密码
+    forgotPwd(){
+        this.forgotPwdFlag = true
+    },
+    cancelFot(){
+        this.forgotPwdFlag = false
     }
   },
   mounted() {

src/views/system_config/OrderSetting.vue

@@ -28,11 +28,11 @@
                         width="64">
                     </el-table-column>
                     <el-table-column
-                        prop="period_num"
+                        prop="issue_no"
                         label="总期数"
                         width="152">
                         <template slot-scope="scope">
-                            <el-input v-model="scope.row.period_num" placeholder="输入" maxlength="20"></el-input>
+                            <el-input v-model="scope.row.issue_no" placeholder="输入" maxlength="20"></el-input>
                         </template>
                     </el-table-column>
                     <el-table-column
@@ -125,7 +125,7 @@ export default {
         typeValue: 11,
         tableList:[
             {
-                period_num: '',
+                issue_no: '',
                 comb_count: '',
                 shelve_date: '',
                 price: ''
@@ -160,7 +160,6 @@ export default {
         table.forEach(item => {
             item.comb_count = item.comb_count ? item.comb_count * 1 : 1
             item.price = item.price * 1
-            item.period_num = item.period_num *1
         });
         let data = {
             goods_type: 2,
@@ -219,7 +218,7 @@ export default {
         }else{
             for(let i = 0; i < Number(type); i++){
                 let obj = {
-                    period_num: '',
+                    issue_no: '',
                     comb_count: '',
                     shelve_date: '',
                     price: ''