kuangshan-project/src/views/xixuanzhongxin/leader-mailbox/leader-mailbox.vue

<template>
  <div id="app">
    <div v-show="show">
      <van-nav-bar title="领导信箱" left-arrow @click-left="onClickLeft" />
    </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"
            readonly
          />
          <!-- 这里的v-model用来控制是匿名还是非匿名 -->
          <div>
            <van-checkbox
              v-model="checked"
              shape="square"
              @click="userNameChange"
              >匿名</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>
import { getAllUrlParams } from "../plugins/admin/url-encapsulation.js";
export default {
  data() {
    return {
      checked: 0, //当前复选框不为选中状态
      content: "", //留言内容
      username: "", //员工姓名
      staff_num: "", //员工编号
      token: sessionStorage.getItem("mytoken")
        ? sessionStorage.getItem("mytoken")
        : "", //token值保存在本地，有的话取值，没有为空
      show: false, //tabber是否显示
      myshow:false,
      gettoken: "", //从url获取到token值
      name: "", //员工姓名赋值
      leader: true, //是否为领导
    };
  },
  methods: {
    //点击事件提交到领导信箱的数据库
    submit(num) {
      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) => {});
        //获得提示表明已提交意见
        this.$router.push(`/xixuanzhongxin/leader-mailbox/leader-success`);
      }
    },
    //获取checked的属性值
    userNameChange() {
      //当checked等于true的时候表单内容被*号覆盖
      if (this.checked == true) {
        let inputUserName = this.username;
        inputUserName = inputUserName.replace(/./g, "*");
        this.username = inputUserName;
      } else {
        this.username = this.name;
      }
    },
    //返回上一页面
    onClickLeft() {
      window.history.back();
    },
    //获取个人信息
    getxinxi() {
      this.$http
        .post("http://xixuan.nxjiewei.com:8011/api/user/info")
        .then((res) => {
          this.staff_num = res.data.data.staff_num;
          this.username = res.data.data.name;
          this.name = res.data.data.name;
          if (this.checked == true) {
            let inputUserName = this.username;
            inputUserName = inputUserName.replace(/./g, "*");
            this.username = inputUserName;
            if (this.checked == false) {
              this.username = this.name;
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //页面进入是判断是否为领导，是领导跳转至领导信箱列表页
    Jumpleader() {
      this.$http
        .post(
          "http://xixuan.nxjiewei.com:8011/api/workbench/leader_mailbox/check"
        )
        .then((res) => {
          //获取是否为领导
          this.leader = res.data.data;
          if (this.leader == true) {
            this.$router.push(`/xixuanzhongxin/leader-mailbox/leader-mailbox-list2?token=${this.token}`)
          }
        });
    },
  },
  //这里挂载的是获取token
  mounted() {
    document.body.style.backgroundColor = "#3399ff";
    this.token=this.$route.query.token;
    this.show=this.myshow
    // this.gettoken =getAllUrlParams(window.location.href).token;
    // this.token = `Bearer ${this.gettoken}`;
    // sessionStorage.setItem("mytoken", this.token);
    // this.show = Boolean(getAllUrlParams(window.location.href).tabber);
    this.getxinxi();
  },
  created() {
    // this.Jumpleader();
    this.myshow =Boolean(getAllUrlParams(window.location.href).tabber);
  },
};
</script>

<style scoped>
.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: 10px;
}
.input-border {
  border: none;
}
.input-border::-webkit-input-placeholder {
  color: #cccdcf;
  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;
}
>>> .van-nav-bar {
  background: #39f;
}
>>> .van-field__label {
  margin-right: 5px;
}
>>> .van-nav-bar__title,
.van-nav-bar .van-icon,
.van-nav-bar__text {
  color: #fff;
}
>>> [class*="van-hairline"]:after {
  border: none;
}
>>> .van-field__label {
  width: 3.2em;
}
</style>