Skip to content

D
db-game-template
Commit 80d53464 authored by 李硕's avatar 李硕
Browse files
Options

提交动态变化模块

parent 643ce681
Hide whitespace changes
Inline Side-by-side
Showing with 75 additions and 41 deletions
project/mock/LT/interface.js
View file @ 80d53464
export const getUserBaseInfo = {
"data": {
"exp": "6000",//经验值
"exp": "12345",//经验值
"nextLevelExp": "12345",//距离下个会员等级的经验差值
"memberLevel": "W3",//当前会员等级
"nextLevel": "4",//下一会员等级
......@@ -89,7 +89,7 @@ export const getTaskList = {
"icon": "",
"linkUrl": "ea",
"status": 0,
"openTime":"28"
"openTime":"8"
},
{
"taskId": "2",
......@@ -98,7 +98,7 @@ export const getTaskList = {
"icon": "",
"linkUrl": "ea",
"status": 0,
"openTime":"26"
"openTime":"18"
},
{
"taskId": "3",
......@@ -106,8 +106,8 @@ export const getTaskList = {
"desc": "desc3",
"icon": "",
"linkUrl": "ea",
"status": -1,
"openTime":"0"
"status": 0,
"openTime":"26"
},
{
"taskId": "3",
......@@ -116,7 +116,7 @@ export const getTaskList = {
"icon": "",
"linkUrl": "ea",
"status": -1,
"openTime":"26"
"openTime":"0"
},
]
......
project/src/pages/pagemainsence/pagemainsence.jsx
View file @ 80d53464
......@@ -32,32 +32,7 @@ class Pagemainsence extends Component {
},
dayTasks: {
unFinishNum: "",
tasKVos: [
// {
// "taskId": "1",
// "taskName": "name1",
// "desc": "desc1",
// "icon": "",
// "linkUrl": "ea",
// "status": 1
// },
// {
// "taskId": "2",
// "taskName": "name2",
// "desc": "desc2",
// "icon": "",
// "linkUrl": "ea",
// "status": 0
// },
// {
// "taskId": "3",
// "taskName": "name3",
// "desc": "desc3",
// "icon": "",
// "linkUrl": "ea",
// "status": -1
// }
],
tasKVos: [],
},
weekTasks: {
unFinishNum: "",
......@@ -73,7 +48,7 @@ class Pagemainsence extends Component {
componentDidMount() {
this.getUserData();
this.getEachTaskList();
// this.curUserExpPosition("curpositionPic");
console.log();
}
/**
......@@ -104,6 +79,7 @@ class Pagemainsence extends Component {
this.setState({
userData: data
})
this.curUserExpPosition("curpositionPic");
console.log("获取用户信息", this.state.userData);
} else {
Toast(message);
......@@ -137,8 +113,10 @@ class Pagemainsence extends Component {
* 获取用户的对应活动信息
*/
async getEachTaskList() {
Loading.show();
let { data, message, success } = await API.getTaskList();
if (success) {
Loading.hide();
this.setState({
specialTasks: data[GET_TASK.speTask],
dayTasks: data[GET_TASK.dayTask],
......@@ -170,8 +148,10 @@ class Pagemainsence extends Component {
getPxToken(
async token => {
let { success, message } = await API.postDoTask({ token: token, taskId: taskId, taskType: type });
console.log("success====",success,"message-====",message);
if (success) {
this.jumpUrl(linkUrl);
this.getEachTaskList();
} else {
Toast(message);
}
......@@ -188,12 +168,68 @@ class Pagemainsence extends Component {
* @param {*} objId
*/
curUserExpPosition(objId) {
let user = document.getElementById(objId);
// user.x = 400;
console.log("user=======", user.x, user.y);
console.log('》》》》》》', this.state.userData);
console.log('>>>>>>>', document.getElementById(objId).style);
let elementStyle = document.getElementById(objId).style;
//left x 5px=0 70px=2000 135px=6000 201px=15000 267px=25000 333px=50000
// 0.01 0.183 0.36 0.535 0.71 0.888
//top y 145px=0 130px=2000 110px=6000 85px=15000 40px=25000 -15px=50000
// 0.185 0.175 0.15 0.115 0.064 -0.01
let left0 = this.getCurLeftTop(this.state.userData.exp).left;
let top0 = this.getCurLeftTop(this.state.userData.exp).top;
console.log("left0=====", left0 / 750, 'top0=====', top0);
elementStyle.left = `${left0}%`;
elementStyle.top = `${top0}%`;
// elementStyle.left = `${(left0 / 750) * 100}%`;
// elementStyle.top = `${top0}px`;
}
/**
* 获取所处区间
* @param {*} exp
*/
getCurLeftTop(exp) {
let first = { left: 1, top: 18.5, num: 0 };
let second = { left: 18.3, top: 17.5, num: 2000 };
let third = { left: 36, top: 15, num: 6000 };
let fouth = { left: 53.5, top: 11.5, num: 15000 };
let fifth = { left: 71, top: 6.4, num: 25000 };
let sixth = { left: 88.8, top: -1, num: 50000 }
let result = {};
if (exp >= first.num && exp < second.num) {
result = this.getPositionDetail(exp, first, second);
} else if (exp >= second.num && exp < third.num) {
result = this.getPositionDetail(exp, second, third);
} else if (exp >= third.num && exp < fouth.num) {
result = this.getPositionDetail(exp, third, fouth);
} else if (exp >= fouth.num && exp < fifth.num) {
result = this.getPositionDetail(exp, fouth, fifth);
} else if (exp >= fifth.num && exp <= sixth.num) {
result = this.getPositionDetail(exp, fifth, sixth);
} else if (exp > 55000) {
result = { left: 90, top: -2 };
}
return result;
}
/**
* 获取当前节点的坐标值
* @param {*} exp
* @param {*} forward
* @param {*} behind
*/
getPositionDetail(exp, forward, behind) {
console.log(forward, behind);
let result = {};
result.left = (+exp - forward.num) / (behind.num - forward.num)
* (behind.left - forward.left)
+ forward.left;
result.top = forward.top - (+exp - forward.num) / (behind.num - forward.num)
* (forward.top - behind.top);
console.log('result====', result);
return result;
}
/**
* 当前任务的开启状态
* @param {*} openTime
......@@ -232,9 +268,7 @@ class Pagemainsence extends Component {
<div className="lineshow ">
<img className="linebg " src={this.state.resList['4df3976c-0c7b-4556-b7ae-494c7626dbea'].url} />
<img className="lines " src={this.state.resList['4cd2c485-c9e6-40cd-87c9-fcec75a8fdc5'].url} />
<img className="curposition " id="curpositionPic"
style={{ left: userData.exp / (userData.exp <= 6000 ? 23000 : (userData.exp <= 6000 ? 33000 : (userData.exp <= 15000 ? 56000 : 70000))) * 750, top: 140 - 1 / 0.7 * (userData.exp / 30000) * (userData.exp / 40000) * 150 }}
src={this.state.resList['e0c38676-d8bc-4369-b31c-a88ebf972b64'].url} />
<img className="curposition " id="curpositionPic" src={this.state.resList['e0c38676-d8bc-4369-b31c-a88ebf972b64'].url} />
</div>
<img className="growdbtn " onClick={() => { this.jumpUrl(userData.growthDetailsUrl) }} src={this.state.resList['5f9a8bc1-8eb7-49fd-9865-3a29221ef666'].url} />
<div className="userdata ">
......
project/src/pages/pagemainsence/pagemainsence.less
View file @ 80d53464
......@@ -42,7 +42,7 @@
width: 80px;
height: 86px;
opacity: 1;
left: 20px;
left: 50%;
top: 250px;
position: absolute;
transform-origin: 0px 0px 0px;
......
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