detail

src/components/Index/index.js

@@ -9,6 +9,8 @@ import {http, api} from '@/utils'
 import LiveRoom from './liveRoom'
 import {Link} from "react-router-dom"
 import {Toast} from 'antd-mobile'
+import {CallApp} from '../../common'
+
 
 
 const animateTypes = Swiper.animateTypes
@@ -98,7 +100,9 @@ class Index extends Component {
                 <div className='header'>
                     <img className="logo"
                          src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/img/index/logo.png" alt=""/>
-                    <button className='to-app'>在APP打开</button>
+                    {/*<button className='to-app'>在APP打开</button>*/}
+                    <CallApp className='to-app'></CallApp>
+
                     <i className='iconfont iconiconfront- search' onClick={this.toSearch.bind(this)}></i>
                 </div>
 
@@ -252,7 +256,7 @@ function ScrollBox(props) {
                                         <span className='no-start'>即将开始</span>
                                     }
                                     {
-                                        item.live_status === 1 &&
+                                        (item.live_status === 1 || item.live_status === 10) &&
                                         <span className='start'>正在直播</span>
                                     }
                                     <img className="item-img" src={item.live_img} alt=""/>

src/components/Index/index.scss

@@ -14,6 +14,8 @@
     }
 
     .to-app {
+      display: inline-block;
+      text-align: center;
       margin-left: 10px;
       width: 88px;
       height: 22px;

src/components/bargainMiddlePage/bargain-middle-page.scss

@@ -2,6 +2,7 @@
   background: $bg_f4f4f4;
   padding-bottom: 50px;
   
+
   .indicator {
     color: $color_FE2F2F;
   }

src/components/bargainMiddlePage/index.js

-import React, {Component} from 'react'
+import React, {Component, useState} from 'react'
 import './bargain-middle-page.scss'
 import classnames from 'classnames'
 import {HeaderBar, VList} from '@common'
 import {Course} from '@common'
 import {api, getParam, http} from "@/utils"
-import {Toast} from "antd-mobile"
+import {Flex, Toast} from "antd-mobile"
 import {Link, withRouter} from "react-router-dom"
 import Ranking from './ranking'
-import {getHours, getMinutes, getSeconds} from "date-fns"
+import {differenceInSeconds, differenceInMinutes, differenceInHours} from "date-fns"
 import Overlay from '../detail/overlay'
 import {compose} from "redux"
 
@@ -28,7 +28,10 @@ class BargainMiddlePage extends Component {
             list: [],
             width: '0',
             isShowMore: '',
-            status: ''
+            status: '',
+            hour: '',
+            min: '',
+            sec: ''
         }
     }
 
