砍价绑定手机号

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