YM
2024-05-11 227029c7dff6ebc0acd6b3ba07b234a22ec06521
src/pages/forgetPass/forgetPass.vue
@@ -1,53 +1,114 @@
<template>
   <view class="container flex flex-center" style="align-items: flex-start;">
  <view class="container flex flex-center" style="align-items: flex-start">
      <view class="repository relative">
         <view class="Ttop flex flex-center flex-wrap" style="flex-direction: column;">
      <view
        class="Ttop flex flex-center flex-wrap"
        style="flex-direction: column"
      >
            <view class=""></view>
            <view class="" ref="Rtop">
               <text class="login"></text>
               <text
                  style="font-size: .36rem;letter-spacing: 4rpx;vertical-align: middle;font-family: cursive;font-weight: bold;">中国医学人物知识库</text>
            style="
              font-size: 0.36rem;
              letter-spacing: 4rpx;
              vertical-align: middle;
              font-family: cursive;
              font-weight: bold;
            "
            >中国医学人物知识库</text
          >
            </view>
            <view></view>
         </view>
         <!-- 重置密码 -->
         <el-card>
            <view class="LoginTop"
               style="display: flex; justify-content: space-between;margin-bottom: .47rem;align-items: center;">
        <view
          class="LoginTop"
          style="
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.47rem;
            align-items: center;
          "
        >
               <!-- <view class="" style="color: #244A7B;padding-bottom: .47rem;font-size: .3rem;font-weight: bold;">用户注册</view> -->
               <view class="LoginBg"></view>
               <view class="" @click="BacktoLogin"
                  style="cursor: pointer;font-size: .14rem;color: #244A7B;font-weight: normal;">
          <view
            class=""
            @click="BacktoLogin"
            style="
              cursor: pointer;
              font-size: 0.14rem;
              color: #244a7b;
              font-weight: normal;
            "
          >
                  返回登录
               </view>
            </view>
            <el-form :hide-required-asterisk="true" ref="formLogin2" label-position="right" :rules="rules"
               :model="resetDataPass">
               <el-form-item label="手机/邮箱" prop="cellphoneORmailbox">
        <el-form
          :hide-required-asterisk="true"
          ref="formLogin2"
          label-position="right"
          :rules="rules"
          :model="resetDataPass"
        >
          <el-form-item label="手机" prop="cellphoneORmailbox">
                  <el-input v-model="resetDataPass.cellphoneORmailbox"></el-input>
               </el-form-item>
               <el-form-item label="验证码" prop="verifyCode">
                  <view class="verifyCode relative">
                     <el-input v-model="resetDataPass.verifyCode"></el-input>
                     <view @click="verifyCodeClick" class="yzm"
                        style="position: absolute;right: 0%;top: 0%;color: #244A7B;font-size: .14rem;font-weight: 500;">
                        获取验证码</view>
              <view
                @click="verifyCodeClick"
                class="yzm"
                style="
                  position: absolute;
                  right: 0%;
                  top: 0%;
                  color: #244a7b;
                  font-size: 0.14rem;
                  font-weight: 500;
                "
              >
                {{
                  countdown > 0 ? `${countdown}秒后重新获取` : "获取验证码"
                }}</view
              >
                  </view>
               </el-form-item>
               <el-form-item label="新密码" prop="newPass">
                  <el-input type="password" v-model="resetDataPass.newPass"></el-input>
            <el-input
              type="password"
              v-model="resetDataPass.newPass"
            ></el-input>
               </el-form-item>
               <el-form-item label="确认新密码" prop="checkPass">
                  <el-input type="password" v-model="resetDataPass.checkPass"></el-input>
            <el-input
              type="password"
              v-model="resetDataPass.checkPass"
            ></el-input>
               </el-form-item>
               <el-form-item class="btn">
                  <el-button class="font-family"
                     style="margin-top: 30rpx; font-weight:900;font-size: 30rpx; width: 100%;background-color: #244a7b;color: #fff;padding: 30rpx;"
                     size="medium" @click="Login2('formLogin2')">重置密码</el-button>
            <el-button
              class="font-family"
              style="
                margin-top: 30rpx;
                font-weight: 900;
                font-size: 30rpx;
                width: 100%;
                background-color: #244a7b;
                color: #fff;
                padding: 30rpx;
              "
              size="medium"
              @click="Login2('formLogin2')"
              >重置密码</el-button
            >
               </el-form-item>
            </el-form>
         </el-card>
      </view>
      <view class="hua"></view>
      <!-- 底部人物背景图左侧 -->
