Skip to content

M
mr-julyedu
Commit 8ea87862 by xuzhenghua
Options

detail

parent f5f110dc
Showing with 103 additions and 34 deletions
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");
......
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