YXGJ/store/lottery/modules/sudoku.vue

<template>
  <view class="box">
    <view class="lottery-box">
      <navigator class="my-list" url="/cloud/winningNews/index">
        我的奖品
      </navigator>
      <image
        class="bg-image"
        src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405281716860202553Be55ba55.webp"
      />
      <view class="lottery" v-if="prizes.length && showPrizes">
        <view>
          <LuckyGrid
            ref="myLucky"
            width="590rpx"
            height="590rpx"
            :prizes="prizes"
            :buttons="buttons"
            :defaultStyle="defaultStyle"
            @start="startCallBack"
            @end="endCallBack"
          />
        </view>
      </view>
      <view class="usable-count">
        您还有<text class="count">{{ usableCount }}</text
        >抽奖机会
      </view>
    </view>
    <view class="winners-list" v-if="winningList.length">
      <image
        class="image"
        src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405281716863577428B1faf5081.webp"
        mode="widthFix"
      />
      <view class="content">
        <view class="title">
          <view class="text"> 抽奖名单 </view>
        </view>
        <swiper
          class="swiper"
          autoplay
          easing-function="linear"
          interval="1000"
          duration="1000"
          circular
          vertical
          :display-multiple-items="7"
        >
          <swiper-item v-for="item in winningList" :key="item.sa_awardmxid">
            <view v-if="item.createuserid" class="swiper-item u-line-2">
              {{ item.name ? item.name : "用户" + item.createuserid }}
              <text style="padding: 0 5px">抽中了</text>{{ item.awardname }}
            </view>
            <view v-else></view>
          </swiper-item>
        </swiper>
      </view>
    </view>
  </view>
</template>