@@ -60,33 +121,24 @@
</template>
<script>
   import {
      getRestPassword,
      getverifyCode
   } from '@/api/index.js'
   import {
      encryptAES
   } from '@/utils/Crypto.js'
   import {
      nextTick
   } from "vue";
   import Footer1 from '@/components/footer/footer.vue'
   import {
      Message
   } from 'element-ui'
import { getRestPassword, getverifyCode } from "@/api/index.js";
import { encryptAES } from "@/utils/Crypto.js";
import { nextTick } from "vue";
import Footer1 from "@/components/footer/footer.vue";
import { Message } from "element-ui";
   export default {
      components: {
         Footer1
    Footer1,
      },
      data() {
         // 密码
         var validatePass = (rule, value, callback) => {
            if (value === '') {
               callback(new Error('请输入密码'));
      if (value === "") {
        callback(new Error("请输入密码"));
            } else {
               if (this.resetDataPass.checkPass !== '') {
        if (this.resetDataPass.checkPass !== "") {
                  this.$nextTick(() => {
                     this.$refs.formLogin.validateField('checkPass');
            this.$refs.formLogin.validateField("checkPass");
                  });
               }
               callback();
@@ -94,15 +146,17 @@
         };
         // 确认密码
         var validatePass2 = (rule, value, callback) => {
            if (value === '') {
               callback(new Error('请再次输入密码'));
      if (value === "") {
        callback(new Error("请再次输入密码"));
            } else if (value !== this.resetDataPass.newPass) {
               callback(new Error('两次输入密码不一致!'));
        callback(new Error("两次输入密码不一致!"));
            } else {
               callback();
            }
         };
         return {
      //验证码倒计时
      countdown: 0,
            // 用户注册
            isRegister: false,
            // 用户登录
@@ -113,62 +167,70 @@
            isResetPass: false,
            // 注册用户账号的校验
            rules: {
               loginID: [{
        loginID: [
          {
                  required: true,
                  message: '请输入登录账号',
                  trigger: 'blur'
               }],
               newPass: [{
            message: "请输入登录账号",
            trigger: "blur",
          },
        ],
        newPass: [
          {
                     required: true,
                     message: '请输入密码',
                     trigger: 'blur'
            message: "请输入密码",
            trigger: "blur",
                  },
                  {
                     min: 6,
                     max: 10,
                     message: '密码长度在 6 到 12 个字符',
                     trigger: 'blur'
            message: "密码长度在 6 到 12 个字符",
            trigger: "blur",
                  },
                  {
                     validator: validatePass,
                     trigger: 'blur'
                  }
            trigger: "blur",
          },
               ],
               checkPass: [{
        checkPass: [
          {
                  validator: validatePass2,
                  trigger: 'blur'
               }],
               cellphoneORmailbox: [{
            trigger: "blur",
          },
        ],
        cellphoneORmailbox: [
          {
                     required: true,
                     message: '请输入手机号或邮箱',
                     trigger: 'blur'
            message: "请输入手机号",
            trigger: "blur",
                  },
                  {
                     validator: this.validateContact,
                     trigger: 'blur'
                  }
            trigger: "blur",
          },
               ],
               verifyCode: [{
        verifyCode: [
          {
                  required: true,
                  message: '请输入验证码',
                  trigger: 'blur'
               }]
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
            },
            // 重置密码
            resetDataPass: {
               cellphoneORmailbox: '',
        cellphoneORmailbox: "",
               verifyCode: "",
               newPass: "",
               checkPass: ""
        checkPass: "",
            },
         }
    };
      },
      onLoad() {
         uni.getSystemInfo({
            success: function(info) {
               // console.log('屏幕的宽度:' + info.windowWidth);
               // console.log('屏幕的高度:' + info.windowHeight);
            }
      },
         });
      },
      mounted() {
@@ -178,18 +240,36 @@
         // 已有账号?返回登录
         BacktoLogin() {
            uni.redirectTo({
               url: '/pages/Login/Login'
            })
        url: "/pages/Login/Login",
      });
         },
         // 获取验证码
         async verifyCodeClick() {
            console.log('获取验证码');
      if (!this.resetDataPass.cellphoneORmailbox) {
        this.$message({
          message: "请输入手机!",
          type: "warning",
        });
        return false;
      }
      if (this.countdown > 0) {
        return;
      }
            let Obj = {
               communicateParam: this.resetDataPass.cellphoneORmailbox,
      };
      this.countdown = 60;
      const intervalId = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown -= 1;
        } else {
          clearInterval(intervalId);
            }
            await getverifyCode(Obj).then(res => {
               console.log(res, '验证码获取成功');
            })
      }, 1000);
      await getverifyCode(Obj).then((res) => {
        console.log(res, "验证码获取成功");
      });
         },
         // 列表项跳转
         listDataClick(item) {
@@ -198,8 +278,8 @@
            // uni.setStorageSync('globalData', { id: 123, name: 'example' });
            if (item.id == 1) {
               uni.navigateTo({
                  url: '/pages/character/detail?id=' + item.id
               })
          url: "/pages/character/detail?id=" + item.id,
        });
            } else if (item.id == 2) {
               console.log(item.name);
               // uni.navigateTo({
@@ -207,16 +287,16 @@
               // })
            } else if (item.id == 3) {
               uni.navigateTo({
                  url: '/pages/academicGenres/index?id=' + item.id
               })
          url: "/pages/academicGenres/index?id=" + item.id,
        });
            } else if (item.id == 4) {
               uni.navigateTo({
                  url: '/pages/territory/territory?id=' + item.id
               })
          url: "/pages/territory/territory?id=" + item.id,
        });
            } else if (item.id == 5) {
               uni.navigateTo({
                  url: '/pages/TcmSystem/TcmSystem?id=' + item.id
               })
          url: "/pages/TcmSystem/TcmSystem?id=" + item.id,
        });
            }
         },
