领导信箱

.env.production

@@ -1,2 +1,2 @@
 NOOE_ENV="production"
-VUE_APP_APIURL="https://api.it120.cc/noodles"
+VUE_APP_APIURL="http://nmjt.nxjiewei.com:8011"

README.md

@@ -0,0 +1,19 @@
+# demo-demonstration
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

dist/XiXianZhongXin/leaderMailBox/leader-mailbox-list/css/chunk-3e10a48e.24e53fbf.css

@@ -0,0 +1 @@
+body{background:#39f}.h1{text-align:center;color:#fff;font-weight:500;font-size:20px}.consult{width:90%;margin:3% auto}.van-cell,.van-cell-group{border-radius:10px}.leader-h1{position:relative}.leader-h1-img{position:absolute;left:9%;top:25%}.leader-h1-img>img{width:15px;height:18px}

dist/XiXianZhongXin/leaderMailBox/leader-mailbox/css/app.1ae632b3.css

@@ -0,0 +1 @@
+*{margin:0;padding:0}

dist/XiXianZhongXin/leaderMailBox/leader-mailbox/css/chunk-18ebe37e.4ade1d33.css

@@ -0,0 +1 @@
+.banner img[data-v-c9536622]{width:100%}h1[data-v-c9536622]{text-align:center}

dist/XiXianZhongXin/leaderMailBox/leader-mailbox/css/chunk-397f270a.22ae7f53.css

@@ -0,0 +1 @@
+.h1[data-v-b544cae0]{text-align:center}#box[data-v-56e8d51d]{display:flex;flex-direction:column;height:100vh}.content[data-v-56e8d51d]{flex:1}

dist/XiXianZhongXin/leaderMailBox/leader-mailbox/css/chunk-3e10a48e.24e53fbf.css

@@ -0,0 +1 @@
+body{background:#39f}.h1{text-align:center;color:#fff;font-weight:500;font-size:20px}.consult{width:90%;margin:3% auto}.van-cell,.van-cell-group{border-radius:10px}.leader-h1{position:relative}.leader-h1-img{position:absolute;left:9%;top:25%}.leader-h1-img>img{width:15px;height:18px}

dist/XiXianZhongXin/leaderMailBox/leader-mailbox/css/chunk-5d59c17e.12497df8.css

@@ -0,0 +1 @@
+.images img[data-v-76a5d364]{width:100%}

dist/XiXianZhongXin/leaderMailBox/leader-mailbox/css/chunk-fb483cda.753f867a.css

@@ -0,0 +1 @@
+.gos[data-v-4250d039]{display:flex;justify-content:space-between;height:15vh;line-height:15vh;border:1px solid}.gos img[data-v-4250d039]{width:15vh;height:15vh}

dist/XiXianZhongXin/leaderMailBox/leader-mailbox/js/chunk-2d0b8a79.d2d0a9f5.js

@@ -0,0 +1,2 @@
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0b8a79"],{3039:function(e,n,t){"use strict";t.r(n);var a=function(){var e=this,n=e.$createElement;e._self._c;return e._m(0)},c=[function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",[t("h1",[e._v("my")])])}],r={},u=r,s=t("2877"),i=Object(s["a"])(u,a,c,!1,null,"17aa6a65",null);n["default"]=i.exports}}]);
+//# sourceMappingURL=chunk-2d0b8a79.d2d0a9f5.js.map

src/main.js

@@ -3,15 +3,18 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 
-import axios from "axios"
+import "./plugins/axios.js"
+// import axios from "axios"
 //区别开发环境和测试环境
-axios.defaults.baseURL=process.env.VUE_APP_APIURL
-Vue.prototype.$http=axios
+// axios.defaults.baseURL=process.env.VUE_APP_APIURL
+// Vue.prototype.$http=axios
 //我们以vant-UI为主模板开发，全局载入
 import Vant from 'vant';
 import 'vant/lib/index.css';
 //引入轮播图组件
 import { Lazyload } from 'vant';
+import { Toast } from 'vant';
+Vue.use(Toast)
 Vue.use(Lazyload);
 Vue.use(Vant);
 Vue.config.productionTip = false

