@nutui/nutui-bingo
Version:
nutui生态之一抽奖组件库
1,621 lines • 65.3 kB
JavaScript
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));
/*!
* @nutui/nutui-bingo v1.0.7 Wed Nov 09 2022 15:47:10 GMT+0800 (中国标准时间)
* (c) 2022 @jdf2e.
* Released under the MIT License.
*/
import { defineComponent, reactive, computed, ref, onMounted, watch, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, Fragment, renderList, toDisplayString, toRefs, renderSlot, createCommentVNode, nextTick, withDirectives, vShow, onUnmounted } from "vue";
function createComponent(name) {
const componentName2 = "nutbig-" + name;
return {
componentName: componentName2,
create: function(_component) {
_component.baseName = name;
_component.name = componentName2;
_component.install = (vue) => {
vue.component(_component.name, _component);
};
return defineComponent(_component);
},
createDemo: function(_component) {
_component.baseName = name;
_component.name = "demo-" + name;
return defineComponent(_component);
}
};
}
var index_vue_vue_type_style_index_0_lang$9 = "";
var _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const { componentName: componentName$9, create: create$b } = createComponent("turntable");
const _sfc_main$b = create$b({
props: {
width: {
required: true,
default: "300px"
},
height: {
required: true,
default: "300px"
},
prizeList: {
type: Array,
required: true,
default: () => []
},
prizeIndex: {
type: Number,
default: -1
},
turnsNumber: {
type: Number,
default: 5
},
styleOpt: {
default: () => {
return {
prizeBgColors: [
"rgb(255, 231, 149)",
"rgb(255, 247, 223)",
"rgb(255, 231, 149)",
"rgb(255, 247, 223)",
"rgb(255, 231, 149)",
"rgb(255, 247, 223)"
],
borderColor: "#ff9800"
};
}
},
turnsTime: {
default: 5
},
lockTime: {
default: 0
},
pointerStyle: {
default: () => {
return {
width: "80px",
height: "80px",
backgroundImage: 'url("https://img11.360buyimg.com/imagetools/jfs/t1/89512/11/15244/137408/5e6f15edEf57fa3ff/cb57747119b3bf89.png")',
backgroundSize: "contain",
backgroundRepeat: "no-repeat"
};
}
}
},
emits: ["click", "start-turns", "end-turns", "lock-turns"],
setup(props, { emit }) {
let { prizeList } = reactive(props);
const { styleOpt, turnsTime, pointerStyle, turnsNumber, lockTime } = reactive(props);
const classes = computed(() => {
const prefixCls = componentName$9;
return {
[prefixCls]: true
};
});
const lock = ref(false);
const rorating = ref(false);
const startRotateDegree = ref(0);
const rotateAngle = ref("0");
const rotateTransition = ref("");
const turntableDom = ref(null);
const canvasDom = ref(null);
const getRotateAngle = (index) => {
const angle = 360 / prizeList.length * index + 180 / prizeList.length;
return {
transform: `rotate(${angle}deg)`
};
};
const init = () => {
const data = styleOpt;
const prizeNum = prizeList.length;
const { prizeBgColors, borderColor } = data;
const canvas = canvasDom.value;
const luckdraw = turntableDom.value;
const ctx = canvas.getContext("2d");
const canvasW = canvas.width = luckdraw.clientWidth;
const canvasH = canvas.height = luckdraw.clientHeight;
ctx.translate(0, canvasH);
ctx.rotate(-90 * Math.PI / 180);
const outRadius = canvasW / 2 - 1;
const innerRadius = 0;
const baseAngle = Math.PI * 2 / prizeNum;
ctx.clearRect(0, 0, canvasW, canvasH);
ctx.strokeStyle = borderColor;
for (let index = 0; index < prizeNum; index++) {
const angle = index * baseAngle;
if (prizeList[index]["prizeColor"]) {
ctx.fillStyle = prizeList[index]["prizeColor"];
} else {
ctx.fillStyle = prizeBgColors[index];
}
ctx.beginPath();
ctx.arc(canvasW * 0.5, canvasH * 0.5, outRadius, angle, angle + baseAngle, false);
ctx.arc(canvasW * 0.5, canvasH * 0.5, innerRadius, angle + baseAngle, angle, true);
ctx.stroke();
ctx.fill();
ctx.save();
}
};
const canBeRotated = () => {
if (lock.value) {
if (!rorating.value) {
emit("lock-turns");
}
return false;
}
return true;
};
const changeLock = () => {
setTimeout(() => {
lock.value = false;
}, lockTime * 1e3);
};
const rotate = (index) => {
const turnsTimeNum = turnsTime;
const rotateAngleValue = startRotateDegree.value + turnsNumber * 360 + 360 - (180 / prizeList.length + 360 / prizeList.length * index) - startRotateDegree.value % 360;
startRotateDegree.value = rotateAngleValue;
rotateAngle.value = `rotate(${rotateAngleValue}deg)`;
rotateTransition.value = `transform ${turnsTimeNum}s cubic-bezier(0.250, 0.460, 0.455, 0.995)`;
setTimeout(() => {
emit("end-turns");
rorating.value = false;
changeLock();
}, turnsTimeNum * 1e3 + 500);
};
const startTurns = () => {
if (!canBeRotated()) {
return false;
}
emit("start-turns");
};
const rotateTurn = () => {
lock.value = true;
rorating.value = true;
setTimeout(() => {
rotate(props.prizeIndex);
}, 300);
};
onMounted(() => {
init();
});
watch(() => props.prizeList, (list) => {
prizeList = list;
init();
});
return {
classes,
turntableDom,
canvasDom,
getRotateAngle,
rotateAngle,
rotateTransition,
pointerStyle,
startTurns,
rotateTurn
};
}
});
const _hoisted_1$a = {
id: "canvas",
ref: "canvasDom"
};
const _hoisted_2$8 = { class: "prize" };
const _hoisted_3$6 = { class: "drawTable-name" };
const _hoisted_4$4 = { class: "drawTable-img" };
const _hoisted_5$2 = ["src"];
function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("view", {
class: normalizeClass(_ctx.classes),
ref: "turntableDom",
style: normalizeStyle({ width: _ctx.width, height: _ctx.height })
}, [
createElementVNode("view", {
class: "turntable",
style: normalizeStyle({ transform: _ctx.rotateAngle, transition: _ctx.rotateTransition })
}, [
createElementVNode("canvas", _hoisted_1$a, " \u6D4F\u89C8\u5668\u7248\u672C\u8FC7\u4F4E ", 512),
createElementVNode("view", _hoisted_2$8, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.prizeList, (item, index) => {
return openBlock(), createElementBlock("view", {
class: "item",
style: normalizeStyle(_ctx.getRotateAngle(index)),
key: item.id
}, [
createElementVNode("view", _hoisted_3$6, toDisplayString(item.prizeName), 1),
createElementVNode("view", _hoisted_4$4, [
createElementVNode("img", {
src: item.prizeImg
}, null, 8, _hoisted_5$2)
])
], 4);
}), 128))
])
], 4),
createElementVNode("view", {
class: "pointer",
style: normalizeStyle(_ctx.pointerStyle),
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.startTurns && _ctx.startTurns(...args))
}, null, 4)
], 6);
}
var TurnTable = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b]]);
var index_vue_vue_type_style_index_0_lang$8 = "";
const { componentName: componentName$8, create: create$a } = createComponent("marquee");
const _sfc_main$a = create$a({
props: {
styleOpt: {
default: () => {
return {
itemStyle: {},
startStyle: {},
bgStyle: {
background: "rgb(255, 231, 149)"
}
};
}
},
prizeList: {
type: Array,
required: true
},
prizeIndex: {
type: Number || String,
default: -1
},
speed: {
type: Number || String,
default: 150
},
circle: {
type: Number || String,
default: 30
}
},
emits: ["click", "start-turns", "end-turns"],
setup(props, { emit }) {
let { prizeList, styleOpt } = reactive(props);
const classes = computed(() => {
const prefixCls = componentName$8;
return {
[prefixCls]: true
};
});
onMounted(() => {
});
watch(() => props.prizeList, (list, prevList) => {
prizeList = list;
});
const marqueeDom = ref(null);
const lock = ref(false);
const index = ref(0);
const cellNumber = ref(0);
const velocity = ref(props.speed);
const cycle = ref(props.circle);
const timer = ref(null);
const bgContentStyle = styleOpt.bgStyle;
const bgItemStyle = styleOpt.itemStyle;
const cursorStyle = styleOpt.startStyle;
const rollMarquee = () => {
cellNumber.value += 1;
let idx = index.value;
const count = 8;
idx += 1;
if (idx > count - 1) {
idx = 0;
}
index.value = idx;
getPrize();
};
const getPrize = () => {
if (cellNumber.value > cycle.value && props.prizeIndex === index.value) {
clearTimeout(timer.value);
timer.value = 0;
cellNumber.value = 0;
velocity.value = props.speed;
cycle.value = props.circle;
setTimeout(() => {
index.value = props.prizeIndex;
emit("end-turns");
lock.value = false;
}, 500);
} else {
if (cellNumber.value < cycle.value) {
velocity.value -= 4;
} else {
velocity.value += 20;
}
timer.value = setTimeout(rollMarquee, velocity.value);
}
};
const startDraw = () => {
if (!lock.value) {
lock.value = true;
emit("start-turns");
rollMarquee();
}
};
return {
classes,
marqueeDom,
prizeList,
index,
lock,
startDraw,
bgContentStyle,
bgItemStyle,
cursorStyle
};
}
});
const _hoisted_1$9 = /* @__PURE__ */ createElementVNode("view", { class: "bgContent" }, null, -1);
const _hoisted_2$7 = { class: "gift-img" };
const _hoisted_3$5 = ["src"];
const _hoisted_4$3 = ["innerHTML"];
function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("view", {
class: normalizeClass(_ctx.classes),
ref: "marqueeDom"
}, [
_hoisted_1$9,
createElementVNode("view", {
class: "marqueeBg",
style: normalizeStyle(_ctx.bgContentStyle)
}, null, 4),
createElementVNode("view", {
class: normalizeClass(["start", { "disabledDraw": _ctx.lock }]),
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.startDraw && _ctx.startDraw(...args)),
style: normalizeStyle(_ctx.cursorStyle)
}, null, 6),
createElementVNode("ul", null, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.prizeList, (item, i) => {
return openBlock(), createElementBlock("li", {
key: "luckmarquee" + i,
class: normalizeClass(["gift-" + (i + 1), { "active": _ctx.index == i }]),
style: normalizeStyle(_ctx.bgItemStyle)
}, [
createElementVNode("div", _hoisted_2$7, [
createElementVNode("img", {
src: item.prizeImg
}, null, 8, _hoisted_3$5)
]),
createElementVNode("span", {
class: "desc",
innerHTML: item.prizeName
}, null, 8, _hoisted_4$3)
], 6);
}), 128))
])
], 2);
}
var Marquee = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]);
var index_vue_vue_type_style_index_0_lang$7 = "";
const { componentName: componentName$7, create: create$9 } = createComponent("squarenine");
const _sfc_main$9 = create$9({
props: {
prizeList: {
type: [Object, Array],
default: () => {
return [];
}
},
prizeId: {
type: Number,
default: 5
},
cardImg: {
type: String,
default: ""
}
},
emits: ["click", "start", "return"],
setup(props, { emit, slots }) {
const state = reactive({
gridList: [],
oldGridList: [],
activeState: true,
currIndex: 10,
drawTitle: "\u5F00\u59CB\u62BD\u5956",
drawDesc: "\u8BF7\u7FFB\u724C",
isBeginClick: false,
arrPos: [],
isDraw: true,
isStartDraw: false
});
const classes = computed(() => {
const prefixCls = componentName$7;
return {
[prefixCls]: true
};
});
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(() => {
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)
return;
emit("start");
if (state.oldGridList.length > 0) {
[...state.gridList] = state.oldGridList;
}
state.isBeginClick = true;
state.isStartDraw = false;
state.currIndex = 10;
state.drawTitle = "\u8FD4\u56DE";
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 returnDraw = () => {
emit("return");
state.drawTitle = "\u5F00\u59CB\u62BD\u5956";
state.drawDesc = "\u8BF7\u7FFB\u724C";
state.activeState = true;
state.isDraw = true;
};
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)), {
classes,
resResponse,
isHaveSlots,
resetData,
prizeId,
startFlop,
startDraw,
returnDraw
});
}
});
const _hoisted_1$8 = ["onClick"];
const _hoisted_2$6 = ["src"];
const _hoisted_3$4 = { class: "back" };
const _hoisted_4$2 = ["src"];
function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: normalizeClass(_ctx.classes)
}, [
(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("", true),
index == 4 && !_ctx.isHaveSlots("startBtn") ? (openBlock(), createElementBlock("div", {
key: 1,
class: "nine-ninegrid__item__center",
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.isDraw ? _ctx.startDraw() : _ctx.returnDraw())
}, [
createElementVNode("span", null, toDisplayString(_ctx.drawTitle), 1),
createElementVNode("p", null, toDisplayString(_ctx.drawDesc), 1)
])) : createCommentVNode("", 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_2$6)
], 8, _hoisted_1$8),
createElementVNode("div", _hoisted_3$4, [
createElementVNode("p", null, toDisplayString(item.name || ""), 1),
item.pictureUrl ? (openBlock(), createElementBlock("img", {
key: 0,
src: item.pictureUrl
}, null, 8, _hoisted_4$2)) : createCommentVNode("", true)
])
], 64)) : createCommentVNode("", true)
], 2);
}), 128))
], 2);
}
var SquareNine = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9]]);
function LuckyCard(settings, callback) {
this.cover = null;
this.ctx = null;
this.scratchDiv = settings.scratchDiv;
this.cardDiv = null;
this.cHeight = 0;
this.cWidth = 0;
this.supportTouch = false;
this.events = [];
this.startEventHandler = null;
this.moveEventHandler = null;
this.endEventHandler = null;
this.opt = {
coverColor: "#C5C5C5",
coverImg: "",
ratio: 0.8,
callback: null
};
this.init(settings, callback);
}
function _calcArea(ctx, callback, ratio) {
var pixels = ctx.getImageData(0, 0, this.cWidth, this.cHeight);
var transPixels = [];
_forEach(pixels.data, function(item, i) {
var pixel = pixels.data[i + 3];
if (pixel === 0) {
transPixels.push(pixel);
}
});
if (transPixels.length / pixels.data.length > ratio) {
callback && typeof callback === "function" && callback();
}
}
function _forEach(items, callback) {
return Array.prototype.forEach.call(items, function(item, idx) {
callback(item, idx);
});
}
function _isCanvasSupported() {
var elem = document.createElement("canvas");
return !!(elem.getContext && elem.getContext("2d"));
}
function _startEventHandler(event) {
event.preventDefault();
this.moveEventHandler = _moveEventHandler.bind(this);
this.cover.addEventListener(this.events[1], this.moveEventHandler, false);
this.endEventHandler = _endEventHandler.bind(this);
document.addEventListener(this.events[2], this.endEventHandler, false);
}
function _moveEventHandler(event) {
event.preventDefault();
var evt = this.supportTouch ? event.touches[0] : event;
var coverPos = this.cover.getBoundingClientRect();
var pageScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var pageScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
var mouseX = evt.pageX - coverPos.left - pageScrollLeft;
var mouseY = evt.pageY - coverPos.top - pageScrollTop;
this.ctx.beginPath();
this.ctx.fillStyle = "#FFFFFF";
this.ctx.globalCompositeOperation = "destination-out";
this.ctx.arc(mouseX, mouseY, 10, 0, 2 * Math.PI);
this.ctx.fill();
}
function _endEventHandler(event) {
event.preventDefault();
if (this.opt.callback && typeof this.opt.callback === "function")
_calcArea.call(this, this.ctx, this.opt.callback, this.opt.ratio);
this.cover.removeEventListener(this.events[1], this.moveEventHandler, false);
document.removeEventListener(this.events[2], this.endEventHandler, false);
}
LuckyCard.prototype.createCanvas = function() {
this.cover = document.createElement("canvas");
this.cover.className = "nut-cover";
this.cover.height = this.cHeight;
this.cover.width = this.cWidth;
this.ctx = this.cover.getContext("2d");
if (this.opt.coverImg) {
var _this = this;
var coverImg = new Image();
coverImg.src = this.opt.coverImg;
coverImg.onload = function() {
_this.ctx.drawImage(coverImg, 0, 0, _this.cover.width, _this.cover.height);
};
} else {
this.ctx.fillStyle = this.opt.coverColor;
this.ctx.fillRect(0, 0, this.cover.width, this.cover.height);
}
this.scratchDiv.appendChild(this.cover);
this.cardDiv.style.opacity = 1;
};
LuckyCard.prototype.eventDetect = function() {
if ("ontouchstart" in window)
this.supportTouch = true;
this.events = this.supportTouch ? ["touchstart", "touchmove", "touchend"] : ["mousedown", "mousemove", "mouseup"];
this.addEvent();
};
LuckyCard.prototype.addEvent = function() {
this.startEventHandler = _startEventHandler.bind(this);
this.cover.addEventListener(this.events[0], this.startEventHandler, false);
};
LuckyCard.prototype.clearCover = function() {
this.ctx.clearRect(0, 0, this.cover.width, this.cover.height);
this.cover.removeEventListener(this.events[0], this.startEventHandler);
this.cover.removeEventListener(this.events[1], this.moveEventHandler);
this.cover.removeEventListener(this.events[2], this.endEventHandler);
};
LuckyCard.prototype.init = function(settings, callback) {
if (!_isCanvasSupported()) {
console.log("\u5BF9\u4E0D\u8D77\uFF0C\u5F53\u524D\u6D4F\u89C8\u5668\u4E0D\u652F\u6301Canvas\uFF0C\u65E0\u6CD5\u4F7F\u7528\u672C\u63A7\u4EF6\uFF01");
return;
}
var _this = this;
_forEach(arguments, function(item) {
if (typeof item === "object") {
for (var k in item) {
if (k === "callback" && typeof item[k] === "function") {
_this.opt.callback = item[k].bind(_this);
} else {
k in _this.opt && (_this.opt[k] = item[k]);
}
}
} else if (typeof item === "function") {
_this.opt.callback = item.bind(_this);
}
});
if (!this.scratchDiv) {
return;
}
this.cardDiv = this.scratchDiv.querySelector(".scratchcard-content");
if (!this.cardDiv) {
return;
}
this.cHeight = this.cardDiv.clientHeight;
this.cWidth = this.cardDiv.clientWidth;
this.cardDiv.style.opacity = 0;
this.createCanvas();
this.eventDetect();
};
LuckyCard.case = function(settings, callback) {
return new LuckyCard(settings, callback);
};
var LuckyCard$1 = LuckyCard.case;
var index_vue_vue_type_style_index_0_lang$6 = "";
const { componentName: componentName$6, create: create$8 } = createComponent("scratch-card");
const _sfc_main$8 = create$8({
props: {
content: {
type: String,
default: ""
},
height: {
type: [String, Number],
default: 50
},
width: {
type: [String, Number],
default: 300
},
coverColor: {
type: String,
default: "#C5C5C5"
},
coverImg: {
type: String,
default: ""
},
fontSize: {
type: [String, Number],
default: 20
},
backgroundColor: {
type: String,
default: "#FFFFFF"
},
ratio: {
type: [String, Number],
default: 0.5
}
},
components: {},
emits: ["click", "open"],
setup(props, { emit }) {
const scratchcard = ref(null);
const classes = computed(() => {
const prefixCls = componentName$6;
return {
[prefixCls]: true
};
});
const result = ref(props.content);
const state = reactive({
luckcard: null
});
const clearCover = () => {
state.luckcard.clearCover();
};
onMounted(() => {
nextTick(() => {
state.luckcard = LuckyCard$1({
scratchDiv: scratchcard.value,
coverColor: props.coverColor,
coverImg: props.coverImg,
ratio: Number(props.ratio)
}, () => {
clearCover();
emit("open", this);
});
});
});
watch(() => props.content, (val) => {
result.value = val;
});
return __spreadProps(__spreadValues({}, state), {
result,
classes,
scratchcard
});
}
});
const _hoisted_1$7 = ["innerHTML"];
function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: normalizeClass(_ctx.classes),
style: normalizeStyle({ height: _ctx.height + "px", width: _ctx.width + "px" }),
ref: "scratchcard",
id: "scratchcard"
}, [
createElementVNode("div", {
class: "scratchcard-content",
innerHTML: _ctx.result,
style: normalizeStyle({ backgroundColor: _ctx.backgroundColor, fontSize: _ctx.fontSize + "px" })
}, null, 12, _hoisted_1$7)
], 6);
}
var ScratchCard = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8]]);
var index_vue_vue_type_style_index_0_lang$5 = "";
const { componentName: componentName$5, create: create$7 } = createComponent("giftbox");
const _sfc_main$7 = create$7({
props: {
initPrize: {
type: Boolean,
default: true
}
},
emits: ["start-turns", "end-turns"],
setup(props, { emit }) {
const classes = computed(() => {
const prefixCls = componentName$5;
return {
[prefixCls]: true,
"gift-box": true
};
});
const openActive = ref(false);
const handleClick = (event) => {
if (openActive.value) {
return false;
}
emit("start-turns");
openActive.value = true;
gift();
};
const init = () => {
openActive.value = false;
};
const gift = () => {
let transitionFlag = true;
let gift2 = document.getElementById("giftAnimate");
gift2.addEventListener("webkitTransitionEnd", function(e) {
if (e.target === e.currentTarget && transitionFlag) {
transitionFlag = false;
emit("end-turns");
removeListen();
}
});
};
const removeListen = () => {
let gift2 = document.getElementById("giftAnimate");
gift2.removeEventListener("webkitTransitionEnd", function() {
});
};
return {
classes,
init,
openActive,
handleClick
};
}
});
const _hoisted_1$6 = { class: "giftbox-wraper" };
const _hoisted_2$5 = /* @__PURE__ */ createElementVNode("view", { class: "gBox gift-box-2" }, null, -1);
function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("view", _hoisted_1$6, [
createElementVNode("view", {
class: normalizeClass(_ctx.classes),
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
}, [
createElementVNode("view", {
id: "giftAnimate",
class: normalizeClass(["gBox gift-box-1", { "gift-box-1-open": _ctx.openActive }])
}, null, 2),
_hoisted_2$5,
createElementVNode("view", {
class: normalizeClass(["gBox gift-box-3", { "gift-box-3-open": _ctx.openActive }])
}, null, 2)
], 2)
]);
}
var GiftBox = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
var index_vue_vue_type_style_index_0_scoped_true_lang$1 = "";
const { create: create$6 } = createComponent("lotto-roll");
const _sfc_main$6 = create$6({
props: {
prizeList: {
type: Array,
default: () => []
},
turnsTime: {
type: Number,
default: 0
},
turnsNumber: {
type: Number,
default: 0
},
prizeIndex: {
type: Number,
default: -1
}
},
emits: ["click", "start-turns", "end-turns"],
setup(props, { emit }) {
const prize = ref(props.prizeIndex);
watch(() => props.prizeIndex, (val) => {
prize.value = val;
});
const list = ref([]);
watch(() => props.prizeList, (val) => {
list.value = val;
}, {
immediate: true,
deep: true
});
const _window = window;
const animationFun = _window.requestAnimationFrame || _window.webkitRequestAnimationFrame || _window.mozRequestAnimationFrame || _window.msRequestAnimationFrame || _window.oRequestAnimationFrame || function(cb) {
_window.setTimeout(cb, 1e3 / 60);
};
const options = ref();
const startTime = ref(null);
const lock = ref(false);
const animate = (timestamp) => {
if (!options.value) {
return false;
}
if (startTime.value == null) {
startTime.value = timestamp;
}
const timeDiff = timestamp - startTime.value;
options.value.forEach((item) => {
if (item.isFinished) {
return;
}
const time = Math.max(item.duration - timeDiff, 0);
const power = 3;
const offset = Math.pow(time, power) / Math.pow(item.duration, power) * item.rollTimes;
const distance = -1 * Math.floor((offset + item.location) % item.height);
item.el.style.transform = "translateY(" + distance + "px)";
if (timeDiff > item.duration) {
item.isFinished = true;
}
});
if (options.value.every((m) => m.isFinished)) {
emit("end-turns");
lock.value = false;
options.value = null;
startTime.value = null;
} else {
animationFun(animate);
}
};
const startRoll = () => {
emit("start-turns");
if (options.value) {
options.value.forEach((item) => {
item.isFinished = true;
const v = -item.location;
item.el.style.transform = "translateY(" + v + "px)";
});
return;
}
const _options = Array.from(document.getElementsByClassName("lotto-roll-wrap")).map((data, i) => {
const dom = document.getElementsByClassName("lotto-roll-wrap")[i];
const itemHeight = document.getElementsByClassName("lotto-item")[0].offsetHeight;
let prizeIdx = prize.value;
if (prizeIdx < 0) {
prizeIdx = Math.floor(Math.random() * list.value.length);
}
const opts = {
el: dom.querySelector(".lotto-wrap"),
location: prizeIdx * itemHeight,
rollTimes: 2e3 + Math.random() * 500 + i * 500 + 1e3 * props.turnsNumber,
height: list.value.length * itemHeight,
duration: 6e3 + i * 2e3 + props.turnsTime,
isFinished: false
};
return opts;
});
options.value = _options;
animationFun(animate);
};
const start = () => {
if (lock.value) {
return false;
}
lock.value = true;
setTimeout(() => {
startRoll();
}, 300);
};
return {
list,
start
};
}
});
const _hoisted_1$5 = { class: "nutbig-lotto-roll" };
const _hoisted_2$4 = { class: "lotto-roll-content" };
const _hoisted_3$3 = { class: "lotto-wrap" };
const _hoisted_4$1 = {
key: 0,
class: "lotto-item-image"
};
const _hoisted_5$1 = ["src"];
const _hoisted_6$1 = {
key: 1,
class: "lotto-item-content"
};
function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", _hoisted_1$5, [
(openBlock(), createElementBlock(Fragment, null, renderList(3, (s, index) => {
return createElementVNode("div", {
class: "lotto-roll-wrap",
key: index
}, [
createElementVNode("div", _hoisted_2$4, [
createElementVNode("div", _hoisted_3$3, [
(openBlock(true), createElementBlock(Fragment, null, renderList([..._ctx.list, ..._ctx.list], (item, idx) => {
return openBlock(), createElementBlock("div", {
class: "lotto-item",
key: `'lotto'-${index}-${idx}`
}, [
item.imagePath ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
item.imagePath ? (openBlock(), createElementBlock("img", {
key: 0,
class: "lotto-item-img",
src: item.imagePath
}, null, 8, _hoisted_5$1)) : createCommentVNode("", true)
])) : createCommentVNode("", true),
item.text ? (openBlock(), createElementBlock("div", _hoisted_6$1, toDisplayString(item.text), 1)) : createCommentVNode("", true)
]);
}), 128))
])
])
]);
}), 64))
]);
}
var LottoRoll = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6], ["__scopeId", "data-v-cee5f8fe"]]);
var index_vue_vue_type_style_index_0_lang$4 = "";
const { componentName: componentName$4, create: create$5 } = createComponent("hiteggs");
const _sfc_main$5 = create$5({
props: {
num: {
type: Number,
default: 9
},
intactImg: {
type: String,
default: "//img10.360buyimg.com/imagetools/jfs/t1/217651/2/1901/114207/617770f2E74551438/5342f7b949e7bec3.png"
},
hammer: {
type: String,
default: "//img13.360buyimg.com/imagetools/jfs/t1/95159/30/17834/9845/61444874E0f463263/924741cae55efb85.png"
},
splitImg: {
type: String,
default: "//img13.360buyimg.com/imagetools/jfs/t1/219949/29/1870/75442/61776f7aE5d1a8e07/a8de5321e4e8071e.png"
},
width: {
type: String,
default: "80px"
},
height: {
type: String,
default: "80px"
}
},
emits: ["click"],
setup(props, { emit }) {
const hitIndex = ref();
const hitClick = ref(false);
const arr = reactive([]);
const classes = computed(() => {
const prefixCls = componentName$4;
return {
[prefixCls]: true
};
});
const hitEggs = (index) => {
if (hitClick.value)
return;
hitClick.value = true;
hitIndex.value = index;
setTimeout(() => {
arr.push(index);
hitIndex.value = props.num + 1;
hitClick.value = false;
emit("click");
}, 1500);
};
return {
classes,
hitIndex,
hitEggs,
arr
};
}
});
const _hoisted_1$4 = ["src", "onClick"];
const _hoisted_2$3 = ["src"];
const _hoisted_3$2 = ["src"];
function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: normalizeClass(_ctx.classes)
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.num, (item, index) => {
return openBlock(), createElementBlock("div", {
key: index,
class: "nut-eggs-item",
style: normalizeStyle({ width: _ctx.width, height: _ctx.height })
}, [
!(_ctx.arr.indexOf(index) > -1) ? (openBlock(), createElementBlock("img", {
key: 0,
class: "intactImg",
src: _ctx.intactImg,
alt: "",
onClick: ($event) => _ctx.hitEggs(index)
}, null, 8, _hoisted_1$4)) : createCommentVNode("", true),
_ctx.arr.indexOf(index) > -1 ? (openBlock(), createElementBlock("img", {
key: 1,
class: "splitImg",
src: _ctx.splitImg,
alt: ""
}, null, 8, _hoisted_2$3)) : createCommentVNode("", true),
withDirectives(createElementVNode("img", {
class: "hammer",
style: { "animation": "shake-rotate 0.5s linear 0s infinite" },
src: _ctx.hammer,
alt: ""
}, null, 8, _hoisted_3$2), [
[vShow, index == _ctx.hitIndex]
])
], 4);
}), 128))
], 2);
}
var Hiteggs = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
var index_vue_vue_type_style_index_0_lang$3 = "";
const { componentName: componentName$3, create: create$4 } = createComponent("giftrain");
const _sfc_main$4 = create$4({
props: {
width: {
type: String,
default: "375px"
},
height: {
type: String,
default: "500px"
},
rainWidth: {
type: Number,
default: 50
},
rainHeight: {
type: Number,
default: 50
},
rainTime: {
type: Number,
default: 3e4
},
rainNum: {
type: Number,
default: 4
},
rainImg: {
type: String,
default: "//img13.360buyimg.com/imagetools/jfs/t1/199416/7/16633/40527/618c8bebEb03467d8/6af8bde529c5cf61.png"
}
},
emits: ["start", "gameOver", "click"],
setup(props, { emit }) {
const rainContent = ref(null);
const img = ref(null);
const rainTime = ref(props.rainTime);
const rainNum = ref(props.rainNum);
const rainImg = ref(props.rainImg);
const rainList = ref([]);
const isOver = ref(false);
const rainScore = ref(0);
const arr = reactive([]);
let timeout_gameTime = ref();
let requestAnimationFrame = ref();
const startRain = () => {
init();
rainList.value = [];
addRainList();
timeout_gameTime.value = setTimeout(() => {
rainOver();
}, rainTime.value);
render();
emit("start");
};
const init = () => {
rainScore.value = 0;
rainList.value = [];
isOver.value = false;
clearTimeout(timeout_gameTime.value);
window.cancelAnimationFrame(requestAnimationFrame.value);
timeout_gameTime.value = null;
};
const rainOver = () => {
emit("gameOver");
isOver.value = true;
init();
};
const render = () => {
if (isOver.value)
return;
let redPacketWarp = rainContent.value;
let height = redPacketWarp.clientHeight;
let x = redPacketWarp.clientWidth - props.rainWidth;
rainList.value && rainList.value.map((item) => {
if (item.y > height + 80) {
item.y = 0;
item.x = Math.floor(x * Math.random());
arr.push(item);
}
item.y += item.speed;
});
requestAnimationFrame.value = window.requestAnimationFrame(render);
};
const addRainList = () => {
let redPacketWarp = rainContent.value;
let x = redPacketWarp.clientWidth - props.rainWidth;
let timeout = setInterval(() => {
let state = reactive({
width: props.rainWidth,
height: props.rainHeight,
id: new Date().getTime().toString(),
img: rainImg.value,
hasSelected: false,
y: 0,
x: Math.floor(x * Math.random()),
speed: Math.floor(Math.random() * 1 + 4)
});
if (rainList.value.length <= rainNum.value) {
rainList.value.push(state);
} else {
clearInterval(timeout);
}
}, 1e3);
};
const touchStart = (e, id) => {
if (isOver.value)
return;
let redPacketWarp = rainContent.value;
let x = redPacketWarp.clientWidth - props.rainWidth;
rainList.value.map((item) => {
if (item.id == id) {
item.hasSelected = true;
item.width = 0;
arr.push(item);
emit("click");
setTimeout(() => {
item.x = x * Math.random();
item.y = 0;
item.width = props.rainWidth;
item.hasSelected = false;
}, 300);
}
});
};
const rainImgStyle = (w, h, x, y) => {
return {
width: w + "px",
height: h + "px",
left: x + "px",
top: -(h + 10) + "px",
transform: `translateY(${y}px)`
};
};
const seclected = (w, h) => {
return {
width: w + "px"
};
};
const classes = computed(() => {
const prefixCls = componentName$3;
return {
[prefixCls]: true
};
});
return {
classes,
rainContent,
rainTime,
rainNum,
rainImg,
init,
rainList,
rainOver,
startRain,
touchStart,
rainImgStyle,
seclected,
isOver,
img
};
}
});
const _hoisted_1$3 = ["onTouchstart", "src"];
function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: normalizeClass(_ctx.classes)
}, [
createElementVNode("div", {
class: "nutbig-giftrain-content",
ref: "rainContent",
style: normalizeStyle({ width: _ctx.width, height: _ctx.height })
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.rainList, (item, index) => {
return openBlock(), createElementBlock("img", {
class: normalizeClass([
"nutbig-giftrain-content-rainimg",
item.hasSelected ? "" : "noselected"
]),
style: normalizeStyle(item.hasSelected ? _ctx.seclected(item.width, item.height) : _ctx.rainImgStyle(item.width, item.height, item.x, item.y)),
onTouchstart: ($event) => _ctx.touchStart($event, item.id),
key: index,
ref_for: true,
ref: "img",
src: item.img,
alt: ""
}, null, 46, _hoisted_1$3);
}), 128))
], 4)
], 2);
}
var GiftRain = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
var index_vue_vue_type_style_index_0_lang$2 = "";
const { componentName: componentName$2, create: create$3 } = createComponent("luckshake");
const _sfc_main$3 = create$3({
props: {
isShake: {
type: Boolean,
default: false
},
luckWidth: {
type: String,
default: "200px"
},
luckHeight: {
type: String,
default: "106px"
},
luckImgTop: {
type: String,
default: "//img13.360buyimg.com/imagetools/jfs/t1/203344/20/16885/31149/61a07610E2520903c/899a906f039535b0.png"
},
luckImgBottom: {
type: String,
default: "//img13.360buyimg.com/imagetools/jfs/t1/208979/10/10371/28087/61a07610Ee1e2f1b4/5b6fa12658906939.png"
},
clickPoint: {
type: String,
default: "//img11.360buyimg.com/ling/jfs/t1/104643/13/16899/24402/5e830316E70f93784/3f9e9b0d6e11db14.png"
},
shakeSpeed: {
type: Number,
default: 110
},
durationTime: {
type: Number,
default: 1e3
},
durationAnimation: {
type: Number,
default: 1e3
},
pointerStyle: {
default: () => {
return {
width: "90px",
height: "90px"
};
}
}
},
emits: ["click-shake", "shake-event"],
setup(props, { emit }) {
let { isShake, luckWidth, luckHeight, shakeSpeed, durationTime, durationAnimation } = reactive(props);
let loading = ref(false);
let shakeInfo = ref({
openFlag: false,
shakeSpeed,
lastTime: 0,
x: 0,
y: 0,
z: 0,
lastX: 0,
lastY: 0,
lastZ: 0
});
onMounted(() => {
openShakeEvent();
shakeChange();
});
onUnmounted(() => {
window.removeEventListener("devicemotion", shake, false);
closeShakeEvent();
});
const classes = computed(() => {
const prefixCls = componentName$2;
return {
[prefixCls]: true
};
});
const styles = computed(() => {
return {
width: luckWidth,
height: luckHeight
};
});
const openShakeEvent = () => {
shakeInfo.value.openFlag = true;
};
const closeShakeEvent = () => {
shakeInfo.value.openFlag = false;
};
const shakeOk = () => {
loading.value = true;
};
const shakeChange = () => {
if (loading.value)
return;
if (window.DeviceMotionEvent) {
isShake = true;
window.addEventListener("devicemotion", shake, false);
} else {
isShake = false;
}
};
const shake = (eventData) => {
if (!shakeInfo.value.openFlag) {
return;
}
let acceleration = eventData.accelerationIncludingGravity;
let nowTime = new Date().getTime();
if (nowTime - shakeInfo.value.lastTime > 100) {
let diffTime = nowTime - shakeInfo.value.lastTime;
shakeInfo.value.lastTime = nowTime;
shakeInfo.value.x = acceleration.x;
shakeInfo.value.y = acceleration.y;
shakeInfo.value.z = acceleration.z;
let speed = Math.abs(shakeInfo.value.x + shakeInfo.value.y + shakeInfo.value.z - shakeInfo.value.lastX - shakeInfo.value.lastY - shakeInfo.value.lastZ) / diffTime * 1e4;
if (speed > shakeInfo.value.shakeSpeed) {
shakeOk();
mobileShake(durationTime);
setTimeout(() => {
emit("shake-event");
loading.value = false;
console.log("loading.value", loading.value);
}, durationAnimation);
}
shakeInfo.value.lastX = shakeInfo.value.x;
shakeInfo.value.lastY = shakeInfo.value.y;
shakeInfo.value.lastZ = shakeInfo.value.z;
}
};
const clickShake = () => {
if (loading.value)
return;
loading.value = true;
mobileShake(durationTime);
setTimeout(() => {
emit("click-shake");
loading.value = false;
}, durationAnimation);
};
const mobileShake = (duration) => {
if (navigator.vibrate) {
navigator.vibrate(duration);
}
};
return {
classes,
styles,
mobileShake,
clickShake,
loading
};
}
});
const _hoisted_1$2 = ["src"];
const _hoisted_2$2 = ["src"];
const _hoisted_3$1 = ["src"];
function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: normalizeClass(_ctx.classes)
}, [
createElementVNode("div", {
class: "shake-box",
style: normalizeStyle(_ctx.styles)
}, [
createElementVNode("div", {
class: normalizeClass(["shake-box-img", [_ctx.loading ? "animation" : "rockit"]])
}, [
createElementVNode("img", {
class: "img-top",
src: _ctx.luckImgTop
}, null, 8, _hoisted_1$2),
createElementVNode("img", {
class: "img-bottom",
src: _ctx.luckImgBottom
}, null, 8, _hoisted_2$2)
], 2)
], 4),
renderSlot(_ctx.$slots, "shake-num"),
_ctx.clickPoint ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(["pointer", [_ctx.loading ? "" : "clickShake"]]),
style: normalizeStyle(_ctx.pointerStyle),
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clickShake && _ctx.clickShake(...args))
}, [
createElementVNode("img", { src: _ctx.clickPoint }, null, 8, _hoisted_3$1)
], 6)) : createCommentVNode("", true),
renderSlot(_ctx.$slots, "default")
], 2);
}
var LuckShake = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
var index_vue_vue_type_style_index_0_scoped_true_lang = "";
const { create: create$2 } = createComponent("doll-machine");
const _sfc_main$2 = create$2({
props: {
defaultClaw: {
type: String,
default: "https://img14.360buyimg.com/imagetools/jfs/t1/146467/34/22553/4178/61b088afE198f676e/21952e7018d1d141.png"
},
activeClaw: {
type: String,
default: "https://img13.360buyimg.com/imagetools/jfs/t1/218082/28/7092/15914/61b088afEf9c253f7/8392e2b14bd8f43a.png"
},
speed: {
type: Number,
default: 20
},
prizeList: {
type: Array,
default: () => []
},
prizeIndex: {
type: Number,
default: -1
}
},
emits: ["click", "start-turns", "end-turns"],
setup(props, { emit }) {
const giftPrize = ref();
const machineBoxDom = ref();
const machineToolsDom = ref();
const toolsStyle = reactive({
left: "50%",
marginLeft: "0"
});
const leftCenter = () => {
toolsStyle.left = "50%";
const toolDomW = machineToolsDom.value.offsetWidth;
toolsStyle.marginLeft = "-" + toolDomW / 2 + "px";
};
const leftRightMove = (flag) =>