TelpoH5FrontendWeb/src/views/card-info/index.vue

<!--
 * @Date: 2022-04-15 10:22:36
 * @LastEditors: JinxChen
 * @LastEditTime: 2023-04-17 14:43:11
 * @FilePath: \TelpoH5FrontendWeb\src\views\card-info\index.vue
 * @description:
-->
<template>
    <div class="card-info-container" v-show="isShowPage">
        <van-nav-bar title="话费查询"
                :left-arrow="false"
                :border="true">
        </van-nav-bar>
        <div class="check-container">
            <!-- header -->
            <div class="header">
                <!-- banner -->
                <div class="banner">
                    <van-image
                    :src="logo"
                    round
                    >
                    </van-image>
                    <div class="right-message">
                        <p>{{ setMeal.msisdn }}</p>
                    </div>
                </div>
                <p class="padding-left">ICCID：{{ setMeal.iccid || '--' }}</p>
                <p class="padding-left">语音通话接听免费，免漫游费。禁止手机使用</p>
                <div class="action">
                    <div class="action-item"><p>{{ setMeal.realname || '--' }}</p></div> <span> | </span> <div class="action-item"><p>{{ setMeal.cardState || '--' }}</p></div> <span> | </span> <div class="btn"><p @click="onRefresh">刷新</p></div>
                </div>
            </div>
            <!-- 套餐详情 -->
            <div class="card-details">
                <div class="set-meal">
                    <p class="font-orange">{{ setMeal.expireTime || '--' }}</p>
                    <p>套餐到期时间</p>
                </div>
                <div class="set-meal">
                    <p class="font-orange">{{ setMeal.residueVoiceData || '--' }}</p>
                    <p>剩余语音(分钟)</p>
                </div>
                <div class="set-meal" v-show="false">
                    <p class="font-orange">{{ setMeal || '--' }}</p>
                    <p>套餐流量(M)</p>
                </div>
                <div class="set-meal">
                    <p class="font-orange">{{ setMeal.residueFlow || '--' }}</p>
                    <p>剩余流量(M)</p>
                </div>
            </div>
            <!-- 套餐操作 -->
            <div class="card-details-menu">
                <div class="meal-item" @click="onMealBuy">
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAADgUlEQVRYR+2XTWhUVxTH/+cl5IPQUhG0ASlWWoRaF22hSDeCRUT6gV+LUnEkQt+5b9GAUdRu2odupGDEQOa9+1IKRgUZLZUq1I1SF10VFdSNFqGKdBZtJ0UYTWi5R26ZFJmMvnvnRVDJ3QzDPR+/9z9zzpxHeMoPPeV8mAMsWqFnT8Esyz43xmxoevJTSqlDRdVox3+Ggs2ARPQaAGHmV9pJUNQnt8Ra6whA2RjzahRFvxVN6OvvArgcwBUR2aKUOuqboKh9LqCIUJZlfwI4wcyqaEJf/1xAGzBN09NEtISZl/kmKGrvBKi13gVgv4icICIpmrSVPxGdDsPwWPOdE2CWZe+JyM8AqgD+nmXAAMBSAEeYudQWYKVS6ZqYmLBgZWbeOZuASZKsCoLgnJ29URR93xagddJa/wSgh5lXzCZgmqYJEW3u6upaMDAwMNk2YJZl+0RkN4CXmPleA/pTAB94At9m5i+sT6VS6ajVar8DOKeUsrFmHKffoPXKsmyNiJw1xrwfRdH5BuBXAFoGfgy0BVxt7/PKa22cAUdGRl7s7u6uEdHeMAz3eqrW0ny6vPV6feHQ0ND9Qgo2FLsIoDatQBFIl/J6KdgAtBvNtmq1Oi+O43+TJFkcBEEsIp15sEQ0NTU1tWdwcPAP1/J6A46NjW0yxthh/W4Yhr+Uy+V3Ojo6jgDIBQRgO3Q9M9+0iV3K6w04Ojr6cmdnp+26Hcx8ME+1R927ltcbsFHmX0XkqlKqeal15nXp3ulgzl087aC1/haAhTvrTDTT8A0Aix/XvW0Dpmk6QEQW8haA/wZ2m+ckM3+Z5+utYJqmrxPRDQCfMfM3eQmK3vsC2uV1nTGmQkR2/bdz0eX0AvirsVKdsu84Lk5eTRLHcdDf32/3tU9EZIKI7Gh5oZHseouk9uHtGkUichfAP0Q0H8DxarW6OY5j4wLprGCapiUiOiwie5j560ZH7yIiu8huVUqNP5zQ1/5RsD6A3xHRm8xsVfn/aK2vi8g1pdTGJkAv+9kAtO8li5j5rSbAyyJyRyn1UROgl31hQK31dgAHjDEfR1F0xgZMkuTDIAh+aPXP4mtfGHB4eLi3r6/vAoC3RcR+gohWArhUr9dXNq9LvvaFAW2A8fHxvsnJyR3GmLX2exAEP/b09BwolUr1Vgl87VvFcG4Sl5HwJGzmAIuqOqfgc6/gA38wwThLucAeAAAAAElFTkSuQmCC" alt=""/>
                    <p>套餐订购</p>
                </div>
                <div class="meal-item" @click="onRecordCheck">
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAD6UlEQVRYR+2YXWgcVRiG3+9sshtSiUaKmFAvSlEReiFuKSKWoNbUm17401DFH0KTOWdCDLheCHrhoCBi1MhKMnMmCaEJuZFaGhRrTVFaQW8MXigiFmqVyipYwRKM7GTOJyfsStimmbS72QbN3C3n7JyH9/t5vzOEDf7QBufDJmC1EdpUsFLBfD7fkk6n3wVwVCk1k6RwooJa605mlgBuTHpZ5ToRMRGNO44zbde01lsBfAwgCyBi5oNKqaOrvXdVQAsH4DiA88x8thrA8fHx9sXFxU8AbGfmZwAMENHdSZCrAgZB8D4R7Uqn07d3d3f/faWA5f2jo6Pb4zg+SUS3MPNepdTp4eHh61Kp1EclyAOXC3cS4Gf2EKXUfVXA3WGMmWXmrUSUATAkpcyVQn4AwHvMPKmUsqpe8qwr4MjISLahoeE4MxejKNrX2Nh4CMBzFjKVSh2L49iufVcsFh8YGBi4WFdArfW9AD4EcCGO4wf7+vqWclhr/XYJMgLwQxRFHf39/RcuF6F1UTAMw33MbKvznDGm03XdX8oAvu/vFEJ8ZQsPwB4pZeGqqzgIgivOQd/3HxVCTBPRt8z8kJTy9zKA1noHgM8BxMaYPa7rnkvK7ZoqqLW2iT7GzF8S0X4p5Z/LKnmbMcbCNQPokFJ+nwRn12sGGATBs0T0DjPPEtEjUsq/loX1JiHEKQA3G2Pud13367XA1QxQa/0SgFetfRUKhSc8zyuWAYaGhm5obm7+FMBtRNTpOM4XYRiOGWNsazmdBFq1gkEQ5IjoLQCHW1tbD3V1dcXlQwcHB7e0tLRY97jLhtxxnJM2alprw8wvK6VeWVdAz/NEW1vbTwC2WY8tFAoPe5635Dj5fD6TyWRsm+kA0CWlPFaCqR9gGIZ7bc4xs63agwBmLSSAxfb29iPGmP1CiKfLw8K1ADxsIYrFYltTU9PjzDxmIQH8AcD+7lNKBRVhrI+Ck5OTWxYWFn4FMC2lVBMTE01RFE3Y6aQE9IKU8o2V7LUuORgEwZNENMXMLwohdjDzYwCuB/AzM7+plLJD6Yr2WhdArfUJAHZeBDNfJKIjQoipnp6eU3ZQXaU66xNirfUMETUAmJqfn5/J5XILSS2j7kWyRqDKbfVR8CrhltyrLjm4YQCJ6B4A/04lSWC2sh3HeV5rbW+C1sqW22lhbm5uVzabLdbM6ojoVgBlm0risxV9Qin1ge/7u4UQT1UCSilf+1+FuCbXzuWyl0b+bwD0SymHk0Kyrhf3S/oLkT3vTvtVQQixs7e397eqAO2fq/n0sQKgdZgfmfl1pdSZJLilnrSWTddyzyZgtepvKvifV/Af4cRYRyl1cksAAAAASUVORK5CYII=" alt=""/>
                    <p>订购记录</p>
                </div>
            </div>
            <div class="tips-container">
                <p>注：</p>
                <p>通话结束后，剩余语音时长需1小时后才更新。</p>
            </div>
        </div>
    </div>