@@ -40,7 +43,8 @@ class BargainMiddlePage extends Component {
 
     // 获取砍价信息
     getBargainInfo = () => {
-        http.get(`${api.home}/m/bargain/info?bargaincode=3133332c343739343131&is_originator=1`).then((res) => {
+
+        http.get(`${api.home}/m/bargain/info?bargaincode=${getParam('bargaincode')}&is_originator=${getParam('is_originator')}`).then((res) => {
             if (res.data.code === 200) {
                 this.setState({
                     data: res.data.data,
@@ -220,14 +224,26 @@ class BargainMiddlePage extends Component {
     }
 
     render() {
-        let date, h, m, s
+        let h, m, s
         if (this.state.bargainData.expire_time) {
-            date = new Date(this.state.bargainData.expire_time * 1000)
-            h = <span className={'time hour'}>{getHours(date)}</span>
-            m = <span className={'time hour'}>{getMinutes(date)}</span>
-            s = <span className={'time hour'}>{getSeconds(date)}</span>
+
+            let date = this.state.bargainData.expire_time * 1000
+            let now = Date.now()
+            setInterval(() => {
+                date -= 1000
+                let s = differenceInSeconds(new Date(date), now) % 60,
+                    m = differenceInMinutes(new Date(date), now) % 60,
+                    h = differenceInHours(new Date(date), now) % 24
+                this.setState({
+                    hour: h,
+                    min: m,
+                    sec: s
+                })
+
+            }, 1000)
         }
 
+
         let thirdRow, btn
         // is_artifact	 0-再邀请多少人可以使用 1-可以使用未领取 2-已领取 3-已使用
         if (this.state.bargainData.is_artifact === 0) {
@@ -280,10 +296,19 @@ class BargainMiddlePage extends Component {
                                 {
                                     this.state.data.bargain_status === 0 &&
                                     <div>
-                                        {h} : {m} : {s}
+                                        {this.state.time}
+                                        <span
+                                            className={'time hour'}>{String(this.state.hour).padStart(2, 0)}</span> :&nbsp;
+                                        <span
+                                            className={'time min'}>{String(this.state.min).padStart(2, 0)}</span> :&nbsp;
+                                        <span className={'time sec'}>{String(this.state.sec).padStart(2, 0)}</span>
                                         <span className={'inactive'}> 后砍价结束</span>
                                     </div>
                                 }
+                                {
+                                    this.state.data.bargain_status === 1 && this.state.isOriginator === '1' &&
+                                    <span className={'inactive'}>砍价结束</span>
+                                }
 
                             </div>
                             <div className="middle">
@@ -292,10 +317,24 @@ class BargainMiddlePage extends Component {
                             {
                                 this.state.isOriginator === '1' && this.state.data.bargain_status === 0 &&
                                 <div>
+                                    <div className='third-row'>
                                         {thirdRow}
+                                    </div>
+                                    <div>
                                         {btn}
                                     </div>
+                                </div>
+                            }
+
+                            {
+                                this.state.isOriginator === '1' && this.state.data.bargain_status === 1 &&
+                                <div>
+                                    砍价金额将于
+                                    {h} : {m} : {s}
+                                    后清零，请尽快完成支付
+                                </div>
                             }
+
                             <div className={'button'}>
                                 {bargainBtn}
                             </div>

src/components/detail/bargain/index.js

-import React, {Component} from 'react'
+import React, {Component, useState} from 'react'
 import './bargain.scss'
 import {Flex, Toast} from "antd-mobile"
 import Overlay from '../overlay'
 import BargainInfo from './bargainInfo'
-import {getHours, getMinutes, getSeconds} from "date-fns"
+import {differenceInSeconds, differenceInMinutes, differenceInHours} from "date-fns"
 import {api, getParam, http} from "@/utils"
 import Ranking from "@/components/bargainMiddlePage/ranking"
 import {compose} from "redux"
@@ -21,7 +21,8 @@ class Bargain extends Component {
             list: [],
             limitPeople: '',
             status: '',
-            bargainCode: ''
+            bargainCode: '',
+            time: ''
         }
     }
 
@@ -61,7 +62,7 @@ class Bargain extends Component {
                     bargainCode: res.data.data.bargain_code
                 })
                 if (res.data.data.bargain_status === 0) {
-                    this.getBargainRankList(getParam('id'), 1)
+                    this.getBargainRankList(getParam('id'), 0)
                 }
             } else {
                 Toast.info(res.data.msg, 2)
@@ -183,7 +184,6 @@ class Bargain extends Component {
                     this.state.info.bargain_status === 2 &&
                     <BargainIntro limitPeople={this.state.limitPeople} iWantBargain={this.iWantBargain}/>
                 }
-                {console.log(this.state.outList, 11)}
                 {
                     (this.state.info.bargain_status === 0 || this.state.info.bargain_status === 1) &&
                     <BargainStatus
@@ -265,7 +265,12 @@ function BargainIntro(props) {
 }
 
 function BargainStatus(props) {
-    console.log(props, 1)
+
+    const [hour, setHour] = useState()
+    const [min, setMin] = useState()
+    const [sec, setSec] = useState()
+
+
     let thirdRow, btn
     // is_artifact	 0-再邀请多少人可以使用 1-可以使用未领取 2-已领取 3-已使用
     if (props.info.is_artifact === 0) {
@@ -279,7 +284,18 @@ function BargainStatus(props) {
         thirdRow = <div>恭喜你获得<span className={'indicator'}>【砍价神器】</span></div>
         btn = <button onClick={props.useArtifact}>立即使用</button>
     }
-    let date = new Date(props.info.end_time * 1000)
+
+
+    let date = props.info.end_time * 1000
+    let now = Date.now()
+    setInterval(() => {
+        date -= 1000
+        setSec(differenceInSeconds(new Date(date), now) % 60)
+        setMin(differenceInMinutes(new Date(date), now) % 60)
+        setHour(differenceInHours(new Date(date), now) % 24)
+
+    }, 1000)
+
 
     return (
         <div className="status-outer">
@@ -292,9 +308,9 @@ function BargainStatus(props) {
                         <div className={'first-row'}>
                             <div>
                                 已砍<span className={'indicator'}>{props.info.bargain_price}元</span>
-                                <span className={'time hour'}>{getHours(date)}</span> :&nbsp;
-                                <span className={'time min'}>{getMinutes(date)}</span> :&nbsp;
-                                <span className={'time sec'}>{getSeconds(date)}</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>
@@ -336,9 +352,9 @@ function BargainStatus(props) {
                         </div>
                         <div className="time-tobuy">
                             砍价金额将于
-                            <span className={'time hour'}>{getHours(date)}</span> :&nbsp;
-                            <span className={'time min'}>{getMinutes(date)}</span> :&nbsp;
-                            <span className={'time sec'}>{getSeconds(date)}</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/btnstatus/index.js

@@ -65,7 +65,7 @@ class BtnStatus extends Component {
                     isShowOverlay: false,
                     bargainStatus: '',
                 })
-                document.location.reload()
+                window.location.href = '/shopcart'
             } else {
                 Toast.info(res.data.msg, 2)
             }
@@ -189,7 +189,7 @@ class BtnStatus extends Component {
                         {
                             (barInfo.bargain_status === 0 || barInfo.bargain_status === 1) &&
                             <button className='btn btn-s bg-E02E24'>
-                                <span>¥1</span>
+                                <span>¥{barInfo.amount}</span>
                                 <span onClick={e => this.toCart(2)}>去支付</span>
                             </button>
                         }

src/components/detail/index.js

@@ -26,18 +26,24 @@ class Detail extends Component {
             singleBox: false,
             shareRank: false,
             singMess: '',
-            barInfo: '',
+            barInfo: ''
         }
     }
 
     componentDidMount() {
         this.props.fetchCoursesListIfNeeded()
-        this.getBargainInfo()
     }
 
-    componentDidUpdate() {
-        // console.log(this.props.courseInfo.course_info)
+    componentDidUpdate(prevProps) {
+        let {courseInfo} = this.props
+        let {courseInfo: prevCourseInfo} = prevProps
+        if (courseInfo && courseInfo.is_bargain) {
+            if (prevCourseInfo && courseInfo.is_bargain !== prevCourseInfo.is_bargain) {
+                this.getBargainInfo()
+            }
         }
+    }
+
 
     // 点击子组件试听按钮
     toAudition = () => {
@@ -170,7 +176,7 @@ class Detail extends Component {
                 <OutLine data={this.props.courseInfo} toAudition={this.toAudition} toSingleset={this.toSingleset}/>
 
                 {/*课程按钮*/}
-                <BtnStatus data={this.props.courseInfo} barInfo={this.state.barInfo} getBargainInfo={this.getBargainInfo}></BtnStatus>
+                <BtnStatus data={this.props.courseInfo} barInfo={this.state.barInfo}></BtnStatus>
             </div>
         )
     }

src/components/my/index.js

@@ -64,7 +64,7 @@ class My extends PureComponent {
                 </Link>
                 {
                     (isVIP === 0 || !isVIP) &&
-                    <div className="my-isvip"></div>
+                    <Link className="my-isvip" to={`/detail?id=139`}></Link>
                 }
             </List>
         }

src/components/my/index.scss

@@ -33,6 +33,7 @@
   }
 
   .my-isvip {
+    display: inline-block;
     width: 100%;
     height: 43px;
     background-image: url("./image/vip_bg.png");