JP-ChargeTeam51/pages/temporary/anniversary2024.vue

<template>
	<view class="background">
		<ujp-navbar title="优电联盟全新上线" bkUrl="/pages/index/index"></ujp-navbar>
		<view class="backgroundHead" @click="scrollToBottom">
			<img style="width: 100%;" src="@/assets/img/anniversary/两周年bg.jpg"></img>
		</view>
		<view class="btn">
			<view class="btnCard " :class="{
				btnCard1:key,
				btnCard2:!key
			}">
				<view class="text1">
					<view class="text11">服务费免单卷</view>
					<view class="text12">有效期{{str}}，逾期作废，已使用过免单卷的无法再次领取</view>
				</view>
				<view class="text2" v-if="key" @click="exchangeBtn">
					点击<br />
					领取
				</view>
				<view class="text2" v-if="!key" @click="exchangeBtn2">
					领取<br />
					成功
				</view>
			</view>
			<view class="option">
				<u-button size="medium" type="error" @click="show=true">活动规则</u-button>
				<u-button size="medium" type="error" @click="gotoUrl('pages/user/coupon/myCoupon')">我的优惠券</u-button>
			</view>
		</view>
		<u-popup v-model="show" class="u-popup-class" border-radius="56" mode="center">
			<view class="popupMain">
				<view class="popup-content">
					<view class="p-head">活动规则</view>
					<view class="p-title">
						活动对象：
					</view>
					<view class="p-value">
						优电联盟会员
					</view>
					<view class="p-title">
						活动时间：
					</view>
					<view class="p-value">
						{{str}}（以订单开始充电时间为准）
					</view>
					<view class="p-title">
						活动范围：
					</view>
					<view class="p-value">
						所有优电联盟充电站
					</view>
					<view class="p-title">
						活动内容：
					</view>
					<view class="p-value">


						51充电联盟二周年之际，完成品牌升级并更名为“优电联盟”，“优电联盟”将一贯秉承“共建、共享、共赢”理念，为用户提供更优充电服务。
						<br />优电联盟会员可领取一张“<span
							style="font-weight: bold;">服务费免单券</span>”，充电时使用本券可免单次充电服务费，每个账号可领取一次，该券使用有效期为{{str}}，共7天，超过有效期无法使用。
						<br /><br />1.已使用过免单卷的无法再次领取
						<br />2.为方便用户使用“服务费免单券”，快捷充电功能将暂停，活动结束后快捷充电功能将恢复。

					</view>
					<view class="p-btn-view">
						<view class="p-btn" @click="show=false">知道了</view>
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup v-model="show2" class="u-popup-class" border-radius="56" mode="center">
			<view class="popupMain">
				<view class="popup-content" style="
    text-align: center;    padding: 60rpx;
">
					<view class="p-title">
						<img style="height: 256rpx;width: 256rpx;" src="@/assets/img/anniversary/lq2.png">
					</view>

					<view class="p-title" style="color: rgba(100, 58, 28, 1);
font-size: 48rpx;">

						提示
					</view>
					<view class="p-value" style="color: rgba(100, 58, 28, 1);
font-size: 32rpx;">
						已使用过免单卷的无法再次领取

					</view>
					<view class="p-btn-view">
						<view class="p-btn" @click="show2=false">知道了</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="show3" class="u-popup-class popupMain2" border-radius="56" mode="center">
			<view class="popupMain ">
				<view class="popupMain-main ">
					<view class="popup-content" style=" text-align: center;    padding: 60rpx;">
						<view class="p-title">
							<img style="height: 256rpx;width: 256rpx;" src="@/assets/img/anniversary/lq1.png">
						</view>

						<view class="p-title" style="color: rgba(100, 58, 28, 1);