</template>

<script>
import APIWx from "@/api/wx";
import { APIPay } from "@/api/pay";
import { isNotNull } from "@/utils/index";
import APICore from "@/api/core";
import AppId from "@/config/appId";
export default {
  name:'cardInfo',
  inject: ["reload"],
  data(){
   return {
       //套餐信息
       setMeal: {
           expireTime: '', //套餐过期时间
           residueVoiceData: '', //剩余语音
           availableData: '', //流量套餐
           residueFlow: '', //剩余流量
           iccid: this.$route.query.iccid, //iccid
           cardState: '', //卡激活状态
           realname: '', //是否已实名 1是 0 否
           msisdn: '', //msisdn
           isUnicom: null, //是否是联通
       },
       isShowMenu: this.$route.query.isShowMenu,
       params: {},
       isShowPage: false, //是否显示整个页面
   }
  },
  computed: {
    //   顶部图标
      logo(){
          if(this.setMeal.isUnicom !== null) {
            return this.setMeal.isUnicom ? require('@/assets/img/unicom.png') : require('@/assets/img/yidong_logo.png')
          } else {
            return null
          }
      }
  },
  created() {
    this.getAuth();
    this.getToken();
    this.getParams();
    this.getCardInfo();

  },
  methods: {
    //   获取core token
    getAuth() {
        let manufactorId = "5bf13062-a41e-4d00-ba14-1101aad12650";
        APICore.getAuth({ manufactorId: manufactorId }).then(res => {
            this.$store.commit("gatewayToken", res.data.data);
        });
    },
    // 获取token
    getToken() {
        let manufacturerNo = '9f166b07-ff83-4991-84dc-ca6ad4a6b95b';
        APIPay.getToken(manufacturerNo).then(res => {
            console.log("token的数据", res.data)
            let data = res.data;
            if(data.code === 20000) {
                this.$store.commit("token", data.token);
                console.log("token的数据",  localStorage.getItem('token'))
            }
        })
    },
      // 获取url传过来的参数
    getParams() {
        let params = this.$route.query;
        if (params) {
            this.params = {...params};
            let url = window.location.href.split("?code=")[1];
            if ( isNotNull(url) || window.location.href.indexOf("code") > -1) {
                let timeStamp = new Date().getTime();
                let code = url.split("&")[0];
                if (isNotNull(code)) {
                    this.isShowPage = true;
                    this.getOpenId(code);
                } else {
                    this.$dialog({
                        message: '系统繁忙，请重新进入'
                    })
                }
            } else {
                this.getWxCode();
            }
        }
    },
    getWxCode() {
        let params = this.params;
        let commonUrl = process.env.VUE_APP_BASE_API;
        let redUrl = encodeURIComponent(`${commonUrl}/h5-frontendweb/#/cardInfo?imei=${params.imei}&iccid=${params.iccid}`);
        let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${AppId}&redirect_uri=${redUrl}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
        window.location.href = url;
    },
     // 根据code获取openId
    getOpenId(code) {
        let openId = this.$store.getters.openId;
        APIPay.getOpenId(code).then(res => {
            let data= res.data;
            if(data.code === 20000) {
                this.$store.commit("openId", data.data.openId);
            }else if (data.state === false) {
                console.log("token过期");
                this.getToken();
                this.getOpenId(this.code);
            }
        })
    },
    //获取小台风物联网卡信息
    getCardInfo() {
          if( !this.isShowPage ) {return}
          this.$toast.loading({ message: '查询中...' });
          let reqBody = {
              imei: this.$route.query.imei,
              iccid: '' || this.$route.query.iccid
          }
          APIWx.GetCardInfo(reqBody)
            .then(res => {
                let data = res.data;
                if (data.stateCode === 1 ) {
                    let item = data.data;
                    this.setMeal.expireTime = this.$dayjs(item.expireTime).format("YYYY-MM-DD");
                    this.setMeal.residueVoiceData = item.availableVoiceData;
                    this.setMeal.residueFlow = item.availableData;
                    this.setMeal.cardState = item.cardState;
                    this.setMeal.realname = Number(item.realname) === 1 ? '已实名' : '未实名';
                    this.setMeal.msisdn = item.msisdn;
                    // 截取msisdn 前三位， 148 是移动，其它都是联通
                    this.setMeal.isUnicom = item.msisdn.slice(0,3) === '148' ? false : true;
                    this.$toast.success({
                        message: "查询成功",
                        duration: 1500
                    });
                }
            })
            .catch(error => {
                console.log("接口报错了", error);
            }).finally(() => {
                this.$toast.clear();
            })
    },
    //   返回
    onNavBack() {
        /* this.$router.push({ name: 'device'}); */
    },
    //   onRefresh 刷新
    onRefresh() {
        this.reload();
    },
    // 购买套餐
    onMealBuy() {
        this.$router.replace({
            name: 'packageBuy',
            query: { imei: this.$route.query.imei, iccid: this.$route.query.iccid, isShowMenu: this.isShowMenu}
        })
    },
    // 订购记录
    onRecordCheck () {
        this.$router.replace({
            name: 'buyRecord',
            query: { imei: this.$route.query.imei, iccid: this.$route.query.iccid, isShowMenu: this.isShowMenu}
        })
    }

  }
}
</script>

