hotelHomestayWx/pagesMy/code/index.vue

<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar title="预订二维码" :showHome="false"></c-nav-bar>
		<image src="https://i.ringzle.com/file/20240115/4cfb2a681dba4431800e88ba903d61a6.png" class="title" mode="widthFix"></image>
		<view class="code">
			<image :src="img" mode="scaleToFill"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img:''
			}
		},
		onLoad() {
			this.getCode();
		},
		methods: {
			getCode(){
				this.$api.get('/merchant/hotel/mine/createTouristCode?homestayId='+uni.getStorageSync('homestayId'),{},true,true,true).then(res=>{
					if(res.data){
						this.img = 'data:image/png;base64,'+uni.arrayBufferToBase64(res.data);
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		box-sizing: border-box;
		background: url(https://i.ringzle.com/file/20240115/95e355588e3c4df9847d3a586d79aa44.png) no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.title{
			width: calc(100% - 98rpx);
			margin: 214rpx 49rpx 0;
		}
		.code{
			width: 460rpx;
			height: 460rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 32rpx 1rpx rgba(72,139,255,0.27);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 40rpx;
			box-sizing: border-box;
			margin: 83rpx auto 0;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
</style>