1

YM

2024-07-26 c423765d8a5ff0c58d23bb0a31af7df6c1fad95c

 src/pages/Login/Login.vue

@@ -1,49 +1,35 @@
<template>
  <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 ></view>
        <view  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="
          <text style="
              font-size: 0.36rem;
              letter-spacing: 4rpx;
              vertical-align: middle;
              font-family: cursive;
              font-weight: bold;
            "
            >中国历代医学人物知识库</text
          >
            ">中国历代医学人物知识库</text>
        </view>
        <view></view>
      </view>
      <el-card>
        <!-- 用户登录   v-if="isLogin"-->
        <view
          class="LoginTop"
          style="
        <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 > </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">
            <input v-model="loginData.loginID" @confirm="Login('formLogin1')"></input>
          </el-form-item>
@@ -51,9 +37,7 @@
            <input type="password" v-model="loginData.pass" @confirm="Login('formLogin1')"></input>
          </el-form-item>
          <el-form-item class="btn">
            <el-button
              class="font-family"
              style="
            <el-button class="font-family" style="
                margin-top: 0.47rem;
                font-weight: 900;
                font-size: 0.3rem;
@@ -61,30 +45,15 @@
                background-color: #244a7b;
                color: #fff;
                padding: 0.16rem;
              "
              size="medium"
              @click="Login('formLogin1')"
              >登录</el-button
            >
              " size="medium" @click="Login('formLogin1')">登录</el-button>
          </el-form-item>
          <view
            
            style="display: flex; font-size: 0.14rem; color: #244a7b"
          >
            <view
              
              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  style="display: inline-block; margin: 0 20rpx">
            <view style="display: inline-block; margin: 0 20rpx">
              |
            </view>
            <view
              
              style="display: inline-block; cursor: pointer"
              @click="quickRegister"
              >快速注册
            <view style="display: inline-block; cursor: pointer" @click="quickRegister">快速注册
            </view>
          </view>
        </el-form>
