fix: 修改

package.json

@@ -74,7 +74,8 @@
     "vuex": "3.1.0",
     "wangeditor": "^4.7.11",
     "webpack": "^4.47.0",
-    "xlsx": "^0.18.5"
+    "xlsx": "^0.18.5",
+    "amfe-flexible": "^2.2.1"
   },
   "devDependencies": {
     "@babel/parser": "^7.7.4",

public/index.html

@@ -11,6 +11,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
     <title><%= webpackConfig.name %></title>
     <link href="<%= BASE_URL %>static/css/tcplayer.min.css" rel="stylesheet" />
+    <link href="<%= BASE_URL %>static/css/normalize.css" rel="stylesheet" />
     <script src="<%= BASE_URL %>static/js/config.js"></script>
     <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 Webrtc 视频，需要在 tcplayer.vx.x.x.min.js 之前引入 TXLivePlayer-x.x.x.min.js。-->
     <!--有些浏览器环境不支持 Webrtc，播放器会将 Webrtc 流地址自动转换为 HLS 格式地址，因此快直播场景同样需要引入hls.min.x.xx.xm.js。-->

public/static/css/normalize.css

@@ -0,0 +1,177 @@
+html,
+body {
+  height: 100%;
+  /* 文字风格 Sans-serif 各笔画粗细相同，Serif 笔画粗细不同，monospace 等宽体，cursive草书，fantasy梦幻 */
+  font-family: "Microsoft YaHei", sans-serif, "Helvetica Neue", Helvetica, Arial,
+    "黑体", "宋体", Arial;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+body {
+  font-size: 14px;
+  color: #333;
+}
+
+/* 重置各标签的默认样式 */
+a,
+body,
+center,
+cite,
+code,
+dd,
+del,
+div,
+dl,
+dt,
+em,
+fieldset,
+figcaption,
+figure,
+footer,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+header,
+hr,
+html,
+img,
+input,
+label,
+legend,
+li,
+mark,
+ol,
+p,
+section,
+span,
+textarea,
+time,
+td,
+th,
+ul {
+  margin: 0;
+  border: 0;
+  padding: 0;
+  font-style: normal;
+  box-sizing: border-box;
+  /*  自动换行 */
+  word-wrap: break-word;
+  /*  强制英文单词断行 */
+  word-break: break-all;
+}
+
+/*  设置标签为块级分类 */
+article,
+aside,
+details,
+fieldset,
+figcaption,
+figure,
+footer,
+header,
+main,
+nav,
+section {
+  display: block;
+}
+
+/* 去除input标签的默认样式 */
+button,
+input,
+textarea {
+  -webkit-appearance: none;
+  font-family: "Microsoft YaHei", sans-serif, "Helvetica Neue", Helvetica, Arial,
+    "黑体", "宋体", Arial;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  font-size: 1em;
+  line-height: 1em;
+  outline: none;
+  background-color: transparent;
+}
+
+/*  禁止多文本框手动拖动大小 */
+textarea {
+  resize: none;
+  -webkit-appearance: none;
+}
+
+/* 去掉按下的阴影盒子 */
+input,
+textarea,
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+
+/*  清除a标签下划线 */
+a,
+a:visited {
+  text-decoration: none;
+}
+a:focus,
+a:active,
+a:hover {
+  outline: none;
+}
+
+/*  清除列表前面的点 */
+ol,
+li,
+ul {
+  list-style: none;
+}
+
+/*  清除IE下图片的边框 */
+img {
+  border-style: none;
+  font-size: 0;
+}
+
+/*  解决chrome浏览器默认黄色背景问题 */
+input:-webkit-autofill,
+textarea:-webkit-autofill,
+select:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px #fff inset;
+}
+
+/*  设置默认滚动条样式 */
+::-webkit-input-placeholder {
+  color: #afbdcc;
+}
+:-moz-placeholder {
+  color: #afbdcc;
+}
+::-moz-placeholder {
+  color: #afbdcc;
+}
+:-ms-input-placeholder {
+  color: #afbdcc;
+}
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background-color: #f5f5f5;
+}
+::-webkit-scrollbar-track-piece {
+  background-color: #f5f5f5;
+  border-radius: 6px;
+}
+::-webkit-scrollbar-thumb {
+  background-color: #cccccc;
+  border-radius: 6px;
+}
+::-webkit-scrollbar-corner {
+  background-color: #f5f5f5;
+}
+::-webkit-resizer {
+  background-repeat: no-repeat;
+  background-position: bottom right;
+}

