detail

src/components/detail/bargain/bargainInfo/bargain-info.scss

-.bargain-bind-iphone {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    display: flex;
-    flex-flow: column;
-    width: 300px;
-    height: 195px;
-    padding: 20px;
-    background: $white;
-    border-radius: 3px;
-
-    .title {
-        text-align: center;
-        font-size: $font_16;
-        margin-bottom: 12px;
-    }
+.bargain-bind-phone {
+  display: flex;
+  flex-flow: column;
+  width: 300px;
+  height: 195px;
+  padding: 20px;
+  background: $white;
+  border-radius: 3px;
+  margin: 200px auto 20px auto;
+
+  .title {
+    text-align: center;
+    font-size: $font_16;
+    margin-bottom: 12px;
+  }
+
+  button, .button {
+    display: inline-block;
+    width: 260px;
+    height: 30px;
+    background: $bg_999;
+    line-height: 28px;
+    text-align: center;
+    -webkit-appearance: none;
+    border: none;
+
+    font-size: $font_16;
+    color: $white;
 
-    .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;
-            }
-        }
+    &.active {
+      background-color: #FADD29;
+      color: #FF4000;
     }
+  }
 
-    button {
-        display: inline-block;
-        width: 260px;
-        height: 30px;
-        background: $bg_999;
 
-        -webkit-appearance: none;
-        border: none;
+  input {
+    width: 100%;
+    height: 30px;
+    -webkit-appearance: none;
+    outline: 0;
+    border: 1px solid #DDDDDD;
+    margin-bottom: 15px;
+    padding-left: 10px;
 
-        font-size: $font_16;
-        color: $white;
-        text-align: center;
-        line-height: 30px;
+    &::-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 { InputItem, List } from "antd-mobile";
+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";
+import {Link} from "react-router-dom";
 
 
-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: '',
+        isBargain: true
+    }
+
+    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 if (res.data.errno === 410) {
+                Toast.info('该手机号已注册，请使用该手机号登录，发起砍价。', 3, null, false)
+                this.setState({
+                    isBargain: 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.iWantBargain()
+            } 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>
+                {
+                    this.state.isBargain &&
+                    <button onClick={this.handleClick}
+                            className={validateTel(mobile) && code ? 'active' : ''}>先砍一刀</button>
+                }
+                {
+                    !this.state.isBargain &&
+                    <Link className='button active' to={`/passport/login`}>去登录</Link>
+                }
+            </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, differenceInDays} from "date-fns"
-import {api, getParam, http} from "@/utils"
+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 {
@@ -70,7 +70,6 @@ class Bargain extends Component {
         })
     }
 
-
     // 查看更多
     getMore = () => {
         this.setState({
@@ -197,8 +196,7 @@ class Bargain extends Component {
                         {/*绑定手机号*/}
                         {
                             this.state.status === 3 &&
-                            <BargainInfo/>
-
+                            <BargainInfo iWantBargain={this.iWantBargain}/>
                         }
 
 

src/components/detail/carousel/index.js

@@ -16,9 +16,9 @@ class Carouselw extends Component {
     componentDidMount() {
         const _this = this
         _this.getList()
-        // this.timer = setInterval(function () {
-        //     _this.getList()
-        // },10000);
+        this.timer = setInterval(function () {
+            _this.getList()
+        },10000);
 
     }
 

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