<script>
import LuckyGrid from "@/components/@lucky-canvas/uni/lucky-grid";
export default {
  components: { LuckyGrid },
  props: {
    detail: {
      type: Object,
    },
    sa_awardid: {
      type: [Number || String],
    },
    shareuserid: {
      type: [Number || String],
    },
  },
  data() {
    return {
      prizes: [],
      buttons: [
        {
          background: "rgba(0,0,0,0)",
          x: 1,
          y: 1,
          imgs: [
            {
              src: "https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405281716861339513B3a575413.webp",
              width: "183.34rpx",
              height: "183.34rpx",
            },
          ],
        },
      ],
      defaultStyle: {
        background: "#FFFFFF",
        width: "183.34rpx",
        height: "183.34rpx",
      },
      usableCount: 0,
      loading: false,
      winningList: [],
      tips: "",
      showPrizes: true,
    };
  },
  methods: {
    init() {
      console.log("this.sa_awardid", this.sa_awardid);
      try {
        this.$Http
          .basic({
            id: 20240514131402,
            content: {
              sa_awardid: this.sa_awardid,
              where: {
                condition: "",
                type: "",
              },
            },
          })
          .then((res) => {
            console.log("奖品列表", res);
            if (this.cutoff(res.msg)) return;
            let prizes = [
              { index: 0, x: 0, y: 0 },
              { index: 2, x: 2, y: 0 },
              { index: 6, x: 0, y: 2 },
              { index: 4, x: 2, y: 2 },
              { index: 1, x: 1, y: 0 },
              { index: 3, x: 2, y: 1 },
              { index: 5, x: 1, y: 2 },
              { index: 7, x: 0, y: 1 },
            ].map((v) => {
              v.borderRadius = "20rpx";
              v.imgs = [
                {
                  src: "https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405291716965428111B4602d616.webp",
                  width: "50%",
                  top: "20%",
                },
              ];
              return v;
            });
            res.data.forEach((v, i) => {
              v.imgs = v.attinfos.map((img) => {
                return {
                  src: img.url,
                  width: "50%",
                  top: "25%",
                };
              });
              prizes[i] = Object.assign(prizes[i], v);
            });
            this.prizes = prizes.sort((a, b) => {
              return a.index - b.index;
            });
          });
      } catch (error) {}
      this.queryAwardCount();
      this.getWinningList();
    },
    startCallBack() {
      let that = this;
      if (this.detail.begdate > this.formatTime())
        this.tips = `活动开始时间为“${this.detail.begdate}”敬请期待!`;
      if (this.detail.enddate < this.formatTime())
        this.tips = `活动已在“${this.detail.enddate}”结束!`;
      if (this.tips)
        return uni.showToast({
          title: this.tips,
          icon: "none",
          duration: 1500,
        });
      if (this.loading || this.usableCount == 0) return;
      this.loading = true;
      this.$refs.myLucky.play();
      that.$Http
        .basic({
          content: {
            sa_awardid: that.sa_awardid,
            shareuserid: that.shareuserid,
          },
          id: 20240514134002,
        })
        .then((res) => {
          console.log("抽奖结果", res);
          if (this.cutoff(res.msg)) {
            this.showPrizes = false;
            setTimeout(() => {
              this.showPrizes = true;
            });
            that.queryAwardCount();
            that.getWinningList();
            return;
          }
          const index = that.prizes.findIndex(
            (v) => v.sa_awarditemsid == res.data.sa_awarditemsid
          );
          that.$refs.myLucky.stop(index);
          that.queryAwardCount();
          setTimeout(() => {
            that.loading = false;
            that.showWinningResult(res.data, index);
          }, 5000);
        });
    },
    showWinningResult(data, index) {
      console.log("中奖结果", data);
      let that = this;
      that.getWinningList();
      uni.showModal({
        title: "恭喜您抽中",
        content: data.awardname,
        showCancel: false,
        confirmText: "选择地址",
        success: function ({ confirm }) {
          if (confirm) {
            uni.navigateTo({
              url: "/store/deliveryAddress/index?tips=奖项根据收货信息发放，请选择并提交收货地址",
            });
            that.$Http.selectAddress = (item) => {
              uni.showModal({
                title: "提示",
                content: `是否确定选择“${item.address}”作为收货地址?`,
                success: (success) => {
                  if (success.confirm)
                    that.$Http
                      .basic({
                        id: "2024052910464202",
                        content: {
                          sa_awardmxid: data.sa_awardmxid,
                          name: item.name,
                          phonenumber: item.phonenumber,
                          province: item.province,
                          city: item.city,
                          county: item.county,
                          address: item.address,
                        },
                      })
                      .then((s) => {
                        if (that.cutoff(s.msg, "设置成功", true, "1000"))
                          return;
                      });
                },
              });
            };
          }
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
    getWinningList() {
      this.$Http
        .basic({
          content: {
            sa_awardid: this.sa_awardid,
            pageNumber: 1,
            pageSize: 20,
          },
          id: 20240514133902,
        })
        .then((res) => {
          console.log("中奖人员", res);
          if (this.cutoff(res.msg)) return;
          if (res.data.length < 7) {
            let len = res.data.length;
            for (let index = 0; index < 7 - len; index++) {
              res.data.push({});
            }
          }
          this.winningList = res.data;
        });
    },
    queryAwardCount() {
      if (uni.getStorageSync("userMsg").usertype == 99) {
        this.$Http
          .basic({
            classname: "sysmanage.develop.datafunction.datafunction",
            method: "execute",
            content: {
              functionname: "queryAwardCount",
              parameter: {
                sa_awardid: this.sa_awardid,
              },
            },
          })
          .then((res) => {
            console.log("抽奖可用次数", res);
            if (this.cutoff(res.msg)) return;
            this.usableCount = res.data.length ? res.data[0].count : 0;
          });
      } else {
        this.tips = "内部人员不可参与抽奖";
      }
    },
    endCallBack(prize) {
      console.log("抽到的奖品", prize);
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(90deg, #fe5a46 0%, #f11f46 100%);

  .lottery-box {
    position: relative;
    width: 100vw;
    height: 511px;

    .my-list {
      position: absolute;
      top: 20px;
      left: 0;
      width: 86px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background: linear-gradient(
        180deg,
        #fad96d 0%,
        #ffc300 4%,
        #ffcd2b 16%,
        #ffdf77 42%,
        #ffd241 70%,
        #ffc300 94%,
        #fc9228 100%
      );
      border-radius: 0px 20px 20px 0px;
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-weight: bold;
      font-size: 14px;
      color: #c30d23;
      z-index: 2;
    }

    .bg-image {
      position: absolute;
      width: 100vw;
      height: 511px;
      top: 0;
      left: 0;
      z-index: 1;
      vertical-align: bottom;
    }

    .lottery {
      position: absolute;
      width: 100%;
      z-index: 2;
      top: 140px;
    }

    .usable-count {
      position: absolute;
      bottom: 15px;
      width: 100vw;
      text-align: center;
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-weight: bold;
      font-size: 14px;
      color: #ffffff;

      .count {
        height: 29px;
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: 800;
        font-size: 20px;
        color: #fad96d;
        padding: 0 10px;
      }
    }
  }

  .winners-list {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px;

    .image {
      width: 355px;
    }

    .title {
      position: relative;
      width: 80px;
      height: 29px;
      margin: 0 auto;

      .text {
        position: absolute;
        top: 0px;
        left: 0;
        width: 80px;
        line-height: 29px;
        text-align: center;
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: bold;
        font-size: 20px;
        color: #333333;
        z-index: 2;
      }
    }

    .title::after {
      content: "";
      position: absolute;
      bottom: 0px;
      left: 0;
      width: 80px;
      height: 8px;
      background: #fad96d;
      border-radius: 5px;
      z-index: 1;
    }

    .content {
      background: #fff;
      padding: 0 15px 20px;
      width: 669.7672675rpx;
      box-sizing: border-box;

      .swiper {
        width: 100%;
        height: 300px;
        margin-top: 20px;

        .swiper-item {
          width: 100%;
          height: 40px;
          text-align: center;
          line-height: 20px;
          font-family: Source Han Sans SC, Source Han Sans SC;
          font-size: 14px;
          color: #666666;
          overflow: hidden;
        }
      }
    }
  }
}
</style>