JP-ChargeTeam51/pages/temporary/anniversary2024.vue

<template>
	<view class="background">
		<ujp-navbar title="51充电联盟两周年庆典" 
			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">有效期5月11日-17日，逾期作废</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">
						2024年5月11日00:00至17日23:59（以订单开始充电时间为准）
					</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>”，充电时使用本券可免单次充电服务费，每个账号可领取一次，该券使用有效期为5月11日-17日，共7天，超过有效期无法使用。
						<br/>为方便用户使用“服务费免单券”，快捷充电功能将暂停，活动结束后快捷充电功能将恢复。
						
					</view>
					<view class="p-btn-view">
						<view class="p-btn" @click="show=false">知道了</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import * as userApi from '@/apis/user.js'

	export default {
		data() {
			return {
				show: false,
				couponList:[],
				key:"",
			}
		},
		onReady() {
			this.getf5surprised()
		},
		methods: {
			   scrollToBottom() {  
			      // 使用uni.pageScrollTo方法滚动到指定位置  
			      uni.pageScrollTo({  
			        scrollTop: 99999, // 设置一个足够大的值，确保滚动到最底部  
			        duration: 300 // 滚动动画时长，单位ms  
			      });  
			    }  ,
				exchangeBtn2(){
					uni.showModal({
						
						title:"提示",
						content:"返回首页?",
					
						success: res1 => {
							if (res1.confirm) {
								uni.redirectTo({
									url: '/pages/index/index'
								})
							} else if (res1.cancel) {
								//('用户点击取消');
							}
						}
					})
				},
			exchangeBtn(){
				var user=this.carhelp.getPersonInfo()
				if(user.userType==1){
					uni.showModal({
						
						title:"提示",
						content:"游客无法兑换,是否前往注册？",
						confirmText:"前往注册",
						success: res1 => {
							if (res1.confirm) {
								uni.redirectTo({
									url: '/pages/login/login'
								})
							} else if (res1.cancel) {
								//('用户点击取消');
							}
						}
					})
				}else{
					if(!this.key){
						return
					}
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
					userApi.exchange({
						key: this.key
					}).then((res) => {
						uni.hideLoading();
						this.getf5surprised()
						uni.showModal({
							
							title:"提示",
							content:"领取成功",
							confirmText:"返回首页",
							success: res1 => {
								if (res1.confirm) {
									uni.redirectTo({
										url: '/pages/index/index'
									})
								} else if (res1.cancel) {
									//('用户点击取消');
								}
							}
						})
					}).catch(error => {
						//this.showNt = false;
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
				}
				
			},
			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;
						}
					}
					


				}).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;

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

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

	}

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

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


		padding: 20rpx;
	}

	.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;

				}
			}

		}
	}
</style>