com.kasite.client.uniapp.patient/pagesPersonal/st1/components/qrcode/qrcode.vue

<template>
  <view class="public_dialog">
    <view class="code_inner">
      <image class="code_img_out" :src="iconUrl.icon_whiteClose" @click="codeHide"></image>
      <image class="code_img" :src="iconUrl.icon_codeBgTop"></image>
      <view class="code_tit">{{ codeInfo.codeInfo }}</view>
      <view class="code_con">
        <image class="qr_code" :src="qrCodeImage"></image>
      </view>
      <view class="code_tip">
        <text class="colorCustom">{{ seconds }}</text>秒后自动刷新二维码
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, watch, onUnmounted } from 'vue';
import { REQUEST_CONFIG } from '@/config';
import { common } from '@/utils';
import icon from '@/utils/icon';

const props = defineProps({
  /**二维码信息 */
  codeInfo: {
    type: Object,
    default: () => ({})
  }
});

const emit = defineEmits(['codeHide']);

const iconUrl = ref(icon)
const seconds = ref(59);
const qrCodeImage = ref('');
let timer: any = null;

const setCode = (data: any) => {
  qrCodeImage.value = `${REQUEST_CONFIG.BASE_URL}api/340/340/createQrCode.do?content=${data}`;
  
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
  
  timer = setInterval(() => {
    if (seconds.value <= 0) {
      seconds.value = 59;
    } else {
      seconds.value--;
    }
  }, 1000);
};

const codeHide = () => {
  emit('codeHide');
};

watch(
  () => props.codeInfo,
  (newVal) => {
    seconds.value = 59;
    if (timer) {
      clearInterval(timer);
      timer = null;
    }
    if (!common.isEmpty(newVal)) {
      uni.showLoading({
        title: '',
        mask: true
      });
      setCode(newVal.CardNo);
      uni.hideLoading();
    }
  },
  { deep: true, immediate: true }
);

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
});
</script>

<style lang="scss" scoped>
.public_dialog {
  background-color: rgba(1, 1, 1, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.code_inner {
  width: 600upx;
  border-radius: 24upx;
  position: relative;
  background-color: #fff;
  padding-bottom: 50upx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.code_img_out {
  width: 24upx;
  height: 24upx;
  position: absolute;
  right: 30upx;
  top: 30upx;
  z-index: 1;
}

.code_img {
  width: 100%;
  height: 200upx;
  position: absolute;
  top: 0;
  left: 0;
}

.code_tit {
  font-size: 40upx;
  font-weight: 500;
  height: 200upx;
  line-height: 210upx;
  position: relative;
  color: #fff;
}

.code_card {
  font-size: 28upx;
  font-family: Arial;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  margin: 23upx 0 107upx;
  position: relative;
}

.code_subtit {
  font-size: 28upx;
}

.code_con {
  margin: 37upx 0 30upx;
  width: 340upx;
  height: 340upx;
}

.code_tip {
  font-size: 26upx;
  color: #58AB56;
}

.qr_code {
  box-sizing: content-box;
  width: 340upx;
  height: 340upx;
  padding: 10upx 0;
}
</style>