Yizhan-app/pages/my/mealCard.vue

<template>
  <view id="myapp" class="bodyA">
<!--    &lt;!&ndash; 导航栏 &ndash;&gt;-->
<!--    <view class="header headerBai">-->
<!--      &lt;!&ndash; 左侧按钮 &ndash;&gt;-->
<!--      <view class="nav-btn" @click="back">-->
<!--        <img class="left_btn" src="@/static/common/arrow_back_hei.png" alt="">-->
<!--      </view>-->
<!--      &lt;!&ndash; 黑标题 btn-headerBai &ndash;&gt;-->
<!--      <view class="btn-header btn-headerBai">电子餐卡</view>-->
<!--      &lt;!&ndash; 右侧按钮 &ndash;&gt;-->
<!--      <view class="nav-btn"></view>-->
<!--    </view>-->
    <!-- 滚动区域 -->
    <view class="content">

      <!-- <view class="mask" v-show="!loadingFlag">
          <img src="img/loadingMf.gif" alt="">
          <span>加载中...</span>
      </view> -->
      <!-- <view class="maskTm" v-show="!loadingFlag_Tm">
          <img :src="this.$imgUrl" alt="">
          <span>加载中...</span>
      </view> -->

      <view class="mealCardBox">
        <view class="code">
          <img :src="obj.qrBase64" alt="" v-show="obj.qrBase64">
        </view>
        <view class=" info alertMsg" v-if="alertMsg">{{alertMsg}}</view>
        <view class="info" v-else>
          <span class="mni" v-if="obj.balance && obj.balance!=''">￥{{obj.balance}}</span>
          <span class="mni" v-else>正在查询餐卡余额...</span>
        </view>
      </view>

      <view class="ps">如付款失败，请使用实体员工卡支付</view>
      <view class="btnBox">
        <view class="btn">
          <img src="@/static/common/ck_ck.png" alt="">
          餐卡
        </view>
        <view class="btn">
          <img src="@/static/common/ck_q.png" alt="" @click="toHistory">
          消费记录
        </view>
      </view>
    </view>
    <!-- 底部 -->
    <!-- <view class="footer">
        <van-button class="footerBtn">按钮</van-button>
    </view> -->
  </view>
</template>

<script>
	import {
    getBalance,buildNumber
	} from '@/common/api.js'
	import {
		callbackRequest
	} from '@/common/util.js'
	export default {
		name: "problem",
		data() {
			return {
        obj: {
          qrBase64: "",
          balance: "",
          isSucc: 0,
          timer: null,
          timer1: null,
          consumeMoney: 0,
        },
        alertMsg: '',
			}
		},
		onLoad(options) {
      this.getQrcode();
      this.getQ();
      const that = this;
      setInterval(function () {
        that.getQrcode();
        that.getQ();
      }, 5000);
		},
		methods: {
      toHistory() {
        uni.navigateTo({
          url:'/pages/my/consumeRecordsRecords'
        })
      },
      // 余额
      getQ() {
        const that = this;
        let params={
          method:getBalance,
        }
        callbackRequest(params).then((res) => {
          if (res.returnCode == 1) {
            that.alertMsg = ''
            that.obj.balance = res.returnData.balance
          } else {
            that.alertMsg = '未查询到餐卡余额'
          }
        })
      },
      // 餐卡二维码
      getQrcode() {
        const that = this;
        let params={
          method: buildNumber,
        }
        callbackRequest(params).then((res) => {
          if (res.returnCode === "1") {
            var imgBase64 = jrQrcode.getQrBase64(res.returnData.enCode)
            that.obj.qrBase64 = imgBase64
            that.showIcon = res.returnData.showIcon
          }
          if (res.returnCode === "0") {
            mui.alert(res.returnMsg)
          }
        })
      },
		}
	}
</script>

<style scoped lang="scss">

.content {
  font-size: .38*74upx;
  color: #0e1a24;
  background-image: url('@/static/background/cankaBg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: .5405*74upx;
  padding-top: 2.19*74upx;
}

.mealCardBox {
  background-image: url('@/static/background/cankaBox.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 11.71*74upx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.mealCardBox .code {
  background-color: #fff;
  width: 5.87*74upx;
  height: 5.87*74upx;
  margin-bottom: .22*74upx;
}

.mealCardBox .code img {
  width: 100%;
  height: 100%;
}

.mealCardBox .info {
  position: absolute;
  bottom: .96*74upx;
  color: #4b5b68;
}

.mealCardBox .info .mni {
  margin-left: .26*74upx;
}

.btnBox {
  display: flex;
  justify-content: center;
  margin-top: .66*74upx;
  font-size: .43*74upx;
}

.btnBox .btn {
  display: flex;
  flex-direction: column;
  align-items: center;

  color: #0370ce;
  font-weight: bold;
}

.btnBox .btn:last-child {
  margin-left: 2.98*74upx;
  font-weight: normal;
  color: rgba(3, 112, 206, .6);
}

.btnBox .btn img {
  /* width: 1.6*74upx;
  height: 1.34*74upx; */
  width: .6*74upx;
  height: .6*74upx;
  margin-bottom: .1*74upx;
}

.ps {
  text-align: center;
  margin-top: .5*74upx;
  color: rgba(3, 112, 206, .6);
}
</style>