font-size: 48rpx;">
							领取成功
						</view>
						<view class="p-value">


						</view>
						<view class="p-btn-view">
							<view class="p-btn" @click="redirectToInfo('/pages/index/index')">去充电</view>
						</view>
					</view>

				</view>
				<u-image width="36px" style="margin: auto;margin-top: 10rpx;" mode="widthFix" @click="show3=false"
					src="../../assets/img/if-close-line-circled.png"></u-image>
			</view>
		</u-popup>

		<u-popup v-model="show4" class="u-popup-class popupMain2" border-radius="56" mode="center">
			<view class="popupMain ">
				<view class="popupMain-main ">
					<view class="popup-content" style="
		    text-align: center;    padding: 60rpx;
		">
						<view class="p-title">
							<img style="height: 256rpx;width: 256rpx;" src="@/assets/img/anniversary/lq1.png">
						</view>

						<view class="p-title" style="color: rgba(100, 58, 28, 1);font-size: 48rpx;">

						</view>

						<view class="p-value" style="color: rgba(100, 58, 28, 1);
								font-size: 32rpx;">
							有效期{{str}}，逾期作废，已使用过免单卷的无法再次领取

						</view>
						<view class="p-btn-view">
							<view class="p-btn" @click="redirectToInfo('/pages/index/index')">返回首页</view>
						</view>
					</view>

				</view>
				<u-image width="36px" style="margin: auto;margin-top: 10rpx;" mode="widthFix" @click="show4=false"
					src="../../assets/img/if-close-line-circled.png"></u-image>
			</view>
		</u-popup>
		<u-popup v-model="show5" class="u-popup-class popupMain2" border-radius="56" mode="center">
			<view class="popupMain ">
				<view class="popupMain-main ">
					<view class="popup-content" style="
				    text-align: center;    padding: 60rpx;
				">
						<view class="p-title">
							<img style="height: 256rpx;width: 256rpx;" src="@/assets/img/anniversary/lq2.png">
						</view>

						<view class="p-title" style="color: rgba(100, 58, 28, 1);font-size: 48rpx;">
							游客无法兑换,是否前往注册？
						</view>
						<view class="p-value">


						</view>
						<view class="p-btn-view">
							<view class="p-btn" @click="redirectToInfo('/pages/login/login')">前往注册</view>
						</view>
					</view>

				</view>
				<u-image width="36px" style="margin: auto;margin-top: 10rpx;" mode="widthFix" @click="show5=false"
					src="../../assets/img/if-close-line-circled.png"></u-image>
				
			</view>
		</u-popup>
		<view class="slogan-4">
			活动时间 ： {{str}}
		</view>
	</view>
</template>