src/plugins/axios.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import axios from "axios"
+
+axios.defaults.baseURL=process.env.VUE_APP_APIURL
+
+axios.interceptors.request.use((config)=>{
+  config.headers.Authorization=sessionStorage.getItem("mytoken")?sessionStorage.getItem("mytoken"):""
+  return config
+})
+
+Vue .prototype.$http=axios

src/router/index.js

@@ -42,10 +42,20 @@ const routes = [
     nama:'menuInfo',
     component: () => import('../views/MenuInfo/menuInfo.vue'),
   },
+  {
+    path:'/leader-mailbox',
+    name:'leader-mailbox',
+    component:()=>import('../views/XiXianZhongXin/leader-mailbox/leader-mailbox.vue')
+  },
+  {
+    path:'/leader-mailbox-list',
+    name:'leader-mailbox-list',
+    component:()=>import('../views/XiXianZhongXin/leader-mailbox/leader-mailbox-list.vue')
+  },
   //路由重定向
   {
     path:'/',
-    redirect:{"name":"homepage"}
+    redirect:{"name":"leader-mailbox"}
   }
 ]
 

src/views/Menu/menu.vue

@@ -1,5 +1,6 @@
 <template>
     <div>
+      <button @click="back">返回</button>
         <pre>       
       当前页面作为vue简洁版文档攻略，以及需要注意到的地方
       1. v-if 与 v-show 的区别使用
@@ -77,6 +78,11 @@
 
 <script>
     export default {
+      methods:{
+        back(){
+          window.history.back()
+        }
+      }
         
     }
 </script>

src/views/XiXianZhongXin/leader-mailbox/leader-mailbox-list.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <div class="leader-h1" v-if="show">
+      <h1 class="h1">领导信箱</h1>
+      <!-- 点击事件返回上一页面 -->
+      <div class="leader-h1-img" @click="back">
+        <img src="@/views/XiXianZhongXin/assets/返回.png" alt="" />
+      </div>
+    </div>
+    <!-- 循环渲染姓名和留言内容 -->
+    <div class="consult" v-for="item in value" :key="item.id">
+      <van-cell-group class="consultAll">
+        <van-field left-icon="manager-o" :value="item.name" readonly />
+        <van-field
+          rows="4"
+          type="textarea"
+          left-icon="records"
+          :value="item.content"
+          readonly
+        />
+      </van-cell-group>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: [],
+      token:sessionStorage.getItem("mytoken")?sessionStorage.getItem("mytoken"):"",
+      show:true,
+      gettoken:""
+    };
+  },
+  methods: {
+    //返回上一页面
+    back() {
+      window.history.back();
+    },
+    //获取领导信箱的姓名和留言内容
+    getleaderBox() {
+      this.$http.post("/api/workbench/leader_mailbox/list").then((res) => {
+        console.log(res);
+        this.value=res.data.data
+        console.log(this.value);
+      });
+    },
+  },
+  mounted() {
+    this.gettoken=this.$route.query.token
+    this.token=`Bearer ${this.gettoken}`
+    this.show=this.$route.query.tabbar ? this.$route.query.tabbar : true
+    sessionStorage.setItem("mytoken",this.token)
+    this.getleaderBox();
+  },
+};
+</script>
+
+<style>
+body {
+  background: #3399ff;
+}
+.h1 {
+  text-align: center;
+  color: #fff;
+  font-weight: 500;
+  font-size: 20px;
+}
+.consult {
+  width: 90%;
+  margin: 3% auto;
+}
+.van-cell {
+  border-radius: 10px;
+}
+.van-cell-group {
+  border-radius: 10px;
+}
+.leader-h1{
+  position: relative;
+}
+.leader-h1-img{
+  position: absolute;
+  left: 9%;
+  top: 25%;
+}
+.leader-h1-img>img{
+  width: 15px;
+  height: 18px;
+}
+</style>

src/views/XiXianZhongXin/leader-mailbox/leader-mailbox.vue

