kailin_mp/pages/activity/lottery.vue

<template>
  <view>
    <view class="lottery_box">
      <view class="lottery_time" v-if="lotteryInfo.id">活动时间：{{ lotteryInfo.start_date }} ~ {{ lotteryInfo.end_date }}</view>
      <view class="lottery_info">
        <image class="lottery_logo" v-if="lotteryInfo.logo" :src="lotteryInfo.logo" mode="widthFix"></image>
        <button class="lottery_rule_btn" @click="showRule">活动规则</button>
      </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://mall.findit.ltd/uploads/images/default/lottery_bg.png)"
        :prizeList="prizeList"
        :turns="5"
        :duration="5"
        @done="onDone"
        ref="dialer"
      />
      <view class="record_box">
        <view class="score_info">
          <view class="custom_score">可用次数：{{ lotteryInfo.number }}</view>
          <view class="need_score" v-if="!lotteryInfo.id">暂无可参与的活动</view>
        </view>
        <button class="lottery_record" @click="showRecord" v-if="lotteryInfo.id">
          <image class="lottery_record_img" src="https://mall.findit.ltd/uploads/images/default/lottery_record.png" mode=""></image>
          <text class="lottery_record_text">中奖记录</text>
        </button>
      </view>
      <button open-type="share" class="share-btn">分享好友再答一次题</button>
    </view>
    <uni-popup ref="lotteryRule" type="center">
      <view class="lottery_rule_box">
        <view class="lottery_rule_title">
          <text>活动规则</text>
          <view class="close_btn" @click="closeRule"> X </view>
        </view>
        <scroll-view class="lottery_rule_info" scroll-y="true">
          <rich-text :nodes="lotteryInfo.rule" class="rich_text"></rich-text>
        </scroll-view>
      </view>
    </uni-popup>
    <uni-popup ref="lotteryRecord" type="bottom">
      <view class="lottery_record_box">
        <view class="lottery_record_title">
          <text>我的奖品</text>
          <view class="close_btn" @click="closeRecord"> X </view>
        </view>
        <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_time">{{ item.insert_time }}</view>
            <view class="reward_name">{{ item.reward_name }}</view>
            <view class="reward_state" v-if="item.status">{{ item.state }}</view>
            <button class="reward_state" v-if="!item.status" @click="openAddr(index)">{{ item.state }}</button>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
    <uni-popup ref="addrPopup" type="bottom" class="popup" background-color="#FFFFFF">
      <view class="popup_title">收货地址 <navigator url="/pages/addr/index?notify=addr" class="to_addr_page">管理</navigator> </view>
      <view class="addr_list">
        <view class="addr_item" v-for="(item, index) in addrList" :key="index" @click="checkedAddrItem(item)">
          <view class="radio_label">
            <image
              class="radio_icon"
              :src="item.id == checkedAddr?.id ? 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/radioed.png' : 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/radio.png'"
            ></image>
          </view>
          <view class="contact_user">
            <text class="contact_name">{{ item.contact_name }}</text>
            <text class="contact_phone">{{ item.contact_phone }}</text>
            <text class="contact_default" v-if="item.is_default">默认</text>
            <text class="contact_shop">{{ item.contact_shop }}</text>
          </view>
          <view class="contact_addr"> {{ item.contact_province }} {{ item.contact_city }} {{ item.contact_area }} {{ item.contact_addr }} </view>
        </view>
      </view>
      <view class="create_box">
        <navigator url="/pages/addr/index?notify=addr&type=create" class="create_addr">新建收货地址</navigator>
      </view>
    </uni-popup>
    <uni-popup ref="addFollow" type="center" class="center_popup">
      <FollowPopup
        :picUrl="'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/qrcode/qrcode.jpg'"
        :closePopup="closePopup"
        :showRule="false"
        :clickTitle="'点击二维码添加客服抽奖'"
        :longTapTitle="'长按二维码添加客服抽奖'"
      />
    </uni-popup>
  </view>
</template>

