Skip to content

M
mr-julyedu
Commit b0f2cabd by FE
Options

split treasure basic complete

parent 85042f47
Showing with 318 additions and 22 deletions
src/common/addressPopup/index.js
......@@ -40,11 +40,14 @@ class AddressPopup extends Component {
}
handleToSubmit = (params = {}) => {
const { handleToHide } = this.props;
http.post(`${API.home}/sys/collect_info`, params).then(res => {
const { successBindAddress } = this.props;
http.post(`${API.home}/sys/update_address`, {
act_type: 'treasure',
...params
}).then(res => {
const {code, msg} = res.data;
if (code === 200) {
handleToHide();
successBindAddress();
} else {
Toast.info(msg, 2, null, false);
}
......@@ -84,6 +87,7 @@ class AddressPopup extends Component {
}}
render={({errors}) => (
<Form className="address-form" data-skip={skip}>
<h2 className="address-form__title">收货信息</h2>
{
prize ? (
<p className='address__prize'>您抽中了{prize}<span style={{'color': '#FF4000'}}>实物奖品</span></p>
......
src/common/addressPopup/index.scss
......@@ -22,6 +22,14 @@
[data-skip="year"] {
.address-form__title {
margin: 10px 0 0;
font-size: 18px;
color: #111;
text-align: center;
line-height: 1;
}
.address-form__subtitle {
margin: 0 15px;
}
......
src/common/bindPhone/index.js
......@@ -39,7 +39,7 @@ class BindPhone extends Component {
toFetchCountryNum = () => {
const { history, hideBindPhone } = this.props;
hideBindPhone();
history.push('/country');
history.push('/country?from=bind');
}
getCaptchaInstance = instance => {
......@@ -135,8 +135,8 @@ class BindPhone extends Component {
is_valid: 1, // is_valid 是否验证 1:验证（默认）,0不验证
}
).then(res => {
const { errno, data, msg } = res.data;
if(errno === 200 ) {
const { code, data, msg } = res.data;
if(code === 200 ) {
if(data.tip_info) {
handleToConfirmPhone(params, data.tip_info);
}else {
......@@ -180,6 +180,7 @@ class BindPhone extends Component {
}}
render={({values: {tel, code}, errors}) => (
<Form className="popup-form" data-skip={skip}>
<h2 className="popup-form__title">绑定手机号</h2>
{
desc &&
<div className="poup-form__desc">{desc}</div>
......
src/common/bindPhone/index.scss
......@@ -41,10 +41,17 @@
}
[data-skip="year"] {
.popup-form__title {
margin: 10px 0 0;
font-size: 18px;
color: #111;
text-align: center;
line-height: 1;
}
.popup-form__item {
width: 269px;
height: 40px;
}
.popup-form__button--num {
......@@ -60,6 +67,7 @@
.popup-form__button--bundle {
width: 270px;
height: 44px;
margin-bottom: 14px;
border-radius: 5px;
font-size: 16px;
}
......@@ -77,6 +85,7 @@
.captcha-container {
width: 269px;
height: 40px;
margin: 0 auto 15px;
}
......
src/common/confirmPhone/index.js
import React, { Component } from 'react';
import { Toast } from 'antd-mobile';
import { http } from '@/utils';
import './index.scss';
class ConfirmPhone extends Component {
......@@ -12,8 +14,8 @@ class ConfirmPhone extends Component {
is_valid: 0, // is_valid 是否验证 1:验证（默认）,0不验证
}
).then(res => {
const { errno, msg } = res.data;
if(errno === 200 ) {
const { code, msg } = res.data;
if(code === 200 ) {
successBindPhone();
}else {
Toast.info(msg, 2, null, false);
......@@ -22,9 +24,15 @@ class ConfirmPhone extends Component {
}
render() {
const { bindInfo = { }, desc, skip = 'year' } = this.props;
const {
bindInfo = { },
desc,
skip = 'year',
handleToCancle
} = this.props;
return (
<div className="popup-bind" data-skip={skip}>
<h2 className="popup-bind__title">绑定手机号</h2>
{
desc
? <div className="popup-bind__desc">{desc}</div>
......@@ -71,7 +79,7 @@ class ConfirmPhone extends Component {
<div className="popup-bind__footer">
<button
className="popup-bind__button popup-bind__button--cancle"
onClick={() => this.handleToClose(false)}>取消</button>
onClick={handleToCancle}>取消</button>
<button
className="popup-bind__button popup-bind__button--confirm"
onClick={this.continueBindPhone}>继续绑定</button>
......
src/common/confirmPhone/index.scss
......@@ -45,6 +45,14 @@
}
[data-skip="year"] {
.popup-bind__title {
margin: 10px 0 0;
font-size: 18px;
color: #111;
line-height: 1;
text-align: center;
}
.popup-bind__desc {
width: 269px;
font-size: 12px;
......@@ -69,6 +77,7 @@
.popup-bind__footer {
padding: 0 15px;
margin-bottom: 14px;
}
.popup-bind__button {
......
src/components/activity/newyear-2019/common/createSuccess/index.js 0 → 100644
import React from 'react';
import './index.scss';
export default (props) => {
console.log(props);
const {
data: {
team_num = 1,
lack_member = 4,
member = [],
},
handleToInvite
} = props;
const members = new Array(5).fill({});
return (
<div className="team-success">
<h2 className="team-success__title">创建成功</h2>
<p className="team-success__tip">
{<span>{team_num}</span>}号队伍 还差{<span>{lack_member}</span>}名队员即可获得宝箱哦~
</p>
<i className="team-success__icon"></i>
<ul className='team-success__member members'>
{
members.map((item, index) => {
const _member = member[index]
return (
<li className="member-item" key={index}>
{
_member && _member['is_captain'] && <sup className="member-item__captain">队长</sup>
}
<img
className="member-item__avatar"
src={
_member
? _member['head_img']
: "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/not-joined-placeholder.png"
}
alt=""/>
</li>
);
})
}
</ul>
<button type={'button'} className="team-success__button" onClick={handleToInvite}>邀请好友加入队伍</button>
</div>
)
}
\ No newline at end of file
src/components/activity/newyear-2019/common/createSuccess/index.scss 0 → 100644
.team-success__title {
margin: 10px 0 0;
font-size: 18px;
color: #111;
text-align: center;
line-height: 1;
}
.team-success__tip {
margin: 12px 0 0;
font-size: 15px;
color: #666;
text-align: center;
line-height: 1;
span {
color: #FF2121;
}
}
.team-success__icon {
display: block;
width: 120px;
height: 72px;
margin: 20px auto;
background-size: cover;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/treasure-box-icon.png');
}
.team-success__member {
display: flex;
padding: 0 12px;
.member-item {
position: relative;
margin: 0 8px;
}
.member-item__captain {
position: absolute;
top: -13px;
right: -10px;
width: 30px;
height: 16px;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 8px 8px 8px 0;
color: #0E7442;
font-size: 10px;
text-align: center;
line-height: 16px;
background: rgba(255, 227, 0, 1);
}
.member-item__avatar {
width: 44px;
height: 44px;
border-radius: 50%;
}
}
.team-success__button {
display: block;
width: 270px;
height: 44px;
margin: 20px auto;
padding: 0;
border: 1px solid #090909;
border-radius: 5px;
box-sizing: border-box;
font-size: 16px;
color: #090909;
line-height: 44px;
background-color: #FFE319;
}
\ No newline at end of file
src/components/activity/newyear-2019/common/splitSuccess/index.js
import React, { Component } from 'react';
import { http } from '@/utils';
import './index.scss';
class SplitSuccess extends Component {
......@@ -15,7 +16,17 @@ class SplitSuccess extends Component {
http.post(`${API.home}/sys/split_treasure`, params).then(res => {
const { code, data } = res.data;
if(code === 200) {
successSplitTreasure();
debugger;
successSplitTreasure(data);
if(data.bind_phone) {
setTimeout(() => {
handleToBindPhone(data.id);
}, 500);
}else if(data.bind_address) {
setTimeout(() => {
handleToBindAddress(data.id);
}, 500);
}
}else if(code === 12000) {
// 请先绑定手机号再拆宝箱
handleToBindPhone();
......@@ -23,7 +34,7 @@ class SplitSuccess extends Component {
// 请先填写收货地址再拆宝箱
handleToBindAddress();
}
})
});
}
render() {
......@@ -39,6 +50,7 @@ class SplitSuccess extends Component {
} = this.props;
return (
<div data-skip="split">
<h2 className="split-success__title">恭喜你获得</h2>
<div className="split-success__image">
<img src={prize_img} alt=""/>
</div>
......
src/components/activity/newyear-2019/common/splitSuccess/index.scss
[data-skip="split"] {
text-align: center;
.split-success__title {
margin: 10px 0 0;
font-size: 18px;
color: #111;
line-height: 1;
}
.split-success__image {
width: 130px;
height: 103px;
margin: 10px auto 0;
margin: 12px auto 0;
border: 2px solid #CDCDCD;
box-sizing: border-box;
overflow: hidden;
img {
display: block;
......@@ -37,7 +45,7 @@
}
.split-success__member {
margin: 18px 0 0;
margin: 18px 18px 0;
padding: 4px 12px;
border-radius: 6px;
background-color: #EFEFEF;
......@@ -82,7 +90,7 @@
.split-success__jump {
width: 270px;
height: 44px;
margin: 18px 0 0;
margin: 18px 25px 8px;
border: 1px solid #090909;
border-radius: 5px;
box-sizing: border-box;
......
src/components/activity/newyear-2019/myTreasure/index.scss
......@@ -49,9 +49,24 @@
}
}
// 所有弹窗
.popup-container {
&.year {
.close-icon {
position: absolute;
bottom: 80px;
left: 0;
right: 0;
margin: 0 auto;
}
}
}
// 地址弹窗--宝箱
.address-treasure__desc {
margin: 10px 0 0;
margin: 12px 0 0;
font-size: 14px;
color: #666;
line-height: 1;
......@@ -67,7 +82,7 @@
// 绑定手机弹窗--宝箱
.phone-treasure__desc {
width: 269px;
margin: 10px 15px 0;
margin: 10px 25px 0;
font-size: 14px;
color: #666;
line-height: 1;
......@@ -75,7 +90,7 @@
.phone-treasure__notice {
width: 269px;
margin: 9px 15px 15px;
margin: 9px 25px 15px;
font-size: 12px;
color: #FF2121;
line-height: 18px;
......
src/components/activity/newyear-2019/myTreasure/mask.js 0 → 100644
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './mask.scss';
const Root = document.querySelector('body');
class Mask extends Component {
constructor(props) {
super(props);
if(!this.el) {
this.el = document.createElement('div');
}
}
componentDidMount() {
Root.appendChild(this.el);
}
componentWillUnmount() {
Root.removeChild(this.el);
}
render() {
const { visible, handleToHide } = this.props;
if(visible) {
return ReactDOM.createPortal(
(
<div className="mask">
<div className="mask-content">
{this.props.children}
</div>
<div className="mask-footer">
<i className="mask-button__close" onClick={handleToHide}></i>
</div>
</div>
),
this.el
);
}else {
return null;
}
}
}
export default Mask;
\ No newline at end of file
src/components/activity/newyear-2019/myTreasure/mask.scss 0 → 100644
.mask {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
color:#fff;
background-color: rgba(0, 0, 0, .5);
}
.mask-content {
min-width: 200px;
min-height: 100px;
padding: 10px 0;
border-radius: 5px;
box-sizing: border-box;
background-color: #fff;
}
.mask-footer {
margin-top: 33px;
}
.mask-button__close {
display: inline-block;
width: 33px;
height: 33px;
background-size: cover;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/close-btn.png');
}
\ No newline at end of file
src/components/activity/newyear-2019/myTreasure/prize.js
......@@ -33,6 +33,14 @@ export default (props) => {
</a>
}
{/* 第三：奖品，实物 */}
{
(!bind_phone && !bind_address && prize_type === 1) &&
<a className="team-result" onClick={handleToBindAddress}>
<span>查看/修改收货信息</span>
</a>
}
{/* 第三：奖品，代金券碎片 */}
{
(!bind_phone && !bind_address && prize_type === 6) &&
......
src/components/activity/newyear-2019/myTreasure/team.js
......@@ -36,7 +36,7 @@ class TreasureTeam extends Component {
team: Object.assign({}, arr, {
member
}),
currentMember: member.filter(item => item.uid == userInfo.uid)[0]
currentMember: userInfo.uid? member.filter(item => item.uid == userInfo.uid)[0] : {}
});
}
......@@ -83,6 +83,7 @@ class TreasureTeam extends Component {
} = this.state;
const {
toSplitTreasure,
userInfo,
children
} = this.props;
return (
......@@ -157,8 +158,16 @@ class TreasureTeam extends Component {
{
(status === 2 && is_open) &&
<>
<p className="team-prize">{currentMember.prize_name}</p>
{children}
{
currentMember.prize_name
? <p className="team-prize">{currentMember.prize_name}</p>
: <p className="team-prize">尚未拆开宝箱</p>
}
{
currentMember.uid == userInfo.uid
? children
: null
}
</>
}
</div>
......
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