kailin_mp/pages/activity/lottery.vue

<template>
  <view>
    <view class="lottery_box" :style="height">
      <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>
    </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>
            <view class="reward_state" v-if="!item.status" @click="openAddr(index)">{{ item.state }}</view>
          </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>
  </view>
</template>

<script>
export default {
  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,
      },
    };
  },
  onLoad(param) {
    // 接收参数
    this.requestParam.id = param.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;
    });
  },

  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: {
    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;
      }
      // 次数操作
      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;
        }
      });
    },
    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) {
      // 选择的下标
      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;
  height: 1100rpx;
  margin: 0 auto;
  position: relative;
  background: linear-gradient(to bottom, #fc335f 0%, #fb7224 80%, #ffffff 100%);
  .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;
    height: 240rpx;
    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;
      }
    }
  }
}
.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: #e03519;
    }
  }
}
</style>