调整

YM

2024-05-27 0edf94722a0dcc338567fec7df76b2e0acd39b92

 src/pages/Login/Login.vue

@@ -1,26 +1,49 @@
<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=""></view>
            <view class="" ref="Rtop">
      <view
        class="Ttop flex flex-center flex-wrap"
        style="flex-direction: column"
      >
        <view ></view>
        <view  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>
            <!-- 用户登录   v-if="isLogin"-->
            <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 style="color: #244A7B;padding-bottom: .47rem;font-size: .3rem;font-weight: bold;">用户登录</view> -->
               <view class="LoginBg"></view>
               <view class=""> </view>
          <view > </view>
            </view>
            
            <el-form :hide-required-asterisk="true" ref="formLogin1" label-position="top" :rules="rules1"
               :model="loginData">
        <el-form
          :hide-required-asterisk="true"
          ref="formLogin1"
          label-position="top"
          :rules="rules1"
          :model="loginData"
        >
               <el-form-item label="登录账号" prop="loginID">
                  <el-input v-model="loginData.loginID"></el-input>
               </el-form-item>
@@ -28,15 +51,40 @@
                  <el-input type="password" v-model="loginData.pass"></el-input>
               </el-form-item>
               <el-form-item class="btn">
                  <el-button class="font-family"
                     style="margin-top: .47rem; font-weight:900;font-size: .3rem; width: 100%;background-color:#244A7B;color: #fff;padding: .16rem;"
                     size="medium" @click="Login('formLogin1')">登录</el-button>
            <el-button
              class="font-family"
              style="
                margin-top: 0.47rem;
                font-weight: 900;
                font-size: 0.3rem;
                width: 100%;
                background-color: #244a7b;
                color: #fff;
                padding: 0.16rem;
              "
              size="medium"
              @click="Login('formLogin1')"
              >登录</el-button
            >
               </el-form-item>
               <view class="" style="display: flex;font-size: .14rem;color: #244A7B;">
                  <view class="" style="display: inline-block;cursor: pointer;" @click="forgetPass">忘记密码
          <view
            
            style="display: flex; font-size: 0.14rem; color: #244a7b"
          >
            <view
              
              style="display: inline-block; cursor: pointer"
              @click="forgetPass"
              >忘记密码
                  </view>
                  <view class="" style="display: inline-block;margin: 0 20rpx;"> | </view>
                  <view class="" style="display: inline-block;cursor: pointer;" @click="quickRegister">快速注册
            <view  style="display: inline-block; margin: 0 20rpx">
              |
            </view>
            <view
              
              style="display: inline-block; cursor: pointer"
              @click="quickRegister"
              >快速注册
                  </view>
               </view>
            </el-form>
@@ -53,17 +101,10 @@
</template>

<script>
   import {
      encryptAES,decryptAES
   } from '@/utils/Crypto.js'
   import {
      nextTick
   } from "vue";
   import {
      getLogin,
      getUserInfo
   } from '@/api/index.js'
   import Footer1 from '@/components/footer/footer.vue'
