提交源文件

src/App.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="wrapper">
+    <div class="animation">
+      <router-view v-slot="{ Component }">
+        <transition :name="transitionName">
+          <component :is="Component"></component>
+        </transition>
+      </router-view>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from "vue-router";
+import { ref } from "vue";
+let transitionName = ref();
+let router = useRouter();
+router.beforeEach((to, from) => {
+  // 根据路由标记判断触发哪个动画
+  if (to.meta.index > from.meta.index) {
+    // 从右往左动画
+    transitionName.value = "slide-right";
+  } else if (to.meta.index < from.meta.index) {
+    // 从左往右动画
+    transitionName.value = "slide-left";
+  } else {
+    transitionName.value = "";
+  }
+});
+</script>
+
+<style lang="scss">
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  user-select: none;
+}
+.mt50 {
+  margin-top: 50px;
+}
+.wrapper {
+  overflow-x: hidden;
+  .animation {
+    display: flex;
+    width: 200%;
+    & > div {
+      width: 50%;
+    }
+    .slide-left-enter-active,
+    .slide-left-leave-active,
+    .slide-right-enter-active,
+    .slide-right-leave-active {
+      transition: transform 0.3s;
+    }
+    .slide-right-enter-from {
+      transform: translateX(0);
+    }
+    .slide-right-enter-to {
+      transform: translateX(-100%);
+    }
+    .slide-right-leave-from {
+      transform: translateX(0);
+    }
+    .slide-right-leave-to {
+      transform: translateX(-100%);
+    }
+    .slide-left-enter-from {
+      transform: translateX(-200%);
+    }
+    .slide-left-enter-to {
+      transform: translateX(-100%);
+    }
+    .slide-left-leave-from {
+      transform: translateX(0);
+    }
+    .slide-left-leave-to {
+      transform: translateX(100%);
+    }
+  }
+}
+</style>

src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/components/HelloWorld.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String,
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Install
+    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
+    in your IDE for a better DX
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

src/main.js

@@ -0,0 +1,33 @@
+import { createApp } from "vue";
+import router from "./router/index.js";
+import App from "./App.vue";
+import ElementPlus from "element-plus";
+import zhCn from "element-plus/es/locale/lang/zh-cn";
+import "element-plus/dist/index.css";
+import "element-plus/theme-chalk/dark/css-vars.css";
+import store from "./store";
+
+let matchMedia = window.matchMedia("(prefers-color-scheme: light)");
+setDarkMode(matchMedia.matches);
+matchMedia.addEventListener("change", function () {
+  console.log(`当前的主题是:${this.matches ? "light" : "dark"}`);
+  setDarkMode(this.matches);
+});
+
+// 设置主题模式
+function setDarkMode(flag) {
+  if (flag) {
+    document.querySelector("#html").classList.add("light");
+    document.querySelector("#html").classList.remove("dark");
+  } else {
+    document.querySelector("#html").classList.add("dark");
+    document.querySelector("#html").classList.remove("light");
+  }
+}
+
+const app = createApp(App);
+
+app.use(router);
+app.use(store);
+app.use(ElementPlus, { locale: zhCn });
+app.mount("#app");

src/router/index.js

@@ -0,0 +1,40 @@
+import { createRouter, createWebHashHistory } from "vue-router";
+import home from "@/views/home.vue";
+
+const routes = [
+  {
+    path: "/",
+    name: "home",
+    component: home,
+  },
+  {
+    path: "/login",
+    name: "login",
+    meta: {
+      index: 0,
+    },
+    component: () => import("@/views/login.vue"),
+  },
+  {
+    path: "/register",
+    name: "register",
+    meta: {
+      index: 1,
+    },
+    component: () => import("@/views/register.vue"),
+  },
+];
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+});
+
+router.beforeEach(async (to, from) => {
+  const token = localStorage.getItem("token");
+  if (!token && to.name !== "login" && to.name !== "register") {
+    return { name: "login" };
+  }
+});
+
+export default router;

src/store/index.js

@@ -0,0 +1,5 @@
+import { createPinia } from "pinia";
+
+const store = createPinia();
+
+export default store;

src/store/user.js

@@ -0,0 +1,13 @@
+import { defineStore } from "pinia";
+export const useUserStore = defineStore({
+  id: "user",
+  state: () => ({
+    name: "张三",
+    token: "sas121sasdADSAD",
+  }),
+  actions: {
+    login(data) {
+      this.name = data;
+    },
+  },
+});

src/style.css

@@ -0,0 +1,79 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

src/utils/request.js

@@ -0,0 +1,8 @@
+import axios from "axios";
+
+const request = axios.create({
+  baseURL: "http://localhost",
+  timeout: 100000,
+});
+
+request.interceptors.request.use((config) => {});

