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">
					领取<br />
					成功
				</view>
			</view>
			<view class="option">
				<u-button size="medium" type="error" @click="show=true">活动规则</u-button>
				<u-button size="medium" type="error">我的优惠券</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">
						51充电联盟注册会员
					</view>
					<view class="p-title">
						活动时间：
					</view>
					<view class="p-value">
						2024年5月11日-17日
					</view>
					<view class="p-title">
						活动范围：
					</view>
					<view class="p-value">
						所有 51 充电联盟及优电联盟充电站
					</view>
					<view class="p-title">
						活动内容：
					</view>
					<view class="p-value">
						51充电联盟二周年之际，完成品牌升级并更名为“优电联盟”，“优电联盟”将一贯秉承“共建、共享、共赢”理念，为用户提供更优充电服务。
						平台会员可领取一张“<span style="font-weight: bold;">服务费免单券</span>”，每个账号可领取一次，该券有效期为 5 月 11 日-17 日，共 7
						天，超过有效期无法使用。
					</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  
			      });  
			    }  ,
			exchangeBtn(){
				if(!this.key){
					return
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				userApi.exchange({
					key: this.key
				}).then((res) => {
					uni.hideLoading();
					this.getf5surprised()
					uni.showModal({
						showCancel:false,
						title:"提示",
						content:"领取成功"
					})
				}).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: 36rpx;
			}

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