Skip to content

M
mr-julyedu
Commit 30e40b6d by FE
Options

bargain bind phone modify

parent bec5585c
Showing with 388 additions and 124 deletions
src/common/CallApp/index.js
......@@ -24,18 +24,15 @@ const options = {
class OpenApp extends Component {
// callApp = new CallApp(options)
callApp = null
callApp = new CallApp(options)
// callApp = null
static defaultProps = {
text: '在APP打开'
}
componentWillMount() {
this.callApp = new CallApp({
...options,
path: this.props.path || '/'
});
this.callApp = new CallApp({});
}
......
src/components/bargainMiddlePage/barcode/index.js
......@@ -23,11 +23,12 @@ class FollowBarcode extends Component {
this.setState({
url: data.url
});
const _this = this;
return new Promise(resolve => {
QRCode.toDataURL(data.url, {}, function (err, url) {
this.setState({
_this.setState({
codeUrl: url
})
});
});
resolve();
});
......
src/components/detail/bargain/bargainInfo/bargain-info.scss
.bargain-bind-phone {
display: flex;
flex-flow: column;
.bargain-phone-popup {
width: 300px;
height: 195px;
margin: 200px auto 20px;
padding: 20px;
background: $white;
border-radius: 3px;
margin: 200px auto 20px auto;
.title {
text-align: center;
font-size: $font_16;
margin-bottom: 12px;
}
background-color: $white;
}
button, .button {
display: inline-block;
width: 260px;
height: 30px;
background: $bg_999;
line-height: 28px;
text-align: center;
-webkit-appearance: none;
border: none;
.bargain-phone-popup__title {
margin: 0 0 12px;
font-size: 15px;
font-weight: normal;
text-align: center;
line-height: 1;
}
font-size: $font_16;
color: $white;
.bargain-phone-popup__item {
display: flex;
align-items: center;
width: 100%;
height: 30px;
margin-top: 15px;
border: 1px solid #ddd;
box-sizing: border-box;
&.active {
background-color: #FADD29;
color: #FF4000;
}
&.active {
border: 1px solid $active;
color: $active;
}
input {
width: 100%;
height: 30px;
-webkit-appearance: none;
outline: 0;
border: 1px solid #DDDDDD;
margin-bottom: 15px;
padding-left: 10px;
border-style: none;
outline: 0;
-webkit-appearance: none;
&::-webkit-input-placeholder {
color: $color_999;
}
&:focus {
border: 1px solid $active;
color: $active;
&.bargain-phone-popup__ipt {
border-left: 1px solid #ddd;
}
}
}
label {
display: block;
position: relative;
.bargain-phone-popup__button--num {
display: inline-flex;
align-items: center;
padding: 0 5px;
color: $color_999;
}
.bargain-phone-popup__button--send {
width: 120px;
border-style: none;
font-size: 13px;
color: $color_999;
background-color: transparent;
cursor: pointer;
outline: none;
&.active {
color: $active;
}
}
.bargain-phone-popup__button--bargain {
display: block;
width: 100%;
height: 30px;
margin-top: 20px;
border-style: none;
font-size: 15px;
color: $white;
line-height: 30px;
text-align: center;
background-color: $bg_999;
outline: none;
-webkit-appearance: none;
&.active {
color: #FF4000;
background-color: #FADD29;
}
}
.send-code {
position: absolute;
right: 15px;
top: 8px;
font-size: 13px;
color: $color_999;
.popup-bind--bargain {
.popup-bind__content {
width: 300px;
margin: 200px auto 20px;
padding: 20px;
border-radius: 3px;
}
.popup-bind__title {
margin: 0 0 12px;
font-size: 15px;
font-weight: normal;
}
.popup-bind__desc {
padding: 0;
font-size: 12px;
}
.popup-bind__button {
padding: 0;
}
}
\ No newline at end of file
src/components/detail/bargain/bargainInfo/index.js
......@@ -3,8 +3,9 @@ import {InputItem, List} from "antd-mobile";
import './bargain-info.scss'
import {validateTel} from "@/utils";
import {Toast} from 'antd-mobile'
import { http } from "@/utils";
import { http, getParam } from "@/utils";
import {Link} from "react-router-dom";
import classnames from 'classnames';
class BargainInfo extends Component {
......@@ -12,7 +13,11 @@ class BargainInfo extends Component {
state = {
mobile: '',
code: '',
isBargain: true
num: '86',
isBargain: true,
isFocus: false,
bindInfo: {},
isTip: false
}
handleChange = e => {
......@@ -24,77 +29,249 @@ class BargainInfo extends Component {
})
}
// 获取短信验证码
sendCode = () => {
console.log(validateTel(this.state.mobile));
if (!validateTel(this.state.mobile)) {
Toast.info('请输入正确的手机号')
return
const { country } = this.props;
const { mobile } = this.state;
if(!/^\d+$/.test(mobile)){
Toast.info('请输入正确的手机号');
return;
}
http.post(`${API['base-api']}/sys/bind_send_sms`, {
phone_num: this.state.mobile
}).then(res => {
if (res.data.code == 200) {
Toast.info('验证码发送成功', 2, null, false)
} else if (res.data.errno === 410) {
Toast.info('该手机号已注册，请使用该手机号登录，发起砍价。', 3, null, false)
this.setState({
isBargain: false
})
} else {
Toast.info(res.data.msg)
// 获取验证码
http.post(
`${API['passport-api']}/m/personal/bindPhoneSendCode`,
{
area_code: country.padStart(4, '0'),
phone_num: mobile
}
})
).then(res => {
const { errno, msg } = res.data;
if(errno === 200) {
Toast.info('验证码发送成功', 2, null, false);
}else {
Toast.info(msg);
}
});
// http.post(`${API['base-api']}/sys/bind_send_sms`, {
// phone_num: this.state.mobile
// }).then(res => {
// if (res.data.code == 200) {
// Toast.info('验证码发送成功', 2, null, false)
// } else if (res.data.errno === 410) {
// Toast.info('该手机号已注册，请使用该手机号登录，发起砍价。', 3, null, false)
// this.setState({
// isBargain: false
// })
// } else {
// Toast.info(res.data.msg)
// }
// })
}
handleClick = () => {
// 绑定手机号
handleClick = (isValid = 1) => {
const { country, iWantBargain } = this.props;
const { code, mobile } = this.state;
if (!this.state.code) {
Toast.info('请填写验证码')
return
return;
}
http.post(`${API.home}/m/user/bindMobile`, {
...this.state
}).then(res => {
if (res.data.code == 200) {
Toast.info('绑定手机号成功', 2, null, false)
this.props.iWantBargain()
} else {
Toast.info(res.data.msg)
// is_valid 是否验证 1:验证（默认）,0不验证
http.post(
`${API['passport-api']}/m/personal/bindPhone`,
{
area_code: country.padStart(4, '0'),
phone_num: mobile,
code: code,
type: 1,
is_valid: isValid
}
})
).then(res => {
const { errno, data, msg } = res.data;
if(errno === 200) {
if(isValid) {
if(data.tip_info) {
this.setState({
isTip: true,
bindInfo: data.tip_info
})
}else {
iWantBargain();
}
}else {
iWantBargain();
}
}else {
Toast.info(msg);
}
console.log(res);
});
// http.post(`${API.home}/m/user/bindMobile`, {
// ...this.state
// }).then(res => {
// if (res.data.code == 200) {
// Toast.info('绑定手机号成功', 2, null, false)
// this.props.iWantBargain()
// } else {
// Toast.info(res.data.msg)
// }
// })
}
render() {
let {mobile, code} = this.state
const { country, toClose } = this.props;
const { mobile, code, isBargain, isFocus, bindInfo, isTip } = this.state;
const bool = /^\d+$/.test(mobile);
return (
<div className={'bargain-bind-phone'}>
<div className="title">绑定手机，先砍一刀</div>
<List className={'list'}>
<input type="tel" onChange={this.handleChange} name='mobile' placeholder='手机号' maxLength={11}/>
<label htmlFor="code">
<input type="tel" id='code' onChange={this.handleChange} name='code' placeholder='验证码'
maxLength={6}/>
<div className={'send-code'} onClick={this.sendCode}>发送验证码</div>
</label>
</List>
<>
{/* 该手机号已绑定其他帐号 */}
{
this.state.isBargain &&
<button onClick={this.handleClick}
className={validateTel(mobile) && code ? 'active' : ''}>先砍一刀</button>
isTip &&
<div className="popup-bind popup-bind--bargain">
<div className="popup-bind__content">
<h4 className="popup-bind__title">绑定确认</h4>
<p className="popup-bind__desc">该手机号已绑定到以下账号，继续绑定将解除以下绑定状态</p>
<ul className="popup-bind__list">
{
bindInfo['email'] &&
<li className="popup-bind__account">
{/* 邮箱 */}
<i className="iconfont iconduanxin"></i>
<p className="popup-bind__account--name">{bindInfo['email']}</p>
</li>
}
{
bindInfo['wechat_nickname'] &&
<li className="popup-bind__account">
{/* wechat */}
<i className="icon-wachat"></i>
<p className="popup-bind__account--name">{bindInfo['wechat_nickname']}</p>
</li>
}
{
bindInfo['qq_nickname'] &&
<li className="popup-bind__account">
{/* qq */}
<i className="icon-qq"></i>
<p className="popup-bind__account--name">{bindInfo['qq_nickname']}</p>
</li>
}
{
bindInfo['sina_nickname'] &&
<li className="popup-bind__account">
{/* 微博 */}
<i className="icon-sina"></i>
<p className="popup-bind__account--name">{bindInfo['sina_nickname']}</p>
</li>
}
</ul>
<div className="popup-bind__button">
<button
className="popup-bind__button--cancle"
onClick={toClose}>取消</button>
<button
className="popup-bind__button--confirm"
onClick={() => this.handleClick(0)}>继续绑定</button>
</div>
</div>
</div>
}
{
!this.state.isBargain &&
<Link className='button active' to={`/passport/login`}>去登录</Link>
!isTip &&
<div className="bargain-phone-popup">
<h2 className="bargain-phone-popup__title">绑定手机，先砍一刀</h2>
<div
className={classnames(
"bargain-phone-popup__item",
{
'active': isFocus
}
)}
>
<a
className="bargain-phone-popup__button--num"
href={`/country?id=${getParam('id')}`}
>
+{country}
<i className="iconfont iconiconfront-69"></i>
</a>
<input
className="bargain-phone-popup__ipt"
type="tel"
onChange={this.handleChange}
onFocus={() => {
this.setState({
isFocus: true
});
}}
onBlur={() => {
this.setState({
isFocus: false
});
}}
name='mobile'
placeholder='手机号'
maxLength={11}
/>
</div>
<div className="bargain-phone-popup__item">
<input
type="tel"
id='code'
onChange={this.handleChange}
name='code'
placeholder='验证码'
maxLength={6}
/>
<button
type="button"
className={classnames(
'bargain-phone-popup__button--send',
{
'active': bool
}
)}
onClick={this.sendCode}
>发送验证码</button>
</div>
{
isBargain
? (
<button
type="button"
onClick={this.handleClick}
className={classnames(
'bargain-phone-popup__button--bargain',
{
'active': bool && code
}
)}
>先砍一刀</button>
)
: (
<Link
className='bargain-phone-popup__button--bargain active'
to={`/passport/login`}
>去登录</Link>
)
}
</div>
}
</div>
</>
);
}
}
export default BargainInfo
\ No newline at end of file
export default BargainInfo;
\ No newline at end of file
src/components/detail/bargain/index.js
......@@ -24,14 +24,32 @@ class Bargain extends Component {
status: '',
bargainCode: '',
time: '',
barInfo: {}
barInfo: {},
country: '86'
}
}
componentDidMount() {
this.getBargainInfo();
this.judgePopupTypeFromCountry();
}
// // 选择区号后进入
judgePopupTypeFromCountry = () => {
// console.log(this.props);
const { country, delCountryNum } = this.props;
if(country.num) {
this.setState({
country: country.num,
isShowOverlay: true,
status: 3,
});
// 清除
delCountryNum();
}
}
// 获取助理好友
getBargainRankList = (params = {}) => {
http.post(`${API.home}/m/bargain/rankList`, params).then((res) => {
......@@ -131,12 +149,12 @@ class Bargain extends Component {
// 我要砍价
iWantBargain = () => {
const {user} = this.props
const uid = user && user.data && user.data.uid
const { history, user } = this.props
const uid = user && user.data && user.data.uid;
if(!uid){
this.props.history.push('/passport/login')
history.push('/passport/login');
} else {
this.toKanjia(getParam('id'), 1, 0)
this.toKanjia(getParam('id'), 1, 0);
}
}
......@@ -146,26 +164,44 @@ class Bargain extends Component {
course_id: id,
type: type, // 1 用户自己砍价 2 使用砍价神器 3 好友助力砍价 4 好友第二次助力
parent_uid: uid // 被助力人id 【自己本人操作传0】
}
};
const { history } = this.props;
http.post(`${API.home}/m/bargain/toBargain`, data).then((res) => {
const { data: { data, code } } = res;
if (code === 200) {
if (type === 2) {
// user_status 用户状态 1-关注公众号，2-绑定手机号 3-再砍一刀 （是发起人没有这个字段）
if(data.user_status === 2) {
this.setState({
isShowOverlay: true,
status: 2,
})
} else {
if (data.user_status === 2) {
status: 3,
});
}else {
if(type === 2) {
this.setState({
isShowOverlay: true,
status: 3,
})
} else {
status: 2,
});
}else {
history.push(`/bargain-middle-page?id=${getParam('id')}&bargaincode=${data.bargain_code}&is_originator=1`)
}
}
// if (type === 2) {
// this.setState({
// isShowOverlay: true,
// status: 2,
// })
// } else {
// // user_status 用户状态 1-关注公众号，2-绑定手机号 3-再砍一刀 （是发起人没有这个字段）
// if (data.user_status === 2) {
// this.setState({
// isShowOverlay: true,
// status: 3,
// })
// } else {
// history.push(`/bargain-middle-page?id=${getParam('id')}&bargaincode=${data.bargain_code}&is_originator=1`)
// }
// }
} else {
Toast.info(res.data.msg, 2)
}
......@@ -182,7 +218,7 @@ class Bargain extends Component {
}
render() {
const { list, outList, barInfo } = this.state;
const { list, outList, barInfo, country } = this.state;
const {user} = this.props
const uid = user && user.data && user.data.uid
return (
......@@ -190,7 +226,7 @@ class Bargain extends Component {
{/*bargain_status 砍价状态 0-砍价中，1砍价结束，待支付，2砍价过期（没有砍价记录没有砍价信息），3已购买*/}
{
(barInfo.bargain_status === 2 || !uid) &&
(barInfo.bargain_status === 2 || (getParam('id') === '139' && barInfo.bargain_status === 3) || !uid) &&
<BargainIntro limitPeople={barInfo.limit_people} iWantBargain={this.iWantBargain}/>
}
{
......@@ -212,7 +248,7 @@ class Bargain extends Component {
{/*绑定手机号*/}
{
this.state.status === 3 &&
<BargainInfo iWantBargain={this.iWantBargain}/>
<BargainInfo country={country} iWantBargain={this.iWantBargain} toClose={this.close} />
}
......
src/components/detail/btnstatus/index.js
......@@ -320,7 +320,7 @@ class BtnStatus extends Component {
<span onClick={this.tobuy}>直接购买</span>
</button>
{
(barInfo.bargain_status === 2 || !uid) &&
(barInfo.bargain_status === 2|| (getParam('id') === '139' && barInfo.bargain_status === 3) || !uid) &&
<button className='btn btn-s bg-E02E24' onClick={this.toKanjia}>
我要砍价
</button>
......
src/components/detail/index.js
......@@ -610,10 +610,15 @@ class Detail extends Component {
/>
}
{/*砍价*/}
{/*
* 砍价
* is_baoming 否报名 0-未购买弹出报名 1-已购买弹出开始学习
* is_dist 是否分销课程
* is_bargain 是否砍价课程
*/}
{
course_info.is_baoming === 0 && (!course_info.is_aist) && course_info.is_bargain &&
<Bargain/>
<Bargain country={this.props.country} delCountryNum={this.props.delCountryNum} />
}
{/*课程介绍、大纲*/}
......
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