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

<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>