payment/src/views/home/index.vue

<template>
  <div class="mianBox">
    <van-row class="headerBox">
      智慧楼宇
    </van-row>
    <van-row class="people">
      <van-row class="top">
        <van-row class="left">
          <van-uploader :after-read="afterRead" class="upload" />
          <van-image :src="portrait57" class="portrait" />
        </van-row>
        <van-row class="right">
          <van-row class="name">
            {{nickName57}}
          </van-row>
          <van-row class="dept">
            {{dept57}}
          </van-row>
          <van-row class="phone">{{phone57}}</van-row>
          <van-icon name="arrow"  class="arrowRight"  @click="go"/>
        </van-row>
        <van-row class="bottom">
          <van-row  >
            <span  v-loading="loadingBalance">{{balance}}元<br>余额</span>
          </van-row>
          <van-row  >
            <span  v-loading="loadingPlateNumber">{{plateNumber}}<br>车牌信息</span>
          </van-row>
          
        </van-row>
      </van-row>
    </van-row>
    <van-row class="contentBox">
      <van-row class="system">
        <van-row  type="flex" justify="space-between" gutter="10" >
          <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/#/visitorApply',2)">
            <van-image :src="require('../../assets/image/function/icon6.png')" />
            <div class="title">访客申请</div>
          </van-col>
          <van-col span="6" class="function" @click="sm('https://smartpark.caih.com/h5/#/safeIndex',3)" v-if="people57 == '1'">
            <van-image :src="require('../../assets/image/function/icon10.png')" />
            <div class="title">综合安防</div>
          </van-col>
          <!-- <van-col span="6" class="function"  v-if="people57 == '1'">
            <van-image :src="require('../../assets/image/function/icon11.png')" />
            <div class="title">预约场地</div>
          </van-col> -->
        </van-row>
      </van-row>
      <van-row class="record">
        
        <van-row class="recordList">
          <van-row class="listTitle"><span></span>最近消费记录</van-row>
          <el-table v-loading="loading2" :data="adminList2" style="margin-top:10px;" :header-cell-style="{background:'#F5F5F5'}" >
            <el-table-column label="序号" align="left"  show-overflow-tooltip min-width="15%">
              <template slot-scope="scop">
                {{scop.$index+1}}
              </template>
            </el-table-column>
            <el-table-column label="消费设备" align="left" prop="termName" show-overflow-tooltip min-width="25%"/>
            <el-table-column label="金额" align="left" prop="amt" show-overflow-tooltip min-width="22%">
               <template slot-scope="scop">
                {{scop.row.amt}}元
              </template>
            </el-table-column>
            <el-table-column label="时间" align="left" prop="createTime" show-overflow-tooltip min-width="40%"/>
          </el-table>
        </van-row>
        <van-row class="recordList" style="margin-bottom:20px;">
          <van-row class="listTitle"><span></span>最近访客预约记录</van-row>
          <el-table v-loading="loading3" :data="adminList3" style="margin-top:10px;" :header-cell-style="{background:'#F5F5F5'}" >
            <el-table-column label="序号" align="left"  show-overflow-tooltip min-width="15%">
              <template slot-scope="scop">
                {{scop.$index+1}}
              </template>
            </el-table-column>
            <el-table-column label="访客名称" align="left" prop="visitor_name" show-overflow-tooltip min-width="40%"/>
            <el-table-column label="到访时间" align="left" prop="start_time" show-overflow-tooltip min-width="45%"/>
          </el-table>
        </van-row>
        
        <van-row class="recordList" style="margin-bottom:20px;">
          <van-row class="listTitle"><span></span>最近停车记录</van-row>
          <el-table v-loading="loading4" :data="adminList4" style="margin-top:10px;" :header-cell-style="{background:'#F5F5F5'}" class="tableScroll">
            <el-table-column label="序号" align="left"  show-overflow-tooltip min-width="15%">
              <template slot-scope="scop">
                {{scop.$index+1}}
              </template>
            </el-table-column>
            <el-table-column label="车牌号" align="left" prop="plate_number" show-overflow-tooltip min-width="25%"/>
            <el-table-column label="方向" align="left" prop="" show-overflow-tooltip min-width="15%">
              <template slot-scope="scop">
                {{scop.row.ingatename ? "进":"出"}}
              </template>
            </el-table-column>
            <el-table-column label="时间" align="left" prop="" show-overflow-tooltip min-width="45%">
              <template slot-scope="scop">
                {{scop.row.intime ? scop.row.intime:scop.row.outtime}}
              </template>
            </el-table-column>
          </el-table>
        </van-row>
        <van-row class="recordList">
          <van-row class="listTitle"><span></span>最近通行记录</van-row>
          <el-table v-loading="loading1" :data="adminList1" style="margin-top:10px;" :header-cell-style="{background:'#F5F5F5'}" >
            <el-table-column label="序号" align="left"  show-overflow-tooltip min-width="15%">
              <template slot-scope="scop">
                {{scop.$index+1}}
              </template>
            </el-table-column>
            <el-table-column label="通行地点" align="left" prop="dmRoomDevice.name" show-overflow-tooltip min-width="40%"/>
            <el-table-column label="时间" align="left" prop="accessTime" show-overflow-tooltip min-width="45%"/>
          </el-table>
        </van-row>
      </van-row>
    </van-row>
    <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 axios from "axios";