<style scoped lang="scss">
    .card-info-container {
        max-height: 100vh;
        width: 100%;
        position: relative;
        background-color: #fff;
        p {
            font-size: 16px;
            color: #9B9B9B;
        }
        .check-container {
            height: calc(100vh - 88px);
            padding: 8px 10px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column;
            .header {
                height: 200px;
                width: 100%;
                display: flex;
                justify-content: space-around;
                flex-direction: column;
                align-items: flex-start;
                border: 1px solid #fff;
                box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
                .padding-left {
                    padding-left: 10px;
                }
                .banner {
                    height: 75px;
                    margin: 10px 0;
                    padding-left: 5px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    .van-image {
                        height: 75px;
                        width: 75px;
                        border: 5px solid #E0EEFF;
                    }
                    .right-message {
                        text-align: center;
                        margin-left: 10px;
                         p {
                            font-size: 18px;
                            color: #64A9FF;
                        }
                    }
                }
                .action {
                    height: 35px;
                    text-align: center;
                    padding-left: 10px;
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    p {
                        font-size: 16px;
                        color: #64A9FF;
                    }
                    span {
                        display: block;
                        color: #9B9B9B;
                        font-size: 16px;
                        padding: 0 8px;
                    }
                    .btn {
                        height: 25px;
                        width: 75px;
                        line-height: 25px;
                        text-align: center;
                        background-color: #64A9FF;
                        border-radius: 10px;
                        p {
                            color: #fff;
                        }
                    }
                }
            }
            .card-details {
                height: 75px;
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 20px;
                border: 1px solid #fff;
                box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
                .set-meal {
                    flex: 1;
                    height: 50px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    p {
                        font-size: 16px;
                        padding: 5px 0;
                    }
                    .font-orange {
                        color: orange;
                    }
                }
                .set-meal:nth-of-type(2) {
                    border-left: 1px solid #DDDDDD;
                    border-right: 1px solid #DDDDDD;
                }
            }
            .card-details-menu {
                height: 75px;
                width: 100%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-top: 20px;
                border: 1px solid #fff;
                box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
                .meal-item {
                    flex: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    padding-left: 10px;
                    img {
                        height: 45px;
                        width: 40px
                    }
                    p {
                        font-size: 14px;
                        padding: 5px 0;
                    }
                }
            }
            .tips-container {
                width: 100%;
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                flex-direction: column;
                p {
                    margin: 10px;
                    color: red;
                }
            }
        }
    }
</style>