<script>
	import * as userApi from '@/apis/user.js'
	import {
		checkPhone,newDate
	} from '@/utils'

	export default {
		data() {
			return {
				one: true,
				show: false, //活动规则
				show2: false, //已使用
				show3: false, //领取成功
				show4: false, //已领取
				show5: false, //游客
				str:"",
				couponList: [],
				key: "",
			}
		},
		onReady() {
			
			//this.str="5月18日12:00至25日12:00"
			this.str="5月25日12:00至6月1日12:00"
			//this.str2="2024年5月18日12:00至25日12:00"
			var time1=newDate("2024-06-01 12:00:00")
			var time3=new Date()
			if(time3>time1){
				this.str="至6月1日12:00-8日12:00"
			}
			
			this.getf5surprised()
		},
		methods: {
			scrollToBottom() {
				// 使用uni.pageScrollTo方法滚动到指定位置  
				uni.pageScrollTo({
					scrollTop: 99999, // 设置一个足够大的值，确保滚动到最底部  
					duration: 300 // 滚动动画时长，单位ms  
				});
			},
			exchangeBtn2() {
				this.show4 = true
			},
			exchangeBtn() {
				var user = this.carhelp.getPersonInfo()
				if (user.userType == 1) {
					this.show5 = true
				} else {
					if (!this.key) {
						return
					}
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
					userApi.exchangeByGroupFive({
						key: this.key
					}).then((res) => {
						uni.hideLoading();
						this.getf5surprised()
						this.show3 = true;


					}).catch(error => {
						//this.showNt = false;
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
				}

			},
			redirectToInfo(url) {


				uni.redirectTo({
					url: url
				})
			},
			getf5surprised() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				userApi.exchangeGroupDetail2("周年红包").then((res) => {
					uni.hideLoading();
					var data = res.data;
					this.key = ""
					this.couponList = []

					if (data.length) {
						this.couponList = res.data[0].couponList;

						if (this.couponList && this.couponList.length) {
							this.key = res.data[0].key;
						}
					}

					if (res.message == "已使用") {

						this.show2 = true
					}



				}).catch(error => {

					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #eabe9a;
	}

	.btn {
		padding: 40rpx;
		top: -40rpx;
		background-color: #eabe9a;
		position: relative;
		border-radius: 10px 10px 0px 0px;

	}

	.btnCard {
		//padding: 40rpx;
		background-size: 100% 100%;
		display: flex;
		justify-content: space-between;

		.text1 {
			padding: 40rpx;
			width: 484rpx;
			color: #7D2B00;

			.text11 {
				font-size: 40rpx;
				font-weight: bold;
			}

			.text12 {
				font-size: 28rpx;
			}
		}

		.text2 {
			font-size: 36rpx;
			color: rgba(255, 255, 255, 1);
			padding: 40rpx;
			display: flex;
			width: 188rpx;
			align-items: center;
			justify-content: center;
		}
	}

	.btnCard1 {
		background-image: url("@/assets/img/anniversary/ticket_1.png");
	}

	.btnCard2 {
		background-image: url("@/assets/img/anniversary/ticket_2.png");
	}

	.option {
		display: flex;
		margin-top: 40rpx;
		margin-bottom: 60rpx;
		justify-content: space-between;

		::v-deep.u-btn {
			width: 320rpx;
			margin: 0;
			border-color: #FE280F;
			background-color: #FE280F;
		}
	}

	.u-popup-class {
		margin: 40rpx;

	}

	::v-deep.uni-scroll-view {
		border-radius: 40rpx;
	}

	::v-deep.u-mode-center-box {
		background: linear-gradient(180deg, rgba(255, 179, 147, 1) 0%, rgba(246, 234, 214, 1) 100%);


		padding: 20rpx;
	}

	.popupMain2 {
		::v-deep.u-mode-center-box {
			background: none !important;
			;


			//padding: 20rpx;
		}

		.popupMain-main {
			padding: 20rpx;
			border-radius: 20px;
			background: linear-gradient(180deg, rgba(255, 179, 147, 1) 0%, rgba(246, 234, 214, 1) 100%);

		}
	}

	.popupMain {

		.popup-content {
			padding: 20rpx;
			border-radius: 20px;
			background-color: rgba(255, 255, 255, 1);

			.p-head {
				text-align: center;
				color: rgba(100, 58, 28, 1);
				font-size: 56rpx;
				font-weight: bold;
				margin: 16rpx;
			}

			.p-title {
				font-weight: bold;
				font-size: 32rpx;
				margin-bottom: 12rpx;
			}

			.p-value {
				font-size: 28rpx;
				margin-bottom: 28rpx;
			}

			.p-btn-view {
				.p-btn {
					background: linear-gradient(180deg, rgba(253, 133, 93, 1) 0%, rgba(230, 68, 53, 1) 100%);
					color: rgba(255, 255, 255, 1);
					font-size: 40rpx;
					width: 460rpx;
					border-radius: 50px;
					padding: 20rpx;
					text-align: center;
					margin: auto;

				}
			}

		}
	}
	.slogan-4 {
		
		position: relative;
		    top: -1260rpx;
		    width: 600rpx;
		    text-align: center;
		    margin: auto;
		  border: 1px solid rgba(255, 255, 255, 0.5);
		    font-size: 24rpx;
		    padding: 12rpx;
		    background-color: rgba(255, 255, 255, 0.21);
		    border-radius: 50px;
		    color: #fff;
		
	
	}
</style>