增加路由&&添加图标&&上传资料页面

src/App.vue

@@ -116,7 +116,6 @@ button{
   background-color: #eeeeee;
   height: 100%;
   min-height: 100vh;
-  // display: none;
   .app_content {
     width: 1190px;
     margin: 0 auto;
@@ -130,6 +129,7 @@ button{
       height: 100%;
       background-color: #d4d4d4;
       height: auto;
+      min-height: 50vh;
     }
     .router_view{
       width: 1030px;

src/components/HeaderBanner.vue

@@ -1,15 +1,17 @@
 <template>
   <div class="header_banner">
     <div class="header_mid">
-      <div class="log"></div>
+      <div class="log">
+        <img src="../img/logo.png">
+      </div>
       <p>雷克萨斯中国经销商订单管理系统</p>
       <div class="operation_button">
-        <div class="back_button">
-          <img src="" alt="">
+        <div class="back_button" @click="homePage">
+          <img src="../img/back.png">
           <p>返回系统选择页面</p>
         </div>
-        <div class="login_out">
-          <img src="" alt="">
+        <div class="login_out" @click="loginOut">
+          <img src="../img/loginOut.png">
           <p>退出系统</p>
         </div>
       </div>
@@ -18,7 +20,15 @@
 </template>
 
 <script>
-export default {};
+export default {
+  methods: {
+    homePage: function() {
+      window.location.href = 'https://118.190.206.51/lexus-ms/home';
+    },
+    loginOut: function() {
+    }
+  }
+};
 </script>
 
 <style scoped lang="less">
@@ -48,14 +58,39 @@ export default {};
     .operation_button{
       width: 248px;
       height: 50.8px;
-      margin: 3px 0 0 40px;
+      margin-top: 3px;
       display: flex;
-      p{
-        padding:0;
-        font-size: 14px;
+      .back_button{
+        width: 112px;
+        height: 50.8px;
+        text-align: center;
+        margin-left: 40px;
+        &:hover{
+          cursor: pointer;
+        }
+        img{
+          width: 30px;
+          height: 30px;
+        }
+        p{
+          padding:0;
+          font-size: 14px;
+        }
       }
       .login_out{
         margin-left: 40px;
+        text-align: center;
+        &:hover{
+          cursor: pointer;
+        }
+        img{
+          width: 30px;
+          height: 30px;
+        }
+        p{
+          padding:0;
+          font-size: 14px;
+        }
       }
     }
   }

src/components/LoginInfo.vue

@@ -2,7 +2,7 @@
   <div class="login_info">
       <div class="user_info">
           <div class="user_icon">
-              <img src="" alt="icon">
+              <img src="../img/user.png" alt="icon">
           </div>
           <div class="user_name">
               <p>欢迎您，</p>
@@ -11,7 +11,7 @@
       </div>
       <div class="time_info">
           <div class="clock_icon">
-              <img src="" alt="icon">
+              <img src="../img/clock.png" alt="icon">
           </div>
           <div class="login_time">
               <p>登录时间</p>
@@ -43,6 +43,8 @@ export default {};
             }
         }
         .user_name{
+            width: 100px;
+            height: 40px;
             margin: 4px 0 0 5px;
             p{
                 line-height: 20px;
@@ -58,8 +60,8 @@ export default {};
             width: 24px;
             height: 24px;
             img{
-                width: 30px;
-                height: 30px;
+                width: 24px;
+                height: 24px;
             }
         }
         .login_time{

src/components/RouterBanner.vue

@@ -18,7 +18,7 @@
           </router-link>
         </div>
         <div class="switch">
-          <img src="" alt="" />
+          <img src="../img/switch.png"/>
         </div>
       </div>
       <div v-if="routerObj.list.length" class="second_level">
@@ -34,7 +34,6 @@
             @click="getNavTitle(routerObj.title, list.title)"
             :class="{blueColor: list.path === routerPath}"
           >- {{ list.title }}</p>
-
         </router-link>
         </div>
       </div>
@@ -65,9 +64,14 @@ export default {
               isShow: "manufacturer" // 只有厂商有权限
             },
             {
-              title: "链接上传",
+              title: "链接上传",   // 厂商的链接上传
+              path: "/uploadLinks",
+              isShow: "manufacturer" // 厂商有权限
+            },
+            {
+              title: "链接上传", // 经销商链接上传
               path: "/uploadLink",
-              isShow: "all" // 厂商和经销商都有权限
+              isShow: "distributor" // 经销商有权限
             },
             {
               title: "上传资料",
@@ -82,16 +86,23 @@ export default {
           ],
         },
         {
-          title: "账号管理",
+          title: "账号管理", // 厂商的账号管理
           path: "/accountIndex",
           img: require("../img/User-Settings.png"),
           list: [],
-          isShow: "all"  // 厂商和经销商都有权限
+          isShow: "manufacturer"  // 厂商有权限
+        },
+        {
+          title: "账号管理",
+          path: "/accountManage",
+          img: require("../img/User-Settings.png"),
+          list: [],
+          isShow: "distributor"  // 经销商有权限
         },
         {
           title: "参数设置",
           path: "/parameterIndex",
-          img: require("../img/setting.png"),
+          img: require("../img/setting.jpg"),
           list: [],
           isShow: "manufacturer" // 只有厂商有权限
         },
@@ -142,20 +153,22 @@ export default {
         margin-left: 4px;
       }
       .icon {
-        width: 35px;
-        height: 35px;
+        width: 26px;
+        height: 26px;
         margin-left: 10px;
-        background: #fff;
         img {
-          width: 35px;
-          height: 35px;
+          width: 26px;
+          height: 26px;
         }
       }
       .switch {
-        width: 11px;
-        height: 11px;
-        background: #fff;
+        width: 21px;
+        height: 21px;
         margin-left: 20px;
+        img{
+          width: 21px;
+          height: 21px;
+        }
       }
     }
     .second_level {

src/router/index.js

@@ -2,14 +2,20 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 // 上传记录
 import UploadRecord from '../views/data/UploadRecord.vue'
-// 链接上传
+// 厂商链接上传
+import UploadLinks from '../views/data/UploadLinks.vue'  
+// 经销商链接上传
 import UploadLink from '../views/data/UploadLink.vue'
 // 上传资料
 import UploadInfor from '../views/data/UploadInfor.vue'
 // 资料列表
 import InforList from '../views/data/InforList.vue'
-// 账号管理
+
+// 厂商账号管理
 import AccountIndex from '../views/account/AccountIndex.vue'
+// 经销商账号管理
+import AccountManage from '../views/account/AccountManage.vue'
+
 // 参数设置
 import ParameterIndex from '../views/parameter/ParameterIndex.vue'
 // 车系车型
@@ -42,6 +48,10 @@ const routes = [
     component: UploadLink
   },
   {
+    path: '/uploadLinks',
+    component:UploadLinks
+  },
+  {
     path: '/uploadInfor',
     component: UploadInfor
   },
@@ -54,6 +64,10 @@ const routes = [
     component: AccountIndex
   },
   {
+    path: '/accountManage',
+    component: AccountManage
+  },
+  {
     path: '/parameterIndex',
     component: ParameterIndex,
     children: [

src/views/account/AccountIndex.vue

@@ -1,14 +1,15 @@
-<template>
-  <div class="upload_record">
-    <h1>账号管理</h1>
-  </div>
-</template>
-
-<script>
-export default {
-}
-</script>
-
-<style scoped lang="less">
-
-</style>
+<template>
+<!-- 厂商账号管理 -->
+  <div class="upload_record">
+    <h1>厂商账号管理</h1>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/account/AccountManage.vue

@@ -0,0 +1,15 @@
+<template>
+<!-- 经销商账号管理 -->
+  <div class="upload_record">
+    <h1>经销商账号管理</h1>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/data/UploadInfor.vue

@@ -12,12 +12,12 @@
         <p>选择类型</p>
         <div>
           <span>素材时间</span>
-          <select name="materialTime" class="selectStyle" v-model="materialTime" autocomplete="off">
+          <select name="materialTime" class="selectStyle" v-model="materialTime" autocomplete="off" @change="materialTimeChange">
             <option value="" selected>请选择</option>
             <option  v-for="(time, index) in materialTimeList" :key="index" :value="time">{{time}}</option>
           </select>
           <span>经销商范围</span>
-          <select class="selectStyle" v-model="range" autocomplete="off">
+          <select class="selectStyle" v-model="scope" autocomplete="off" @change="scopeChange">
             <option value="" selected>共通</option>
             <option value="part">部分</option>
           </select>          
@@ -28,9 +28,9 @@
         <div class="addByArea">
           <span>按区域添加</span>
           <div v-for="(area, index) in areaList" :key="index">
-            <input type="checkbox"><span>{{area}}</span>
+            <input type="checkbox" value=""><span>{{area}}</span>
           </div>
-          <button>添加</button>
+          <button @click="addByArea">添加</button>
         </div>
         <div class="addByCustomize">
           <span>自定义添加</span>
@@ -85,10 +85,9 @@
     </div>
     <div class="uploadFile">
       <p>附件</p>
-      <input type="file" :v-model="fileValue" name="fileName" @change='changeFile()'>
+      <input type="file" name="fileName" id="fileInput">
     </div>
     <button @click="submit" class="submitBtn">提交</button>
-    <input id="myCar" list="cars" />
   </div>
 </template>
 
@@ -110,7 +109,7 @@ export default {
     Tablepage
   },
   watch: {
-    range(val) {
+    scope(val) {
       if(val === 'part') {
         this.isShow = true;
       } else [
@@ -125,9 +124,8 @@ export default {
       inforName: '',
       inforDes: '',
       materialTime: '',
-      range: '',
+      scope: '',
       addByCustomize: '',
-      fileValue: '',
       addFlag: [true, true, true, true, true, true], // 长度等于groupList.length
       optionFlag: false, // 是否展示按小组添加的选择栏
       // 表格配置
@@ -154,10 +152,7 @@ export default {
     }
   },
   methods: {
-    showDetail: () => {
-      alert('展示详情');
-    },
-    // 检查名字是否重复
+    // 检查名字是否重复 失去焦点判断
     checkName: function() {
       if(this.inforName==1) {
         this.tipFlag = true;
@@ -167,10 +162,22 @@ export default {
     hideTip: function() {
       this.tipFlag = false;
     },
+    // 素材时间变化
+    materialTimeChange: function() {
+      console.log(this.materialTime);
+    },
+    // 进销商范围变化
+    scopeChange: function() {
+      console.log(this.scope)
+    },
     // 显示隐藏按小组添加下拉框
     showOption() {
       this.optionFlag = !this.optionFlag;
     },
+    // 点击按区域添加button
+    addByArea: function() {
+      console.log()
+    },
     // 按小组添加，增加小组
     addGroup: function(index) {
       this.addFlag.splice(index, 1, false);
@@ -210,7 +217,33 @@ export default {
       }
       console.log(this.currentPage);
     },
+    // 点击提交，检查名字是否重复，获取数据
     submit: function() {
+      this.checkName();
+      // if(!this.inforName){
+      //   alert('资料名称不能为空');
+      //   return false
+      // }
+      // if(!this.inforDes){
+      //   alert('资料描述不能为空');
+      //   return false
+      // }
+      // if(!this.inforName){
+      //   alert('资料名称不能为空');
+      //   return false
+      // }
+      if(!this.tipFlag){
+        console.log(this.inforName);
+        console.log(this.inforDes);
+        console.log(this.materialTime);
+        console.log(this.scope);
+        console.log(this.tableData);
+        const file = document.getElementById('fileInput').value;
+        console.log(file);
+      }
+    },
+    // 接口请求
+    submitRequest: function() {
       // this.$http({
       //   method: 'post',
       //   url: '/auth/checkSign',
@@ -222,12 +255,8 @@ export default {
       // }).catch((err) => {
       //   console.log(err);
       // })
-      // console.log(this.inforName, this.inforDes, this.materialTime, this.range, this.addByCustomize, File.size);
+      // console.log(this.inforName, this.inforDes, this.materialTime, this.scope, this.addByCustomize, File.size);
       // console.log(FileList.);
-    },
-    //
-    changeFile(){
-      console.log(123);
     }
   }
 }

src/views/data/UploadLinks.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="">
+      厂商链接上传
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>