flamingo-ui/es/square-nine/index.js

火烈鸟UI组件库

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import "./index-sfc.css";
import { toRefs, watch, onMounted, reactive, ref } from "vue";
const __vue_sfc__ = {
  name: "SquareNine",
  props: {
    prizeList: {
      type: [Object, Array],
      default: () => {
        return [];
      }
    },
    prizeId: {
      type: Number,
      default: 5
    },
    cardImg: {
      type: String,
      default: ""
    }
  },
  emits: ["click", "start", "end"],
  setup(props, { emit, slots }) {
    const state = reactive({
      gridList: [],
      // 数据list
      oldGridList: [],
      // 初始数据list
      activeState: true,
      // 是否可以翻转
      currIndex: 10,
      drawTitle: "\u5F00\u59CB\u62BD\u5956",
      drawDesc: "\u8BF7\u7FFB\u724C",
      isBeginClick: false,
      //开始游戏是否进行了点击
      arrPos: [],
      // 每个方块对应下标记录
      isDraw: true,
      // 是否是抽奖状态
      isStartDraw: false
      // 是否可以翻开卡牌
    });
    const prizeId = ref(props.prizeId);
    watch(
      () => props.prizeList,
      (value) => {
        resResponse(value);
      }
    );
    watch(
      () => props.prizeId,
      (value) => {
        prizeId.value = value;
      }
    );
    const isHaveSlots = (name) => {
      return slots[name];
    };
    const resResponse = (sudoku_goodsG) => {
      if (!(JSON.stringify(sudoku_goodsG[4]) == "{}")) {
        sudoku_goodsG.splice(4, 0, {});
      }
      state.gridList = sudoku_goodsG;
    };
    const prizeData = () => {
      setTimeout(() => {
        [...state.oldGridList] = state.gridList;
        let data = state.gridList.find((item) => {
          return item.id == prizeId.value;
        });
        for (let i = 0; i < state.gridList.length; i++) {
          if (i == 4) {
            state.gridList[i] = {};
          } else {
            state.gridList[i] = data;
          }
        }
      });
    };
    const changeData = (index) => {
      var defaultIndex = null;
      for (var i in state.oldGridList) {
        if (state.oldGridList[i]["id"] == state.gridList[index]["id"]) {
          defaultIndex = i;
        }
      }
      state.oldGridList[index] = state.oldGridList.splice(
        defaultIndex,
        1,
        state.oldGridList[index]
      )[0];
      [...state.gridList] = state.oldGridList;
    };
    const startFlop = (index) => {
      state.currIndex = index;
      emit("click");
      prizeData();
      setTimeout(() => {
        emit("end");
        changeData(index);
        state.activeState = true;
        state.isDraw = true;
        state.drawTitle = "\u5F00\u59CB\u62BD\u5956";
        state.drawDesc = "\u8BF7\u7FFB\u724C";
      }, 1500);
    };
    const startDraw = () => {
      if (state.isBeginClick || !state.isDraw)
        return;
      emit("start");
      if (state.oldGridList.length > 0) {
        [...state.gridList] = state.oldGridList;
      }
      state.isBeginClick = true;
      state.isStartDraw = false;
      state.currIndex = 10;
      state.drawTitle = "\u8BF7\u7FFB\u724C";
      state.drawDesc = "";
      state.activeState = !state.activeState;
      let timer = setTimeout(() => {
        clearTimeout(timer);
        shuffle(110);
        timer = setTimeout(() => {
          clearTimeout(timer);
          shuffle(0);
        }, 1500);
      }, 1e3);
      setTimeout(() => {
        state.isStartDraw = true;
        state.isDraw = false;
        state.isBeginClick = false;
      }, 3900);
    };
    const reverse = () => {
      var randomsort = function() {
        return Math.random() > 0.5 ? -1 : 1;
      };
      state.gridList.splice(4, 1);
      state.gridList.sort(randomsort);
      state.gridList.splice(4, 0, {});
      resetData();
    };
    const shuffle = (pos) => {
      state.arrPos = [];
      reverse();
      state.gridList.map((item, index) => {
        const x = pos * (1 - item.twoArry.x);
        const y = pos * (1 - item.twoArry.y);
        state.arrPos.push({ x, y });
      });
      const itemPos = document.querySelectorAll(".nine-ninegrid__item");
      itemPos.forEach((item, index) => {
        setTimeout(() => {
          item.style.transform = "translate(" + state.arrPos[index].x + "px," + state.arrPos[index].y + "px)";
        }, 150 * index);
      });
    };
    const resetData = () => {
      const lineTotal = 3;
      state.gridList.map((item, index) => {
        let x = index % lineTotal;
        let y = parseInt(index / lineTotal);
        item.twoArry = { x, y };
      });
    };
    onMounted(() => {
      resResponse(props.prizeList);
    });
    return __spreadProps(__spreadValues({}, toRefs(state)), {
      resResponse,
      isHaveSlots,
      resetData,
      prizeId,
      startFlop,
      startDraw
    });
  }
};
import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, renderSlot as _renderSlot, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from "vue";
const _hoisted_1 = { class: "fmg-square-nine" };
const _hoisted_2 = ["onClick"];
const _hoisted_3 = ["src"];
const _hoisted_4 = { class: "back" };
const _hoisted_5 = { class: "prize__container" };
const _hoisted_6 = ["src"];
function __vue_render__(_ctx, _cache) {
  return _openBlock(), _createElementBlock("div", _hoisted_1, [
    (_openBlock(true), _createElementBlock(
      _Fragment,
      null,
      _renderList(_ctx.gridList, (item, index) => {
        return _openBlock(), _createElementBlock(
          "div",
          {
            class: _normalizeClass(["nine-ninegrid__item", [{ active: _ctx.activeState || index != 4 && index == _ctx.currIndex }]]),
            key: index
          },
          [
            index == 4 && _ctx.isHaveSlots("startBtn") ? _renderSlot(_ctx.$slots, "startBtn", { key: 0 }) : _createCommentVNode("v-if", true),
            index == 4 && !_ctx.isHaveSlots("startBtn") ? (_openBlock(), _createElementBlock("div", {
              key: 1,
              class: "nine-ninegrid__item__center",
              onClick: _cache[0] || (_cache[0] = ($event) => _ctx.startDraw())
            }, [
              _createElementVNode(
                "span",
                null,
                _toDisplayString(_ctx.drawTitle),
                1
                /* TEXT */
              ),
              _createElementVNode(
                "p",
                null,
                _toDisplayString(_ctx.drawDesc),
                1
                /* TEXT */
              )
            ])) : _createCommentVNode("v-if", true),
            index != 4 ? (_openBlock(), _createElementBlock(
              _Fragment,
              { key: 2 },
              [
                _createElementVNode("div", {
                  class: "front",
                  onClick: ($event) => _ctx.isStartDraw ? _ctx.startFlop(index) : ""
                }, [
                  _createElementVNode("img", { src: _ctx.cardImg }, null, 8, _hoisted_3)
                ], 8, _hoisted_2),
                _createElementVNode("div", _hoisted_4, [
                  _createElementVNode(
                    "p",
                    null,
                    _toDisplayString(item.name || ""),
                    1
                    /* TEXT */
                  ),
                  _createElementVNode("div", _hoisted_5, [
                    item.pictureUrl ? (_openBlock(), _createElementBlock("img", {
                      key: 0,
                      src: item.pictureUrl
                    }, null, 8, _hoisted_6)) : _createCommentVNode("v-if", true)
                  ])
                ])
              ],
              64
              /* STABLE_FRAGMENT */
            )) : _createCommentVNode("v-if", true)
          ],
          2
          /* CLASS */
        );
      }),
      128
      /* KEYED_FRAGMENT */
    ))
  ]);
}
__vue_sfc__.render = __vue_render__;
var stdin_default = __vue_sfc__;
export {
  stdin_default as default
};