Skip to content

M
mr-julyedu
Commit 7824e7f4 by xuzhenghua
Options

index

parent 7184ab8d
Showing with 316 additions and 23 deletions
src/common/Course/index.js
......@@ -6,8 +6,8 @@ const Course = (props) => {
<li className='course-item'>
{props.top}
<a href="/#">
<img src={props.data.src} alt=""/>
<p className="course-title text-overflow-2">{props.data.title}</p>
<img src={props.data.course_img_small} alt=""/>
<p className="course-title text-overflow-2">{props.data.course_title}</p>
</a>
{props.bottom}
</li>
......
src/components/Index/index.scss
......@@ -105,7 +105,7 @@
*/
.tabbox {
width: 100%;
height: 103px;
height: 113px;
padding: 20px 17px;
ul {
......@@ -131,10 +131,20 @@
}
}
}
/*
近期直播
*/
.lives {
width: 100%;
padding: 20px 15px 0 15px;
.title {
font-size: 16px;
color: $color_333;
display: inline-block;
}
}
.scroll-box {
width: 100%;
overflow: auto;
......@@ -157,7 +167,7 @@
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 5px;
a {
.item-box {
width: 100%;
height: 100%;
padding: 10px;
......@@ -179,6 +189,8 @@
.item-title {
font-size: 16px;
color: $color_333;
height: 16px;
line-height: 16px;
}
.item-teacher {
......@@ -206,7 +218,8 @@
width: 100%;
height: 106px;
border-radius: 5px;
margin-top: 20px;
margin-top: 15px;
margin-bottom: 5px;
img {
width: 100%;
......@@ -215,11 +228,9 @@
}
}
/*课程公共样式*/
.category {
width: 100%;
border-top: 8px solid #F3F4F8;
padding: 20px 15px 15px 15px;
.title {
......@@ -480,6 +491,7 @@
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .8);
z-index: 2;
.close-subscribe {
position: fixed;
......@@ -656,3 +668,8 @@
// // background-image: none;
// //}
}
.borderTop {
width: 100%;
height: 8px;
background-color: #F3F4F8;
}
src/components/Index/liveRoom.js 0 → 100644
import React, {Component} from 'react';
import './index.scss';
import {api} from '@/utils'
class LiveRoom extends Component {
constructor(props) {
super(props);
this.state = {
issubscribe: 0, // 是否预约
toSubscribe: false, // 点击预约之后，判断判断时候关注公众号，选择预约方式
isfollow: false, // 是否关注公众号
step: 0, // 手机号预约还是公众号预约
success: false // 预约成功
}
}
componentDidMount() {
// this.livePrepare(this.props.roomId,'',2,'')
}
// 直播间预约接口公共方法
livePrepare=(room_id,type,source,mobile)=>{
let data = {
room_id: room_id, // 直播间id
type: type, // 1-为微信服务通知预约 2-为手机号预约
source: source, // 1-为微信内置浏览器 2-为wap（微信外
mobile: mobile // 手机号 当type为2时，该参数为必填
};
api.post('/m/live/prepare',data).then((res) => {
/* status 0表示预约成功
1表示预约失败
2表示未关注服务号
3表示已预约
4表示手机号不能为空
*/
if (res.data.code === 200) {
if (res.data.data.status === 0){
alert(res.data.data.msg)
this.setState(status => ({
success: true,
toSubscribe: false
}));
// if (type === 1){
// this.setState(status => ({
// toSubscribe: true,
// step: 2
// }));
// } else {
// this.setState(status => ({
// success: true,
// toSubscribe: false
// }));
// }
} else if (res.data.data.status === 1){
alert(res.data.data.msg)
} else if (res.data.data.status === 2){
alert(res.data.data.msg)
this.setState(status => ({
toSubscribe: true,
step: 0,
isfollow: true
}));
} else if (res.data.data.status === 3){
alert(res.data.data.msg)
this.setState(status => ({
issubscribe: 1,
}));
} else if (res.data.data.status === 4){
alert(res.data.data.msg)
} else {
alert(res.data.data.msg)
this.setState(status => ({
toSubscribe: true,
step: 0,
isfollow: false
}));
}
}
})
}
// 关闭弹窗
liveColse() {
this.props.colseBox(false);
}
// 点击预约
toSubscribe() {
this.props.colseBox(false);
this.livePrepare(this.props.roomId,'',2,'')
}
// 手机号预约
iphoneStep() {
this.setState(status => ({
step: 1
}));
}
// 服务号预约
serverStep() {
this.livePrepare(this.props.roomId,1,2,'')
}
// 最后提交
submit() {
if (this.state.step === 1) {
this.livePrepare(this.props.roomId, 2, 2, '17600765352')
}
if (this.state.step === 2) {
this.livePrepare(this.props.roomId, 1, 1, '')
}
}
// 取消预约 关闭弹窗
subscribeColse() {
this.setState(status => ({
toSubscribe: false,
step: 0
}));
}
render() {
return (
<div className='index-box'>
{/* 直播间预约 */}
{
this.props.isShow === true &&
<div className='live-room-box'>
<div className='live-room-content'>
<div className='course-banner'>
<div className='left'><span></span></div>
<div className='center'><img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
alt=""/></div>
<div className='right'><span></span></div>
</div>
<div className='course-dec'>
<h2 className='title'>第四课：概率论算法精透</h2>
<p className='teacher'>讲师：林奔</p>
<p className='time'>时间：明晚20:00—22:00</p>
</div>
<div className='course-info'>
<ul>
<li>简介：</li>
<li className='text-overflow-2'>
知识点1：图的定义 (有向图，无向图)定义四行。
</li>
<li className='text-overflow-2'>
知识点2：拓扑排序实战项目：最短路（Floyd，Dijkstra，Bellmanford）。
</li>
</ul>
</div>
<div className='course-subscribe'>
{
this.state.issubscribe === 0 &&
<button onClick={this.toSubscribe.bind(this)}>预约</button>
}
{
this.state.issubscribe === 1 &&
<span>直播尚未开始，敬请期待...</span>
}
</div>
</div>
<div className='live-room-close'>
<i onClick={this.liveColse.bind(this)} className={'iconfont iconiconfront-2 close'}></i>
</div>
</div>
}
{
this.state.toSubscribe === true &&
<div className='subscribe-box'>
{this.state.step === 0 &&
<div>
<div className='close-subscribe' onClick={this.subscribeColse.bind(this)}></div>
<div className='subscribe-content'>
<span className='title'>请选择即将直播时通知您的方式</span>
<button className={this.state.isfollow ? 'follow' : 'nofollow'}
onClick={this.serverStep.bind(this)}>微信服务号通知
</button>
{
this.state.isfollow === true &&
<span className='tips'>关注服务号即代表预约成功</span>
}
<button className={this.state.isfollow ? 'follow' : 'nofollow'}
onClick={this.iphoneStep.bind(this)}>手机短信通知
</button>
</div>
</div>
}
{this.state.step === 1 &&
<div>
<div className='close-subscribe' onClick={this.subscribeColse.bind(this)}></div>
<div className='iphone-content'>
<span className='title'>预约</span>
<p className='dec'>直播前会通过手机短信通知您，您可通过预留的手机号快捷登录参与学习：</p>
<input type="text" placeholder='请输入手机号'/>
<button className='submit' onClick={this.submit.bind(this)}>预约</button>
</div>
</div>
}
{this.state.step === 2 &&
<div>
<div className='close-subscribe' onClick={this.subscribeColse.bind(this)}></div>
<div className='iphone-content server-content'>
<p className='title'><i
className={'iconfont icondanseshixintubiao-5'}></i><span>预约成功</span></p>
<p className='dec'>直播开始前会通过微信“服务通知”提醒您。 推荐预留手机号，届时可通过手机号登录直播 间直接学习：</p>
<input type="text" placeholder='请输入手机号'/>
<button className='submit' onClick={this.submit.bind(this)}>提交</button>
</div>
</div>
}
</div>
}
{
this.state.success === true &&
<div className='success'>预约成功</div>
}
</div>
);
}
}
export default LiveRoom;
src/components/preferential/index.js
......@@ -25,7 +25,7 @@ class Preferential extends Component {
window.location.href ='/search'
}
return() {
window.location.href ='/classify'
window.location.href ='/index'
}
state = {
......@@ -314,19 +314,11 @@ class Preferential extends Component {
}
render() {
const tabs = [
{title: '限时特惠'},
{title: '砍价专区'},
{title: '一键拼团'}
];
// const bottom = (
// <i className={'iconfont iconiconfront-69 pull-down'}></i>
// )
// const top = (
// <i className={'iconfont iconiconfront-71 pull-down'}></i>
// )
return (
<div className='preferential'>
<div className="search-nav">
......@@ -373,8 +365,10 @@ class Preferential extends Component {
{item.isbuy === 1 &&
<p className='course-status'>拼团减100元</p>
}
{item.isbuy === 2 &&
<p className='course-status'>砍价减100元</p>
}
</div>
)
return (
<VList handleClick={this.handleClick} key={index} status={status}
......
yarn.lock
......@@ -1620,6 +1620,14 @@ aws4@^1.8.0:
resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
axios@^0.18.0:
version "0.18.0"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
integrity sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=
dependencies:
follow-redirects "^1.3.0"
is-buffer "^1.1.5"
axobject-query@^2.0.1:
version "2.0.2"
resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.0.2.tgz#ea187abe5b9002b377f925d8bf7d1c561adf38f9"
......@@ -3162,6 +3170,11 @@ deep-is@~0.1.3:
resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
deepmerge@^2.1.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
default-gateway@^2.6.0:
version "2.7.2"
resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-2.7.2.tgz#b7ef339e5e024b045467af403d50348db4642d0f"
......@@ -4197,7 +4210,7 @@ flush-write-stream@^1.0.0:
inherits "^2.0.3"
readable-stream "^2.3.6"
follow-redirects@^1.0.0:
follow-redirects@^1.0.0, follow-redirects@^1.3.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76"
integrity sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==
......@@ -4255,6 +4268,21 @@ form-data@~2.3.2:
combined-stream "^1.0.6"
mime-types "^2.1.12"
formik@^1.5.4:
version "1.5.7"
resolved "https://registry.yarnpkg.com/formik/-/formik-1.5.7.tgz#2fc5fc2f0c693cdc4e8c9dad3a10eb4c4e131ff5"
integrity sha512-kZo8lS4WzfC2uivnSkE9DOuX9x+jVjCtIZOlb1A4lHGeURyuLt6eDfwGJzNlcP0lXIwmpANKzegiB8j60B54TA==
dependencies:
create-react-context "^0.2.2"
deepmerge "^2.1.1"
hoist-non-react-statics "^3.3.0"
lodash "^4.17.11"
lodash-es "^4.17.11"
prop-types "^15.6.1"
react-fast-compare "^2.0.1"
tiny-warning "^1.0.2"
tslib "^1.9.3"
forwarded@~0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
......@@ -4827,6 +4855,16 @@ http-parser-js@>=0.4.0:
resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.0.tgz#d65edbede84349d0dc30320815a15d39cc3cbbd8"
integrity sha512-cZdEF7r4gfRIq7ezX9J0T+kQmJNOub71dWbgAXVHDct80TKP4MCETtZQ31xyv38UwgzkWPYF/Xc0ge55dW9Z9w==
http-proxy-middleware@^0.19.1:
version "0.19.1"
resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz#183c7dc4aa1479150306498c210cdaf96080a43a"
integrity sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==
dependencies:
http-proxy "^1.17.0"
is-glob "^4.0.0"
lodash "^4.17.11"
micromatch "^3.1.10"
http-proxy-middleware@~0.18.0:
version "0.18.0"
resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.18.0.tgz#0987e6bb5a5606e5a69168d8f967a87f15dd8aab"
......@@ -4837,7 +4875,7 @@ http-proxy-middleware@~0.18.0:
lodash "^4.17.5"
micromatch "^3.1.9"
http-proxy@^1.16.2:
http-proxy@^1.16.2, http-proxy@^1.17.0:
version "1.17.0"
resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.17.0.tgz#7ad38494658f84605e2f6db4436df410f4e5be9a"
integrity sha512-Taqn+3nNvYRfJ3bGvKfBSRwy1v6eePlm3oc/aWVxZp57DQr5Eq3xhKJi7Z4hZpS8PC3H4qI+Yly5EmFacGuA/g==
......@@ -6226,6 +6264,11 @@ locate-path@^3.0.0:
p-locate "^3.0.0"
path-exists "^3.0.0"
lodash-es@^4.17.11:
version "4.17.11"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.11.tgz#145ab4a7ac5c5e52a3531fb4f310255a152b4be0"
integrity sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q==
lodash._getnative@^3.0.0:
version "3.9.1"
resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
......@@ -8253,7 +8296,7 @@ prompts@^0.1.9:
kleur "^2.0.1"
sisteransi "^0.1.1"
prop-types@15.x, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@15.x, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
......@@ -8598,6 +8641,11 @@ react-error-overlay@^5.1.4:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.4.tgz#88dfb88857c18ceb3b9f95076f850d7121776991"
integrity sha512-fp+U98OMZcnduQ+NSEiQa4s/XMsbp+5KlydmkbESOw4P69iWZ68ZMFM5a2BuE0FgqPBKApJyRuYHR95jM8lAmg==
react-fast-compare@^2.0.1:
version "2.0.4"
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
......@@ -10180,7 +10228,7 @@ tiny-invariant@^1.0.2:
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.4.tgz#346b5415fd93cb696b0c4e8a96697ff590f92463"
integrity sha512-lMhRd/djQJ3MoaHEBrw8e2/uM4rs9YMNk0iOr8rHQ0QdbM7D4l0gFl3szKdeixrlyfm9Zqi4dxHCM2qVG8ND5g==
tiny-warning@^1.0.0:
tiny-warning@^1.0.0, tiny-warning@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.2.tgz#1dfae771ee1a04396bdfde27a3adcebc6b648b28"
integrity sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q==
......@@ -10299,7 +10347,7 @@ ts-pnp@^1.0.0:
resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.2.tgz#be8e4bfce5d00f0f58e0666a82260c34a57af552"
integrity sha512-f5Knjh7XCyRIzoC/z1Su1yLLRrPrFCgtUAh/9fCSP6NKbATwpOL1+idQVXQokK9GRFURn/jYPGPfegIctwunoA==
tslib@^1.9.0:
tslib@^1.9.0, tslib@^1.9.3:
version "1.9.3"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==
......
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