uniapp根据后端返回的二维码的图片不同的两种形式渲染的两种不同的逻辑

第一种，后端返回的二维码是图片

效果：

代码：

<templete>
<view>
<uni-list>
<view class="form-row-between" @click="onCode('center')" v-if="mdMy.level != 3">
				<view class="form-row-tt">
					<img src="../../../static/imgs/md-code.png" style="width: 25px;margin-right: 10rpx" />
					<span>店铺二维码</span>
				</view>
			</view>
</uni-list>
<!--  店铺二维码图片-->
		<uni-popup ref="popup" type="center" v-if="mdMy.level != 3">
			<view class="img-modal">
				<img :src="mdMy.storeQr" @longtap="onLongTapCode" class="img" />
				<view>长按图片 保存二维码</view>
			</view>
		</uni-popup>
</view>
</templete>
<script>
export default {
data() {
   return {
   mdMy: {
					level: null,
					amountAccount: null,
				},
  }
 },
 onShow() {
   this.ajax.get(this.jk.mdMy).then(res => {
     this.mdMy = res.data;
   })
 },
 methods: {
    onCode(type) {
      this.$refs.popup.open(type)
   },
   //长按保存二维码
   onLongTapCode () {
      //保存图片
       uni.saveImageToPhotosAlbum({
         filePath: this.mdMy.storeQr,
					success: function() {
						this.common.UshowToast('保存成功');
					}
     });
   },
 }
}
</script>
<style>
//二维码弹窗样式
	.img-modal {
			background-color: #FFFFFF;
			padding: 20rpx;
			border-radius: 10rpx;
			width: 80%;
			margin: 0 auto;
			text-align: center;

			.img {
				width: 100%;
			}
		}
</style>

第二种，后端返回的二维码是一个一个二维码的Base64编码字符串

效果：

讲解：

从提供的数据来看，后端返回的是一个二维码的Base64编码字符串。在HTML中，您可以直接使用这个Base64字符串作为图像源来渲染图片。Base64编码的字符串可以直接在<img>标签的src属性中使用，无需任何额外的转换。

下面是如何在Vue模板中使用这个Base64字符串的示例：

<template>
  <div>
    <!-- 其他代码... -->
    <img :src="'data:image/png;base64,' + UserQRCode" alt="QR Code" />
    <!-- 其他代码... -->
  </div>
</template>

在这个示例中，:src是Vue的绑定语法，它会将UserQRCode变量的值绑定到<img>标签的src属性。字符串'data:image/png;base64,'是一个数据URI的前缀，它告诉浏览器接下来的字符串是一个Base64编码的PNG图片。

请确保UserQRCode在组件的data中声明，并且通过Ajax请求正确地赋值。如果一切设置正确，这个<img>标签将会渲染出您的二维码图片。

记住，当使用Base64编码的图片时，图片的数据会直接嵌入到HTML中，这可能会使页面的大小变大，影响加载性能。对于小图片（如二维码），这通常不是问题，但对于大图片，最好还是通过URL来引用。

代码：

<templete>
<view>
<uni-list>
<view class="custom-list-item" @click="onCode('center')">
				<image class="thumb" src="../../static/imgs/zt.png"></image>
				<text class="title bold" style="font-size: 30rpx; font-weight: 550;">会员二维码</text>
			</view>
</uni-list>
<!--  会员二维码图片-->
		<uni-popup ref="popup" type="center">
			<view class="img-modal">
				   <img :src="'data:image/png;base64,' + UserQRCode" alt="QR Code" />
			</view>
			
		</uni-popup>
</view>
   
</templete>
<script>
export default {
    data() {
     return {
       UserQRCode: null, // 初始值可以是 null 或者一个空字符串，取决于您的需求
    }
  }  
	methods: {
			// 店铺二维码
			onCode(type) {
				// 会员二维码
				this.ajax.get(this.jk.getUserQRCode).then(res => {
					this.UserQRCode = res.data;
					console.log("222222222222222222222222222222222222222");
					console.log(this.UserQRCode);
				})
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
				
			},
     }
}
</script>
<style>
  // 会员二维码
	.img-modal {
	    background-color: #FFFFFF;
	    padding: 20rpx;
	    border-radius: 10rpx;
	    width: 80%;
		height: 70%;
	    margin: 0 auto;
	    text-align: center;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}
	
	.img {
	    max-width: 100rpx; /* 控制图片的最大宽度 */
	    max-height: 100rpx; /* 控制图片的最大高度 */
	    width: auto; /* 保持图片原始宽高比 */
	    height: auto; /* 保持图片原始宽高比 */
	}
</style>