payment/src/views/home/index.vue

<template>
  <div class="mianBox">
    <van-row class="headerBox" style="background:#FF4747">
      智慧楼宇
    </van-row>
    <van-row class="bgc"></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">
            {{phone57}} / {{dept57}}
          </van-row>
          <!-- <van-row class="phone">{{phone57}}</van-row> -->
          <van-icon name="arrow"  class="arrowRight"  @click="go"/>
        </van-row>
        <van-row class="bottom" gutter="20">
          <van-col  span="12">
            <van-image :src="require('../../assets/image/ic_我的余额备份@3x.png')" />
            <van-col  v-loading="loadingBalance" class="text">我的余额：<span >{{balance}}元</span></van-col>
          </van-col>
          <van-col  span="12">
            <van-image :src="require('../../assets/image/ic_车牌备份@3x.png')" />
            <van-col  v-loading="loadingPlateNumber" class="text" >已录入车牌信息:<span>{{plateNumber}}</span></van-col>
          </van-col>
        </van-row>
      </van-row>
    </van-row>
    <van-row class="contentBox">
      <van-row class="system">
        <van-row  type="flex"  gutter="22" class="menu">
          <!-- <van-col span="6" class="function" @click="sm('https://smartpark.caih.com/h5/#/licence',1)">
            <van-image :src="require('../../assets/image/ic_车辆登记备份@3x.png')" />
            <div class="title">车牌登记</div>
          </van-col> -->
          <van-col span="6" class="function" @click="ykt">
            <van-image :src="require('../../assets/image/ic_一卡通备份@3x.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/ic_访客登记备份@3x.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/ic_综合安防备份@3x.png')" />
            <div class="title">综合安防</div>
          </van-col> -->
          <!-- <van-col span="6" class="function" @click="dc" >
            <van-image :src="require('../../assets/image/ic_点餐服务备份@3x.png')" />
            <div class="title">点餐服务</div>
          </van-col> -->
          <van-col span="6" class="function" @click="pc" v-if="pcy">
            <van-image :src="require('../../assets/image/ic_配餐服务备份@3x.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="recordTitle">
           <van-col span="16" class="left">最近通行记录</van-col>
           <!-- <van-col span="8" class="right" @click="record(1)" >查看更多<van-icon name="arrow"  class="rightIcon" /></van-col> -->
          </van-row>
          <el-table v-loading="loading1" :data="adminList1" class="recordTable">
            <el-table-column label="通行地点" align="left" prop="dmRoomDevice.name" show-overflow-tooltip min-width="50%"/>
            <el-table-column label="时间" align="left" prop="accessTime" show-overflow-tooltip min-width="50%"/>
          </el-table>
        </van-row>
        <van-row class="recordList">
          <van-row class="recordTitle">
           <van-col span="16" class="left">最近消费记录</van-col>
           <!-- <van-col span="8" class="right" @click="record(2)" >查看更多<van-icon name="arrow"  class="rightIcon" /></van-col> -->
          </van-row>
          <el-table v-loading="loading2" :data="adminList2" class="recordTable">
            <el-table-column label="食堂设备" align="left" prop="termName" show-overflow-tooltip min-width="30%"/>
            <el-table-column label="金额" align="left" prop="amt" show-overflow-tooltip min-width="20%">
               <template slot-scope="scop">
                {{scop.row.amt.toFixed(2)}}元
              </template>
            </el-table-column>
            <el-table-column label="时间" align="left" prop="createTime" show-overflow-tooltip min-width="50%"/>
          </el-table>
        </van-row>
        <van-row class="recordList"> 
          <van-row class="recordTitle">
           <van-col span="16" class="left">最近访客预约记录</van-col>
           <!-- <van-col span="8" class="right" @click="record(3)">查看更多<van-icon name="arrow"  class="rightIcon" /></van-col> -->
          </van-row>
          <el-table v-loading="loading3" :data="adminList3"  class="recordTable" >
            <el-table-column label="访客名称" align="left" prop="visitor_name" show-overflow-tooltip min-width="50%"/>
            <el-table-column label="到访时间" align="left" prop="start_time" show-overflow-tooltip min-width="50%"/>
          </el-table>
        </van-row>
        
        <!-- <van-row class="recordList">
          <van-row class="recordTitle">
           <van-col span="16" class="left">最近停车记录</van-col>
           <van-col span="8" class="right" @click="record(4)">查看更多<van-icon name="arrow"  class="rightIcon" /></van-col>
          </van-row>
          <el-table v-loading="loading4" :data="adminList4" class="recordTable">
            <el-table-column label="车牌号" align="left" prop="plate_number" show-overflow-tooltip min-width="30%"/>
            <el-table-column label="方向" align="left" prop="" show-overflow-tooltip min-width="20%">
              <template slot-scope="scop">
                {{scop.row.ingatename ? "进":"出"}}
              </template>
            </el-table-column>
            <el-table-column label="时间" align="left" prop="" show-overflow-tooltip min-width="50%">
              <template slot-scope="scop">
                {{scop.row.intime ? scop.row.intime:scop.row.outtime}}
              </template>
            </el-table-column>
          </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,
        pcy: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.pcy = localStorage.getItem("pcy")
    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=6&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
          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=6&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
          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":6,
      "current":1,
      "userId":Cookies.get("userId57")
    }).then(res => {
      if (res?.data?.data?.records) {
        this.adminList2 = res.data.data.records
        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: {
    /**查看更多跳转 */
    record(id){
      var dates = new Date();
      var times = dates.getTime();
      let param = {
        userid:encrypt(Cookies.get("username57")),
        password:Cookies.get("password57"),
        type:"wx_yt"
      }
      if(id == 1){
        window.location.href = `https://smartpark.caih.com/h5/#/parkingAdministration?param=${encodeURIComponent(JSON.stringify(param))}`
      }
      if(id == 2){
        this.$router.push({ path: `/record?id=2`})
      }
      if(id == 3){
        window.location.href = `https://smartpark.caih.com/h5/#/myVisitor?param=${encodeURIComponent(JSON.stringify(param))}`
      }
      
      
    },
    
    
    //上传
    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)
        })
    },
    //点餐
    dc(){
      this.$router.push({ path: "/orderingFood"})
    },
    //配餐
    pc(){
      this.$router.push({ path: "/catering"})
    },
    //一卡通充值
    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(){
      localStorage.clear()
      Cookies.remove("timestamp57");
        Cookies.remove("username57");
        Cookies.remove("rememberMe57");
        Cookies.remove("password57");
        Cookies.remove("portrait57");
        Cookies.remove("userId57");
        Cookies.remove("token57");
        Cookies.remove("nonce57");
        
        Cookies.remove("timestamp57");
        Cookies.remove("nickName57");
        Cookies.remove("dept57");
        Cookies.remove("phone57");
        Cookies.remove("people57");
        Cookies.remove("openid57");
        Cookies.remove("cardId57");
        
      this.$router.push({ path: "/login"})
    }
  },
};
</script>

