first commiit

src/views/data/credit.vue

@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>

src/views/data/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>

src/views/data/sales.vue

@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>

src/views/data/table.vue

@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>

src/views/data/work.vue

@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>

src/views/error/401.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="page-container">
+    <el-button icon="arrow-left" @click="back">返回</el-button>
+    <el-row>
+      <el-col :span="12">
+        <h1 class="text-jumbo text-ginormous">Oops!</h1>
+        <h2>你没有权限去该页面</h2>
+        <h6>如有不满请联系你领导</h6>
+        <ul class="list-unstyled">
+          <li>或者你可以去:</li>
+          <li class="link-type">
+            <router-link to="/dashboard">回首页</router-link>
+          </li>
+          <li class="link-type">
+            <a href="https://www.youlai.tech/">随便看看</a>
+          </li>
+        </ul>
+      </el-col>
+      <el-col :span="12">
+        <img src="@/assets/images/401.svg" width="400" height="500" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+defineOptions({
+  name: "Page401",
+});
+
+const router = useRouter();
+
+function back() {
+  router.back();
+}
+</script>
+
+<style lang="scss" scoped>
+.page-container {
+  width: 100%;
+  padding: 100px;
+
+  .pan-back-btn {
+    color: #fff;
+    background: #008489;
+    border: none !important;
+  }
+
+  .pan-gif {
+    display: block;
+    margin: 0 auto;
+  }
+
+  .pan-img {
+    display: block;
+    width: 100%;
+    margin: 0 auto;
+  }
+
+  .text-jumbo {
+    font-size: 60px;
+    font-weight: 700;
+    color: #484848;
+  }
+
+  .list-unstyled {
+    font-size: 14px;
+
+    li {
+      padding-bottom: 5px;
+    }
+
+    a {
+      color: #008489;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+</style>

src/views/error/404.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="page-container">
+    <div class="pic-404">
+      <img class="pic-404__parent" src="@/assets/images/404.svg" alt="404" />
+    </div>
+    <div class="bullshit">
+      <div class="bullshit__oops">OOPS！</div>
+      <div class="bullshit__info">
+        该页面无法访问。
+        <a style="color: #20a0ff" href="https://www.youlai.tech.com" target="_blank">
+          有来开源官网
+        </a>
+      </div>
+      <div class="bullshit__headline">抱歉，您访问的页面不存在。</div>
+      <div class="bullshit__info">请确认您输入的网址是否正确，或者点击下方按钮返回首页。</div>
+      <a href="#" class="bullshit__return-home" @click.prevent="back">返回首页</a>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+defineOptions({
+  name: "Page404",
+});
+
+const router = useRouter();
+
+function back() {
+  router.back();
+}
+</script>
+
+<style lang="scss" scoped>
+.page-container {
+  display: flex;
+  padding: 100px;
+
+  .pic-404 {
+    width: 600px;
+    overflow: hidden;
+
+    &__parent {
+      width: 100%;
+    }
+  }
+
+  .bullshit {
+    width: 300px;
+    padding: 50px 0;
+    overflow: hidden;
+
+    &__oops {
+      margin-bottom: 20px;
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 40px;
+      color: #1482f0;
+      opacity: 0;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+    }
+
+    &__headline {
+      margin-bottom: 10px;
+      font-size: 20px;
+      font-weight: bold;
+      line-height: 24px;
+      color: #222;
+      opacity: 0;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;
+    }
+
+    &__info {
+      margin-bottom: 30px;
+      font-size: 13px;
+      line-height: 21px;
+      color: grey;
+      opacity: 0;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.2s;
+      animation-fill-mode: forwards;
+    }
+
+    &__return-home {
+      display: block;
+      float: left;
+      width: 110px;
+      height: 36px;
+      font-size: 14px;
+      line-height: 36px;
+      color: #fff;
+      text-align: center;
+      cursor: pointer;
+      background: #1482f0;
+      border-radius: 100px;
+      opacity: 0;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;
+    }
+
+    @keyframes slideUp {
+      0% {
+        opacity: 0;
+        transform: translateY(60px);
+      }
+
+      100% {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  }
+}
+</style>

src/views/index/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>Index</h1>
+  </div>
+</template>

src/views/login/index.vue

@@ -0,0 +1,302 @@
+<template>
+  <div class="login" :style="'background-image:url(' + Background + ');'">
+    <el-form
+      ref="loginForm"
+      :model="loginForm"
+      :rules="loginRules"
+      label-position="left"
+      label-width="0px"
+      class="login-form"
+    >
+      <h3 class="title">银收客后台管理</h3>
+      <el-form-item>
+        <el-radio-group v-model="loginForm.loginType">
+          <el-radio-button value="merchant">商户</el-radio-button>
+          <el-radio-button value="staff">员工</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item prop="merchantName" v-if="loginForm.loginType == 'staff'">
+        <el-input
+          v-model="loginForm.merchantName"
+          type="text"
+          auto-complete="off"
+          placeholder="商户号"
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="username">
+        <el-input
+          v-model="loginForm.username"
+          type="text"
+          auto-complete="off"
+          placeholder="账号"
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input
+          v-model="loginForm.password"
+          type="password"
+          auto-complete="off"
+          placeholder="密码"
+          @keyup.enter="handleLogin"
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="code">
+        <div class="code_wrap">
+          <el-input
+            v-model="loginForm.code"
+            auto-complete="off"
+            placeholder="验证码"
+            style="width: 63%"
+            @keyup.enter="handleLogin"
+          ></el-input>
+          <div class="login-code">
+            <img :src="codeUrl" @click="getCode" />
+          </div>
+        </div>
+      </el-form-item>
+
+      <el-form-item style="width: 100%">
+        <el-button
+          :loading="loading"
+          size="default"
+          type="primary"
+          style="width: 100%"
+          @click.prevent="handleLogin"
+        >
+          <span v-if="!loading">登 录</span>
+          <span v-else>登 录 中...</span>
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <!--  底部  -->
+    <div id="el-login-footer">
+      <span>⋅</span>
+      <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"></a>
+    </div>
+  </div>
+</template>
+
+<script>
+import { encrypt } from "@/utils/rsaEncrypt";
+import { getCodeImg } from "@/api/login";
+import { $douyin_checkIn } from "@/api/coup/index";
+import Cookies from "js-cookie";
+import qs from "qs";
+import Background from "@/assets/images/background_img.jpg";
+export default {
+  name: "Login",
+  data() {
+    return {
+      Background: Background,
+      codeUrl: "",
+      cookiePass: "",
+      loginForm: {
+        username: "",
+        password: "",
+        rememberMe: false,
+        code: "",
+        uuid: "",
+        merchantName: "",
+        loginType: "merchant",
+      },
+      loginRules: {
+        username: [{ required: true, trigger: "blur", message: "用户名不能为空" }],
+        password: [{ required: true, trigger: "blur", message: "密码不能为空" }],
+        code: [{ required: true, trigger: "change", message: "验证码不能为空" }],
+        merchantName: [{ required: true, trigger: "change", message: "商户号不能为空" }],
+      },
+      loading: false,
+      redirect: undefined,
+    };
+  },
+  watch: {
+    $route: {
+      handler: function (route) {
+        const data = route.query;
+        if (data && data.redirect) {
+          this.redirect = data.redirect;
+          delete data.redirect;
+          if (JSON.stringify(data) !== "{}") {
+            this.redirect = this.redirect + "&" + qs.stringify(data, { indices: false });
+          }
+        }
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    // 获取验证码
+    this.getCode();
+    // // 获取用户名密码等Cookie
+    // this.getCookie()
+    // // token 过期提示
+    // this.point()
+
+    let getinfo = localStorage.getItem("MerchantId");
+    let info = JSON.parse(getinfo);
+    if (info && info.merchantName) {
+      this.loginForm.merchantName = info.merchantName;
+      this.loginForm.username = info.username;
+    }
+  },
+  methods: {
+    getCode() {
+      getCodeImg().then((res) => {
+        console.log(res);
+        this.codeUrl = res.img;
+        this.loginForm.uuid = res.uuid;
+      });
+    },
+    getCookie() {
+      const username = Cookies.get("username");
+      let password = Cookies.get("password");
+      const rememberMe = Cookies.get("rememberMe");
+      // 保存cookie里面的加密后的密码
+      this.cookiePass = password === undefined ? "" : password;
+      password = password === undefined ? this.loginForm.password : password;
+      this.loginForm = {
+        username: username === undefined ? this.loginForm.username : username,
+        password: password,
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
+        code: "",
+        merchantName: "",
+        loginType: "merchant",
+      };
+    },
+    handleLogin() {
+      this.$refs.loginForm.validate((valid) => {
+        // const user = {
+        //   username: this.loginForm.username,
+        //   password: this.loginForm.password,
+        //   rememberMe: this.loginForm.rememberMe,
+        //   code: this.loginForm.code,
+        //   uuid: this.loginForm.uuid,
+        //   merchantName: this.loginForm.merchantName,
+        //   loginType: this.loginForm.loginType
+        // }
+        // if (user.password !== this.cookiePass) {
+        //   user.password = encrypt(user.password)
+        // }
+        if (valid) {
+          this.loading = true;
+          // if (user.rememberMe) {
+          //   Cookies.set('username', user.username, { expires: Config.passCookieExpires })
+          //   Cookies.set('password', user.password, { expires: Config.passCookieExpires })
+          //   Cookies.set('rememberMe', user.rememberMe, { expires: Config.passCookieExpires })
+          // } else {
+          //   Cookies.remove('username')
+          //   Cookies.remove('password')
+          //   Cookies.remove('rememberMe')
+          // }
+          // console.log(user);
+          const user = { ...this.loginForm };
+          console.log(user);
+          user.password = encrypt(user.password);
+          this.$store
+            .dispatch("Login", user)
+            .then(() => {
+              if (localStorage.getItem("shopName") != "admin") {
+                $douyin_checkIn({
+                  loginName: user.username,
+                });
+              }
+
+              this.loading = false;
+              // 保存商户号
+              localStorage.setItem(
+                "MerchantId",
+                JSON.stringify({
+                  merchantName: this.loginForm.merchantName,
+                  username: this.loginForm.username,
+                })
+              );
+              this.$router.push({ path: this.redirect || "/" });
+              // window.location.replace = './'
+            })
+            .catch((err) => {
+              console.log(err);
+              this.loading = false;
+              this.getCode();
+            });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    point() {
+      const point = Cookies.get("point") !== undefined;
+      if (point) {
+        this.$notify({
+          title: "提示",
+          message: "当前登录状态已过期，请重新登录！",
+          type: "warning",
+          duration: 5000,
+        });
+        Cookies.remove("point");
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.login {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  height: 100%;
+  background-size: cover;
+  padding-right: 15%;
+}
+
+.title {
+  margin: 0 auto 50px auto;
+  text-align: center;
+  color: #707070;
+  font-size: 36px;
+}
+
+.login-form {
+  border-radius: 6px;
+  background: #ffffff;
+  width: 500px;
+  padding: 50px 50px 50px 50px;
+
+  .el-input {
+    height: 38px;
+
+    input {
+      height: 38px;
+    }
+  }
+
+  .input-icon {
+    height: 39px;
+    width: 14px;
+    margin-left: 2px;
+  }
+}
+
+.login-tip {
+  font-size: 13px;
+  text-align: center;
+  color: #bfbfbf;
+}
+
+.code_wrap {
+  display: flex;
+  justify-content: space-between;
+}
+
+.login-code {
+  width: 33%;
+  display: inline-block;
+  height: 38px;
+
+  img {
+    cursor: pointer;
+    vertical-align: middle;
+  }
+}
+</style>

src/views/redirect/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div />
+</template>
+
+<script setup lang="ts">
+import { useRoute, useRouter } from "vue-router";
+
+const route = useRoute();
+const router = useRouter();
+
+const { params, query } = route;
+const { path } = params;
+
+router.replace({ path: "/" + path, query });
+</script>