添加axios配置

src/App.vue

@@ -1,14 +1,15 @@
 <template>
   <div id="app">
-    <navigation/>
+    <navigation v-if="$route.meta.keepAlive"/>
     <router-view/>
-    <el_footer/>
+    <el_footer v-if="$route.meta.keepAlive"/>
    </div>
 </template>
 
 <script>
 import navigation from './views/navigation/navigation'
 import el_footer from './views/footer/index'
+import { request } from './request/request'
 export default {
   name: 'App',
   components:{
@@ -20,6 +21,9 @@ export default {
 
     };
   },
+  created(){
+
+  },
   methods: {
 
   }

src/request/request.js

@@ -1,8 +1,96 @@
-import axios from 'axios'
+// import axios from 'axios'
+// export function request(config) {
+//   let newVar = axios.create({
+//     baseURL: "http://121.36.212.131:9010",
+//     timeout: 5000
+//   })
+//   return newVar(config);
+// }
+
+//配置文件
+import axios from 'axios';
+// import { getToken } from 'src/utils/auth';
+// import errorCode from 'src/utils/errorCode';
+// import store from 'src/store';
+import { Notification, MessageBox, Message } from 'element-ui'
+axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
+
 export function request(config) {
+  let baseURL;
+  // uEnvDev;开发者模式，点击运行
+  if (process.env.NODE_ENV === 'development') {
+    //测试接口
+    // baseURL = "https://test.tms.tubaosoft.com/prod-api"
+    baseURL = 'http://192.168.1.143:9010';
+  }
+  // uEnvProd；生产模式，点击发行
+  if (process.env.NODE_ENV === 'production') {
+    // baseURL = "http://192.168.137.1:9010"
+    //正式接口
+    // baseURL = "https://test.tms.tubaosoft.com/prod-api"
+    baseURL = 'http://121.36.212.131:9010';
+  }
   let newVar = axios.create({
-    baseURL: 'http://localhost:9999/student/student',
-    timeout: 5000
+    baseURL: baseURL,
+    timeout: 10000
   });
-  return newVar(config)
+  // 请求拦截
+  newVar.interceptors.request.use(
+    request => {
+      //配置基本信息
+      // console.log(request)
+      return request;
+    }, err => {
+      return Promise.reject(err);
+    });
+
+  // 响应拦截
+  newVar.interceptors.response.use(function (response) {
+    // 未设置状态码则默认成功状态
+    let code = res.data.code || 200;
+    // 获取错误信息
+    let msg = errorCode[code] || res.data.msg || errorCode['default']
+    if (code === 401) {
+      MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
+          confirmButtonText: '重新登录',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        store.dispatch('LogOut').then(() => {
+          location.href = '/index';
+        })
+      })
+    } else if (code === 500) {
+      Message({
+        message: msg,
+        type: 'error'
+      })
+      return Promise.reject(new Error(msg))
+    } else if (code !== 200) {
+      Notification.error({
+        title: msg
+      })
+      return Promise.reject('error')
+    } else {
+      return res.data
+    }
+  }, function (error) {
+    // console.log('返回进入拦截失败')
+    return Promise.reject(error);
+  });
+
+  // request拦截器
+  newVar.interceptors.request.use(config => {
+    // 是否需要设置 token
+    // const isToken = (config.headers || {}).isToken === false
+    if (getToken() && !isToken) {
+      config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+    }
+    return config;
+  }, error => {
+    console.log(error);
+    // Promise.reject(error)
+  });
+  return newVar(config);
 }

src/router/index.js

@@ -10,14 +10,37 @@ export default new Router({
       path: '/',
       name: 'home',
       component: () => import(/* webpackChunkName: "about" */ '../views/home/index'),
+      meta: {
+        keepAlive: true
+      }
     },{
       path: '/contractPlacing',
       name: 'contractPlacing',
       component: () => import(/* webpackChunkName: "about" */ '../views/placingOrder/contractPlacing'),
+      meta: {
+        keepAlive: true
+      }
     },{
       path: '/inquiryAndOrder',
       name: 'inquiryAndOrder',
       component: () => import(/* webpackChunkName: "about" */ '../views/inquiryAndOrder/index'),
+      meta: {
+        keepAlive: true
+      }
+    },{
+      path: '/myorder',
+      name: 'myorder',
+      component: () => import(/* webpackChunkName: "about" */ '../views/management/myorder'),
+      meta: {
+        keepAlive: true
+      }
+    },{
+      path: '/login',
+      name: 'login',
+      component: () => import(/* webpackChunkName: "about" */ '../views/login/index'),
+      meta: {
+        keepAlive: false
+      }
     }
   ],
 });

