JP-ChargeTeam51/pages/temporary/activity20250501.vue

<template>
	<view>

		<ujp-navbar title="充值送折扣卡" :isBack="!(source==1)" ></ujp-navbar>

		<view class="back1">
			<view class="blur-overlay">
				<view class="back2">

				</view>
			</view>
		</view>
		<view class="page">
			<view class="body1 body">
				<view class="activityList">
					<view class="activity"  v-for="(item,i) in moneyList" :key="i" >
						<view class="view1">
							充{{item.amountDesc}}
						</view>
						<view class="view2">
							送
						</view>
						<view class="view3">
							<view class="view31">


								<view class="view312">
									{{item.numz}}折
								</view>
								<view class="view311">
									半年卡
								</view>
								<view class="view311">
									{{item.text}}
								</view>
							</view>

							<view class="view33">
								有效期180天
							</view>
						</view>
					</view>


				</view>
				<view class="bottom" @click="gotoUrl('pages/user/finance/recharge',1)" >
					前往充值
				</view>
			</view>
		</view>
		<view class="body2 body">
			<view class="title">活动内容：</view>
			<view class="textlist">
				<table>
					<tr class="tr1">
						<td>充值金额</td>
						<td>奖励</td>
						<td class="jz">有效期</td>
					</tr>
					<tr v-for="(item,i) in moneyList" :key="i">
						<td >{{item.amountDesc}}</td>
						<td>{{item.amountRemark}}</td>
						<td class="jz">180天</td>
					</tr>
				

				</table>
			</view>

			<view class="title">活动时间：</view>
			<view class="textlist">
				2025年5月1日至2025年6月30日
			</view>
			<view class="title">活动说明：</view>
			<view class="textlist">
				<p>1、本次充值活动所充金额仅用于支付本平台充电费用（包含电费和服务费），不可转赠、提现、退款。</p>
					<p>2、本服务费折扣卡仅适用于服务费打折，不适用于电费。</p>
					<p>3、本服务费折扣卡有效期为180天，从充值之后自动激活。</p>
					<p>4、本服务费折扣卡不限充电次数和充电度数，有效期内均可享受对应优惠。</p>
					<p>5、本服务费折扣卡不能与平台的“服务费6折卡”和“服务费包月卡”叠加使用。</p>
					<p>6、本服务费折扣卡为一车一卡，不转赠、转借，如有发现上述行为，平台有权对折扣卡关停，并保留进一步追究负责的权利。</p>
					<p>7、充值金额和折扣卡适用于所有优电联盟充电站点。
					<p>8、本次活动最终解释权归湖北鹏育优电新能源科技有限公司所有。</p>
			</view>
		</view>




	</view>
</template>

<script>
	import * as API from '@/apis/finance.js'
	export default {
		data() {
			return {
				source: 1, //活动来源 1公众号 ，2充电开始 ，3充电结束- 99系统内
				activityNo: "1", //活动编号
				moneyList: [],
			};
		},
		onLoad(op) {
			if(op.source){
				this.source = op.source;
			}
			if(this.source!=99){
				this.saveSource()
			}
			
			this.init();
		},
		onReady() {

		},
		methods: {
			saveSource() {
			
				
				var data = {
					activityNo: this.activityNo,
					source:this.source
				};
			
			
				API.saveSource(data).then((res) => {
			
					
				
			
				}).catch(error => {
					uni.showToast({
			
						title: error
					})
				})
			},
			init() {

				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var data = {
					type: 2
				};


				API.marketingData(data).then((res) => {

					
					var list= res.data.chargingMarketingList
					for(var i in list){
						var item=list[i]
						if(item.amountRemark){
							item.numz=item.amountRemark.substring(1,item.amountRemark.indexOf('折'))
							if(item.amountRemark.indexOf('、')!=-1){
								item.text=item.amountRemark.substring(item.amountRemark.indexOf('、')+1)
							}else{
								item.text=""
							}
							
							
							this.moneyList.push(item)
						}
						
					}
					uni.hideLoading()

				}).catch(error => {
					uni.showToast({

						title: error
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	table {
		border-collapse: collapse;
		width: 100%;
	}

	table,
	th,
	td {
		border: 1px solid #ccc;
	}
	td{
		padding: 4rpx 0 4rpx 12rpx;
	}
	tr:nth-child(odd) {
		background-color: #f2f2f2;
	}
	.tr1{
		font-weight: bold;
	}

	page {
		background: #47A2B4;
		padding-bottom: 32rpx;
	}
	.jz{
		text-align: center;
	}
	.page {
		z-index: 99;
		position: relative;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(3, 164, 183, 1) 100%);

	}

	.body {
		margin: 24rpx;
		border-radius: 20px;
		background-color: rgba(255, 255, 255, 1);
	}

	.body2 {
		padding: 32rpx;
		
		.title {
			color: rgba(16, 16, 16, 1);
			font-size: 32rpx;
			margin-bottom: 16rpx;
			font-weight: bold;
		}

		.textlist {
			
			color: rgba(51, 51, 51, 1);

			font-size: 28rpx;
			margin-bottom: 40rpx;
			p{
				margin-bottom: 16rpx;
			}
		}
	}

	.body1 {
		padding: 24rpx 16rpx;

		.activityList {
			display: flex;
			justify-content: space-around;

			color: rgba(255, 255, 255, 1);

			.activity {
				display: flex;
				flex-direction: column;
				align-items: center;
				border-radius: 12px;
				background: linear-gradient(180deg, rgba(233, 236, 245, 1) 0%, rgba(255, 255, 255, 1) 100%);

				.view1 {
					margin-top: 16rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;
					width: 140rpx;
					height: 56rpx;
					line-height: 40rpx;
					font-weight: bold;
					border-radius: 16rpx;

					background: linear-gradient(180deg, rgba(31,85,255,1) 0%,rgba(39,171,255,1) 100%);
				}

				.view2 {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					font-weight: bold;
					padding: 16rpx 0;
				}

				.view3 {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					width: 160rpx;
					height: 160rpx;
					background: url(@/assets/img/20250501/index3.png) ;
					
					background-size: cover;
					    background-size: 100%;

					.view31 {
						padding-top:8rpx;
						text-align: center;
						font-size: 24rpx;
						font-weight: bold;
						.view311 {
							
							color: rgba(51, 51, 51, 1);
							
						}

						.view312 {
							color: #FF3D00;
							
							text-align: center;
						}
					}

					.view33 {
						color: rgba(255, 255, 255, 1);
						font-size: 24rpx;
						padding-bottom: 16rpx;
					}
				}
			}
		}

		.bottom {
			width: 458rpx;
			height: 88rpx;
			background: url(@/assets/img/20250501/index4.png) 100% 100% round;
			    background-size: 100%;
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			color: rgba(255, 255, 255, 1);
			font-size: 40rpx;
			margin-top: 32rpx;
			font-weight: bold;
		}
	}

	.back1 {
		margin-bottom: -120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 750rpx;
		height: 552rpx;
		background: url(@/assets/img/20250501/index1.png) 100% 100% round;
		    background-size: 100%;
	}

	.blur-overlay {

		top: 0;
		left: 0;
		width: 750rpx;
		height: 552rpx;
		backdrop-filter: blur(5px);
		background-color: rgba(255, 255, 255, 0.2);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.back2 {
		margin-top: -80rpx;
		width: 600rpx;
		height: 372rpx;
		background: url(@/assets/img/20250501/index2.png) 100% 100% round;
		    background-size: 100%;
	}
</style>