payment/src/views/home/index.vue

<template>
  <div class="mianBox">
    <van-row class="headerBox">
      <van-icon name="arrow-left" @click="$router.go(-1)" />
      一卡通
    </van-row>
    <van-row class="contentBox">
      <van-row @click="balance" v-if="user">
        <van-image
          :src="require('../../assets/image/balance.png')"
        />
        <van-col :span="24">账户余额</van-col>
        <van-col :span="24">个人账户余额信息</van-col>
      </van-row>
      <van-row @click="amount">
        <van-image
          :src="require('../../assets/image/recharge.png')"
        />
        <van-col :span="24">充值</van-col>
        <van-col :span="24">对余额进行充值</van-col>
      </van-row>
      <van-row @click="record" v-if="user">
        <van-image
          :src="require('../../assets/image/record.png')"
        />
        <van-col :span="24">消费记录</van-col>
        <van-col :span="24">查看消费记录和充值记录</van-col>
      </van-row>
    </van-row>
  </div>
</template>

<script>
import axios from "axios";
import { getNowTime } from "@/assets/js/dataFormate";
import { Toast } from "vant";
export default {
  data() {
    return {
      user:undefined,
      type:undefined
    };
  },
  created(){
    localStorage.removeItem('type');
    localStorage.removeItem('user');
    var url = window.location.href;
    if(url.indexOf("token") > 1){
      //("app进入")
      if(this.getQueryVariable("token")){
        axios({//查询信息
          method: 'get',
          url: 'https://smartpark.caih.com/zkxt/api/thirdparty/v1/user/getZkUserByCipher?cipher=' + this.getQueryVariable("token"),
          timeout: 10000,
        }).then(res =>{

          if(res.data?.data?.id){
            axios.get(`/dxtop/staff/one?id=${res.data.data.id}`).then(res2 => { //验证充值信息是否同步
              if(res2.data.data){
                this.user = res2.data.data.id
                localStorage.setItem("user", this.user)
              }else{
                this.userNoAlert()
              }
            })
          }else if(res.data?.data?.cardId){
            Toast("用户卡号未绑定")
          }else{
            this.userNoAlert()
          }
        }).catch(err =>{
          this.userNoAlert()
        });
      }else{
        //console.log("app进入")
        Toast(this.getQueryVariable("无token传入！"))
      }
    }else if(this.getQueryVariable("type")){
      //console.log("扫码游客进入")
      localStorage.removeItem('type');
      localStorage.removeItem('user');
      localStorage.setItem("type",this.type)
    }else{
      localStorage.removeItem('user');
      localStorage.removeItem('type');
      //console.log("无user、type进入")
    }
  },
  mounted() {
  },
  methods: {
    userNoAlert(){
      Toast("当前账户初始流程中，请耐心等待或联系管理人员查询")
    },
    getQueryVariable(variable){//参数获取
      //window.location.search.substring(1);
      var query = window.location.hash.substring(3);
      var vars = query.split("&");
      for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
        if(pair[0] == variable){
          if(variable =="token"){
            this.user = pair[1]
          }else if(variable =="type"){
            this.type = pair[1]
          }
          return pair[1];
        }
      }
      return(false);
    },
    amount(){
      var url = window.location.href;
      if(url.indexOf("token") >1){
        if(localStorage.getItem("user")){
          this.$router.push({ path: "/amount"})
        }else{
          this.userNoAlert()
        }
      }else{
        this.$router.push({ path: "/amount"})
      }
    },
    balance(){
      if(localStorage.getItem("user")){
        this.$router.push({ path: "/balance"})
      }else{
        this.userNoAlert()
      }
    },
    record(){
      if(localStorage.getItem("user")){
        this.$router.push({ path: "/record"})
      }else{
        this.userNoAlert()
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.mianBox{
    height: 100%;
    width: 100%;
    color: #FFF;
    padding-top: 44px;
    box-sizing: border-box;
    .contentBox{
      width: 100%;
      height: auto;
      padding: 15px 20px;
      box-sizing: border-box;
      overflow: hidden;
      &>.van-row{
        // height: 90px;
        width: 100%;
        margin-top:20px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        flex-direction: column;
        position: relative;
        .van-image{
          width:100%;
        }
        .van-col{
          padding: 7px 0;
        }
        &>.van-col:nth-child(1){
          font-size: 18px;
        }
        &>.van-col:nth-child(2){
          font-size: 14px;
          position: absolute;
          top:14%;
          left:22%
        }
        &>.van-col:nth-child(3){
          font-size: 14px;
          position: absolute;
          top:50%;
          left:22%
        }
      }
      &>.van-row:nth-child(1){
        margin-top:10px;
      }
      // &>.van-row:nth-child(1){
      //   background: url('../../assets/image/balance.png') no-repeat 100%;
      // }
      // &>.van-row:nth-child(2){
      //   background: url('../../assets/image/recharge.png') no-repeat 100%;
      // }
      // &>.van-row:nth-child(3){
      //   background: url('../../assets/image/record.png') no-repeat 100%;
      // }
    }
}
</style>