@@ -101,271 +70,271 @@
</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";
export default {
  components: {
    Footer1
  },
  data() {
    // 密码
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.registerData.checkPass !== "") {
          this.$nextTick(() => {
            this.$refs.formLogin.validateField("checkPass");
  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
    },
    data() {
      // 密码
      var validatePass = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入密码"));
        } else {
          if (this.registerData.checkPass !== "") {
            this.$nextTick(() => {
              this.$refs.formLogin.validateField("checkPass");
            });
          }
          callback();
        }
      };
      // 确认密码
      var validatePass2 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.registerData.pass) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      };
      return {
        // 用户注册
        isRegister: false,
        // 用户登录
        isLogin: true,
        // 修改密码
        isAmendPass: false,
        // 重置密码
        isResetPass: false,
        // 注册用户账号的校验
        rules: {
          loginID: [
            {
              required: true,
              message: "请输入登录账号",
              trigger: "blur"
            }
          ],
          pass: [
            {
              required: true,
              message: "请输入密码",
              trigger: "blur"
            },
            {
              min: 6,
              max: 12,
              message: "密码长度在 6 到 12 个字符",
              trigger: "blur"
            },
            {
              validator: validatePass,
              trigger: "blur"
            }
          ],
          checkPass: [
            {
              validator: validatePass2,
              trigger: "blur"
            }
          ],
          cellphoneORmailbox: [
            {
              required: true,
              message: "请输入邮箱地址",
              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: [
            {
              required: true,
              message: "请输入登录账号",
              trigger: "blur"
            }
          ],
          pass: [
            {
              required: true,
              message: "请输入密码",
              trigger: "blur"
            },
            {
              min: 6,
              max: 12,
              message: "密码长度在 6 到 12 个字符",
              trigger: "blur"
            }
          ]
        },

        // 登录注册框
        loginTrue: true,
        Rtop1: 0,
        value: "sdfdsf",
        // 登录用户账号
        loginData: {
          // 账号
          loginID: "",
          pass: ""
        },
        // 书籍数据
        listData: [
          {
            name: "历代人物",
            id: 1
          },
          {
            name: "家学传承",
            id: 2
          },
          {
            name: "学术图谱",
            id: 6
          },
          {
            name: "学术流派",
            id: 3
          },
          {
            name: "地域图谱",
            id: 4
          },
          // {
          //   name: "中医医事制度",
          //   id: 5
          // }
        ]
      };
    },
    onLoad() {
      uni.getSystemInfo({
        success: function (info) {
          // console.log('屏幕的宽度：' + info.windowWidth);
          // console.log('屏幕的高度：' + info.windowHeight);
        }
      });
    },
    mounted() {
      this.getElementWidth();
    },
    methods: {
      // 列表项跳转
      listDataClick(item) {
        // 在当前页面设置全局变量
        // uni.setStorageSync('globalData', { id: 123, name: 'example' });
        if (item.id == 1) {
          uni.navigateTo({
            url: "/pages/character/detail?id=" + item.id
          });
        } else if (item.id == 2) {
          // uni.navigateTo({
          //    url:'/pages/character/detail?id='+item.id
          // })
        } else if (item.id == 3) {
          uni.navigateTo({
            url: "/pages/academicGenres/index?id=" + item.id
          });
        } else if (item.id == 4) {
          uni.navigateTo({
            url: "/pages/territory/territory?id=" + item.id
          });
        } else if (item.id == 5) {
          uni.navigateTo({
            url: "/pages/TcmSystem/TcmSystem?id=" + item.id
          });
        }
        callback();
      }
    };
    // 确认密码
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerData.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      // 用户注册
      isRegister: false,
      // 用户登录
      isLogin: true,
      // 修改密码
      isAmendPass: false,
      // 重置密码
      isResetPass: false,
      // 注册用户账号的校验
      rules: {
        loginID: [
          {
            required: true,
            message: "请输入登录账号",
            trigger: "blur"
          }
        ],
        pass: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          {
            min: 6,
            max: 12,
            message: "密码长度在 6 到 12 个字符",
            trigger: "blur"
          },
          {
            validator: validatePass,
            trigger: "blur"
          }
        ],
        checkPass: [
          {
            validator: validatePass2,
            trigger: "blur"
          }
        ],
        cellphoneORmailbox: [
          {
            required: true,
            message: "请输入邮箱地址",
            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: [
          {
            required: true,
            message: "请输入登录账号",
            trigger: "blur"
          }
        ],
        pass: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          {
            min: 6,
            max: 12,
            message: "密码长度在 6 到 12 个字符",
            trigger: "blur"
          }
        ]
      },

      // 登录注册框
      loginTrue: true,
      Rtop1: 0,
      value: "sdfdsf",
      // 登录用户账号
      loginData: {
        // 账号
        loginID: "",
        pass: ""
      },
      // 书籍数据
      listData: [
        {
          name: "历代人物",
          id: 1
        },
        {
          name: "家学传承",
          id: 2
        },
        {
          name: "学术流派",
          id: 6
        },
        {
          name: "学术图谱",
          id: 3
        },
        {
          name: "地域图谱",
          id: 4
        },
        // {
        //   name: "中医医事制度",
        //   id: 5
        // }
      ]
    };
  },
  onLoad() {
    uni.getSystemInfo({
      success: function (info) {
        // console.log('屏幕的宽度：' + info.windowWidth);
        // console.log('屏幕的高度：' + info.windowHeight);
      }
    });
  },
  mounted() {
    this.getElementWidth();
  },
  methods: {
    // 列表项跳转
    listDataClick(item) {
      // 在当前页面设置全局变量
      // uni.setStorageSync('globalData', { id: 123, name: 'example' });
      if (item.id == 1) {
        uni.navigateTo({
          url: "/pages/character/detail?id=" + item.id
        });
      } else if (item.id == 2) {
        // uni.navigateTo({
        //    url:'/pages/character/detail?id='+item.id
        // })
      } else if (item.id == 3) {
        uni.navigateTo({
          url: "/pages/academicGenres/index?id=" + item.id
        });
      } else if (item.id == 4) {
        uni.navigateTo({
          url: "/pages/territory/territory?id=" + item.id
        });
      } else if (item.id == 5) {
        uni.navigateTo({
          url: "/pages/TcmSystem/TcmSystem?id=" + item.id
        });
      }
    },
    // 忘记密码
    forgetPass() {
      uni.redirectTo({
        url: "/pages/forgetPass/forgetPass"
      });
    },
    // 快速注册
    quickRegister() {
      uni.redirectTo({
        url: "/pages/Register/Register"
      });
    },
    // 验证码校验
    validateVerificationCode(rule, value, callback) {
      if (value !== "123456") {
        callback(new Error("验证码错误"));
      } else {
        callback();
      }
    },
    getElementWidth() {
      this.$nextTick(() => {
        var width = this.$refs.Rtop.$el.clientWidth;
        this.Rtop1 = width + 50;
      });
    },
    // 用户登录
    async Login(formName) {
      let Obj = {
        username: this.loginData.loginID,
        // encryptAES(this.loginData.pass) | this.loginData.pass
        password: encryptAES(this.loginData.pass)
      };
      let res = await getLogin(Obj);
      if (res.success) {
        this.$message.success("登录成功");
        // 将token存储再本地中
        window.localStorage.setItem("access_token", res.results.token);
        // await getUserInfo().then((res) => {
        // });
        // 将账号存入到vuex中
        this.$store.dispatch("setUserName", res.object.username);
      // 忘记密码
      forgetPass() {
        uni.redirectTo({
          url: "/pages/index/index"
          url: "/pages/forgetPass/forgetPass"
        });
      } else {
        this.$message.error(res.errorText);
        this.loginData.pass = "";
      }
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // alert('submit!成功');
          // uni.redirectTo({
          //    url: '/pages/index/index'
          // })
      },
      // 快速注册
      quickRegister() {
        uni.redirectTo({
          url: "/pages/Register/Register"
        });
      },
      // 验证码校验
      validateVerificationCode(rule, value, callback) {
        if (value !== "123456") {
          callback(new Error("验证码错误"));
        } else {
          console.log("error submit!!失败");
          return false;
          callback();
        }
      });
      },
      getElementWidth() {
        this.$nextTick(() => {
          var width = this.$refs.Rtop.$el.clientWidth;
          this.Rtop1 = width + 50;
        });
      },
      // 用户登录
      async Login(formName) {
        let Obj = {
          username: this.loginData.loginID,
          // encryptAES(this.loginData.pass) | this.loginData.pass
          password: encryptAES(this.loginData.pass)
        };
        let res = await getLogin(Obj);
        if (res.success) {
          this.$message.success("登录成功");
          // 将token存储再本地中
          window.localStorage.setItem("access_token", res.results.token);
          // await getUserInfo().then((res) => {
          // });
          // 将账号存入到vuex中
          this.$store.dispatch("setUserName", res.object.username);
          uni.redirectTo({
            url: "/pages/index/index"
          });
        } else {
          this.$message.error(res.errorText);
          this.loginData.pass = "";
        }
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            // alert('submit!成功');
            // uni.redirectTo({
            //    url: '/pages/index/index'
            // })
          } else {
            console.log("error submit!!失败");
            return false;
          }
        });
      }
    }
  }
};
  };
