feat:新人抽奖

pages.json

@@ -151,7 +151,7 @@
       }
     },
     {
-      "path": "pages/recruitment/lottery",
+      "path": "pages/recruitment/lottery_new",
       "style": {
         "navigationBarTitleText": "新人抽奖"
       }

pages/recruitment/lottery_new.vue

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