cashier_desktop/src/views/login.vue

<template>
  <div class="login-container">
    <div class="logo">
      <el-image :src="logo" style="width: 180px"></el-image>
    </div>
    <div class="form-wrap">
      <!-- <div class="reg-wrap">
        <router-link :to="{ name: 'register' }">
          <el-link type="primary">注册</el-link>
        </router-link>
      </div> -->
      <div class="header">
        <span class="t1">银收客</span>
        <span class="t2">收银、库存、营销、支付等业务一体化解决方案</span>
      </div>
      <el-form ref="formRef" :model="form" :rules="rules" label-position="top" hide-required-asterisk>
        <!-- <el-form-item label="注册商户号" prop="shopCode">
          <el-input v-model="form.shopCode" placeholder="请输入注册商户号"></el-input>
        </el-form-item> -->
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入11位手机号码"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
          <el-input v-model="form.password" type="password" placeholder="请输入登录密码"></el-input>
        </el-form-item>
        <el-form-item>
          <div style="width: 100%; display: flex; justify-content: flex-end">
            <router-link :to="{ name: 'register' }">
              <el-link type="info">忘记密码</el-link>
            </router-link>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%" :loading="loading" @click="submitHandle">
            登录
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button plain style="width: 100%" @click="logout">退出</el-button>
        </el-form-item>
      </el-form>
      <div class="version">
        <el-text size="large">Ver2.1.6</el-text>
        <el-text size="large">陕西超掌柜科技有限公司</el-text>
      </div>
    </div>
  </div>
</template>

<script setup>
import logo from "@/assets/logo.png";
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ipcRenderer } from "electron";

import { RandomNumBoth } from '@/utils'

import { useUser } from "@/store/user.js";
const store = useUser();

const router = useRouter();
const formRef = ref(null);
const loading = ref(false);


const form = reactive({
  shopCode: "",
  phone: "",
  password: "",
});

const rules = reactive({
  shopCode: [
    {
      required: true,
      message: "请输入注册商户号",
      trigger: "blur",
    },
  ],
  phone: [
    {
      required: true,
      message: "请输入11位手机号码",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入登录密码",
      trigger: "blur",
    },
  ],
});

// 提交
const submitHandle = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      const params = {
        serialNumber: RandomNumBoth(1000, 9999),
        clientType: 'pc',
        loginName: form.phone,
        password: form.password
      }

      store.userlogin(params).then((res) => {
        loading.value = true;
        ElMessage.success("登录成功");
        setTimeout(() => {
          router.replace({
            name: "home",
          });
        }, 1000);
      }).catch(err => {
        loading.value = false
      });
    }
  });
};

const logout = () => {
  ElMessageBox.confirm("确定要关闭软件吗？")
    .then(() => {
      ipcRenderer.send("quitHandler", "退出吧");
    })
    .catch(() => { });
};
</script>

<style scoped lang="scss">
.login-container {
  width: 100vw;
  display: flex;
  height: 100vh;
  background-color: #efefef;

  .logo {
    flex: 1;
    height: inherit;
    background-color: var(--el-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .form-wrap {
    flex: 1.5;
    height: inherit;
    padding: 50px;
  }

  .reg-wrap {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 100px;
  }

  .header {
    display: flex;
    flex-direction: column;
    padding-bottom: 100px;

    .t1 {
      font-size: 52px;
      color: #999;
    }

    .t2 {
      font-size: 24px;
      color: #999;
    }
  }
}

.version {
  padding-top: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>