</script>

<style scoped>
/*    @media screen and (max-width:1366px) {
  /*    @media screen and (max-width:1366px) {
      ::v-deep .el-card {
         top: 50% !important;
      }
@@ -417,11 +386,11 @@
      }
   } */

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

/* 
  /* 
   @media screen and (min-width: 1920px) and (max-width:2560px) {
      ::v-deep .el-card {
         top: 80% !important;
@@ -470,7 +439,7 @@
      }
   } */

/*    @media screen and (min-width:2560px)and (max-width:3840px) {
  /*    @media screen and (min-width:2560px)and (max-width:3840px) {
      .LoginBg {
         margin: 0 !important;
      }
@@ -546,87 +515,87 @@

   } */

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

::v-deep .el-card {
  border-radius: 0;
  width: 5.42rem;
  /* height: 4.75rem; */
  position: absolute;
  top: 80%;
}
  ::v-deep .el-card {
    border-radius: 0;
    width: 5.42rem;
    /* height: 4.75rem; */
    position: absolute;
    top: 80%;
  }

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

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

::v-deep uni-input {
  border: none;
  border-bottom: 1px solid #2d476a;
  border-radius: 0;
}
  ::v-deep uni-input {
    border: none;
    border-bottom: 1px solid #2d476a;
    border-radius: 0;
  }

::v-deep .el-form-item__error {
  /* display: none; */
}
  ::v-deep .el-form-item__error {
    /* display: none; */
  }

::v-deep .input.invalid:focus {
  border-color: #2d476a !important;
}
  ::v-deep .input.invalid:focus {
    border-color: #2d476a !important;
  }

::v-deep uni-input:invalid {
  border-color: #2d476a !important;
}
  ::v-deep uni-input:invalid {
    border-color: #2d476a !important;
  }

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

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

.ss1 {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 40rpx;
  height: 40rpx;
  background-size: 100% 100%;
}
  .ss1 {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 40rpx;
    height: 40rpx;
    background-size: 100% 100%;
  }

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

.s2 {
  background-image: url(@/static/image/question.png);
}
  .s2 {
    background-image: url(@/static/image/question.png);
  }

.s3 {
  background-image: url(@/static/image/question.png);
}
  .s3 {
    background-image: url(@/static/image/question.png);
  }

