payment/src/views/function/index.vue

<template>
  <div class="mianBox">
    <van-row class="headerBox">
      <!-- <van-icon name="arrow-left" @click="$router.go(-1)" /> -->
      <van-image :src="portrait" class="img"  @click="information" />
      <div class="headerTitle">{{title}}</div>
      
    </van-row>
    <!-- 消息页 -->
    <van-row class="msgWrap" v-if="active == 0">
      <van-loading size="24px" v-if="loading" vertical style="margin-top:40px">加载中...</van-loading>
      <van-row class="msg" v-if="cz.status" @click="msgSaut('/record',1)">
        <van-row class="left">
          <van-image :src="require('../../assets/image/function/icon3.png')" />
          <van-badge :content="cz.num" max="99" class="badge" />
        </van-row>
        <van-row class="center">
          <van-row class="title">充值通知</van-row>
          <van-row class="p">{{cz.msg}}</van-row>
        </van-row>
        <van-row class="right">
          {{cz.updateTime}}
        </van-row>
      </van-row>
      <van-row class="msg" v-if="xf.status" @click="msgSaut('/record',2)">
        <van-row class="left">
          <van-image :src="require('../../assets/image/function/icon5.png')" />
          <van-badge :content="cz.num" max="99" class="badge" />
        </van-row>
        <van-row class="center">
          <van-row class="title">消费通知</van-row>
          <van-row class="p">{{cz.msg}}</van-row>
        </van-row>
        <van-row class="right">
          {{cz.updateTime}}
        </van-row>
      </van-row>
      <van-row class="msg" v-if="fk.status" @click="msgSaut('/fk')">
        <van-row class="left">
          <van-image :src="require('../../assets/image/function/icon6.png')" />
          <van-badge :content="fk.num" max="99" class="badge" />
        </van-row>
        <van-row class="center">
          <van-row class="title">访客申请{{fk.title}}</van-row>
          <van-row class="p">{{fk.msg}}</van-row>
        </van-row>
        <van-row class="right">
          {{fk.updateTime}}
        </van-row>
      </van-row>
      <van-row class="noMsg" v-if="noMsg">
        暂无数据
      </van-row>
    </van-row>
    <!-- 功能页 -->
    <van-row class="functionWrap" v-if="active == 1"> 
      <van-row  type="flex" justify="space-between" gutter="10" >
        <!-- <van-col span="6" class="function">
          <van-image :src="require('../../assets/image/function/icon1.png')" />
          <van-col >运营中心</van-col>
        </van-col> -->
        <van-col span="6" class="function" @click="sm('https://smartpark.caih.com/h5/#/licence',1)">
          <van-image :src="require('../../assets/image/function/icon2.png')" />
          <div class="title">停车管理</div>
        </van-col>
        <van-col span="6" class="function" @click="ykt">
          <van-image :src="require('../../assets/image/function/icon3.png')" />
          <div class="title">一卡通</div>
        </van-col>
        <!-- <van-col span="6" class="function" @click="sm('https://smartpark.caih.com/h5/#/Food')">
          <van-image :src="require('../../assets/image/function/icon5.png')" />
          <van-col >智慧餐饮</van-col>
        </van-col> -->

        <van-col span="6" class="function" @click="sm('https://smartpark.caih.com/h5/#/myVisitor',2)">
          <van-image :src="require('../../assets/image/function/icon6.png')" />
          <div class="title">访客申请</div>
        </van-col>
        <!-- <van-col span="6" class="function">
          <van-image :src="require('../../assets/image/function/icon4.png')" />
          <van-col >智能会议</van-col>
        </van-col> -->
      </van-row>
      <!-- <van-row  type="flex" justify="space-between" gutter="10">
        <van-col span="6" class="function">
          <van-image :src="require('../../assets/image/function/icon6.png')" />
          <van-col>访客申请</van-col>
        </van-col>
        <van-col span="6" class="function">
          <van-image :src="require('../../assets/image/function/icon7.png')" />
          <van-col >文印助手</van-col>
        </van-col>
        <van-col span="6" class="function">
          <van-image :src="require('../../assets/image/function/icon8.png')" />
          <van-col >厕卫管理</van-col>
        </van-col>
      </van-row> 
      <van-row  type="flex" justify="space-between" gutter="10">
        <van-col span="6" class="function">
          <van-image :src="require('../../assets/image/function/icon9.png')" />
          <van-col >智能阅览室</van-col>
        </van-col>
      </van-row> -->
    </van-row>
    
    <van-tabbar v-model="active" class="foot" >
      <van-tabbar-item @click="tab">
        <van-image :src="require('../../assets/image/msg1.png')" class="img" v-show="active==1" />
        <van-image :src="require('../../assets/image/msg2.png')" class="img" v-show="active==0"/>
        <p>消息</p>
        </van-tabbar-item>
      <van-tabbar-item @click="tab">
        <van-image :src="require('../../assets/image/fun1.png')" class="img" v-show="active==0" />
        <van-image :src="require('../../assets/image/fun2.png')" class="img" v-show="active==1"/>
        <p>功能</p>
      </van-tabbar-item>
    </van-tabbar>

    <!-- <van-loading
      size="24px"
      v-if="loading"
      color="#fff"
      vertical
      style="z-index: 999999; position: fixed; top: 40%; left: 0; right: 0"
      >加载中...</van-loading
    >
    <van-overlay :show="loading" style="z-index: 100; position: fixed" /> -->
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { encrypt, decrypt } from '../../utils/jsencrypt';
import { getDateStrNowDay} from '@/assets/js/dataFormate.js'
export default {
  data() {
    return {
      user:undefined,
      type:undefined,
      loading: false,
      active: 1,
      title:"功能",
      img:{
        msg:require('../../assets/image/msg1.png'),
        fun:require('../../assets/image/fun2.png'),
      },
      portrait:undefined,
      noMsg:false,
      fk:{//访客数据
        title:undefined,
        status:false,//状态
        msg:undefined,//简讯
        num:undefined,//未读数量
        updateTime:undefined//最新时间
      },
      cz:{//充值数据
        status:false,//状态
        msg:undefined,//简讯
        num:undefined,//未读数量
        updateTime:undefined//最新时间
      },
      xf:{//消费数据
        status:false,//状态
        msg:undefined,//简讯
        num:undefined,//未读数量
        updateTime:undefined//最新时间
      },
      xs1:false,
      xs2:false,
      xs3:false,
      loading:true,
    };
  },
  created(){
    this.portrait = Cookies.get("portrait57")
    if(!Cookies.get("openid57") || !Cookies.get("username57") || !Cookies.get("password57")){
      this.$router.push({ path: "/"})
    }
  },
  mounted() {
    document.title = '中国东信智慧园区'
  },
  methods: {
    tab(){//tab切换
      if(this.active == "0"){
          //充值未读查询
          axios.post(`/dxtop/charge/page`,{
              "size":100,
              "current":1,
              "messageFlag":0,
              "userId":Cookies.get("userId57")
          }).then(res1 => {
            let data = res1.data.data.records
            if (data.length > 0) {
              this.cz.msg = `充值到帐：${data[data.length-1].amt}元`
              this.cz.num = data.length
              let time = ((data[data.length-1].createTime).split(" "))
              if(getDateStrNowDay() != time[0]){
                this.cz.updateTime = data[data.length-1].createTime
              }else{
                this.cz.updateTime = time[1]
              }
              this.xs1 = true
            }else{
              this.xs1 = false
            }
            //消费未读查询
            axios.post(`/dxtop/dish/page`,{
              "size":100,
              "current":1,
              "messageFlag":0,
              "userId":Cookies.get("userId57")
            }).then(res2 => {
              let data = res2.data.data.records
              if (data.length > 0) {
                this.xf.msg = `${data[data.length-1].shopName}扣款${data[data.length-1].amt}元`
                this.xf.num = data.length
                let time = ((data[data.length-1].createTime).split(" "))
                if(getDateStrNowDay() != time[0]){
                  this.xf.updateTime = data[data.length-1].createTime
                }else{
                  this.xf.updateTime = time[1]
                }
                this.xs2 = true
              }else{
                this.xs2 = false
              }
              this.loading = false
              //访客查询
                axios.post(`https://smartpark.caih.com/ykt/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(res3 => {
                  let data = res3.data.data.content
                  if(data.length>0){
                    this.fk.title = `（${data[data.length-1].createBy}）`
                    this.fk.msg = `到访事由：${data[data.length-1].forVisiting}`
                    this.fk.num = data.length
                    let time = ((data[data.length-1].updateTime).split(" "))
                    if(getDateStrNowDay() != time[0]){
                      this.fk.updateTime = data[data.length-1].updateTime
                    }else{
                      this.fk.updateTime = time[1]
                    }
                    this.xs3 = true
                  }else{
                    this.xs3 = false
                  }
                  if(this.xs1 == true){
                    this.cz.status = true
                  }
                  if(this.xs2 == true){
                    this.xf.status = true
                  }
                  if(this.xs3 == true){
                    this.fk.status = true
                  }
                  if(!this.cz.status && !this.xf.status && !this.fk.status){
                    this.noMsg = true
                  }
                })
            })
          })
      }
    },
    msgSaut(url,id){//消息跳转
      this.$router.push({ path: url,query:{id:id}})
    },
    //我的信息
    information(){
      let parmas = encrypt(123)
      let url = window.location.host
      //window.location.href = `http://${url}/vuepay/html/company.html?params=${parmas}`
      this.$router.push({ path: "/information"})
    },
    //一卡通
    ykt(){
      this.$router.push({ path: `/amount?token=${localStorage.getItem('cipher57')}&classify`})
    },
    //世茂
    sm(url,id){
      if(id == "2"){
        window.location.href = `${url}?userId=${Cookies.get("userId57")}`
      }
      if(id == "1"){
        let param = {
          userid:encrypt(Cookies.get("username57")),
          password:Cookies.get("password57"),
          type:"wx_yt",
          id:""
        }
        window.location.href = `${url}?param=${encodeURIComponent(JSON.stringify(param))}`
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.mianBox{
    height: 100%;
    width: 100%;
    color: #FFF;
    padding-top: 44px;
    box-sizing: border-box;
    background-color: #F7F7F7;
    .headerTitle{
      text-align: center;
      position: absolute;
      width:100px;
      left:50%;
      margin-left:-50px;
    }
    .msgWrap{
      width:96%;
      margin:0 auto;
      height:calc(100% - 44px);
      overflow-y:scroll;
      .msg{
        padding:15px 0;
        border-bottom:1px solid #ccc;
        text-align: center;
        .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: right; 
          line-height: 16px;
          vertical-align: top;
          font-size: 12px;
        }
      }
      .noMsg{
        text-align: center;
        color:#7C7C7C;
        margin-top:20px;
      }
    }
    
    .functionWrap{
      width: 94%;
      margin:20px 3%;
      padding: 15px 20px;
      box-sizing: border-box;
      overflow: hidden;
      background-color: #fff;
      border-radius: 15px;
      .function{
        width:20%;margin:10px 2.5%;
      }
      .van-row{
        .van-image{
          width:100%;
          vertical-align: middle;
        }
       
      }
      .title{
        text-align: center;
        color:#323232;
        font-size: 10px;
        margin-top:6px;
      }
    }
    .foot {
        .img{
          width:15px;
          margin:0px auto 0;
          display: block;
        }
        p{
          margin-top:6px;
        }
      }
}
.van-tabbar-item{
  color:#666666;
}
.van-tabbar-item--active{
  color:#EA2F3D;
}
</style>