import { encryptAES, decryptAES } from "@/utils/Crypto.js";
import { nextTick } from "vue";
import { getLogin, getUserInfo } from "@/api/index.js";
import Footer1 from "@/components/footer/footer.vue";
   export default {
      components: {
         Footer1
@@ -71,12 +112,12 @@
      data() {
         // 密码
         var validatePass = (rule, value, callback) => {
            if (value === '') {
               callback(new Error('请输入密码'));
      if (value === "") {
        callback(new Error("请输入密码"));
            } else {
               if (this.registerData.checkPass !== '') {
        if (this.registerData.checkPass !== "") {
                  this.$nextTick(() => {
                     this.$refs.formLogin.validateField('checkPass');
            this.$refs.formLogin.validateField("checkPass");
                  });
               }
               callback();
@@ -84,10 +125,10 @@
         };
         // 确认密码
         var validatePass2 = (rule, value, callback) => {
            if (value === '') {
               callback(new Error('请再次输入密码'));
      if (value === "") {
        callback(new Error("请再次输入密码"));
            } else if (value !== this.registerData.pass) {
               callback(new Error('两次输入密码不一致!'));
        callback(new Error("两次输入密码不一致!"));
            } else {
               callback();
            }
@@ -103,105 +144,118 @@
            isResetPass: false,
            // 注册用户账号的校验
            rules: {
               loginID: [{
        loginID: [
          {
                  required: true,
                  message: '请输入登录账号',
                  trigger: 'blur'
               },
		
            message: "请输入登录账号",
            trigger: "blur"
          }
               ],
               pass: [{
        pass: [
          {
                     required: true,
                     message: '请输入密码',
                     trigger: 'blur'
            message: "请输入密码",
            trigger: "blur"
                  },
                  {
                     min: 6,
                     max: 12,
                     message: '密码长度在 6 到 12 个字符',
                     trigger: 'blur'
            message: "密码长度在 6 到 12 个字符",
            trigger: "blur"
                  },
                  {
                     validator: validatePass,
                     trigger: 'blur'
            trigger: "blur"
                  }
               ],
               checkPass: [{
        checkPass: [
          {
                  validator: validatePass2,
                  trigger: 'blur'
               }],
               cellphoneORmailbox: [{
                     required: true,
                     message: '请输入邮箱地址',
                     trigger: 'blur'
                  },
                  {
                     type: 'email',
                     message: '请输入正确的邮箱地址',
                     trigger: ['blur', 'change']
            trigger: "blur"
                  }
               ],
               verifyCode: [{
        cellphoneORmailbox: [
          {
                     required: true,
                     message: '请输入验证码',
                     trigger: 'blur'
            message: "请输入邮箱地址",
            trigger: "blur"
                  },
                  {
                     validator: (rule, value, callback) => this.validateVerificationCode(rule, value, callback),
                     trigger: 'blur'
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        verifyCode: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur"
          },
          {
            validator: (rule, value, callback) =>
              this.validateVerificationCode(rule, value, callback),
            trigger: "blur"
                  }
               ]
            },
            rules1: {
               loginID: [{
        loginID: [
          {
                  required: true,
                  message: '请输入登录账号',
                  trigger: 'blur'
               }],
               pass: [{
            message: "请输入登录账号",
            trigger: "blur"
          }
        ],
        pass: [
          {
                     required: true,
                     message: '请输入密码',
                     trigger: 'blur'
            message: "请输入密码",
            trigger: "blur"
                  },
                  {
                     min: 6,
                     max: 12,
                     message: '密码长度在 6 到 12 个字符',
                     trigger: 'blur'
            message: "密码长度在 6 到 12 个字符",
            trigger: "blur"
                  }
               ],
        ]
            },

            // 登录注册框
            loginTrue: true,
            Rtop1: 0,
            value: 'sdfdsf',
      value: "sdfdsf",
            // 登录用户账号
            loginData: {
               // 账号
               loginID: '',
               pass: ''
        loginID: "",
        pass: ""
            },
            // 书籍数据
            listData: [{
                  name: '中医人物数据库',
                  id: 1,
               }, {
                  name: '世医医家数据库',
                  id: 2,
               }, {
                  name: '中医学术流派',
                  id: 3,
               }, {
                  name: '中医地域医谱',
                  id: 4,
               }, {
                  name: '中医医事制度',
                  id: 5,
      listData: [
        {
          name: "中医人物数据库",
          id: 1
               },

            ]
        {
          name: "世医医家数据库",
          id: 2
        },
        {
          name: "中医学术流派",
          id: 3
        },
        {
          name: "中医地域医谱",
          id: 4
        },
        {
          name: "中医医事制度",
          id: 5
         }
      ]
    };
      },
      onLoad() {
         uni.getSystemInfo({
@@ -217,96 +271,78 @@
      methods: {
         // 列表项跳转
         listDataClick(item) {
            console.log(item);
            // 在当前页面设置全局变量
            // 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({
               //    url:'/pages/character/detail?id='+item.id
               // })
            } 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
        });
            }

         },
         // 忘记密码
         forgetPass() {
            uni.redirectTo({
               url: '/pages/forgetPass/forgetPass'
            })
        url: "/pages/forgetPass/forgetPass"
      });
         },
         // 快速注册
         quickRegister() {
            uni.redirectTo({
               url: '/pages/Register/Register'
            })
        url: "/pages/Register/Register"
      });
         },
         // 验证码校验
         validateVerificationCode(rule, value, callback) {
            if (value !== '123456') {
               callback(new Error('验证码错误'));
      if (value !== "123456") {
        callback(new Error("验证码错误"));
            } else {
               callback();
            }
         },
         getElementWidth() {

            this.$nextTick(() => {
               var width = this.$refs.Rtop.$el.clientWidth;
               this.Rtop1 = width + 50;
               console.log('Element width:', width);
            })
      });
         },
         // 用户登录
         async Login(formName) {
            console.log(decryptAES(this.loginData.pass),'this.loginData.pass');
            let Obj = {
               username: this.loginData.loginID,
               // encryptAES(this.loginData.pass) | this.loginData.pass
               password: encryptAES(this.loginData.pass),
            }
            console.log(Obj, 'Obj');

            let res = await getLogin(Obj)
            console.log(res, 'sfdsf');
        password: encryptAES(this.loginData.pass)
      };
      let res = await getLogin(Obj);
            if (res.success) {
               uni.showToast({
                  title: '登录成功',
               })
        this.$message.success("登录成功");
               // 将token存储再本地中
               window.localStorage.setItem("access_token", res.results.token)
               await getUserInfo().then(res => {
                  console.log(res, 'rrrrrrrrrrsd');
               })
        window.localStorage.setItem("access_token", res.results.token);
        // await getUserInfo().then((res) => {
        // });
               // 将账号存入到vuex中
               this.$store.dispatch('setUserName',res.object.username)
					
        this.$store.dispatch("setUserName", res.object.username);
               uni.redirectTo({
                  url: '/pages/index/index'
               })
          url: "/pages/index/index"
        });
            } else {
               console.log('sdfdsfsdf');
               uni.showToast({
                  title: res.errorText,
                  icon: 'error'
               })
               // alert("sdfdsf")
               this.loginData.pass = ''
        this.$message.error(res.errorText);
        this.loginData.pass = "";
            }
            this.$refs[formName].validate(async (valid) => {
               if (valid) {
@@ -315,13 +351,13 @@
                  //    url: '/pages/index/index'
                  // })
               } else {
                  console.log('error submit!!失败');
          console.log("error submit!!失败");
                  return false;
               }
            });
         }
      }
   }
};
</script>

<style scoped>
@@ -378,7 +414,7 @@
   } */

   ::v-deep .el-form-item__error {
      font-size: .13rem !important;
  font-size: 0.13rem !important;
   }

   /* 
@@ -506,15 +542,13 @@

   } */


   .LoginBg {
      width: 1.2rem;
      height: .37rem;
  height: 0.37rem;
      background: url(@/static/image/用户登录.png) no-repeat 0 0;
      background-size: 100%;
      margin-bottom: .47rem;
  margin-bottom: 0.47rem;
   }


   ::v-deep .el-card {
      border-radius: 0;
@@ -525,19 +559,17 @@
   }

   ::v-deep .el-card__body {
      padding: .17rem .58rem;
  padding: 0.17rem 0.58rem;
   }

   .btn>>>.el-form-item__content {
      margin-left: 0 !important;
   }


   ::v-deep .el-input__inner {
      border: none;
      border-bottom: 1px solid #2d476a;
      border-radius: 0;

   }

   ::v-deep .el-form-item__error {
@@ -552,16 +584,15 @@
      border-color: #2d476a !important;
   }


   ::v-deep .el-form-item__label {
      padding: 0;
      color: #244A7B;
      font-size: .14rem;
  color: #244a7b;
  font-size: 0.14rem;
      font-weight: 500;
   }

   ::v-deep .el-form-item {
      margin-bottom: .25rem;
  margin-bottom: 0.25rem;
   }

   .ss1 {
@@ -574,7 +605,6 @@

   .s1 {
      background-image: url(@/static/image/search.png);

   }

   .s2 {
@@ -602,7 +632,7 @@
         align-items: center;

         .Ttop {
            margin-top: .38rem;
      margin-top: 0.38rem;
            margin-bottom: 1.22rem;
         }

@@ -611,23 +641,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;
@@ -660,7 +689,6 @@
      /* height: 52rpx; */
   }


   .secretary {
      width: 1300rpx !important;
      height: 50rpx;
@@ -668,9 +696,6 @@
      /* flex-wrap: wrap; */
      padding: 0 20px;
      text-align: center;




      li {
         background-color: #fff;
@@ -684,18 +709,14 @@
         padding: 50rpx 65rpx;
         /*          padding: 58rpx 128rpx 88rpx; */
         text-align: center;
         background: #EBF4FF;
    background: #ebf4ff;
      }
   }



   .Bbottom {
      display: flex;
      justify-content: center;

   }


   .LoginBg {
      margin: 0 !important;
@@ -706,8 +727,8 @@
   }

   ::v-deep .el-input__inner {
      height: .4rem !important;
      font-size: .14rem;
  height: 0.4rem !important;
  font-size: 0.14rem;
   }

   .hua {
@@ -716,7 +737,7 @@

   .LoginBg {
      margin: 0 !important;
      height: .3rem !important;
  height: 0.3rem !important;
   }

   ::v-deep .el-card {
@@ -725,19 +746,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: .44rem !important;
  height: 0.44rem !important;
   }

   .hua {
@@ -745,7 +766,7 @@
   }

   .LoginTop {
      margin-bottom: .4rem !important;
  margin-bottom: 0.4rem !important;
   }

   .yzm {
@@ -770,6 +791,6 @@
   }

   .asdf {
      margin-bottom: .1rem !important;
  margin-bottom: 0.1rem !important;
   }
</style>