Skip to content

M
mr-julyedu
Commit e585b81b by wangshuo
Options

课程详情页、拼团、订单

parent bb58baaf
Showing with 726 additions and 84 deletions
src/assets/font/iconfont.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/components/detail/bargain/bargain.scss
...@@ -15,16 +15,17 @@ ...@@ -15,16 +15,17 @@
} }
.intro-outer { .intro-outer {
width: 360px; width: 100%;
height: 133px; height: 133px;
border: 5px solid $color_FE2F2F; border: 5px solid $color_FE2F2F;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0 5px;
} }
.intro-inner { .intro-inner {
width: 341px; width: 100%;
height: 114px; height: 114px;
padding-top: 15px; padding-top: 15px;
background: $bg_FFF8EB; background: $bg_FFF8EB;
......
src/components/detail/btnstatus/index.js
...@@ -13,31 +13,55 @@ class BtnStatus extends Component { ...@@ -13,31 +13,55 @@ class BtnStatus extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
isbuy: 1 isbuy: 1,
is_baoming: 0,
group_status: 3,
in_cart: false,
} }
} }
componentWillReceiveProps(nextProps) {
this.setState({
...nextProps.data.course_info
});
}
// 加入购物车 // 加入购物车
toCart = () => { toCart = () => {
let data = { let data = {
course_id: getParam('id') course_id: getParam('id')
} };
http.post(`${api.home}/m/cart/add`, data).then((res) => { http.post(`${api.home}/m/cart/add`, data).then((res) => {
if (res.data.code === 200) { if (res.data.code === 200) {
Toast.info('已加入购物车', 2); Toast.info('已加入购物车', 2);
// window.location.reload()
this.props.getCourses(); this.props.getCourses();
} else { } else {
Toast.info(res.data.msg, 2); Toast.info(res.data.msg, 2);
} }
}) })
} }
// 直接购买 TODO 等弄清楚了逻辑 再和加入购物车合并
toBuy = () => {
let data = {
course_id: getParam('id')
};
http.post(`${api.home}/m/cart/add`, data).then((res) => {
if(res.data.code !== 200) {
Toast.info(res.data.msg, 2);
return;
}
this.props.history.replace('/shopcart');
})
}
render() { render() {
let info = '' let info = ''
if (this.props.data && this.props.data.course_info) { if (this.props.data && this.props.data.course_info) {
info = this.props.data.course_info info = this.props.data.course_info
} }
return ( return (
<div> <div>
...@@ -75,33 +99,36 @@ class BtnStatus extends Component { ...@@ -75,33 +99,36 @@ class BtnStatus extends Component {
} }
{/*拼团 未开团*/} {/*拼团 未开团*/}
{ {
info.is_baoming === 0 && info.group_status === 4&& info.is_baoming === 0 && info.group_status === 3 &&
<div className='btns-box'> <div className='btns-box'>
<a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true"> <a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
<i className='iconfont iconerji'></i> <i className='iconfont iconerji'></i>
<span>课程咨询</span> <span>课程咨询</span>
</a> </a>
<button className='btn btn-s bg-F4AAA7'> <button className='btn btn-s bg-F4AAA7' onClick={this.toBuy}>
<span>¥149</span> <span>{`¥ ${info.price1}`}</span>
<span>直接购买</span> <span>直接购买</span>
</button> </button>
<button className='btn btn-s bg-E02E24'> <button className='btn btn-s bg-E02E24'>
<span>¥1</span> <Link to={`/order?id=${getParam('id')}`}>
<span>一键开团</span> <span>{`¥ ${info.pdd_group_info.price}`}</span>
</button> <span>一键开团</span>
</div> </Link>
</button>
</div>
} }
{/*拼团 已开团*/} {/*拼团 已开团*/}
{ {
info.is_baoming === 0 && info.group_status === 3 && info.is_baoming === 0 && info.group_status === 4 &&
<div className='btns-box'> <div className='btns-box'>
<a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true"> <a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
<i className='iconfont iconerji'></i> <i className='iconfont iconerji'></i>
<span>课程咨询</span> <span>课程咨询</span>
</a> </a>
<Link to={`/togroup`} className='btn btn-l bg-E02E24'> <div className='btn btn-l bg-E02E24' onClick={this.props.invitedFriends}>
邀请好友参团 23:32:23 后结束 邀请好友参团 23:32:23 后结束
</Link> </div>
</div> </div>
} }
...@@ -113,8 +140,8 @@ class BtnStatus extends Component { ...@@ -113,8 +140,8 @@ class BtnStatus extends Component {
<i className='iconfont iconerji'></i> <i className='iconfont iconerji'></i>
<span>课程咨询</span> <span>课程咨询</span>
</a> </a>
<button className='btn btn-s bg-F4AAA7'> <button className='btn btn-s bg-F4AAA7' onClick={this.toCart}>
<span>¥149</span> <span>{`¥ ${info.price}`}</span>
<span>直接购买</span> <span>直接购买</span>
</button> </button>
{ {
...@@ -126,7 +153,7 @@ class BtnStatus extends Component { ...@@ -126,7 +153,7 @@ class BtnStatus extends Component {
{ {
this.state.isbuy === 1 && this.state.isbuy === 1 &&
<button className='btn btn-s bg-E02E24'> <button className='btn btn-s bg-E02E24'>
<span>¥1</span> <span>{`¥ ${info.price}`}</span>
<span>去支付</span> <span>去支付</span>
</button> </button>
} }
......
src/components/detail/group/index.js
...@@ -3,13 +3,18 @@ import './index.scss' ...@@ -3,13 +3,18 @@ import './index.scss'
import {getParam} from "@/utils" import {getParam} from "@/utils"
import {connect} from "react-redux" import {connect} from "react-redux"
import {Link} from "react-router-dom" import {Link} from "react-router-dom"
import {Flex} from 'antd-mobile'
class Group extends Component { class Group extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
isShowMore: false isShowMore: false,
alreadyIn: false,
pdd_price: 0,
number: 0,
data: {},
} }
} }
...@@ -27,12 +32,138 @@ class Group extends Component { ...@@ -27,12 +32,138 @@ class Group extends Component {
}) })
} }
toPay = (pdd_order_id) => {
const courseInfo = this.props.courseInfo.courseInfo.course_info;
if(courseInfo.group_status === 3) {
this.props.history.push(`/order?id=${getParam('id')}&&groupon_code=${pdd_order_id}`);
}else{
this.setState({
isShowMore: false,
alreadyIn: true
});
}
}
invitedFriends = () => {
this.setState({
isShowMore: false,
alreadyIn: false,
});
const {pdd_price, number, data} = this.state;
if(browser.isWeixin) {
let share = this.state.share;
this.setState({
share: !share,
});
let shareData = {
title: `【仅剩${number}个名额】我${pdd_price}元拼了《${data.course_title}》`,
desc: data.course_title, // 分享描述
link: location.origin + `/detail??id=${data.course_id}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: data.image_name, // 分享图标
};
http.post(`${api['pay-api']}/m/sale/signature`).then(res => {
const {nonce_str, signature, timestamp} = res.data;
wx.config({
"debug": false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
"appId": 'wx23dac6775ac82877', // 必填，公众号的唯一标识
"timestamp": timestamp, // 必填，生成签名的时间戳
"nonceStr": nonce_str, // 必填，生成签名的随机串
"signature": signature, // 必填，签名
jsApiList: [
'hideMenuItems',
'showMenuItems',
'updateAppMessageShareData',
'updateTimelineShareData',
'onMenuShareWeibo',
'onMenuShareAppMessage',
], // 必填，需要使用的JS接口列表
});
});
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.hideAllNonBaseMenuItem();
wx.showMenuItems({
menuList: ['menuItem:share:appMessage' , 'menuItem:share:timeline'] // 要显示的菜单项，所有menu项见附录3
});
wx.updateAppMessageShareData({
...shareData,
success: function () {
// 设置成功
}
})
wx.updateTimelineShareData({
...shareData,
success: function () {
// 设置成功
}
})
});
}else{
Toast.info('请在微信中使用分享功能！', 2);
}
}
hideMbc = () => {
this.setState({
alreadyIn: false
});
}
render() { render() {
let groupInfo = '' const {alreadyIn} = this.state;
let groupInfo = '',groupon_member = '', group_status = -1, groupSuccessMbc = null;
if (this.props.courseInfo && this.props.courseInfo.courseInfo && this.props.courseInfo.courseInfo.course_info) { if (this.props.courseInfo && this.props.courseInfo.courseInfo && this.props.courseInfo.courseInfo.course_info) {
groupInfo = this.props.courseInfo.courseInfo.course_info.pdd_group_info groupInfo = this.props.courseInfo.courseInfo.course_info.pdd_group_info;
groupon_member = groupInfo.groupon_member;
group_status = this.props.courseInfo.courseInfo.course_info.group_status;
}
if(group_status === 4) {
if(groupon_member.member) {
const {number} = groupon_member;
let ary=[],num = number;
while(num != 0) {
ary.push(num);
num--;
}
let groupTip = (<div className='group-user-list'>
<Flex justify='center' className='imgList'>
{
groupon_member.member.map(item => {
return (
<div className='imgContainer' key={Math.random()}>
<img className='imgname' src={item.avatar} alt='' />
{
item.user_type === 1 ? (
<div className='leaderFlag'>
<span>团长</span>
</div>
) : null
}
</div>);
})
}
{
ary.map(item => {
return (<div className='imgContainer' key={Math.random()}>
<div className='imgname'>
<i className='iconfont iconwode-xianxing no-body'></i>
</div>
</div>)
})
}
</Flex>
</div>);
groupSuccessMbc = <div className='groupSuccessMbc' onClick={this.hideMbc}>
<div className='content'>
<p>你已参团</p>
{groupTip}
<div className='group-btn' onClick={this.invitedFriends}>邀请好友参团 23：23：23 后结束</div>
<p className='dec'>分享到3个群后，成团率高达98%</p>
</div>
</div>;
}
} }
return ( return (
<div className='group-box'> <div className='group-box'>
<div className="group-title"> <div className="group-title">
...@@ -56,8 +187,7 @@ class Group extends Component { ...@@ -56,8 +187,7 @@ class Group extends Component {
<p>还差<span className='red'>{item.number}人</span>拼成</p> <p>还差<span className='red'>{item.number}人</span>拼成</p>
<p>剩余 {item.end_time}</p> <p>剩余 {item.end_time}</p>
</div> </div>
<Link to={`/order?id=${getParam('id')}&&groupon_code=${item.pdd_order_id}`} <span onClick={()=>{this.toPay(item.pdd_order_id)}} className='topay'>去参团</span>
className='topay'>去参团</Link>
</li> </li>
) )
}) })
...@@ -68,9 +198,16 @@ class Group extends Component { ...@@ -68,9 +198,16 @@ class Group extends Component {
<i className='iconfont iconiconfront-1'></i> <i className='iconfont iconiconfront-1'></i>
·好友参团 ·人满成交 ·人不满退款 ·好友参团 ·人满成交 ·人不满退款
</span> </span>
<span className='allNum'>累计856人成团</span> <span className='allNum'>{`累计${groupInfo.person_num}人成团`}</span>
</div> </div>
{
(alreadyIn && group_status === 4) && (
<>
{groupSuccessMbc}
</>
)
}
{/*更多*/} {/*更多*/}
{ {
this.state.isShowMore && this.state.isShowMore &&
...@@ -90,9 +227,7 @@ class Group extends Component { ...@@ -90,9 +227,7 @@ class Group extends Component {
<p className='time'>剩余 {item.end_time}</p> <p className='time'>剩余 {item.end_time}</p>
</div> </div>
<p className='group-status'>还差{item.number}人</p> <p className='group-status'>还差{item.number}人</p>
<Link <span onClick={()=>{this.toPay(item.pdd_order_id)}} className='topay'>去参团</span>
to={`/order?id=${getParam('id')}&&groupon_code=${item.pdd_order_id}`}
className='topay'>去参团</Link>
</li> </li>
) )
}) })
...@@ -101,8 +236,9 @@ class Group extends Component { ...@@ -101,8 +236,9 @@ class Group extends Component {
<div className='more-group-dec'> <div className='more-group-dec'>
仅显示10个正在开团的人 仅显示10个正在开团的人
</div> </div>
<i onClick={this.closeMore} className={'iconfont iconiconfront-2 close'}></i>
</div> </div>
<i onClick={this.closeMore} className={'iconfont iconiconfront-2 close'}></i>
</div> </div>
} }
......
src/components/detail/group/index.scss
...@@ -100,15 +100,18 @@ ...@@ -100,15 +100,18 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: rgba(0, 0, 0, .6); background-color: rgba(0, 0, 0, .6);
z-index: 2; z-index: 9;
.content { .content {
width: 300px; width: 300px;
height: 388px; height: 388px;
background-color: $white; background-color: $white;
border-radius: 3px; border-radius: 3px;
margin: 139px auto 20px auto; // margin: 139px auto 20px auto;
position: relative; position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.title-box { .title-box {
width: 100%; width: 100%;
...@@ -199,7 +202,120 @@ ...@@ -199,7 +202,120 @@
position: relative; position: relative;
left: 50%; left: 50%;
margin-left: -11px; margin-left: -11px;
top: 60px;
} }
} }
.groupSuccessMbc {
position: fixed;
z-index: 999;
background: rgba(0, 0, 0, 0.8);
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.content {
width: 300px;
background-color: #fff;
padding: 16px;
p {
color: #333333;
font-size: 16px;
text-align: center;
width: 100%;
}
.group-btn {
height: 30px;
line-height: 30px;
font-size: 14px;
background-color: #E02E24;
color: #FFFFFF;
text-align: center;
width: 270px;
border-radius: 6px;
margin-top: 20px;
}
.dec {
color: #666666;
font-size: 12px;
text-align: center;
margin-top: 10px;
}
.group-user-list {
.imgList {
padding-top: 20px;
.imgContainer {
position: relative;
width: 44px;
height: 44px;
border-radius: 50%;
margin-right: 20px;
.imgname {
margin: 0;
width: 44px;
height: 44px;
background-color: #DEDEDE;
border-radius: 50%;
.no-body {
font-size: 28px;
position: relative;
left: 8px;
}
}
.leaderFlag {
position: absolute;
background-color: #0099ff;
border: 1px solid #fff;
width: 30px;
color: #fff;
line-height: 18px;
height: 18px;
text-align: center;
border-radius: 9px;
top: -6px;
span {
font-size: 12px;
transform: scale(0.9);
}
}
}
}
}
}
.tipContent {
width: 270px;
height: 44px;
line-height: 44px;
text-align: center;
border: 1px dashed rgba(255, 255, 255, 1);
border-radius: 3px;
color: #fff;
font-size: 14px;
position: absolute;
top: 100px;
}
.tipArrow {
position: absolute;
right: 15px;
top: 38px;
.iconyindao:before {
font-size: 44px;
color: #FFF;
}
}
}
} }
\ No newline at end of file
src/components/detail/group/togroup.scss
.to-group-box { .to-group-box {
.group-user-list {
.imgList {
padding-top: 20px;
.imgContainer {
position: relative;
width: 44px;
height: 44px;
border-radius: 50%;
margin-right: 20px;
.imgname {
margin: 0;
width: 44px;
height: 44px;
background-color: #DEDEDE;
border-radius: 50%;
.no-body {
font-size: 28px;
position: relative;
left: 8px;
}
}
.leaderFlag {
position: absolute;
background-color: #0099ff;
border: 1px solid #fff;
width: 30px;
color: #fff;
line-height: 18px;
height: 18px;
text-align: center;
border-radius: 9px;
top: -6px;
span {
font-size: 12px;
transform: scale(0.9);
}
}
}
}
}
.v-list-item { .v-list-item {
margin-top: 5px; margin-top: 5px;
...@@ -64,9 +109,94 @@ ...@@ -64,9 +109,94 @@
} }
.gorup-content { .gorup-content {
padding: 20px; padding-top: 20px;
text-align: center; text-align: center;
.groupSuccessMbc {
position: fixed;
z-index: 999;
background: rgba(0, 0, 0, 0.8);
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.content {
width: 300px;
height: 190px;
background-color: #fff;
padding: 16px;
.imgList {
padding-top: 20px;
.imgContainer {
position: relative;
width: 44px;
height: 44px;
border-radius: 50%;
margin-right: 20px;
.imgname {
margin: 0;
}
.leaderFlag {
position: absolute;
background-color: #0099ff;
border: 1px solid #fff;
width: 30px;
color: #fff;
line-height: 18px;
height: 18px;
text-align: center;
border-radius: 9px;
top: -6px;
span {
font-size: 12px;
transform: scale(0.9);
}
}
}
}
.group-btn {
height: 30px;
line-height: 30px;
font-size: 14px;
}
}
.tipContent {
width: 270px;
height: 44px;
line-height: 44px;
text-align: center;
border: 1px dashed rgba(255, 255, 255, 1);
border-radius: 3px;
color: #fff;
font-size: 14px;
position: absolute;
top: 100px;
}
.tipArrow {
position: absolute;
right: 15px;
top: 38px;
.iconyindao:before {
font-size: 44px;
color: #FFF;
}
}
}
.imgname { .imgname {
width: 44px; width: 44px;
height: 44px; height: 44px;
...@@ -88,9 +218,10 @@ ...@@ -88,9 +218,10 @@
font-size: 16px; font-size: 16px;
} }
.group-btn, .tostudy { .group-btn,
.tostudy {
display: inline-block; display: inline-block;
width: 335px; width: 100%;
height: 44px; height: 44px;
border-radius: 5px; border-radius: 5px;
background-color: $bg_E02E24; background-color: $bg_E02E24;
...@@ -99,6 +230,7 @@ ...@@ -99,6 +230,7 @@
text-align: center; text-align: center;
line-height: 44px; line-height: 44px;
margin-top: 20px; margin-top: 20px;
margin-bottom: 10px;
} }
.tostudy { .tostudy {
...@@ -129,7 +261,9 @@ ...@@ -129,7 +261,9 @@
} }
} }
} }
.am-whitespace.am-whitespace-md {
background-color: #f5f5f5;
}
.group-course { .group-course {
.top-title { .top-title {
height: 40px; height: 40px;
...@@ -150,4 +284,4 @@ ...@@ -150,4 +284,4 @@
} }
} }
} }
} }
\ No newline at end of file
src/components/detail/index.js
...@@ -11,6 +11,8 @@ import BtnStatus from "./btnstatus" ...@@ -11,6 +11,8 @@ import BtnStatus from "./btnstatus"
import Carouselw from "./carousel" import Carouselw from "./carousel"
import {connect} from "react-redux" import {connect} from "react-redux"
import {fetchCoursesListIfNeeded} from "./actions" import {fetchCoursesListIfNeeded} from "./actions"
import {api, getParam, http, browser} from "@/utils";
import {Toast} from 'antd-mobile';
class Detail extends Component { class Detail extends Component {
...@@ -23,7 +25,8 @@ class Detail extends Component { ...@@ -23,7 +25,8 @@ class Detail extends Component {
auditionBox: false, auditionBox: false,
singleBox: false, singleBox: false,
shareRank: false, shareRank: false,
singMess: '' singMess: '',
share: false,
} }
} }
...@@ -32,7 +35,7 @@ class Detail extends Component { ...@@ -32,7 +35,7 @@ class Detail extends Component {
} }
componentDidUpdate() { componentDidUpdate() {
// console.log(this.props.courseInfo.course_info)
} }
toApp = () => { toApp = () => {
...@@ -52,7 +55,60 @@ class Detail extends Component { ...@@ -52,7 +55,60 @@ class Detail extends Component {
})); }));
} }
invitedFriends = () => {
const {course_title,image_name, course_id, pdd_group_info, pdd_group_info: {groupon_member, groupon_member: { number }, price}} = this.props.courseInfo.course_info;
if(browser.isWeixin) {
let share = this.state.share;
this.setState({
share: !share,
});
let shareData = {
title: `【仅剩${number}个名额】我${price}元拼了《${course_title}》`,
desc: course_title, // 分享描述
link: location.origin + `/detail??id=${course_id}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: image_name, // 分享图标
};
console.log(shareData);
http.post(`${api['pay-api']}/m/sale/signature`).then(res => {
const {nonce_str, signature, timestamp} = res.data;
wx.config({
"debug": false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
"appId": 'wx23dac6775ac82877', // 必填，公众号的唯一标识
"timestamp": timestamp, // 必填，生成签名的时间戳
"nonceStr": nonce_str, // 必填，生成签名的随机串
"signature": signature, // 必填，签名
jsApiList: [
'hideMenuItems',
'showMenuItems',
'updateAppMessageShareData',
'updateTimelineShareData',
'onMenuShareWeibo',
'onMenuShareAppMessage',
], // 必填，需要使用的JS接口列表
});
});
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.hideAllNonBaseMenuItem();
wx.showMenuItems({
menuList: ['menuItem:share:appMessage' , 'menuItem:share:timeline'] // 要显示的菜单项，所有menu项见附录3
});
wx.updateAppMessageShareData({
...shareData,
success: function () {
// 设置成功
}
})
wx.updateTimelineShareData({
...shareData,
success: function () {
// 设置成功
}
})
});
}else{
Toast.info('请在微信中使用分享功能！', 2);
}
}
// 自组件传给父组件的boxHide // 自组件传给父组件的boxHide
...@@ -61,12 +117,18 @@ class Detail extends Component { ...@@ -61,12 +117,18 @@ class Detail extends Component {
} }
render() { render() {
let courseInfo = '' let courseInfo = '';
let service = '' let service = '';
let number = 0;
if (this.props.courseInfo.course_info) { if (this.props.courseInfo.course_info) {
courseInfo = this.props.courseInfo.course_info courseInfo = this.props.courseInfo.course_info
service = this.props.courseInfo.course_info.service service = courseInfo.service
number = courseInfo.pdd_group_info.groupon_member.number;
} }
const {
is_bargain, // 是否是砍价课程
} = this.props;
const { share } = this.state;
return ( return (
<div className='detail-box'> <div className='detail-box'>
<ToApp className='toapp' toApp={this.toApp}></ToApp> <ToApp className='toapp' toApp={this.toApp}></ToApp>
...@@ -139,28 +201,47 @@ class Detail extends Component { ...@@ -139,28 +201,47 @@ class Detail extends Component {
{/*拼团*/} {/*拼团*/}
{ {
courseInfo.group_status === 3 && (courseInfo.group_status === 3 || courseInfo.group_status === 4) &&
<Group/> <Group history={this.props.history}/>
} }
{/*砍价*/} {/*砍价*/}
<Bargain/> {
is_bargain && <Bargain/>
}
{/*课程介绍、大纲*/} {/*课程介绍、大纲*/}
<OutLine data={this.props.courseInfo} toAudition={this.toAudition} toSingleset={this.toSingleset}/> <OutLine data={this.props.courseInfo} toAudition={this.toAudition} toSingleset={this.toSingleset}/>
{/*课程按钮*/} {/*课程按钮*/}
<BtnStatus data={this.props.courseInfo}></BtnStatus> <BtnStatus data={this.props.courseInfo} invitedFriends={this.invitedFriends} history={this.props.history}></BtnStatus>
{
share ? (
<div className='groupSuccessMbc' onClick={()=>{this.setState({share: false})}}>
<div className='tipContent'>
{`还差${number}人，分享到3个群，成团率高达98%`}
</div>
<div className='tipArrow'>
<i className='iconfont iconyindao'></i>
</div>
</div>
) : null
}
</div> </div>
) )
} }
} }
const mapStateToProps = state => ({ const mapStateToProps = (state) => {
courseInfo: state.courseInfo return {
}) courseInfo: state.courseInfo
}
}
const mapDispatchToProps = { const mapDispatchToProps = {
fetchCoursesListIfNeeded fetchCoursesListIfNeeded
} }
......
src/components/detail/index.scss
...@@ -87,9 +87,10 @@ ...@@ -87,9 +87,10 @@
.promise { .promise {
padding: 15px 0; padding: 15px 0;
height: 66px; // height: 66px;
border-top: 1px solid #e7eaf1; border-top: 1px solid #e7eaf1;
margin: 0 12px; margin: 0 12px;
display: flow-root;
label { label {
float: left; float: left;
...@@ -129,4 +130,85 @@ ...@@ -129,4 +130,85 @@
background: linear-gradient(-90deg, $bg_EBA216 0%, $bg_EBC05A 100%); background: linear-gradient(-90deg, $bg_EBA216 0%, $bg_EBC05A 100%);
} }
.groupSuccessMbc {
position: fixed;
z-index: 999;
background: rgba(0, 0, 0, 0.8);
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.content {
width: 300px;
height: 190px;
background-color: #fff;
padding: 16px;
.imgList {
padding-top: 20px;
.imgContainer {
position: relative;
width: 44px;
height: 44px;
border-radius: 50%;
margin-right: 20px;
.imgname {
margin: 0;
}
.leaderFlag {
position: absolute;
background-color: #0099ff;
border: 1px solid #fff;
width: 30px;
color: #fff;
line-height: 18px;
height: 18px;
text-align: center;
border-radius: 9px;
top: -6px;
span {
font-size: 12px;
transform: scale(0.9);
}
}
}
}
.group-btn {
height: 30px;
line-height: 30px;
font-size: 14px;
}
}
.tipContent {
width: 270px;
height: 44px;
line-height: 44px;
text-align: center;
border: 1px dashed rgba(255, 255, 255, 1);
border-radius: 3px;
color: #fff;
font-size: 14px;
position: absolute;
top: 100px;
}
.tipArrow {
position: absolute;
right: 15px;
top: 38px;
.iconyindao:before {
font-size: 44px;
color: #FFF;
}
}
}
} }
\ No newline at end of file
src/components/detail/shareRank/index.js
import React, {Component} from 'react' import React, {Component} from 'react'
import './index.scss' import './index.scss'
import {api, getParam, http} from "@/utils" import {api, getParam, http} from "@/utils"
import {Toast} from 'antd-mobile' import {Toast, Flex} from 'antd-mobile'
import {connect} from "react-redux" import {connect} from "react-redux"
import {withRouter} from 'react-router-dom' import {withRouter} from 'react-router-dom'
import {compose} from "redux" import {compose} from "redux"
class ShareRank extends Component { class ShareRank extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
list: '', list: [],
rankingslice: '', rankingslice: [],
code: '', code: '',
shareRank: false shareRank: false
} }
...@@ -75,6 +74,8 @@ class ShareRank extends Component { ...@@ -75,6 +74,8 @@ class ShareRank extends Component {
} }
return ( return (
<div className='share-ranking'> <div className='share-ranking'>
<Flex className='share-container' justify='between'>
<Flex className='share-list'>
<span className="title">排行榜：</span> <span className="title">排行榜：</span>
<div className='ranking-box' onClick={this.openRanking}> <div className='ranking-box' onClick={this.openRanking}>
{ {
...@@ -88,10 +89,16 @@ class ShareRank extends Component { ...@@ -88,10 +89,16 @@ class ShareRank extends Component {
}) })
} }
<img className="ranking-ellipsis"
src="https://julyedu-img.oss-cn-beijing.aliyuncs.com/Image/train/ellipsis.png" alt=""/>
</div> </div>
<button className="share" onClick={this.share.bind(this,info)}>分享赚{info.dist_first_level_ti}元</button> </Flex>
<Flex className='share-money' justify='between' align='center'>
<img onClick={this.openRanking} className="ranking-ellipsis"
src="https://julyedu-img.oss-cn-beijing.aliyuncs.com/Image/train/ellipsis.png" alt=""/>
<button className="share" onClick={this.share.bind(this,info)}>分享赚{info.dist_first_level_ti}元</button>
</Flex>
</Flex>
{ {
this.state.shareRank && this.state.shareRank &&
...@@ -117,8 +124,9 @@ class ShareRank extends Component { ...@@ -117,8 +124,9 @@ class ShareRank extends Component {
<div className='shareBtn'> <div className='shareBtn'>
<button onClick={this.share.bind(this,info)}>分享赚{info.dist_first_level_ti}元</button> <button onClick={this.share.bind(this,info)}>分享赚{info.dist_first_level_ti}元</button>
</div> </div>
<i onClick={this.colse} className={'iconfont iconiconfront-2 close'}></i>
</div> </div>
<i onClick={this.colse} className={'iconfont iconiconfront-2 close'}></i>
</div> </div>
} }
</div> </div>
......
src/components/detail/shareRank/index.scss
...@@ -6,10 +6,25 @@ ...@@ -6,10 +6,25 @@
display: flex; display: flex;
position: relative; position: relative;
font-size: 12px; font-size: 12px;
width: 100%;
.share-container {
width: 100%;
height: 24px;
.share-list {
flex: 1 1 auto;
}
.share-money {
flex: 1 1 auto;
max-width: 112px;;
}
}
.title { .title {
font-size: 14px; font-size: 14px;
margin-right: 12px; margin-right: 4px;
// flex-basis: 46px;
// flex: 1 1 auto;
} }
.ranking-box { .ranking-box {
...@@ -20,7 +35,7 @@ ...@@ -20,7 +35,7 @@
.ranking-mess { .ranking-mess {
float: left; float: left;
margin-right: 15px; margin-right: 8px;
img { img {
width: 22px; width: 22px;
...@@ -44,13 +59,17 @@ ...@@ -44,13 +59,17 @@
} }
.share { .share {
position: absolute; // position: absolute;
right: 12px; // right: 12px;
padding: 5px 6px; // padding: 5px 6px;
border: 1px solid $red; border: 1px solid $red;
border-radius: 3px; border-radius: 3px;
color: $red; color: $red;
background-color: $bg_fff; background-color: $bg_fff;
width: 76px;
height: 22px;
line-height: 22px;
text-align: center;
} }
.shareMbc { .shareMbc {
...@@ -60,14 +79,18 @@ ...@@ -60,14 +79,18 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: rgba(0, 0, 0, .6); background-color: rgba(0, 0, 0, .6);
z-index: 2; z-index: 9;
.content { .content {
width: 300px; width: 300px;
height: 403px; height: 403px;
background-color: $white; background-color: $white;
border-radius: 3px; border-radius: 3px;
margin: 139px auto 20px auto; // margin: 139px auto 20px auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.title-box { .title-box {
width: 100%; width: 100%;
...@@ -153,6 +176,7 @@ ...@@ -153,6 +176,7 @@
position: relative; position: relative;
left: 50%; left: 50%;
margin-left: -11px; margin-left: -11px;
top: 16px;
} }
} }
} }
src/components/order/index.js
...@@ -2,7 +2,7 @@ import React, { Component } from 'react'; ...@@ -2,7 +2,7 @@ import React, { Component } from 'react';
import { Flex, NavBar, List, WingBlank, Toast } from 'antd-mobile'; import { Flex, NavBar, List, WingBlank, Toast } from 'antd-mobile';
import { OrderItem } from '@/common/index'; import { OrderItem } from '@/common/index';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { http, api } from "@/utils"; import { http, api, getParam } from "@/utils";
import { throttle } from 'lodash'; import { throttle } from 'lodash';
import {HeaderBar} from '../../common'; import {HeaderBar} from '../../common';
...@@ -81,13 +81,13 @@ class Order extends Component { ...@@ -81,13 +81,13 @@ class Order extends Component {
} }
// 提交订单 // 提交订单
submitOrder = () => { submitOrder = () => {
if (!this.state.perfect) {
Toast.info('请完善报名信息！');
}
if (this.state.orderList.lengtjh === 0) { if (this.state.orderList.lengtjh === 0) {
Toast.info('没有要提交的订单！'); Toast.info('没有要提交的订单！');
return; return;
} }
if (!this.state.perfect) {
Toast.info('请完善报名信息！');
}
http.post(`${api.home}/m/order/submitOrder`, { is_deduction: this.state.useBalance }).then(res => { http.post(`${api.home}/m/order/submitOrder`, { is_deduction: this.state.useBalance }).then(res => {
if(res.data.code !== 200) { if(res.data.code !== 200) {
...@@ -166,6 +166,42 @@ class Order extends Component { ...@@ -166,6 +166,42 @@ class Order extends Component {
})); }));
}; };
componentDidMount() { componentDidMount() {
let _this = this;
if(getParam('id') !== undefined) {
Promise.all([http.get(`${api.home}/m/order/preorder`), http.get(`${api.home}/m/course/detail/${getParam('id')}`)]).then(res => {
let preorder = res[0],
detail = res[1],
orderList = [];
console.log(detail);
if(preorder.data.code !== 200) {
Toast.info(preorder.data.msg, 2);
return;
}
if(detail.data.code !== 200) {
Toast.info(preorder.data.msg, 2);
return;
}
const { user_info, user_account, discount } = preorder.data.data;
const { course_info } = detail.data.data;
orderList.push(course_info);
this.cacheObj = {
perfect: user_info,
orderList: orderList,
user_account,
total: course_info.pdd_group_info.price,
discount,
}
_this.setState({
perfect: user_info,
orderList: orderList,
user_account,
total: course_info.pdd_group_info.price,
discount,
});
})
}else{
http.get(`${api.home}/m/order/preorder`).then((res) => { http.get(`${api.home}/m/order/preorder`).then((res) => {
if (res.data.code !== 200) { if (res.data.code !== 200) {
return; return;
...@@ -187,8 +223,7 @@ class Order extends Component { ...@@ -187,8 +223,7 @@ class Order extends Component {
}); });
if(this.props.history.action === 'PUSH') { if(this.props.history.action === 'PUSH') {
sessionStorage.removeItem('orderUseCacheObj'); sessionStorage.removeItem('orderUseCacheObj');
} } else{
else{
const cacheObj = sessionStorage.getItem('orderUseCacheObj'); const cacheObj = sessionStorage.getItem('orderUseCacheObj');
if(cacheObj !== null) { if(cacheObj !== null) {
this.setState({ this.setState({
...@@ -198,6 +233,7 @@ class Order extends Component { ...@@ -198,6 +233,7 @@ class Order extends Component {
} }
} }
}) })
}
}; };
render() { render() {
const { const {
......
src/components/order/payOrder/PayOrder.js
...@@ -82,10 +82,6 @@ export default class PayOrder extends Component { ...@@ -82,10 +82,6 @@ export default class PayOrder extends Component {
// 微信外部-支付 // 微信外部-支付
http.get(`${api['pay-api']}/pay/wxpay/wap_charge/oid/${orderId}`).then((res) => { http.get(`${api['pay-api']}/pay/wxpay/wap_charge/oid/${orderId}`).then((res) => {
console.log(res); console.log(res);
// oid: "15605001335449291237"
// url: "https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx14182145475068ae36051fed1741053900&package=2730911338"
// errno: 0
// msg: "ok"
if (res.data.errno === 0) { if (res.data.errno === 0) {
window.location.href = res.data.data.url + "&redirect_url=" + encodeURIComponent(window.location.href + "&weixinpay=1").toLowerCase(); window.location.href = res.data.data.url + "&redirect_url=" + encodeURIComponent(window.location.href + "&weixinpay=1").toLowerCase();
} else { } else {
......
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