.container {
  background: url(@/static/image/bg1.png);
  width: 100vw;
  height: 100vh;
  .container {
    background: url(@/static/image/bg1.png);
    width: 100vw;
    height: 100vh;
    color: #fff;
  }

  color: #fff;

  .repository {
  .container .repository {
    width: 100% !important;
    /* margin-top: 19px; */
    /* height: 68%; */
@@ -635,73 +604,77 @@
    justify-content: space-around;
    align-items: center;

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

    .r-top {
      font-size: 40rpx !important;
      margin: 10rpx 0;
    }
  }
}

.login {
  width: 0.52rem;
  height: 0.52rem;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.19rem;
  background: url(@/static/image/logo.png) no-repeat 0 0;
  background-size: 100% 100%;
}
  .container .repository .Ttop {
    margin-top: 0.38rem;
    margin-bottom: 1.22rem;
  }

.rrr {
  position: absolute;
  right: 0.53rem;
  bottom: 0.36rem;
  width: 2.5rem;
  height: 3.07rem;
  opacity: 1;
  background: url(@/static/image/bg4.png);
  background-size: 100% 100%;
}
  .container .repository .r-top {
    font-size: 40rpx !important;
    margin: 10rpx 0;
  }

.hua {
  width: 13.81rem;
  height: 5.965rem;
  position: absolute;
  background: url(@/static/image/bg3.png) no-repeat 0 0;
  background-size: 100% 100%;
}
  .login {
    width: 0.52rem;
    height: 0.52rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.19rem;
    background: url(@/static/image/logo.png) no-repeat 0 0;
    background-size: 100% 100%;
  }

/* 底部人物背景图  */
.fff {
  background: url(@/static/image/bg2.png) no-repeat 0 0;
  background-size: 100% 100%;
  width: 2.74rem;
  height: 4.52rem;
  position: fixed;
  bottom: 0;
  z-index: 9999999999999;
  left: 0;
}
  .rrr {
    position: absolute;
    right: 0.53rem;
    bottom: 0.36rem;
    width: 2.5rem;
    height: 3.07rem;
    opacity: 1;
    background: url(@/static/image/bg4.png);
    background-size: 100% 100%;
  }

::v-deep .uni-easyinput__content {
  border-radius: 30rpx !important;
  /* height: 52rpx; */
}
  .hua {
    width: 13.81rem;
    height: 5.965rem;
    position: absolute;
    background: url(@/static/image/bg3.png) no-repeat 0 0;
    background-size: 100% 100%;
  }

.secretary {
  width: 1300rpx !important;
  height: 50rpx;
  /* height: 80%; */
  /* flex-wrap: wrap; */
  padding: 0 20px;
  text-align: center;
  /* 底部人物背景图  */
  .fff {
    background: url(@/static/image/bg2.png) no-repeat 0 0;
    background-size: 100% 100%;
    width: 2.74rem;
    height: 4.52rem;
    position: fixed;
    bottom: 0;
    z-index: 9999999999999;
    left: 0;
  }

  li {
  ::v-deep .uni-easyinput__content {
    border-radius: 30rpx !important;
    /* height: 52rpx; */
  }

  .secretary {
    width: 1300rpx !important;
    height: 50rpx;
    /* height: 80%; */
    /* flex-wrap: wrap; */
    padding: 0 20px;
    text-align: center;


  }

  .secretary li {
    background-color: #fff;
    color: black;
    height: 600rpx;
@@ -715,86 +688,85 @@
    text-align: center;
    background: #ebf4ff;
  }
}

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

.LoginBg {
  margin: 0 !important;
}
  .LoginBg {
    margin: 0 !important;
  }

::v-deep .el-card {
  top: 85% !important;
}
  ::v-deep .el-card {
    top: 85% !important;
  }

::v-deep uni-input {
  height: 0.4rem !important;
  font-size: 0.14rem;
}
  ::v-deep uni-input {
    height: 0.4rem !important;
    font-size: 0.14rem;
  }

.hua {
  height: 4rem !important;
}
  .hua {
    height: 4rem !important;
  }

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

::v-deep .el-card {
  top: 80% !important;
  padding: 0 !important;
}
  ::v-deep .el-card {
    top: 80% !important;
    padding: 0 !important;
  }

::v-deep .el-card__body {
  padding: 0.25rem 0.5rem !important;
}
  ::v-deep .el-card__body {
    padding: 0.25rem 0.5rem !important;
  }

::v-deep .el-form {
  padding-left: 0.1rem !important;
}
  ::v-deep .el-form {
    padding-left: 0.1rem !important;
  }

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

::v-deep uni-input {
  height: 0.44rem !important;
}
  ::v-deep uni-input {
    height: 0.44rem !important;
  }

.hua {
  height: 5rem !important;
}
  .hua {
    height: 5rem !important;
  }

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

.yzm {
  top: 15% !important;
}
  .yzm {
    top: 15% !important;
  }

.fff {
  width: 2.4rem !important;
  height: 4rem !important;
}
  .fff {
    width: 2.4rem !important;
    height: 4rem !important;
  }

.rrr {
  width: 2rem !important;
  height: 2.5rem !important;
}
  .rrr {
    width: 2rem !important;
    height: 2.5rem !important;
  }

.btn ::v-deep .el-button {
  margin-top: 0.2rem !important;
  /*       font-size: 0.2rem !important;
  .btn ::v-deep .el-button {
    margin-top: 0.2rem !important;
    /*       font-size: 0.2rem !important;
         width: 100%;
         padding: 0.12rem !important; */
}
  }

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