Skip to content

M
mr-julyedu
Commit 26d0488f by FE
Options

pull and del build

parents 8d4d31f4 4aa574d5
Showing with 1890 additions and 331 deletions
scripts/build.js
......@@ -28,6 +28,14 @@ const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
const printBuildError = require('react-dev-utils/printBuildError');
const childProcess = require('child_process')
const deploymentBranches = ['master', 'pre', 'dev'];
const version = childProcess.execSync('git symbolic-ref --short -q HEAD', {'encoding': 'utf8'})
if(!deploymentBranches.includes(version.trim())){
console.log(chalk.yellow(`当前不在上线分支，请切换至上线分支(${deploymentBranches.join('/')})打包\n`))
return
}
const measureFileSizesBeforeBuild =
FileSizeReporter.measureFileSizesBeforeBuild;
......
src/components/activity/index.scss
......@@ -6,7 +6,7 @@
.banner__con {
width: 100%;
height: 170px;
background: url('./images/banner.png') center center no-repeat;
background: url('./images/formal-banner.png') center center no-repeat;
background-size: 100% 100%;
}
.content__con {
......@@ -233,7 +233,7 @@
margin-left: 0;
}
}
.user_avatar {
width: 22px;
......
src/components/activity/invite.js
......@@ -16,6 +16,7 @@ class Invite extends Component {
hot_schedule: '',
userList: [],
inviteCode: '',
isshowAppTip:false
}
}
......@@ -28,8 +29,28 @@ class Invite extends Component {
this.props.history.push(`/activity?shareuid=${shareuid}&inviteCode=${getParam('inviteCode')}`);
}
}
this.distinguishVersion()
}
distinguishVersion = () => {
// plat_form 1ios 2android
// version 1->3.704 2->4.5.1.20191105
if(getParam('plat_form') == 1){
let version = Number(getParam('version'))
this.setState({
isshowAppTip: version < 3.704 ? true : false
});
}
if(getParam('plat_form') == 2){
let version = getParam('version').replace(/\./g, '').slice(0, 3)
this.setState({
isshowAppTip: Number(version) < 451 ? true:false
});
}
}
componentDidMount() {
if(!this.props.user.hasError) {
this.getUserList();
......@@ -100,19 +121,23 @@ class Invite extends Component {
inviteFriends = () => {
const { user, history } = this.props;
const {inviteCode} = this.state;
const {inviteCode,isshowAppTip} = this.state;
// 未登录先去登录
if (getParam('version')) {
if(user.hasError) {
SendMessageToApp("toLogin");
}else {
let data = {
title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！',
desc: '把这门超5万人报名的【Python基础入门 升级版】课程送给你，附200元红包，请笑纳！--七月在线',
link: API.m + `/invite?shareuid=${jsCookie.get('uid')}&new=1&inviteCode=${inviteCode}`,
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/index-share-img.png',
if(isshowAppTip){
Toast.info('请前往h5/pc端使用该功能', 2);
} else {
let data = {
title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！',
desc: '把这门超5万人报名的【Python基础入门 升级版】课程送给你，附200元红包，请笑纳！--七月在线',
link: API.m + `/invite?shareuid=${jsCookie.get('uid')}&new=1&inviteCode=${inviteCode}`,
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/index-share-img.png',
}
SendMessageToApp("toShare", data)
}
SendMessageToApp("toShare", data)
}
}else {
if(user.hasError) {
......@@ -158,13 +183,13 @@ class Invite extends Component {
</div>
<div className="content__two">
福气值越高，热力值越高，中奖概率越大！
福气值越高，中奖概率越大！
</div>
<div className="box__out">
<div className="box__middle">
<div className="box__inner">
<p>当前中奖热力值:</p>
<p>当前中奖概率值:</p>
<p className="hot__value">{hotValue}</p>
<div className="hot__progress">
<div className="progress__bar">
......
src/components/activity/prize-winner-list/index.scss
#prize-winner-list {
height: 100%;
background: #5327fa;
padding-bottom: 10px;
.banner {
width: 100%;
......@@ -31,7 +31,6 @@
ul {
width: 355px;
height: 316px;
margin: 0 auto;
background: rgba(57, 0, 201, 1);
border: 1px solid rgba(89, 112, 255, 1);
......
src/components/blessingGetPrize/index.js 0 → 100644
import React, { Component } from 'react';
import './index.scss';
import ListHeader from './../blessingPreheat/listHeader/index'
import { http, getParam } from '@/utils';
import { Toast } from 'antd-mobile';
import AddressPopup from './../blessingPreheat/addressPopup/index'
import { Popup } from '@/common'
import { connect } from 'react-redux'
import jsCookie from 'js-cookie'
@connect(({user}) => (
{
uid: user.data.uid || ''
}
))
class BlessingGetPrize extends Component {
popupInstance = null
constructor(props) {
super(props);
this.state = {
date: '',
next_date: '',
name: '',
is_winning: "", //是否中奖
is_virtual: 1, // 实物奖品 虚拟奖品
prize_data: [],
address: false,
}
}
componentDidMount () {
const _this = this;
setTimeout(function(){
const {history, uid} = _this.props;
if(!uid) {
history.push('/passport');
}else{
http.get(`${API.home}/sys/lottery_result?id=${getParam('id')}`).then(res => {
const {code, msg, data} = res.data;
if(code === 200) {
_this.setState({
...data.info,
prize_data: data.prize_data.slice(0, 6),
})
} else {
Toast.info(msg);
}
});
}
}, 300);
}
showAddress = (bool) => {
const {history, uid} = this.props;
const {name} = this.state;
if (bool && !uid) {
history.push('/passport')
} else {
if (bool && !this.popupInstance) {
this.popupInstance = Popup({
title: '恭喜您',
content: <AddressPopup tip='填写您的联系方式' prize={name} handleToHide={() => this.showAddress(false)}/>
})
} else {
this.popupInstance.close()
this.popupInstance = null
}
}
}
render() {
const {date, next_date, name, is_winning, is_virtual, prize_data, address} = this.state;
return (
<div className="blessing_get_prize">
<div className='is__get_prize'>
<div className="get_piriz__info">
<div className='result'>{date}中奖结果</div>
{
is_winning === 0 && (
<div className='no_prize'>很遗憾，你未中奖～</div>
)
}
{
is_winning === 1 && is_virtual === 0 && (
<div className='real__prize'>
<div>恭喜你，已抽中{name}奖品</div>
<span onClick={()=> this.showAddress(true)} className='address'>填写收货地址</span>
</div>
)
}
{
is_winning === 1 && is_virtual === 1 && (
<div className='virtual '>
<div>恭喜你抽中{name}，</div>
<div>奖品已存放到你的账户</div>
</div>
)
}
</div>
</div>
{
prize_data && prize_data.length > 0 && <>
<div className='current_stage'>
{next_date}
</div>
<ListHeader text="抽奖已开启" styles={{margin: '16px 0 18px'}}/>
<div className='prize_list_container'>
{
prize_data.length > 0 && prize_data.map((item, index) => {
return (<div className='prize__item' key={index}>
<img className='prize__image' src={item.img}></img>
<div className='name__num'>
<span>{item.name}</span>
<span>（{`*${item.num}`}）</span>
</div>
</div>)
})
}
</div>
<a href='/blessingPreheat' className='join__button'>
立即参与抽奖
</a>
<div className='prize__tip'>
<div className='line'></div>
<span>中奖小tips</span>
<div className='line'></div>
</div>
<div className='blessing__des'>积攒的福气值越高，中奖概率越大哦</div>
<a className='to__preheat' href='/invite'>积攒更多福气值</a>
</>
}
{
(!prize_data || prize_data.length === 0) && (
<div className="active_over_container">
<img src='https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/acitve__over.png' alt=''/>
<p>七月在线双十一抽奖活动已结束， 感谢你的参与！</p>
</div>
)
}
</div>
)
}
}
export default BlessingGetPrize
\ No newline at end of file
src/components/blessingGetPrize/index.scss 0 → 100644
.blessing_get_prize {
width: 100vw;
height: 100vh;
overflow: auto;
background-color: #4B00F3;
padding-bottom: 58px;
.is__get_prize {
width: 100%;
height: 140px;
background: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/quan2x.png') center center no-repeat;
background-size: 100% 100%;
margin-top: 10px;
position: relative;
.get_piriz__info {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
.result {
height:16px;
line-height: 16px;
font-size:16px;
font-weight:400;
color:rgba(76,33,239,1);
margin-top: 30px;
}
.virtual {
font-size:16px;
font-weight:500;
color:rgba(76,33,239,1);
line-height:20px;
margin-top: 10px;
div {
width: 100%;
text-align: center;
text-align-last: center;
margin-top: 4px;
}
}
.no_prize {
font-size:16px;
font-weight:500;
color:rgba(76,33,239,1);
width: 100%;
text-align: center;
text-align-last: center;
margin-top: 18px;
}
.real__prize {
font-size:16px;
font-weight:500;
color:rgba(76,33,239,1);
width: 100%;
margin-top: 16px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
div {
line-height: 20px;
width: 80%;
text-align: center;
text-align-last: center;
}
.address {
font-size:12px;
font-weight:400;
text-decoration:underline;
color:rgba(76,33,239,1);
margin-top: 6px;
}
}
}
}
.current_stage {
width:100%;
font-size:16px;
font-weight:500;
color:rgba(255,255,255,1);
text-align: center;
text-align-last: center;
margin-top: 36px;
}
.prize_list_container {
width: 100%;
height:250px;
background:rgba(53,0,162,1);
box-shadow:0px 3px 6px 0px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
padding: 16px;
.prize__item {
width: 106px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin-right: 10px;
&:nth-child(3n) {
margin-right: 0;
}
.prize__image {
width: 106px;
height: 82px;
}
.name__num {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
font-size:12px;
font-weight:400;
color:rgba(255,255,255,1);
margin-top: 6px;
span {
&:first-child {
width: 70px;
flex: 0 0 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&:last-child {
width: 36px;
flex: 0 0 auto;
}
}
}
}
}
.join__button {
display: block;
width:340px;
height:50px;
background:linear-gradient(90deg,rgba(255,105,5,1) 0%,rgba(255,180,5,1) 100%);
font-size:18px;
font-weight:500;
color:rgba(255,255,255,1);
border-radius:5px;
margin: 20px auto 32px;
line-height: 50px;
text-align: center;
text-align-last: center;
}
.prize__tip {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size:14px;
font-weight:400;
color:rgba(255,255,255,1);
margin-bottom: 12px;
.line {
width: 128px;
height: 1px;
background: #fff;
}
span {
margin: 0 8px;
}
}
.blessing__des {
font-size:12px;
font-weight:300;
color:rgba(255,255,255, .6);
text-align: center;
margin-bottom: 16px;
}
.to__preheat {
display: inline-block;
width: 100%;
font-size:14px;
font-weight:300;
text-decoration:underline;
color:rgba(255,255,255, .6);
text-align: center;
}
.active_over_container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin-top: 70px;
img {
width: 170px;
height: 134px;
}
p {
width:238px;
height:39px;
font-size:16px;
font-weight:400;
color:rgba(255,255,255,1);
line-height:24px;
text-align: center;
text-align-last: center;
margin-top: 20px;
}
}
}
.address__prize {
font-size: 16px;
width: 100%;
text-align: center;
text-align-last: center;
color: #525C65;
line-height: 16px;
margin-top: 16px;
}
\ No newline at end of file
src/components/blessingPreheat/ReserveCourse/index.js
......@@ -105,11 +105,7 @@ class ReserveCourse extends Component {
if (!getParam('version')) {
this.props.history.push(`/getDetail?id=${courseId}`)
} else {
let data = {
courseId: courseId,
type: 0 // 正常跳课程详情页type:0,积福气浏览课程详情页-没有浏览过type:1 已浏览过type:2
}
SendMessageToApp("toCourse", data);
SendMessageToApp("toCourse", courseId);
}
}
// 查看更多
......
src/components/blessingPreheat/addressPopup/index.js
......@@ -54,6 +54,7 @@ class AddressPopup extends Component {
render() {
const { isLoading, addressInfo } = this.state;
const {tip, prize} = this.props;
return (
<>
{
......@@ -84,7 +85,14 @@ class AddressPopup extends Component {
}}
render={({errors}) => (
<Form className="address-form">
<p className="address-form__desc">请及时填写收货信息，获得实物奖品后将第一时间为您邮寄</p>
{
prize ? (
<p className='address__prize'>您抽中了{prize}<span style={{'color': '#FF4000'}}>实物奖品</span></p>
) : (null)
}
{
tip ? (<p className="address-form__desc">{tip}</p>) : (<p className="address-form__desc">请及时填写收货信息，获得实物奖品后将第一时间为您邮寄</p>)
}
<Field
name="name"
render={({ field }) => (
......
src/components/blessingPreheat/banner/index.js
......@@ -97,10 +97,10 @@ class Banner extends Component {
render() {
const { toSection, navs, index } = this.props;
const { toSection, navs, index, isFormal } = this.props;
return (
<div id={'main-banner'}>
<div className="banner"></div>
<div className={`banner ${isFormal ? 'formal_banner' : ''}`}></div>
<nav id={'main-nav'}>
<ul>
{
......
src/components/blessingPreheat/banner/index.scss
#main-banner{
overflow: auto;
margin-bottom: 70px;
.banner{
width: 375px;
height: 183px;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/banner.png") no-repeat;
background-size: contain;
}
.formal_banner {
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/formal_banner.png") no-repeat;
background-size: contain;
}
#main-nav{
position: absolute;
top: 183px;
......
src/components/blessingPreheat/collectBlessing/index.js
......@@ -18,7 +18,7 @@ class CollectBlessing extends Component {
rules: [
'app/h5/pc端活动页签到+5点福气值（每天一次）',
'关注七月在线微信服务号+30点福气值（仅限一次）',
'分享活动页到朋友圈、qq，分别+2点福气值（每个平台每天一次）',
'分享活动页到朋友圈、qq、微博，分别+2点福气值（每个平台每天一次）',
'浏览指定课程详情页，一门课程+2点福气值（每天一次）',
'邀请好友注册，+10点福气值/人（无上限）',
'活动期间每购买一门课程+20点福气值',
......@@ -141,6 +141,7 @@ class CollectBlessing extends Component {
Toast.info('今日已分享，记得明天来~', 2, null, false);
}else {
handleToShowShare();
this.shareTimer && clearInterval(this.shareTimer);
this.shareTimer = setInterval(() => {
this.setState(
{
......@@ -148,6 +149,9 @@ class CollectBlessing extends Component {
},
() => {
if (seconds === 0) {
this.setState({
seconds: 5
});
typeof cb === 'function' && cb();
clearInterval(this.shareTimer);
}
......@@ -181,7 +185,7 @@ class CollectBlessing extends Component {
}
}else {
if(getParam('version')) {
history.push('/invite?version=' + getParam('version'))
history.push('/invite?version=' + getParam('version') + '&plat_form='+ getParam('plat_form'))
} else {
history.push('/invite')
}
......@@ -252,7 +256,7 @@ class CollectBlessing extends Component {
(isLogin && isSign)
? (
<button className="collect-blessing__content" data-status="done">
+5点<br/>福气值
已加5点
</button>
)
: (
......@@ -264,7 +268,7 @@ class CollectBlessing extends Component {
</>
}
{
index === 1 &&
index === 1 &&
<>
{
isFollow === 1
......
src/components/blessingPreheat/collectBlessing/index.scss
......@@ -47,6 +47,7 @@
justify-content: center;
width: 64px;
height: 100%;
padding: 0;
border-style: none;
border-radius: 5px;
font-size: 12px;
......@@ -81,7 +82,7 @@
.collect-blessing__share-button {
display: block;
width: 20px;
height: 11px;
height: 14px;
border-style: none;
background-color: transparent;
background-size: auto 100%;
......@@ -89,15 +90,17 @@
background-position: center;
&[data-type="qq"] {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/qq-icon.png');
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/qq.png');
}
&[data-type="wechat"] {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/wechat-icon.png');
height: 16px;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/wechat.png');
}
&[data-type="weibo"] {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/icon-weibo.png');
height: 17px;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/weibo.png');
}
}
......@@ -197,7 +200,7 @@
line-height: 1;
&:last-child {
margin-bottom: 0;
margin-bottom: 0;
}
span {
font: size 12px;
......
src/components/blessingPreheat/courseList/index.js
......@@ -247,6 +247,10 @@ class CourseList extends Component {
if(isLogin) {
var _czc = _czc || [];
var name = '课程id=' + id;
_czc.push(["_trackEvent", name, 'm端双十一立即领券']);
http.post(`${API.home}/sys/activity/coupon/receive`, {
course_id: id
}).then(res => {
......@@ -301,14 +305,25 @@ class CourseList extends Component {
if (!getParam('version')) {
history.push(`/detail?id=${courseId}`);
} else {
let data = {
courseId: courseId,
type: 0 // 正常跳课程详情页type:0,积福气浏览课程详情页-没有浏览过type:1 已浏览过type:2
};
SendMessageToApp("toCourse", data);
SendMessageToApp("toCourse", courseId);
}
}
// 开始使用
toCourse2 = (courseId) => {
const { history } = this.props;
var _czc = _czc || [];
var name = '课程id=' + courseId;
_czc.push(["_trackEvent", name, 'm端双十一开始使用优惠券']);
if (!getParam('version')) {
history.push(`/detail?id=${courseId}`);
} else {
SendMessageToApp("toCourse", courseId);
}
}
render() {
const { isFormal } = this.props;
const { basic, advanced, higher, expand, group, training } = this.state;
......@@ -376,7 +391,7 @@ class CourseList extends Component {
{
(isFormal === 1 && item.course_status === 2) &&
<a
onClick={() => this.toCourse(item.course_id)}
onClick={() => this.toCourse2(item.course_id)}
className="coupon-course__button">
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
......@@ -445,7 +460,7 @@ class CourseList extends Component {
}
{
(isFormal === 1 && item.course_status === 2) &&
<a onClick={() => this.toCourse(item.course_id)} className="coupon-course__button">
<a onClick={() => this.toCourse2(item.course_id)} className="coupon-course__button">
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
<i>代金券</i>
......@@ -525,7 +540,7 @@ class CourseList extends Component {
}
{
(isFormal === 1 && item.course_status === 2) &&
<a onClick={() => this.toCourse(item.course_id)} className="coupon-course__button">
<a onClick={() => this.toCourse2(item.course_id)} className="coupon-course__button">
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
<i>代金券</i>
......@@ -605,7 +620,7 @@ class CourseList extends Component {
}
{
(isFormal === 1 && item.course_status === 2) &&
<a onClick={() => this.toCourse(item.course_id)} className="coupon-course__button">
<a onClick={() => this.toCourse2(item.course_id)} className="coupon-course__button">
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
<i>代金券</i>
......@@ -686,7 +701,7 @@ class CourseList extends Component {
}
{
(isFormal === 1 && item.course_status === 2) &&
<a onClick={() => this.toCourse(item.course_id)} className="coupon-course__button">
<a onClick={() => this.toCourse2(item.course_id)} className="coupon-course__button">
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
<i>代金券</i>
......
src/components/blessingPreheat/coursePopup/index.js
......@@ -8,14 +8,33 @@ class CoursePopup extends Component {
constructor(props) {
super(props);
this.state = {
courseList: []
courseList: [],
isshowAppTip:false
};
}
componentDidMount() {
this.fetchCourseData();
this.distinguishVersion();
}
distinguishVersion = () => {
// plat_form 1ios 2android
// version 1->3.704 2->4.5.1.20191105
if(getParam('plat_form') == 1){
let version = Number(getParam('version'))
this.setState({
isshowAppTip: version < 3.704 ? true : false
});
}
if(getParam('plat_form') == 2){
let version = getParam('version').replace(/\./g, '').slice(0, 3)
this.setState({
isshowAppTip: Number(version) < 451 ? true:false
});
}
}
fetchCourseData = () => {
Promise.all([
http.get(`${API.home}/sys/browse/blessing/courses`),
......@@ -41,22 +60,28 @@ class CoursePopup extends Component {
toCourseDetail = (item) => {
console.log(this.props);
const {isLogin, history, toLogin} = this.props;
// to={`/detail?id=${item.course_id}&ac=11`}
// to={`/detail?id=${item.course_id}&ac=11`}
if(isLogin) {
if(!getParam('version')) {
history.push(`/detail?id=${item.course_id}&ac=11`);
}else{
let type = 0;
if(item.blessing) {
type = 2;
}else{
type = 1;
}
let data = {
courseId: item.course_id,
type: type // 正常跳课程详情页type:0,积福气浏览课程详情页-没有浏览过type:1 已浏览过type:2
if(this.state.isshowAppTip){
SendMessageToApp("toCourse", item.course_id);
} else {
if(item.blessing) {
let data = {
courseId: item.course_id,
type: 2
}
SendMessageToApp("toBlessingCourse", data);
}else{
let data = {
courseId: item.course_id,
type: 1 // 正常跳课程详情页type:0,积福气浏览课程详情页-没有浏览过type:1 已浏览过type:2
}
SendMessageToApp("toBlessingCourse", data);
}
}
SendMessageToApp("toCourse", data);
}
}else{
toLogin();
......@@ -64,7 +89,7 @@ class CoursePopup extends Component {
}
render() {
const { courseList } = this.state;
const { courseList,isshowAppTip } = this.state;
const { handleToHide } = this.props;
return (
<div className="course-popup__container">
......@@ -76,19 +101,26 @@ class CoursePopup extends Component {
<span
className={classnames("course-popup__item", {
"course-popup__item--active": item.blessing
})}
})}
key={item.course_id}
onClick={()=>{this.toCourseDetail(item)}}
>
<span className="course-popup__name">{item.course_title}</span>
{
item.blessing &&
item.blessing &&
<span>+2点</span>
}
</span>
))
}
</div>
{
isshowAppTip &&
<div className="course-popup-apptip">
当前版本浏览课程暂不能增加福气值，可以前往h5/pc端浏览课程增加福气值
</div>
}
</div>
<i className="iconfont iconiconfront-2" onClick={handleToHide}></i>
</div>
......
src/components/blessingPreheat/coursePopup/index.scss
......@@ -9,6 +9,7 @@
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
z-index: 11;
.iconfont {
margin: 16px 0 0;
......@@ -20,8 +21,7 @@
.course-popup {
width: 300px;
height: 275px;
padding: 20px 0 0;
padding: 20px 0;
border-radius: 10px;
box-sizing: border-box;
background-color: #fff;
......@@ -78,4 +78,10 @@
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.course-popup-apptip{
padding: 10px 15px 0 15px;
color: #FF0000;
text-align: center;
}
\ No newline at end of file
src/components/blessingPreheat/formal-draw/index.js 0 → 100644
import React, { Component } from 'react'
import { http } from "@/utils"
import { Toast, Tabs } from 'antd-mobile'
import './index.scss'
import 'swiper/dist/css/swiper.min.css'
import { Link, withRouter } from 'react-router-dom'
import classnames from 'classnames'
import Swiper from 'swiper'
import { Popup } from "@common/index"
import QRCode from 'qrcode'
import { connect } from 'react-redux'
@connect(state => ({user: state.user}))
class FormalDraw extends Component {
swiper = null
popupInstance = null
subscribePopupInstance = null
state = {
prizes: [],
currentDisplayPrizes: [],
tabs: [],
today: '',
initialPageIndex: 0,
list: [],
activeTimeRangeIndex: 0,
userValue: {},
}
componentDidMount() {
http.get(`${API.home}/sys/activity/prize_data`)
.then(res => {
const {data, code, msg} = res.data
if (code == 200) {
const {today} = data.value
const oneDay = data.list.filter(item => item.date === data.value.today)
const activeIndex = oneDay[0]['son'].findIndex(item => item.status == 3)
this.setState({
tabs: data.list.map(item => ({title: item.date})),
today,
initialPageIndex: data.list.findIndex(item => item.date == today) || 0,
list: data.list,
userValue: data.value,
activeTimeRangeIndex: activeIndex < 0 ? 0 : activeIndex
}, () => {
this.initializeSwiper()
})
} else {
Toast.info(msg, 2, null, false)
}
})
}
initializeSwiper = () => {
new Swiper(this.swiper, {
slidesPerView: 'auto',
scrollbar: {
el: '.swiper-scrollbar',
draggable: true
}
})
}
changeTab = (tab) => {
const {list} = this.state
const data = list.filter(item => item.date === tab.title)
let index = data[0]['son'].findIndex(item => item.status == 3)
this.setState({
today: tab.title,
activeTimeRangeIndex: index < 0 ? 0 : index
}, () => {
this.initializeSwiper()
})
}
draw = id => {
let {surplus, is_prize, hot_value} = this.state.userValue
if (hot_value < 50) {
Toast.info('你的福气值未达到参与抽奖所需福气值分数，快去积攒福气值吧', 2, null, false)
} else if (is_prize == 1) {
Toast.info('你已参与当前时段抽奖', 2, () => {
this.requestDraw(id, true)
}, false)
} else if (surplus < 1) {
Toast.info('你的抽奖次数已用光，快去积攒福气值可获得更多抽奖机会', 2, null, false)
} else {
this.requestDraw(id)
}
}
requestDraw = (id, isDrawn) => {
let {surplus} = this.state.userValue
http.post(`${API.home}/sys/activity/prize`, {
id
}).then(res => {
const {code, msg, data} = res.data
if (code == 200) {
var _czc = _czc || []
_czc.push(["_trackEvent", '点击抽奖', 'm端双十一正式活动-点击抽奖'])
QRCode.toDataURL(data.url, (err, url) => {
this.popupInstance = Popup({
title: '你已成功参与本时段抽奖',
className: 'join-lottery',
content: (
<>
<div className="text">
<div className="code">抽奖码为：{data.code}</div>
<div className="time">本时段的中奖结果将在{data.date}公布</div>
<div className="hint">你可关注‘七月在线’服务号第一时间获得中奖信息。</div>
<img src={url} className='qr-code' alt=""/>
</div>
<button onClick={() => {
this.popupInstance.close()
}}>知道了
</button>
</>
)
})
this.setState({
userValue: {...this.state.userValue, ...{surplus: isDrawn ? surplus : --surplus}, ...{is_prize: 1}}
})
})
} else {
Toast.info(msg, 2, null, false)
}
})
}
lotteryFunc = (status, id) => {
const {hasError} = this.props.user
if (hasError && status != 4) {
this.props.toLogin()
return
}
if (status == 3) {
this.draw(id)
} else if (status == 2) {
this.subscribe(id)
} else if (status == 4) {
location.href = `/prize-winner-list?tid=${id}`
}
}
subscribe = (id) => {
var _czc = _czc || []
_czc.push(["_trackEvent", '预约抽奖', 'm端双十一正式页-立即预约'])
if (this.subscribePopupInstance) {
return
}
http.get(`${API["base-api"]}/sys/activity/create_pre_qrcode`,{params:{id}})
.then(res => {
const {code, data, msg} = res.data
if (code == 200) {
this.subscribePopupInstance = QRCode.toDataURL(data.url, (err, url) => {
Popup({
title: '微信扫码“七月在线”服务号即可预约',
className: 'subscribe',
content: <img src={url} alt="" className="qr-code"/>,
close: () => new Promise(resolve => {
this.subscribePopupInstance = null
resolve()
})
})
})
} else {
Toast.info(msg, 2, null, false)
}
})
}
render() {
const {tabs, today, initialPageIndex, list, activeTimeRangeIndex, userValue} = this.state
const {hasError} = this.props.user
const isLogin = !hasError
const schedule = userValue.schedule <= 2 ? 2 : userValue.schedule
return (
list.length > 0 ?
<div id={'formal-draw'}>
{
list.length &&
<Tabs
tabs={tabs}
initialPage={initialPageIndex}
tabBarBackgroundColor={'transparent'}
tabBarActiveTextColor={'#5600DF'}
tabBarInactiveTextColor={'#FFF604'}
tabBarUnderlineStyle={{display: 'none'}}
onTabClick={this.changeTab}
swipeable={false}
>
{
list.map((listItem, index) => {
return (
<div className={`content ${(isLogin && today === userValue.today) ? 'current' : ''}`} key={index}>
{
(isLogin && (today === userValue.today))
?
<div className="prize_number_con">
当日剩余抽奖次数：
<span className={'prize__number'}>{userValue.surplus}次</span>
</div>
: ""
}
<div className="title">
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/title-decorate-left.png"
alt=""/>
{
isLogin
?
<div className="hot-value">中奖概率值：<span className={'grade'}>{userValue['hot_value']}分</span>
</div>
: <div className="hot-value">中奖概率值：<Link to={'/passport'}>登录</Link></div>
}
<img
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/title-decorate-right.png"
alt=""/>
</div>
{
isLogin ?
<div className="progress-bar">
<img className={'locator'}
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/locator.png"
alt=""
style={{
left: `${schedule - (11 / 330 - (6 / 330)) * 100}%`
}}
/>
<div className="progress" style={{
width: `${schedule}%`
}}></div>
</div>
: null
}
<ul className="time-ranges">
{
listItem.son && listItem.son.map((item, i) => {
let statusContent
switch (item.status) {
case 4:
statusContent = (
<>
<span>已结束</span>
<Link to={`/prize-winner-list?tid=${item.id}`}>查看中奖名单</Link>
</>
)
break
case 3:
statusContent = (
<>
<div>立即抽奖</div>
<div>{item.num}人正在参与</div>
</>
)
break
case 2:
statusContent = '立即预约'
break
default:
statusContent = '即将开启'
}
return (
<li key={i}
className={classnames(`status-${item.status}`, {active: activeTimeRangeIndex === i})}>
<div className={'status-bar'} onClick={() => {
this.setState({activeTimeRangeIndex: i}, () => {
this.initializeSwiper()
})
}}>
<img className={'icon-clock'}
src={
item.status == 3
? 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/m-icon-clock-purple.png'
: "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/m-icon-clock.png"
}
alt=""/>
<div className="time">
<span>{item.time}</span>
</div>
<div className="status"
onClick={this.lotteryFunc.bind(this, item.status, item.id)}>{statusContent}</div>
</div>
{
activeTimeRangeIndex === i &&
listItem.date === today &&
<div className="swiper-container" ref={el => this.swiper = el}>
<ul className={'prizes swiper-wrapper'}>
{
item.data.map((prize, index) => {
return (
<li key={index} className={'swiper-slide'}>
{
prize.level === 1 &&
item.status === 3 &&
<div className="tip">
满10000人释放
</div>
}
<img src={prize.img} alt=""/>
<div className='prize-name'>
<div>{prize.name}</div>
<div>*{prize.num}</div>
</div>
</li>
)
})
}
<li className='swiper-scrollbar'></li>
</ul>
</div>
}
</li>
)
})
}
</ul>
</div>
)
})
}
</Tabs>
}
</div>
: null
)
}
}
export default withRouter(FormalDraw)
src/components/blessingPreheat/formal-draw/index.scss 0 → 100644
#formal-draw {
position: relative;
width: 355px;
background: rgba(57, 0, 201, 1);
border: 1px solid rgba(89, 112, 255, 1);
border-radius: 5px;
margin: 0 auto;
&::before {
content: '';
display: block;
width: 233px;
height: 90px;
position: absolute;
top: 0;
left: 0;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/body-top-bg.png") no-repeat;
background-size: contain;
}
&::after {
content: '';
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 250px;
height: 57px;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/body-bottom-bg.png") no-repeat;
background-size: contain;
}
.am-tabs {
position: relative;
z-index: 10;
width: 330px;
margin: 0 auto;
color: #fff;
& .am-tabs-default-bar-tab:nth-of-type(3) {
&::after {
display: none;
}
}
&.am-tabs-horizontal {
.am-tabs-pane-wrap {
&-inactive {
padding: 0 1px;
}
}
}
.am-tabs-tab-bar-wrap {
height: 33px;
border: 1px solid rgba(255, 246, 4, 1);
border-radius: 0 0 6px 6px;
}
.am-tabs-default-bar-tab {
height: auto;
line-height: 1;
&::after {
content: '';
display: block;
position: absolute;
right: 0;
left: unset;
top: 50%;
margin-top: -7px;
width: 1px;
height: 14px;
background: #FFF604;
transform: none;
}
}
.am-tabs-default-bar-tab-active {
background: #FFF604;
border-radius: 0 0 5px 5px;
}
}
.content {
position: relative;
.title {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 16px;
color: #FFF3F0;
margin: 20px 0 28px;
line-height: 1;
.hot-value {
margin: 0 12px;
a {
display: inline-block;
width: 34px;
height: 18px;
padding: 0;
background: linear-gradient(0deg, rgba(255, 132, 0, 1), rgba(255, 67, 2, 1));
border-radius: 3px;
font-size: 11px;
color: #fff;
font-weight: 400;
color: rgba(255, 255, 255, 1);
border: none;
-webkit-appearance: none;
outline: none;
line-height: 18px;
}
}
.grade {
color: #FFF604;
}
img {
width: 24px;
height: 11px;
}
}
.prize_number_con {
width:280px;
height:30px;
background:rgba(255,255,255,1);
border-radius:15px;
font-size:14px;
font-weight:400;
color:rgba(83,39,250,1);
text-align: center;
text-align-last: center;
line-height: 30px;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 18px;
}
}
.current {
padding-top: 50px;
}
.progress-bar {
position: relative;
width: 330px;
height: 5px;
background: linear-gradient(-90deg, rgba(211, 211, 210, 1) 0%, rgba(255, 255, 255, 1) 100%);
border-radius: 2px;
margin-bottom: 20px;
.progress {
width: 0;
height: 5px;
background: linear-gradient(270deg, rgba(255, 76, 5, 1) 0%, rgba(255, 215, 108, 1) 100%);
border-radius: 2px;
}
.locator {
position: absolute;
top: -16px;
left: 0;
width: 11px;
height: 14px;
}
}
.time-ranges {
overflow: hidden;
& > li {
&::after {
content: '';
display: block;
height: 10px;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/formal-draw-divider.png") no-repeat;
background-size: contain;
margin: 10px 0;
}
}
& > li:last-child {
margin-bottom: 30px;
&::after {
display: none;
}
}
}
.status-bar {
position: relative;
display: flex;
width: 330px;
height: 44px;
text-align: center;
border-radius: 2px;
background: #fff;
.time {
position: relative;
width: 220px;
color: #999;
font-size: 18px;
padding-left: 45px;
line-height: 44px;
text-align: left;
}
.status {
position: relative;
width: 110px;
color: #fff;
font-size: 12px;
border-radius: 0 2px 2px 0;
&::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
display: none;
color: transparent;
margin-left: -6px;
border-style: solid;
border-width: 5px 6px 0;
border-top-color: #CCC;
}
}
.icon-clock {
position: absolute;
top: 50%;
left: 20px;
margin-top: -9px;
width: 16px;
height: 18px;
z-index: 10;
}
}
.status-4 {
.status {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
background: linear-gradient(-90deg, rgba(204, 204, 204, 1) 0%, rgba(221, 221, 221, 1) 100%);
a {
font-size: 10px;
color: #5327FA;
text-decoration: underline;
}
}
&.active {
.status::after {
display: block;
border-top-color: #DDDDDD;
}
}
}
.status-3 {
.time {
color: #5327FA;
}
.status {
display: flex;
justify-content: center;
flex-direction: column;
background: linear-gradient(to right, #ff3b05 0%, #ff6905 100%);
}
&.active {
.status::after {
display: block;
border-top-color: #ff6905;
}
}
}
.status-1, .status-2 {
.status {
background: linear-gradient(-90deg, rgba(7, 240, 255, 1) 0%, rgba(0, 153, 255, 1) 100%);
font-size: 15px;
color: #fff;
text-align: center;
line-height: 44px;
}
&.active .status {
&::after {
display: block;
border-top-color: #07F0FF;
}
}
}
.prizes {
margin-top: 15px;
li {
position: relative;
width: 100px;
margin-right: 6px;
.tip {
position: absolute;
top: -32px;
left: 50%;
z-index: 10;
margin-left: -50px;
padding: 5px 8px;
white-space: nowrap;
background: rgba(255, 246, 4, 1);
border-radius: 2px;
font-size: 11px;
color: #3900C9;
transform: scale(.8);
&::after {
position: absolute;
left: 50%;
bottom: -3px;
margin-left: -6px;
content: '';
display: block;
border-style: solid;
border-width: 4px 6px 0;
border-color: transparent;
border-top-color: rgba(255, 246, 4, 1);
}
}
}
img {
width: 100px;
height: 78px;
background: rgba(255, 255, 255, 1);
border: 2px solid;
border-image: linear-gradient(-40deg, rgba(255, 75, 240, 1), rgba(120, 0, 255, 1)) 10 10;
border-radius: 4px;
}
.prize-name {
width: 99px;
& > div:first-child {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
& > div:last-child {
text-align: center;
}
}
}
.swiper-container {
overflow: visible;
}
}
.closable-popup-mask {
.popup-container.join-lottery {
background: #5327FA;
text-align: center;
.title {
color: #fff;
margin-bottom: 15px;
}
.text {
width: 275px;
height: 248px;
padding: 36px 30px 0;
margin-bottom: 10px;
text-align: center;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/join-lottery-bg.png");
background-size: contain;
font-size: 14px;
.code {
color: #FF0000;
margin-bottom: 8px;
}
.time, .hint {
font-size: 12px;
color: #525C65;
}
.time {
margin-bottom: 20px;
}
.hint {
color: rgba(82, 92, 101, .8);
margin-bottom: 10px;
text-align: left;
}
.qr-code {
width: 90px;
height: 90px;
margin-top: 0;
}
}
button {
width: 133px;
height: 30px;
background: #fff;
border-radius: 15px;
font-size: 14px;
color: #5327FA;
-webkit-appearance: none;
outline: none;
border: none;
}
}
}
.closable-popup-mask {
.subscribe {
height: 215px;
padding-bottom: 30px;
.title {
margin-bottom: 20px;
}
.content {
text-align: center;
.qr-code {
width: 120px;
height: 120px;
}
}
}
}
src/components/blessingPreheat/index.js
......@@ -24,10 +24,13 @@ import { setCurrentUser, startFetchUser } from "@/store/userAction"
import { addDays } from "date-fns"
import { compose } from "redux"
import { connect } from "react-redux"
import FormalDraw from "./formal-draw"
class BlessingPreheat extends Component {
recordInstance = null
constructor(props) {
super(props)
this.navTop = 183
......@@ -79,11 +82,39 @@ class BlessingPreheat extends Component {
id: 'live'
},
],
formalNavs: [
{
text: '幸运大抽奖',
id: 'lucky-draw'
},
{
text: '积福气',
id: 'lucky-value'
},
{
text: '精品特惠',
id: 'best-courses'
},
{
text: 'AI测试',
id: 'ai-test'
},
{
text: '大咖直播',
id: 'live'
},
],
index: 0,
userHasError: props.user.hasError,
isApp: false,
isClose: false,
testSum: 0,
address: {
name: '',
phone: '',
address: ''
},
addressPopupVisible: false
}
}
......@@ -123,6 +154,14 @@ class BlessingPreheat extends Component {
}
componentWillUpdate() {
const {isFormal} = this.state;
if(isFormal === 1) {
document.title = `11.11-11.13 AI充电节，为AI出击！重磅好课1折秒，海量奖品来就送-七月在线`
}else{
document.title = `11.11-11.13 AI充电节，预热来袭！积福气享1折秒课，海量奖品来就送-七月在线`
}
}
// 获取app登录数据
loginInfo = (result) => {
......@@ -215,10 +254,10 @@ class BlessingPreheat extends Component {
}
initNav = (isFormal) => {
const {navs} = this.state
const {formalNavs} = this.state
if (isFormal) {
this.setState({
navs: navs.filter(item => item.id !== 'deposit')
navs: formalNavs
})
}
}
......@@ -267,7 +306,7 @@ class BlessingPreheat extends Component {
handleToSign = () => {
const { userInfo } = this.state;
const {userInfo} = this.state
http.post(`${API.home}/sys/add/blessing`, {
type: 1 // 1：签到；3：分享；4：浏览课程；
}).then(res => {
......@@ -278,7 +317,7 @@ class BlessingPreheat extends Component {
userInfo: Object.assign({}, userInfo, {
blessingVal: userInfo.blessingVal + 5
})
});
})
Toast.info('+5点福气值~', 2, null, false)
}
......@@ -300,15 +339,15 @@ class BlessingPreheat extends Component {
if (isLogin && !isLoginnew) {
this.toLogin()
} else {
if(key === 'shareMark') {
if (key === 'shareMark') {
this.setState({
isClose: false
});
})
setTimeout(() => {
this.setState({
isClose: true
});
}, 5000);
})
}, 5000)
}
let obj = {}
obj[key] = true
......@@ -320,7 +359,7 @@ class BlessingPreheat extends Component {
handleToShowNotice = () => {
http.get(`${API['base-api']}/sys/activity/create_blessing_qrcode`).then(res => {
const {errno, data, msg} = res.data;
const {errno, data, msg} = res.data
if (errno === 200) {
QRCode.toDataURL(data.url, {
width: 120,
......@@ -338,8 +377,8 @@ class BlessingPreheat extends Component {
})
} else if (errno === 4030 || errno === 4040) {
this.toLogin()
}else {
Toast.info(msg, 2, null, false);
} else {
Toast.info(msg, 2, null, false)
}
})
}
......@@ -410,6 +449,106 @@ class BlessingPreheat extends Component {
}
}
getMyPrizeRecord = () => {
const isLoginnew = !this.props.user.hasError
const {history} = this.props
if (!isLoginnew) {
history.push('/passport')
}else{
http.get(`${API.home}/sys/activity/my_lotteries`)
.then(res => {
const {code, data, msg} = res.data
if (code == 200) {
this.recordInstance = Popup({
title: '我的中奖纪录',
className: 'prize-record-popup',
content: (
<div className={'record-container'}>
<div className="list-title">
<div>时间</div>
<div>奖品名称</div>
</div>
<ul>
{
Array.isArray(data)
? data.map((item, index) => {
return (
<li key={index}>
<div className="time">{item.time}</div>
<div className="name"
onClick={this.showAddressPopup.bind(this, item['is_virtual'], item.prize)}>{item.prize}</div>
</li>
)
})
: <li style={{justifyContent: 'center'}}>暂无中奖纪录</li>
}
</ul>
</div>
)
})
} else {
Toast.info(msg, 2, null, false)
}
})
}
}
submitAddress = debounce(() => {
http.post(`${API.home}/sys/collect_info`, {
...this.state.address
})
.then(res => {
const {data, code, msg} = res.data
if (code == 200) {
this.setState({
addressPopupVisible: false
})
} else {
Toast.info(msg, 2, null, false)
}
})
}, 500)
setAddressState = e => {
const value = e.target.value
const name = e.target.name
this.setState({
address: {
...this.state.address, ...{
[name]: value
}
}
})
}
showAddressPopup = (isVirtual, prize) => {
if (isVirtual) {
Toast.info(`恭喜你抽中${prize}，奖品已存放到你的账户`, 2, null, false)
return
}
http.get(`${API.home}/sys/user_address_info`)
.then(res => {
const {data, code, msg} = res.data
if (code == 200) {
this.recordInstance && this.recordInstance.close()
this.setState({
address: {
...this.state.address, ...{
name: data.name,
phone: Number(data.phone),
address: data.address
}
},
addressPopupVisible: true
})
} else {
Toast.info(msg, 2, null, false)
}
})
}
render() {
const {
navs,
......@@ -423,8 +562,10 @@ class BlessingPreheat extends Component {
index,
isApp,
isClose,
testSum
} = this.state;
testSum,
address,
addressPopupVisible,
} = this.state
const {history} = this.props
const isLogin = !this.props.user.hasError
return (
......@@ -435,8 +576,23 @@ class BlessingPreheat extends Component {
toSection={this.toSection}
index={index}
/>
{/* 抽奖--正式 */}
{
isFormal === 1 &&
<>
<ListHeader id={'lucky-draw'} text="幸运大抽奖" styles={{margin: '30px 0 10px'}}/>
<div className="formal-draw-btns">
<button className="luck-draw__button" onClick={() => this.handleToShow('isRule')}>活动规则></button>
<button className='prize-record' onClick={this.getMyPrizeRecord}>中奖记录></button>
</div>
<FormalDraw toLogin={this.toLogin}/>
</>
}
{/* 积福气 */}
<ListHeader id={'lucky-value'} text="积福气，享受更多福利" styles={{margin: '60px 0 15px'}}/>
<ListHeader id={'lucky-value'} text="积福气，享受更多福利" styles={{margin: '30px 0 15px'}}/>
<Link className="luck-draw__button" to="/blessingRank">福气排行榜></Link>
......@@ -453,10 +609,16 @@ class BlessingPreheat extends Component {
/>
{/* 幸运大抽奖--预热 */}
<ListHeader id={'lucky-draw'} text="幸运大抽奖" styles={{margin: '30px 0 10px'}}/>
<p className="luck-draw__tip">- 将于11月11日10点开启 -</p>
<button className="luck-draw__button" onClick={() => this.handleToShow('isRule')}>活动规则></button>
<LuckDraw/>
{
isFormal === 0 &&
<>
<ListHeader id={'lucky-draw'} text="幸运大抽奖" styles={{margin: '30px 0 10px'}}/>
<p className="luck-draw__tip">- 将于11月11日10点开启 -</p>
<button className="luck-draw__button" onClick={() => this.handleToShow('isRule')}>活动规则></button>
<LuckDraw/>
</>
}
{/*定金--只在预热期间显示*/}
{
......@@ -488,41 +650,15 @@ class BlessingPreheat extends Component {
}
{
showRecordList &&
<RecordPopup handleToHide={() => this.handleToHide('showRecordList')}/>
<RecordPopup
history={this.props.history}
handleToHide={() => this.handleToHide('showRecordList')}
/>
}
{
shareMark &&
<SharePopup isClose={isClose} toClose={() => this.handleToHide('shareMark')}/>
}
{/*
<Popup visible={this.state.joinLotteryVisible}
title={'你已成功参与本时段抽奖'}
className={'join-lottery'}
>
<div className="text">
<div className="code">抽奖码为：99999999</div>
<div className="time">本时段的中奖结果将在xx:xx公布</div>
<div className="hint">你可关注‘七月在线’服务号第一时间获得中奖信息。</div>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png"
className='qr-code' alt=""/>
</div>
<button onClick={() => {
this.setState({joinLottery: false})
}}>知道了
</button>
</Popup>
<Popup title={'微信扫码分享到微信朋友圈'}
visible={this.state.timelineShareVisible}
className={'timeline-share'}
>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" alt=""
className="qr-code"/>
</Popup>*/}
<ListHeader id={'ai-test'} text="全国AI工程师水平测试" styles={{margin: '30px 0 15px'}}/>
<div className="test__record" onClick={() => this.handleToShow('showRecordList', true)}>
......@@ -538,7 +674,52 @@ class BlessingPreheat extends Component {
<RankList></RankList>
<Live isFormal={isFormal} isLogin={isLogin}></Live>
<Live isFormal={isFormal} isLogin={isLogin}/>
{
addressPopupVisible &&
<div className="address-mask">
<div className="address-popup">
<div className="title">收货信息</div>
<div className="address-info-container">
<div className="tip">请及时填写收货信息，获得实物奖品后将第一时间为您邮寄</div>
<input type="text"
placeholder={'收件人'}
name={'name'}
onChange={e => {
this.setAddressState(e)
}}
value={address.name}
/>
<input type="tel"
placeholder={'联系方式'}
name={'tel'}
onChange={e => {
this.setAddressState(e)
}}
value={address.phone}
/>
<input type="text"
placeholder={'收货地址'}
name={'address'}
onChange={e => {
this.setAddressState(e)
}}
value={address.address}
/>
<button type='button'
className={(address.name != '' && address.phone != '' && address.address != '') ? 'active' : ''}
onClick={this.submitAddress}
>提交
</button>
<i className={'iconfont iconiconfront-2'} onClick={() => {
this.setState({
addressPopupVisible: false
})
}}/>
</div>
</div>
</div>
}
</div>
)
}
......
src/components/blessingPreheat/index.scss
......@@ -2,100 +2,28 @@
background: #5327FA;
}
.timeline-share{
height: 215px;
padding-bottom: 30px;
.title{
margin-bottom: 20px;
}
.content{
text-align: center;
.qr-code{
width: 120px;
height: 120px;
}
}
}
.test__record {
width: 106px;
height: 26px;
border:1px solid rgba(255,246,4,1);
border-radius:13px;
font-size:14px;
font-weight:400;
color:rgba(255,246,4,1);
border: 1px solid rgba(255, 246, 4, 1);
border-radius: 13px;
font-size: 14px;
font-weight: 400;
color: rgba(255, 246, 4, 1);
margin: 10px auto 14px;
display: flex;
justify-content: center;
align-items: center;
}
.sort__rules {
font-size:12px;
font-weight:400;
color:rgba(255,255,255,1);
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 1);
text-align: center;
text-align-last: center;
}
.join-lottery {
background: #5327FA;
text-align: center;
.title {
color: #fff;
margin-bottom: 15px;
}
.text {
width: 275px;
height: 248px;
padding: 36px 30px 0;
margin-bottom: 10px;
text-align: center;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/join-lottery-bg.png");
background-size: contain;
font-size: 14px;
.code {
color: #FF0000;
margin-bottom: 8px;
}
.time, .hint {
font-size: 12px;
color: #525C65;
}
.time {
margin-bottom: 20px;
}
.hint{
color: rgba(82, 92, 101, .8);
margin-bottom: 10px;
text-align: left;
}
.qr-code {
width: 90px;
height: 90px;
}
}
button {
width: 133px;
height: 30px;
background: #fff;
border-radius: 15px;
font-size: 14px;
color: #5327FA;
-webkit-appearance: none;
outline: none;
border: none;
}
}
.invite-popup {
.content {
display: flex;
......@@ -131,7 +59,7 @@
text-align: center;
}
.luck-draw__button {
.luck-draw__button, .prize-record {
display: block;
width: 106px;
height: 26px;
......@@ -149,3 +77,158 @@
outline: none;
}
.formal-draw-btns {
display: flex;
justify-content: center;
margin: 15px 0;
button {
margin: 0;
}
& button:first-child {
margin-right: 27px;
}
}
.prize-record-popup {
.title {
margin-bottom: 11px;
}
.record-container {
width: 250px;
.list-title {
display: flex;
border-radius: 2px 2px 0 0;
div {
width: 50%;
height: 33px;
line-height: 33px;
background: #edeeef;
text-align: center;
font-size: 12px;
color: #525C65;
}
}
ul {
border: 1px solid #CFDBE5;
border-bottom: 0;
li {
border-bottom: 1px solid #CFDBE5;
display: flex;
height: 33px;
line-height: 33px;
font-size: 12px;
& > div {
width: 50%;
text-align: center;
}
.time {
color: #525C65;
}
.name {
color: #09f;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: underline;
}
}
}
}
}
.address-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
z-index: 100;
.address-popup {
position: absolute;
top: 179px;
left: 50%;
margin-left: -150px;
width: 300px;
height: 309px;
padding: 18px 25px;
background: #fff;
border-radius: 5px;
font-size: 12px;
.address-info-container {
position: relative;
padding-bottom: 24px;
text-align: center;
}
.title {
font-size: 16px;
color: #525C65;
text-align: center;
margin-bottom: 11px;
}
.tip {
color: #999;
margin-bottom: 15px;
}
input {
width: 250px;
height: 40px;
border: 1px solid rgba(221, 221, 221, 1);
-webkit-appearance: none;
outline: none;
margin-bottom: 10px;
padding-left: 10px;
&::placeholder {
color: #999;
}
}
button {
width: 141px;
height: 33px;
margin-top: 13px;
text-align: center;
line-height: 33px;
background: #ccced0;
color: #fff;
-webkit-appearance: none;
outline: none;
border: none;
border-radius: 16px;
font-size: 15px;
&.active{
background: #09f;
}
}
}
.iconfont{
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
font-size: 33px;
color: #fff;
}
}
src/components/blessingPreheat/levelTest/index.js
import React, { Component } from 'react'
import './index.scss'
import listFrame from './../listFrame/index';
import { http, SendMessageToApp} from "@/utils"
import { http, SendMessageToApp, getParam} from "@/utils"
class LevelTest extends Component {
constructor(props) {
......@@ -50,18 +50,19 @@ class LevelTest extends Component {
}
startTest = () => {
const {history, isLogin, toLogin} = this.props;
const {isLogin, toLogin} = this.props;
if(isLogin) {
// history.push('/levelTest/test');
// if(getParam('version')) {
var _czc = _czc || [];
_czc.push(["_trackEvent", 'AI水平测试', 'm端双十一AI水平测试-点击测试']);
if(getParam('version')) {
window.location.href = `${API.m}/levelTest/test?version=${getParam('version')}`;
}else{
window.location.href = `${API.m}/levelTest/test`;
// }else{
// history.push('/levelTest/test');
// }
}
}else{
toLogin();
}
}
render() {
......
src/components/blessingPreheat/live/index.js
......@@ -16,9 +16,9 @@ class Live extends Component {
state = {
tabs: [],
lives: {},
lives: [],
preheatLives: [],
today: '',
todayIndex: '',
isApp: getParam('version'),
QRCodeUrl: '',
}
......@@ -27,52 +27,40 @@ class Live extends Component {
componentDidMount() {
http.get(`${API.home}/sys/get_live_info`)
.then(res => {
const {data} = res
if (data.code == 200) {
const lives = data.data['data_active'].reduce((accu, current) => {
if (!(current.date in accu)) {
accu[current.date] = [current]
} else {
accu[current.date].push(current)
}
return accu
}, {})
const preheatLives = data.data['data_hot'].reduce((accu, current) => {
if (!(current.date in accu)) {
accu[current.date] = [current]
} else {
accu[current.date].push(current)
}
return accu
}, {})
let tabs, today
if (this.props.isFormal) {
tabs = Object.keys(lives).map(item => ({title: item}))
today = uniqBy(data.data['data_active'], value => value.date).findIndex(item => item['is_today'])
} else {
tabs = Object.keys(preheatLives).map(item => ({title: item}))
today = uniqBy(data.data['data_hot'], value => value.date).findIndex(item => item['is_today'])
}
const {data, code, msg} = res.data
if (code == 200) {
let tabs = uniqBy(data, item => item.date)
tabs = tabs.map(item => ({title: item.date}))
let todayIndex = data.findIndex(item => item['is_today'])
this.setState({
tabs,
lives,
today,
preheatLives
lives: data,
todayIndex: todayIndex < 0 ? 0 : todayIndex,
})
} else {
Toast.info(data.msg, 2, null, false)
Toast.info(msg, 2, null, false)
}
})
}
toLogin = () => {
const {history} = this.props
if (!getParam('version')) {
history.push('/passport')
} else {
SendMessageToApp("toLogin")
}
}
toLiveRoom = id => {
const {history, isLogin} = this.props
var _czc = _czc || []
var name = '直播间id=' + id
_czc.push(["_trackEvent", name, 'm端双十一大咖直播-正在直播'])
if (this.state.isApp) {
if (isLogin) {
SendMessageToApp('toLiveRoom', id)
......@@ -100,10 +88,14 @@ class Live extends Component {
}
makeSubscribe = id => {
const {user, history} = this.props
const {user} = this.props
if (user.hasError) {
history.push('/passport/login')
this.toLogin()
}
var name = '直播间id=' + id
_czc.push(["_trackEvent", name, 'm端双十一大咖直播-立即预约'])
http.get(`${API['base-api']}/sys/createLiveQrcode/${id}`)
.then(res => {
const {data} = res
......@@ -132,14 +124,15 @@ class Live extends Component {
})
}
})
} else {
} else if(data.errno == 4030 || data.errno == 4040){
}else {
Toast.info(data.msg, 2, null, false)
}
})
}
render() {
const {tabs, lives, preheatLives, today} = this.state
const {tabs, lives, todayIndex} = this.state
return (
<div id={'live'}>
<div className="title">
......@@ -149,48 +142,32 @@ class Live extends Component {
</div>
<div className="live-container">
{
today !== '' &&
todayIndex !== '' &&
<Tabs
tabs={tabs}
tabBarBackgroundColor={'transparent'}
tabBarActiveTextColor={'#5600DF'}
tabBarInactiveTextColor={'#FFF604'}
tabBarUnderlineStyle={{display: 'none'}}
initialPage={today}
initialPage={todayIndex}
swipeable={false}
>
{
this.props.isFormal
? tabs.map((item, index) => {
const todayLives = lives[item.title]
return (
<div key={index}>
{
todayLives.map((item, index) => {
return (
<LiveContent item={item} key={index} makeSubscribe={this.makeSubscribe}
toLiveRoom={this.toLiveRoom}/>
)
})
}
</div>
)
})
: tabs.map((item, index) => {
const todayLives = preheatLives[item.title]
return (
<div key={index}>
{
todayLives.map((item, index) => {
return (
<LiveContent item={item} key={index} makeSubscribe={this.makeSubscribe}
toLiveRoom={this.toLiveRoom}/>
)
})
}
</div>
)
})
tabs.map((item, index) => {
const todayLives = lives.filter(liveItem => liveItem.date === item.title)
return (
<div key={index}>
{
todayLives && todayLives.map((item, index) => {
return (
<LiveContent item={item} key={index} makeSubscribe={this.makeSubscribe}
toLiveRoom={this.toLiveRoom}/>
)
})
}
</div>
)
})
}
</Tabs>
......
src/components/blessingPreheat/live/index.scss
......@@ -182,6 +182,7 @@
color: #fff;
& .am-tabs-default-bar-tab:nth-last-of-type(2) {
width: 21% !important;
&::after {
display: none;
}
......@@ -189,8 +190,7 @@
.am-tabs-tab-bar-wrap {
height: 33px;
border: 1px solid rgba(255, 246, 4, 1);
border-radius: 0 0 6px 6px;
}
.am-tabs-default-bar-tab {
......@@ -212,11 +212,21 @@
}
}
.am-tabs-default-bar-tab-active {
background: #FFF604;
border-radius: 0 0 6px 6px;
border-radius: 0 0 5px 5px;
}
.am-tabs-default-bar-top {
.am-tabs-default-bar-content {
border: 1px solid rgba(255, 246, 4, 1);
border-radius: 0 0 6px 6px;
overflow: hidden;
}
}
}
}
......
src/components/blessingPreheat/recordPopup/index.js
import React, { Component } from 'react'
import './index.scss'
import { http } from '@/utils';
import { http, getParam } from '@/utils';
export default class RecordPopup extends Component {
constructor(props) {
......@@ -21,6 +21,16 @@ export default class RecordPopup extends Component {
});
}
handleToTestRecord = (e, id) => {
e.preventDefault();
const { history } = this.props;
if(getParam('version')) {
location.href = `${API.m}/levelTest/report?id=${id}&version=${getParam('version')}`;
} else {
location.href = `${API.m}/levelTest/report?id=${id}&version=${getParam('version')}`;
}
}
render() {
let {recordList} = this.state;
......@@ -49,7 +59,7 @@ export default class RecordPopup extends Component {
<span className="tr">
{
index === 0 ? (
<a href={`/levelTest/report?id=${item.id}`}>测试记录</a>
<a onClick={(e) => this.handleToTestRecord(e, item.id)}>测试记录</a>
) : (null)
}
</span>
......
src/components/blessingRank/index.scss
......@@ -95,9 +95,14 @@
}
.rank__table-user {
display: inline-flex;
display: flex;
align-items: center;
justify-content: center;
padding: 0 5px;
span {
flex: 1;
text-align: left;
}
}
.rank__table-portrait {
......
src/components/expand/share.js
......@@ -91,7 +91,7 @@ class ExpandShare extends Component {
this.props.history.push('/passport/login')
} else {
this.props.history.push(
`/deposit-order?oid=${getParam('id')}&source=${1}`,
`/deposit-order?oid=${courseId}&source=${1}`,
{
id: courseId,
isexpand: 1,
......
src/components/preferential/index.js
......@@ -43,7 +43,7 @@ class Preferential extends Component {
http.get(`${API.home}/m/home/bargainZone`).then((res) => {
if (res.data.code === 200) {
this.setState({
dataList: res.data.data,
dataList: JSON.stringify(res.data.data) == '{}' ? []:res.data.data,
isLoading: false,
})
} else {
......@@ -83,9 +83,9 @@ class Preferential extends Component {
}
toCourseDetail = (id) => {
const { dispatch, history } = this.props;
const {dispatch, history} = this.props;
// dispatch(getCourses(id, () => {
history.push(`/detail?id=${id}`)
history.push(`/detail?id=${id}`)
// }));
}
......@@ -95,11 +95,11 @@ class Preferential extends Component {
{title: '砍价专区'},
{title: '一键拼团'}
]
const { user ={} } = this.props;
let isLogin = user.data && user.data.uid? true : false;
const {user = {}} = this.props;
let isLogin = user.data && user.data.uid ? true : false;
return (
<div className='preferential'>
<HeaderSearch isLogin={isLogin} />
<HeaderSearch isLogin={isLogin}/>
<Loading isLoading={this.state.isLoading}>
<div className='class-content'>
<WhiteSpace/>
......@@ -116,58 +116,62 @@ class Preferential extends Component {
>
</Tabs>
<div className='tabs'>
<ul>
{this.state.dataList.map((item, index) => {
const Info = (
<div className="info">
<p className='title' onClick={() => this.toCourseDetail(item.course_id)}>
{/* <Link to={`/detail?id=${item.course_id}`}> */}
{item.course_title}
{/* </Link> */}
</p>
<p className='contact text-overflow-2'>{item.course_desc}</p>
<div className='des'>
{!item.is_buy &&
<p className="course-price">
{this.state.courseStatus === 0 &&
<span className='price'>特惠价：</span>
}
<span className="new">¥{item.price1}</span>
<span className="old">¥{item.price0}</span>
{
this.state.dataList.length>0?
<ul>
{this.state.dataList.map((item, index) => {
const Info = (
<div className="info">
<p className='title'
onClick={() => this.toCourseDetail(item.course_id)}>
{/* <Link to={`/detail?id=${item.course_id}`}> */}
{item.course_title}
{/* </Link> */}
</p>
<p className='contact text-overflow-2'>{item.course_desc}</p>
<div className='des'>
{!item.is_buy &&
<p className="course-price">
{this.state.courseStatus === 0 &&
<span className='price'>特惠价：</span>
}
<span className="new">¥{item.price1}</span>
<span className="old">¥{item.price0}</span>
</p>
}
{item.is_buy &&
<a className="isbuy">已购买</a>
}
</div>
</div>
)
const status = (
!item.is_buy &&
<div>
{this.state.courseStatus === 1 &&
<p className='course-status'>砍价减{item.bargain_price}元</p>
}
{this.state.courseStatus === 2 &&
<p className='course-status'>拼团价{item.price}元</p>
}
{item.is_buy &&
<a className="isbuy">已购买</a>
{
item.is_aist && <span className='return_cash'></span>
}
</div>
</div>
)
const status = (
!item.is_buy &&
<div>
{this.state.courseStatus === 1 &&
<p className='course-status'>砍价减{item.bargain_price}元</p>
}
{this.state.courseStatus === 2 &&
<p className='course-status'>拼团价{item.price}元</p>
}
{
item.is_aist && <span className='return_cash'></span>
}
</div>
)
return (
<VList
key={index}
img={item.image_name}
id={item.course_id}
status={status}
info={Info}
toDetail={this.toCourseDetail}
/>
)
})}
</ul>
)
return (
<VList
key={index}
img={item.image_name}
id={item.course_id}
status={status}
info={Info}
toDetail={this.toCourseDetail}
/>
)
})}
</ul>:<div className={'notdata'}>砍价的课程已被设置为双十一活动课程，参加双十一活动购买课程优惠更多哦！</div>
}
</div>
<WhiteSpace/>
......
src/components/preferential/index.scss
......@@ -148,5 +148,14 @@
}
}
.notdata{
width: 100%;
padding: 0 35px;
text-align: center;
margin-top: 100px;
color: #666;
font-size: 14px;
}
}
src/router/router-config.js
......@@ -182,6 +182,10 @@ export default [
component: loadable(() => import(/* webpackChunkName: 'blessing-preheat' */'@/components/blessingPreheat/index'))
},
{
path: '/blessingGetPrize',
component: loadable(() => import(/* webpackChunkName: 'blessing-getPrize' */'@/components/blessingGetPrize/index'))
},
{
path: '/prize-winner-list',
component: loadable(() => import(/* webpackChunkName: 'prize-winner-list' */'@/components/activity/prize-winner-list'))
},
......
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