src/views/footer/index.vue

@@ -55,5 +55,4 @@ name: "index"
 </script>
 
 <style scoped>
-
 </style>

src/views/home/index.vue

@@ -1,8 +1,14 @@
 <template>
   <div style="background-color: #f2f6f9">
-    <el-carousel height="500px" indicator-position="none">
-      <el-carousel-item v-for="item in 4" :key="item">
-        <h3>{{ item }}</h3>
+    <el-carousel height="700px" indicator-position="none">
+      <el-carousel-item>
+        <img style="width: 100%;height: 700px;" src="http://www.kaihegroup.cn/repository/image/jjIOSFJySR6gOwMl_7_lAQ.jpg?k=1606198825000" alt="">
+      </el-carousel-item>
+      <el-carousel-item>
+        <img style="width: 100%;height: 700px;" src="https://www.dmu.com.cn/images/banner/banner41.jpg?v=2" alt="">
+      </el-carousel-item>
+      <el-carousel-item>
+        <img style="width: 100%;height: 700px;" src="https://www.dmu.com.cn/images/banner/banner1.jpg?v=1" alt="">
       </el-carousel-item>
     </el-carousel>
 <!--    浮动块-->

src/views/inquiryAndOrder/index.vue

@@ -204,6 +204,10 @@
               prop="address"
               label="40RH">
             </el-table-column>
+            <el-table-column
+              label="操作">
+              <el-button type="primary">订舱</el-button>
+            </el-table-column>
           </el-table>
         </div>
       </div>

src/views/login/index.vue

