payment/src/views/fk/index.vue

<template>
  <div class="mianBox">
    <van-row class="headerBox">
      <van-icon name="arrow-left" @click="$router.go(-1)" />
      {{title}}
    </van-row>
    <!-- 消息页 -->
    <van-row class="msgWrap" >
      <van-loading size="24px" v-if="loading" vertical style="margin-top:40px">加载中...</van-loading>
        <van-row class="msg" v-for="(item, index) in fkMsg" :key="index">
            <van-row class="top" style="color:#ccc">
                {{item.updateTime}}
            </van-row>
            <van-row class="bottom">
                <van-row class="left">
                    <van-image :src="require('../../assets/image/function/icon6.png')" />
                </van-row>
                <van-row class="right" >
                    <van-row class="top">{{item.createBy}} 提出申请</van-row>
                    <van-row class="middle">到访事由：{{item.forVisiting}}</van-row>
                    <van-row class="bottom" @click="fkId(item)">查看详情</van-row>
                </van-row>
            </van-row>
        </van-row>
    </van-row>
  </div>
</template>
<script>
import Cookies from "js-cookie";
export default {
  data() {
    return {
      title:"消息详情",
      fkMsg:[],
      nonce:undefined,
      timestamp:undefined,
      loading:true,
    };
  },
  created(){
    if(Cookies.get("nonce57")){
      this.nonce = Cookies.get("nonce57")
    }
    if(Cookies.get("timestamp57")){
      this.timestamp = Cookies.get("timestamp57")
    }
    if(!Cookies.get("openid57") || !Cookies.get("username57") || !Cookies.get("password57")){
      this.$router.push({ path: "/"})
    }
    this.fk()
    
  },
  mounted() {
    document.title = '中国东信智慧园区'
  },
  methods:  {
    fk(){//访客列表查询
        axios.post(`${process.env.VUE_APP_CARD_BASE_API}api/thirdparty/v1/openInterface/queryDmVisitorsApply?page=0&size=100`,{timestamp:Cookies.get("timestamp57"),nonce:Cookies.get("nonce57"),query:{
userNumber:Cookies.get("userId57"),applyStatus:0,}},
        {
          headers: {
            'Content-Type': "application/json",
            "XYTACCESSTOKEN":Cookies.get("token57")
          }
        }).then(res => {
          let data = res.data.data.content
          this.fkMsg = data
          this.loading = false
        })
    },
    //访客信息已读消除及页面跳转
    fkId(item){
      axios.post(`${process.env.VUE_APP_CARD_BASE_API}api/thirdparty/v1/openInterface/editDmVisitorsApplyStatus`, 
      {
        "timestamp":Cookies.get("timestamp57"),
        "nonce":Cookies.get("nonce57"),
        "query": {
          "ids":[item.id],
          "applyStatus": 1
        },
      },
      { headers: {
            'Content-Type': "application/json",
            "XYTACCESSTOKEN":Cookies.get("token57")
          }
      }).then(res => {
          window.location.href = `${process.env.VUE_APP_BASE_API}h5/#/myVisitor?id=${item.id}`
      }).catch(err =>{
          
      })
    },
  }  
};
</script>

<style lang="scss" scoped>
.mianBox{
    height: 100%;
    width: 100%;
    color: #F4F5F7;
    padding-top: 44px;
    box-sizing: border-box;
    background-color: rgba(244,245,247,0.8);
    .msgWrap{
      width:92%;
      margin:0 auto;
      height:calc(100% - 44px);
      overflow-y:scroll;
      .msg{
        padding:15px 0;
        text-align: center;
        .top{
            color:#454545;
            text-align: center;
            margin:0px auto 10px;
        }
        .bottom{
            .left{
                width:auto;
                display: inline-block;
                text-align: left;
                float:left;
                img{
                    width:25px;
                }
            }
            .right{
                display: inline-block;
                margin-left:0%;
                width:80%;
                box-sizing: border-box;
                background-color: #fff;
                border-radius: 8px;
            }
        }
        .left{
          width:15%;
          position: relative;
          text-align: middle;
          display: inline-block;
          .van-image{
            width:45px !important;
          }
          .badge{
            position: absolute;
            top:-10px;
            right:-10px;
          }
        }
        .center{
          width:55%;
          text-align: left;
          display: inline-block;
          color:#454545;
          overflow: hidden;
          margin-left:5%;
          .title{
            font-size: 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
          .p{
            margin-top:10px;
            font-size: 13px;
            color:#7C7C7C;
             overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
        }
        .right{
          width:25%;
          display: inline-block;
          color:#A8A8A8;
          text-align: left; 
          line-height: 20px;
          vertical-align: top;
          padding:4px 8px;
          .top,.middle{
            text-align: left;
            font-size: 14px;
          }
          .top{margin-top:5px;}
          .middle{margin:-5px 0 10px;}
          .bottom{
            text-align: center;
            font-size: 14px;
            padding:4px 0 2px;
            border-top:1px solid #ccc;
            color:#EA2F3D;
          }
        }
      }
    }
}
</style>