Browse Source

余额红包

钱新宇 2 months ago
parent
commit
f2c07316fc
2 changed files with 632 additions and 0 deletions
  1. 6 0
      pages.json
  2. 626 0
      pages/redPacket/active.vue

+ 6 - 0
pages.json

@@ -261,6 +261,12 @@
       "style": {
         "navigationBarTitleText": "课后测评"
       }
+    },
+    {
+      "path": "pages/redpacket/active",
+      "style": {
+        "navigationBarTitleText": "余额红包"
+      }
     }
   ],
   "globalStyle": {

+ 626 - 0
pages/redPacket/active.vue

@@ -0,0 +1,626 @@
+<template>
+  <view class="redpacket_active">
+    <view class="welcome" :style="pageIndex == 1 ? 'height:auto' : ''">
+      <!-- logo与跑马灯 -->
+      <view class="header">
+        <img :src="activeInfo.logo" class="logo" mode="widthFix" />
+        <view class="barrage-box">
+          <view class="text">{{ lottery_list?.length == 0 ? '还没有人中奖,快来参与吧!' : lottery_list }}</view>
+        </view>
+      </view>
+
+      <!-- 立即参与页面 -->
+      <view class="page-1" style="padding: 0 16rpx" v-if="pageIndex == 0">
+        <view class="activity-info">
+          <!-- <text class="title">{{ acticve_detail?.name }}</text> -->
+          <view class="active-rule">
+            <image class="rule-title" src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/redpacket/rule-title.png" />
+            <rich-text :nodes="activeInfo.rule" class="rich_text" style="font-size: 36rpx; font-weight: 300"></rich-text>
+          </view>
+        </view>
+        <view class="activity-btn" @click="_handleChangePage(1)">立即参与</view>
+      </view>
+    </view>
+    <view
+      class="active"
+      v-if="pageIndex == 1"
+      :style="
+        isGetReward
+          ? 'background-image:url(https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/redpacket/get-reward-background.png)'
+          : product_list.length == 0
+          ? 'background-image:url(https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/redpacket/no-product-background.png)'
+          : 'background-image:url(https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/redpacket/active-background.png)'
+      "
+    >
+      <view class="active-text" v-if="isGetReward">{{ rewardInfo?.money || 0 }}&nbsp;<text style="font-size: 36rpx">元</text></view>
+      <view class="active_btn" v-if="!isGetReward" :style="product_list.length == 0 ? 'top:285rpx' : 'top: 280rpx'" @click="get_reward"> </view>
+      <view class="active_rule_btn" @click="showRule">活动规则</view>
+      <view class="active_record_btn" @click="showRecord">领取记录</view>
+      <view class="left-number">领取机会剩余 {{ activeInfo.number }} 次</view>
+      <view class="active-product" v-if="product_list.length !== 0">
+        <image class="active-product-title" src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/redpacket/active-product-title" />
+        <!-- 产品列表 -->
+        <view class="product_list">
+          <!-- Vue3 项目部分小程序端事件延迟或调用失败 在执行事件的元素上添加 data-eventsync="true" 属性以解决此问题 -->
+          <view @click="toDetail(item)" data-eventsync="true" class="product_item" v-for="(item, index) in product_list" :key="index">
+            <image class="product_image" :src="item.product_thumb" mode="" />
+            <view class="product_name">
+              <text>{{ item.product_name }}</text></view
+            >
+            <view class="product_spec"
+              ><text>{{ item.sku_attr_names }}</text></view
+            >
+            <view class="stock_price">
+              <text>¥{{ item.price }} </text>
+              <view class="product_stock">剩{{ item.stock }}个</view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <!-- <view class="lottery_need_score">  </view> -->
+      <uni-popup ref="activeRule" type="center">
+        <view class="active_rule_box">
+          <view class="activity-info">
+            <!-- <text class="title">{{ acticve_detail?.name }}</text> -->
+            <view class="active-rule">
+              <image class="rule-title" src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/redpacket/rule-title.png" />
+              <rich-text :nodes="activeInfo.rule" class="rich_text" style="font-size: 36rpx; font-weight: 300"></rich-text>
+            </view>
+          </view>
+          <view class="close-btn" @click="closeRule"></view>
+        </view>
+      </uni-popup>
+      <uni-popup ref="rewardDialog" type="center">
+        <view class="active_rule_box">
+          <view class="activity-reward">
+            <view class="reward-text">{{ rewardInfo?.money || 0 }}&nbsp;<text style="font-size: 36rpx">元</text></view>
+            <view class="reward-btn" @click="closeReward"></view>
+          </view>
+          <view class="close-btn" @click="closeReward"></view>
+        </view>
+      </uni-popup>
+      <uni-popup ref="activeRecord" type="center">
+        <view class="active_rule_box">
+          <view class="lottery_record">
+            <view class="lottery_record_none" v-if="!recordList.length">这里还是空的哦~</view>
+            <scroll-view class="lottery_record_list" scroll-y="true">
+              <view class="lottery_record_item" v-for="(item, index) in recordList" :key="index">
+                <view class="reward_name">获得{{ item.money }}元</view>
+                <view class="reward_time">{{ item.insert_time }}</view>
+              </view>
+            </scroll-view>
+          </view>
+          <view class="close-btn" @click="closeRecord"></view>
+        </view>
+      </uni-popup>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      lottery_list: '',
+      // 抽奖信息
+      activeInfo: {
+        id: 0,
+        name: '',
+        logo: '',
+        number: '0',
+        start_date: '',
+        end_date: '',
+        start_time: '',
+        end_time: '',
+        rule: '',
+      },
+      // 请求参数
+      requestParam: {
+        id: 0,
+      },
+      pageIndex: 0,
+      product_list: [],
+      rewardInfo: {},
+      isGetReward: false, //记录本次是否领取
+      recordList: [],
+    };
+  },
+  onLoad(param) {
+    //未登陆提醒用户登陆
+    try {
+      // 接收参数
+      console.log(param, 'onload  param');
+
+      this.requestParam.id = param.id;
+      this.pageIndex = param.pageIndex || 0;
+      // 如果有scene参数的话,获取其中的ID
+      if (param.scene) {
+        // 转键值对参数
+        let scene = this.$http.strToParam(param.scene);
+        // 如果没有传入ID,但是传入了场景ID,获取场景ID
+        if (!param.id && scene.id) this.requestParam.id = scene.id;
+      }
+      // 窗口信息
+      var sysinfo = uni.getWindowInfo();
+      // 获取屏幕可用高度
+      this.height = 'height:' + sysinfo.windowHeight + 'px;';
+      // #ifdef MP-WEIXIN
+      //分享按钮
+      uni.showShareMenu({
+        withShareTicket: true,
+        menus: ['shareAppMessage', 'shareTimeline'],
+      });
+      // #endif
+    } catch (e) {
+      console.log(e);
+    }
+  },
+  onShareAppMessage(obj) {
+    // if (obj) {
+    //   this.shareRequest();
+    // }
+    return {
+      title: '999智控终端平台\n新人抽奖',
+      path: `/pages/redpacket/active?id=${this.requestParam.id}`,
+      imageUrl: 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/lottery/20250210-143021.jpg',
+      promise: new Promise((resolve, reject) => {
+        this.$http.request('api/share_message/get_item', { item_id: this.requestParam.id, pages: '/pages/redpacket/active' }).then((callback) => {
+          console.log(callback, 'api/share_message/get_item');
+          let obj = {
+            title: callback.data?.title == '' ? this.activeInfo.name : callback.data.title,
+            path: '/pages/redpacket/active?id=' + this.requestParam.id,
+            imageUrl: callback.data?.image_url == '' ? this.activeInfo.logo : callback.data.image_url,
+          };
+          resolve(obj);
+        });
+      }),
+    };
+  },
+  onShow() {
+    console.log(this.requestParam, 'onshow  requestParam');
+
+    if (!this.$checkAccess.checkLogin()) {
+      uni.showModal({
+        title: '温馨提示',
+        content: '请先登录',
+        confirmText: '去登录',
+        cancelText: '取消',
+        success: (res) => {
+          if (res.confirm) {
+            uni.redirectTo({
+              url: `/pages/login/index?redirect=/pages/redpacket/active&id=${this.requestParam.id}`,
+            });
+          }
+        },
+      });
+      return;
+    }
+    // 没有数据的话,或者请求中,不允许刷新
+    if (this.isReqing) return;
+    // 登录提示
+    // if (!this.$checkAccess.alterLogin()) return;
+    // 如果存在产品ID的话
+    if (this.requestParam?.id > 0) {
+      // 设置请求中
+      this.isReqing = true;
+      // 请求
+      this.$http.request('api/redpacket_active/get_detail', this.requestParam).then((re) => {
+        // 设置非请求中
+        this.isReqing = false;
+        // 成功结果
+        if (re.code == 'success') {
+          this.activeInfo = re.data;
+          this.prizeList = re.data.reward_list;
+
+          this.product_list = Object.values(re.data.product_list || {});
+
+          this._getRecordList();
+        } else {
+          if (re.code != 'no_login') {
+            uni.showModal({
+              content: re.msg,
+              showCancel: false,
+            });
+          }
+        }
+      });
+    } else {
+      uni.showModal({
+        content: '未知的活动ID',
+        showCancel: false,
+      });
+    }
+  },
+  methods: {
+    _getRecordList() {
+      this.$http.request('api/redpacket_active_record/get_list_all', { active_id: this.requestParam.id }).then((res) => {
+        if (res.code == 'success') {
+          if (res.data?.length > 0) {
+            let str = '';
+
+            res.data.forEach((item) => {
+              str += `用户${item.username}已获得${item.money}元;`;
+            });
+            this.lottery_list = str;
+          }
+        }
+      });
+    },
+    _handleChangePage(index) {
+      this.pageIndex = index;
+    },
+    showRule() {
+      this.$refs.activeRule.open('center');
+    },
+    closeRule() {
+      this.$refs.activeRule.close();
+    },
+    toDetail(item) {
+      uni.navigateTo({
+        url: '/pages/product/index?product_id=' + item.id,
+      });
+    },
+    get_reward() {
+      this.$http.request('api/redpacket_active/get_reward', { active_id: this.requestParam.id }).then((res) => {
+        if (res.code == 'success') {
+          this.rewardInfo = res.data.reward_list[res.data.reward_index];
+          this.showReward();
+        } else {
+          console.log(res.msg);
+          uni.showToast({
+            title: res.msg,
+            icon: 'none',
+          });
+        }
+      });
+    },
+    showReward() {
+      this.$refs.rewardDialog.open('center');
+    },
+    closeReward() {
+      this.isGetReward = true;
+      this.$refs.rewardDialog.close();
+    },
+    closeRecord() {
+      this.$refs.activeRecord.close();
+    },
+    showRecord() {
+      // 活动是否开始
+      // 请求列表
+      this.$http.request('/api/redpacket_active_record/get_list', { active_id: this.requestParam.id }).then((re) => {
+        // 设置非请求中
+        this.isReqing = false;
+        // 成功结果
+        if (re.code == 'success') {
+          this.recordList = re.data;
+        } else {
+          this.recordList = [];
+        }
+        this.$refs.activeRecord.open('center');
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.redpacket_active {
+  box-sizing: border-box;
+  position: relative;
+  height: 100vh;
+  .activity-info {
+    padding-top: 60rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+
+    .active-rule {
+      font-size: 30rpx;
+      line-height: 40rpx;
+      box-sizing: border-box;
+      margin-bottom: 75rpx;
+      width: 570rpx;
+      height: 464rpx;
+      overflow-y: auto;
+      padding: 24rpx 48rpx;
+      background-color: #fff5ca;
+      border-radius: 24rpx 24rpx 24rpx 24rpx;
+      .rule-title {
+        width: 411.5rpx;
+        height: 66rpx;
+        margin: 0 auto;
+        display: block;
+        margin-bottom: 32rpx;
+      }
+      .rich_text {
+        white-space: break-spaces;
+      }
+    }
+  }
+  .welcome {
+    width: 100vw;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background: #e63521;
+    .header {
+      .logo {
+        width: 100%;
+      }
+      .barrage-box {
+        padding: 10rpx;
+        width: 100%;
+        transform-origin: 65vw 75vw;
+        transform: rotate(0deg);
+        white-space: nowrap;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 3;
+        box-sizing: border-box;
+        background-color: #ff8b37;
+        opacity: 0.8;
+        overflow-x: hidden;
+        margin-top: -6rpx;
+      }
+
+      .text {
+        width: 200vw; //调整文字显示
+        font-size: 16px;
+        color: #333;
+        animation: aniMove 8s linear infinite;
+        animation-fill-mode: forwards;
+      }
+
+      /* 文字滚动 */
+      @keyframes aniMove {
+        0% {
+          transform: translateX(100%);
+        }
+        100% {
+          transform: translateX(-100%);
+        }
+      }
+    }
+
+    .page-1 {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      box-sizing: border-box;
+      height: 100%;
+
+      .activity-btn {
+        width: 368rpx;
+        height: 109rpx;
+        font-weight: bold;
+        font-size: 52rpx;
+        color: #e63521;
+        background-color: #ffe13f;
+        border-radius: 60rpx;
+        text-align: center;
+        line-height: 109rpx;
+      }
+    }
+  }
+  .active {
+    background-size: contain;
+    background-repeat: no-repeat;
+    width: 100vw;
+    min-height: 100vh;
+    position: relative;
+    background-color: #db1101;
+    padding: 0 32rpx;
+    box-sizing: border-box;
+    padding-top: 702rpx;
+    .left-number {
+      position: absolute;
+      width: 100%;
+      text-align: center;
+      top: 650rpx;
+      font-size: 24rpx;
+      color: #fff5ca;
+      left: 0;
+    }
+    .active_btn {
+      width: 130rpx;
+      height: 130rpx;
+      position: absolute;
+      background-image: url('https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/redpacket/get-btn.png');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      left: 310rpx;
+    }
+    .active-text {
+      font-size: 82rpx;
+      color: #c91810;
+      position: absolute;
+      top: 220rpx;
+      width: 100%;
+      text-align: center;
+      left: 0;
+    }
+    .active_rule_btn,
+    .active_record_btn {
+      width: 140rpx;
+      height: 60rpx;
+      background: #ffde9e;
+      color: #ff0000;
+      border-radius: 500rpx 0rpx 0rpx 500rpx;
+      position: absolute;
+      right: 0;
+      top: 20rpx;
+      z-index: inherit;
+      font-size: 26rpx;
+      text-align: center;
+      line-height: 60rpx;
+    }
+    .active_record_btn {
+      left: 0rpx;
+      border-radius: 0 500rpx 500rpx 0;
+    }
+    .active_rule_box {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      .activity-reward {
+        background-image: url('https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/redpacket/reward-dialog.png');
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        width: 671rpx;
+        height: 671rpx;
+        position: relative;
+        .reward-text {
+          font-size: 82rpx;
+          color: #c91810;
+          position: absolute;
+          top: 245rpx;
+          width: 100%;
+          text-align: center;
+        }
+        .reward-btn {
+          background-image: url('https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/redpacket/happy-get.png');
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+          width: 258rpx;
+          height: 98rpx;
+          position: absolute;
+          bottom: 127rpx;
+          left: 208rpx;
+        }
+      }
+    }
+    .active-product {
+      background-color: #fff5ca;
+      padding: 32rpx 24rpx;
+      border-radius: 24rpx 24rpx 24rpx 24rpx;
+      .active-product-title {
+        width: 412rpx;
+        height: 66rpx;
+        margin: 0 auto;
+        display: block;
+        box-sizing: border-box;
+      }
+      .product_list {
+        display: block;
+        overflow: hidden;
+        margin: 0rpx auto;
+        .product_item {
+          float: left;
+          width: 320rpx;
+          height: 520rpx;
+          display: block;
+          overflow: hidden;
+          margin: 20rpx 0rpx;
+          margin-right: 40rpx;
+          background-color: #ffffff;
+          border-radius: 20rpx;
+          .product_image {
+            width: 320rpx;
+            height: 320rpx;
+          }
+          .product_name {
+            height: 80rpx;
+            font-size: 30rpx;
+            line-height: 40rpx;
+            overflow: hidden;
+            margin: 10rpx 0rpx;
+            padding: 0rpx 10rpx;
+            text-overflow: ellipsis;
+            .regiment_title {
+              background-color: red;
+              color: #f9f9f9;
+            }
+          }
+          .product_spec {
+            height: 30rpx;
+            color: #999999;
+            font-size: 24rpx;
+            line-height: 30rpx;
+            padding: 0rpx 10rpx;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+          .stock_price {
+            color: #dddddd;
+            font-size: 20rpx;
+            overflow: hidden;
+            line-height: 30rpx;
+            padding: 0rpx 10rpx;
+            .product_price {
+              float: left;
+              color: red;
+              font-size: 30rpx;
+              line-height: 60rpx;
+              .product_market {
+                font-size: 24rpx;
+                color: #999999;
+                line-height: 30rpx;
+                vertical-align: top;
+                text-decoration: line-through;
+              }
+            }
+            .product_stock {
+              float: right;
+              font-size: 20rpx;
+              line-height: 60rpx;
+            }
+          }
+        }
+        .product_item:nth-child(even) {
+          margin-right: 0rpx;
+        }
+      }
+    }
+    .lottery_record {
+      background-image: url('https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/lottery/lettery_record.png');
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      width: 682rpx;
+      height: 456rpx;
+      margin: 0 auto;
+      overflow-y: auto;
+      padding: 56rpx 48rpx;
+      box-sizing: border-box;
+      .lottery_record_none {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #deb887;
+      }
+      .lottery_record_item {
+        width: 586rpx;
+        height: 93rpx;
+        border-radius: 0rpx 0rpx 0rpx 0rpx;
+        border-bottom: 1rpx solid #e3e3e3;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .reward_name {
+          color: #333;
+        }
+        .reward_time {
+          font-size: 24rpx;
+          color: #999999;
+        }
+      }
+    }
+  }
+  .close-btn {
+    background-image: url('https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/lottery/close_btn.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    width: 62rpx;
+    height: 62rpx;
+    margin-top: 32rpx;
+  }
+}
+</style>