提示

pages/temporary/anniversary2024.vue

@@ -1,32 +1,30 @@
 <template>
 	<view class="background">
-		<ujp-navbar title="51充电联盟两周年庆典" 
-			bkUrl="/pages/index/index"
-		></ujp-navbar>
-		<view class="backgroundHead" @click="scrollToBottom" >
+		<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="btnCard " :class="{
+				btnCard1:key,
+				btnCard2:!key
+			}">
 				<view class="text1">
 					<view class="text11">服务费免单卷</view>
-					<view class="text12">有效期5月18日12:00至25日12:00，逾期作废，已使用过免单卷的无法再次使用</view>
+					<view class="text12">有效期5月18日12:00至25日12:00，逾期作废，已使用过免单卷的无法再次领取</view>
 				</view>
 				<view class="text2" v-if="key" @click="exchangeBtn">
 					点击<br />
 					领取
-				</view>
-				<view class="text2" v-if="!key" @click="exchangeBtn2">
-					领取<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>
+				<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">
@@ -55,13 +53,14 @@
 						活动内容：
 					</view>
 					<view class="p-value">
-						
-						
-						51充电联盟二周年之际，完成品牌升级并更名为“优电联盟”，“优电联盟”将一贯秉承“共建、共享、共赢”理念，为用户提供更优充电服务。
-						<br/>优电联盟会员可领取一张“<span style="font-weight: bold;">服务费免单券</span>”，充电时使用本券可免单次充电服务费，每个账号可领取一次，该券使用有效期为5月18日12:00-25日12:00，共7天，超过有效期无法使用。
-						<br/><br/>1.已使用过免单卷的无法再次使用
-						<br/>2.为方便用户使用“服务费免单券”，快捷充电功能将暂停，活动结束后快捷充电功能将恢复。
-						
+
+
+						51充电联盟二周年之际，完成品牌升级并更名为“优电联盟”，“优电联盟”将一贯秉承“共建、共享、共赢”理念，为用户提供更优充电服务。
+						<br />优电联盟会员可领取一张“<span
+							style="font-weight: bold;">服务费免单券</span>”，充电时使用本券可免单次充电服务费，每个账号可领取一次，该券使用有效期为5月18日12:00-25日12:00，共7天，超过有效期无法使用。
+						<br /><br />1.已使用过免单卷的无法再次领取
+						<br />2.为方便用户使用“服务费免单券”，快捷充电功能将暂停，活动结束后快捷充电功能将恢复。
+
 					</view>
 					<view class="p-btn-view">
 						<view class="p-btn" @click="show=false">知道了</view>
@@ -69,6 +68,117 @@
 				</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;">
+							有效期5月18日12:00至25日12:00，逾期作废，已使用过免单卷的无法再次领取
+
+						</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>
 </template>
 
@@ -78,113 +188,92 @@
 	export default {
 		data() {
 			return {
-				show: false,
-				couponList:[],
-				key:"",
+				one: true,
+				show: false, //活动规则
+				show2: false, //已使用
+				show3: false, //领取成功
+				show4: false, //已领取
+				show5: 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.exchangeByGroupFive({
-						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"
-						})
-					})
-				}
-				
+		methods: {
+			scrollToBottom() {
+				// 使用uni.pageScrollTo方法滚动到指定位置  
+				uni.pageScrollTo({
+					scrollTop: 99999, // 设置一个足够大的值，确保滚动到最底部  
+					duration: 300 // 滚动动画时长，单位ms  
+				});
 			},
-			getf5surprised() {
-				uni.showLoading({
-					title: "加载中",
-					mask: true,
+			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;
-						}
+					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 => {
@@ -283,6 +372,23 @@
 		padding: 20rpx;
 	}
 
+	.popupMain2 {
+		/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 {