book-hi/components/reduce-qrcode/reduce-qrcode.vue

<template>
	<custom-popup v-model="showPopup" mode="center" border-radius="24" width="650rpx" :bg-color="'transparent'">
		<view class="popup-container">
			<!-- 顶部标题 -->
			<view class="header">
				<view class="title-text">
					让好友打开
					<!-- #ifdef MP-WEIXIN -->
					<text class="green">微信</text>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<text class="green">支付宝</text>
					<!-- #endif -->
					扫一扫
				</view>
				<view class="subtitle-text">加油！你就要成功了</view>
			</view>

			<!-- 二维码区域 -->
			<view class="qrcode-section">
				<image class="qrcode-img" :src="qrcode" mode="aspectFit"></image>
			</view>

			<!-- 关闭按钮 -->
			<view class="close-button" @click="closePopup">
				<image src="/static/img/activity/close2.png" mode="widthFix"></image>
			</view>
		</view>
	</custom-popup>
</template>

<script>
	import customPopup from '@/components/custom-popup.vue';
	export default {
		name: 'ReduceQrcode',
		components: {
			customPopup,
		},
		data() {
			return {
				showPopup: false,
				qrcode: '',
				// 可扩展为自定义图标
				wechatIcon: false,
				scanIcon: false,
				successIcon: false,
			};
		},
		methods: {
			open(data) {
				this.showPopup = true;
				this.getQrcode(data.reduceCode);
			},
			//获取二维码
			getQrcode(reduceCode) {
				this.$u.api.getReduceQrcodeAjax({ reduceCode: reduceCode }).then(res => {
					if (res.code == 200) {
						this.qrcode = res.data;
					}
				})
			},
			closePopup() {
				this.showPopup = false;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.popup-container {
		position: relative;
		padding: 30rpx 30rpx 80rpx 30rpx;
		box-sizing: border-box;
		background: url("https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/upsellbg.png") no-repeat center center;
		background-size: 100% 100%;
		height: 1020rpx;
	}

	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20rpx;

		.title-text {
			font-size: 38rpx;
			font-weight: bold;
			color: #222;
			margin-bottom: 10rpx;

			.green {
				color: #39c248;
			}
		}

		.subtitle-text {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 30rpx;
		}
	}

	.qrcode-section {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400rpx;
		width: 400rpx;
		background: #38c249;
		margin: 30rpx auto;
		border-radius: 24rpx;

		.qrcode-img {
			width: 300rpx;
			height: 300rpx;
			border-radius: 24rpx;
			background: #fff;
			border: 8rpx solid #fff;
		}
	}

	.close-button {
		position: absolute;
		bottom: -100rpx;
		left: 50%;
		transform: translateX(-50%);

		image {
			width: 70rpx;
			height: 70rpx;
		}
	}
</style>