mp-ui-user/components/activity-help/activity-help.vue

<template>
	<view>
		<!-- 确认助力 -->
		<u-popup :show="activityShowClose" mode="center" round="30" @close="close" :closeable="true" overlayOpacity="0.5"
			@touchmove.prevent.stop>
			<view class="activityShow">
				<view class="activityShow-one">
					<image :src="avatar" mode="" class="activityShow-one-img"></image>
				</view>
				<view class="activityShow-two">
					<image src="../../static/activity/beijingtwo.png" mode="" class="activityShow-two-img"></image>
					<text class="activityShow-two-text ells-one">{{ nickName }}</text>
				</view>
				<view class="activityShow-three">邀请您一起免费抽奖</view>
				<image class="activityShow-four" src="../../static/activity/tupian.jpg" mode=""></image>
				<view class="activityShow-five">一起免费抽奖</view>
				<view class="activityShow-six">收下好意可以帮助好友完成抽奖助力</view>
				<view class="activityShow-sixtwo">您也可以获得一个免费抽奖机会</view>
				<view class="activityShow-seven" @click="activityHelp()">
					<image src="../../static/activity/yuanjiao.png" mode="" class="activityShow-seven-img"></image>
					<view class="activityShow-seven-view">收下好意</view>
				</view>
			</view>
		</u-popup>
		<!-- 助力成功 -->
		<u-popup :show="closeShow" mode="center" round="30" @close="close" :closeable="true" overlayOpacity="0.5"
			@touchmove.prevent.stop>
			<view class="closeShow">
				<view class="closeShow-one">
					<image class="closeShow-one-imgone" src="../../static/activity/beijing.png" mode=""></image>
					<image class="closeShow-one-imgtwo" src="../../static/activity/beijingtwo.png" mode=""></image>
					<view class="closeShow-one-view">助力成功!</view>
					<view class="closeShow-one-viewtwo">您已获得一个免费抽奖机会</view>
				</view>
				<view class="closeShow-two" @click="close()">
					<image class="closeShow-two-img" src="../../static/activity/yuanjiao.png" mode=""></image>
					<view class="closeShow-two-view">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import env from '../../config/env.js'
	import $http from '@/utils/request.js'
	export default {
		name: "activity-help",
		props: {
			//显示与隐藏
			activityShow: {
				type: [Boolean],
				default: false
			},
			//邀请码
			inviteCode: {
				type: [String],
				default: {}
			},
			//活动id
			marketingId: {
				type: [String],
				default: {}
			},

		},
		data() {
			return {
				closeShow: false, //邀请助力成功隐藏
				activityShowClose:true,//邀请
				avatar: '', //用户头像
				nickName: '', //用户昵称
			};
		},
		created() {
			if(this.inviteCode){
				$http.post(`/api/v1/mp/user/marketing/userInfo/${this.inviteCode}`, {}).then(res=>{
					if(res.code == 0) {
						this.avatar = env.filePublic + res.data.avatar.split(',')[0]  + '?imageView2/2/w/170'
						this.nickName = res.data.nickName
					}
				})
			}
		},
		methods: {
			//关闭
			close() {
				this.$emit('close')
			},
			//确定助力
			activityHelp() {
				uni.showLoading({
					title: '助力中'
				});
				$http.post('/api/v1/mp/user/marketing/help', {
					inviteCode: this.inviteCode,
					marketingId: this.marketingId
				}).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.closeShow = true
						this.activityShowClose = false
					} else if (res.code == 500) {
						uni.$u.toast(res.msg);
						this.close()
					} else {}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.activityShow {
		text-align: center;
		width: 600rpx;

		&-one {
			position: relative;

			&-img {
				position: absolute;
				top: -75rpx;
				left: 235rpx;
				height: 134rpx;
				width: 134rpx;
				border-radius: 100%;
				background-color: #FDFDFC;
			}
		}

		&-two {
			position: relative;
			margin-top: 25rpx;

			&-img {
				width: 198rpx;
				height: 48rpx;
			}

			&-text {
				width: 170rpx;
				position: absolute;
				left: 220rpx;
				top: 6rpx;
				font-size: 28rpx;
				color: #FDFDFC;
				font-weight: bold;
				text-align: center;
			}
		}

		&-three {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}

		&-four {
			width: 410rpx;
			height: 362rpx;
		}

		&-five {
			color: #FF8B0A;
			font-size: 73rpx;
			font-family: YouSheBiaoTiHei;
			font-weight: 400;
		}

		&-six {
			color: #F78B3C;
			font-size: 26rpx;
			margin: 10rpx 0 4rpx 0;
		}
		&-sixtwo {
			color: #F78B3C;
			font-size: 26rpx;
			margin-bottom: 10rpx;
		}

		&-seven {
			position: relative;

			&-img {
				width: 340rpx;
				height: 88rpx;
				margin-top: 20rpx;
				margin-bottom: 40rpx;
			}

			&-view {
				font-size: 34rpx;
				color: #FDFBFB;
				position: absolute;
				top: 40rpx;
				left: 235rpx;
			}
		}
	}

	.closeShow {
		text-align: center;
		width: 570rpx;
		height: 700rpx;

		&-one {
			&-imgone {
				width: 570rpx;
				height: 700rpx;
			}

			&-imgtwo {
				position: absolute;
				left: -42rpx;
				top: 235rpx;
				height: 160rpx;
				width: 670rpx;
			}

			&-view {
				font-size: 122rpx;
				font-family: YouSheBiaoTiHei;
				position: absolute;
				top: 235rpx;
				left: 55rpx;
				color: #fff;
			}
			&-viewtwo {
				font-size: 32rpx;
				position: absolute;
				top: 400rpx;
				left: 95rpx;
				color: #fff;
			}
		}

		&-two {
			position: relative;

			&-img {
				width: 340rpx;
				height: 88rpx;
				position: absolute;
				left: 130rpx;
				bottom: 70rpx;
			}

			&-view {
				font-size: 34rpx;
				color: #FDFBFB;
				position: absolute;
				left: 260rpx;
				bottom: 93rpx;
			}
		}
	}
</style>