uniapp+＜script setup lang=“ts“＞解析后端返回的图片流并将二维码展示在页面中

性野喜悲2025-09-26 23:14

页面展示

apiFox请求

封装公用的ts

复制代码

import config from '@/../config/config';
const URL = `${config.apiDomain}${config.apiBase}/order/genVerificationQr`;
interface GenQrParams {
    orderNo: string;
    width: number;
    height: number;
}

// 生成核销二维码接口
export const genVerificationQr = (params: GenQrParams) => {
    const accessToken = uni.getStorageSync('access_token');
    return new Promise<string>((resolve, reject) => {
        uni.request({
            url: `${URL}`, // 注意补充完整的接口URL
            method: 'GET',
            header: {
                Authorization: 'Bearer ' + accessToken,
            },
            data: params,
            responseType: 'arraybuffer',
            success: (res) => {
                if (res.statusCode === 200 && res.data) {
                    try {
                        // 将arraybuffer转换为base64格式
                        const base64Str = wx?.arrayBufferToBase64(res.data as ArrayBuffer);
                        if (!base64Str) {
                            throw new Error('转换base64失败');
                        }
                        // 生成正确的dataURL（根据实际图片类型调整mime类型，这里假设是png）
                        const imageSrc = `data:image/png;base64,${base64Str}`;
                        resolve(imageSrc); // 成功时返回imageSrc
                    } catch (err) {
                        reject(err); // 转换过程出错时 reject
                    }
                } else {
                    reject(new Error(`请求失败，状态码：${res.statusCode}`));
                }
            },
            fail: (err) => {
                reject(err); // 网络请求失败时 reject
            },
        });
    });
};

页面使用

复制代码

<template>
        <view class="qr-code-box flex-column-center">
                        <image :src="currentImg" class="qr-code-img" />
                        <view class="qr-code-text">请将此二维码呈现给工作人员为您核销订单</view>
                    </view>
</template>

<script setup lang="ts">
import { onMounted, nextTick } from 'vue';
import { genVerificationQr } from '@/utils/createQrCode'; 
interface PropsType {
    orderNo: any;
}
const props = withDefaults(defineProps<PropsType>(), {
    orderNo: 0,
});
const { orderNo } = toRefs(props);


const getGenVerificationQr = async () => {
    currentImg.value = ''; //每次请求前置空
    let params = {
        orderNo: orderNo.value,
        width: 200,
        height: 200,
    };
    nextTick(async () => {
        // 调用接口生成二维码
        const qrImageSrc = await genVerificationQr(params);
        // 将结果赋值给页面的image src
        currentImg.value = qrImageSrc; // 假设页面中有qrImage这个数据变量
    });
};




onMounted(() => {
    getGenVerificationQr();
});


</script>

<style lang="scss">
@import './index.scss';
</style>