|
|
@@ -0,0 +1,277 @@
|
|
|
+<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>
|
zhengkaixin
