kailin_mp/pages/recruitment/lottery_new.vue

<template>
  <view class="lottery_new">
    <view class="welcome" v-if="pageIndex == 0">
      <!-- logo与跑马灯 -->
      <view class="header">
        <img :src="lotteryInfo.logo" class="logo" mode="widthFix" />
        <view class="barrage-box">
          <view class="text">{{ recordList.length == 0 ? '还没有人中奖，快来参与吧！' : '' }}</view>
        </view>
      </view>

      <!-- 立即参与页面 -->
      <view class="page-1" style="padding: 0 16rpx">
        <view class="activity-info">
          <!-- <text class="title">{{ acticve_detail?.name }}</text> -->
          <view class="active-rule">
            <rich-text :nodes="lotteryInfo.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="lottery" v-if="pageIndex == 1">
      <view class="lottery_box">
        <view class="lottery_rule_btn" @click="showRule">活动规则</view>
        <l-dialer
          :customStyle="'width: 500rpx;height: 500rpx;margin: 0rpx auto;'"
          @click="onClick"
          dial-style="color: rgba(60,48,158,0.7); padding: 32rpx;background-image: url(https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/lottery/lottery_bg.png)"
          :prizeList="prizeList"
          :turns="5"
          :duration="5"
          @done="onDone"
          ref="dialer"
          pointerStyle="display: none"
        />
        <view class="lottery_bottom">
          <view class="lottery_btn" @click="onClick"></view>
          <view class="lottery_number">可用次数：{{ lotteryInfo.number }}</view>
        </view>
        <!-- <view class="lottery_need_score">  </view> -->
        <view class="lottery_record_title"></view>
        <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.reward_name }}</view>
              <view class="reward_time">{{ item.insert_time }}</view>
            </view>
          </scroll-view>
        </view>
      </view>
      <uni-popup ref="lotteryRule" type="center">
        <view class="lottery_rule_box">
          <view class="active-rule">
            <rich-text :nodes="lotteryInfo.rule" class="rich_text" style="font-size: 36rpx; font-weight: 300"></rich-text>
          </view>
          <view class="close-btn" @click="closeRule"></view>
        </view>
      </uni-popup>
      <uni-popup ref="lotteryReward" type="center">
        <view class="lottery_reward_box">
          <view class="reward_box">
            <view :class="['reward_title', reward_info.id == 0 ? 'noGet' : 'get']">{{ reward_info.id == 0 ? '很遗憾' : '恭喜您' }}</view>
            <view>
              <view :class="['reward_image', reward_info.id == 0 ? 'noget' : reward_info.reward_type == 1 ? 'score' : 'redpacket']"></view>
              <view class="reward_name"> {{ reward_info.id == 0 ? '谢谢参与' : reward_info.name }}</view>
            </view>
            <view class="reward_btn" @click="closeReward">{{ reward_info.id == 0 ? '我知道了' : '开心收下' }}</view>
          </view>
          <view class="close-btn" @click="closeReward"></view>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pageIndex: 0,
      height: '',
      // 奖项列表，
      prizeList: [],
      // 中奖记录
      recordList: [],
      // 地址列表
      addrList: [],
      // 抽奖信息
      lotteryInfo: {
        id: 0,
        name: '',
        logo: '',
        number: '0',
        start_date: '',
        end_date: '',
        start_time: '',
        end_time: '',
        rule: '',
      },
      recordId: 0,
      // 请求参数
      requestParam: {
        id: 0,
        activity_id: 0,
      },
      reward_info: {
        id: 0,
      },
    };
  },
  onLoad(param) {
    //未登陆提醒用户登陆
    try {
      // 接收参数
      console.log(param, 'onload  param');

      this.requestParam.id = param.id;
      this.requestParam.activity_id = param.activity_id;
      // 如果有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;';
      // 监听地址变动
      uni.$on('addr_list_change', (data) => {
        // 地址列表
        this.addrList = data.list;
      });
      // #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/recruitment/lottery_new?id=${this.requestParam.id}&activity_id=${this.requestParam.activity_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.activity_id, pages: '/pages/recruitment/lottery_new' }).then((callback) => {
          console.log(callback, 'api/share_message/get_item');
          let obj = {
            title: callback.data?.title == '' ? this.lotteryInfo.name : callback.data.title,
            path: '/pages/recruitment/lottery_new?id=' + this.requestParam.id,
            imageUrl: callback.data?.image_url == '' ? this.lotteryInfo.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/recruitment/lottery_new&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/lottery_recruitment/get_detail', this.requestParam).then((re) => {
        // 设置非请求中
        this.isReqing = false;
        // 成功结果
        if (re.code == 'success') {
          this.lotteryInfo = re.data;
          this.prizeList = re.data.reward_list;
        } else {
          if (re.code != 'no_login') {
            uni.showModal({
              content: re.msg,
              showCancel: false,
            });
          }
        }
      });
      this.showRecord();
    } else {
      uni.showModal({
        content: '未知的活动ID',
        showCancel: false,
      });
    }
  },
  methods: {
    _handleChangePage(index) {
      this.pageIndex = index;
    },
    onDone(index) {
      this.reward_info = this.prizeList[index];
      this.$refs.lotteryReward.open('center');
      this.showRecord();
    },
    onClick() {
      // 活动是否开始
      if (!this.lotteryInfo.id) {
        uni.showToast({
          title: '暂无可参与活动',
          icon: 'none',
        });
        return;
      }
      // 活动是否开始
      if (this.lotteryInfo.start_time * 1000 > new Date().getTime()) {
        uni.showToast({
          title: '活动还没开始哦',
          icon: 'none',
        });
        return;
      }
      // 活动是否结束
      if (this.lotteryInfo.end_time * 1000 <= new Date().getTime()) {
        uni.showToast({
          title: '活动已结束了哦',
          icon: 'none',
        });
        return;
      }
      // 次数已用完了
      if (this.lotteryInfo.number <= 0) {
        uni.showToast({
          title: '次数已用完了',
          icon: 'none',
        });
        return;
      }
      if (!this.$checkAccess.getHasFollow()) {
        this.$refs.addFollow.open('center');
        return;
      }
      // 次数操作
      this.lotteryInfo.number = this.lotteryInfo.number - 1;
      // 请求列表
      this.$http.request('/api/lottery_recruitment/get_reward', { lottery_id: this.lotteryInfo.id }).then((re) => {
        // 设置非请求中
        this.isReqing = false;
        // 成功结果
        if (re.code == 'success') {
          // 奖品列表更新
          this.prizeList = re.data.reward_list;
          // 奖品的索引
          return this.$refs.dialer.run(re.data.reward_index);
        } else {
          uni.showToast({
            title: re.msg,
            icon: 'none',
          });
          return;
        }
      });
    },

    closePopup() {
      this.$refs.addFollow.close();
    },
    closeReward() {
      this.$refs.lotteryReward.close();
    },
    showRule() {
      this.$refs.lotteryRule.open('center');
    },
    closeRule() {
      this.$refs.lotteryRule.close();
    },
    showRecord() {
      // 活动是否开始
      // 请求列表
      this.$http.request('/api/lottery_recruitment_record/get_list', { lottery_id: this.requestParam.id }).then((re) => {
        // 设置非请求中
        this.isReqing = false;
        // 成功结果
        if (re.code == 'success') {
          this.recordList = re.data;
        } else {
          this.recordList = [];
        }
      });
    },
    openAddr(index) {
      // 选择的下标
      this.recordIndex = index;
      // 地址列表
      this.getAddrList(true);
    },
    // 选择地址
    checkedAddrItem(item) {
      // 判断数据
      this.$http.request('api/lottery_recruitment_record/set_addr', { id: this.recordList[this.recordIndex].id, addr_id: item.id }, 'post').then((callback) => {
        // 获取成功
        if (callback.code == 'success') {
          this.recordList[this.recordIndex].status = 1;
          this.recordList[this.recordIndex].state = '进行中';
        }
        this.$refs.addrPopup.close();
      });
    },
    getAddrList(showPopup = false) {
      // 判断数据
      this.$http.request('api/custom_addr/get_list').then((callback) => {
        // 获取成功
        if (callback.code == 'success') {
          this.addrList = callback.data;
          // 如果有的话
          if (this.addrList.length) {
            // 获取默认的
            for (let i in this.addrList) {
              // 如果是默认的
              if (this.addrList[i].is_default) this.checkedAddr = this.addrList[i];
            }
            // 如果没有默认的话
            if (!this.checkedAddr.id) {
              this.checkedAddr = this.addrList[this.addrList.length - 1];
            }
          }
          // 弹出地址层
          if (showPopup) this.$refs.addrPopup.open('bottom');
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.lottery_new {
  box-sizing: border-box;
  position: relative;
  height: 100vh;
  .welcome {
    width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: linear-gradient(to bottom, #fedc9f, #ff9861);
    .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;
      }

      .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-info {
        padding-top: 60rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        .title {
          font-size: 46rpx;
          font-weight: bold;
          color: #fff;
          text-align: center;
          margin-bottom: 40rpx;
        }
        .active-rule {
          display: block;
          font-size: 30rpx;
          line-height: 40rpx;
          box-sizing: border-box;
          margin-bottom: 32rpx;
          width: 670rpx;
          height: 609rpx;
          overflow-y: auto;
          background-image: url('https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/lottery/rule.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          padding: 93rpx 48rpx;
          .rich_text {
            white-space: break-spaces;
          }
        }
      }
      .activity-btn {
        width: 368rpx;
        height: 108rpx;
        background-image: url('https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/lottery/join.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        // background: url('https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/lottery/join.png') no-repeat center 100% 100%;
      }
    }
  }
  .lottery {
    background-image: url('https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/lottery/lottery_background.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100vw;
    min-height: 100vh;
    padding-top: 405rpx;
    .lottery_box {
      display: block;
      width: 750rpx;
      margin: 0 auto;
      position: relative;
      .lottery_bottom {
        background-image: url('https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/lottery/lottery_bottom.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 512rpx;
        height: 220rpx;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 80rpx;
        box-sizing: border-box;
        .lottery_number {
          color: #fff;
          font-size: 22rpx;
          margin-top: 10rpx;
        }
        .lottery_btn {
          width: 285rpx;
          height: 78rpx;
          background-image: url('https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/lottery/lottery_btn.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }
      .lottery_rule_btn {
        width: 140rpx;
        height: 42rpx;
        background: #fef7db;
        color: #ff7f00;
        border-radius: 500rpx 0rpx 0rpx 500rpx;
        position: absolute;
        right: 0;
        top: 0;
        z-index: inherit;
        font-size: 24rpx;
        text-align: center;
        line-height: 42rpx;
      }
      //   .lottery_need_score {
      //     width: 453rpx;
      //     height: 35rpx;
      //     background: #d4430e;
      //     border-radius: 0rpx 0rpx 0rpx 0rpx;
      //     font-size: 24rpx;
      //     color: #fff;
      //     border-radius: 20rpx;
      //     text-align: center;
      //     margin: 20rpx auto 0;
      //     opacity: 0.5;
      //   }
      .lottery_record_title {
        background-image: url('https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/lottery/lottery_record_title.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 516rpx;
        height: 61rpx;
        margin: 60rpx auto 24rpx;
      }
      .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;
          }
        }
      }
    }
  }
  .lottery_rule_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .active-rule {
      display: block;
      font-size: 30rpx;
      line-height: 40rpx;
      box-sizing: border-box;
      margin-bottom: 32rpx;
      width: 670rpx;
      height: 609rpx;
      overflow-y: auto;
      background-image: url('https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/lottery/rule.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 93rpx 48rpx;
      .rich_text {
        white-space: break-spaces;
      }
    }
  }
  .lottery_reward_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .reward_box {
      width: 548rpx;
      height: 658rpx;
      border-radius: 20rpx;
      background: linear-gradient(to bottom, #fedc9f, #ff9861);
      padding: 40rpx 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      .reward_title {
        font-size: 68rpx;
        font-weight: 400;
        &.get {
          color: #ff0000;
        }
        &.noGet {
          color: #fe7b2b;
        }
      }
      .reward_btn {
        width: 272rpx;
        height: 77rpx;
        color: #fff;
        text-align: center;
        line-height: 77rpx;
        background: linear-gradient(180deg, #ff211a 0%, #ffb883 100%);
        box-shadow: inset 0rpx -2rpx 1rpx 0rpx #fff6b6, inset 0rpx 4rpx 6rpx 0rpx rgba(255, 255, 255, 0.6);
        border-radius: 50rpx 50rpx 50rpx 50rpx;
      }
      .reward_image {
        width: 208rpx;
        height: 208rpx;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        &.noget {
          background-image: url('https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/lottery/noget.png');
        }
        &.score {
          background-image: url('https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/lottery/score.png');
        }
        &.redpacket {
          background-image: url('https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/lottery/redpacket.png');
        }
      }
      .reward_name {
        color: #333;
        text-align: center;
      }
    }
  }
  .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>