@@ -0,0 +1,232 @@
+<template>
+  <div class="login">
+    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+      <h3 class="title">凯和船运平台</h3>
+      <el-form-item prop="username">
+        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
+          <!--          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />-->
+          <i slot="prefix" class="el-icon-user" style="font-size: 20px;padding-top: 11px;padding-left: 2px;color: #565656;"></i>
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input
+          v-model="loginForm.password"
+          type="password"
+          auto-complete="off"
+          placeholder="密码"
+          @keyup.enter.native="handleLogin"
+        >
+          <!--          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />-->
+
+          <i slot="prefix" class="el-icon-lock" style="font-size: 20px;padding-top: 11px;padding-left: 2px;color: #565656;"></i>
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="code">
+        <el-input
+          v-model="loginForm.code"
+          auto-complete="off"
+          placeholder="验证码"
+          style="width: 63%"
+          @keyup.enter.native="handleLogin"
+        >
+          <!--          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />-->
+          <i slot="prefix" class="el-icon-connection" style="font-size: 20px;padding-top: 11px;padding-left: 2px;color: #565656;"></i>
+        </el-input>
+        <div class="login-code">
+          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+        </div>
+      </el-form-item>
+      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;color: rgba(245, 248, 250, 0.8);float: left">记住密码</el-checkbox>
+      <el-form-item style="width:100%;">
+        <el-button
+          :loading="loading"
+          size="medium"
+          type="primary"
+          style="width:100%;border-radius: 200px"
+          @click.native.prevent="handleLogin"
+        >
+          <span v-if="!loading">登 录</span>
+          <span v-else>登 录 中...</span>
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <!--  底部  -->
+<!--    <div class="el-login-footer">-->
+<!--      <span><a href="https://beian.miit.gov.cn/">鲁ICP备2021000559号-1</a>  青岛途宝软件开发有限公司</span>-->
+<!--    </div>-->
+  </div>
+</template>
+
+<script>
+import {request} from '../../request/request'
+import Cookies from "js-cookie";
+export default {
+  name: "Login",
+  data() {
+    return {
+      codeUrl: "",
+      company_name:'凯和船运',
+      cookiePassword: "",
+      loginForm: {
+        username: "admin",
+        password: "admin123",
+        rememberMe: false,
+        code: "",
+        uuid: ""
+      },
+      loginRules: {
+        username: [
+          { required: true, trigger: "blur", message: "用户名不能为空" }
+        ],
+        password: [
+          { required: true, trigger: "blur", message: "密码不能为空" }
+        ],
+        code: [{ required: true, trigger: "change", message: "验证码不能为空" }]
+      },
+      loading: false,
+      redirect: undefined
+    };
+  },
+  watch: {
+    $route: {
+      handler: function(route) {
+        this.redirect = route.query && route.query.redirect;
+      },
+      immediate: true
+    }
+  },
+  created() {
+    this.getCode();
+    this.getCookie();
+  },
+  methods: {
+    getCode() {
+      request({
+        url: '/captchaImage',
+        method: 'get'
+      }).then(res => {
+        console.log(res)
+        this.codeUrl = "data:image/gif;base64," + res.data.img;
+        console.log(this.codeUrl);
+        this.loginForm.uuid = res.uuid;
+      }).catch(err => {
+        console.log(err);
+      })
+    },
+    getCookie() {
+      const username = Cookies.get("username");
+      const password = Cookies.get("password");
+      const rememberMe = Cookies.get('rememberMe')
+      this.loginForm = {
+        username: username === undefined ? this.loginForm.username : username,
+        password: password === undefined ? this.loginForm.password : decrypt(password),
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+      };
+    },
+    handleLogin() {
+      this.$refs.loginForm.validate(valid => {
+        if (valid) {
+          this.loading = true;
+          if (this.loginForm.rememberMe) {
+            Cookies.set("username", this.loginForm.username, { expires: 30 });
+            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
+            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
+          } else {
+            Cookies.remove("username");
+            Cookies.remove("password");
+            Cookies.remove('rememberMe');
+          }
+          request({
+            url: '/login',
+            method: 'post',
+            data: this.loginForm
+          }).then(res => {
+            // localStorage.setItem('companyName', this.company_name);
+            // this.$router.push({ path: this.redirect || '/' });
+          }).catch(err => {
+            this.loading = false;
+            this.getCode();
+          })
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: #2c3e50;
+  position: absolute;
+  background-image: url("../../assets/login-background.jpg");
+  background-size: cover;
+}
+.title {
+  margin: 0px auto 30px auto;
+  text-align: center;
+  font-size: 30px;
+  color: #FFFFFF;
+}
+
+.login-form {
+  border-radius: 6px;
+  //background: none;
+  background-color: rgba(0,0,0,0.05);
+  width: 400px;
+  padding: 25px 25px 5px 25px;
+  .el-input {
+    height: 38px;
+    input {
+      height: 40px;
+      border-radius: 200px;
+      color: #000000;
+      background-color: rgba(245,248,250,0.8);
+      border-color:rgba(0,0,0,0.1);
+    }
+    input::placeholder {
+      color: #c1c1c1;
+    }
+  }
+  .input-icon {
+    height: 39px;
+    width: 15px;
+    margin-left: 2px;
+    color: #565656;
+  }
+}
+.login-tip {
+  font-size: 13px;
+  text-align: center;
+  color: #bfbfbf;
+}
+.login-code {
+  width: 33%;
+  height: 38px;
+  float: right;
+  border-color: #fff;
+  img {
+    cursor: pointer;
+    vertical-align: middle;
+  }
+}
+.el-login-footer {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-family: Arial;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+.login-code-img {
+  height: 38px;
+}
+</style>

src/views/management/myorder.vue

@@ -0,0 +1,153 @@
+<template>
+  <div style="width: 70%;height: 700px;margin: 0 auto;display:flex;justify-content: space-around">
+    <div style="width: 20%;height: 392px; margin-top: 60px;border: 1px solid #e7e7e7">
+      <el-menu
+        default-active="3"
+        class="el-menu-vertical-demo"
+        @open="handleOpen"
+        @close="handleClose">
+        <el-menu-item index="1">
+          <i class="el-icon-menu"></i>
+          <span slot="title">订舱须知</span>
+        </el-menu-item>
+        <el-menu-item index="2">
+          <i class="el-icon-setting"></i>
+          <span slot="title">我的模板</span>
+        </el-menu-item>
+        <el-menu-item index="3">
+          <i class="el-icon-setting"></i>
+          <span slot="title">我的订单</span>
+        </el-menu-item>
+        <el-menu-item index="4">
+          <i class="el-icon-setting"></i>
+          <span slot="title">申请放货</span>
+        </el-menu-item>
+        <el-menu-item index="5">
+          <i class="el-icon-setting"></i>
+          <span slot="title">我的拆改单</span>
+        </el-menu-item>
+        <el-menu-item index="6">
+          <i class="el-icon-setting"></i>
+          <span slot="title">在线换单</span>
+        </el-menu-item>
+        <el-menu-item index="7">
+          <i class="el-icon-setting"></i>
+          <span slot="title">快捷支付</span>
+        </el-menu-item>
+      </el-menu>
+    </div>
+    <div style="width: 80%;border: 1px solid #f7f7f7;height: 290px;">
+      <el-menu
+        :default-active="activeIndex"
+        class="el-menu-demo"
+        mode="horizontal"
+        @select="handleSelect"
+        background-color="#545c64"
+        text-color="#fff"
+        active-text-color="#ffd04b">
+        <el-menu-item index="1">全部</el-menu-item>
+        <el-menu-item index="2">订单待付</el-menu-item>
+        <el-menu-item index="3">已配船</el-menu-item>
+        <el-menu-item index="4">待受理</el-menu-item>
+        <el-menu-item index="5">已撤销</el-menu-item>
+        <el-menu-item index="6">已驳回</el-menu-item>
+        <el-menu-item index="7">运单变更</el-menu-item>
+      </el-menu>
+      <div style="width: 100%;display:flex;justify-content: space-around">
+        <div style="width: 20%;">
+          <el-input placeholder="订舱单"></el-input>
+          <el-input placeholder="船名"></el-input>
+          <el-input placeholder="箱号"></el-input>
+        </div>
+        <div style="width: 20%;">
+          <el-input placeholder="收货人"></el-input>
+          <el-input placeholder="航次"></el-input>
+          <el-input placeholder="条数"></el-input>
+        </div>
+        <div style="width: 50%;">
+          <div style="display:flex;justify-content: space-between">
+            <el-input placeholder="始发港" style="width: 45%;"></el-input>
+            <span style="margin-top: 20px">至</span>
+            <el-input placeholder="目的港" style="width: 45%;"></el-input>
+          </div>
+          <div style="display:flex;justify-content: space-between;">
+            <el-input placeholder="创建开始时间" style="width: 45%;"></el-input>
+            <span style="margin-top: 20px">至</span>
+            <el-input placeholder="创建结束时间" style="width: 45%;"></el-input>
+          </div>
+          <div style="display:flex;justify-content: space-between;">
+            <el-input placeholder="单据有效期结束" style="width: 45%;"></el-input>
+            <span style="margin-top: 20px">&nbsp;&nbsp;&nbsp;</span>
+            <el-input placeholder="货名" style="width: 45%;"></el-input>
+          </div>
+        </div>
+      </div>
+      <div style="width: 100%;display:flex;justify-content: space-between">
+        <div style="display: flex;align-items: center;padding-left: 20px"><el-checkbox v-model="checked">全选</el-checkbox></div>
+        <div style="margin-right: 20px">
+          <el-button type="success" plain>装箱单下载</el-button>
+          <el-dropdown>
+            <el-button type="success" plain>
+              委托书下载
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>合并PDF</el-dropdown-item>
+              <el-dropdown-item>批量PDF</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <el-dropdown>
+            <el-button type="success" plain>
+              运单下载
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>合并PDF</el-dropdown-item>
+              <el-dropdown-item>批量PDF</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <el-dropdown>
+            <el-button type="success" plain>
+              放箱单下载
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>华南片区</el-dropdown-item>
+              <el-dropdown-item>虎门提重</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <el-button type="primary" icon="el-icon-search">查询</el-button>
+        </div>
+      </div>
+      <div style="margin-top: 20px">
+        <el-divider>列表数据</el-divider>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'myorder',
+  data() {
+    return {
+      activeIndex: '1',
+      checked:true
+    };
+  },
+  methods: {
+    handleSelect(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.el-input{
+  margin: 10px auto;
+}
+</style>

src/views/navigation/navigation.vue

@@ -16,7 +16,7 @@
         <template slot="title">订单管理</template>
         <el-menu-item index="3-1">订仓须知</el-menu-item>
         <el-menu-item index="3-2">我的模板</el-menu-item>
-        <el-menu-item index="3-3">我的订单</el-menu-item>
+        <el-menu-item index="/myorder">我的订单</el-menu-item>
         <el-menu-item index="3-4">申请放货</el-menu-item>
         <el-menu-item index="3-5">拆改单</el-menu-item>
         <el-menu-item index="3-6">在线换单</el-menu-item>
@@ -50,8 +50,8 @@
         <el-menu-item index="7-6">优惠券</el-menu-item>
         <el-menu-item index="7-7">帐号管理</el-menu-item>
       </el-submenu>
-      <div style="width: 100px;margin-top: 18px;float: right;color: #909399">
-        登录 | 注册
+      <div style="width: 100px;margin-top: 18px;float: right;color: #909399" @click="immediately">
+        登录
       </div>
     </el-menu>
   </div>
@@ -74,6 +74,9 @@ export default {
     handleSelect(key, keyPath) {
       this.$router.push(key);
     },
+    immediately(){
+      this.$router.push('/login')
+    }
   }
 };
 </script>