src/api/largeScreen.js

@@ -0,0 +1,24 @@
+import { post, get } from '@/utils/request'
+
+// 视频直播用户占比（新老）(直播数据大屏)
+export const userShare = (params) => get('/admin/video/live/user-age', params)
+
+// 视频直播用户观众来源占比(直播数据大屏)
+export const userChannel = (params) => get('/admin/video/live/user-channel', params)
+
+// 带货榜单(直播数据大屏)
+export const productSale = (params) => get('/admin/video/live/product-sale', params)
+
+// 视频直播数据概况（已对接订单）(直播数据大屏)
+export const dataOverview = (params) => get('/admin/video/live/data-overview', params)
+
+// 视频直播实时趋势-在线人数
+export const nowTrend = (params) => get('/admin/video/live/nowTrend', params);
+
+// 成交金额曲线(直播数据大屏)
+export const productSaleLine = (params) => get('/admin/video/live/product-sale-line', params);
+
+// 用户省份分布(直播数据大屏)
+export const userProvince = (params) => get('/admin/video/live/user-province', params);
+//合并返回(直播数据大屏)
+export const liveScreen = (params) => get('/admin/video/live/screen', params);

src/layout/components/Sidebar/SidebarItem.vue

@@ -42,7 +42,7 @@
       </template>
       <sidebar-item
         v-for="child in item.children"
-        :key="child.path"
+        :key="child.path + child.hidden"
         :is-nest="true"
         :item="child"
         :base-path="resolvePath(child.path)"

src/layout/components/Sidebar/index.vue

@@ -14,7 +14,7 @@
       >
         <sidebar-item
           v-for="route in sidebarRouters"
-          :key="route.path"
+          :key="route.path + route.hidden"
           :item="route"
           :base-path="route.path"
         />

src/router/routers.js

