Skip to content

M
mr-julyedu
Commit fc0bbae8 by FE
Options

bug and country tel modity

parent 62c9455f
Showing with 174 additions and 107 deletions
src/components/country/countryRedux.js 0 → 100644
const ADD_COUNTRY_NUM = 'ADD_COUNTRY_NUM';
const DEL_COUNTRY_NUM = 'DEL_COUNTRY_NUM';
export const addCountryNum = (payload) => ({
type: 'ADD_COUNTRY_NUM',
payload
});
export const delCountryNum = () => ({
type: 'DEL_COUNTRY_NUM'
});
export default (state = {}, action) => {
const { type, payload } = action;
switch (type) {
case ADD_COUNTRY_NUM:
return {
...state,
...payload
};
case DEL_COUNTRY_NUM:
return {
...state,
num: '',
code: ''
};
default:
return state;
}
}
\ No newline at end of file
src/components/country/index.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { getParam } from '@/utils';
import { addCountryNum } from './countryRedux';
import { HeaderBar } from '@/common' import { HeaderBar } from '@/common'
import './index.scss'; import './index.scss';
class Country extends Component { class Country extends Component {
toParentPage = (e, num) => {
// console.log(this.props);
const { history, addCountryNum } = this.props;
addCountryNum({
num,
code: getParam('share_code')
});
history.push(`/detail?id=${getParam('id')}`);
e.preventDefault();
}
render() { render() {
const data = [ const data = [
{ {
...@@ -384,15 +400,6 @@ class Country extends Component { ...@@ -384,15 +400,6 @@ class Country extends Component {
] ]
}, },
{ {
type: 'I',
list: [
{
name: '',
num: ''
}
]
},
{
type: 'J', type: 'J',
list: [ list: [
{ {
...@@ -716,15 +723,6 @@ class Country extends Component { ...@@ -716,15 +723,6 @@ class Country extends Component {
] ]
}, },
{ {
type: 'Q',
list: [
{
name: '',
num: ''
}
]
},
{
type: 'R', type: 'R',
list: [ list: [
{ {
...@@ -877,24 +875,6 @@ class Country extends Component { ...@@ -877,24 +875,6 @@ class Country extends Component {
] ]
}, },
{ {
type: 'U',
list: [
{
name: '',
num: ''
}
]
},
{
type: 'V',
list: [
{
name: '',
num: ''
}
]
},
{
type: 'W', type: 'W',
list: [ list: [
{ {
...@@ -1061,47 +1041,45 @@ class Country extends Component { ...@@ -1061,47 +1041,45 @@ class Country extends Component {
]; ];
return ( return (
<> <>
<HeaderBar title="选择国家和地区" arrow={true}></HeaderBar> <HeaderBar title="选择国家和地区" />
<div className="letter-nav"> <ul className="letter-nav">
<ul> <li className="letter-nav__item">A</li>
<li className="letter-nav__item">A</li> <li className="letter-nav__item letter-nav__item--active">B</li>
<li className="letter-nav__item letter-nav__item--active">B</li> <li className="letter-nav__item">C</li>
<li className="letter-nav__item">C</li> <li className="letter-nav__item">D</li>
<li className="letter-nav__item">D</li> <li className="letter-nav__item">E</li>
<li className="letter-nav__item">E</li> <li className="letter-nav__item">F</li>
<li className="letter-nav__item">F</li> <li className="letter-nav__item">G</li>
<li className="letter-nav__item">G</li> <li className="letter-nav__item">H</li>
<li className="letter-nav__item">H</li> <li className="letter-nav__item">I</li>
<li className="letter-nav__item">I</li> <li className="letter-nav__item">J</li>
<li className="letter-nav__item">J</li> <li className="letter-nav__item">K</li>
<li className="letter-nav__item">K</li> <li className="letter-nav__item">L</li>
<li className="letter-nav__item">L</li> <li className="letter-nav__item">M</li>
<li className="letter-nav__item">M</li> <li className="letter-nav__item">N</li>
<li className="letter-nav__item">N</li> <li className="letter-nav__item">O</li>
<li className="letter-nav__item">O</li> <li className="letter-nav__item">P</li>
<li className="letter-nav__item">P</li> <li className="letter-nav__item">Q</li>
<li className="letter-nav__item">Q</li> <li className="letter-nav__item">R</li>
<li className="letter-nav__item">R</li> <li className="letter-nav__item">S</li>
<li className="letter-nav__item">S</li> <li className="letter-nav__item">T</li>
<li className="letter-nav__item">T</li> <li className="letter-nav__item">U</li>
<li className="letter-nav__item">U</li> <li className="letter-nav__item">V</li>
<li className="letter-nav__item">V</li> <li className="letter-nav__item">W</li>
<li className="letter-nav__item">W</li> <li className="letter-nav__item">X</li>
<li className="letter-nav__item">X</li> <li className="letter-nav__item">Y</li>
<li className="letter-nav__item">Y</li> <li className="letter-nav__item">Z</li>
<li className="letter-nav__item">Z</li> </ul>
</ul>
</div>
<div className="page-body"> <div className="page-body">
{data.map((itme, index) => { {data.map(({type, list}, index) => {
return ( return (
<> <div key={index}>
<h2 className="country-header">{itme.type}</h2> <h2 className="country-header">{type}</h2>
<ul className="country-list"> <ul className="country-list">
{itme.list.map((val, key) => { {list.map((val, key) => {
return ( return (
<li className="country-item" key={index}> <li className="country-item" key={`${index}-${key}`}>
<a className="country-item__link" href=""> <a className="country-item__link" href="#" onClick={(e) => this.toParentPage(e, val.num)}>
<span className="country-name">{val.name}</span> <span className="country-name">{val.name}</span>
<span className="country-num">+{val.num}</span> <span className="country-num">+{val.num}</span>
</a> </a>
...@@ -1110,7 +1088,7 @@ class Country extends Component { ...@@ -1110,7 +1088,7 @@ class Country extends Component {
})} })}
</ul> </ul>
</> </div>
) )
})} })}
</div> </div>
...@@ -1119,4 +1097,16 @@ class Country extends Component { ...@@ -1119,4 +1097,16 @@ class Country extends Component {
} }
} }
export default Country; export default connect(
\ No newline at end of file ({country}) =>({
country
}),
(dispatch) => {
return bindActionCreators(
{
addCountryNum
},
dispatch
);
}
)(Country);
\ No newline at end of file
src/components/country/index.scss
...@@ -58,9 +58,12 @@ body { ...@@ -58,9 +58,12 @@ body {
// NAV // NAV
.letter-nav { .letter-nav {
position: fixed; position: fixed;
top: 0; top: 44px;
bottom: 0;
right: 2px; right: 2px;
height: 468px;
margin: auto;
z-index: 999;
} }
.letter-nav__item { .letter-nav__item {
...@@ -72,6 +75,7 @@ body { ...@@ -72,6 +75,7 @@ body {
color: #0099FF; color: #0099FF;
text-align: center; text-align: center;
line-height: 12px; line-height: 12px;
cursor: pointer;
} }
.letter-nav__item--active { .letter-nav__item--active {
......
src/components/detail/index.js
...@@ -571,6 +571,7 @@ class Detail extends Component { ...@@ -571,6 +571,7 @@ class Detail extends Component {
isRedPacket && isRedPacket &&
<RedPacket <RedPacket
history={this.props.history} history={this.props.history}
country={this.props.country}
/> />
} }
...@@ -650,7 +651,8 @@ const mapStateToProps = (state) => { ...@@ -650,7 +651,8 @@ const mapStateToProps = (state) => {
// courseInfo: state.courseInfo, // courseInfo: state.courseInfo,
user: { user: {
...state.user ...state.user
} },
country: state.country
} }
} }
......
src/components/detail/redPacket/index.js
...@@ -42,15 +42,46 @@ class RedPacket extends PureComponent { ...@@ -42,15 +42,46 @@ class RedPacket extends PureComponent {
countdownTimer: null, countdownTimer: null,
countdown: '00分00秒', // 绑定时间 countdown: '00分00秒', // 绑定时间
accountInfo: {}, accountInfo: {},
bindInfo: {} bindInfo: {},
country: {
num: '86'
}
} }
} }
componentDidMount() { componentDidMount() {
console.log(this.props);
// 分享链接进入
const share_code = getParam('share_code'); const share_code = getParam('share_code');
const { country } = this.props;
if(country.code) {
this.setState({
country
});
// 检查收否领取过
http.post(
`${API.home}/sys/redPacket/split`,
{
action: 'check',
share_code: country.code
}
).then(res => {
console.log(res);
const { code, data } = res.data;
if(code === 200) {
// is_receive 是否领取过 0-否 1-是
if(data.is_receive) {
this.judgeReceiveStatus(data, 8);
}else {
this.setState({
type: 3
});
}
}
})
}
// 分享链接进入
const { shareInfo } = this.state; const { shareInfo } = this.state;
if(share_code) { if(share_code) {
this.setState({ this.setState({
shareInfo: { shareInfo: {
...@@ -97,22 +128,22 @@ class RedPacket extends PureComponent { ...@@ -97,22 +128,22 @@ class RedPacket extends PureComponent {
} }
// 判断领取状态--领取后 // 判断领取状态--领取后
judgeReceiveStatus = (data) => { judgeReceiveStatus = (data, bindType=4) => {
let txt = '';
let desc = '';
// receive_type 领取类型 1自己 2别人
if(data.receive_type === 1) {
txt = data.red_packet_type === 1? `今日已领取${data.amount}元现金！`: `今日已领取${data.amount}元代金券碎片！`;
desc = '越多好友领取，你所得越多！';
}
if(data.receive_type === 2) {
txt = data.red_packet_type === 1? `您已经领过该红包 ${data.amount}元现金！`: `您已经领过该红包 ${data.amount}元代金券碎片！`;
desc = '每天只能帮好友领取一次哦~';
}
// receive_status 领取状态 1-已领取 2-已领取未绑定 3-已失效 // receive_status 领取状态 1-已领取 2-已领取未绑定 3-已失效
if(data.receive_status === 1) { if(data.receive_status === 1) {
let txt = '';
let desc = '';
// receive_type 领取类型 1自己 2别人
if(data.receive_type === 1) {
txt = data.red_packet_type === 1? `今日已领取${data.amount}元现金！`: `今日已领取${data.amount}元代金券碎片！`;
desc = '越多好友领取，你所得越多！';
}
if(data.receive_type === 2) {
txt = data.red_packet_type === 1? `您已经领过该红包 ${data.amount}元现金！`: `您已经领过该红包 ${data.amount}元代金券碎片！`;
desc = '每天只能帮好友领取一次哦~';
}
this.setState({ this.setState({
type: 9, type: 9,
doneInfo: { doneInfo: {
...@@ -123,7 +154,7 @@ class RedPacket extends PureComponent { ...@@ -123,7 +154,7 @@ class RedPacket extends PureComponent {
}); });
}else if(data.receive_status === 2) { }else if(data.receive_status === 2) {
this.setState({ this.setState({
type: 4, type: bindType,
money: data.amount, money: data.amount,
endTime: data.end_time endTime: data.end_time
}); });
...@@ -336,7 +367,7 @@ class RedPacket extends PureComponent { ...@@ -336,7 +367,7 @@ class RedPacket extends PureComponent {
} }
handleToSend = ({tel, code}) => { handleToSend = ({tel, code}) => {
let { validate, seconds, isFirst, isTimer, captchaInstance } = this.state; let { validate, seconds, isFirst, isTimer, captchaInstance, country: {num = '0086'} } = this.state;
if(validate) { if(validate) {
if (!isFirst) { if (!isFirst) {
Toast.info('请重新进行滑块验证', 2, null, false); Toast.info('请重新进行滑块验证', 2, null, false);
...@@ -349,7 +380,8 @@ class RedPacket extends PureComponent { ...@@ -349,7 +380,8 @@ class RedPacket extends PureComponent {
if(!isTimer) { if(!isTimer) {
if (!tel) { if (!tel) {
Toast.info('手机号码不能为空', 2, null, false); Toast.info('手机号码不能为空', 2, null, false);
}else if (!validateTel(tel)) { }else if(!/^\d+$/.test(tel)) {
// }else if (!validateTel(tel)) {
Toast.info('请输入正确格式的手机号码', 2, null, false); Toast.info('请输入正确格式的手机号码', 2, null, false);
}else { }else {
...@@ -357,7 +389,7 @@ class RedPacket extends PureComponent { ...@@ -357,7 +389,7 @@ class RedPacket extends PureComponent {
http.post( http.post(
`${API['passport-api']}/m/personal/bindPhoneSendCode`, `${API['passport-api']}/m/personal/bindPhoneSendCode`,
{ {
area_code: '0086', area_code: num.padStart(4, '0'),
phone_num: tel phone_num: tel
} }
).then(res => { ).then(res => {
...@@ -438,12 +470,12 @@ class RedPacket extends PureComponent { ...@@ -438,12 +470,12 @@ class RedPacket extends PureComponent {
// 绑定手机 // 绑定手机
toContinueBind = (isValid = 1) => { toContinueBind = (isValid = 1) => {
const { accountInfo: { tel, code} } = this.state; const { accountInfo: { tel, code}, country: {num = '0086'} } = this.state;
// is_valid 是否验证 1:验证（默认）,0不验证 // is_valid 是否验证 1:验证（默认）,0不验证
http.post( http.post(
`${API['passport-api']}/m/personal/bindPhone`, `${API['passport-api']}/m/personal/bindPhone`,
{ {
area_code: '0086', area_code: num.padStart(4, '0'),
phone_num: tel, phone_num: tel,
code: code, code: code,
type: 1, type: 1,
...@@ -480,13 +512,15 @@ class RedPacket extends PureComponent { ...@@ -480,13 +512,15 @@ class RedPacket extends PureComponent {
isTimer, isTimer,
seconds, seconds,
shareInfo: { shareInfo: {
command='' command = '',
share_code = ''
}, },
money, money,
doneInfo, doneInfo,
countdown, countdown,
endTime, endTime,
bindInfo bindInfo,
country
} = this.state; } = this.state;
const cls = classnames('popup-mask',{ const cls = classnames('popup-mask',{
'popup-mask--no': type !== 2 'popup-mask--no': type !== 2
...@@ -657,7 +691,8 @@ class RedPacket extends PureComponent { ...@@ -657,7 +691,8 @@ class RedPacket extends PureComponent {
validate={({tel, code}) => { validate={({tel, code}) => {
const errors = {}; const errors = {};
if (!validateTel(tel)) { // if (!validateTel(tel)) {
if(!/^\d+$/.test(tel)) {
errors.tel = '请填写正确格式的手机号'; errors.tel = '请填写正确格式的手机号';
} }
if (!/[0-9]{6}/.test(code)) { if (!/[0-9]{6}/.test(code)) {
...@@ -678,8 +713,10 @@ class RedPacket extends PureComponent { ...@@ -678,8 +713,10 @@ class RedPacket extends PureComponent {
<Form className="popup-form__content"> <Form className="popup-form__content">
<h4 className="popup-form__title">绑定手机号</h4> <h4 className="popup-form__title">绑定手机号</h4>
<div className="popup-form__item"> <div className="popup-form__item">
<a className="popup-form__button--num"> <a
+86 className="popup-form__button--num"
href={`/country?id=${getParam('id')}&share_code=${share_code}`}>
+{country.num}
<i className="iconfont iconiconfront-69"></i> <i className="iconfont iconiconfront-69"></i>
</a> </a>
<Field <Field
......
src/store/index.js
...@@ -2,12 +2,14 @@ import { combineReducers } from 'redux'; ...@@ -2,12 +2,14 @@ import { combineReducers } from 'redux';
import myCourses from '@/components/study/myCourses/reducers' import myCourses from '@/components/study/myCourses/reducers'
import courseInfo from '@/components/detail/reducers' import courseInfo from '@/components/detail/reducers'
import user from './userReducer' import user from './userReducer'
import country from '@/components/country/countryRedux'
const reducer = combineReducers({ const reducer = combineReducers({
myCourses, myCourses,
courseInfo, courseInfo,
user user,
country
}); });
export default reducer; export default reducer;
\ No newline at end of file
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