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 @@
}
.intro-outer {
width: 360px;
width: 100%;
height: 133px;
border: 5px solid $color_FE2F2F;
display: flex;
justify-content: center;
align-items: center;
padding: 0 5px;
}
.intro-inner {
width: 341px;
width: 100%;
height: 114px;
padding-top: 15px;
background: $bg_FFF8EB;
......
src/components/detail/btnstatus/index.js
......@@ -13,31 +13,55 @@ class BtnStatus extends Component {
constructor(props) {
super(props)
this.state = {
isbuy: 1
isbuy: 1,
is_baoming: 0,
group_status: 3,
in_cart: false,
}
}
componentWillReceiveProps(nextProps) {
this.setState({
...nextProps.data.course_info
});
}
// 加入购物车
toCart = () => {
let data = {
course_id: getParam('id')
}
};
http.post(`${api.home}/m/cart/add`, data).then((res) => {
if (res.data.code === 200) {
Toast.info('已加入购物车', 2);
// window.location.reload()
this.props.getCourses();
} else {
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() {
let info = ''
if (this.props.data && this.props.data.course_info) {
info = this.props.data.course_info
}
return (
<div>
......@@ -75,33 +99,36 @@ class BtnStatus extends Component {
}
{/*拼团 未开团*/}
{
info.is_baoming === 0 && info.group_status === 4&&
<div className='btns-box'>
<a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
<button className='btn btn-s bg-F4AAA7'>
<span>¥149</span>
<span>直接购买</span>
</button>
<button className='btn btn-s bg-E02E24'>
<span>¥1</span>
<span>一键开团</span>
</button>
</div>
info.is_baoming === 0 && info.group_status === 3 &&
<div className='btns-box'>
<a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
<button className='btn btn-s bg-F4AAA7' onClick={this.toBuy}>
<span>{`¥ ${info.price1}`}</span>
<span>直接购买</span>
</button>
<button className='btn btn-s bg-E02E24'>
<Link to={`/order?id=${getParam('id')}`}>
<span>{`¥ ${info.pdd_group_info.price}`}</span>
<span>一键开团</span>
</Link>
</button>
</div>
}
{/*拼团 已开团*/}
{
info.is_baoming === 0 && info.group_status === 3 &&
info.is_baoming === 0 && info.group_status === 4 &&
<div className='btns-box'>
<a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
<Link to={`/togroup`} className='btn btn-l bg-E02E24'>
<div className='btn btn-l bg-E02E24' onClick={this.props.invitedFriends}>
邀请好友参团 23:32:23 后结束
</Link>
</div>
</div>
}
......@@ -113,8 +140,8 @@ class BtnStatus extends Component {
<i className='iconfont iconerji'></i>
<span>课程咨询</span>
</a>
<button className='btn btn-s bg-F4AAA7'>
<span>¥149</span>
<button className='btn btn-s bg-F4AAA7' onClick={this.toCart}>
<span>{`¥ ${info.price}`}</span>
<span>直接购买</span>
</button>
{
......@@ -126,7 +153,7 @@ class BtnStatus extends Component {
{
this.state.isbuy === 1 &&
<button className='btn btn-s bg-E02E24'>
<span>¥1</span>
<span>{`¥ ${info.price}`}</span>
<span>去支付</span>
</button>
}
......
src/components/detail/group/index.js
......@@ -3,13 +3,18 @@ import './index.scss'
import {getParam} from "@/utils"
import {connect} from "react-redux"
import {Link} from "react-router-dom"
import {Flex} from 'antd-mobile'
class Group extends Component {
constructor(props) {
super(props)
this.state = {
isShowMore: false
isShowMore: false,
alreadyIn: false,
pdd_price: 0,
number: 0,
data: {},
}
}
......@@ -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() {
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) {
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 (
<div className='group-box'>
<div className="group-title">
......@@ -56,8 +187,7 @@ class Group extends Component {
<p>还差<span className='red'>{item.number}人</span>拼成</p>
<p>剩余 {item.end_time}</p>
</div>
<Link to={`/order?id=${getParam('id')}&&groupon_code=${item.pdd_order_id}`}
className='topay'>去参团</Link>
<span onClick={()=>{this.toPay(item.pdd_order_id)}} className='topay'>去参团</span>
</li>
)
})
......@@ -68,9 +198,16 @@ class Group extends Component {
<i className='iconfont iconiconfront-1'></i>
·好友参团 ·人满成交 ·人不满退款
</span>
<span className='allNum'>累计856人成团</span>
<span className='allNum'>{`累计${groupInfo.person_num}人成团`}</span>
</div>
{
(alreadyIn && group_status === 4) && (
<>
{groupSuccessMbc}
</>
)
}
{/*更多*/}
{
this.state.isShowMore &&
......@@ -90,9 +227,7 @@ class Group extends Component {
<p className='time'>剩余 {item.end_time}</p>
</div>
<p className='group-status'>还差{item.number}人</p>
<Link
to={`/order?id=${getParam('id')}&&groupon_code=${item.pdd_order_id}`}
className='topay'>去参团</Link>
<span onClick={()=>{this.toPay(item.pdd_order_id)}} className='topay'>去参团</span>
</li>
)
})
......@@ -101,8 +236,9 @@ class Group extends Component {
<div className='more-group-dec'>
仅显示10个正在开团的人
</div>
<i onClick={this.closeMore} className={'iconfont iconiconfront-2 close'}></i>
</div>
<i onClick={this.closeMore} className={'iconfont iconiconfront-2 close'}></i>
</div>
}
......
src/components/detail/group/index.scss
......@@ -100,15 +100,18 @@
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .6);
z-index: 2;
z-index: 9;
.content {
width: 300px;
height: 388px;
background-color: $white;
border-radius: 3px;
margin: 139px auto 20px auto;
// margin: 139px auto 20px auto;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.title-box {
width: 100%;
......@@ -199,7 +202,120 @@
position: relative;
left: 50%;
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 {
.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 {
margin-top: 5px;
......@@ -64,9 +109,94 @@
}
.gorup-content {
padding: 20px;
padding-top: 20px;
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 {
width: 44px;
height: 44px;
......@@ -88,9 +218,10 @@
font-size: 16px;
}
.group-btn, .tostudy {
.group-btn,
.tostudy {
display: inline-block;
width: 335px;
width: 100%;
height: 44px;
border-radius: 5px;
background-color: $bg_E02E24;
......@@ -99,6 +230,7 @@
text-align: center;
line-height: 44px;
margin-top: 20px;
margin-bottom: 10px;
}
.tostudy {
......@@ -129,7 +261,9 @@
}
}
}
.am-whitespace.am-whitespace-md {
background-color: #f5f5f5;
}
.group-course {
.top-title {
height: 40px;
......@@ -150,4 +284,4 @@
}
}
}
}
\ No newline at end of file
}
src/components/detail/index.js
......@@ -11,6 +11,8 @@ import BtnStatus from "./btnstatus"
import Carouselw from "./carousel"
import {connect} from "react-redux"
import {fetchCoursesListIfNeeded} from "./actions"
import {api, getParam, http, browser} from "@/utils";
import {Toast} from 'antd-mobile';
class Detail extends Component {
......@@ -23,7 +25,8 @@ class Detail extends Component {
auditionBox: false,
singleBox: false,
shareRank: false,
singMess: ''
singMess: '',
share: false,
}
}
......@@ -32,7 +35,7 @@ class Detail extends Component {
}
componentDidUpdate() {
// console.log(this.props.courseInfo.course_info)
}
toApp = () => {
......@@ -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
......@@ -61,12 +117,18 @@ class Detail extends Component {
}
render() {
let courseInfo = ''
let service = ''
let courseInfo = '';
let service = '';
let number = 0;
if (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 (
<div className='detail-box'>
<ToApp className='toapp' toApp={this.toApp}></ToApp>
......@@ -139,28 +201,47 @@ class Detail extends Component {
{/*拼团*/}
{
courseInfo.group_status === 3 &&
<Group/>
(courseInfo.group_status === 3 || courseInfo.group_status === 4) &&
<Group history={this.props.history}/>
}
{/*砍价*/}
<Bargain/>
{
is_bargain && <Bargain/>
}
{/*课程介绍、大纲*/}
<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>
)
}
}
const mapStateToProps = state => ({
courseInfo: state.courseInfo
})
const mapStateToProps = (state) => {
return {
courseInfo: state.courseInfo
}
}
const mapDispatchToProps = {
fetchCoursesListIfNeeded
}
......
src/components/detail/index.scss
......@@ -87,9 +87,10 @@
.promise {
padding: 15px 0;
height: 66px;
// height: 66px;
border-top: 1px solid #e7eaf1;
margin: 0 12px;
display: flow-root;
label {
float: left;
......@@ -129,4 +130,85 @@
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 './index.scss'
import {api, getParam, http} from "@/utils"
import {Toast} from 'antd-mobile'
import {Toast, Flex} from 'antd-mobile'
import {connect} from "react-redux"
import {withRouter} from 'react-router-dom'
import {compose} from "redux"
class ShareRank extends Component {
constructor(props) {
super(props)
this.state = {
list: '',
rankingslice: '',
list: [],
rankingslice: [],
code: '',
shareRank: false
}
......@@ -75,6 +74,8 @@ class ShareRank extends Component {
}
return (
<div className='share-ranking'>
<Flex className='share-container' justify='between'>
<Flex className='share-list'>
<span className="title">排行榜：</span>
<div className='ranking-box' onClick={this.openRanking}>
{
......@@ -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>
<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 &&
......@@ -117,8 +124,9 @@ class ShareRank extends Component {
<div className='shareBtn'>
<button onClick={this.share.bind(this,info)}>分享赚{info.dist_first_level_ti}元</button>
</div>
<i onClick={this.colse} className={'iconfont iconiconfront-2 close'}></i>
</div>
<i onClick={this.colse} className={'iconfont iconiconfront-2 close'}></i>
</div>
}
</div>
......
src/components/detail/shareRank/index.scss
......@@ -6,10 +6,25 @@
display: flex;
position: relative;
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 {
font-size: 14px;
margin-right: 12px;
margin-right: 4px;
// flex-basis: 46px;
// flex: 1 1 auto;
}
.ranking-box {
......@@ -20,7 +35,7 @@
.ranking-mess {
float: left;
margin-right: 15px;
margin-right: 8px;
img {
width: 22px;
......@@ -44,13 +59,17 @@
}
.share {
position: absolute;
right: 12px;
padding: 5px 6px;
// position: absolute;
// right: 12px;
// padding: 5px 6px;
border: 1px solid $red;
border-radius: 3px;
color: $red;
background-color: $bg_fff;
width: 76px;
height: 22px;
line-height: 22px;
text-align: center;
}
.shareMbc {
......@@ -60,14 +79,18 @@
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .6);
z-index: 2;
z-index: 9;
.content {
width: 300px;
height: 403px;
background-color: $white;
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 {
width: 100%;
......@@ -153,6 +176,7 @@
position: relative;
left: 50%;
margin-left: -11px;
top: 16px;
}
}
}
src/components/order/index.js
......@@ -2,7 +2,7 @@ import React, { Component } from 'react';
import { Flex, NavBar, List, WingBlank, Toast } from 'antd-mobile';
import { OrderItem } from '@/common/index';
import { Link } from 'react-router-dom';
import { http, api } from "@/utils";
import { http, api, getParam } from "@/utils";
import { throttle } from 'lodash';
import {HeaderBar} from '../../common';
......@@ -81,13 +81,13 @@ class Order extends Component {
}
// 提交订单
submitOrder = () => {
if (!this.state.perfect) {
Toast.info('请完善报名信息！');
}
if (this.state.orderList.lengtjh === 0) {
Toast.info('没有要提交的订单！');
return;
}
if (!this.state.perfect) {
Toast.info('请完善报名信息！');
}
http.post(`${api.home}/m/order/submitOrder`, { is_deduction: this.state.useBalance }).then(res => {
if(res.data.code !== 200) {
......@@ -166,6 +166,42 @@ class Order extends Component {
}));
};
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) => {
if (res.data.code !== 200) {
return;
......@@ -187,8 +223,7 @@ class Order extends Component {
});
if(this.props.history.action === 'PUSH') {
sessionStorage.removeItem('orderUseCacheObj');
}
else{
} else{
const cacheObj = sessionStorage.getItem('orderUseCacheObj');
if(cacheObj !== null) {
this.setState({
......@@ -198,6 +233,7 @@ class Order extends Component {
}
}
})
}
};
render() {
const {
......
src/components/order/payOrder/PayOrder.js
......@@ -82,10 +82,6 @@ export default class PayOrder extends Component {
// 微信外部-支付
http.get(`${api['pay-api']}/pay/wxpay/wap_charge/oid/${orderId}`).then((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) {
window.location.href = res.data.data.url + "&redirect_url=" + encodeURIComponent(window.location.href + "&weixinpay=1").toLowerCase();
} 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