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 { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { getParam } from '@/utils';
import { addCountryNum } from './countryRedux';
import { HeaderBar } from '@/common'
import './index.scss';
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() {
const data = [
{
......@@ -384,15 +400,6 @@ class Country extends Component {
]
},
{
type: 'I',
list: [
{
name: '',
num: ''
}
]
},
{
type: 'J',
list: [
{
......@@ -716,15 +723,6 @@ class Country extends Component {
]
},
{
type: 'Q',
list: [
{
name: '',
num: ''
}
]
},
{
type: 'R',
list: [
{
......@@ -877,24 +875,6 @@ class Country extends Component {
]
},
{
type: 'U',
list: [
{
name: '',
num: ''
}
]
},
{
type: 'V',
list: [
{
name: '',
num: ''
}
]
},
{
type: 'W',
list: [
{
......@@ -1061,47 +1041,45 @@ class Country extends Component {
];
return (
<>
<HeaderBar title="选择国家和地区" arrow={true}></HeaderBar>
<div className="letter-nav">
<ul>
<li className="letter-nav__item">A</li>
<li className="letter-nav__item letter-nav__item--active">B</li>
<li className="letter-nav__item">C</li>
<li className="letter-nav__item">D</li>
<li className="letter-nav__item">E</li>
<li className="letter-nav__item">F</li>
<li className="letter-nav__item">G</li>
<li className="letter-nav__item">H</li>
<li className="letter-nav__item">I</li>
<li className="letter-nav__item">J</li>
<li className="letter-nav__item">K</li>
<li className="letter-nav__item">L</li>
<li className="letter-nav__item">M</li>
<li className="letter-nav__item">N</li>
<li className="letter-nav__item">O</li>
<li className="letter-nav__item">P</li>
<li className="letter-nav__item">Q</li>
<li className="letter-nav__item">R</li>
<li className="letter-nav__item">S</li>
<li className="letter-nav__item">T</li>
<li className="letter-nav__item">U</li>
<li className="letter-nav__item">V</li>
<li className="letter-nav__item">W</li>
<li className="letter-nav__item">X</li>
<li className="letter-nav__item">Y</li>
<li className="letter-nav__item">Z</li>
</ul>
</div>
<HeaderBar title="选择国家和地区" />
<ul className="letter-nav">
<li className="letter-nav__item">A</li>
<li className="letter-nav__item letter-nav__item--active">B</li>
<li className="letter-nav__item">C</li>
<li className="letter-nav__item">D</li>
<li className="letter-nav__item">E</li>
<li className="letter-nav__item">F</li>
<li className="letter-nav__item">G</li>
<li className="letter-nav__item">H</li>
<li className="letter-nav__item">I</li>
<li className="letter-nav__item">J</li>
<li className="letter-nav__item">K</li>
<li className="letter-nav__item">L</li>
<li className="letter-nav__item">M</li>
<li className="letter-nav__item">N</li>
<li className="letter-nav__item">O</li>
<li className="letter-nav__item">P</li>
<li className="letter-nav__item">Q</li>
<li className="letter-nav__item">R</li>
<li className="letter-nav__item">S</li>
<li className="letter-nav__item">T</li>
<li className="letter-nav__item">U</li>
<li className="letter-nav__item">V</li>
<li className="letter-nav__item">W</li>
<li className="letter-nav__item">X</li>
<li className="letter-nav__item">Y</li>
<li className="letter-nav__item">Z</li>
</ul>
<div className="page-body">
{data.map((itme, index) => {
{data.map(({type, list}, index) => {
return (
<>
<h2 className="country-header">{itme.type}</h2>
<div key={index}>
<h2 className="country-header">{type}</h2>
<ul className="country-list">
{itme.list.map((val, key) => {
{list.map((val, key) => {
return (
<li className="country-item" key={index}>
<a className="country-item__link" href="">
<li className="country-item" key={`${index}-${key}`}>
<a className="country-item__link" href="#" onClick={(e) => this.toParentPage(e, val.num)}>
<span className="country-name">{val.name}</span>
<span className="country-num">+{val.num}</span>
</a>
......@@ -1110,7 +1088,7 @@ class Country extends Component {
})}
</ul>
</>
</div>
)
})}
</div>
......@@ -1119,4 +1097,16 @@ class Country extends Component {
}
}
export default Country;
\ No newline at end of file
export default connect(
({country}) =>({
country
}),
(dispatch) => {
return bindActionCreators(
{
addCountryNum
},
dispatch
);
}
)(Country);
\ No newline at end of file
src/components/country/index.scss
......@@ -58,9 +58,12 @@ body {
// NAV
.letter-nav {
position: fixed;
top: 0;
top: 44px;
bottom: 0;
right: 2px;
height: 468px;
margin: auto;
z-index: 999;
}
.letter-nav__item {
......@@ -72,6 +75,7 @@ body {
color: #0099FF;
text-align: center;
line-height: 12px;
cursor: pointer;
}
.letter-nav__item--active {
......
src/components/detail/index.js
......@@ -571,6 +571,7 @@ class Detail extends Component {
isRedPacket &&
<RedPacket
history={this.props.history}
country={this.props.country}
/>
}
......@@ -650,7 +651,8 @@ const mapStateToProps = (state) => {
// courseInfo: state.courseInfo,
user: {
...state.user
}
},
country: state.country
}
}
......
src/components/detail/redPacket/index.js
......@@ -42,15 +42,46 @@ class RedPacket extends PureComponent {
countdownTimer: null,
countdown: '00分00秒', // 绑定时间
accountInfo: {},
bindInfo: {}
bindInfo: {},
country: {
num: '86'
}
}
}
componentDidMount() {
// 分享链接进入
console.log(this.props);
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;
if(share_code) {
this.setState({
shareInfo: {
......@@ -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-已失效
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({
type: 9,
doneInfo: {
......@@ -123,7 +154,7 @@ class RedPacket extends PureComponent {
});
}else if(data.receive_status === 2) {
this.setState({
type: 4,
type: bindType,
money: data.amount,
endTime: data.end_time
});
......@@ -336,7 +367,7 @@ class RedPacket extends PureComponent {
}
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 (!isFirst) {
Toast.info('请重新进行滑块验证', 2, null, false);
......@@ -349,7 +380,8 @@ class RedPacket extends PureComponent {
if(!isTimer) {
if (!tel) {
Toast.info('手机号码不能为空', 2, null, false);
}else if (!validateTel(tel)) {
}else if(!/^\d+$/.test(tel)) {
// }else if (!validateTel(tel)) {
Toast.info('请输入正确格式的手机号码', 2, null, false);
}else {
......@@ -357,7 +389,7 @@ class RedPacket extends PureComponent {
http.post(
`${API['passport-api']}/m/personal/bindPhoneSendCode`,
{
area_code: '0086',
area_code: num.padStart(4, '0'),
phone_num: tel
}
).then(res => {
......@@ -438,12 +470,12 @@ class RedPacket extends PureComponent {
// 绑定手机
toContinueBind = (isValid = 1) => {
const { accountInfo: { tel, code} } = this.state;
const { accountInfo: { tel, code}, country: {num = '0086'} } = this.state;
// is_valid 是否验证 1:验证（默认）,0不验证
http.post(
`${API['passport-api']}/m/personal/bindPhone`,
{
area_code: '0086',
area_code: num.padStart(4, '0'),
phone_num: tel,
code: code,
type: 1,
......@@ -480,13 +512,15 @@ class RedPacket extends PureComponent {
isTimer,
seconds,
shareInfo: {
command=''
command = '',
share_code = ''
},
money,
doneInfo,
countdown,
endTime,
bindInfo
bindInfo,
country
} = this.state;
const cls = classnames('popup-mask',{
'popup-mask--no': type !== 2
......@@ -657,7 +691,8 @@ class RedPacket extends PureComponent {
validate={({tel, code}) => {
const errors = {};
if (!validateTel(tel)) {
// if (!validateTel(tel)) {
if(!/^\d+$/.test(tel)) {
errors.tel = '请填写正确格式的手机号';
}
if (!/[0-9]{6}/.test(code)) {
......@@ -678,8 +713,10 @@ class RedPacket extends PureComponent {
<Form className="popup-form__content">
<h4 className="popup-form__title">绑定手机号</h4>
<div className="popup-form__item">
<a className="popup-form__button--num">
+86
<a
className="popup-form__button--num"
href={`/country?id=${getParam('id')}&share_code=${share_code}`}>
+{country.num}
<i className="iconfont iconiconfront-69"></i>
</a>
<Field
......
src/store/index.js
......@@ -2,12 +2,14 @@ import { combineReducers } from 'redux';
import myCourses from '@/components/study/myCourses/reducers'
import courseInfo from '@/components/detail/reducers'
import user from './userReducer'
import country from '@/components/country/countryRedux'
const reducer = combineReducers({
myCourses,
courseInfo,
user
user,
country
});
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