uniapp/pages_tool/hongbao/poster.vue

<template>
	<page-meta :page-style="themeColor"></page-meta>
	<view class="container">
		<swiper class="swiper">
			<swiper-item>
				<view class="swiper-item">
					<view class="poster-wrap"><image :src="$util.img(poster)" mode="widthFix" :show-menu-by-longpress="true"></image></view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	data() {
		return {
			poster: '', //海报
			posterMsg: '', //海报错误信息
			posterHeight: 0,
			hongBaoId: '',
			groupId: 0,
			inviterId: '',
			memberInfo: {}
		};
	},
	onLoad(option) {
		this.hongBaoId = option.hongbao_id;
		this.groupId = option.group_id;
		this.inviterId = option.inviter_id;
		this.getGoodsPoster();
		this.getMemberInfo();
	},
	methods: {
		headerimageError() {
			this.memberInfo.headimg = this.$util.getDefaultImage().head;
			this.$forceUpdate();
		},
		//生成海报
		getGoodsPoster() {
			//活动海报信息
			this.$api.sendRequest({
				url: '/hongbao/api/hongbao/poster',
				data: {
					hongbao_id: this.hongBaoId,
					group_id: this.groupId == '' ? 0 : this.groupId,
					inviter_id: this.inviterId == '' ? 0 : this.inviterId
				},
				success: res => {
					if (res.code == 0) {
						this.poster = res.data.path;
					} else {
						this.posterMsg = res.message;
					}
				}
			});
		},
		getMemberInfo() {
			this.$api.sendRequest({
				url: '/api/member/info',
				success: res => {
					if (res.code >= 0) {
						this.memberInfo = res.data;
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.poster-layer-wrap {
	position: relative;
	background-color: $color-title;
	.bottom {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		position: relative;
		left: 0;
		bottom: 0;
		line-height: 1;
		.user-head {
			width: 114rpx;
			height: 114rpx;
			border-radius: 50%;
			position: absolute;
			bottom: 310rpx;
			left: 84rpx;
		}
		.name {
			font-size: 30rpx;
			color: #ff6f0f;
			font-weight: bold;
			position: absolute;
			bottom: 250rpx;
			left: 40rpx;
			width: 280rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.qr-code {
			width: 196rpx;
			height: 198rpx;
			position: absolute;
			bottom: 80rpx;
			right: 50rpx;
		}
	}
}

.container {
	width: 100vw;
	min-height: 100vh;
	background-color: #f5f5f5;
}
.poster-wrap {
	padding: 40rpx 0;
	width: calc(100vw - 80rpx);
	margin: 0 40rpx;
	line-height: 1;

	image {
		border-radius: 20rpx;
		overflow: hidden;
		width: 100%;
	}
}
.swiper {
	height: 100vh;
}
.btn {
	margin: 0 80rpx;
	margin-top: 30rpx;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: $border-radius;
	color: #fff;
	text-align: center;
}
.tips {
	text-align: center;
	font-size: $font-size-base;
	color: #999;
	font-weight: 600;
	margin-top: 20rpx;
}
.dialog-popup {
	width: 580rpx;
	background: #fff;
	box-sizing: border-box;
	border-radius: 10rpx;
	overflow: hidden;
	height: initial;

	.title {
		padding: 30rpx 30rpx 0 30rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
	}

	.message {
		padding: 0 30rpx;
		color: #666;
		text-align: center;
		font-size: $font-size-base;
		line-height: 1.3;
		margin-top: 30rpx;
	}

	.action-wrap {
		margin-top: 50rpx;
		height: 80rpx;
		display: flex;
		border-top: 2rpx solid #eee;

		& > view {
			flex: 1;
			text-align: center;
			line-height: 80rpx;

			&:first-child {
				border-right: 2rpx solid #eee;
				color: #999;
			}

			button {
				border: none;
				line-height: 80rpx;
				padding: 0;
				margin: 0;
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>
<style scoped>
/deep/ .top {
	height: calc(100vh);
}
/deep/ .top image {
	width: 100% !important;
	height: 100% !important;
}
/deep/ .top image div {
	background-size: 100% 100% !important;
}
</style>