Skip to content

M
mr-julyedu
Commit 4fcf6337 by zhanghaozhe
Options

砍价绑定手机号

parent 9544334e
Showing with 140 additions and 63 deletions
src/components/detail/bargain/bargainInfo/bargain-info.scss
.bargain-bind-iphone {
.bargain-bind-phone {
position: absolute;
top: 50%;
left: 50%;
......@@ -17,34 +17,6 @@
margin-bottom: 12px;
}
.list {
.am-list-item {
height: 30px;
min-height: 30px;
border: 1px solid $border_ddd;
input {
font-size: $font_12;
}
}
.am-list-item {
margin-bottom: 15px;
}
.am-list-line {
&::after {
display: none;
}
}
.am-list-body {
&::after {
display: none;
}
}
}
button {
display: inline-block;
width: 260px;
......@@ -58,5 +30,39 @@
color: $white;
text-align: center;
line-height: 30px;
&.active {
background-color: #FADD29;
color: #FF4000;
}
}
input {
width: 100%;
height: 30px;
-webkit-appearance: none;
outline: 0;
border: 1px solid #DDDDDD;
margin-bottom: 15px;
padding-left: 10px;
&::-webkit-input-placeholder{
color: $color_999;
}
&:focus{
border: 1px solid $active;
color: $active;
}
}
label{
display: block;
position: relative;
}
.send-code {
position: absolute;
right: 15px;
top: 8px;
font-size: 13px;
color: $color_999;
}
}
\ No newline at end of file
src/components/detail/bargain/bargainInfo/index.js
import React from 'react';
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, api } from "@/utils";
const BargainInfo = () => {
return (
<div className={'bargain-info'}>
<div className="title">绑定手机，先砍一刀</div>
<List className={'list'}>
<InputItem
placeholder={'手机号'}
/>
<InputItem
placeholder={'验证码'}
/>
</List>
<button>先砍一刀</button>
</div>
);
};
class BargainInfo extends Component {
state = {
mobile: '',
code: ''
}
handleChange = e => {
let {name, value} = e.target
this.setState({
[name]: value
})
}
sendCode = () => {
console.log(validateTel(this.state.mobile));
if (!validateTel(this.state.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 {
Toast.info(res.data.msg)
}
})
}
handleClick = () => {
if (!this.state.code) {
Toast.info('请填写验证码')
return
}
http.post(`${api.home}/m/user/bindMobile`, {
...this.state
}).then(res => {
if (res.data.code == 200) {
Toast.info('绑定手机号成功', 2, null, false)
this.props.complete()
} else {
Toast.info(res.data.msg)
}
})
}
render() {
let {mobile, code} = this.state
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>
<button onClick={this.handleClick} className={validateTel(mobile) && code ? 'active' : ''}>先砍一刀</button>
</div>
);
}
}
export default BargainInfo
\ No newline at end of file
src/components/detail/bargain/index.js
import React, {Component, useState} from 'react'
import React, { Component, useState } from 'react'
import './bargain.scss'
import {Flex, Toast} from "antd-mobile"
import { Flex, Toast } from "antd-mobile"
import Overlay from '../overlay'
import BargainInfo from './bargainInfo'
import {differenceInSeconds, differenceInMinutes, differenceInHours} from "date-fns"
import {api, getParam, http} from "@/utils"
import { differenceInSeconds, differenceInMinutes, differenceInHours } from "date-fns"
import { api, getParam, http } from "@/utils"
import Ranking from "@/components/bargainMiddlePage/ranking"
import {compose} from "redux"
import {withRouter} from 'react-router-dom'
import { compose } from "redux"
import { withRouter } from 'react-router-dom'
class Bargain extends Component {
constructor(props) {
super(props)
this.state = {
isShowOverlay: false,
// isShowOverlay: false,
isShowOverlay: true,
kanjiaIcon: require('./image/kanjia_icon.png'),
info: '',
outList: [],
list: [],
limitPeople: '',
status: '',
// status: '',
status: 3,
bargainCode: '',
time: ''
}
......@@ -70,6 +72,11 @@ class Bargain extends Component {
})
}
//绑定手机号完成
bindComplete = () => {
}
// 查看更多
getMore = () => {
......@@ -203,8 +210,7 @@ class Bargain extends Component {
{/*绑定手机号*/}
{
this.state.status === 3 &&
<BargainInfo/>
<BargainInfo complete={this.bindComplete}/>
}
{/*砍价成功去分享*/}
{
......@@ -308,9 +314,9 @@ function BargainStatus(props) {
<div className={'first-row'}>
<div>
已砍<span className={'indicator'}>{props.info.bargain_price}元</span>
<span className={'time hour'}>{String(hour).padStart(2,0)}</span> :&nbsp;
<span className={'time min'}>{String(min).padStart(2,0)}</span> :&nbsp;
<span className={'time sec'}>{String(sec).padStart(2,0)}</span>
<span className={'time hour'}>{String(hour).padStart(2, 0)}</span> :&nbsp;
<span className={'time min'}>{String(min).padStart(2, 0)}</span> :&nbsp;
<span className={'time sec'}>{String(sec).padStart(2, 0)}</span>
<span className='over'>后砍价结束</span>
</div>
<div onClick={props.getMore}>{props.info.assist_num}位好友助力></div>
......@@ -352,9 +358,9 @@ function BargainStatus(props) {
</div>
<div className="time-tobuy">
砍价金额将于
<span className={'time hour'}>{String(hour).padStart(2,0)}</span> :&nbsp;
<span className={'time min'}>{String(min).padStart(2,0)}</span> :&nbsp;
<span className={'time sec'}>{String(sec).padStart(2,0)}</span>
<span className={'time hour'}>{String(hour).padStart(2, 0)}</span> :&nbsp;
<span className={'time min'}>{String(min).padStart(2, 0)}</span> :&nbsp;
<span className={'time sec'}>{String(sec).padStart(2, 0)}</span>
后清零，请尽快完成支付
</div>
</Flex>
......
src/components/detail/overlay/overlay.scss
......@@ -5,5 +5,5 @@
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 9999;
z-index: 999;
}
\ 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