import { Toast } from "vant";
import Cookies from "js-cookie";
import { encrypt, encrypt2, decrypt } from '../../utils/jsencrypt';
export default {
  data() {
    return {
      //个人信息
        portrait57:undefined,
        nickName57:undefined,
        dept57:undefined,
        phone57:undefined,
        people57:false,
      loading: false,
      loadingPlateNumber:true,
      plateNumber:undefined,//车牌号
      loadingBalance:true,
      balance:undefined,//余额
      //table
        adminList1:[],
        adminList2:[],
        adminList3:[],
        adminList4:[],
        loading1:true,
        loading2:true,
        loading3:true,
        loading4:false,
      //图片上传
        nonce:undefined,
        timestamp:undefined,
        token:undefined,
        userId:undefined,
        loading:false,
        formData:undefined,
        username:undefined,

    };
  },
  created(){
    if(Cookies.get("userId57")){
      this.userId = Cookies.get("userId57")
    }else{
      this.$router.push({ path: "/login"})
    }
    this.portrait57 = Cookies.get("portrait57")
    this.nickName57 = Cookies.get("nickName57")
    this.dept57 = Cookies.get("dept57")
    this.phone57 = Cookies.get("phone57")
    this.people57 = Cookies.get("people57")
     if(Cookies.get("token57")){
      this.token = Cookies.get("token57")
    }
    if(Cookies.get("nonce57")){
      this.nonce = Cookies.get("nonce57")
    }
    if(Cookies.get("timestamp57")){
      this.timestamp = Cookies.get("timestamp57")
    }
    
    if(Cookies.get("username57")){
      this.username = Cookies.get("username57")
    }
    if(Cookies.get("password57")){
      this.password = decrypt(Cookies.get("password57"))
    }
    if(!Cookies.get("openid57") || !Cookies.get("username57") || !Cookies.get("password57") || !localStorage.getItem('cipher57')){
      this.outLogin()
    }
    //余额
    axios.get(`/dxtop/staff/one?id=${Cookies.get("userId57")}`).then(res => { //验证充值信息是否同步
      if(res?.data?.data?.cardId){
        Cookies.set("cardId57",res?.data?.data?.cardId)
         axios.get(`/dxtop/staff/cardBalance?card=${res.data.data.cardId}`).then(res => { //验证充值信息是否同步
          if(res.data.data){
            this.balance = res.data.data
          }else{
            this.balance = "0.00"
          }
          this.loadingBalance = false
        })
      }else{
        this.loadingBalance = false
      }
    })
    //车牌号查询
    axios.post(`https://smartpark.caih.com/ykt/api/thirdparty/v1/openInterface/getPlateNumber`, 
    {
      "nonce": Cookies.get("nonce57"),
      "timestamp": Cookies.get("timestamp57"),
      "query": {
        "userNumber":Cookies.get("userId57"),
      }
    },
    {headers: {
        "XYTACCESSTOKEN":Cookies.get("token57")
      }
    }).then(res => {
        if(res?.data?.data && res?.data?.data.length>0){
          this.plateNumber = res.data.data[0].plateNumber
          this.loadingPlateNumber = false
        }else{
          this.plateNumber = "未录入"
          this.loadingPlateNumber = false
        }
      }).catch(err =>{
        Toast(err.response.data.message)
    })
    
    //通行记录
    axios.post(`https://smartpark.caih.com/ykt/api/thirdparty/v1/openInterface/getAccessTraffic?page=0&size=10&sort=id,desc`, 
    {
      "nonce": Cookies.get("nonce57"),
      "timestamp": Cookies.get("timestamp57"),
      "query": {
        "userNumber":Cookies.get("userId57"),
      }
    },
    {headers: {
        "XYTACCESSTOKEN":Cookies.get("token57")
      }
    }).then(res => {
        if(res?.data?.data?.content){
          this.adminList1 = res.data.data.content.slice(0,5)
          this.loading1 = false
        }else{
          this.loading1 = false
        }
      }).catch(err =>{
        Toast(err.response.data.message)
    })
    //停车记录
    axios.post(`https://smartpark.caih.com/ykt/api/thirdparty/v1/openInterface/getParkingTrafficByUserNumber?page=0&size=10&sort=id,desc`, 
    {
      "nonce": Cookies.get("nonce57"),
      "timestamp": Cookies.get("timestamp57"),
      "query": {
        "userNumber":Cookies.get("userId57"),
      }
    },
    {headers: {
        "XYTACCESSTOKEN":Cookies.get("token57")
      }
    }).then(res => {
        if(res.data.data){
          let data = res.data.data.slice(0,5)
          let arr = []
          for(let i =0; i<data.length;i++){
            arr[i] = {}
            arr[i].plate_number = data[i].plate_number
            arr[i].ingatename = data[i].ingatename
            arr[i].intime = data[i].intime
            arr[i*2 +1] = {}
            arr[i*2 +1].plate_number = data[i].plate_number
            arr[i*2 +1].outgatename = data[i].outgatename
            arr[i*2 +1].outtime = data[i].outtime
          }
          this.adminList4 = arr
          this.loading4 = false
        }else{
          this.loading4 = false
        }
      }).catch(err =>{
        Toast(err.response.data.message)
    })
    // 消费记录
    axios.post(`/dxtop/dish/page`,{
      "size":10,
      "current":1,
      "userId":Cookies.get("userId57")
    }).then(res => {
      if (res?.data?.data?.records) {
        this.adminList2 = res.data.data.records.slice(0,5)
        this.loading2 = false
      }else{
        this.loading2 = false
      }
    })
    //访客查询
    
    axios.post(`https://smartpark.caih.com/ykt/api/thirdparty/v1/openInterface/getVisitant?page=0&size=10`,
    {
      timestamp:Cookies.get("timestamp57"),
      nonce:Cookies.get("nonce57"),
      query:Cookies.get("userId57"),
    },
    {
      headers: {
      'Content-Type': "application/json",
      "XYTACCESSTOKEN":Cookies.get("token57")
      }
    }
    ).then(res => {
       if (res?.data?.data) {
        this.adminList3 = res.data.data.slice(0,5)
        this.loading3 = false
      }else{
        this.loading3 = false
      }
    })

    
  },
  mounted() {
    document.title = '中国东信智慧园区'
  },
  methods: {
    //上传
    afterRead(param) {
      this.formData = new FormData()// FormData 对象
      this.formData.append('file', param.file)// 文件对象
      let params = JSON.stringify({nonce:this.nonce,timestamp:this.timestamp,query:{userId:this.userId}})
      this.formData.append('params', params)// 参数
      this.formData.append('multipartFile', param.file)// 参数
      axios.post(`https://smartpark.caih.com/zkxt/api/thirdparty/v1/user/edit/zkuser/picture` ,this.formData, 
        {headers: {
              'Content-Type': "multipart/form-data",
              "XYTACCESSTOKEN":this.token
          }
        }).then(res => {
            axios.get(`https://smartpark.caih.com/zkxt/api/thirdparty/v1/user/appLogin?name=${this.username}&pass=${this.password}`).then(res => {
              if (res?.data?.data?.data?.cipher) {
                  localStorage.setItem("cipher57",res?.data?.data?.data?.cipher)
                  localStorage.setItem("classify","1")
                  Cookies.set("password57", encrypt(this.password), { expires: 300 });
                  Cookies.set("portrait57", res.data.data.data.user.avatarName, { expires: 300 });
                  Cookies.set("userId57", res.data.data.data.userId, { expires: 300 });
                  Cookies.set("token57", res.data.data.data.token, { expires: 300 });
                  Cookies.set("nonce57", res.data.data.data.nonce, { expires: 300 });
                  Cookies.set("timestamp57", res.data.data.data.timestamp, { expires: 300 });
                  this.portrait = res.data.data.data.user.avatarName
              } 
            }).catch(err =>{
              Toast(err.response.data.message)
            })

          }).catch(err =>{
            Toast(err.response.data.message)
        })
    },
    //一卡通充值
    ykt(){
      this.$router.push({ path: `/amount?token=${localStorage.getItem('cipher57')}&classify=''&passageway='weixin'`}) //passageway检测微信进入会app进入
    },
    //世茂
    sm(url){
      // https://smartpark.caih.com/h5/#/myVisitor 访客申请列表页
      let param = {
        userid:encrypt(Cookies.get("username57")),
        password:Cookies.get("password57"),
        type:"wx_yt"
      }
      window.location.href = `${url}?param=${encodeURIComponent(JSON.stringify(param))}`
    },
    //修改页
    go(){
      this.$router.push({ path: "/information"})
    },
    outLogin(){
      this.$router.push({ path: "/"})
    }
  },
};
</script>

