sljiaxuanuser_uniapp/pages_course/activity.vue

<template>
	<view class="container_box">
		<view class="header-nav"
			:style="{height: `calc(88rpx + ${statusBarHeight}px)`,paddingTop: statusBarHeight + 'px'}">
		</view>
		<view class="conbox">
			<image class="activity_yh_right" src="https://cdn.his.cdwjyyh.com/minapp/course/activity_yh_right.png"
				mode="widthFix"></image>
			<image class="activity_yh_left" src="https://cdn.his.cdwjyyh.com/minapp/course/activity_yh_left.png"
				mode="widthFix"></image>
			<image class="activity_title" v-if="collectType!=2&&isExpiry"
				src="https://cdn.his.cdwjyyh.com/minapp/course/activity_title.png" mode="widthFix"></image>
			<view class="activity_title2" v-if="!isExpiry==1&&collectType==2">
				福袋已经失效了~
			</view>
			<template v-if="collectType==1">
				<view class="activity_title3">
					您已经领取过本次福袋啦~
				</view>
				<view class="activity_title4">
					赶紧前往芳华未来APP，兑换好物吧
				</view>
			</template>
			<view class="ybg_box">
				<view class="ybg"></view>
				<image class="activity_lucky_bag" src="https://cdn.his.cdwjyyh.com/minapp/course/activity_lucky_bag.png"
					mode="heightFix"></image>
				<image class="activity_ysx" v-show="!isExpiry==1&&collectType==2"
					src="https://cdn.his.cdwjyyh.com/minapp/course/activity_ysx.png" mode="widthFix"></image>
				<image class="activity_ylq" v-show="collectType==1"
					src="https://cdn.his.cdwjyyh.com/minapp/course/activity_ylq.png" mode="widthFix"></image>
			</view>
			<view class="activity_btn animation" v-if="collectType!=2&&isExpiry" @click="handleReceive">
				<view class="btn">领取福袋</view>
				<image src="https://cdn.his.cdwjyyh.com/minapp/course/activity_btn.png" mode="heightFix"></image>
				<view class="exsct"></view>
			</view>
			<view class="activity_btn_down x-c" v-else @click="navTo">
				<text>如何下载芳华未来APP</text>
				<image src="https://cdn.his.cdwjyyh.com/minapp/course/activity_more.png" mode="aspectFill"></image>
			</view>
		</view>
		<image class="footer_img" src="https://cdn.his.cdwjyyh.com/minapp/course/activity_xy.png" mode="widthFix">
		</image>
		<u-popup :show="show" mode="center" bgColor="transparent" :closeOnClickOverlay="false" overlayOpacity="0.7">
			<view class="popup-box">
				<image class="activity_jb" src="https://cdn.his.cdwjyyh.com/minapp/course/activity_jb.png"
					mode="heightFix"></image>
				<text class="popup-tit">恭喜您获得</text>
				<view class="con">
					<view class="numbox color_FB2205"><text class="num">+{{coinAmount||0}}</text>芳华币</view>
					<view>您的芳华币总额：<text class="color_FB2205" style="font-weight: 600;">{{balance||0}}</text></view>
				</view>
				<view class="popup-tips">赶紧去芳华未来APP，兑换好物吧~</view>
				<view class="popbtn x-c" @click="show=false">我知道啦</view>
			</view>
			<view class="popup-tips" style="color: #FFFFFF;margin-top: 60rpx;">兑换提示：请前往芳华未来APP兑换</view>
			<view class="popup-tips" style="color: #FFC05C;text-decoration-line: underline;" @click="navTo">如何下载芳华未来APP？
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import {
		getLuckyBagInfo,
		receiveLuckyBag
	} from '@/api/course.js'
	export default {
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				show: false,
				status: 0,
				recordId: '',
				urlOption: {},
				sortLink: '',
				corpId: null,
				isLogin: false,
				isLoginH5: 0, // 1服务号授权
				collectType: -1, // 领取状态(0-已发放 1-已领取 2-已失效)
				isExpiry: true, // false 失效 true 有效
				coinAmount: 0,
				balance: 0
			}
		},
		computed: {
			...mapGetters(['coureLogin']),
		},
		watch: {
			coureLogin: {
				immediate: true, // 页面一进入就检查一次
				handler(val) {
					if (val == 2 && this.isLogin) {
						console.log("注册AppToken失效，请重新登录")
						uni.removeStorageSync('web_userInfo');
						uni.removeStorageSync('TOKEN_WEXIN');
						this.isLogin = false
						if (this.isLoginH5 == 0) {
							this.goWXLogin()
						} else {
							this.goLogin()
						}
					}
				}
			}
		},
		onLoad(option) {
			this.recordId = option.recordId || ''
			this.urlOption = option.link ? JSON.parse(decodeURIComponent(option.link)) : {},
				this.sortLink = this.urlOption.link || ''
			this.corpId = this.urlOption.corpId
			console.log(this.sortLink)
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			handleReceive() {
				if (this.isLoginH5 == 0) {
					this.utils.isLoginCourse().then(
						isLogin => {
							this.isLogin = isLogin
							if (this.isLogin) {
								// this.editUserA()
								if (this.chatId != '' || this.chatId) {
									this.userlogo = true
								} else {
									this.receiveLuckyBag(1)
								}
							} else {
								this.goLogin()
							}
						},
						rej => {}
					);
				} else {
					this.utils.isLoginResCourse().then(
						isLogin => {
							this.isLogin = isLogin
							if (this.isLogin) {
								this.receiveLuckyBag(1)
							} else {
								this.goLogin()
							}
						},
						rej => {}
					);
				}
				this.show = true
			},
			receiveLuckyBag(type) {
				uni.showToast({
					title: '领取中...',
					icon: 'loading'
				});
				receiveLuckyBag({...this.urlOption}).then(res => {
					uni.hideLoading()
					if(res.code == 200) {
						this.coinAmount = 0
						this.balance =  0
						this.show = true
					} else {
						uni.showModal({
							title: '领取失败',
							content: res.msg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				})
			},
			navTo() {
				this.show = false
				uni.navigateTo({
					url: '/pages_course/appDownload'
				})
			},
			getLuckyBagInfo() {
				getLuckyBagInfo({
					recordId: this.recordId
				}).then(res => {
					if (res.code == 200) {
						this.collectType = res.data.collectType; //领取状态(0-已发放 1-已领取 2-已失效)
						this.isExpiry = res.data.isExpiry; //false 失效 true 有效
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			},
			goLogin(data) {
				if (this.isLoginH5 == 0) {
					this.goWXLogin()
					return
				}
			},
			goWXLogin() {
				this.utils.getProvider().then(provider => {
					console.log('当前的环境商', provider)
					if (!provider) {
						reject()
					}
					uni.login({
						provider: provider,
						success: async loginRes => {
							console.log(loginRes)
							uni.getUserInfo({
								provider: provider,
								success: (infoRes) => {
									uni.showToast({
										title: '登录中...',
										icon: 'loading'
									});
									loginByMp({
										code: loginRes.code,
										encryptedData: infoRes.encryptedData,
										iv: infoRes.iv,
										appId: getApp().globalData.appId
									}).then(res => {
										uni.hideLoading();
										if (res.code == 200) {
											// this.checkUserInfoA()
											this.$store.commit('setCoureLogin', 1);
											uni.setStorageSync(
												'AppTokenmini_RTCourse', res
												.token);
											uni.setStorageSync('auto_userInfo',
												JSON.stringify(res.user));
											this.isLogin = true
											// if(this.chatId!=''||this.chatId){
											// 	this.userlogo=true
											// }else{
											// 	this.getLuckyBagInfo()
											// }
											this.receiveLuckyBag()
										} else {
											uni.showToast({
												title: res.msg,
												icon: 'none'
											});
										}
									}).catch(err => {
										uni.hideLoading();
										uni.showToast({
											icon: 'none',
											title: "登录失败,请重新登录",
										});
									});
								}
							});
						}
					})
				}).catch(err => {})
			}
		}
	}
</script>

<style scoped lang="scss">
	.exsct {
		height: 92rpx;
		width: 437rpx;
		background-color: transparent;
		border-radius: 69rpx;
		position: absolute;
		top: 27rpx;
		left: 28rpx;
		box-shadow: inset -57rpx 0px 40rpx -26rpx rgba(255, 255, 255, 0.7);
		will-change: left, opacity;
		animation: leftFade 2s linear infinite;
		opacity: 0;
	}

	.color_FB2205 {
		color: #FB2205;
	}

	.activity_title2,
	.activity_title3,
	.activity_title4 {
		margin-top: 8vh;
		margin-bottom: 56rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 48rpx;
		line-height: 80rpx;
		filter: drop-shadow(0px 4rpx 8rpx rgba(174, 0, 25, 0.8));
		text-align: center;
		font-style: normal;
		text-transform: none;
		background: linear-gradient(270deg, #FFF5EE 0%, #FFE2B3 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		text-fill-color: transparent;
		display: inline-block
	}

	.activity_title3 {
		font-size: 48rpx;
		line-height: 80rpx;
		margin-top: 6vh;
		margin-bottom: 8rpx;
	}

	.activity_title4 {
		font-size: 32rpx;
		line-height: 44rpx;
		margin-top: 0;
		margin-bottom: 48rpx;
	}

	.container_box {
		min-height: 100vh;
		position: relative;
		background: linear-gradient(180deg, #FD2F3C 0%, #FFE7CE 100%);
	}

	.activity_yh_right {
		width: 100rpx;
		position: absolute;
		top: 25%;
		right: 0;
	}

	.activity_yh_left {
		width: 114rpx;
		position: absolute;
		top: 50%;
		left: 0;
	}

	.header-nav {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		box-sizing: border-box;
		width: 100%;
	}

	.conbox {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		z-index: 3;

		.activity_title {
			width: 632rpx;
			height: auto;
			margin-top: 28rpx;
		}

		.ybg_box {
			width: 566rpx;
			height: 580rpx;
			position: relative;

			.activity_ysx,
			.activity_ylq {
				position: absolute;
				left: 242rpx;
				top: 215rpx;
				width: 300rpx;
				height: auto;
			}

			.ybg {
				width: 616rpx;
				height: 616rpx;

				background: #FFE7CE;
				border-radius: 0rpx 0rpx 0rpx 0rpx;

				filter: blur(94.30000305175781px);
			}

			image {
				height: 580rpx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 99;
			}
		}

		.activity_btn_down {
			width: 416rpx;
			height: 88rpx;
			margin-top: 94rpx;
			background: rgba(0, 0, 0, 0.3);
			border-radius: 56rpx 56rpx 56rpx 56rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #FFFFFF;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-left: 16rpx;
			}
		}

		.activity_btn {
			height: 137rpx;
			width: 502rpx;
			margin-top: 48rpx;
			font-family: PingFang SC;
			font-weight: 600;
			font-size: 44rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			z-index: 2;
			overflow: hidden;
			border-radius: 137rpx;

			image {
				height: 137rpx;
				position: absolute;
				left: 0;
				top: 12rpx;
				z-index: -1;
			}
		}
	}

	.popup-box {
		width: 518rpx;
		min-height: 568rpx;
		background: linear-gradient(180deg, #FFE7AC 0%, #FFFFFF 100%);
		border-radius: 56rpx 56rpx 56rpx 56rpx;
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;
		box-shadow: 0 0 30px -6px rgba(255, 231, 206, 1);

		.activity_jb {
			height: 184rpx;
			margin-top: -130rpx;
			position: relative;
		}

		.popup-tit {
			font-family: PingFang SC;
			font-weight: 600;
			font-size: 40rpx;
			color: #000000;
			line-height: 80rpx;
		}

		.con {
			margin-top: 16rpx;
			width: 438rpx;
			min-height: 170rpx;
			padding: 16rpx 0;
			background: #FFE8AE;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.numbox {
			font-weight: 600;
			margin-bottom: 12rpx;
		}

		.num {
			font-size: 68rpx;
			margin-right: 10rpx;
		}

		.popbtn {
			width: 358rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #F82D31 0%, #FD6C05 100%);
			box-shadow: 0rpx 8rpx 0rpx 0rpx #FEBC92;
			border-radius: 64rpx 64rpx 64rpx 64rpx;
			margin-top: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}

	.popup-tips {
		margin-top: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		text-align: center;
	}

	.footer_img {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.animation {
		will-change: transform;
		animation: scaleAnimation 2s ease infinite;
	}

	@keyframes leftFade {
		0% {
			left: -464rpx;
			opacity: 0;
		}

		25% {
			opacity: 1;
			left: -249rpx;
		}

		50% {
			opacity: 0;
			left: 16rpx;
		}

		100% {
			opacity: 0;
			left: 490rpx;
		}
	}

	@keyframes scaleAnimation {
		0% {
			transform: scale(1);
		}

		// 30% {
		//   transform: scale(1.05);
		// }

		50% {
			transform: scale(1.05);
		}

		100% {
			transform: scale(1);
		}
	}
</style>