app-AgricultureSmart/vue/src/views/Login.vue

<template>
  <div class="container">
    <div style="width: 400px; padding: 30px; background-color: white; border-radius: 5px;">
      <div style="text-align: center; font-size: 20px; margin-bottom: 20px; color: #333">欢迎登陆</div>
      <el-form :model="form" :rules="rules" ref="formRef">
        <el-form-item prop="username">
          <el-input prefix-icon="el-icon-user" placeholder="请输入账号" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" show-password  v-model="form.password"></el-input>
        </el-form-item>

        <el-form-item>
          <el-select prop= "role" v-model="form.role" placeholder="请选择权限"  >
            <el-option
                v-for="item in roleOptions.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button style="width: 100%; background-color: #333; border-color: #333; color: white" @click="login">登 录</el-button>
        </el-form-item>
        <div style="display: flex; align-items: center">
          <div style="flex: 1"></div>
          <div style="flex: 1; text-align: right">
<!--            <el-link @click="wxLogin()"> 微信登录 </el-link>  -->
            注册店家： <a href="/register">注册</a>
          </div>
        </div>
      </el-form>

    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      form: { role: 'STOREKEEPER' },
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ]
      },
      roleOptions:{
        options:[
          {
            value:"STOREKEEPER",
            label:"店铺管理员"
          },
          {
            value:"ADMIN",
            label:"超级管理员"
          }
        ]
      }
    }
  },
  created() {

  },
  methods: {
    login() {
      // 登陆校验
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          // 验证通过
          this.$request.post('/login', this.form).then(res => {
            if (res.code === '200') {
              localStorage.setItem("xm-user", JSON.stringify(res.data))  // 存储用户数据
              console.log("yes")
              if(res.data.role == 'STOREKEEPER')
              this.$router.push('/')  // 跳转主页
              else if(res.data.role== 'ADMIN')
                this.$router.push('/adminMgr')
              this.$message.success('登录成功')
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    // 微信登陆接口
    wxLogin(){
      this.$request({
        method: 'get',
        url: '/wxLogin',
        responseType: 'blob' // 设置响应类型为blob，以接收二进制数据
      })
          .then(response => {
            // 创建URL对象，并将Blob对象转换为图片URL
            const imgUrl = URL.createObjectURL(response);

            // 打开一个新的浏览器窗口，并展示二维码图片
            const newWindow = window.open('', '微信登陆','width=400,height=400');
            newWindow.document.write(`<div class="container" style="display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            ">
    <h1 style="font-size: 36px; margin-bottom: 20px;">微信扫码登录</h1>
    <div>
        <img src="${imgUrl}" class="qrcode" alt="QR Code" style="width: 200px;height: auto;margin-top: 20px;">
    </div>
</div>
`);
          })
          .catch(error => {
            console.error('Error fetching QR code:', error);
          });
    }
  }
}
</script>

<style scoped>
.container {
  height: 100vh;
  overflow: hidden;
  background-image: url("@/assets/imgs/bg.jpg");
  background-size: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
}
a {
  color: #2a60c9;
}
</style>