抽奖活动

zxl

2025-10-24 8e6f68fd85fa1051d7f0a6460d22ea6e55962329

抽奖活动

 pages/ActivityPopup/ActivityPopup.vue

@@ -75,7 +75,7 @@
</template>

<script>
import {getPopupAcitivty} from '@/api/popup.js'
import {getPopupAcitivty,hideActivityPopupToday} from '@/api/popup.js'
export default {
  name: 'ActivityPopup',
  props: {
@@ -274,11 +274,20 @@
    
    // 关闭弹窗
    onClose() {
      console.log("点击关闭按钮")
      this.hideActivityPopupToday();
      this.$emit('close');
    },
    hideActivityPopupToday(){
      //弹窗关闭
      console.log("修改今日不显示弹窗")
      hideActivityPopupToday().then(res =>{
    
      })
    },
    // 点击遮罩层关闭
    onMaskClick() {
      console.log("点击遮罩层关闭")
      this.$emit('close');
    },
    

 pages/tabbar/index/home.vue

@@ -568,11 +568,6 @@
        });
    },
    methods: {
    hideActivityPopupToday(){
      //弹窗关闭
      hideActivityPopupToday().then(res =>{
      })
    },
        async openActivityPopup() {
            await getPopupAcitivty().then(res => {
                if (res.statusCode === 200) {
@@ -604,8 +599,6 @@


        onClosePopup() {
      //
      this.hideActivityPopupToday()
            this.hideActivityPopup()
        },
        replyClick(reply) {

 pages/tabbar/user/my.vue

@@ -18,19 +18,24 @@
      <u-icon style="display: flex;align-items: flex-start;" name="arrow-right"></u-icon>
    </view>
    <!-- <button  type="default" @click="goTOSuccess">立即查看</button> -->
    <view class="member-gradient-bg">	
     <view class="member-content">
          <view class="vip-icon">
            <image src="/static/tabbar/vip.png" mode="widthFix"></image>
    <view class="member-gradient-bg" v-if="prizeActivity.enableStatus === 'ON'">
    <view class="member-gradient-bg" @click="gotoPrizeActivity" >
      <view class="activity-content">
        <!-- 活动图标（使用接口返回的 activityCoverUrl） -->
        <view class="activity-icon">
          <image :src="prizeActivity.activityCoverUrl" mode="widthFix"></image>
          </view>
          <view class="vip-info">
            <p class="vip-level">绿满筐会员</p>
            <p class="vip-validity">长期有效</p>
        <!-- 活动信息（名称、描述、倒计时） -->
        <view class="activity-info">
          <p class="activity-name">{{ prizeActivity.activityName }}</p>
          <p class="activity-desc">{{ prizeActivity.activityDes }}</p>
          <p class="activity-desc">{{ formatDate(prizeActivity.beginTime) }} - {{ formatDate(prizeActivity.endTime)}}</p>
          </view>
	      
          <!-- 会员标识装饰 -->
          <view class="vip-badge">
            <text class="badge-text">尊享特权</text>
        <!-- 立即参与入口 -->
        <view class="activity-enter">
          <text class="enter-text">立即参与</text>
          <u-icon name="arrow-right"></u-icon>
        </view>
          </view>
        </view>
        
@@ -145,12 +150,15 @@
import configs from '@/config/config'
import storage from '@/utils/storage.js'
import { getSessionId, userAction } from "@/api/userAction.js";
import {getONPrizeActivity} from "@/api/prize-activity";

export default {
  components: {
    tool
  },
  data() {
    return {
      prizeActivity: {},
      endpoint: '',
      configs,
      userImage:configs.defaultUserPhoto,
@@ -227,6 +235,7 @@
    //   this.initCOS()
  // },
  onShow() {
    this.getONPrizeActivity();
      getSessionId().then(res=>{
        this.pageSessionNo = res.data.data
        this.actionParam.sessionId = res.data.data
@@ -259,6 +268,7 @@
  onPullDownRefresh() {
    this.getUserOrderNum();
    this.userInfo = this.$options.filters.isLogin();
    this.getONPrizeActivity(); // 下拉刷新同步最新活动状态
  },
  // #ifndef MP
  onNavigationBarButtonTap(e) {
@@ -271,6 +281,31 @@

  mounted() { },
  methods: {
    formatDate(isoTime) {
      if (!isoTime) return '';
      const date = new Date(isoTime);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}年${month}月${day}日`; // 转换为中文格式
    },
    getONPrizeActivity(){
      getONPrizeActivity().then(res =>{
        if(res.statusCode=== 200){
          //后端没查到开启的抽奖活动 res.data.data.id值为null
          this.prizeActivity = res.data.data; // 存储完整活动数据
          if (this.prizeActivity.endTime) {
          }else {
            this.prizeActivity = {}; // 无活动时清空
          }
        }
      })
    },
    gotoPrizeActivity(){
      uni.navigateTo({
        url:'/pages/prize/PrizeDetail/PrizeDetail?id=' + this.prizeActivity.id,
      });
    },
      // 解析URL参数
      parseUrlParams(url) {
          const params = {};
@@ -379,7 +414,95 @@
      &:active {
        transform: scale(0.98);
      }
  cursor: pointer; // 增加点击指针样式
  overflow: hidden; // 防止内容溢出
  .activity-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 40rpx;
    box-sizing: border-box;
}

  // 活动图标
  .activity-icon {
    width: 130rpx;
    height: 130rpx;
    margin-right: 24rpx;
    border-radius: 16rpx;
    overflow: hidden;
    background: rgba(255,255,255,0.2);
    image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  // 活动信息区域
  .activity-info {
    flex: 1;
    .activity-name {
      font-size: 32rpx;
      font-weight: bold;
      color: #fff;
      margin: 0 0 8rpx 0;
      text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
    }
    .activity-desc {
      font-size: 22rpx;
      color: rgba(255,255,255,0.9);
      margin: 0;
    }
  }

  // 倒计时样式
  .activity-countdown {
    display: flex;
    align-items: center;
    margin-top: 12rpx;
    .countdown-label {
      font-size: 20rpx;
      color: rgba(255,255,255,0.8);
      margin-right: 8rpx;
    }
    .countdown-box {
      display: flex;
      align-items: center;
    }
    .countdown-item {
      display: inline-block;
      width: 36rpx;
      height: 36rpx;
      line-height: 36rpx;
      background: rgba(255,255,255,0.3);
      border-radius: 8rpx;
      color: #fff;
      font-size: 20rpx;
      text-align: center;
      margin: 0 4rpx;
    }
    .countdown-sep {
      color: #fff;
      font-size: 22rpx;
      margin: 0 4rpx;
    }
  }

  // 立即参与入口
  .activity-enter {
    display: flex;
    align-items: center;
    .enter-text {
      font-size: 24rpx;
      color: #fff;
      margin-right: 8rpx;
      font-weight: 500;
    }
  }
}

/* 内容区域 */
.member-content {
  width: 100%;