<style lang="scss" scoped>
.mianBox{
    height: 100%;
    width: 100%;
    color: #FFF;
    padding-top: 44px;
    box-sizing: border-box;
    background-color: #F9F9F9;
    .people{
      width:100%;
      padding:15px 15px 20px 15px;
      box-sizing: border-box;
      background-color: #F22E3C;
      overflow-x: hidden;
      .top{
        margin-top:0;
        position: relative;
        .left{
          width:80px;
          height:80px;
          background-color: #fff;
          border-radius: 50%;
          display: inline-block;
          margin-right:15px;
          vertical-align: middle;
          position: relative;
          .upload{
            position: absolute;
            width:90px;
            height:80px;
            overflow: hidden;
            top:0px;
            opacity:0;
            z-index: 10;
            background: transparent;
          }
          .portrait{
            width:76px;
            height:76px;
            margin:2px;
            vertical-align: middle;
            ::v-deep .van-image__img{
              border-radius: 50% !important;
            }
          }
        }
        .right{
          display: inline-block;
          font-size: 14px;
          vertical-align: top;
          .name{
            margin:10px 0 6px;
          }
          .dept{
            margin-bottom:6px;
          }
          .arrowRight{
            display: inline-block;
            color:#fff;
            font-size: 20px;
            position: absolute;
            z-index: 2;
            right:-10px;
            top:22%;
          }
        }
        .bottom{
          font-size: 14px;
          margin-top:10px;
          .van-row{
            width:50%;
            text-align: center;
            display: inline-block;
            line-height: 25px;
          }
        }
      }
    }
    .contentBox{
      width: 100%;
      height: auto;
      
      overflow: hidden;
      .system{
        width:100%;
        background-color: #fff;
        padding: 15px;
        box-sizing: border-box;
        .function{
          width:20%;margin:10px 2.5%;
          .title{
            font-size: 12px;
            color:#000;
            text-align: center;
            margin-top:6px;
          }
        }
      }
      .record{
        .recordList{
          margin-top:10px;
        padding: 10px;
        box-sizing: border-box;
        background-color: #fff;
          .listTitle{
            font-size: 14px;
            color:#000;
            span{
              width:4px;
              height:14px;
              display: inline-block;
              background-color: #F22E3C;
              margin-right:4px;
            }
            

            
          }
        }
      }
    }
}
.el-table th>.cell{
  font-size: 11px;
}

</style>
<style>
.el-table td, .el-table th{
  padding:4px 0 !important;
}
.el-loading-mask{
  background-color: transparent !important;
}
.upload{
  position: absolute;
  width:100px;
  height:50px;
  overflow: hidden;
  top:0px;
  right:0;
  opacity: 0;
  z-index: 10;
  background-color: blue;
}
.el-table .cell{
  padding-right:0;
}
.tableScroll{
  overflow-x:scroll;
}

</style>