@@ -5,6 +5,11 @@ import Layout from "../layout/index";
 Vue.use(Router);
 
 export const constantRouterMap = [
+  {
+    path: "/largeScreen/index",
+    component: () => import("@/views/largeScreen/index"),
+    hidden: true
+  },
   {
     path: "/login",
     meta: { title: "登录", noCache: true },
@@ -35,10 +40,9 @@ export const constantRouterMap = [
   {
     path: "/",
     component: Layout,
-    redirect: "/dashboard",
     children: [
       {
-        path: "dashboard",
+        path: "",
         component: resolve => require(["@/views/home"], resolve),
         name: "首页",
         meta: { title: "首页", icon: "index", affix: true, noCache: true }
@@ -50,7 +54,6 @@ export const constantRouterMap = [
     path: "/liveBroadcast",
     component: Layout,
     hidden: true,
-    redirect: "noredirect",
     children: [
       {
         path: "liveBroadcastCreate",
@@ -76,6 +79,13 @@ export const constantRouterMap = [
         component: () => import("@/views/liveBroadcast/marketing/data"),
         name: "直播数据",
         meta: { title: "直播数据" }
+      },
+      {
+        path: "liveBroadcastDetail",
+        component: () =>
+          import("@/views/liveBroadcast/manage/components/detail"),
+        name: "直播单场分析",
+        meta: { title: "直播单场分析" }
       }
     ]
   },
@@ -83,7 +93,6 @@ export const constantRouterMap = [
     path: "/user",
     component: Layout,
     hidden: true,
-    redirect: "noredirect",
     children: [
       {
         path: "center",
@@ -141,7 +150,7 @@ export const constantRouterMap = [
 
 export default new Router({
   // mode: 'hash',
-  mode: "history",
+  // mode: "history",
   scrollBehavior: () => ({ y: 0 }),
   routes: constantRouterMap
 });

src/utils/auth.js

@@ -5,7 +5,7 @@ const TokenKey = Config.TokenKey;
 
 export function getToken() {
   // return Cookies.get(TokenKey)
-  return "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJiYWNrZW5kVXNlciI6IntcImRlcHRJZFwiOlwiMVwiLFwibG9naW5JZFwiOjEsXCJyb2xlc1wiOlsxXSxcInVzZXJJZFwiOjEsXCJ1c2VyTmFtZVwiOlwiYWRtaW5cIn0iLCJleHAiOjE3Mzc5NzE3NTB9.NNSDWiL4G6YBW9sRVzTI2Ju6-0el7LOFvofDndFsoEY";
+  return "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJiYWNrZW5kVXNlciI6IntcImRlcHRJZFwiOlwiMVwiLFwibG9naW5JZFwiOjEsXCJyb2xlc1wiOlsxXSxcInVzZXJJZFwiOjEsXCJ1c2VyTmFtZVwiOlwiYWRtaW5cIn0iLCJleHAiOjE3Mzg0MTQwMzF9.iVfp38Qsy6s-bOAFlqsTgCam0GNkMIZl_faFnvggiHA";
 }
 
 export function setToken(token, rememberMe) {

src/views/circle/detail/index.vue

@@ -64,7 +64,12 @@
               alt=""
             />
           </el-badge>
-          <img class="icon" src="@/assets/images/data.png" alt="" />
+          <img
+            class="icon"
+            src="@/assets/images/data.png"
+            alt=""
+            @click="$router.push('/circle/data')"
+          />
         </div>
       </div>
       <div class="circle-content">
@@ -123,6 +128,14 @@
         </div>
       </div>
     </div>
+    <div class="quote">
+      <div class="quote-content">
+        <label>用户：</label>
+        <p>萨达鲁大师克拉岛奥德赛拉</p>
+        <p>[图片]</p>
+      </div>
+      <i class="el-icon-close"></i>
+    </div>
     <messageSend />
   </div>
 </template>
@@ -294,4 +307,16 @@ export default {
     }
   }
 }
+.quote {
+  display: flex;
+  justify-content: space-between;
+  background: rgba(155, 155, 155, 0.2);
+  padding: 10px;
+  .quote-content {
+    display: flex;
+  }
+  i {
+    cursor: pointer;
+  }
+}
 </style>

src/views/home.vue

@@ -1,107 +1,17 @@
 <template>
   <div class="dashboard-container">
-    <div class="dashboard-editor-container">
+    <h2>欢迎进入后台管理系统</h2>
-      <github-corner class="github-corner" />
-
-      <panel-group @handleSetLineChartData="handleSetLineChartData" />
-
-      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-        <line-chart :chart-data="lineChartData" />
-      </el-row>
-      <el-row :gutter="32">
-        <el-col :xs="24" :sm="24" :lg="8">
-          <div class="chart-wrapper">
-            <radar-chart />
-          </div>
-        </el-col>
-        <el-col :xs="24" :sm="24" :lg="8">
-          <div class="chart-wrapper">
-            <pie-chart />
-          </div>
-        </el-col>
-        <el-col :xs="24" :sm="24" :lg="8">
-          <div class="chart-wrapper">
-            <bar-chart />
-          </div>
-        </el-col>
-      </el-row>
-    </div>
   </div>
 </template>
 
-<script>
+<script></script>
-import GithubCorner from '@/components/GithubCorner'
-import PanelGroup from './dashboard/PanelGroup'
-import LineChart from './dashboard/LineChart'
-import RadarChart from '@/components/Echarts/RadarChart'
-import PieChart from '@/components/Echarts/PieChart'
-import BarChart from '@/components/Echarts/BarChart'
-
-const lineChartData = {
-  newVisitis: {
-    expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145]
-  },
-  messages: {
-    expectedData: [200, 192, 120, 144, 160, 130, 140],
-    actualData: [180, 160, 151, 106, 145, 150, 130]
-  },
-  purchases: {
-    expectedData: [80, 100, 121, 104, 105, 90, 100],
-    actualData: [120, 90, 100, 138, 142, 130, 130]
-  },
-  shoppings: {
-    expectedData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
-  }
-}
-
-export default {
-  name: 'Dashboard',
-  components: {
-    GithubCorner,
-    PanelGroup,
-    LineChart,
-    RadarChart,
-    PieChart,
-    BarChart
-  },
-  data() {
-    return {
-      lineChartData: lineChartData.newVisitis
-    }
-  },
-  methods: {
-    handleSetLineChartData(type) {
-      this.lineChartData = lineChartData[type]
-    }
-  }
-}
-</script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .dashboard-editor-container {
+h2 {
-    padding: 32px;
+  position: absolute;
-    background-color: rgb(240, 242, 245);
+  top: 50%;
-    position: relative;
+  left: 50%;
-
+  transform: translateX(-50%) translateY(-50%);
-    .github-corner {
+  font-size: 30px;
-      position: absolute;
+}
-      top: 0;
-      border: 0;
-      right: 0;
-    }
-
-    .chart-wrapper {
-      background: #fff;
-      padding: 16px 16px 0;
-      margin-bottom: 32px;
-    }
-  }
-
-  @media (max-width:1024px) {
-    .chart-wrapper {
-      padding: 8px;
-    }
-  }
 </style>

src/views/largeScreen/style/normalize.scss

@@ -0,0 +1,47 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  background: #fff;
+}
+html,
+body,
+#app {
+  height: 100%;
+}
+
+body {
+  // overflow: hidden;
+}
+
+#app {
+  // overflow-x: hidden;
+  // overflow-y: hidden;
+}
+
+#app::-webkit-scrollbar {
+  width: 0;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  padding: 0;
+  margin: 0;
+}
+
+i {
+  font: inherit;
+}
+
+
+
+

src/views/liveBroadcast/list/components/create.vue

@@ -53,32 +53,6 @@
             <el-radio :label="2">横屏</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item v-show="!settingToC" label="视频专栏" prop="isColumn">
-          <el-radio-group v-model="ruleForm.isColumn" @change="remoteMethod()">
-            <el-radio :label="1">是</el-radio>
-            <el-radio :label="0">否</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item v-if="ruleForm.isColumn === 1">
-          <el-select
-            v-model="ruleForm.columnId"
-            filterable
-            remote
-            reserve-keyword
-            placeholder="请选择视频专栏"
-            :remote-method="remoteMethod"
-            :loading="loading"
-            prop="columnId"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            >
-            </el-option>
-          </el-select>
-        </el-form-item>
         <el-form-item label="标题" prop="title">
           <el-input v-model="ruleForm.title"></el-input>
         </el-form-item>
@@ -681,7 +655,7 @@ import TcVod from "vod-js-sdk-v6";
 import { mapGetters } from "vuex";
 
 import AdviserSelect from "@/views/adviser/components/select";
-import CourseSelect from "@/views/course/components/select";
+import CourseSelect from "@/views/circle/components/select";
 import SerialSelect from "@/views/serial/components/select";
 import { fileUpload } from "@/api/upload";
 import { channelArr, mixQueryTemplateObj } from "@/utils/options";
@@ -821,9 +795,6 @@ export default {
       productListId: [],
       headers: {
         Authorization: "Bearer " + getToken(),
-        "CSRF-Token": document
-          .querySelector('meta[name="csrf-token"]')
-          .getAttribute("content"),
         "X-File-Size": 0
       },
       productTypeList: [],
@@ -1398,10 +1369,12 @@ export default {
         size: 99,
         statusList: [3]
       };
-      packageList(queryParams).then(data => {
+      packageList(queryParams)
-        this.productListTwo = data.data.list;
+        .then(data => {
-        this.productList = data.data.list;
+          this.productListTwo = data.data.list;
-      });
+          this.productList = data.data.list;
+        })
+        .catch(() => {});
     },
     confirmDialog() {
       this.$refs.dialogForm.validate(valid => {

src/views/liveBroadcast/list/index.vue

@@ -651,10 +651,11 @@ export default {
       this.$router.push(`/liveBroadcast/liveDetail?id=${val.id}&type=1`);
     },
     toDateDetail(val) {
-      window.open(`./largeScreen/index?videoId=${val.id}&type=1`);
+      window.open(
-      // this.$router.push(
+        `${location.origin + location.pathname}#/largeScreen/index?videoId=${
-      //     `/largeScreen/index?videoId=${val.id}&type=1`
+          val.id
-      // );
+        }&type=1`
+      );
     },
     copyProduct(id) {
       this.$confirm(`将复制直播信息，直播数据将不会同步`, {

src/views/liveBroadcast/list/indexZj.vue

@@ -661,10 +661,11 @@ export default {
       this.$router.push(`/liveBroadcast/liveDetail?id=${val.id}&type=4`);
     },
     toDateDetail(val) {
-      window.open(`./largeScreen/index?videoId=${val.id}&type=1`);
+      window.open(
-      // this.$router.push(
+        `${location.origin + location.pathname}#/largeScreen/index?videoId=${
-      //     `/largeScreen/index?videoId=${val.id}&type=1`
+          val.id
-      // );
+        }&type=1`
+      );
     },
     copyProduct(id) {
       this.$confirm(`将复制直播信息，直播数据将不会同步`, {

src/views/liveBroadcast/manage/components/detail.vue

@@ -960,7 +960,8 @@ export default {
       })
     },
     toDetail() {
-      window.open(`./largeScreen/index?videoId=${this.id}&type=${this.type}`)
+      window.open(`${location.origin +
+          location.pathname}#/largeScreen/index?videoId=${this.id}&type=${this.type}`)
     },
     async toExport() {
       this.downloadLoading = true

src/views/liveBroadcast/manage/index.vue

@@ -598,7 +598,12 @@ export default {
       this.queryList();
     },
     openProduct(val) {
-      window.open(`./liveBroadcast/liveBroadcastDetail?id=${val.id}&type=2`);
+      window.open(
+        `${location.origin +
+          location.pathname}#/liveBroadcast/liveBroadcastDetail?id=${
+          val.id
+        }&type=2`
+      );
       // this.$router.push(`/liveBroadcast/liveBroadcastDetail?id=${val.id}&type=2`)
     },
     toCreate(id, type) {
@@ -804,7 +809,11 @@ export default {
       this.$router.push(`/liveBroadcast/liveDetail?id=${val.id}&type=2`);
     },
     toDateDetail(val) {
-      window.open(`./largeScreen/index?videoId=${val.id}&type=2`);
+      window.open(
+        `${location.origin + location.pathname}#/largeScreen/index?videoId=${
+          val.id
+        }&type=2`
+      );
     },
     downVideoFn(row) {
       this.cVideoDetail = row;

src/views/liveBroadcast/manage/indexYx.vue

@@ -534,7 +534,11 @@ export default {
     },
     openProduct(val) {
       // this.$router.push(`/liveBroadcast/marketing?id=${val.id}&type=2`)
-      window.open(`./liveBroadcast/marketing?id=${val.id}&type=2`);
+      window.open(
+        `${location.origin + location.pathname}#/liveBroadcast/marketing?id=${
+          val.id
+        }&type=2`
+      );
     },
     toCreate(id, type) {
       // type = 2 查看
@@ -726,7 +730,11 @@ export default {
       this.$router.push(`/liveBroadcast/liveDetail?id=${val.id}&type=3`);
     },
     toDateDetail(val) {
-      window.open(`./largeScreen/index?videoId=${val.id}&type=2`);
+      window.open(
+        `${location.origin + location.pathname}#/largeScreen/index?videoId=${
+          val.id
+        }&type=2`
+      );
       // this.$router.push(
       //     `/largeScreen/index?videoId=${val.id}&type=1`
       // );

src/views/page/detail/upload.vue

@@ -1,30 +1,39 @@
 <template>
   <div>
     <el-upload
-:headers="headersConfig"
+      :headers="headersConfig"
-:action="actionUri"
+      :action="actionUri"
-:file-list="fileList"
+      :file-list="fileList"
-:on-success="handleSuccess"
+      :on-success="handleSuccess"
-:on-change="handleChange"
+      :on-change="handleChange"
-:show-file-list="showFileList"
+      :show-file-list="showFileList"
-:before-upload="beforeUpload"
+      :before-upload="beforeUpload"
-:disabled="disabled"
+      :disabled="disabled"
-:accept="accept"
+      :accept="accept"
-    list-type="picture"
+      list-type="picture"
->
+    >
-    <el-button type="primary" :disabled="disabled">点击上传</el-button><span
+      <el-button type="primary" :disabled="disabled">点击上传</el-button
-v-if="checkWidth"
+      ><span
-class="size_tips"
+        v-if="checkWidth"
-style="  color: red;
+        class="size_tips"
+        style="  color: red;
     font-size: 14px; margin-left: 10px;"
->请上传{{ width }}*{{ height }}尺寸的图片</span>
+        >请上传{{ width }}*{{ height }}尺寸的图片</span
-      <div v-if="checksize && showTip" slot="tip" style="margin-left:15px" class="el-upload__tip">{{ tip + size / 1024 + 'M' }}</div>
+      >
+      <div
+        v-if="checksize && showTip"
+        slot="tip"
+        style="margin-left:15px"
+        class="el-upload__tip"
+      >
+        {{ tip + size / 1024 + "M" }}
+      </div>
     </el-upload>
-    </div>
+  </div>
 </template>
 
 <script>
-import { getToken } from '@/utils/auth'
+import { getToken } from "@/utils/auth";
 
 export default {
   props: {
@@ -71,7 +80,7 @@ export default {
     // 限制上传文本类型
     accept: {
       type: String,
-      default: '.jpg,.png,.gif'
+      default: ".jpg,.png,.gif"
     },
     // 是否显示tip
     showTip: {
@@ -81,12 +90,14 @@ export default {
     // tip文本
     tip: {
       type: String,
-      default: '只能上传jpg/png文件，且不超过'
+      default: "只能上传jpg/png文件，且不超过"
     },
     // 校验上传文件格式
     imgType: {
       type: Array,
-      default: () => { return ['image/jpeg', 'image/png', 'image/gif'] }
+      default: () => {
+        return ["image/jpeg", "image/png", "image/gif"];
+      }
     }
   },
 
@@ -98,88 +109,95 @@ export default {
       // actionUri: `${config.H5WebUrl}/uploadFiles`
       actionUri: `/admin/common/file/upload`,
       headersConfig: {
-        Authorization: 'Bearer ' + getToken(),
+        Authorization: "Bearer " + getToken(),
-        'CSRF-Token': document
+        "X-File-Size": 0
-          .querySelector('meta[name="csrf-token"]')
-          .getAttribute('content'),
-        'X-File-Size': 0
       }
-    }
+    };
   },
 
   methods: {
     handleSuccess(response) {
       if (response.iRet === -1) {
-        this.$message.error(response.message)
+        this.$message.error(response.message);
       } else {
-        this.$emit('imgUrlChange', response.data.url, this.fileHeight, this.fileWidth)
+        this.$emit(
+          "imgUrlChange",
+          response.data.url,
+          this.fileHeight,
+          this.fileWidth
+        );
       }
     },
     handleChange(file, fileList) {
-      this.fileList = fileList.length > 1 ? fileList.splice(-this.fileCount) : fileList
+      this.fileList =
+        fileList.length > 1 ? fileList.splice(-this.fileCount) : fileList;
     },
 
     beforeUpload(file) {
-      const imgType = file.type
+      const imgType = file.type;
       // 校验上传格式
-      let isType = true
+      let isType = true;
-      let isLtSize = true
+      let isLtSize = true;
-      let isSize = true
+      let isSize = true;
       // 校验图片类型
       if (!this.imgType.includes(imgType)) {
-        isType = false
+        isType = false;
-        this.$message.error('非法图片格式，不允许上传')
+        this.$message.error("非法图片格式，不允许上传");
       }
       // 校验上传图片大小
       if (this.checksize) {
         // 校验上传图片大小
-        isLtSize = file.size / 1024 / 1024 < (this.size / 1024)
+        isLtSize = file.size / 1024 / 1024 < this.size / 1024;
-        const ltSizeText = this.size / 1024 >= 1 ? `${this.size / 1024}M` : `${this.size}KB`
+        const ltSizeText =
+          this.size / 1024 >= 1 ? `${this.size / 1024}M` : `${this.size}KB`;
         if (!isLtSize) {
-          this.$message.error(`上传图片大小不能超过 ${ltSizeText}!`)
+          this.$message.error(`上传图片大小不能超过 ${ltSizeText}!`);
         }
       }
       // 获取图片尺寸
 
-      const reader = new FileReader()
+      const reader = new FileReader();
-      reader.onload = (e) => {
+      reader.onload = e => {
-        const img = new Image()
+        const img = new Image();
         img.onload = () => {
           // 在这里可以获取到图片的宽度和高度
-          this.fileWidth = img.width
+          this.fileWidth = img.width;
-          this.fileHeight = img.height
+          this.fileHeight = img.height;
-          return true
+          return true;
-        }
+        };
-        img.src = e.target.result
+        img.src = e.target.result;
-      }
+      };
       // 以DataURL的形式读取文件
-      reader.readAsDataURL(file)
+      reader.readAsDataURL(file);
 
       // 校验图片尺寸
       if (this.checkWidth) {
-        const width = this.width
+        const width = this.width;
-        const height = this.height
+        const height = this.height;
         isSize = new Promise(function(resolve, reject) {
           // window对象，将blob或file读取成一个url
-          const _URL = window.URL || window.webkitURL
+          const _URL = window.URL || window.webkitURL;
-          const img = new Image()
+          const img = new Image();
           // image对象的onload事件，当图片加载完成后执行的函数
           img.onload = function() {
-            const valid = img.width === width && img.height === height
+            const valid = img.width === width && img.height === height;
-            valid ? resolve() : reject(new Error('error'))
+            valid ? resolve() : reject(new Error("error"));
+          };
+          img.src = _URL.createObjectURL(file);
+        }).then(
+          () => {
+            return file;
+          },
+          () => {
+            this.$message.error(
+              `上传失败，图片尺寸不符，请上传${width}*${height}尺寸的图片。`
+            );
+            return Promise.reject(new Error("error"));
           }
-          img.src = _URL.createObjectURL(file)
+        );
-        }).then(() => {
-          return file
-        }, () => {
-          this.$message.error(`上传失败，图片尺寸不符，请上传${width}*${height}尺寸的图片。`)
-          return Promise.reject(new Error('error'))
-        })
       }
-      return isType && isLtSize && isSize
+      return isType && isLtSize && isSize;
     }
   }
-
+};
-}
-
 </script>

vue.config.js

@@ -14,7 +14,7 @@ const port = 8013; // 端口配置
 module.exports = {
   // hash 模式下可使用
   // publicPath: process.env.NODE_ENV === 'development' ? '/' : './',
-  publicPath: "/",
+  publicPath: "/admin/",
   outputDir: "dist",
   assetsDir: "static",
   lintOnSave: process.env.NODE_ENV === "development",