@@ -0,0 +1,215 @@
+<template>
+  <div>
+    <div class="leader-h1" v-if="show">
+      <h1 class="h1">领导信箱</h1>
+      <!-- 点击返回上一页 -->
+      <div class="leader-h1-img" @click="back">
+        <img src="@/views/XiXianZhongXin/assets/返回.png" alt="" />
+      </div>
+    </div>
+    <!-- 输入姓名，留言点击上传数据库 -->
+    <div class="inputAll">
+      <!-- 提交form表单 -->
+      <form @submit.prevent="submit(staff_num)">
+        <div class="input-name">
+          <span class="span-name">姓名:</span>
+          <!-- input事件用来点击复选框时显示原本姓名还是匿名 -->
+          <input
+            type="text"
+            name="姓名"
+            placeholder="请输入姓名"
+            class="input-border"
+            v-model="username"
+            @input="userNameChange"
+          />
+          <!-- 这里的v-model用来控制是匿名还是非匿名 -->
+          <div>
+            <van-checkbox v-model="checked" shape="square">匿名</van-checkbox>
+          </div>
+        </div>
+        <div class="input-message">
+          <van-field
+            v-model="content"
+            rows="5"
+            colon="true"
+            name="留言"
+            label="留言"
+            type="textarea"
+            placeholder="请输入留言"
+          />
+        </div>
+        <div class="input-button">
+          <input type="submit" value="提交" />
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      checked: 1,
+      content: "",
+      username: "",
+      staff_num: "",
+      token: sessionStorage.getItem("mytoken")
+        ? sessionStorage.getItem("mytoken")
+        : "",
+      show: true,
+      gettoken:""
+    };
+  },
+  methods: {
+    //点击事件提交到领导信箱的数据库
+    submit(num) {
+      // console.log(id);
+      if (this.username == "" || this.content == "") {
+        this.$toast("请填写内容");
+      } else {
+        this.$http
+          .post("/api/workbench/leader_mailbox/add", {
+            staff_num: num,
+            status: this.checked,
+            content: this.content,
+            name: this.username,
+          })
+          .then((res) => {
+            console.log(res);
+          });
+        //获得提示表明已提交意见
+        this.$toast("建议已提交");
+        this.$router.push(`/leader-mailbox-list?token=${this.token}`);
+      }
+    },
+    userNameChange() {
+      //当checked等于true的时候表单内容被*号覆盖
+      if (this.checked == true) {
+        let inputUserName = this.username;
+        inputUserName = inputUserName.replace(/./g, "*");
+        this.username = inputUserName;
+      } else {
+        //反之显示原本的内容
+        this.username;
+      }
+    },
+    //返回上一页面
+    back() {
+      window.history.back();
+    },
+    getxinxi(){
+      this.$http.post('http://xixuan.nxjiewei.com:8011/api/user/info').then(res=>{
+        // console.log(res.data.data.staff_num);
+        this.staff_num=res.data.data.staff_num
+      })
+    }
+  },
+  //这里挂载的是获取token
+  mounted() {
+    this.gettoken=this.$route.query.token
+    this.token=`Bearer ${this.gettoken}` 
+    sessionStorage.setItem("mytoken", this.token);
+    this.show = this.$route.query.tabbar ? this.$route.query.tabbar : true;
+    this.getxinxi()
+  },
+};
+</script>
+
+<style>
+body {
+  background: #3399ff;
+}
+.h1 {
+  text-align: center;
+  color: #fff;
+  font-weight: 500;
+  font-size: 20px;
+}
+.van-cell {
+  margin-bottom: 3%;
+  border-radius: 10px;
+}
+.van-button--info {
+  color: #39f;
+  background-color: #fff;
+}
+.input-name {
+  display: flex;
+  justify-content: space-around;
+  margin: 0 auto;
+  width: 90%;
+  height: 50px;
+  line-height: 50px;
+  margin-bottom: 3%;
+  background: #fff;
+  border-radius: 10px;
+  margin-top: 3%;
+}
+.span-name {
+  font-size: 14px;
+  color: #97a3b4;
+  margin-left: 3%;
+}
+.input-border {
+  border: none;
+}
+.input-border::-webkit-input-placeholder {
+  color: #97a3b4;
+  font-size: 14px;
+}
+.input-button {
+  width: 85%;
+  background: #fff;
+  height: 40px;
+  text-align: center;
+  margin: auto;
+  line-height: 40px;
+  border-radius: 10px;
+  margin-top: 5%;
+}
+.input-button > input {
+  background: #fff;
+  border: none;
+  color: #39f;
+}
+.input-checkbox {
+  line-height: 40px;
+}
+.input-message {
+  width: 90%;
+  margin: 0 auto;
+}
+.van-checkbox {
+  margin-top: 10px;
+}
+.van-checkbox__icon .van-icon {
+  width: 20px;
+  height: 20px;
+}
+.van-checkbox__label {
+  margin-left: 3px;
+  margin-top: 10%;
+  color: #97a3b4;
+  line-height: 10px;
+  font-size: 16px;
+}
+.van-checkbox__icon {
+  margin-top: 5px;
+}
+.input-message span {
+  color: #97a3b4;
+}
+.leader-h1 {
+  position: relative;
+}
+.leader-h1-img {
+  position: absolute;
+  left: 9%;
+  top: 25%;
+}
+.leader-h1-img > img {
+  width: 15px;
+  height: 18px;
+}
+</style>

