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

<template>
  <div>
    <!-- 当员工未留言时加载 -->
    <div class="headers" v-if="showH1">
      <h1>暂无数据</h1>
    </div>
    <!-- 循环体 -->
    <div
      class="consult"
      v-for="(item, index) in value"
      :key="index"
      ref="dialog"
    >
    <!-- 渲染员工姓名 -->
      <div class="consult-item">
        <span>
          <img src="../../../assets/images/leader-mailbox/renwu.png" alt="" />
        </span>
        <input type="text" placeholder="姓名" readonly :value="item.name" />
        <!-- 这里进行判断是否是已回复还是未回复 -->
        <div>
          <van-button type="primary" disabled size="mini" v-if="status=item.reply_status">已回复</van-button>
          <van-button type="danger" disabled size="mini" v-else>未回复</van-button>
        </div>
      </div>
      <!-- 渲染员工留言时间 -->
      <div class="consult-item-time">
        <span>
          <img src="../../../assets/images/leader-mailbox/shijian.png" alt="" />
        </span>
        <input
          type="text"
          placeholder="时间"
          readonly
          :value="item.created_at"
        />
      </div>
      <!-- 渲染员工留言内容 -->
      <div class="consult-item-textarea">
        <span>
          <img src="../../../assets/images/leader-mailbox/neirong.png" alt="" />
        </span>
        <textarea
          name=""
          id=""
          cols="30"
          rows="1"
          readonly
          :value="item.content"
        ></textarea>
      </div>
      <!-- 渲染领导回复 -->
      <div class="consult-item-textarea" v-if="status1=item.reply_status">
        <span>
          <img src="../../../assets/images/leader-mailbox/huifu.png" alt="" />
        </span>
        <!-- 渲染领导回复时间 -->
        <div>
          <input
            type="text"
            placeholder="暂无回复"
            readonly
            :value="item.reply_time"
          />
        <!-- 渲染领导回复内容 -->  
          <p>{{ item.reply }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: [], //获取到员工姓名和留言组成对象，放入数组中
      token: sessionStorage.getItem("mytoken")
        ? sessionStorage.getItem("mytoken")
        : "", //token值保存在本地，有的话取值，没有为空
      show: true, //tabber是否显示
      gettoken: "", //从url获取到token值
      correlate: false,//弹出层
      textareas: "",//弹出层中的多行文本域
      indexlist: "",//获取当前循环体中的下标
      indexid: "",//获取当前循环体中的id
      showH1:false
    };
  },
  mounted() {
    document.body.style.backgroundColor = "#3399ff";//背景色
    // this.gettoken =getAllUrlParams(window.location.href).token;
    // this.token = `Bearer ${this.gettoken}`;
    this.token=this.$route.query.token;//获取token值
    sessionStorage.setItem("mytoken", this.token);//存入token值
    this.getleaderBox();//挂载接口信息
  },
  methods: {
    getleaderBox() {
      this.$http.post("/api/workbench/leader_mailbox/list", {}).then((res) => {
        if(res.data.data.data.length==""){
          this.showH1=true
        }else{
          this.showH1=false
        }
        this.value = res.data.data.data;
      });
    },
  },
};
</script>

<style scoped>
.headers{
  text-align: center;
  width: 90%;
  height: 150px;
  line-height: 150px;
  border-radius: 10px;
  margin: 15% auto;
  background: #fff;
}
.consult {
  width: 90%;
  margin: 3% auto 7%;
  background: #fff;
  border-radius: 10px;
}
.consult-item {
  display: flex;
  justify-content: space-between;
  line-height: 34px;
}
.consult-item > span {
  display: block;
  width: 25px;
  margin-left: 5%;
}
.consult-item img {
  width: 100%;
  padding-top: 23%;
}
.consult-item > input {
  border: none;
}
.consult-item > div {
  margin-right: 5%;
}
.consult-item-time {
  line-height: 36px;
  display: flex;
}
.consult-item-time > span {
  display: flex;
  width: 25px;
  margin-left: 5%;
}
.consult-item-time img {
  width: 25px;
  height: 25px;
  padding-top: 23%;
}
.consult-item-time > input {
  border: none;
  margin-left: 7%;
}
.consult-item-textarea {
  display: flex;
}
.consult-item-textarea > span {
  display: block;
  width: 25px;
  margin-left: 5%;
}
.consult-item-textarea > textarea {
  border: none;
  margin-left: 7%;
  margin-top: 2%;
}
.consult-item-textarea img {
  width: 100%;
  padding-top: 23%;
}
.consult-item-textarea {
  display: flex;
}
.consult-item-textarea > div > input {
  margin-top: 6%;
  margin-left: 10%;
  border: none;
}
.consult-item-textarea > div p {
  margin-top: 3%;
  margin-left: 10%;
  margin-bottom: 3%
}
.van-cell {
  border-radius: 10px;
}
.van-cell-group {
  border-radius: 10px;
}
.input-button {
  width: 85%;
  background: #39f;
  height: 30px;
  text-align: center;
  margin: auto;
  margin-bottom: 10px;
  line-height: 30px;
  border-radius: 10px;
  margin-top: 5%;
}
.input-button > input {
  background: #39f;
  border: none;
  color: #fff;
}
.active {
  visibility: hidden;
}
>>> .van-dialog__content {
  text-align: center;
}
</style>