src/views/home.vue

@@ -0,0 +1,13 @@
+<template>
+  <el-button type="primary">我是{{ userStore.name }}</el-button>
+  <el-button @click="changeUser">改变用户</el-button>
+</template>
+
+<script setup>
+import { useUserStore } from "@/store/user";
+const userStore = useUserStore();
+
+const changeUser = () => {
+  userStore.login("李四");
+};
+</script>

src/views/login.vue

@@ -0,0 +1,181 @@
+<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"
+        size="large"
+        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";
+
+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((valid) => {
+    if (valid) {
+      loading.value = true;
+      ElMessage.success("登录成功");
+      localStorage.setItem("token", "skk918sjakajhjjqhw19jsdkandkahk");
+      setTimeout(() => {
+        router.replace({
+          name: "home",
+        });
+      }, 1500);
+    }
+  });
+};
+
+const logout = () => {
+  ElMessageBox.confirm("确定要关闭软件吗？")
+    .then(() => {
+      ipcRenderer.send("quitHandler", "退出吧");
+    })
+    .catch(() => {});
+};
+</script>
+
+<style scoped lang="scss">
+.login-container {
+  display: flex;
+  height: 100vh;
+  .logo {
+    flex: 1;
+    height: inherit;
+    background-color: var(--el-color-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .form-wrap {
+    flex: 1;
+    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>

src/views/register.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="login-container">
+    <div class="logo">
+      <el-image :src="logo" style="width: 180px"></el-image>
+    </div>
+    <div class="form-wrap">
+      <div class="header">
+        <span class="t1">注册</span>
+        <div class="mt50">
+          <el-radio-group v-model="type" size="large">
+            <el-radio-button :label="1">餐饮版</el-radio-button>
+            <el-radio-button :label="2">商超版</el-radio-button>
+            <el-radio-button :label="3">快餐版</el-radio-button>
+            <el-radio-button :label="4">美业版</el-radio-button>
+          </el-radio-group>
+        </div>
+      </div>
+      <el-form
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        label-position="top"
+        size="large"
+        hide-required-asterisk
+      >
+        <el-form-item label="店铺名称" prop="shopName">
+          <el-input
+            v-model="form.shopName"
+            placeholder="请输入店铺名称"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="手机号码" prop="phone">
+          <el-input
+            v-model="form.phone"
+            placeholder="请输入注册手机号"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="验证码" prop="code">
+          <el-input v-model="form.code" placeholder="请输入验证码"></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 label="确认登录密码" prop="repassword">
+          <el-input
+            v-model="form.repassword"
+            type="password"
+            placeholder="请重复输入登录密码"
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" style="width: 100%" @click="submitHandle"
+            >注册</el-button
+          >
+        </el-form-item>
+        <el-form-item>
+          <el-button plain style="width: 100%" @click="router.back()">
+            返回
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import logo from "@/assets/logo.png";
+import { reactive, ref } from "vue";
+import { useRouter } from "vue-router";
+const router = useRouter();
+
+const type = ref(1);
+
+const formRef = ref(null);
+
+const form = reactive({
+  shopName: "",
+  phone: "",
+  code: "",
+  password: "",
+  repassword: "",
+});
+const repasswordPass = (rule, value, callback) => {
+  if (!form.repassword) {
+    callback(new Error("请重复输入登录密码"));
+  } else if (form.password !== form.repassword) {
+    callback(new Error("两次密码输入不一致"));
+  } else {
+    callback();
+  }
+};
+const rules = reactive({
+  shopName: [
+    {
+      required: true,
+      message: "请输入店铺名称",
+      trigger: "blur",
+    },
+  ],
+  phone: [
+    {
+      required: true,
+      message: "请输入注册手机号",
+      trigger: "blur",
+    },
+  ],
+  code: [
+    {
+      required: true,
+      message: "请输入验证码",
+      trigger: "blur",
+    },
+  ],
+  password: [
+    {
+      required: true,
+      message: "请输入登录密码",
+      trigger: "blur",
+    },
+  ],
+  repassword: [
+    {
+      validator: repasswordPass,
+      trigger: "blur",
+    },
+  ],
+});
+
+// 提交
+const submitHandle = () => {
+  formRef.value.validate((valid) => {
+    if (valid) {
+    }
+  });
+};
+</script>
+
+<style scoped lang="scss">
+.login-container {
+  display: flex;
+  height: 100vh;
+  .logo {
+    flex: 1;
+    height: inherit;
+    background-color: var(--el-color-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .form-wrap {
+    flex: 1;
+    height: inherit;
+    padding: 50px;
+  }
+  .reg-wrap {
+    display: flex;
+    justify-content: flex-end;
+    padding-bottom: 100px;
+  }
+  .header {
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 50px;
+    .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>