Skip to content

S
SquareTurntable
Commit 4c8f2116 authored by 吴江涛's avatar 吴江涛
Browse files
Options

优化掉三个可选参数,跑抽奖接口抽离出去,同时更新数据也可在调用方控制了

parent 43b9f8ef
Hide whitespace changes
Inline Side-by-side
Showing with 55 additions and 57 deletions
README.md
View file @ 4c8f2116
......@@ -11,12 +11,7 @@ import SquareTurntable from '@src/components/SquareTurntable/SquareTurntable';
renderCenter={<span className="logo"></span>}
prizeList={this.state.prizeList}
itemSelectImg={<span className="mask"></span>}
drawApi={API.doTurntableDraw}
updateInfoFunction={() => {
console.log("刷新数据");
}}
matchInitName="prizeId"
matchApiName="prizeId"
moveTime={100}
beginIndex={0}
turnTime={5000}
......@@ -37,23 +32,23 @@ import SquareTurntable from '@src/components/SquareTurntable/SquareTurntable';
```
| 属性 | 介绍 | 是否必填 | 默认值 |
| ------------------ | ------------------------------------------------------------ | -------- | ------------------ |
| ref | 用于获取组件对象 | 是 | / |
| prizeList | 奖品列表 | 是 | [] |
| itemSelectImg | 被选中时奖品上方展示的内容 | 是 | "" |
| drawApi | 抽奖接口，只需给API中定义的就行 | 是 | ()=>{} |
| renderItem | 每个格子内渲染的内容 | 是 | "" |
| className | 整体转盘样式设置 | 否 | 默认占满整个父元素 |
| renderBg | 渲染转盘背景也可以渲染其他元素，将渲染在转盘底层 | 否 | "" |
| renderCenter | 渲染转盘中心位置的内容 | 否 | "" |
| updateInfoFunction | 抽奖接口成功后，会执行 | 否 | ()=>{} |
| matchInitName | 奖品渲染时，将读取该奖品item上的matchInitName属性下的值绑定在dom上，例如data-prize-id={item[matchInitName]} | 否 | "prizeId" |
| matchApiName | 抽奖接口返回的数据中用于和上方数据匹配的字段名 | 否 | "prizeId" |
| moveTime | 转盘移动间隔时间，单位ms | 否 | 100 |
| beginIndex | 转盘初次启动的索引 | 否 | 0 |
| addTime | 转盘每次移动增加的间隔时间 | 否 | 5 |
| maxMoveTime | 转盘移动一格的最长时间 | 否 | 1000 |
| 属性 | 介绍 | 是否必填 | 默认值 |
| -------------------------- | ------------------------------------------------------------ | -------- | ------------------ |
| ref | 用于获取组件对象 | 是 | / |
| prizeList | 奖品列表 | 是 | [] |
| itemSelectImg | 被选中时奖品上方展示的内容 | 是 | "" |
| drawApi（废弃） | 抽奖接口，只需给API中定义的就行 | 是 | ()=>{} |
| renderItem | 每个格子内渲染的内容 | 是 | "" |
| className | 整体转盘样式设置 | 否 | 默认占满整个父元素 |
| renderBg | 渲染转盘背景也可以渲染其他元素，将渲染在转盘底层 | 否 | "" |
| renderCenter | 渲染转盘中心位置的内容 | 否 | "" |
| updateInfoFunction（废弃） | 抽奖接口成功后，会执行 | 否 | ()=>{} |
| matchInitName | 奖品渲染时，将读取该奖品item上的matchInitName属性下的值绑定在dom上，例如data-prize-id={item[matchInitName]} | 否 | "prizeId" |
| matchApiName（废弃） | 抽奖接口返回的数据中用于和上方数据匹配的字段名 | 否 | "prizeId" |
| moveTime | 转盘移动间隔时间，单位ms | 否 | 100 |
| beginIndex | 转盘初次启动的索引 | 否 | 0 |
| addTime | 转盘每次移动增加的间隔时间 | 否 | 5 |
| maxMoveTime | 转盘移动一格的最长时间 | 否 | 1000 |
##### 在标签体内也可添加内容，通过插槽展示在转盘区域内
......@@ -64,5 +59,5 @@ import SquareTurntable from '@src/components/SquareTurntable/SquareTurntable';
| prizeRefList | 存放所有的奖品对象 |
| oldIndex | 记录上一轮结束的位置 |
| timer | 定时器，用于控制转盘转动的时间 |
| draw | 方法，转盘转动 |
| draw | 方法，转盘转动，需要入参中奖id |
src/assetList.json
View file @ 4c8f2116
{"preLoadImg":[],"asyncLoadImg":[]}
\ No newline at end of file
{"preLoadImg":[],"asyncLoadImg":["Game/btn_top.png","Game/logo.png","Game/machine.png","Game/mask.png"]}
\ No newline at end of file
src/components/SquareTurntable/SquareTurntable.jsx
View file @ 4c8f2116
......@@ -24,8 +24,11 @@ class SquareTurntable extends React.Component {
waitTime = async(time) => {
return new Promise((resolve) => setTimeout(resolve, time));
}
/** 抽奖 */
draw = async () => {
/**
* 抽奖
* @params targetId 中奖的id
* */
draw = async (targetId) => {
const {
moveTime = 100,
beginIndex = 0,
......@@ -51,35 +54,32 @@ class SquareTurntable extends React.Component {
let select = {};
// 数组长度
const len = this.prizeRefList?.length || 0;
const res = await drawApi();
if (res?.success) {
!!updateInfoFunction && updateInfoFunction();
this.timer = setTimeout(() => {
flag = false;
}, _turnTime);
const move = async () => {
if (!flag && select.getAttribute("data-prize-id") === res?.data[matchApiName]) {
this.setState({ isClick: false });
this.oldIndex = _beginIndex;
return res;
}
if (len === 0) return false;
if (!!itemSelectImg) {
this.prizeRefList[_beginIndex].lastChild.style.visibility = "hidden";
}
_beginIndex ++;
if (_beginIndex >= len) _beginIndex = 0;
select = this.prizeRefList[_beginIndex];
if (!!itemSelectImg) {
this.prizeRefList[_beginIndex].lastChild.style.visibility = "visible";
}
_moveTime += addTime;
_moveTime = _moveTime > maxMoveTime? maxMoveTime: _moveTime;
await this.waitTime(_moveTime);
return await move();
};
this.timer = setTimeout(() => {
flag = false;
}, _turnTime);
const move = async () => {
if (!flag && select.getAttribute("data-prize-id") === targetId) {
this.setState({ isClick: false });
this.oldIndex = _beginIndex;
return true;
}
if (len === 0) return false;
if (!!itemSelectImg) {
this.prizeRefList[_beginIndex].lastChild.style.visibility = "hidden";
}
_beginIndex ++;
if (_beginIndex >= len) _beginIndex = 0;
select = this.prizeRefList[_beginIndex];
// console.log(JSON.parse(select.getAttribute("data-prize-id")));
if (!!itemSelectImg) {
this.prizeRefList[_beginIndex].lastChild.style.visibility = "visible";
}
_moveTime += addTime;
_moveTime = _moveTime > maxMoveTime? maxMoveTime: _moveTime;
await this.waitTime(_moveTime);
return await move();
}
};
return await move();
};
render() {
......
src/pages/homeDemo/homeDemo.jsx
View file @ 4c8f2116
......@@ -30,9 +30,12 @@ class HomeDemo extends React.Component {
/** 点击抽奖 */
handleClick = _throttle(async () => {
console.log("table", this.table)
const result = await this.table.draw();
if (!!result) {
console.log("抽奖结束", result)
const res = await API.doTurntableDraw();
if (res?.success) {
const result = await this.table.draw(res?.data.prizeId);
if (!!result) {
console.log("抽奖结束", result)
}
}
})
render() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment