jili2-visitor/pages/index/detail.vue

<template>
	<view class="box">
		<image class="box-img" src="../../images/tongxingma.png"></image>
		<view class="box-info">
			<view class="box-info-title">您的通行码</view>
			<view class="box-info-img">
				<image v-if="info" class="box-info-qrcode" :src="info.qrcode"></image>
			</view>
			<view class="box-info-desc">请持通行码至保安人员认证通过哦~</view>
			<view class="box-info-org" v-if="info">{{info.orgName}}</view>
			<view class="box-info-greet">欢迎您</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	
	export default {
		data() {
			return {
				info: null
			}
		},
		onLoad() {
			var that = this;
			const eventChannel = this.getOpenerEventChannel()
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('acceptDataFromOpenerPage', function(data) {
				that.info = data;
			})
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: $theme-color;
	}
	.box{
		position: relative;
		width: 100%;
		height: 100%;
	}
	.box-img{
		display: block;
		width: 642rpx;
		height: 974rpx;
		margin: 0 auto;
	}
	.box-info{
		position: absolute;
		z-index: 100;
		width: 750rpx;
		left: 0;
		top: 0;
		bottom: 0;
		text-align: center;
	}
	
	
	.box-info-title{
		font-size: 28rpx;
		color: $theme-color;
		font-weight: blod;
		margin-top: 160rpx;
	}
	.box-info-img{
		width: 324rpx;
		height: 324rpx;
		border: 1rpx solid #CCCCCC;
		margin: 0 auto;
		border-radius: 40rpx;
		padding: 19rpx;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
	}
	.box-info-qrcode{
		width: 314rpx;
		height: 314rpx;
	}
	.box-info-desc{
		color: #8C8C8C;
		font-size: 24rpx;
	}
	.box-info-org{
		color: $theme-color;
		font-size: 50rpx;
		margin-top: 60rpx;
	}

	.box-info-greet{
		color: $theme-color;
		font-size: 140rpx;
	}	
</style>