浏览代码

download页面

zhangjie 2 年之前
父节点
当前提交
9591d62043

+ 62 - 0
pages/download/App.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="app download">
+    <div class="download-bg"></div>
+    <div class="download-body">
+      <div class="download-content">
+        <div class="school-logo">
+          <img :src="info.logo" :alt="info.name" />
+        </div>
+        <div class="download-logo">
+          <img src="./assets/logo.png" alt="客户端" />
+        </div>
+        <h1 class="download-title">在线考试客户端</h1>
+        <p class="download-version">版本号:{{ info.version.name }}</p>
+        <div class="btn-primary" @click="toDownload">点击下载</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getSchoolInfo } from "./api";
+
+function getParam(paramName) {
+  const hs = window.location.href.split(/\?|&/);
+  const validh = hs.find((item) => item.startsWith(paramName));
+  if (!validh) return;
+  return validh.split("=")[1];
+}
+
+export default {
+  name: "app",
+  data() {
+    return {
+      info: {
+        name: "",
+        logo: "",
+        packagePath: "",
+        version: {
+          name: "",
+        },
+      },
+    };
+  },
+  created() {
+    this.getData();
+  },
+  methods: {
+    async getData() {
+      const code = getParam("code");
+      if (!code) {
+        window.alert("学校code丢失!");
+        return;
+      }
+      const res = await getSchoolInfo(code);
+      this.info = res.data.data;
+    },
+    toDownload() {
+      window.open(this.info.packagePath);
+    },
+  },
+};
+</script>

+ 9 - 0
pages/download/api.js

@@ -0,0 +1,9 @@
+import { httpNoAuth } from "../../src/plugins/axiosNoAuth";
+
+export function getSchoolInfo(schoolCode) {
+  return httpNoAuth.post(
+    "/api/download/package",
+    {},
+    { params: { code: schoolCode } }
+  );
+}

+ 72 - 0
pages/download/assets/base.scss

@@ -0,0 +1,72 @@
+.download {
+  .download-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-size: cover;
+    background-image: url(./bg.png);
+  }
+
+  .download-body {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 600px;
+    transform: translate(-50%, -50%);
+    z-index: 99;
+    border: 6px solid rgba(0, 0, 0, 0.1);
+    border-radius: 20px;
+  }
+
+  .download-content {
+    background-color: #fff;
+    padding: 55px 56px 50px;
+    border-radius: 20px;
+    text-align: center;
+  }
+
+  .school-logo {
+    height: 60px;
+    position: relative;
+    margin-bottom: 60px;
+
+    > img {
+      display: block;
+      position: absolute;
+      margin: auto;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      max-height: 100%;
+      max-width: 100%;
+    }
+  }
+
+  .download-title {
+    font-size: 16px;
+    line-height: 30px;
+    margin: 0;
+  }
+  .download-version {
+    margin: 0 0 20px;
+  }
+}
+
+.btn-primary {
+  padding: 10px 15px;
+  font-size: 14px;
+  line-height: 1;
+  border-radius: 5px;
+  display: inline-block;
+  vertical-align: middle;
+  background-color: #1886fe;
+  color: #fff;
+  cursor: pointer;
+
+  &:hover {
+    background-color: mix(#fff, #1886fe, 20%);
+  }
+}

二进制
pages/download/assets/bg.png


二进制
pages/download/assets/logo.png


+ 9 - 0
pages/download/main.js

@@ -0,0 +1,9 @@
+import Vue from "vue";
+import App from "./App.vue";
+import "./assets/base.scss";
+
+Vue.config.productionTip = false;
+
+new Vue({
+  render: (h) => h(App),
+}).$mount("#app");

+ 20 - 0
public/download.html

@@ -0,0 +1,20 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <title>在线考试客户端下载</title>
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but 在线考试下载页 doesn't work properly without
+        JavaScript enabled. Please enable it to continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
+  </body>
+</html>

+ 0 - 6
src/router/index.js

@@ -260,12 +260,6 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "Login" */ "../features/Login/Login.vue"),
   },
-  {
-    path: "/download",
-    name: "Download",
-    component: () =>
-      import(/* webpackChunkName: "download" */ "../views/Download.vue"),
-  },
   {
     path: "*",
     name: "404",

+ 0 - 84
src/views/Download.vue

@@ -1,84 +0,0 @@
-<template>
-  <div class="download">
-    <div class="download-bg"></div>
-    <div class="download-body">
-      <div class="download-content">
-        <div class="school-logo">
-          <img :src="schoolLogo" alt="学校logo" />
-        </div>
-        <h1 class="text-center login-title">在线考试客户端</h1>
-        <el-button type="primary" @click="toDownload">点击下载</el-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { ORG_CODE } from "@/constant/constants";
-import { getLogo } from "@/api/login";
-
-export default {
-  name: "download",
-  data() {
-    return {
-      schoolLogo: "",
-    };
-  },
-  async created() {
-    const res = await getLogo(ORG_CODE);
-    this.schoolLogo = res.data.data.logo;
-  },
-  methods: {
-    toDownload() {},
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.download {
-  .download-bg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-size: cover;
-    background-image: url(../features/Login/login-bg.png);
-  }
-
-  .download-body {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 400px;
-    transform: translate(-50%, -50%);
-    z-index: 99;
-    border: 6px solid rgba(0, 0, 0, 0.1);
-    border-radius: 20px;
-  }
-
-  .download-content {
-    background-color: #fff;
-    padding: 55px 56px 50px;
-    border-radius: 20px;
-    text-align: center;
-  }
-
-  .school-logo {
-    height: 60px;
-    position: relative;
-
-    > img {
-      display: block;
-      position: absolute;
-      margin: auto;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      max-height: 100%;
-      max-width: 100%;
-    }
-  }
-}
-</style>

+ 12 - 0
vue.config.js

@@ -15,6 +15,18 @@ module.exports = {
   devServer: {
     proxy: defProxy,
   },
+  pages: {
+    index: {
+      entry: "src/main.js",
+      template: "public/index.html",
+      filename: "index.html",
+    },
+    download: {
+      entry: "pages/download/main.js",
+      template: "public/download.html",
+      filename: "download.html",
+    },
+  },
   configureWebpack: {
     devtool: "source-map",
     plugins: [