<script>
import FollowPopup from '@/components/FollowPopup/FollowPopup.vue';
export default {
  components: {
    FollowPopup,
  },
  data() {
    return {
      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,
      },
      checkedAddr: {},
    };
  },
  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
  },
  onShareAppMessage(obj) {
    if (obj) {
      this.shareRequest();
    }
    return {
      title: '999智控终端平台\n正月十五猜灯谜',
      path: '/pages/activity/index?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/activity/index' }).then((callback) => {
          console.log(callback, 'api/share_message/get_item');
          let obj = {
            title: callback.data?.title == '' ? this.lotteryInfo.name : callback.data.title,
            path: '/pages/activity/index?id=' + this.requestParam.activity_id,
            imageUrl: callback.data?.image_url == '' ? this.lotteryInfo.logo : callback.data.image_url,
          };
          resolve(obj);
        });
      }),
    };
  },
  onShow() {
    // 没有数据的话，或者请求中，不允许刷新
    if (this.isReqing) return;
    // 登录提示
    if (!this.$checkAccess.alterLogin()) return;
    // 如果存在产品ID的话
    if (this.requestParam.id > 0) {
      // 设置请求中
      this.isReqing = true;
      // 请求
      this.$http.request('api/lottery_riddle/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,
            });
          }
        }
      });
    } else {
      uni.showModal({
        content: '未知的活动ID',
        showCancel: false,
      });
    }
  },
  methods: {
    shareRequest() {
      this.$http.request('api/riddle_active_share/add', { active_id: this.requestParam.activity_id }).then((response) => {
        uni.showModal({
          title: '分享成功',
          confirmText: '立即答题',
          cancelText: '留在此页',
          success: (res) => {
            if (res.confirm) {
              uni.redirectTo({
                url: '/pages/activity/index?id=' + this.requestParam.activity_id,
              });
            }
          },
        });
      });
    },

    onDone(index) {
      // 奖项
      let prize = this.prizeList[index];
      // 结果
      uni.showModal({
        title: prize.id == 0 ? '很遗憾' : '恭喜您',
        content: (prize.id != 0 ? `获得` : '') + prize.name + (prize.reward_type == 5 ? '，请在中奖记录中填写收货地址' : ''),
        showCancel: false,
        success: (re) => {
          if (re.confirm && prize.reward_type == 5) {
            // 显示中奖列表
            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_riddle/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();
    },
    showRule() {
      this.$refs.lotteryRule.open('center');
    },
    closeRule() {
      this.$refs.lotteryRule.close();
    },
    showRecord() {
      // 活动是否开始
      if (this.lotteryInfo.id) {
        // 请求列表
        this.$http.request('/api/lottery_riddle_record/get_list', { lottery_id: this.lotteryInfo.id }).then((re) => {
          // 设置非请求中
          this.isReqing = false;
          // 成功结果
          if (re.code == 'success') {
            this.recordList = re.data;
          }
        });
      }
      this.$refs.lotteryRecord.open('bottom');
    },
    closeRecord() {
      this.$refs.lotteryRecord.close();
    },
    openAddr(index) {
      console.log(index, 'test');
      // 选择的下标
      this.recordIndex = index;
      // 地址列表
      this.getAddrList(true);
    },
    // 选择地址
    checkedAddrItem(item) {
      // 判断数据
      this.$http.request('api/lottery_riddle_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">
.lottery_box {
  display: block;
  width: 750rpx;
  margin: 0 auto;
  position: relative;
  background: linear-gradient(to bottom, #fc335f 0%, #fb7224 80%, #ffffff 100%);
  padding-bottom: 200rpx;
  .share-btn {
    width: 80%;
    height: 80rpx;
    background-color: #f0370e;
    color: #fff;
    border-radius: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16rpx;
    margin-top: 60rpx;
    box-sizing: border-box;
  }
  .lottery_time {
    top: 0rpx;
    left: 35rpx;
    z-index: 1;
    width: 700rpx;
    color: #ffffff;
    display: block;
    height: 40rpx;
    font-size: 24rpx;
    line-height: 40rpx;
    text-align: center;
    position: absolute;
    border-radius: 10rpx;
    background-color: rgba(0, 0, 0, 0.15);
  }
  .lottery_info {
    width: 750rpx;
    overflow: hidden;
    margin: 0rpx auto;
    position: relative;
    margin-bottom: 40rpx;
    .lottery_logo {
      float: left;
      width: 750rpx;
      height: 240rpx;
      display: block;
    }
    .lottery_rule_btn {
      top: 50%;
      right: 0rpx;
      width: 120rpx;
      height: 60rpx;
      color: #ffffff;
      overflow: hidden;
      font-size: 24rpx;
      text-align: center;
      line-height: 60rpx;
      position: absolute;
      padding: 0rpx 0rpx;
      border-top-left-radius: 30rpx;
      border-bottom-left-radius: 30rpx;
      border-top-right-radius: 0rpx;
      border-bottom-right-radius: 0rpx;
      background-color: rgba(0, 0, 0, 0.3);
    }
    .lottery_rule_btn::after {
      border: 0rpx solid transparent;
    }
  }
  .record_box {
    display: block;
    height: 120rpx;
    overflow: hidden;
    position: relative;
    margin-top: 40rpx;
    .score_info {
      display: block;
      overflow: auto;
      .custom_score {
        height: 60rpx;
        font-size: 28rpx;
        text-align: center;
        line-height: 60rpx;
      }
      .need_score {
        height: 60rpx;
        font-size: 32rpx;
        text-align: center;
        line-height: 60rpx;
      }
    }
    .lottery_record {
      top: 0rpx;
      right: 0rpx;
      width: 120rpx;
      height: 120rpx;
      overflow: hidden;
      text-align: center;
      position: absolute;
      padding: 0rpx 0rpx;
      background-color: transparent;
      .lottery_record_img {
        width: 60rpx;
        height: 60rpx;
        display: block;
        margin: 0rpx auto;
      }
      .lottery_record_text {
        color: #ffffff;
        display: block;
        height: 40rpx;
        width: 120rpx;
        font-size: 24rpx;
        line-height: 40rpx;
      }
    }
    .lottery_record::after {
      border: none;
    }
  }
}
.lottery_rule_box {
  width: 500rpx;
  display: block;
  overflow: hidden;
  background: #ffffff;
  font-size: 26rpx;
  margin: 0rpx auto;
  line-height: 50rpx;
  border-radius: 10rpx;
  padding: 0rpx 25rpx;
  padding-bottom: 20rpx;
  background-color: #fc335f;
  .lottery_rule_title {
    color: #ffffff;
    height: 60rpx;
    font-size: 32rpx;
    line-height: 60rpx;
    text-align: center;
    margin-bottom: 10rpx;
    .close_btn {
      float: right;
      width: 40rpx;
      height: 40rpx;
      font-size: 24rpx;
      margin-top: 9rpx;
      line-height: 40rpx;
      border-radius: 50%;
      border: 1rpx solid #ffffff;
    }
  }
  .lottery_rule_info {
    display: block;
    height: 500rpx;
    font-size: 24rpx;
    line-height: 40rpx;
    border-radius: 10rpx;
    padding: 20rpx 20rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    .rich_text {
      white-space: break-spaces;
    }
  }
}
.lottery_record_box {
  display: block;
  color: #deb887;
  height: 700rpx;
  padding: 10rpx 25rpx;
  background-color: #faebd7;
  .lottery_record_title {
    color: #000000;
    height: 80rpx;
    font-weight: bold;
    font-size: 32rpx;
    line-height: 80rpx;
    text-align: center;
    margin-bottom: 20rpx;
    .close_btn {
      float: right;
      width: 40rpx;
      height: 40rpx;
      color: #deb887;
      font-size: 24rpx;
      margin-top: 9rpx;
      line-height: 40rpx;
      border-radius: 50%;
      border: 2rpx solid #deb887;
    }
  }
  .lottery_record_none {
    display: block;
    height: 200rpx;
    color: #deb887;
    font-size: 26rpx;
    text-align: center;
    line-height: 200rpx;
  }
  .lottery_record_list {
    display: block;
    height: 500rpx;
    .lottery_record_item {
      height: 80rpx;
      display: block;
      font-size: 26rpx;
      overflow: hidden;
      line-height: 80rpx;
      .reward_time {
        float: left;
        width: 300rpx;
      }
      .reward_name {
        float: left;
        width: 200rpx;
      }
      .reward_state {
        float: right;
        color: #deb887;
        display: block;
        font-size: 26rpx;
        overflow: hidden;
        background: transparent;
      }
      .reward_state::after {
        border: none;
        background: transparent;
      }
    }
  }
}
.popup {
  overflow: hidden;
  .popup_title {
    display: block;
    overflow: hidden;
    margin: 0rpx auto;
    font-size: 36rpx;
    height: 120rpx;
    line-height: 120rpx;
    padding: 0rpx 20rpx;
    border-bottom: 10rpx solid #f8f8f8;
    .to_addr_page {
      float: right;
      color: #f59a23;
      display: block;
      height: 120rpx;
      line-height: 120rpx;
      font-size: 26rpx;
      padding: 0rpx 10rpx;
    }
  }
  .addr_list {
    width: 730rpx;
    display: block;
    overflow: hidden;
    margin: 0rpx auto;
    min-height: 500rpx;
    .addr_item {
      display: block;
      font-size: 24rpx;
      overflow: hidden;
      line-height: 40rpx;
      padding: 15rpx 10rpx;
      border-radius: 15rpx;
      border-bottom: 2rpx solid #dddddd;
      .radio_label {
        width: 40rpx;
        float: left;
        height: 50rpx;
        padding-top: 30rpx;
        margin-right: 20rpx;
        .radio_icon {
          float: left;
          width: 40rpx;
          height: 40rpx;
        }
      }
      .contact_user {
        float: left;
        width: 640rpx;
        display: block;
        height: 50rpx;
        font-size: 24rpx;
        line-height: 50rpx;
        .contact_name {
          font-size: 26rpx;
          font-weight: bold;
          margin-right: 16rpx;
        }
        .contact_default {
          color: #f59a23;
          font-size: 20rpx;
          margin-left: 16rpx;
          border: 1rpx solid #f59a23;
        }
        .contact_shop {
          float: right;
          font-size: 26rpx;
          margin-right: 16rpx;
        }
      }
      .contact_addr {
        float: left;
        width: 640rpx;
        display: block;
        font-size: 24rpx;
        line-height: 30rpx;
        padding: 10rpx 5rpx;
      }
    }
  }
  .create_box {
    height: 140rpx;
    display: block;
    .create_addr {
      width: 700rpx;
      height: 80rpx;
      display: block;
      color: #ffffff;
      font-size: 30rpx;
      overflow: hidden;
      line-height: 80rpx;
      padding: 0rpx 0rpx;
      text-align: center;
      margin: 0rpx auto;
      margin-top: 20rpx;
      border-radius: 40rpx;
      background-color: #f89c33;
    }
  }
}
</style>