@@ -228,49 +308,53 @@
            if (regPhone.test(value) || regEmail.test(value)) {
               callback(); // 校验通过
            } else {
               callback(new Error('请输入正确的手机号或邮箱')); // 校验失败
        callback(new Error("请输入正确的手机号")); // 校验失败
            }
         },
         getElementWidth() {
            this.$nextTick(() => {
               var width = this.$refs.Rtop.$el.clientWidth;
               this.Rtop1 = width + 50;
               console.log('Element width:', width);
            })
        console.log("Element width:", width);
      });
         },
         // 忘记密码
         Login2(formName) {
            let Obj = {
               "communicateParam": this.resetDataPass.cellphoneORmailbox, //手机或邮箱
               "verifyCode": this.resetDataPass.verifyCode, //验证码
               "newPassword": encryptAES(this.resetDataPass.newPass) //新密码
            }
        communicateParam: this.resetDataPass.cellphoneORmailbox, //手机或邮箱
        verifyCode: this.resetDataPass.verifyCode, //验证码
        newPassword: encryptAES(this.resetDataPass.newPass), //新密码
      };
            console.log(Obj);
            this.$refs[formName].validate(async (valid) => {
               if (valid) {
                  await getRestPassword(Obj).then(res => {
                     console.log(res, '接口');
          await getRestPassword(Obj).then((res) => {
            console.log(res, "接口");
                     if (res.success) {
                        console.log('忘记密码的接口拿到数据了');
              console.log("忘记密码的接口拿到数据了");
                        uni.navigateTo({
                           url: '/pages/Login/Login'
                        })
                url: "/pages/Login/Login",
              });
                     } else {
                        Message.error(res.errorText || '')
              Message.error(res.errorText || "");
                     }
                  })
          });
                  // alert('submit!成功');
                  // uni.redirectTo({
                  //    url: '/pages/Login/Login'
                  // })
          this.$message({
            message: "密码重置成功",
            type: "success",
          });
               } else {
                  console.log('error submit!!失败');
          console.log("error submit!!失败");
                  return false;
               }
            });
         }
      }
   }
    },
  },
};
</script>
<style scoped>
   /* 
@@ -306,7 +390,7 @@
   @media screen and (min-width:2560px)and (max-width:3840px) {
      .LoginBg {
         margin: 0 !important;
         height: .3rem !important;
    height: 0.3rem !important;
      }
      ::v-deep .el-card {
@@ -315,28 +399,28 @@
      }
      ::v-deep .el-card__body {
         padding: .25rem .5rem !important;
    padding: 0.25rem 0.5rem !important;
      }
      ::v-deep .el-form {
         padding-left: .1rem !important;
    padding-left: 0.1rem !important;
      }
      ::v-deep .el-form-item__error {
         font-size: .13rem !important;
    font-size: 0.13rem !important;
      }
      ::v-deep .el-input__inner {
         height: .35rem !important;
         font-size: .14rem;
    height: 0.35rem !important;
    font-size: 0.14rem;
      }
      ::v-deep .el-form-item__label {
         display: flex;
         align-items: center;
         justify-content: flex-end;
         margin-right: .2rem !important;
         width: .7rem;
    margin-right: 0.2rem !important;
    width: 0.7rem;
      }
      .hua {
@@ -344,7 +428,7 @@
      }
      .LoginTop {
         margin-bottom: .4rem !important;
    margin-bottom: 0.4rem !important;
      }
      .yzm {
@@ -361,7 +445,7 @@
      }
      .btn {
         margin-bottom: .1rem !important;
    margin-bottom: 0.1rem !important;
      }
      .btn ::v-deep .el-button {
@@ -376,12 +460,12 @@
      }
      .asdf {
         margin-bottom: .1rem !important;
    margin-bottom: 0.1rem !important;
      }
      .LoginBg {
         margin: 0 !important;
         height: .3rem !important;
    height: 0.3rem !important;
      }
      ::v-deep .el-card {
@@ -390,19 +474,19 @@
      }
      ::v-deep .el-card__body {
         padding: .25rem .5rem !important;
    padding: 0.25rem 0.5rem !important;
      }
      ::v-deep .el-form {
         padding-left: .1rem !important;
    padding-left: 0.1rem !important;
      }
      ::v-deep .el-form-item__error {
         font-size: .13rem !important;
    font-size: 0.13rem !important;
      }
      ::v-deep .el-input__inner {
         height: .35rem !important;
    height: 0.35rem !important;
      }
      .hua {
@@ -410,7 +494,7 @@
      }
      .LoginTop {
         margin-bottom: .25rem !important;
    margin-bottom: 0.25rem !important;
      }
      .yzm {
@@ -435,15 +519,14 @@
      }
      .asdf {
         margin-bottom: .1rem !important;
    margin-bottom: 0.1rem !important;
      }
   }
   @media screen and (min-width: 1920px) and (max-width:2560px) {
      .LoginBg {
         margin: 0 !important;
         height: .3rem !important;
    height: 0.3rem !important;
      }
      ::v-deep .el-card {
@@ -452,19 +535,19 @@
      }
      ::v-deep .el-card__body {
         padding: .25rem .5rem !important;
    padding: 0.25rem 0.5rem !important;
      }
      ::v-deep .el-form {
         padding-left: .1rem !important;
    padding-left: 0.1rem !important;
      }
      ::v-deep .el-form-item__error {
         font-size: .13rem !important;
    font-size: 0.13rem !important;
      }
      ::v-deep .el-input__inner {
         height: .35rem !important;
    height: 0.35rem !important;
      }
      .hua {
@@ -472,7 +555,7 @@
      }
      .LoginTop {
         margin-bottom: .25rem !important;
    margin-bottom: 0.25rem !important;
      }
      .yzm {
@@ -497,18 +580,16 @@
      }
      .asdf {
         margin-bottom: .1rem !important;
    margin-bottom: 0.1rem !important;
      }
   }
   .LoginBg {
      width: 1.2rem;
      height: .37rem;
  height: 0.37rem;
      background: url(@/static/image/重置密码.png) no-repeat 0 0;
      background-size: 100% 100%;
   }
   ::v-deep .el-card {
      border-radius: 0;
@@ -519,12 +600,11 @@
   }
   ::v-deep .el-card__body {
      padding: .26rem .58rem;
  padding: 0.26rem 0.58rem;
   }
   .btn>>>.el-form-item__content {
      margin-left: 0 !important;
   }
   ::v-deep .el-form-item__content {
@@ -537,8 +617,8 @@
      border-bottom: 1px solid #2d476a;
      border-radius: 0;
      padding: 0;
      height: .4rem;
      line-height: .4rem;
  height: 0.4rem;
  line-height: 0.4rem;
   }
   ::v-deep .el-form-item__error {
@@ -553,18 +633,17 @@
      border-color: #2d476a !important;
   }
   ::v-deep .el-form-item__label {
      min-width: .6rem;
  min-width: 0.6rem;
      padding: 0;
      color: #244A7B;
      font-size: .14rem;
  color: #244a7b;
  font-size: 0.14rem;
      font-weight: 500;
      margin-right: .29rem;
  margin-right: 0.29rem;
   }
   ::v-deep .el-form-item {
      margin-bottom: .22rem;
  margin-bottom: 0.22rem;
      display: flex;
   }
@@ -578,7 +657,6 @@
   .s1 {
      background-image: url(@/static/image/search.png);
   }
   .s2 {
@@ -606,7 +684,7 @@
         align-items: center;
         .Ttop {
            margin-top: .38rem;
      margin-top: 0.38rem;
            margin-bottom: 1.22rem;
         }
@@ -615,23 +693,22 @@
            margin: 10rpx 0;
         }
      }
   }
   .login {
      width: .52rem;
      height: .52rem;
  width: 0.52rem;
  height: 0.52rem;
      display: inline-block;
      vertical-align: middle;
      margin-right: .19rem;
  margin-right: 0.19rem;
      background: url(@/static/image/logo.png) no-repeat 0 0;
      background-size: 100% 100%;
   }
   .rrr {
      position: absolute;
      right: .53rem;
      bottom: .36rem;
  right: 0.53rem;
  bottom: 0.36rem;
      width: 2.5rem;
      height: 3.07rem;
      opacity: 1;
@@ -664,7 +741,6 @@
      /* height: 52rpx; */
   }
   .secretary {
      width: 1300rpx !important;
      height: 50rpx;
@@ -672,9 +748,6 @@
      /* flex-wrap: wrap; */
      padding: 0 20px;
      text-align: center;
      li {
         background-color: #fff;
@@ -688,15 +761,12 @@
         padding: 50rpx 65rpx;
         /*          padding: 58rpx 128rpx 88rpx; */
         text-align: center;
         background: #EBF4FF;
    background: #ebf4ff;
      }
   }
   .Bbottom {
      display: flex;
      justify-content: center;
   }
</style>