<style lang="scss" scoped>
.mianBox{
    height: 100%;
    width: 100%;
    color: #FFF;
    padding-top: 44px;
    box-sizing: border-box;
    background-color: #F9F9F9;
    .bgc{
      height: 120px;
      position: relative;
      z-index: 0;
      overflow: hidden;
      margin-top:-2px;
    }
    .bgc::after{
      content: '';
      width: 120%;
      height: 120px;
      position: absolute;
      z-index: 0;
      left: -10%;     //椭圆左边隐藏10%，右边隐藏10%
      top: 0;
      border-radius: 0 0 200% 200%;  //左上角，右上角，右下角，左下角
      background-image: linear-gradient(180deg, #FF4747 0%, #D7000F 100%);
    }
    .people{
      width:100%;
      padding:0px 15px 0;
      box-sizing: border-box;
      margin-top:-102px;
      background-color: #fff;
      .top{
        margin-top:0;
        position: relative;
        .left{
          width:64px;
          height:64px;
          background-color: #fff;
          border-radius: 50%;
          display: inline-block;
          margin-right:15px;
          vertical-align: middle;
          position: relative;
          .upload{
            position: absolute;
            width:80px;
            height:70px;
            overflow: hidden;
            top:0px;
            opacity:0;
            z-index: 10;
            background: transparent;
          }
          .portrait{
            width:60px;
            height:60px;
            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;
            font-size: 18px;
          }
          .dept{
            margin-bottom:6px;
            margin-top:-2px;
            font-size: 13px;
            width:240px; //要加宽度 ，若是span等行内元素，加个display:inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .arrowRight{
            display: inline-block;
            color:#fff;
            font-size: 20px;
            position: absolute;
            z-index: 2;
            right:-10px;
            top:14%;
          }
        }
        .bottom{
          font-size: 14px;
          margin-top:60px;
          padding-bottom:20px;
          .van-image{
            width:28px;
            vertical-align: middle;
            display: inline-block;
            float:left;
            margin-right:14px;
          }
          .text{
            vertical-align: middle;
            text-align: left;
            display: inline-block;
            font-size: 13px;
            color:#666666;
            margin-top:-8px;
            span{
              font-size: 18px;
              color:#333333;
              font-weight: 700;
              display: block;
              margin-top:2px;
            }
          }
        }
      }
    }
    
    .contentBox{
      width: 100%;
      margin-top:8px;
      .system{
        width:100%;
        background-color: #fff;
        padding: 4px 16px 10px;
        box-sizing: border-box;
        .function{
          margin:12px 0;
          .title{
            font-size: 14px;
            color:#333333;
            text-align: center;
            margin-top:-2px;
          }
          .van-image{
          }

        }
      }
      .record{
        background-color: #F9F9F9;
        .recordList{
          margin-top:8px;
            .recordTitle{
            font-size: 18px;
            height:48px;
            line-height: 48px;
            padding: 0 15px;
            background-color: #fff;
            box-shadow: inset 0px -1px 0px 0px rgba(232,232,232,1);
            .left{
              font-size: 16px;
              font-weight: 700;
              text-align: left;
              color:#333;
            }
            .right{
              text-align: right;
              font-size: 14px;
              color:#666666;
              vertical-align: middle;
              .rightIcon{
                width:6px;
                margin:-2px 0 0 5px;
                vertical-align: middle;
              }
            }
          }
        }
      }
    }
}



</style>
<style>
.recordTable.el-table  .cell{
  color:#999999 !important;
}

.recordTable.el-table td{
  padding:0;
}
.recordTable.el-table td, .el-table th{
  padding:0 !important;
}
.recordTable.el-table th>.cell{
  font-size: 15px;
  color:#999999;
  padding:0 16px;
  font-weight: 400;
  text-align: center;
  height:40px;
  line-height: 40px;
}
.recordTable.el-table th:nth-child(1)>.cell{
  text-align: left;
}
.recordTable.el-table th{
  height:40px;
  line-height: 40px;

}
.recordTable.el-table .el-table__body-wrapper tr td>.cell{
  padding:0;
  box-sizing: border-box;
}
.recordTable.el-table .el-table__body-wrapper tr td:first-child>.cell{
  padding-left:15px;
}
.recordTable.el-table tr:nth-child(even){
  background-color: #fff;
}
.recordTable.el-table tr:nth-child(odd){
  background-color: #F9F9F9;
}
.recordTable.el-table td .cell{
  color:#666666 !important;
  height:48px;
  line-height:48px;
  text-align: center;
}
.recordTable.el-table td:first-child .cell{
  text-align: left;
}
.recordTable th .cell{
  padding:0 !important;
}
.recordTable th:nth-child(1) .cell{
  padding-left:16px !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;
}

</style>