Skip to content

M
mr-julyedu
Commit 91e0a70c by xuzhenghua
Options

pull

parents 1d526305 7c6706c9
Showing with 0 additions and 420 deletions
src/components/detail/bargain/bargainInfo/bargain-info.scss deleted 100644 → 0
.bargain-phone-popup {
width: 300px;
height: 195px;
margin: 200px auto 20px;
padding: 20px;
border-radius: 3px;
background-color: $white;
}
.bargain-phone-popup__title {
margin: 0 0 12px;
font-size: 15px;
font-weight: normal;
text-align: center;
line-height: 1;
}
.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 {
border: 1px solid $active;
color: $active;
}
input {
width: 100%;
padding-left: 10px;
border-style: none;
outline: 0;
-webkit-appearance: none;
&::-webkit-input-placeholder {
color: $color_999;
}
&.bargain-phone-popup__ipt {
border-left: 1px solid #ddd;
}
}
}
.bargain-phone-popup__button--num {
display: inline-flex;
align-items: center;
padding: 0 5px;
color: $color_999;
}
.bargain-phone-popup__button--send {
width: 136px;
border-style: none;
font-size: 13px;
color: $color_999;
text-align: right;
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;
}
}
.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 deleted 100644 → 0
import React, {Component} from 'react';
import {InputItem, List} from "antd-mobile";
import './bargain-info.scss'
import {validateTel} from "@/utils";
import {Toast} from 'antd-mobile'
import { http, getParam } from "@/utils";
import {Link} from "react-router-dom";
import classnames from 'classnames';
class BargainInfo extends Component {
state = {
mobile: '',
code: '',
num: '86',
isBargain: true,
isFocus: false,
bindInfo: {},
isTip: false,
seconds: 60,
isTimer: false, // 是否开始倒计时
}
handleChange = e => {
let {name, value} = e.target
this.setState({
[name]: value
})
}
// 获取短信验证码
sendCode = () => {
const { country } = this.props;
let { mobile, isTimer, seconds } = this.state;
if(!isTimer) {
if(!/^\d+$/.test(mobile)){
Toast.info('请输入正确的手机号');
return;
}
// 获取验证码
http.post(
`${API['passport-api']}/m/personal/bindPhoneSendCode`,
{
area_code: `00${country}`,
phone_num: mobile
}
).then(res => {
const { errno, msg } = res.data;
if(errno === 200) {
Toast.info('验证码发送成功', 2, null, false);
// 倒计时
this.timer = window.setInterval(() => {
console.log(seconds);
if (seconds <= 0) {
window.clearInterval(this.timer);
this.setState({
isTimer: false,
seconds: 60
});
}else {
this.setState({
isTimer: true,
seconds: --seconds
});
}
}, 1000);
}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 = (isValid = 1) => {
const { country, iWantBargain } = this.props;
const { code, mobile } = this.state;
if (!mobile) {
Toast.info('请填手机号码');
return;
}
if (!code) {
Toast.info('请填写验证码');
return;
}
// is_valid 是否验证 1:验证（默认）,0不验证
http.post(
`${API['passport-api']}/m/personal/bindPhone`,
{
area_code: `00${country}`,
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);
}
});
// 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() {
const { country, toClose } = this.props;
const { mobile, code, isBargain, isFocus, bindInfo, isTip, isTimer, seconds } = this.state;
const bool = /^\d+$/.test(mobile);
return (
<>
{/* 该手机号已绑定其他帐号 */}
{
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>
}
{
!isTip &&
<div className="bargain-phone-popup">
<h2 className="bargain-phone-popup__title">绑定手机，先砍一刀</h2>
<div
className={classnames(
"bargain-phone-popup__item",
{
'active': isFocus
}
)}
>
<Link
className="bargain-phone-popup__button--num"
to={`/country?id=${getParam('id')}&from=bargain`}
>
+{country}
<i className="iconfont iconiconfront-69"></i>
</Link>
<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}
>
{isTimer? `重新发送${seconds}s` : '发送验证码'}
</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>
}
</>
);
}
}
export default BargainInfo;
\ 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