flamingo-ui/es/marquee/index.js

火烈鸟UI组件库

import "./index-sfc.css";
const __vue_sfc__ = {
  name: "Marquee",
  props: {
    prizeList: {
      type: Array,
      default: () => []
    },
    nums: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      last_index: 0,
      //上一回滚动的位置
      max_number: 8,
      //轮盘全部数量
      speed: 300,
      //初始速度值, 速度值越大则越慢
      max_speed: 40,
      // 滚动的最大速度
      timer: "",
      //定时器
      minturns: 4,
      //最小圈数为2
      runs_now: 0,
      // 当前已跑步数
      amplification_index: -1,
      //轮盘的当前滚动位置
      finalIndex: null,
      rolled: false,
      // defaultIcon:require('@/assets/img/lottery_thanks.png'),
      key: {
        0: 0,
        1: 1,
        2: 2,
        3: 5,
        4: 8,
        5: 7,
        6: 6,
        7: 3
      }
    };
  },
  computed: {
    handlePrize() {
      let arr = [...this.prizeList];
      arr.splice(4, 0, { id: new Date().getTime() });
      return arr;
    }
  },
  methods: {
    starRoll(isBtn) {
      if (isBtn) {
        this.$emit("start", this.rolledStart);
      }
    },
    handleFinalIndex() {
      return parseInt(
        Object.keys(this.key).find((i) => {
          return this.key[i] == this.finalIndex;
        })
      );
    },
    rolledStart(finalIndex) {
      if (finalIndex == 4)
        return;
      if (finalIndex == null) {
        console.log("\u7F51\u7EDC\u51FA\u9519");
        return;
      }
      this.finalIndex = parseInt(finalIndex);
      this.rolled = true;
      this.runs_now = 0;
      this.amplification_index = -1;
      this.last_index = -1;
      this.rolling();
    },
    rolling() {
      this.timer = setTimeout(() => {
        this.rolling();
      }, this.speed);
      this.runs_now++;
      this.amplification_index++;
      var count_num = this.minturns * this.max_number + (1 + this.handleFinalIndex());
      if (this.runs_now <= count_num / 3 * 2) {
        this.speed -= 20;
        if (this.speed <= this.max_speed) {
          this.speed = this.max_speed;
        }
      } else if (this.runs_now >= count_num) {
        clearInterval(this.timer);
        this.last_index = this.amplification_index;
        setTimeout(() => {
          this.$emit("end");
        }, 500);
      } else if (count_num - this.runs_now <= 10) {
        this.speed += 20;
      } else {
        this.speed += 10;
        if (this.speed >= 100) {
          this.speed = 100;
        }
      }
      if (this.amplification_index >= this.max_number) {
        this.amplification_index = 0;
      }
    }
  }
};
import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, renderSlot as _renderSlot, createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass } from "vue";
const _hoisted_1 = { class: "fmg-marquee" };
const _hoisted_2 = ["onClick"];
const _hoisted_3 = /* @__PURE__ */ _createElementVNode(
  "img",
  {
    class: "lottery_text",
    alt: ""
  },
  null,
  -1
  /* HOISTED */
);
const _hoisted_4 = { class: "times" };
const _hoisted_5 = { class: "prize_img" };
const _hoisted_6 = ["src"];
function __vue_render__(_ctx, _cache) {
  return _openBlock(), _createElementBlock("div", _hoisted_1, [
    (_openBlock(true), _createElementBlock(
      _Fragment,
      null,
      _renderList(_ctx.handlePrize, (item, index) => {
        return _openBlock(), _createElementBlock("div", {
          key: index,
          class: "prize-item"
        }, [
          _ctx.$slots.prizeItem ? _renderSlot(_ctx.$slots, "prizeItem", { key: 0 }) : (_openBlock(), _createElementBlock("div", {
            key: 1,
            class: _normalizeClass(["block", { "block--btn": index == 4, "block--active": index == _ctx.key[_ctx.amplification_index] }]),
            onClick: ($event) => _ctx.starRoll(index == 4)
          }, [
            index == 4 ? (_openBlock(), _createElementBlock(
              _Fragment,
              { key: 0 },
              [
                _hoisted_3,
                _createElementVNode(
                  "div",
                  _hoisted_4,
                  "\u62BD\u5956\u6B21\u6570:" + _toDisplayString(_ctx.nums),
                  1
                  /* TEXT */
                )
              ],
              64
              /* STABLE_FRAGMENT */
            )) : (_openBlock(), _createElementBlock(
              _Fragment,
              { key: 1 },
              [
                _createElementVNode("div", _hoisted_5, [
                  _createElementVNode("img", {
                    src: item.pic_url,
                    alt: ""
                  }, null, 8, _hoisted_6)
                ]),
                _createElementVNode(
                  "p",
                  null,
                  _toDisplayString(item.name),
                  1
                  /* TEXT */
                )
              ],
              64
              /* STABLE_FRAGMENT */
            ))
          ], 10, _hoisted_2))
        ]);
      }),
      128
      /* KEYED_FRAGMENT */
    ))
  ]);
}
__vue_sfc__.render = __vue_render__;
__vue_sfc__._scopeId = "data-v-ab18a5d0";
var stdin_default = __vue_sfc__;
export {
  stdin_default as default
};