suke-mp/src/pages/qrcode/index.vue

<template>
  <view class='content'>
    <view class='member-info-view'>
      <image :src='assetsUrl("ic_crown.png")' />
      <view class='flex flex-col'>
        <text>{{ userInfo?.levelName }}</text>
        <view />
      </view>
    </view>

    <view class='qrcode-card'>
      <view class='balance-view'>
        <text class='balance-text'>账户余额：{{ userInfo?.balance || 0 }}元</text>
        <view class='btn-recharge' @click.stop='goPath("/pages/mine/subs/recharge/index",true)'>
          <text>去充值</text>
          <image :src='assetsUrl("ic_arrow_right.png")' />
        </view>
      </view>
      <view class='divider' />
      <view class='barcode-view'>
        <image class='barcode' :src='code?.barCode'></image>
        <text>{{ codeContent }}</text>
      </view>

      <view class='qrcode-view'>
        <image class='qrcode' :src='code?.qrCode'></image>
        <text>倒计时{{ codeRefreshInterval }}S后自动更新</text>
      </view>

      <view class='card-info-view'>
        <view>
          <image :src='assetsUrl("ic_card.png")' />
          <text>卡信息</text>
        </view>

        <text>{{ getStoreName() }}</text>
        <text>{{ userInfo?.storeId }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang='ts'>
import { onLoad } from '@dcloudio/uni-app';
import { assetsUrl } from '@/utils/assets';
import { generateBarCode, generateQrCode } from '@/api/common';
import { getDynamicCode } from '@/api/user';
import { useUserStore } from '@/store';
import { goPath, isLogin } from '@/utils';

const store = useUserStore();
const { userInfo } = storeToRefs(store);

const code = ref<{ barCode: string, qrCode: string }>();
const codeContent = ref<string>('');
const codeRefreshInterval = ref(30);

onLoad(() => {
  if(!isLogin()) {
    // goLogin();
    return;
  }
  generateCode();

  setInterval(() => {
    codeRefreshInterval.value -= 1;
    if(codeRefreshInterval.value == 0) {
      codeRefreshInterval.value = 30;
      generateCode();
    }
  }, 1000);
});

const getStoreName = () => {
  return `${userInfo.value?.nickName || userInfo.value?.name}（${userInfo.value?.storeName || userInfo.value?.companyName || userInfo.value?.creatorName}）`;
};

const generateCode = async () => {
  const { dynccode } = await getDynamicCode();
  codeContent.value = dynccode;
  const barCode = await generateBarCode(codeContent.value);
  const qrCode = await generateQrCode(codeContent.value);
  code.value = {
    barCode: convertBase64(barCode),
    qrCode: convertBase64(qrCode)
  };
};

const convertBase64 = (data: ArrayBuffer) => {
  return 'data:image/png;base64,' + uni.arrayBufferToBase64(data);
};
</script>

<style lang='scss' scoped>
.content {
  display: flex;
  flex-direction: column;
  padding: 28rpx 24rpx 0 24rpx;
}

.member-info-view {
  display: flex;
  flex-direction: row;
  align-items: center;

  image {
    width: 39rpx;
    height: 34rpx;
    margin-right: 10rpx;
  }

  view:nth-of-type(1) {
    text {
      font-size: 32rpx;
      font-weight: 800;
      color: #333333;
    }

    view {
      width: 100%;
      height: 4rpx;
      margin-top: 4rpx;
      background: #333333
    }
  }
}

.qrcode-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 25rpx;
  margin-top: 27rpx;

  .balance-view {
    display: flex;
    flex-direction: row;
    align-items: center;

    .balance-text {
      font-size: 36rpx;
      font-weight: bold;
      color: #333333;
      flex: 1;
    }

    .btn-recharge {
      display: flex;
      flex-direction: row;
      width: 178rpx;
      height: 63rpx;
      align-items: center;
      justify-content: center;
      background: #333333;
      border-radius: 32rpx;

      text {
        font-size: 30rpx;
        font-weight: 400;
        color: #FFFFFF;
        white-space: nowrap;
        margin-left: 10rpx;
        text-align: center;
      }

      image {
        width: 30rpx;
        height: 30rpx;
        margin-left: 13rpx;
      }
    }
  }

  .divider {
    width: 100%;
    height: 1rpx;
    background: #D4D4D4;
    margin-top: 35rpx;
    margin-bottom: 50rpx;
  }

  .barcode-view {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;

    image {
      //width: 100%;
      height: 130rpx;
    }

    text {
      font-size: 26rpx;
      font-weight: bold;
      color: #333333;
      margin-top: 10rpx;
    }
  }

  .qrcode-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 57rpx;

    image {
      width: 432rpx;
      height: 432rpx;
    }

    text {
      font-size: 26rpx;
      font-weight: 400;
      color: #666666;
      margin-top: 18rpx;
    }
  }

  .card-info-view {
    display: flex;
    flex-direction: column;
    margin-top: 57rpx;
    margin-left: 5rpx;

    view:nth-of-type(1) {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 20rpx;

      image {
        width: 35rpx;
        height: 32rpx;
      }

      text {
        font-size: 30rpx;
        font-weight: 400;
        margin-left: 10rpx;
        color: #666666;
      }
    }

    text:nth-of-type(1) {
      font-size: 30rpx;
      font-weight: 400;
      color: #333333;
    }

    text:nth-of-type(2) {
      font-size: 32rpx;
      font-weight: bold;
      margin-top: 18rpx;
      color: #333333;
    }
  }
}
</style>