src/views/XiXianZhongXin/leader-mailbox/shiyan.vue

@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <div class="leader-h1">
+      <h1 class="h1">领导信箱</h1>
+      <!-- 点击事件返回上一页面 -->
+      <div class="leader-h1-img" @click="back">
+        <img src="@/views/XiXianZhongXin/assets/返回.png" alt="" />
+      </div>
+    </div>
+    <!-- 循环渲染姓名和留言内容 -->
+    <div class="consult">
+      <van-cell-group class="consultAll">
+        <van-field left-icon="manager-o" value="item.name" readonly />
+        <van-field
+          rows="4"
+          type="textarea"
+          left-icon="records"
+          value="item.content"
+          readonly
+        />
+      </van-cell-group>
+      <div class="consult-img" @click="openDiv">
+        <img src="@/views/XiXianZhongXin/assets/展开.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: [],
+    };
+  },
+  methods: {
+    //返回上一页面
+    back() {
+      window.history.back();
+    },
+    //获取领导信箱的姓名和留言内容
+    getleaderBox() {
+      //   this.$http.post("/api/workbench/leader_mailbox/list").then((res) => {
+      //     this.value=res.data.data
+      //     console.log(this.value);
+      //   });
+    },
+    openDiv() {
+      console.log("ss");
+    },
+  },
+
+  mounted() {
+    this.getleaderBox();
+  },
+};
+</script>
+
+<style>
+body {
+  background: #3399ff;
+}
+.h1 {
+  text-align: center;
+  color: #fff;
+  font-weight: 500;
+  font-size: 28px;
+}
+.consult {
+  width: 90%;
+  margin: 3% auto;
+  position: relative;
+}
+.consult-img {
+  position: absolute;
+  left: 35%;
+  top: 78%;
+}
+.consult-img > img {
+  width: 90px;
+  height: 15px;
+}
+.van-cell {
+  border-radius: 10px;
+}
+.van-cell-group {
+  border-radius: 10px;
+}
+.leader-h1 {
+  position: relative;
+}
+.leader-h1-img {
+  position: absolute;
+  left: 9%;
+  top: 18%;
+}
+</style>

vue.config.js

@@ -1,3 +1,4 @@
+const path = require('path')
 module.exports = {
     // 基本路径
     publicPath: './',
@@ -6,5 +7,29 @@ module.exports = {
     configureWebpack: {
       externals: {
       }
+    },
+    devServer: {
+      proxy: {
+        '/api': {
+          target: 'http://localhost:8080',
+          changeOrigin: true,
+          ws: true,
+          pathRewrite: {
+            '^/api': '/mock' 
+          }
+        }
+      }
     }
+  //   productionSourceMap: false,
+	// devServer: {
+	// 	proxy: {
+	// 		'/test': {
+	// 			target: "http://47.105.143.227:3000",//这个是你要访问的接口地址
+	// 			changeOrigin: true,
+	// 			pathRewrite: {//重写地址  比如说 你的接口地址是'https://188.62.63/xxyy/getUser' 你请求得时候地址只需要写'/test/getUser'
+	// 				'/test': '/xxyy'  
+	// 			}
+	// 		}
+	// 	}
+	// }
   }