Skip to content

M
mr-julyedu
Commit ea4bd874 by zhanghaozhe
Options

eslint

parent ed0bb3a3
Showing with 1732 additions and 1809 deletions
.eslintignore deleted 100755 → 0
src/
\ No newline at end of file
package.json
...@@ -121,7 +121,12 @@ ...@@ -121,7 +121,12 @@
"build-storybook": "build-storybook" "build-storybook": "build-storybook"
}, },
"eslintConfig": { "eslintConfig": {
"extends": "react-app" "extends": "react-app",
"globals": {
"API": "readonly",
"NoCaptcha": "readonly",
"WeixinJSBridge": "readonly"
}
}, },
"browserslist": { "browserslist": {
"production": [ "production": [
......
src/components/activity/1111/invite.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import {connect} from "react-redux" import { connect } from "react-redux"
import './index.scss'; import './index.scss';
import { http, getParam, is_weixin, wxShare, getC, SendMessageToApp } from 'src/utils'; import { http, getParam, browser, wxShare, SendMessageToApp } from 'src/utils';
import {Toast} from "antd-mobile"; import { Toast } from "antd-mobile";
import jsCookie from 'js-cookie'; import jsCookie from 'js-cookie';
...@@ -16,16 +16,16 @@ class Invite extends Component { ...@@ -16,16 +16,16 @@ class Invite extends Component {
hot_schedule: '', hot_schedule: '',
userList: [], userList: [],
inviteCode: '', inviteCode: '',
isshowAppTip:false isshowAppTip: false,
} }
} }
componentWillMount() { componentWillMount() {
let uid = jsCookie.get('uid'); let uid = jsCookie.get('uid');
let shareuid = getParam('shareuid'); let shareuid = getParam('shareuid');
if(uid === shareuid) { if (uid === shareuid) {
} else { } else {
if(getParam('new')) { if (getParam('new')) {
this.props.history.push(`/activity?shareuid=${shareuid}&inviteCode=${getParam('inviteCode')}`); this.props.history.push(`/activity?shareuid=${shareuid}&inviteCode=${getParam('inviteCode')}`);
} }
} }
...@@ -36,23 +36,25 @@ class Invite extends Component { ...@@ -36,23 +36,25 @@ class Invite extends Component {
distinguishVersion = () => { distinguishVersion = () => {
// plat_form 1ios 2android // plat_form 1ios 2android
// version 1->3.704 2->4.5.1.20191105 // version 1->3.704 2->4.5.1.20191105
if(getParam('plat_form') == 1){ // eslint-disable-next-line eqeqeq
if (getParam('plat_form') == 1) {
let version = Number(getParam('version')) let version = Number(getParam('version'))
this.setState({ this.setState({
isshowAppTip: version < 3.704 ? true : false isshowAppTip: version < 3.704,
}); });
} }
if(getParam('plat_form') == 2){ // eslint-disable-next-line eqeqeq
if (getParam('plat_form') == 2) {
let version = getParam('version').replace(/\./g, '').slice(0, 3) let version = getParam('version').replace(/\./g, '').slice(0, 3)
this.setState({ this.setState({
isshowAppTip: Number(version) < 451 ? true:false isshowAppTip: Number(version) < 451,
}); });
} }
} }
componentDidMount() { componentDidMount() {
if(!this.props.user.hasError) { if (!this.props.user.hasError) {
this.getUserList(); this.getUserList();
this.getHotValue(); this.getHotValue();
this.getInviteCode(); this.getInviteCode();
...@@ -61,7 +63,7 @@ class Invite extends Component { ...@@ -61,7 +63,7 @@ class Invite extends Component {
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
console.log('componentWillReceiveProps'); console.log('componentWillReceiveProps');
if(!nextProps.user.hasError) { if (!nextProps.user.hasError) {
this.getUserList(); this.getUserList();
this.getHotValue(); this.getHotValue();
this.getInviteCode(); this.getInviteCode();
...@@ -71,9 +73,9 @@ class Invite extends Component { ...@@ -71,9 +73,9 @@ class Invite extends Component {
getUserList = () => { getUserList = () => {
http.get(`${API.home}/sys/user/invite/list`).then(res => { http.get(`${API.home}/sys/user/invite/list`).then(res => {
let {code, data, msg} = res.data; let {code, data, msg} = res.data;
if(code === 200) { if (code === 200) {
this.setState({ this.setState({
userList: data userList: data,
}); });
} else { } else {
Toast.info(msg, 2); Toast.info(msg, 2);
...@@ -84,10 +86,10 @@ class Invite extends Component { ...@@ -84,10 +86,10 @@ class Invite extends Component {
getHotValue = () => { getHotValue = () => {
http.get(`${API.home}/sys/user/hot/value`).then(res => { http.get(`${API.home}/sys/user/hot/value`).then(res => {
let {code, data, msg} = res.data; let {code, data, msg} = res.data;
if(code === 200) { if (code === 200) {
this.setState({ this.setState({
hot_schedule: data.hot_schedule, hot_schedule: data.hot_schedule,
hotValue: data.hot_value hotValue: data.hot_value,
}); });
} else { } else {
Toast.info(msg, 2); Toast.info(msg, 2);
...@@ -98,36 +100,36 @@ class Invite extends Component { ...@@ -98,36 +100,36 @@ class Invite extends Component {
getInviteCode = () => { getInviteCode = () => {
http.get(`${API.home}/sys/user/invite/link`).then(res => { http.get(`${API.home}/sys/user/invite/link`).then(res => {
let {code, data, msg} = res.data; let {code, data, msg} = res.data;
if(code === 200) { if (code === 200) {
let inviteCode = data.blessing_invite_code; let inviteCode = data.blessing_invite_code;
if(is_weixin()) { if (browser.isWeixin) {
wxShare({ wxShare({
title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！', title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！',
desc: '把这门超5万人报名的【Python基础入门 升级版】课程送给你，附200元红包，请笑纳！--七月在线', desc: '把这门超5万人报名的【Python基础入门 升级版】课程送给你，附200元红包，请笑纳！--七月在线',
link: encodeURI(location.origin + `/invite?shareuid=${jsCookie.get('uid')}&new=1&inviteCode=${inviteCode}`), link: encodeURI(window.location.origin + `/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', imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/index-share-img.png',
}); });
} }
this.setState(()=>({ this.setState(() => ({
inviteCode: inviteCode inviteCode: inviteCode,
})) }))
}else if(code === 4030 || code === 4040) { } else if (code === 4030 || code === 4040) {
history.push('/passport'); this.props.history.push('/passport');
}else{ } else {
Toast.info(msg, 2); Toast.info(msg, 2);
} }
}); });
} }
inviteFriends = () => { inviteFriends = () => {
const { user, history } = this.props; const {user, history} = this.props;
const {inviteCode,isshowAppTip} = this.state; const {inviteCode, isshowAppTip} = this.state;
// 未登录先去登录 // 未登录先去登录
if (getParam('version')) { if (getParam('version')) {
if(user.hasError) { if (user.hasError) {
SendMessageToApp("toLogin"); SendMessageToApp("toLogin");
}else { } else {
if(isshowAppTip){ if (isshowAppTip) {
Toast.info('请前往h5/pc端使用该功能', 2); Toast.info('请前往h5/pc端使用该功能', 2);
} else { } else {
let data = { let data = {
...@@ -139,23 +141,23 @@ class Invite extends Component { ...@@ -139,23 +141,23 @@ class Invite extends Component {
SendMessageToApp("toShare", data) SendMessageToApp("toShare", data)
} }
} }
}else { } else {
if(user.hasError) { if (user.hasError) {
history.push('/passport'); history.push('/passport');
}else { } else {
if(is_weixin()) { if (browser.isWeixin) {
history.push(`/invite?shareuid=${jsCookie.get('uid')}&new=1&inviteCode=${inviteCode}`); history.push(`/invite?shareuid=${jsCookie.get('uid')}&new=1&inviteCode=${inviteCode}`);
wxShare({ wxShare({
title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！', title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！',
desc: '把这门超5万人报名的【Python基础入门 升级版】课程送给你，附200元红包，请笑纳！--七月在线', desc: '把这门超5万人报名的【Python基础入门 升级版】课程送给你，附200元红包，请笑纳！--七月在线',
link: encodeURI(location.origin + `/invite?shareuid=${jsCookie.get('uid')}&new=1&inviteCode=${inviteCode}`), link: encodeURI(window.location.origin + `/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', imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/index-share-img.png',
}); });
this.setState({ this.setState({
showTip: true, showTip: true,
isWeiXin: true, isWeiXin: true,
}); });
}else{ } else {
history.push(`/invite?shareuid=${jsCookie.get('uid')}&new=1&inviteCode=${inviteCode}`); history.push(`/invite?shareuid=${jsCookie.get('uid')}&new=1&inviteCode=${inviteCode}`);
this.setState({ this.setState({
showTip: true, showTip: true,
...@@ -202,7 +204,7 @@ class Invite extends Component { ...@@ -202,7 +204,7 @@ class Invite extends Component {
<div className="but__con"> <div className="but__con">
<div className="button__content" onClick={this.inviteFriends}> <div className="button__content" onClick={this.inviteFriends}>
立即邀请 立即邀请
</div> </div>
</div> </div>
...@@ -215,7 +217,7 @@ class Invite extends Component { ...@@ -215,7 +217,7 @@ class Invite extends Component {
<p className="show__new">(仅显示新用户)</p> <p className="show__new">(仅显示新用户)</p>
</> </>
) : (null) ) : null
} }
{ {
...@@ -226,7 +228,7 @@ class Invite extends Component { ...@@ -226,7 +228,7 @@ class Invite extends Component {
return ( return (
<div className="user__item-info item__con-only" key={index}> <div className="user__item-info item__con-only" key={index}>
<div className="item__con"> <div className="item__con">
<img className="user_avatar" src={item.head_image} /> <img className="user_avatar" alt={item.user_name} src={item.head_image}/>
<div className="user_name">{item.user_name}</div> <div className="user_name">{item.user_name}</div>
</div> </div>
</div> </div>
...@@ -239,7 +241,7 @@ class Invite extends Component { ...@@ -239,7 +241,7 @@ class Invite extends Component {
return ( return (
<div className="user__item-info" key={index}> <div className="user__item-info" key={index}>
<div className="item__con"> <div className="item__con">
<img className="user_avatar" src={item.head_image} /> <img className="user_avatar" alt={item.user_name} src={item.head_image}/>
<div className="user_name">{item.user_name}</div> <div className="user_name">{item.user_name}</div>
</div> </div>
</div> </div>
...@@ -247,23 +249,19 @@ class Invite extends Component { ...@@ -247,23 +249,19 @@ class Invite extends Component {
}) })
} }
</div> </div>
) : ( ) : null
null
)
} }
</div> </div>
{ {
showTip && ( showTip && (
<div className="share__mark" onClick={this.closeMark}> <div className="share__mark" onClick={this.closeMark}>
<div className="share__tip"> <div className="share__tip">
立即分享给好友增加中奖概率 立即分享给好友增加中奖概率
</div> </div>
{ {
isWeiXin ? ( isWeiXin ? (
<div className="share__row"></div> <div className="share__row"></div>
) : ( ) : null
null
)
} }
</div> </div>
) )
...@@ -276,5 +274,5 @@ class Invite extends Component { ...@@ -276,5 +274,5 @@ class Invite extends Component {
export default connect( export default connect(
state => ({user: state.user}), state => ({user: state.user}),
null null,
)(Invite); )(Invite);
src/components/blessingPreheat/index.js
import React, { Component } from 'react' import React, { Component } from 'react'
import QRCode from 'qrcode' import QRCode from 'qrcode'
import { http, SendMessageToApp, wxShare, is_weixin, getParam } from 'src/utils' import { http, SendMessageToApp, wxShare, browser, getParam } from 'src/utils'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { throttle, findIndex, debounce } from 'lodash' import { throttle, findIndex, debounce } from 'lodash'
import RulePopup from './rulePopup/index' import RulePopup from './rulePopup/index'
...@@ -142,14 +142,8 @@ class BlessingPreheat extends Component { ...@@ -142,14 +142,8 @@ class BlessingPreheat extends Component {
} }
componentDidMount() { componentDidMount() {
const _this = this;
this.fetchUserBlessing() this.fetchUserBlessing()
// setTimeout(function(){ if (browser.isWeixin) {
// // 这里有获取ID的步骤，由于运营过多的调整，导致顺序不定，所以包含ID的title必须要放到判断中（防止出现多个title），设置定时器是因为如果返回较慢 获取不到ID导致报错
// _this.setInitialNavActiveStatus()
// }, 50);
// window.addEventListener('scroll', throttle(this.calcNavActive, 100))
if (is_weixin()) {
wxShare({ wxShare({
title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！', title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！',
desc: '把这门超5万人报名的【Python基础入门 升级版】课程送给你，附200元红包，请笑纳！--七月在线', desc: '把这门超5万人报名的【Python基础入门 升级版】课程送给你，附200元红包，请笑纳！--七月在线',
...@@ -163,7 +157,7 @@ class BlessingPreheat extends Component { ...@@ -163,7 +157,7 @@ class BlessingPreheat extends Component {
this.loginInfo(result) this.loginInfo(result)
} }
window['getNewData'] = result => { window['getNewData'] = () => {
this.fetchUserBlessing() this.fetchUserBlessing()
} }
window['QQWXWBshare'] = result => { window['QQWXWBshare'] = result => {
...@@ -208,7 +202,7 @@ class BlessingPreheat extends Component { ...@@ -208,7 +202,7 @@ class BlessingPreheat extends Component {
// 保存cookie // 保存cookie
appLogin = () => { appLogin = () => {
let expires = addDays(new Date(), 90) let expires = addDays(new Date(), 90)
this.state.userInfoList.map((item, index) => { this.state.userInfoList.forEach((item) => {
cookie.set("token", item.token, {expires, path: '/', domain: '.julyedu.com'}) cookie.set("token", item.token, {expires, path: '/', domain: '.julyedu.com'})
cookie.set("plat", item.plat, {expires, path: '/', domain: '.julyedu.com'}) cookie.set("plat", item.plat, {expires, path: '/', domain: '.julyedu.com'})
cookie.set("uid", item.uid, {expires, path: '/', domain: '.julyedu.com'}) cookie.set("uid", item.uid, {expires, path: '/', domain: '.julyedu.com'})
...@@ -228,7 +222,7 @@ class BlessingPreheat extends Component { ...@@ -228,7 +222,7 @@ class BlessingPreheat extends Component {
transformUser = res => { transformUser = res => {
let payload let payload
res.map((item, index) => { res.forEach((item) => {
payload = { payload = {
hasError: false, hasError: false,
data: { data: {
...@@ -347,21 +341,6 @@ class BlessingPreheat extends Component { ...@@ -347,21 +341,6 @@ class BlessingPreheat extends Component {
} }
}) })
} }
handleToAddBlessing = (key) => {
http.post(`${API.home}/sys/add/blessing`, {
share_platform: key, // 1 朋友圈 2 微博 3 qq
type: 3 // 1：签到；3：分享；4：浏览课程；
}).then(res => {
const {code} = res.data
if (code === 200) {
Toast.info('+2点福气值~', 2, null, false)
}
})
}
handleToSign = () => { handleToSign = () => {
const {userInfo} = this.state const {userInfo} = this.state
http.post(`${API.home}/sys/add/blessing`, { http.post(`${API.home}/sys/add/blessing`, {
...@@ -448,11 +427,6 @@ class BlessingPreheat extends Component { ...@@ -448,11 +427,6 @@ class BlessingPreheat extends Component {
SendMessageToApp("toLogin") SendMessageToApp("toLogin")
} }
} }
onCopy = () => {
Toast.info('复制成功', 2, null, false)
}
toSection = (i, e) => { toSection = (i, e) => {
const {navs} = this.state const {navs} = this.state
e.preventDefault() e.preventDefault()
...@@ -524,6 +498,7 @@ class BlessingPreheat extends Component { ...@@ -524,6 +498,7 @@ class BlessingPreheat extends Component {
http.get(`${API.home}/sys/activity/my_lotteries`) http.get(`${API.home}/sys/activity/my_lotteries`)
.then(res => { .then(res => {
const {code, data, msg} = res.data const {code, data, msg} = res.data
// eslint-disable-next-line eqeqeq
if (code == 200) { if (code == 200) {
this.recordInstance = Popup({ this.recordInstance = Popup({
title: '我的中奖纪录', title: '我的中奖纪录',
...@@ -564,7 +539,8 @@ class BlessingPreheat extends Component { ...@@ -564,7 +539,8 @@ class BlessingPreheat extends Component {
...this.state.address ...this.state.address
}) })
.then(res => { .then(res => {
const {data, code, msg} = res.data const {code, msg} = res.data
// eslint-disable-next-line eqeqeq
if (code == 200) { if (code == 200) {
this.setState({ this.setState({
...@@ -597,6 +573,7 @@ class BlessingPreheat extends Component { ...@@ -597,6 +573,7 @@ class BlessingPreheat extends Component {
http.get(`${API.home}/sys/user_address_info`) http.get(`${API.home}/sys/user_address_info`)
.then(res => { .then(res => {
const {data, code, msg} = res.data const {data, code, msg} = res.data
// eslint-disable-next-line eqeqeq
if (code == 200) { if (code == 200) {
this.recordInstance && this.recordInstance.close() this.recordInstance && this.recordInstance.close()
this.setState({ this.setState({
...@@ -819,8 +796,8 @@ class BlessingPreheat extends Component { ...@@ -819,8 +796,8 @@ class BlessingPreheat extends Component {
}} }}
value={address.address} value={address.address}
/> />
<button type='button' {/* eslint-disable-next-line eqeqeq */}
className={(address.name != '' && address.phone != '' && address.address != '') ? 'active' : ''} <button type='button' className={(address.name != '' && address.phone != '' && address.address != '') ? 'active' : ''}
onClick={this.submitAddress} onClick={this.submitAddress}
>提交 >提交
</button> </button>
......
src/components/expand/share.js
import React, {Component} from 'react' import React, { Component } from 'react'
import './share.scss' import './share.scss'
import {http, getParam, browser, wxShare,is_weixin} from 'src/utils' import { http, getParam, browser, wxShare } from 'src/utils'
import {Toast} from 'antd-mobile' import { Toast } from 'antd-mobile'
import {connect} from "react-redux"; import { connect } from "react-redux";
import {Link} from "react-router-dom"; import { Link } from "react-router-dom";
import showAlert from 'src/common/deposit/end-expansion-alert' import showAlert from 'src/common/deposit/end-expansion-alert'
class ExpandShare extends Component { class ExpandShare extends Component {
state = { state = {
isShow: false, //活动规则 isShow: false, //活动规则
step: 0, // 区分弹窗 step: 0, // 区分弹窗
data: '', //膨胀券相关 data: '', //膨胀券相关
courseList: [], // 预售课程列表 courseList: [], // 预售课程列表
isshowMore: true, // 是否显示查看更多 isshowMore: true, // 是否显示查看更多
pageCount: 1, // 页码 pageCount: 1, // 页码
helpData: '',// 帮助好友助力数据 helpData: '',// 帮助好友助力数据
courseListMore: '', // 所有课程 courseListMore: '', // 所有课程
}
componentDidMount() {
this.getListorData()
this.getCourseList()
if (browser.isWeixin) {
wxShare({
title: 'AI充电节，预热来袭！80元红包送给你，手要快！',
desc: '积福气享1折秒课，超10万元奖品来就送--七月在线',
link: window.location.href,
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/dj-share-img.png',
})
} }
}
componentDidMount() { // 获取膨胀券相关
this.getListorData() getListorData = () => {
this.getCourseList() http.get(`${API['base-api']}/sys/help_list/${getParam('deposit_code')}`).then((res) => {
if(is_weixin()) { const {data, errno, msg} = res.data
wxShare({ if (errno === 200) {
title: 'AI充电节，预热来袭！80元红包送给你，手要快！',
desc: '积福气享1折秒课，超10万元奖品来就送--七月在线',
link: window.location.href,
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/dj-share-img.png',
})
}
}
// 获取膨胀券相关
getListorData = () => {
http.get(`${API['base-api']}/sys/help_list/${getParam('deposit_code')}`).then((res) => {
const {data, errno, msg} = res.data
if (errno == 200) {
this.setState({
data: data
})
} else {
Toast.info(msg, 2)
}
})
}
// 获取课程列表
getCourseList = () => {
const _this = this
http.get(`${API['base-api']}/anniversary2019/pre_course`).then((res) => {
const {data, errno, msg} = res.data
if (errno == 200) {
if (JSON.stringify(data) == '{}') {
_this.setState({
isshowMore: false,
courseList: []
})
} else if (data.length <= 6) {
_this.setState({
isshowMore: false,
courseList: data
})
} else {
_this.setState({
isshowMore: true,
courseList: data.slice(0, 6),
courseListMore: data
})
}
} else {
Toast.info(msg, 2)
}
})
}
// 获取更多课程
getMoreCourseList = () => {
this.setState({ this.setState({
courseList: this.state.courseListMore, data: data,
isshowMore: false
}) })
} } else {
// 立即付定金 Toast.info(msg, 2)
expandPaydj = (courseId) => { }
const {user, history} = this.props;
const uid = user && user.data && user.data.uid; })
if (!uid) { }
this.props.history.push('/passport/login')
// 获取课程列表
getCourseList = () => {
const _this = this
http.get(`${API['base-api']}/anniversary2019/pre_course`).then((res) => {
const {data, errno, msg} = res.data
if (errno === 200) {
if (JSON.stringify(data) === '{}') {
_this.setState({
isshowMore: false,
courseList: [],
})
} else if (data.length <= 6) {
_this.setState({
isshowMore: false,
courseList: data,
})
} else { } else {
this.props.history.push( _this.setState({
`/deposit-order?oid=${courseId}&source=${1}`, isshowMore: true,
{ courseList: data.slice(0, 6),
id: courseId, courseListMore: data,
isexpand: 1, })
sourcenum: 1
}
)
} }
} else {
Toast.info(msg, 2)
}
})
}
// 获取更多课程
getMoreCourseList = () => {
this.setState({
courseList: this.state.courseListMore,
isshowMore: false,
})
}
// 立即付定金
expandPaydj = (courseId) => {
const {user} = this.props;
const uid = user && user.data && user.data.uid;
if (!uid) {
this.props.history.push('/passport/login')
} else {
this.props.history.push(
`/deposit-order?oid=${courseId}&source=${1}`,
{
id: courseId,
isexpand: 1,
sourcenum: 1,
},
)
} }
// 立即付尾款 }
expandPaywk = (courseId, time, day) => { // 立即付尾款
const {user, history} = this.props; expandPaywk = (courseId, time, day) => {
const uid = user && user.data && user.data.uid; const {user} = this.props;
if (!uid) { const uid = user && user.data && user.data.uid;
this.props.history.push('/passport/login') if (!uid) {
} else { this.props.history.push('/passport/login')
let timeStamp = Date.parse(new Date()) / 1000; } else {
if (timeStamp >= time) { let timeStamp = Date.parse(new Date()) / 1000;
this.props.history.push( if (timeStamp >= time) {
'/final-deposit-order?source=1', this.props.history.push(
{ '/final-deposit-order?source=1',
id: courseId, {
sourcenum: 1 id: courseId,
sourcenum: 1,
}
) },
} else { )
Toast.info("付尾款时间将在" + day + "开启", 2); } else {
} Toast.info("付尾款时间将在" + day + "开启", 2);
} }
} }
// 去学习 }
tostudy = (courseId) => { // 去学习
this.props.history.push(`/getDetail?id=${courseId}`) tostudy = (courseId) => {
this.props.history.push(`/getDetail?id=${courseId}`)
}
// 显示活动规则
showRule = () => {
this.setState({
isShow: true,
step: 1,
})
}
// 邀请好友
share = () => {
const {user} = this.props;
const uid = user && user.data && user.data.uid;
if (!uid) {
this.props.history.push('/passport/login')
} else {
this.setState({
isShow: true,
step: 0,
})
} }
}
// 显示活动规则
showRule = () => { // 帮好友助力
this.setState({ helpFriend = (id) => {
const {user} = this.props;
const uid = user && user.data && user.data.uid;
if (!uid) {
this.props.history.push('/passport/login')
} else {
http.post(`${API['base-api']}/sys/help/${id}`).then((res) => {
const {data, errno, msg} = res.data
if (errno === 200) {
this.setState({
isShow: true, isShow: true,
step: 1 step: 2,
}) helpData: data,
} })
this.getListorData()
// 邀请好友 } else if (errno === 17018 || errno === 17020) {
share = () => { this.setState({
const {user, history} = this.props; isShow: true,
const uid = user && user.data && user.data.uid; step: 4,
if (!uid) { })
this.props.history.push('/passport/login')
} else { } else {
this.setState({ Toast.info(msg, 2)
isShow: true,
step: 0
})
} }
})
} }
}
// 帮好友助力
helpFriend = (id) => { // 结束助力
const {user, history} = this.props; isendExpand = (data) => {
const uid = user && user.data && user.data.uid; const {user} = this.props;
if (!uid) { const uid = user && user.data && user.data.uid;
this.props.history.push('/passport/login') if (!uid) {
} else { this.props.history.push('/passport/login')
http.post(`${API['base-api']}/sys/help/${id}`).then((res) => { } else {
const {data, errno, msg} = res.data const {amount, limit_amount, id} = data
if (errno == 200) { showAlert({
this.setState({ amount,
isShow: true, limit_amount,
step: 2, onCancel: () => {
helpData: data this.setState({
}) isShow: false,
this.getListorData() })
} else if (errno === 17018 || errno === 17020) { },
this.setState({ onConfirm: () => {
isShow: true, http.post(`${API['base-api']}/sys/end_expansion`, {
step: 4 id,
}) })
} else { .then(res => {
Toast.info(msg, 2) const {errno, msg} = res.data
} if (errno === 200) {
this.setState({
isShow: false,
})
this.getListorData()
} else {
Toast.info(msg)
}
}) })
} },
})
} }
}
// 结束助力 // 关闭弹窗
isendExpand = (data) => { close = () => {
const {user, history} = this.props; this.setState({
const uid = user && user.data && user.data.uid; isShow: false,
if (!uid) { })
this.props.history.push('/passport/login') }
} else {
const {amount, limit_amount, id} = data
showAlert({
amount,
limit_amount,
onCancel: () => {
this.setState({
isShow: false
})
},
onConfirm: () => {
http.post(`${API['base-api']}/sys/end_expansion`, {
id
})
.then(res => {
const {errno, msg} = res.data
if (errno == 200) {
this.setState({
isShow: false
})
this.getListorData()
} else {
Toast.info(msg)
}
})
}
})
}
}
// 关闭弹窗
close = () => {
this.setState({
isShow: false
})
}
render() {
const {isShow, step, data, courseList, isshowMore, helpData} = this.state
return (
<div className="expand-box">
<div className="banner">
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/dj-banner.png" alt=""/>
<span onClick={() => this.showRule()}/>
</div>
<div className="all-contnet">
<div className="content">
{/*进度||膨胀券*/}
{
<ExpansionStatus data={data}/>
}
{/*button*/}
{
<ButtonStatus data={data} share={this.share} helpFriend={this.helpFriend}
isendExpand={this.isendExpand}/>
}
</div>
{/*好友助力列表*/}
{
((data.oneself === 1 || data.help_list) && data.help_list.length !== 0) &&
<FriendList data={data}/>
}
{/*预售课程列表*/}
{
<CourseList data={courseList}
isshowMore={isshowMore}
getMoreCourseList={this.getMoreCourseList}
expandPaydj={this.expandPaydj}
expandPaywk={this.expandPaywk}
tostudy={this.tostudy}
/>
}
</div>
render() { {
const {isShow, step, data, courseList, isshowMore, helpData} = this.state isShow &&
return ( <div className='mbc-box'>
<div className="expand-box"> {
<div className="banner"> step === 0 &&
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/dj-banner.png" alt=""/> <ShareBox close={this.close} share={this.share} data={data}/>
<span onClick={() => this.showRule()}/> }
</div> {
<div className="all-contnet"> step === 1 &&
<div className="content"> <ActiveRule/>
{/*进度||膨胀券*/} }
{
<ExpansionStatus data={data}/>
}
{/*button*/}
{
<ButtonStatus data={data} share={this.share} helpFriend={this.helpFriend}
isendExpand={this.isendExpand}/>
}
</div>
{/*好友助力列表*/}
{
(data.oneself === 1 || data.help_list && data.help_list.length !== 0) && {
<FriendList data={data}/> step === 2 &&
} <AssistanceSuccess share={this.share} data={data} helpData={helpData}/>
{/*预售课程列表*/} }
{ {
<CourseList data={courseList} step === 4 &&
isshowMore={isshowMore} <AssistanceErron close={this.close}/>
getMoreCourseList={this.getMoreCourseList} }
expandPaydj={this.expandPaydj} {
expandPaywk={this.expandPaywk} (step === 1 || step === 2) &&
tostudy={this.tostudy} <img className="close"
/> onClick={() => this.close()}
} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/Public/img/guanbi_icon.png"
</div> alt=""/>
}
{ </div>
isShow && }
<div className='mbc-box'> </div>
{ )
step === 0 && }
<ShareBox close={this.close} share={this.share} data={data}/>
}
{
step === 1 &&
<ActiveRule/>
}
{
step === 2 &&
<AssistanceSuccess share={this.share} data={data} helpData={helpData}/>
}
{
step === 4 &&
<AssistanceErron close={this.close}/>
}
{
(step === 1 || step === 2) &&
<img className="close"
onClick={() => this.close()}
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/Public/img/guanbi_icon.png"
alt=""/>
}
</div>
}
</div>
)
}
} }
// 活动规则 // 活动规则
function ActiveRule() { function ActiveRule() {
return ( return (
<div className='content active-rule'> <div className='content active-rule'>
<div className="title">活动规则</div> <div className="title">活动规则</div>
<p>1、本活动期间，可以助力1位好友不同课程发起的膨胀，但是只能为同一好友；</p> <p>1、本活动期间，可以助力1位好友不同课程发起的膨胀，但是只能为同一好友；</p>
<p>2、好友发起膨胀后，可以随时终止膨胀；</p> <p>2、好友发起膨胀后，可以随时终止膨胀；</p>
<p>3、膨胀券膨胀完成后，以优惠券形式发放到参与活动的账号（包括所有助力好友），该膨胀券为全场通用券，可在购买任一课程后进行抵扣（包括已付定金课程）；</p> <p>3、膨胀券膨胀完成后，以优惠券形式发放到参与活动的账号（包括所有助力好友），该膨胀券为全场通用券，可在购买任一课程后进行抵扣（包括已付定金课程）；</p>
<p>4、如有疑问，可联系七月在线客服微信：julyedukefu；</p> <p>4、如有疑问，可联系七月在线客服微信：julyedukefu；</p>
<p>*本活动最终解释权归七月在线所有</p> <p>*本活动最终解释权归七月在线所有</p>
</div> </div>
) )
} }
// 邀请好友 分享弹窗 // 邀请好友 分享弹窗
function ShareBox(props) { function ShareBox(props) {
const {close, data} = props const {close, data} = props
return ( return (
<div className='content'> <div className='content'>
<div onClick={() => close()} className="fiexd"></div> <div onClick={() => close()} className="fiexd"></div>
<div className="share-box"> <div className="share-box">
{ {
browser.isWeixin && browser.isWeixin &&
<img src="//julyedu-cdn.oss-cn-beijing.aliyuncs.com/share/throw_icon.png" alt=""/> <img src="//julyedu-cdn.oss-cn-beijing.aliyuncs.com/share/throw_icon.png" alt=""/>
} }
<p>邀请好友助力</p> <p>邀请好友助力</p>
<p>膨胀券翻倍膨胀，{data.start_amount}元变{data.limit_amount}元！</p> <p>膨胀券翻倍膨胀，{data.start_amount}元变{data.limit_amount}元！</p>
<span>送助力好友{data.limit_amount}元</span> <span>送助力好友{data.limit_amount}元</span>
</div> </div>
</div> </div>
) )
} }
//助力成功弹窗 //助力成功弹窗
function AssistanceSuccess(props) { function AssistanceSuccess(props) {
const {helpData, share, data} = props const {helpData, share, data} = props
return ( return (
<div className='content assistance-success'> <div className='content assistance-success'>
<div className="title">助力成功</div> <div className="title">助力成功</div>
<p className="add-price"> <p className="add-price">
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/add-money.png" alt=""/> <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/add-money.png" alt=""/>
+{helpData.help_amount} +{helpData.help_amount}
</p> </p>
<p className="all-price"> <p className="all-price">
<span>{helpData.sale_amount}</span>元 <span>{helpData.sale_amount}</span>元
</p> </p>
<p className="assistance-tip">感谢你的助力，你们离{data.limit_amount}元又更近了哦！<br/>可以邀请其他小伙伴一起助力～</p> <p className="assistance-tip">感谢你的助力，你们离{data.limit_amount}元又更近了哦！<br/>可以邀请其他小伙伴一起助力～</p>
<button onClick={() => share()}>邀请更多好友拿{data.limit_amount}元</button> <button onClick={() => share()}>邀请更多好友拿{data.limit_amount}元</button>
</div> </div>
) )
} }
// 助力失败弹窗 // 助力失败弹窗
function AssistanceErron(props) { function AssistanceErron(props) {
const {close} = props const {close} = props
return ( return (
<div className="content assistance-erron"> <div className="content assistance-erron">
<div className="title">温馨提示</div> <div className="title">温馨提示</div>
<p>很遗憾～</p> <p>很遗憾～</p>
<p>你已经帮别的好友助过力了，</p> <p>你已经帮别的好友助过力了，</p>
<p>不能再帮这位好友助力！</p> <p>不能再帮这位好友助力！</p>
<button onClick={() => close()}>知道了</button> <button onClick={() => close()}>知道了</button>
</div> </div>
) )
} }
// 判断是否结束膨胀 // 判断是否结束膨胀
function ExpansionStatus(props) { function ExpansionStatus(props) {
const {data} = props const {data} = props
//is_end: 0 判断活动是否结束 0否1是 //is_end: 0 判断活动是否结束 0否1是
// is_end_expansion: 0,是否是自己结束膨胀 0否1是 // is_end_expansion: 0,是否是自己结束膨胀 0否1是
if (data.is_end === 0 && data.is_end_expansion === 0) { if (data.is_end === 0 && data.is_end_expansion === 0) {
return ( return (
<ProgressData data={data}/> <ProgressData data={data}/>
) )
} else { } else {
return ( return (
<EndExpansion data={data}/> <EndExpansion data={data}/>
) )
} }
} }
// 没有结束膨胀的情况 // 没有结束膨胀的情况
function ProgressData(props) { function ProgressData(props) {
const data = props.data const data = props.data
return ( return (
<div> <div>
<div className="user-mess"> <div className="user-mess">
<img src={data.avatar_file} alt="user"/> <img src={data.avatar_file} alt="user"/>
帮我助力，送你{data.limit_amount}元 帮我助力，送你{data.limit_amount}元
</div> </div>
<div className="progress-box"> <div className="progress-box">
<div className="progress-base"> <div className="progress-base">
<span className="progress-active" <span className="progress-active"
style={{width: (data.amount - data.start_amount) / data.limit_amount * 100 + '%'}}> style={{width: (data.amount - data.start_amount) / data.limit_amount * 100 + '%'}}>
<span className="ending"> <span className="ending">
<span className="tip">{data.amount}元 <i/></span> <span className="tip">{data.amount}元 <i/></span>
</span> </span>
</span> </span>
</div>
<div className="progress-price">
<span>{data.start_amount}元</span>
<span>{data.limit_amount}元</span>
</div>
</div>
{
data.help_list.length === 0 &&
<div className="help-mess no">还没有好友为{data.oneself === 1 ? '你' : 'Ta'}助力哦～</div>
}
{
data.help_list.length > 0 &&
<div className="help-mess has">已有<span className="FF19A0">{data.help_list.length}</span>位好友助力</div>
}
</div> </div>
) <div className="progress-price">
<span>{data.start_amount}元</span>
<span>{data.limit_amount}元</span>
</div>
</div>
{
data.help_list.length === 0 &&
<div className="help-mess no">还没有好友为{data.oneself === 1 ? '你' : 'Ta'}助力哦～</div>
}
{
data.help_list.length > 0 &&
<div className="help-mess has">已有<span className="FF19A0">{data.help_list.length}</span>位好友助力</div>
}
</div>
)
} }
// 结束膨胀的情况 // 结束膨胀的情况
function EndExpansion(props) { function EndExpansion(props) {
const data = props.data const data = props.data
return ( return (
<div className='coupon-box'> <div className='coupon-box'>
<div className="coupon"> <div className="coupon">
<p className="coupon-name">红包膨胀优惠券</p> <p className="coupon-name">红包膨胀优惠券</p>
<p className="coupon-price"><span>{data.amount}</span>元</p> <p className="coupon-price"><span>{data.amount}</span>元</p>
<p className="coupon-time">有效期至：{data.expire_time}</p> <p className="coupon-time">有效期至：{data.expire_time}</p>
</div> </div>
<div className="tip"> <div className="tip">
<ul> <ul>
{ {
new Array(19).fill('1').map((item, index) => { new Array(19).fill('1').map((item, index) => {
return <li key={index}/> return <li key={index}/>
}) })
} }
</ul> </ul>
全场通用 全场通用
</div> </div>
<p className="over-mess">该礼券已成功发放至账户</p> <p className="over-mess">该礼券已成功发放至账户</p>
<p className="over-mess">可在七月在线pc/app-我的-优惠券查看</p> <p className="over-mess">可在七月在线pc/app-我的-优惠券查看</p>
</div> </div>
) )
} }
// 按钮 // 按钮
function ButtonStatus(props) { function ButtonStatus(props) {
const {data, share, helpFriend, isendExpand} = props const {data, share, helpFriend, isendExpand} = props
// data.oneself 判断是否是自己 0帮好友助力 1自己 // data.oneself 判断是否是自己 0帮好友助力 1自己
// data.is_help 是否已经帮好友助力 0 未助力 1已助力 // data.is_help 是否已经帮好友助力 0 未助力 1已助力
// data.s_end: 0 判断活动是否结束 0否1是 // data.s_end: 0 判断活动是否结束 0否1是
// data.is_end_expansion: 0,是否是自己结束膨胀 0否1是 // data.is_end_expansion: 0,是否是自己结束膨胀 0否1是
return ( return (
<div> <div>
{ {
data.is_end === 0 && data.is_end === 0 &&
<div className='btns'> <div className='btns'>
{ {
data.oneself === 1 && data.is_end_expansion === 0 && data.oneself === 1 && data.is_end_expansion === 0 &&
<button className="active" onClick={() => share()}>邀请好友助力</button> <button className="active" onClick={() => share()}>邀请好友助力</button>
} }
{ {
data.oneself === 1 && data.is_end_expansion === 1 && data.amount !== data.limit_amount && data.oneself === 1 && data.is_end_expansion === 1 && data.amount !== data.limit_amount &&
<button className="over">您已结束膨胀</button> <button className="over">您已结束膨胀</button>
} }
{ {
data.oneself === 1 && data.is_end_expansion === 1 && data.amount === data.limit_amount && data.oneself === 1 && data.is_end_expansion === 1 && data.amount === data.limit_amount &&
<button className="over">达到膨胀上限，快去使用吧</button> <button className="over">达到膨胀上限，快去使用吧</button>
} }
{ {
data.oneself === 0 && data.is_help === 0 && data.is_end_expansion === 0 && data.oneself === 0 && data.is_help === 0 && data.is_end_expansion === 0 &&
<button className="active" onClick={() => helpFriend(data.id)}>帮ta助力</button> <button className="active" onClick={() => helpFriend(data.id)}>帮ta助力</button>
} }
{ {
data.oneself === 0 && data.is_help === 1 && data.is_end_expansion === 0 && data.oneself === 0 && data.is_help === 1 && data.is_end_expansion === 0 &&
<button className="active" onClick={() => share()}>邀请更多好友拿{data.limit_amount}元</button> <button className="active" onClick={() => share()}>邀请更多好友拿{data.limit_amount}元</button>
} }
{ {
data.oneself === 0 && data.is_end_expansion === 1 && data.amount === data.limit_amount && data.oneself === 0 && data.is_end_expansion === 1 && data.amount === data.limit_amount &&
<button className="over">达到膨胀上限，快去使用吧</button> <button className="over">达到膨胀上限，快去使用吧</button>
} }
{ {
data.oneself === 0 && data.is_end_expansion === 1 && data.amount !== data.limit_amount && data.oneself === 0 && data.is_end_expansion === 1 && data.amount !== data.limit_amount &&
<button className="over">你的好友已结束助力</button> <button className="over">你的好友已结束助力</button>
} }
</div> </div>
} }
{ {
data.is_end === 1 && data.is_end === 1 &&
<div className="btns"> <div className="btns">
<button className="over">活动已结束</button> <button className="over">活动已结束</button>
</div> </div>
} }
{
data.is_end === 0 && data.is_end_expansion === 0 && data.oneself === 1 &&
<div className="overBtn">
<p onClick={() => isendExpand(data)}>结束助力使用礼券</p>
</div>
}
{
data.is_end === 0 && data.is_end_expansion === 0 && data.oneself === 1 &&
<div className="overBtn">
<p onClick={() => isendExpand(data)}>结束助力使用礼券</p>
</div> </div>
) }
</div>
)
} }
// 好友助力列表 // 好友助力列表
function FriendList(props) { function FriendList(props) {
const data = props.data const data = props.data
return ( return (
<div className="friend-list"> <div className="friend-list">
<p className="title"> <p className="title">
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/expand-right.png" alt=""/> <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/expand-right.png" alt=""/>
<span>好友助力</span> <span>好友助力</span>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/expand-left.png" alt=""/> <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/expand-left.png" alt=""/>
</p> </p>
{ {
data.help_list.length === 0 && data.help_list.length === 0 &&
<div className="null-list"> <div className="null-list">
<p className="tips first-tips">还没有好友为你助力,</p> <p className="tips first-tips">还没有好友为你助力,</p>
<p className="tips">赶紧去邀请好友吧！</p> <p className="tips">赶紧去邀请好友吧！</p>
</div> </div>
} }
{
data.help_list.length > 0 &&
<div className="all-list">
<p className="friend-status"><span className="FF19A0">{data.help_list.length}</span>位好友共助力<span
className="FF19A0">{data.amount - data.start_amount}</span>元</p>
<ul className="all-list-box">
{ {
data.help_list.length > 0 && data.help_list.map((item, index) => {
<div className="all-list"> return (
<p className="friend-status"><span className="FF19A0">{data.help_list.length}</span>位好友共助力<span <li className="item" key={index}>
className="FF19A0">{data.amount - data.start_amount}</span>元</p> <img className="avait" src={item.avatar} alt=""/>
<ul className="all-list-box"> <span className="time">助力时间：{item.add_time}</span>
{ <span className="zlprice FF19A0">{item.amount}元</span>
data.help_list.map((item, index) => { </li>
return ( )
<li className="item" key={index}> })
<img className="avait" src={item.avatar} alt=""/>
<span className="time">助力时间：{item.add_time}</span>
<span className="zlprice FF19A0">{item.amount}元</span>
</li>
)
})
}
</ul>
</div>
} }
</ul>
</div> </div>
) }
</div>
)
} }
//预售课程 //预售课程
function CourseList(props) { function CourseList(props) {
const {data, isshowMore, getMoreCourseList, expandPaydj, expandPaywk, tostudy} = props const {data, isshowMore, getMoreCourseList, expandPaydj, expandPaywk, tostudy} = props
return ( return (
<div className="advance-sale-course"> <div className="advance-sale-course">
<p className="title"> <p className="title">
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/expand-right.png" alt=""/> <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/expand-right.png" alt=""/>
<span>预售课程</span> <span>预售课程</span>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/expand-left.png" alt=""/> <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/expand-left.png" alt=""/>
</p> </p>
<div className="course-list"> <div className="course-list">
<ul> <ul>
{
data.map((item, index) => {
return (
<li className="course-item" key={index}>
<Link to={`/getDetail?id=${item.course_id}`}>
<img className="course-img" src={item.image_name} alt=""/>
</Link>
<p className="old-price">原价:<span>¥{item.price}</span></p>
<p className="handsel">定金¥{item.deposit_amount}，可抵扣¥{item.deduction_amount}</p>
<div className="btn">
{ {
data.map((item, index) => { item.is_buy === 0 &&
return ( /*eslint-disable-next-line*/
<li className="course-item" key={index}> <a className="to-expand-buy1"
<Link to={`/getDetail?id=${item.course_id}`}> href={'#'}
<img className="course-img" src={item.image_name} alt=""/> onClick={(e) => {
</Link> e.preventDefault()
<p className="old-price">原价:<span>¥{item.price}</span></p> expandPaydj(item.course_id)
<p className="handsel">定金¥{item.deposit_amount}，可抵扣¥{item.deduction_amount}</p> }}>立即付定金</a>
<div className="btn"> }
{ {
item.is_buy === 0 && item.is_buy === 1 &&
<a className="to-expand-buy1" /*eslint-disable-next-line*/
onClick={() => expandPaydj(item.course_id)}>立即付定金</a> <a className="to-expand-buy2"
} href='#'
{ onClick={(e) => {
item.is_buy === 1 && e.preventDefault()
<a className="to-expand-buy2" expandPaywk(item.course_id, item.start_timestamp, item.final_start_time)
onClick={() => expandPaywk(item.course_id, item.start_timestamp, item.final_start_time)}>立即付尾款</a> }}>立即付尾款</a>
} }
{ {
item.is_buy === 2 && item.is_buy === 2 &&
<button className="to-study" <button className="to-study"
onClick={() => tostudy(item.course_id)}>开始学习</button> onClick={() => tostudy(item.course_id)}>开始学习</button>
}
</div>
</li>
)
})
} }
</ul>
</div>
{
isshowMore &&
<div className="more">
<div onClick={() => getMoreCourseList()}>
查看更多
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/expand-btm.png"
alt=""/>
</div>
</div>
}
</div>
</li>
)
})
}
</ul>
</div>
{
isshowMore &&
<div className="more">
<div onClick={() => getMoreCourseList()}>
查看更多
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/expand-btm.png"
alt=""/>
</div>
</div> </div>
) }
</div>
)
} }
export default connect( export default connect(
state => ({ state => ({
user: state.user user: state.user,
}), }),
)(ExpandShare) )(ExpandShare)
src/components/order/deposit/deposit-pay-order/index.js
import React, { Component } from 'react' import React, { Component } from 'react'
import { Flex, WingBlank, WhiteSpace, List, Radio, Toast, Checkbox } from 'antd-mobile' import { Flex, WingBlank, WhiteSpace, List, Radio, Toast, Checkbox } from 'antd-mobile'
import { http, getParam, is_weixin, browser } from 'src/utils' import { http, getParam, browser } from 'src/utils'
import { OrderItem, HeaderBar } from 'src/common/index' import { HeaderBar } from 'src/common/index'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import './index.scss' import './index.scss'
import { VList } from 'src/common' import { VList } from 'src/common'
...@@ -10,320 +10,322 @@ import classnames from 'classnames' ...@@ -10,320 +10,322 @@ import classnames from 'classnames'
const RadioItem = Radio.RadioItem const RadioItem = Radio.RadioItem
let mockData = [] let mockData
if (browser.isWeixin) { if (browser.isWeixin) {
mockData = [ mockData = [
{value: 1, label: '微信支付', icon: 'iconweixinzhifu'} {value: 1, label: '微信支付', icon: 'iconweixinzhifu'},
] ]
} else { } else {
mockData = [ mockData = [
{value: 1, label: '微信支付', icon: 'iconweixinzhifu'}, {value: 1, label: '微信支付', icon: 'iconweixinzhifu'},
{value: 0, label: '支付宝', icon: 'iconalipay'}, {value: 0, label: '支付宝', icon: 'iconalipay'},
] ]
} }
class PayOrder extends Component { class PayOrder extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
pay_amount: 0, pay_amount: 0,
payType: 1, payType: 1,
stageNumber: 0, stageNumber: 0,
checkPeriod: false, checkPeriod: false,
singleMoney: 0, singleMoney: 0,
periodNumber: 0, periodNumber: 0,
orderId: getParam('oid'), orderId: getParam('oid'),
huabei: false, huabei: false,
fenqiList: [ fenqiList: [
{value: 'zhifubao', qishu: '3', lilv: '2.30%', everyMoney: 300, feiyong: 2.3}, {value: 'zhifubao', qishu: '3', lilv: '2.30%', everyMoney: 300, feiyong: 2.3},
{value: 'weixin', qishu: '6', lilv: '4.50%', everyMoney: 150, feiyong: 4.5}, {value: 'weixin', qishu: '6', lilv: '4.50%', everyMoney: 150, feiyong: 4.5},
{value: 'huabei', qishu: '9', lilv: '7.50%', everyMoney: 100, feiyong: 7.5}, {value: 'huabei', qishu: '9', lilv: '7.50%', everyMoney: 100, feiyong: 7.5},
], ],
categoryList: [], categoryList: [],
agree: false agree: false,
}
} }
}
onChange = (value) => { onChange = (value) => {
this.setState({ this.setState({
payType: value, payType: value,
checkPeriod: false, checkPeriod: false,
}) })
if (value === 2) { if (value === 2) {
this.setState({ this.setState({
huabei: true, huabei: true,
}) })
}
} }
// 确定购买 }
pay = () => { // 确定购买
const {payType, orderId} = this.state pay = () => {
if(!this.state.agree){ const {payType, orderId} = this.state
return if (!this.state.agree) {
} return
if (payType === 0) {
this.alipayPay(orderId)
} else if (payType === 1) {
this.weixinPay(orderId)
}
} }
// 微信支付 if (payType === 0) {
weixinPay = (orderId) => { this.alipayPay(orderId)
// 微信内部-支付 } else if (payType === 1) {
if (is_weixin()) { this.weixinPay(orderId)
window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=" + encodeURIComponent(window.location.href + "&aa=bb").toLowerCase() + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
} else {
// 微信外部-支付
http.get(`${API['base-api']}/pay/wxpay/wap_charge/oid/${orderId}`).then((res) => {
if (res.data.errno === 0) {
window.location.href = res.data.data.url + "&redirect_url=" + encodeURIComponent(window.location.href + "&weixinpay=1").toLowerCase()
} else {
Toast.info(res.data.msg, 2)
}
})
}
} }
// 微信内部支付 }
isweixinPay = () => { // 微信支付
let _this = this weixinPay = (orderId) => {
let weixin_code = getParam('code') // 微信内部-支付
if (weixin_code) { if (browser.isWeixin) {
if (getParam('oid') === undefined) { window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=" + encodeURIComponent(window.location.href + "&aa=bb").toLowerCase() + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
return } else {
} else { // 微信外部-支付
http.get(`${API['base-api']}/pay/wxpay/pub_charge/oid/${getParam('oid')}/code/${weixin_code}`).then((res) => { http.get(`${API['base-api']}/pay/wxpay/wap_charge/oid/${orderId}`).then((res) => {
if (res.data.errno === 0) { if (res.data.errno === 0) {
let data = res.data.data window.location.href = res.data.data.url + "&redirect_url=" + encodeURIComponent(window.location.href + "&weixinpay=1").toLowerCase()
} else {
function onBridgeReady() { Toast.info(res.data.msg, 2)
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
appId: data.appId, //公众号名称，由商户传入
timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数
nonceStr: data.nonceStr, //随机串
package: data.package,
signType: data.signType, //微信签名方式：
paySign: data.paySign //微信签名
},
function (res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
Toast.info('支付成功', 2)
_this.intervalPayStatus = setInterval(function () {
http.get(`${API['base-api']}/m/orderState/oid/${getParam('oid')}`).then(res => {
if (res.data.errno === 401) {
clearInterval(_this.intervalPayStatus)
_this.intervalPayStatus = null
_this.props.history.replace(`/expand/callback?order_id=${getParam('oid')}`)
}
})
}, 1000)
} else {
alert('支付失败')
}
}
)
}
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
}
} else {
onBridgeReady()
}
} else {
Toast.info(res.data.msg, 2)
}
})
}
} }
})
} }
// 支付完成之后获取状态 }
payCallback = () => { // 微信内部支付
const _this = this isweixinPay = () => {
// 支付回调 let _this = this
// 定时器轮训获取订单状态 let weixin_code = getParam('code')
_this.intervalPayStatus = setInterval(function () { if (weixin_code) {
http.get(`${API['base-api']}/m/orderState/oid/${getParam('oid')}`).then(res => { if (getParam('oid') !== undefined) {
if (res.data.errno === 401) { http.get(`${API['base-api']}/pay/wxpay/pub_charge/oid/${getParam('oid')}/code/${weixin_code}`).then((res) => {
clearInterval(_this.intervalPayStatus) if (res.data.errno === 0) {
_this.intervalPayStatus = null let data = res.data.data
window.location.href = '/expand/callback?order_id=' + getParam('oid')
}
})
}, 1000)
}
onBridgeReady1 = (data) => {
let _this = this
data = data || _this.BridgeData
WeixinJSBridge.invoke( function onBridgeReady() {
'getBrandWCPayRequest', { WeixinJSBridge.invoke(
"appId": "wx23dac6775ac82877", //公众号名称，由商户传入 'getBrandWCPayRequest', {
"timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数 appId: data.appId, //公众号名称，由商户传入
"nonceStr": data.nonceStr, //随机串 timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数
"package": data.package, nonceStr: data.nonceStr, //随机串
"signType": data.signType, //微信签名方式： package: data.package,
"paySign": data.paySign //微信签名 signType: data.signType, //微信签名方式：
}, paySign: data.paySign, //微信签名
function (res) { },
if (res.err_msg == "get_brand_wcpay_request:ok") { function (res) {
// eslint-disable-next-line eqeqeq
if (res.err_msg == "get_brand_wcpay_request:ok") {
Toast.info('支付成功', 2) Toast.info('支付成功', 2)
_this.payCallback() _this.intervalPayStatus = setInterval(function () {
} else { http.get(`${API['base-api']}/m/orderState/oid/${getParam('oid')}`).then(res => {
if (res.data.errno === 401) {
clearInterval(_this.intervalPayStatus)
_this.intervalPayStatus = null
_this.props.history.replace(`/expand/callback?order_id=${getParam('oid')}`)
}
})
}, 1000)
} else {
alert('支付失败') alert('支付失败')
} }
},
)
} }
)
} if (typeof WeixinJSBridge == "undefined") {
// 支付宝支付 if (document.addEventListener) {
alipayPay = (orderId) => { document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
http.get(`${API['base-api']}/pay/alipay/wap_charge_new/oid/${orderId}`).then((res) => { } else if (document.attachEvent) {
if (res.data.errno === 0) { document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
this.payCallback() document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
window.location = res.data.data.url }
} else { } else {
Toast.info(res.data.msg, 2) onBridgeReady()
} }
} else {
Toast.info(res.data.msg, 2)
}
}) })
}
} }
}
// 支付完成之后获取状态
payCallback = () => {
const _this = this
// 支付回调
// 定时器轮训获取订单状态
_this.intervalPayStatus = setInterval(function () {
http.get(`${API['base-api']}/m/orderState/oid/${getParam('oid')}`).then(res => {
if (res.data.errno === 401) {
clearInterval(_this.intervalPayStatus)
_this.intervalPayStatus = null
window.location.href = '/expand/callback?order_id=' + getParam('oid')
}
})
}, 1000)
}
componentDidMount() { onBridgeReady1 = (data) => {
let _this = this
data = data || _this.BridgeData
if (getParam('weixinpay')) { /* eslint-disable-next-line no-undef */
this.payCallback() WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": "wx23dac6775ac82877", //公众号名称，由商户传入
"timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数
"nonceStr": data.nonceStr, //随机串
"package": data.package,
"signType": data.signType, //微信签名方式：
"paySign": data.paySign, //微信签名
},
function (res) {
// eslint-disable-next-line eqeqeq
if (res.err_msg == "get_brand_wcpay_request:ok") {
Toast.info('支付成功', 2)
_this.payCallback()
} else {
alert('支付失败')
} }
},
)
}
// 支付宝支付
alipayPay = (orderId) => {
http.get(`${API['base-api']}/pay/alipay/wap_charge_new/oid/${orderId}`).then((res) => {
if (res.data.errno === 0) {
this.payCallback()
window.location = res.data.data.url
} else {
Toast.info(res.data.msg, 2)
}
})
}
if (browser.isWeixin) { componentDidMount() {
this.isweixinPay(getParam('oid'))
}
if (getParam('weixinpay')) {
this.payCallback()
}
http.post(`${API["base-api"]}/m/deposit/detail`, { if (browser.isWeixin) {
order_id: this.state.orderId this.isweixinPay(getParam('oid'))
}).then(res => { }
const {data} = res
if (data.errno == 200) {
this.setState({ http.post(`${API["base-api"]}/m/deposit/detail`, {
categoryList: [data.data.course_info], order_id: this.state.orderId,
salePrice: data.data.course_info.sale_price }).then(res => {
}) const {data} = res
} else { // eslint-disable-next-line eqeqeq
Toast.info(data.msg) if (data.errno == 200) {
} this.setState({
categoryList: [data.data.course_info],
salePrice: data.data.course_info.sale_price,
}) })
} else {
Toast.info(data.msg)
}
})
} }
changeAgreement = () => { changeAgreement = () => {
this.setState((prevState) => ({agree: !prevState.agree})) this.setState((prevState) => ({agree: !prevState.agree}))
} }
render() { render() {
const { const {
orderId, orderId,
salePrice, salePrice,
payType, payType,
checkPeriod, checkPeriod,
singleMoney, singleMoney,
periodNumber, periodNumber,
categoryList, categoryList,
agree agree,
} = this.state } = this.state
return ( return (
<div className='pay-order'> <div className='pay-order'>
<HeaderBar title='确认支付' arrow={true}></HeaderBar> <HeaderBar title='确认支付' arrow={true}></HeaderBar>
<WhiteSpace size='sm'></WhiteSpace> <WhiteSpace size='sm'></WhiteSpace>
<div className='order-number'> <div className='order-number'>
<WingBlank> <WingBlank>
<Flex justify='between' align='center' style={{height: '44px'}}> <Flex justify='between' align='center' style={{height: '44px'}}>
<span>订单号</span> <span>订单号</span>
<span className='number'>{orderId}</span> <span className='number'>{orderId}</span>
</Flex> </Flex>
</WingBlank> </WingBlank>
</div> </div>
<WhiteSpace size='md'></WhiteSpace> <WhiteSpace size='md'></WhiteSpace>
{ {
categoryList.map((item, index) => { categoryList.map((item, index) => {
const Info = ( const Info = (
<div className="order-info"> <div className="order-info">
<p className='order-title text-overflow-one'> <p className='order-title text-overflow-one'>
<Link to={`/detail?id=${item.course_id}`}>{item.course_title}</Link> <Link to={`/detail?id=${item.course_id}`}>{item.course_title}</Link>
</p> </p>
<p className='order-content text-overflow-2'>{item.simpledescription}</p> <p className='order-content text-overflow-2'>{item.simpledescription}</p>
<p className='order-des'> <p className='order-des'>
<span className='order-newprice'>¥{item.sale_price}</span> <span className='order-newprice'>¥{item.sale_price}</span>
<span className={'price-des'}>（预付定金）</span> <span className={'price-des'}>（预付定金）</span>
</p> </p>
</div> </div>
) )
return ( return (
<VList key={index} img={item.image_name} <VList key={index} img={item.image_name}
id={item.course_id} id={item.course_id}
info={Info}></VList> info={Info}></VList>
) )
}) })
} }
<WhiteSpace size='md'></WhiteSpace> <WhiteSpace size='md'></WhiteSpace>
<div className='order-number'> <div className='order-number'>
<WingBlank> <WingBlank>
<Flex justify='between' align='center' style={{height: '44px'}}> <Flex justify='between' align='center' style={{height: '44px'}}>
<span>支付金额</span> <span>支付金额</span>
<span className='money'>{`￥${salePrice}`}</span> <span className='money'>{`￥${salePrice}`}</span>
</Flex> </Flex>
</WingBlank> </WingBlank>
</div> </div>
<WhiteSpace size='md'></WhiteSpace> <WhiteSpace size='md'></WhiteSpace>
<List renderHeader={() => '支付方式'} className='pay-type-list'> <List renderHeader={() => '支付方式'} className='pay-type-list'>
{mockData.map(i => ( {mockData.map(i => (
<RadioItem <RadioItem
thumb={<i className={`iconfont ${i.icon} ${payType === i.value ? 'checked' : ''}`}></i>} thumb={<i className={`iconfont ${i.icon} ${payType === i.value ? 'checked' : ''}`}></i>}
key={i.value} key={i.value}
checked={payType === i.value} checked={payType === i.value}
onChange={() => this.onChange(i.value)}> onChange={() => this.onChange(i.value)}>
{ {
i.value === 2 ? ( i.value === 2 ? (
<Flex direction='column' align='start' style={{width: '100%', marginTop: '6px'}}> <Flex direction='column' align='start' style={{width: '100%', marginTop: '6px'}}>
<Flex direction='row' justify='between' <Flex direction='row' justify='between'
style={{width: '100%', paddingRight: '30px'}}> style={{width: '100%', paddingRight: '30px'}}>
<span style={{color: '#555555', fontSize: '14px'}}>{i.label}</span> <span style={{color: '#555555', fontSize: '14px'}}>{i.label}</span>
{ {
checkPeriod ? ( checkPeriod ? (
<span style={{ <span style={{
color: '#333333', color: '#333333',
fontSize: '12px' fontSize: '12px',
}}>{`${singleMoney}元 × ${periodNumber}期`}</span> }}>{`${singleMoney}元 × ${periodNumber}期`}</span>
) : null ) : null
} }
</Flex> </Flex>
<Flex justify='start'> <Flex justify='start'>
<span style={{color: '#999999', fontSize: '12px'}}>支付上限受限于您的花呗额度</span> <span style={{color: '#999999', fontSize: '12px'}}>支付上限受限于您的花呗额度</span>
</Flex> </Flex>
</Flex> </Flex>
) : (i.label) ) : (i.label)
} }
</RadioItem> </RadioItem>
))} ))}
</List> </List>
<Flex> <Flex>
<Flex.Item className={'agreement'}> <Flex.Item className={'agreement'}>
<Checkbox.AgreeItem onChange={this.changeAgreement}> <Checkbox.AgreeItem onChange={this.changeAgreement}>
我已同意定金不退 我已同意定金不退
</Checkbox.AgreeItem> </Checkbox.AgreeItem>
</Flex.Item> </Flex.Item>
</Flex> </Flex>
{/*<div className='pay-tip'>请在15分钟内完成支付，否则届时系统将关闭该订单。</div>*/} {/*<div className='pay-tip'>请在15分钟内完成支付，否则届时系统将关闭该订单。</div>*/}
<div className={classnames(['pay-button', !agree && 'invalid'])} onClick={this.pay}>确认支付</div> <div className={classnames(['pay-button', !agree && 'invalid'])} onClick={this.pay}>确认支付</div>
</div> </div>
) )
} }
} }
export default WithFullSize(PayOrder) export default WithFullSize(PayOrder)
src/components/order/deposit/final-order/index.js
import React, { Component } from 'react' import React, { Component } from 'react'
import { Checkbox, Flex, List, Radio, Toast, WhiteSpace, WingBlank } from 'antd-mobile' import { Checkbox, Flex, List, Radio, Toast, WhiteSpace, WingBlank } from 'antd-mobile'
import { browser, getParam, http, is_weixin } from 'src/utils' import { browser, getParam, http } from 'src/utils'
import { HeaderBar } from 'src/common/index' import { HeaderBar } from 'src/common/index'
import VlistBase from 'src/common/v-list-base' import VlistBase from 'src/common/v-list-base'
import './index.scss' import './index.scss'
import { WithFullSize } from 'src/HOCs' import { WithFullSize } from 'src/HOCs'
import { Link } from "react-router-dom" import { Link } from "react-router-dom"
import app from "src/utils/app"
const RadioItem = Radio.RadioItem const RadioItem = Radio.RadioItem
...@@ -25,6 +24,7 @@ function OrderList({courses, toggleSelectedCourse}) { ...@@ -25,6 +24,7 @@ function OrderList({courses, toggleSelectedCourse}) {
定金折扣：<span className={'price'}>-¥{course.deduction_amount}</span> 定金折扣：<span className={'price'}>-¥{course.deduction_amount}</span>
</div> </div>
{ {
// eslint-disable-next-line eqeqeq
course.coupon_amount != 0 && course.coupon_amount != 0 &&
<div className={'coupon-amount'}> <div className={'coupon-amount'}>
使用优惠券：<span className={'price'}>-¥{course.coupon_amount}</span> 使用优惠券：<span className={'price'}>-¥{course.coupon_amount}</span>
...@@ -67,20 +67,20 @@ function OrderList({courses, toggleSelectedCourse}) { ...@@ -67,20 +67,20 @@ function OrderList({courses, toggleSelectedCourse}) {
pathname: `/coupons`, pathname: `/coupons`,
search: `?id=${course_id}`, search: `?id=${course_id}`,
state: { state: {
from: '/order' from: '/order',
} },
}}> }}>
<Flex justify='between'> <Flex justify='between'>
<span <span
style={{ style={{
color: '#333', color: '#333',
fontSize: '15px' fontSize: '15px',
}} }}
>优惠券</span> >优惠券</span>
<span <span
style={{ style={{
fontSize: '14px', fontSize: '14px',
color: '#999999' color: '#999999',
}} }}
> >
{!coupon_desc ? (coupon_num === 0 ? '无' : `${coupon_num}张可用`) : (coupon_desc)} {!coupon_desc ? (coupon_num === 0 ? '无' : `${coupon_num}张可用`) : (coupon_desc)}
...@@ -98,10 +98,10 @@ function OrderList({courses, toggleSelectedCourse}) { ...@@ -98,10 +98,10 @@ function OrderList({courses, toggleSelectedCourse}) {
) )
} }
let mockData = [] let mockData
if (browser.isWeixin) { if (browser.isWeixin) {
mockData = [ mockData = [
{value: 1, label: '微信支付', icon: 'iconweixinzhifu'} {value: 1, label: '微信支付', icon: 'iconweixinzhifu'},
] ]
} else { } else {
mockData = [ mockData = [
...@@ -129,7 +129,7 @@ class FinalDepositOrder extends Component { ...@@ -129,7 +129,7 @@ class FinalDepositOrder extends Component {
moneyOffRules: [], moneyOffRules: [],
finalEndTime: '', finalEndTime: '',
offset: 0, offset: 0,
appliedMoneyOffRule: {} appliedMoneyOffRule: {},
} }
} }
...@@ -157,9 +157,9 @@ class FinalDepositOrder extends Component { ...@@ -157,9 +157,9 @@ class FinalDepositOrder extends Component {
//提交 //提交
submit = () => { submit = () => {
this.createOrder().then(res => { this.createOrder().then(res => {
if (res.data.errno == 200) { if (res.data.errno === 200) {
this.setState({ this.setState({
order_id: res.data.data.order_id order_id: res.data.data.order_id,
}, () => { }, () => {
if (res.data.data.pay_jump === 1) { if (res.data.data.pay_jump === 1) {
this.props.history.push('/purchased') this.props.history.push('/purchased')
...@@ -176,7 +176,7 @@ class FinalDepositOrder extends Component { ...@@ -176,7 +176,7 @@ class FinalDepositOrder extends Component {
//创建订单 //创建订单
createOrder = () => { createOrder = () => {
const {selectedCourses, salePrice, useBalance, user_account, appliedMoneyOffRule} = this.state const {selectedCourses, salePrice, useBalance, appliedMoneyOffRule} = this.state
return http.post(`${API["base-api"]}/m/deposit/final/create`, { return http.post(`${API["base-api"]}/m/deposit/final/create`, {
course_ids: selectedCourses.map(item => item.course_id), course_ids: selectedCourses.map(item => item.course_id),
cut_amount: appliedMoneyOffRule.cut_amount || 0, cut_amount: appliedMoneyOffRule.cut_amount || 0,
...@@ -184,13 +184,13 @@ class FinalDepositOrder extends Component { ...@@ -184,13 +184,13 @@ class FinalDepositOrder extends Component {
is_deduction: useBalance ? 1 : 0, is_deduction: useBalance ? 1 : 0,
deduction_amount: useBalance ? this.getBalanceOffset() : 0, deduction_amount: useBalance ? this.getBalanceOffset() : 0,
plat_form: 5, plat_form: 5,
source: getParam('source') source: getParam('source'),
}) })
} }
// 微信支付 // 微信支付
weixinPay = (orderId) => { weixinPay = (orderId) => {
// 微信内部-支付 // 微信内部-支付
if (is_weixin()) { if (browser.isWeixin) {
window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=" + encodeURIComponent(window.location.href + "&aa=bb").toLowerCase() + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect" window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=" + encodeURIComponent(window.location.href + "&aa=bb").toLowerCase() + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
} else { } else {
// 微信外部-支付 // 微信外部-支付
...@@ -209,14 +209,13 @@ class FinalDepositOrder extends Component { ...@@ -209,14 +209,13 @@ class FinalDepositOrder extends Component {
let _this = this let _this = this
let weixin_code = getParam('code') let weixin_code = getParam('code')
if (weixin_code) { if (weixin_code) {
if (getParam('oid') === undefined) { if (getParam('oid') !== undefined) {
return
} else {
http.get(`${API['base-api']}/pay/wxpay/pub_charge/oid/${getParam('oid')}/code/${weixin_code}`).then((res) => { http.get(`${API['base-api']}/pay/wxpay/pub_charge/oid/${getParam('oid')}/code/${weixin_code}`).then((res) => {
if (res.data.errno === 0) { if (res.data.errno === 0) {
let data = res.data.data let data = res.data.data
function onBridgeReady() { function onBridgeReady() {
/* eslint-disable-next-line no-undef */
WeixinJSBridge.invoke( WeixinJSBridge.invoke(
'getBrandWCPayRequest', { 'getBrandWCPayRequest', {
appId: data.appId, //公众号名称，由商户传入 appId: data.appId, //公众号名称，由商户传入
...@@ -224,10 +223,10 @@ class FinalDepositOrder extends Component { ...@@ -224,10 +223,10 @@ class FinalDepositOrder extends Component {
nonceStr: data.nonceStr, //随机串 nonceStr: data.nonceStr, //随机串
package: data.package, package: data.package,
signType: data.signType, //微信签名方式： signType: data.signType, //微信签名方式：
paySign: data.paySign //微信签名 paySign: data.paySign, //微信签名
}, },
function (res) { function (res) {
if (res.err_msg == "get_brand_wcpay_request:ok") { if (res.err_msg === "get_brand_wcpay_request:ok") {
Toast.info('支付成功', 2) Toast.info('支付成功', 2)
_this.intervalPayStatus = setInterval(function () { _this.intervalPayStatus = setInterval(function () {
http.get(`${API['base-api']}/m/orderState/oid/${getParam('oid')}`).then(res => { http.get(`${API['base-api']}/m/orderState/oid/${getParam('oid')}`).then(res => {
...@@ -241,7 +240,7 @@ class FinalDepositOrder extends Component { ...@@ -241,7 +240,7 @@ class FinalDepositOrder extends Component {
} else { } else {
alert('支付失败') alert('支付失败')
} }
} },
) )
} }
...@@ -304,17 +303,17 @@ class FinalDepositOrder extends Component { ...@@ -304,17 +303,17 @@ class FinalDepositOrder extends Component {
http.get(`${API["base-api"]}/m/deposit/final/preorder`) http.get(`${API["base-api"]}/m/deposit/final/preorder`)
.then(res => { .then(res => {
const {data} = res const {data} = res
if (data.errno == 200) { if (data.errno === 200) {
this.setState({ this.setState({
categoryList: [...data.data.courses], categoryList: [...data.data.courses],
salePrice: this.getTotalPrice({ salePrice: this.getTotalPrice({
courses: [...data.data.courses], courses: [...data.data.courses],
moneyOffRules: data.data['full_rule'] moneyOffRules: data.data['full_rule'],
}), }),
selectedCourses: [...data.data.courses], selectedCourses: [...data.data.courses],
user_account: data.data.user_account, user_account: data.data.user_account,
moneyOffRules: data.data['full_rule'], moneyOffRules: data.data['full_rule'],
finalEndTime: data.data['final_end_time'] finalEndTime: data.data['final_end_time'],
}) })
} else { } else {
Toast.info(data.msg) Toast.info(data.msg)
...@@ -326,7 +325,7 @@ class FinalDepositOrder extends Component { ...@@ -326,7 +325,7 @@ class FinalDepositOrder extends Component {
// 展示余额抵扣规则 // 展示余额抵扣规则
showInfo = () => { showInfo = () => {
this.setState((prevState) => ({ this.setState((prevState) => ({
info: !prevState.info info: !prevState.info,
})) }))
} }
...@@ -334,8 +333,8 @@ class FinalDepositOrder extends Component { ...@@ -334,8 +333,8 @@ class FinalDepositOrder extends Component {
toggleSelectedCourse = course => { toggleSelectedCourse = course => {
this.setState(prevState => { this.setState(prevState => {
const {selectedCourses} = prevState const {selectedCourses} = prevState
let index = prevState.selectedCourses.findIndex(item => item.course_id == course.course_id) let index = prevState.selectedCourses.findIndex(item => item.course_id === course.course_id)
if (index == -1) { if (index === -1) {
selectedCourses.push(course) selectedCourses.push(course)
} else { } else {
selectedCourses.splice(index, 1) selectedCourses.splice(index, 1)
...@@ -350,8 +349,8 @@ class FinalDepositOrder extends Component { ...@@ -350,8 +349,8 @@ class FinalDepositOrder extends Component {
{ {
courses = this.state.selectedCourses, courses = this.state.selectedCourses,
useBalance = this.state.useBalance, useBalance = this.state.useBalance,
moneyOffRules = this.state.moneyOffRules moneyOffRules = this.state.moneyOffRules,
} = {} } = {},
) => { ) => {
let totalPrice = this.getOriginTotalPrice({courses}) let totalPrice = this.getOriginTotalPrice({courses})
totalPrice = this.moneyOff(totalPrice, moneyOffRules) totalPrice = this.moneyOff(totalPrice, moneyOffRules)
...@@ -369,7 +368,7 @@ class FinalDepositOrder extends Component { ...@@ -369,7 +368,7 @@ class FinalDepositOrder extends Component {
let rule = rules[i] let rule = rules[i]
if (result >= rule.full_amount) { if (result >= rule.full_amount) {
this.setState({ this.setState({
appliedMoneyOffRule: rule appliedMoneyOffRule: rule,
}) })
return result - parseFloat(rule.cut_amount) return result - parseFloat(rule.cut_amount)
} }
...@@ -385,7 +384,7 @@ class FinalDepositOrder extends Component { ...@@ -385,7 +384,7 @@ class FinalDepositOrder extends Component {
return { return {
useBalance, useBalance,
salePrice: totalPrice, salePrice: totalPrice,
offset: this.getBalanceOffset(totalPrice) offset: this.getBalanceOffset(totalPrice),
} }
}) })
...@@ -408,7 +407,6 @@ class FinalDepositOrder extends Component { ...@@ -408,7 +407,6 @@ class FinalDepositOrder extends Component {
render() { render() {
const { const {
orderId,
salePrice, salePrice,
payType, payType,
categoryList, categoryList,
...@@ -417,12 +415,12 @@ class FinalDepositOrder extends Component { ...@@ -417,12 +415,12 @@ class FinalDepositOrder extends Component {
info, info,
finalEndTime, finalEndTime,
offset, offset,
appliedMoneyOffRule appliedMoneyOffRule,
} = this.state } = this.state
return ( return (
<div className='deposit-pay-order'> <div className='deposit-pay-order'>
<HeaderBar title='课程报名' arrow={true}></HeaderBar> <HeaderBar title='课程报名' arrow={true}></HeaderBar>
<WhiteSpace size='sm' /> <WhiteSpace size='sm'/>
{/*<div className='order-number'> {/*<div className='order-number'>
<WingBlank> <WingBlank>
<Flex justify='between' align='center' style={{height: '44px'}}> <Flex justify='between' align='center' style={{height: '44px'}}>
...@@ -431,10 +429,10 @@ class FinalDepositOrder extends Component { ...@@ -431,10 +429,10 @@ class FinalDepositOrder extends Component {
</Flex> </Flex>
</WingBlank> </WingBlank>
</div>*/} </div>*/}
<WhiteSpace size='md' /> <WhiteSpace size='md'/>
<div className={'order-list'}> <div className={'order-list'}>
<OrderList <OrderList
courses={categoryList} courses={categoryList}
toggleSelectedCourse={this.toggleSelectedCourse} toggleSelectedCourse={this.toggleSelectedCourse}
/> />
...@@ -460,9 +458,9 @@ class FinalDepositOrder extends Component { ...@@ -460,9 +458,9 @@ class FinalDepositOrder extends Component {
<span style={{ <span style={{
color: '#FF2121', color: '#FF2121',
fontSize: '15px', fontSize: '15px',
marginRight: "6px" marginRight: "6px",
}}>{`-¥${offset}`}</span> }}>{`-¥${offset}`}</span>
<i <i
className={`iconfont icondanseshixintubiao-5 balance-used`} className={`iconfont icondanseshixintubiao-5 balance-used`}
onClick={this.useBalance} onClick={this.useBalance}
/> />
...@@ -524,7 +522,7 @@ class FinalDepositOrder extends Component { ...@@ -524,7 +522,7 @@ class FinalDepositOrder extends Component {
width: '100%', width: '100%',
height: '100%', height: '100%',
backgroundColor: 'rgba(0, 0, 0, 0.8)', backgroundColor: 'rgba(0, 0, 0, 0.8)',
zIndex: '99' zIndex: '99',
}}> }}>
<div style={{ <div style={{
padding: '20px', padding: '20px',
...@@ -535,14 +533,14 @@ class FinalDepositOrder extends Component { ...@@ -535,14 +533,14 @@ class FinalDepositOrder extends Component {
position: 'absolute', position: 'absolute',
left: '50%', left: '50%',
top: '50%', top: '50%',
transform: 'translate(-50%, -50%)' transform: 'translate(-50%, -50%)',
}}> }}>
<Flex direction='column' justify='between' align='center' style={{height: '100%'}}> <Flex direction='column' justify='between' align='center' style={{height: '100%'}}>
<p style={{fontSize: '16px', color: '#333333'}}>余额抵扣说明</p> <p style={{fontSize: '16px', color: '#333333'}}>余额抵扣说明</p>
<p style={{ <p style={{
lineHeight: '20px', lineHeight: '20px',
fontSize: '13px', fontSize: '13px',
color: '#666666' color: '#666666',
}}>分销课程或者参与七月在线的相关活动，可获得资金奖励。账户资金可直接提现，也可抵扣课程费用。</p> }}>分销课程或者参与七月在线的相关活动，可获得资金奖励。账户资金可直接提现，也可抵扣课程费用。</p>
<div onClick={this.showInfo} style={{ <div onClick={this.showInfo} style={{
width: '260px', width: '260px',
...@@ -552,7 +550,7 @@ class FinalDepositOrder extends Component { ...@@ -552,7 +550,7 @@ class FinalDepositOrder extends Component {
borderRadius: '3px', borderRadius: '3px',
border: '1px solid #0099FF', border: '1px solid #0099FF',
color: '#0099FF', color: '#0099FF',
fontSize: '15px' fontSize: '15px',
}}>知道了 }}>知道了
</div> </div>
</Flex> </Flex>
......
src/components/order/payOrder/PayOrder.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Flex, WingBlank, WhiteSpace, List, Radio, Toast } from 'antd-mobile'; import { Flex, WingBlank, WhiteSpace, List, Radio, Toast } from 'antd-mobile';
import { http, getParam, is_weixin, browser } from 'src/utils'; import { http, getParam, browser } from 'src/utils';
import { OrderItem, HeaderBar } from 'src/common/index'; import { HeaderBar } from 'src/common/index';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import './PayOrder.scss'; import './PayOrder.scss';
import { VList } from 'src/common'; import { VList } from 'src/common';
const Item = List.Item;
const Brief = Item.Brief;
const RadioItem = Radio.RadioItem; const RadioItem = Radio.RadioItem;
let mockData = [] let mockData
if (browser.isWeixin) { if (browser.isWeixin) {
mockData = [ mockData = [
{value: 1, label: '微信支付', icon: 'iconweixinzhifu'} {value: 1, label: '微信支付', icon: 'iconweixinzhifu'},
]; ];
} else { } else {
mockData = [ mockData = [
{value: 1, label: '微信支付', icon: 'iconweixinzhifu'}, {value: 1, label: '微信支付', icon: 'iconweixinzhifu'},
{value: 0, label: '支付宝', icon: 'iconalipay'}, {value: 0, label: '支付宝', icon: 'iconalipay'},
// { value: 2, label: '花呗分期', icon: 'iconhuabei' }, // { value: 2, label: '花呗分期', icon: 'iconhuabei' },
]; ];
} }
export default class PayOrder extends Component { export default class PayOrder extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
pay_amount: 0, pay_amount: 0,
payType: 1, payType: 1,
stageNumber: 0, stageNumber: 0,
checkPeriod: false, checkPeriod: false,
singleMoney: 0, singleMoney: 0,
periodNumber: 0, periodNumber: 0,
orderId: getParam('oid'), orderId: getParam('oid'),
huabei: false, huabei: false,
fenqiList: [ fenqiList: [
{value: 'zhifubao', qishu: '3', lilv: '2.30%', everyMoney: 300, feiyong: 2.3}, {value: 'zhifubao', qishu: '3', lilv: '2.30%', everyMoney: 300, feiyong: 2.3},
{value: 'weixin', qishu: '6', lilv: '4.50%', everyMoney: 150, feiyong: 4.5}, {value: 'weixin', qishu: '6', lilv: '4.50%', everyMoney: 150, feiyong: 4.5},
{value: 'huabei', qishu: '9', lilv: '7.50%', everyMoney: 100, feiyong: 7.5}, {value: 'huabei', qishu: '9', lilv: '7.50%', everyMoney: 100, feiyong: 7.5},
], ],
categoryList: [], categoryList: [],
}
} }
}
// 支付成功后，判断并重定向 // 支付成功后，判断并重定向
redirectAfterPay = () => { redirectAfterPay = () => {
// status:0成功，1失败 // status:0成功，1失败
const status = getParam('status'); const status = getParam('status');
const type = getParam('type'); const type = getParam('type');
const oid = getParam('oid'); const oid = getParam('oid');
const {history} = this.props; const {history} = this.props;
if (status || type) { if (status || type) {
if (parseInt(status, 10) === 0) { if (parseInt(status, 10) === 0) {
// type订单类型 0普通订单 1团购 2小团 3砍价 4单集购买 5定金课定金 6定金课尾款 // type订单类型 0普通订单 1团购 2小团 3砍价 4单集购买 5定金课定金 6定金课尾款
if (parseInt(type, 10) === 2) { if (parseInt(type, 10) === 2) {
history.push(`/togroup?id=${oid}`); history.push(`/togroup?id=${oid}`);
}else if(parseInt(type, 10) === 4) { } else if (parseInt(type, 10) === 4) {
courseId && window.localStorage.setItem('payCourse', courseId); const courseId = window.localStorage.getItem('payCourse')
const courseId = window.localStorage.getItem('payCourse') courseId && window.localStorage.setItem('payCourse', courseId);
courseId && history.push(`/detail?id=${courseId}`,{oid}); courseId && history.push(`/detail?id=${courseId}`, {oid});
} else { } else {
history.push('/purchased'); history.push('/purchased');
}
} else {
Toast.info('支付异常', 2);
}
} }
} else {
Toast.info('支付异常', 2);
}
} }
}
onChange = (value) => { onChange = (value) => {
this.setState({ this.setState({
payType: value, payType: value,
checkPeriod: false, checkPeriod: false,
}); });
if (value === 2) { if (value === 2) {
this.setState({ this.setState({
huabei: true, huabei: true,
}); });
}
};
checkStaging = (item) => {
// console.log(item);
this.setState({
huabei: false,
stageNumber: item.value,
singleMoney: item.everyTotal,
periodNumber: item.stage,
checkPeriod: true,
});
} }
print = (...e) => { };
console.log(e); checkStaging = (item) => {
}; // console.log(item);
// 确定购买 this.setState({
pay = () => { huabei: false,
const {payType, orderId} = this.state; stageNumber: item.value,
if (payType === 0) { singleMoney: item.everyTotal,
this.alipayPay(orderId); periodNumber: item.stage,
} else if (payType === 1) { checkPeriod: true,
this.weixinPay(orderId) });
} }
// else { // 花呗分期暂时不做 print = (...e) => {
// this.huabeiPay(orderId) console.log(e);
// } };
// 确定购买
pay = () => {
const {payType, orderId} = this.state;
if (payType === 0) {
this.alipayPay(orderId);
} else if (payType === 1) {
this.weixinPay(orderId)
} }
// 微信支付 // else { // 花呗分期暂时不做
weixinPay = (orderId) => { // this.huabeiPay(orderId)
// 微信内部-支付 // }
if (is_weixin()) { }
window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=" + encodeURIComponent(window.location.href + "&aa=bb").toLowerCase() + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"; // 微信支付
// if(window.location.href.indexOf('aa=bb') === -1){ weixinPay = (orderId) => {
// localStorage.setItem('a', '第一次'); // 微信内部-支付
// window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=" + encodeURIComponent(window.location.href + "&aa=bb").toLowerCase() + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"; if (browser.isWeixin) {
// } window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=" + encodeURIComponent(window.location.href + "&aa=bb").toLowerCase() + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
// if(window.location.href.indexOf('aa=bb') > 0) { // if(window.location.href.indexOf('aa=bb') === -1){
// localStorage.setItem('a', '多次'); // localStorage.setItem('a', '第一次');
// let newHref = window.location.href.slice(0, window.location.href.indexOf('aa=bb')-1); // window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=" + encodeURIComponent(window.location.href + "&aa=bb").toLowerCase() + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
// window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=" + encodeURIComponent(newHref + "&aa=bb").toLowerCase() + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"; // }
// } // if(window.location.href.indexOf('aa=bb') > 0) {
// localStorage.setItem('a', '多次');
// let newHref = window.location.href.slice(0, window.location.href.indexOf('aa=bb')-1);
// window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=" + encodeURIComponent(newHref + "&aa=bb").toLowerCase() + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
// }
} else {
// 微信外部-支付
http.get(`${API['base-api']}/pay/wxpay/wap_charge/oid/${orderId}`).then((res) => {
// console.log(res);
if (res.data.errno === 0) {
window.location.href = res.data.data.url + "&redirect_url=" + encodeURIComponent(window.location.href + "&weixinpay=1").toLowerCase();
} else { } else {
// 微信外部-支付 Toast.info(res.data.msg, 2)
http.get(`${API['base-api']}/pay/wxpay/wap_charge/oid/${orderId}`).then((res) => {
// console.log(res);
if (res.data.errno === 0) {
window.location.href = res.data.data.url + "&redirect_url=" + encodeURIComponent(window.location.href + "&weixinpay=1").toLowerCase();
} else {
Toast.info(res.data.msg, 2)
}
})
} }
})
} }
// 微信内部支付 }
isweixinPay = () => { // 微信内部支付
let _this = this; isweixinPay = () => {
let weixin_code = getParam('code'); let _this = this;
if (weixin_code) { let weixin_code = getParam('code');
if (getParam('oid') === undefined) { if (weixin_code) {
return if (getParam('oid') !== undefined) {
} else { http.get(`${API['base-api']}/pay/wxpay/pub_charge/oid/${getParam('oid')}/code/${weixin_code}`).then((res) => {
http.get(`${API['base-api']}/pay/wxpay/pub_charge/oid/${getParam('oid')}/code/${weixin_code}`).then((res) => { if (res.data.errno === 0) {
if (res.data.errno === 0) { let data = res.data.data;
let data = res.data.data;
function onBridgeReady() { function onBridgeReady() {
WeixinJSBridge.invoke( WeixinJSBridge.invoke(
'getBrandWCPayRequest', { 'getBrandWCPayRequest', {
appId: data.appId, //公众号名称，由商户传入 appId: data.appId, //公众号名称，由商户传入
timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数 timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数
nonceStr: data.nonceStr, //随机串 nonceStr: data.nonceStr, //随机串
package: data.package, package: data.package,
signType: data.signType, //微信签名方式： signType: data.signType, //微信签名方式：
paySign: data.paySign //微信签名 paySign: data.paySign, //微信签名
}, },
function (res) { function (res) {
if (res.err_msg == "get_brand_wcpay_request:ok") { // eslint-disable-next-line eqeqeq
Toast.info('支付成功', 2); if (res.err_msg == "get_brand_wcpay_request:ok") {
_this.intervalPayStatus = setInterval(function () { Toast.info('支付成功', 2);
http.get(`${API['base-api']}/m/orderState/oid/${getParam('oid')}`).then(res => { _this.intervalPayStatus = setInterval(function () {
if (res.data.errno === 401) { http.get(`${API['base-api']}/m/orderState/oid/${getParam('oid')}`).then(res => {
clearInterval(_this.intervalPayStatus); if (res.data.errno === 401) {
_this.intervalPayStatus = null; clearInterval(_this.intervalPayStatus);
// 获取课程类型 _this.intervalPayStatus = null;
http.get(`${API['base-api']}/m/app_order/detail/${getParam('oid')}`).then(res => { // 获取课程类型
if (Number(res.data.data.course_type) === 2) { http.get(`${API['base-api']}/m/app_order/detail/${getParam('oid')}`).then(res => {
_this.props.history.replace(`/togroup?id=${getParam('oid')}`); if (Number(res.data.data.course_type) === 2) {
} else { _this.props.history.replace(`/togroup?id=${getParam('oid')}`);
// 跳转到已购课程 /purchased 不需要传递任何参数 } else {
_this.props.history.replace(`/purchased`); // 跳转到已购课程 /purchased 不需要传递任何参数
} _this.props.history.replace(`/purchased`);
});
}
})
}, 1000)
} else {
alert('支付失败')
}
}
)
}
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
} }
} else { });
onBridgeReady();
} }
} else { })
Toast.info(res.data.msg, 2) }, 1000)
} } else {
})
}
}
}
// 支付完成之后获取状态
payCallback = () => {
const _this = this;
// 支付回调
// 定时器轮训获取订单状态
_this.intervalPayStatus = setInterval(function () {
http.get(`${API['base-api']}/m/orderState/oid/${getParam('oid')}`).then(res => {
if (res.data.errno === 401) {
clearInterval(_this.intervalPayStatus);
_this.intervalPayStatus = null;
// 获取课程类型
http.get(`${API['base-api']}/m/app_order/detail/${getParam('oid')}`).then(res => {
if (Number(res.data.data.course_type) === 2) {
_this.props.history.replace(`/togroup?id=${getParam('oid')}`);
} else {
// 跳转到已购课程 /purchased 不需要传递任何参数
_this.props.history.replace(`/purchased`);
}
});
}
})
}, 1000)
}
onBridgeReady1 = (data) => {
let _this = this;
data = data || _this.BridgeData;
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": "wx23dac6775ac82877", //公众号名称，由商户传入
"timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数
"nonceStr": data.nonceStr, //随机串
"package": data.package,
"signType": data.signType, //微信签名方式：
"paySign": data.paySign //微信签名
},
function (res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
Toast.info('支付成功', 2);
_this.payCallback();
} else {
alert('支付失败') alert('支付失败')
} }
},
)
} }
)
} if (typeof WeixinJSBridge == "undefined") {
// 支付宝支付 if (document.addEventListener) {
alipayPay = (orderId) => { document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
http.get(`${API['base-api']}/pay/alipay/wap_charge_new/oid/${orderId}`).then((res) => { } else if (document.attachEvent) {
if (res.data.errno === 0) { document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
this.payCallback(); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
window.location = res.data.data.url; }
} else { } else {
Toast.info(res.data.msg, 2) onBridgeReady();
} }
} else {
Toast.info(res.data.msg, 2)
}
}) })
}
} }
// 花呗分期 暂时不做 }
huabeiPay = (orderId) => { // 支付完成之后获取状态
const {singleMoney, periodNumber} = this.state; payCallback = () => {
const _this = this;
// console.log('花呗分期支付'); // 支付回调
http.get(`/pay/alipay/wap_charge/oid/${orderId}/plat/{plat} /hb_num/${periodNumber}`).then(res => { // 定时器轮训获取订单状态
// console.log(res); _this.intervalPayStatus = setInterval(function () {
if (res.data.errno === 0) { http.get(`${API['base-api']}/m/orderState/oid/${getParam('oid')}`).then(res => {
window.location = res.data.data.url; if (res.data.errno === 401) {
clearInterval(_this.intervalPayStatus);
_this.intervalPayStatus = null;
// 获取课程类型
http.get(`${API['base-api']}/m/app_order/detail/${getParam('oid')}`).then(res => {
if (Number(res.data.data.course_type) === 2) {
_this.props.history.replace(`/togroup?id=${getParam('oid')}`);
} else { } else {
Toast.info(res.data.msg, 2) // 跳转到已购课程 /purchased 不需要传递任何参数
_this.props.history.replace(`/purchased`);
} }
});
}
componentDidMount() { });
this.redirectAfterPay()
let data = {}
if(this.props.location.state && this.props.location.state.group){
data = {
order_id: this.state.orderId,
type: 2
}
} else {
data = {
order_id: this.state.orderId,
}
} }
http.post(`${API['base-api']}/m/order/detail`,data).then((res) => { })
if (res.data.errno !== 200) { }, 1000)
Toast.info(res.data.msg, 2); }
return;
} onBridgeReady1 = (data) => {
const {course, pay_amount} = res.data.data; let _this = this;
const fenqiList = []; data = data || _this.BridgeData;
[1, 2, 3].map((item) => {
let obj = {}; WeixinJSBridge.invoke(
obj.value = item; 'getBrandWCPayRequest', {
if (item === 1) { "appId": "wx23dac6775ac82877", //公众号名称，由商户传入
obj.stage = 3; //期数 "timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数
obj.moneyRate = '2.30%'; // 分期费率展示 "nonceStr": data.nonceStr, //随机串
obj.rate = 0.023; // 分期费率计算 "package": data.package,
obj.periodic = (pay_amount / 3).toFixed(2); // 每期本金 "signType": data.signType, //微信签名方式：
} else if (item === 2) { "paySign": data.paySign, //微信签名
obj.stage = 6; //期数 },
obj.moneyRate = '4.50%'; // 分期费率展示 function (res) {
obj.rate = 0.045; // 分期费率计算 // eslint-disable-next-line eqeqeq
obj.periodic = (pay_amount / 6).toFixed(2); // 每期本金 if (res.err_msg == "get_brand_wcpay_request:ok") {
} else { Toast.info('支付成功', 2);
obj.stage = 12; //期数 _this.payCallback();
obj.moneyRate = '7.50%'; // 分期费率展示 } else {
obj.rate = 0.075; // 分期费率计算 alert('支付失败')
obj.periodic = (pay_amount / 9).toFixed(2); // 每期本金
}
obj.serviceFee = ((pay_amount * obj.rate) / obj.stage).toFixed(2); // 每期的手续费 = 总金额 * 费率 / 期数
obj.everyTotal = (parseFloat(obj.periodic) + parseFloat(obj.serviceFee)).toFixed(2);// 每期总费用 = 每期本金 + 每期手续费
fenqiList.push(obj);
});
// console.log(fenqiList);
// { value: 'zhifubao', qishu: '3', lilv: '2.30%', everyMoney: 300, feiyong: 2.3 },
// { value: 'weixin', qishu: '6', lilv: '4.50%', everyMoney: 150, feiyong: 4.5 },
// { value: 'huabei', qishu: '9', lilv: '7.50%', everyMoney: 100, feiyong: 7.5 },
this.setState({
pay_amount,
categoryList: course,
fenqiList,
});
});
if (getParam('is_class') === 1 || getParam('weixinpay')) {
this.payCallback()
} }
if (is_weixin()) { },
this.setState({ )
payType: 1 }
}) // 支付宝支付
this.isweixinPay() alipayPay = (orderId) => {
http.get(`${API['base-api']}/pay/alipay/wap_charge_new/oid/${orderId}`).then((res) => {
if (res.data.errno === 0) {
this.payCallback();
window.location = res.data.data.url;
} else {
Toast.info(res.data.msg, 2)
}
})
}
// 花呗分期 暂时不做
huabeiPay = (orderId) => {
const {periodNumber} = this.state;
// console.log('花呗分期支付');
http.get(`/pay/alipay/wap_charge/oid/${orderId}/plat/{plat} /hb_num/${periodNumber}`).then(res => {
// console.log(res);
if (res.data.errno === 0) {
window.location = res.data.data.url;
} else {
Toast.info(res.data.msg, 2)
}
});
}
componentDidMount() {
this.redirectAfterPay()
let data
if (this.props.location.state && this.props.location.state.group) {
data = {
order_id: this.state.orderId,
type: 2,
}
} else {
data = {
order_id: this.state.orderId,
}
}
http.post(`${API['base-api']}/m/order/detail`, data).then((res) => {
if (res.data.errno !== 200) {
Toast.info(res.data.msg, 2);
return;
}
const {course, pay_amount} = res.data.data;
const fenqiList = [];
[1, 2, 3].forEach((item) => {
let obj = {};
obj.value = item;
if (item === 1) {
obj.stage = 3; //期数
obj.moneyRate = '2.30%'; // 分期费率展示
obj.rate = 0.023; // 分期费率计算
obj.periodic = (pay_amount / 3).toFixed(2); // 每期本金
} else if (item === 2) {
obj.stage = 6; //期数
obj.moneyRate = '4.50%'; // 分期费率展示
obj.rate = 0.045; // 分期费率计算
obj.periodic = (pay_amount / 6).toFixed(2); // 每期本金
} else {
obj.stage = 12; //期数
obj.moneyRate = '7.50%'; // 分期费率展示
obj.rate = 0.075; // 分期费率计算
obj.periodic = (pay_amount / 9).toFixed(2); // 每期本金
} }
obj.serviceFee = ((pay_amount * obj.rate) / obj.stage).toFixed(2); // 每期的手续费 = 总金额 * 费率 / 期数
obj.everyTotal = (parseFloat(obj.periodic) + parseFloat(obj.serviceFee)).toFixed(2);// 每期总费用 = 每期本金 + 每期手续费
fenqiList.push(obj);
});
// console.log(fenqiList);
// { value: 'zhifubao', qishu: '3', lilv: '2.30%', everyMoney: 300, feiyong: 2.3 },
// { value: 'weixin', qishu: '6', lilv: '4.50%', everyMoney: 150, feiyong: 4.5 },
// { value: 'huabei', qishu: '9', lilv: '7.50%', everyMoney: 100, feiyong: 7.5 },
this.setState({
pay_amount,
categoryList: course,
fenqiList,
});
});
if (getParam('is_class') === 1 || getParam('weixinpay')) {
this.payCallback()
}
if (browser.isWeixin) {
this.setState({
payType: 1,
})
this.isweixinPay()
} }
}
render() { render() {
const {orderId, pay_amount, payType, checkPeriod, singleMoney, periodNumber, huabei, fenqiList, categoryList, stageNumber} = this.state; const {orderId, pay_amount, payType, checkPeriod, singleMoney, periodNumber, huabei, fenqiList, categoryList, stageNumber} = this.state;
return ( return (
<div className='pay-order'> <div className='pay-order'>
<HeaderBar title='确认支付' arrow={true}></HeaderBar> <HeaderBar title='确认支付' arrow={true}></HeaderBar>
<WhiteSpace size='sm'></WhiteSpace> <WhiteSpace size='sm'></WhiteSpace>
<div className='order-number'> <div className='order-number'>
<WingBlank> <WingBlank>
<Flex justify='between' align='center' style={{height: '44px'}}> <Flex justify='between' align='center' style={{height: '44px'}}>
<span>订单号</span> <span>订单号</span>
<span className='number'>{orderId}</span> <span className='number'>{orderId}</span>
</Flex> </Flex>
</WingBlank> </WingBlank>
</div> </div>
<WhiteSpace size='md'></WhiteSpace> <WhiteSpace size='md'></WhiteSpace>
{ {
categoryList.map((item, index) => { categoryList.map((item, index) => {
const Info = ( const Info = (
<div className="order-info"> <div className="order-info">
<p className='order-title text-overflow-one'> <p className='order-title text-overflow-one'>
<Link to={`/detail?id=${item.course_id}`}>{item.course_title}</Link> <Link to={`/detail?id=${item.course_id}`}>{item.course_title}</Link>
</p> </p>
<p className='order-content text-overflow-2'>{item.simpledescription}</p> <p className='order-content text-overflow-2'>{item.simpledescription}</p>
<p className='order-des'> <p className='order-des'>
<span className='order-newprice'>¥{item.price1}</span> <span className='order-newprice'>¥{item.price1}</span>
<span className='order-price'>¥{item.price0}</span> <span className='order-price'>¥{item.price0}</span>
</p> </p>
</div> </div>
) )
return ( return (
<VList handleClick={this.print} key={index} img={item.image_name} <VList handleClick={this.print} key={index} img={item.image_name}
id={item.course_id} id={item.course_id}
info={Info}></VList> info={Info}></VList>
) )
}) })
} }
<WhiteSpace size='md'></WhiteSpace> <WhiteSpace size='md'></WhiteSpace>
<div className='order-number'> <div className='order-number'>
<WingBlank> <WingBlank>
<Flex justify='between' align='center' style={{height: '44px'}}> <Flex justify='between' align='center' style={{height: '44px'}}>
<span>支付金额</span> <span>支付金额</span>
<span className='money'>{`￥${pay_amount}`}</span> <span className='money'>{`￥${pay_amount}`}</span>
</Flex> </Flex>
</WingBlank> </WingBlank>
</div> </div>
<WhiteSpace size='md'></WhiteSpace> <WhiteSpace size='md'></WhiteSpace>
<List renderHeader={() => '支付方式'} className='pay-type-list'> <List renderHeader={() => '支付方式'} className='pay-type-list'>
{mockData.map(i => ( {mockData.map(i => (
<RadioItem <RadioItem
thumb={<i className={`iconfont ${i.icon} ${payType === i.value ? 'checked' : ''}`}></i>} thumb={<i className={`iconfont ${i.icon} ${payType === i.value ? 'checked' : ''}`}></i>}
key={i.value} key={i.value}
checked={payType === i.value} checked={payType === i.value}
onChange={() => this.onChange(i.value)}> onChange={() => this.onChange(i.value)}>
{/* {i.label} */} {/* {i.label} */}
{ {
i.value === 2 ? ( i.value === 2 ? (
<Flex direction='column' align='start' style={{width: '100%', marginTop: '6px'}}> <Flex direction='column' align='start' style={{width: '100%', marginTop: '6px'}}>
<Flex direction='row' justify='between' <Flex direction='row' justify='between'
style={{width: '100%', paddingRight: '30px'}}> style={{width: '100%', paddingRight: '30px'}}>
<span style={{color: '#555555', fontSize: '14px'}}>{i.label}</span> <span style={{color: '#555555', fontSize: '14px'}}>{i.label}</span>
{ {
checkPeriod ? ( checkPeriod ? (
<span style={{ <span style={{
color: '#333333', color: '#333333',
fontSize: '12px' fontSize: '12px',
}}>{`${singleMoney}元 × ${periodNumber}期`}</span> }}>{`${singleMoney}元 × ${periodNumber}期`}</span>
) : null ) : null
} }
</Flex> </Flex>
<Flex justify='start'> <Flex justify='start'>
<span style={{color: '#999999', fontSize: '12px'}}>支付上限受限于您的花呗额度</span> <span style={{color: '#999999', fontSize: '12px'}}>支付上限受限于您的花呗额度</span>
</Flex> </Flex>
</Flex> </Flex>
) : (i.label) ) : (i.label)
} }
</RadioItem> </RadioItem>
))} ))}
</List> </List>
<div className='pay-tip'>请在15分钟内完成支付，否则届时系统将关闭该订单。</div> <div className='pay-tip'>请在15分钟内完成支付，否则届时系统将关闭该订单。</div>
<div className='pay-button' onClick={this.pay}>确认支付</div> <div className='pay-button' onClick={this.pay}>确认支付</div>
{ {
huabei ? ( huabei ? (
<div className='check-staging'> <div className='check-staging'>
<div className='container'> <div className='container'>
<p className='check-title'>请选择分期</p> <p className='check-title'>请选择分期</p>
{fenqiList.map(i => ( {fenqiList.map(i => (
<RadioItem <RadioItem
key={i.value} key={i.value}
checked={stageNumber === i.value} checked={stageNumber === i.value}
onChange={() => this.checkStaging(i)}> onChange={() => this.checkStaging(i)}>
{`${i.everyTotal}元 × ${i.stage}期`} {`${i.everyTotal}元 × ${i.stage}期`}
<List.Item.Brief>{`手续费${i.serviceFee}元/期，费率${i.moneyRate}`}</List.Item.Brief> <List.Item.Brief>{`手续费${i.serviceFee}元/期，费率${i.moneyRate}`}</List.Item.Brief>
</RadioItem> </RadioItem>
))} ))}
</div> </div>
</div>
) : null
}
</div> </div>
) ) : null
} }
</div>
)
}
} }
src/components/scholarship/index.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Tabs, WhiteSpace, List, Flex, WingBlank, Modal, ListView, Toast } from 'antd-mobile'; import { Tabs, WhiteSpace, List, Flex, WingBlank, Modal, ListView, Toast } from 'antd-mobile';
import './scholarship.scss'; import './scholarship.scss';
import { is_weixin, http } from "src/utils"; import { browser, http } from "src/utils";
import CategoryItem from './CategoryItem/CategoryItem.js'; import CategoryItem from './CategoryItem/CategoryItem.js';
import SortItem from './SortItem/SortItem.js'; import SortItem from './SortItem/SortItem.js';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import OpenApp from 'src/common/CallApp'; import OpenApp from 'src/common/CallApp';
import {getCourses} from './../detail/actions';
const Item = List.Item; const Item = List.Item;
@connect(state => ({ @connect(state => ({
user: state.user user: state.user,
})) }))
class _Scholarship extends Component { class _Scholarship extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
un_affirm: 0, un_affirm: 0,
account: 0.00, account: 0.00,
drawCashHtml: false, drawCashHtml: false,
drawCashWechat: false, drawCashWechat: false,
waitMoneyDetail: false, waitMoneyDetail: false,
codeSrc: '', codeSrc: '',
dataSource: new ListView.DataSource({ dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2, rowHasChanged: (row1, row2) => row1 !== row2,
}), }),
page: 1, page: 1,
useBodyScroll: true, useBodyScroll: true,
isLoading: false, isLoading: false,
showNoData: false, showNoData: false,
hasMore: true, hasMore: true,
tab: 0, tab: 0,
}
this.downImage = React.createRef();
this.tabIndex = 0;
this.searchObject = {};
this.rData = [];
} }
tabList = [ this.downImage = React.createRef();
{ title: '课程列表', sub: '1' }, this.tabIndex = 0;
{ title: '分销榜单', sub: '2' }, this.searchObject = {};
]; this.rData = [];
// 返回上一页 }
goback = () => {
this.props.history.push('/my'); tabList = [
{title: '课程列表', sub: '1'},
{title: '分销榜单', sub: '2'},
];
// 返回上一页
goback = () => {
this.props.history.push('/my');
}
// 关闭弹框
closeModal = () => {
this.setState({
drawCashWechat: false,
drawCashHtml: false,
waitMoneyDetail: false,
});
};
// 显示代收款提示modal
showDetail = () => {
this.setState({
waitMoneyDetail: true,
});
}
// 提现按钮 根据是否在微信环境中显示提示
drawCash = () => {
if (browser.isWeixin) {
this.setState({
drawCashWechat: true,
});
} else {
this.setState({
drawCashHtml: true,
});
} }
// 关闭弹框 const {hasError, data = {}} = this.props.user;
closeModal = () => { if (hasError) {
this.setState({ Toast.info("请登录提现！", undefined, undefined, false);
drawCashWechat: false, return;
drawCashHtml: false,
waitMoneyDetail: false,
});
};
// 显示代收款提示modal
showDetail = () => {
this.setState({
waitMoneyDetail: true,
});
} }
// 提现按钮 根据是否在微信环境中显示提示
drawCash = () => { http.get(`${API['base-api']}/wx/user_temporary_qrcode/${data.uid}`).then(res => {
if (is_weixin()) { if (res.data.errno === 0) {
this.setState({ if (browser.isWeixin) {
drawCashWechat: true this.setState({
}); codeSrc: res.data.data.qr_image,
});
} else { } else {
this.setState({ this.setState({
drawCashHtml: true codeSrc: res.data.data.qr_image,
}); });
}
const {hasError, data = {}} = this.props.user;
if(hasError) {
Toast.info("请登录提现！", undefined, undefined, false);
return;
} }
} else {
Toast.info(res.data.data.msg, 2);
}
http.get(`${API['base-api']}/wx/user_temporary_qrcode/${data.uid}`).then(res => { });
if(res.data.errno === 0) {
if (is_weixin()) {
this.setState({
codeSrc: res.data.data.qr_image
});
} else {
this.setState({
codeSrc: res.data.data.qr_image
});
}
}else{
Toast.info(res.data.data.msg, 2);
}
});
};
// 去登陆
toLogin = () => {
this.props.history.push('/passport');
};
// 跳转到规则说明页
showDocument = () => {
this.props.history.push('/document');
};
// 保存二维码 TODO 失败
saveImage = () => {
};
// 分销赚钱
shareCategory = (course_id, money) => {
const {hasError, data = {}} = this.props.user;
if (hasError) {
Toast.info("请登录后分享！", undefined, undefined, false);
return;
}
http.post(`${API.home}/dist/createCode`, {course_id}).then((res) => {
if (res.data.code === 200) {
this.props.history.push(`/shareposter?courseId=${course_id}&dist_first=${money}&uid=${data.uid}&dist_code=${res.data.data.code}`)
}
})
};
onEndReached = () => {
if (this.state.isLoading || !this.state.hasMore) {
return;
}
}; this.setState({
// 去登陆 isLoading: true,
toLogin = () => { });
this.props.history.push('/passport');
};
// 跳转到规则说明页
showDocument = () => {
this.props.history.push('/document');
};
// 保存二维码 TODO 失败
saveImage = () => {
}; let apiUrl = `${API.home}/m/dist/course_list`;
// 分销赚钱
shareCategory = (course_id, money) => {
const {hasError, data = {}} = this.props.user;
if(hasError) {
Toast.info("请登录后分享！", undefined, undefined, false);
return;
}
http.post(`${API.home}/dist/createCode`, {course_id}).then((res) => {
if (res.data.code === 200) {
this.props.history.push(`/shareposter?courseId=${course_id}&dist_first=${money}&uid=${data.uid}&dist_code=${res.data.data.code}`)
}
})
};
onEndReached = () => {
if (this.state.isLoading || !this.state.hasMore) {
return;
}
this.setState({ if (this.tabIndex === 1) {
isLoading: true, apiUrl = `${API.home}/m/dist/commission_ranking_list`
}); }
let apiUrl = `${API.home}/m/dist/course_list`;
if (this.tabIndex === 1) { apiUrl = `${API.home}/m/dist/commission_ranking_list` }; http.get(apiUrl).then((res) => {
if (res.data.code !== 200) {
this.setState({isLoading: false});
return;
}
http.get(apiUrl).then((res) => { let newData = [];
if (res.data.code !== 200) { if (this.tabIndex === 0) {
this.setState({ isLoading: false }); if (!res.data.data.list || res.data.data.list.length === 0) {
return; this.setState({isLoading: false, hasMore: false, showNoData: this.searchObject.page === 1});
} return;
}
newData = res.data.data.list;
} else {
if (!res.data.data || res.data.data.length === 0) {
this.setState({isLoading: false, hasMore: false, showNoData: this.searchObject.page === 1});
return;
}
newData = res.data.data;
}
let newData = []; this.searchObject.page++;
if(this.tabIndex === 0) {
if (!res.data.data.list || res.data.data.list.length === 0) {
this.setState({ isLoading: false, hasMore: false, showNoData: this.searchObject.page === 1 });
return;
}
newData = res.data.data.list;
} else {
if (!res.data.data || res.data.data.length === 0) {
this.setState({ isLoading: false, hasMore: false, showNoData: this.searchObject.page === 1 });
return;
}
newData = res.data.data;
}
this.searchObject.page++; this.rData = [...this.rData, ...newData];
this.rData = [...this.rData, ...newData]; this.setState({
dataSource: this.state.dataSource.cloneWithRows(this.rData),
isLoading: false,
// hasMore: newData.length >= 10,
hasMore: false,
});
})
.catch(() => {
this.setState({isLoading: false});
});
}
this.setState({ componentDidMount() {
dataSource: this.state.dataSource.cloneWithRows(this.rData), if (this.state.useBodyScroll) {
isLoading: false, document.body.style.overflow = 'auto';
// hasMore: newData.length >= 10, } else {
hasMore: false document.body.style.overflow = 'hidden';
});
})
.catch(() => {
this.setState({ isLoading: false });
});
} }
componentDidMount() { http.get(`${API.home}/m/user_account`).then(res => {
if (this.state.useBodyScroll) { if (res.data.code === 200) {
document.body.style.overflow = 'auto'; this.setState({
} else { ...res.data.data,
document.body.style.overflow = 'hidden';
}
http.get(`${API.home}/m/user_account`).then(res=>{
if(res.data.code === 200) {
this.setState({
...res.data.data
});
}
}); });
this.onEndReached(); }
} });
this.onEndReached();
}
toCourseDetail = (id) => { toCourseDetail = (id) => {
const { dispatch, history } = this.props; const {history} = this.props;
// dispatch(getCourses(id, () => { history.push(`/detail?id=${id}`)
history.push(`/detail?id=${id}`) }
// }));
}
render() { render() {
const row = ( const row = (
rowData, rowData,
rowID rowID,
) => { ) => {
return ( return (
<CategoryItem <CategoryItem
{...rowData} {...rowData}
key={rowID} key={rowID}
share={this.shareCategory} share={this.shareCategory}
toDetail={this.toCourseDetail} toDetail={this.toCourseDetail}
/> />
); );
}; };
const row1 = ( const row1 = (
rowData, rowData,
rowID rowID,
) => { ) => {
return <SortItem {...rowData} sortNum={this.rData.indexOf(rowData) + 1} key={rowID} />; return <SortItem {...rowData} sortNum={this.rData.indexOf(rowData) + 1} key={rowID}/>;
}; };
const separator = (sectionID, rowID) => ( /* eslint-disable-next-line no-unused-vars*/
<div key={`${sectionID}-${rowID}`}> const separator = (sectionID, rowID) => (
<WhiteSpace /> <div key={`${sectionID}-${rowID}`}>
</div> <WhiteSpace/>
); </div>
const { );
un_affirm, const {
account, un_affirm,
drawCashHtml, account,
drawCashWechat, drawCashHtml,
waitMoneyDetail, drawCashWechat,
codeSrc, waitMoneyDetail,
} = this.state; codeSrc,
const { hasError } = this.props.user; } = this.state;
return ( const {hasError} = this.props.user;
<div className={'scholarship'}> return (
<div className={'account-container'}> <div className={'scholarship'}>
<WhiteSpace></WhiteSpace> <div className={'account-container'}>
<WingBlank> <WhiteSpace></WhiteSpace>
<Flex justify='between'> <WingBlank>
<i className={'iconfont iconiconfront-68 back'} onClick={this.goback}></i> <Flex justify='between'>
<span className={"common-ft-15"}>账户资金</span> <i className={'iconfont iconiconfront-68 back'} onClick={this.goback}></i>
<i className={'iconfont iconiconfront-22 tip-info'} onClick={this.showDocument}></i> <span className={"common-ft-15"}>账户资金</span>
</Flex> <i className={'iconfont iconiconfront-22 tip-info'} onClick={this.showDocument}></i>
</WingBlank> </Flex>
<WhiteSpace></WhiteSpace> </WingBlank>
<WingBlank> <WhiteSpace></WhiteSpace>
<WingBlank>
<span className={'common-ft-14'}> <span className={'common-ft-14'}>
可提现余额： 可提现余额：
</span> </span>
</WingBlank> </WingBlank>
<WhiteSpace></WhiteSpace> <WhiteSpace></WhiteSpace>
{ {
hasError ? ( hasError ? (
<> <>
<WhiteSpace></WhiteSpace> <WhiteSpace></WhiteSpace>
<Flex justify='center'> <Flex justify='center'>
<div className={'login-check'} onClick={this.toLogin}>登录后查看</div> <div className={'login-check'} onClick={this.toLogin}>登录后查看</div>
</Flex> </Flex>
</> </>
) : ( ) : (
<> <>
<Flex justify='center' align='baseline' className={"drawCash"} > <Flex justify='center' align='baseline' className={"drawCash"}>
<span className={'common-ft-25'}>{account}</span> <span className={'common-ft-25'}>{account}</span>
<span className={'common-ft-15'}>元</span> <span className={'common-ft-15'}>元</span>
</Flex> </Flex>
<WhiteSpace></WhiteSpace> <WhiteSpace></WhiteSpace>
<Flex justify='center'> <Flex justify='center'>
<div className={'draw-cash'} onClick={this.drawCash}>提现</div> <div className={'draw-cash'} onClick={this.drawCash}>提现</div>
</Flex> </Flex>
</> </>
) )
} }
</div> </div>
<div className={'over-am-list-item'} > <div className={'over-am-list-item'}>
{ {
hasError ? (null) : ( hasError ? null : <>
<> <div>
<div> <List>
<List> <Item
<Item arrow="horizontal"
arrow="horizontal" style={{padding: '0 0 0 15px'}}
style={{ padding: '0 0 0 15px' }} onClick={this.showDetail}
onClick={this.showDetail}
>
<Flex direction='row' justify='between'>
<span className={'common-ft-15'}>待确认金额</span>
<span className={'money'}>{un_affirm}</span>
</Flex>
</Item>
</List>
</div>
<WhiteSpace></WhiteSpace>
</>
)
}
<div style={{ backgroundColor: '#FFF' }}>
<Tabs tabs={this.tabList}
initialPage={0}
swipeable={false}
// onChange={this.changeTab}
onChange={(tab, index) => {
this.tabIndex = index;
this.pageIndex = 1;
this.rData = [];
this.searchObject.page = 1;
this.setState(
{
isLoading: false,
hasMore: true,
dataSource: this.state.dataSource.cloneWithRows(this.rData),
tab: index,
},
() => {
this.onEndReached();
}
);
}}
> >
</Tabs> <Flex direction='row' justify='between'>
{ <span className={'common-ft-15'}>待确认金额</span>
this.state.tab === 0 ? ( <span className={'money'}>{un_affirm}</span>
<div style={{ marginTop: '15px', backgroundColor: '#FFF' }}> </Flex>
{ </Item>
this.state.dataSource._cachedRowCount !== 0 ? ( </List>
<ListView
useBodyScroll={this.state.useBodyScroll}
dataSource={this.state.dataSource}
renderRow={row}
renderBodyComponent={() => <div />}
onEndReached={this.onEndReached}
pageSize={4}
onEndReachedThreshold={100}
/>
) : (
null
)
}
</div>
) : null
}
{
this.state.tab === 1 ? (
<div>
<Flex justify='center' align='center' className={'runtimeList'}>榜单实时更新，仅显示前50名</Flex>
{
this.state.dataSource._cachedRowCount !== 0 ? (
<ListView
useBodyScroll={this.state.useBodyScroll}
dataSource={this.state.dataSource}
renderRow={row1}
renderBodyComponent={() => <div />}
onEndReached={this.onEndReached}
pageSize={4}
onEndReachedThreshold={100}
/>
) : (
null
)
}
</div>
) : null
}
</div>
</div> </div>
<WhiteSpace></WhiteSpace>
</>
}
<div style={{backgroundColor: '#FFF'}}>
<Tabs tabs={this.tabList}
initialPage={0}
swipeable={false}
// onChange={this.changeTab}
onChange={(tab, index) => {
this.tabIndex = index;
this.pageIndex = 1;
this.rData = [];
this.searchObject.page = 1;
this.setState(
{
isLoading: false,
hasMore: true,
dataSource: this.state.dataSource.cloneWithRows(this.rData),
tab: index,
},
() => {
this.onEndReached();
},
);
}}
>
</Tabs>
{
this.state.tab === 0 ? (
<div style={{marginTop: '15px', backgroundColor: '#FFF'}}>
{
this.state.dataSource._cachedRowCount !== 0 ? (
<ListView
useBodyScroll={this.state.useBodyScroll}
dataSource={this.state.dataSource}
renderRow={row}
renderBodyComponent={() => <div/>}
onEndReached={this.onEndReached}
pageSize={4}
onEndReachedThreshold={100}
/>
) : null
}
<Modal </div>
visible={drawCashWechat} ) : null
transparent }
maskClosable={true}
onClose={this.closeModal} {
title="提现" this.state.tab === 1 ? (
footer={[{ text: '确认', onPress: () => { this.closeModal() } }]} <div>
className={'wechatModal'} <Flex justify='center' align='center' className={'runtimeList'}>榜单实时更新，仅显示前50名</Flex>
style={{ width: '300px' }} {
> this.state.dataSource._cachedRowCount !== 0 ? (
<p style={{ fontSize: '13px', color: '#666666' }}> <ListView
提现金额将通过微信零钱转账给您，识别下方二维码，关注【七月在线】服务号申请提现。 useBodyScroll={this.state.useBodyScroll}
</p> dataSource={this.state.dataSource}
<WhiteSpace size='sm'></WhiteSpace> renderRow={row1}
<Flex justify='center'> renderBodyComponent={() => <div/>}
<img src={codeSrc} style={{ width: '90px', height: '90px', backgroundColor: '#666' }} alt="二维码" /> onEndReached={this.onEndReached}
</Flex> pageSize={4}
</Modal> onEndReachedThreshold={100}
/>
<Modal ) : null
visible={drawCashHtml} }
transparent </div>
maskClosable={true} ) : null
onClose={this.closeModal} }
style={{ width: '300px'}} </div>
> </div>
<p style={{color: '#333333', fontSize: '16px', textAlign: 'center'}}>提现</p>
<WhiteSpace size='lg'></WhiteSpace> <Modal
<p style={{ fontSize: '12px', color: '#666666', textAlign: 'left' }}> visible={drawCashWechat}
提现金额将通过微信零钱转账给您，请微信扫码关注【七月在线】服务号后申请提现。 transparent
</p> maskClosable={true}
<WhiteSpace size='lg'></WhiteSpace> onClose={this.closeModal}
<Flex justify='center'> title="提现"
<img src={codeSrc} style={{ width: '90px', height: '90px' }} alt="二维码" /> footer={[{
</Flex> text: '确认', onPress: () => {
<WhiteSpace size='sm'></WhiteSpace> this.closeModal()
<Flex justify='center' style={{color: '#333333', fontSize: '12px'}}>长按二维码保存到相册</Flex> },
<i onClick={this.closeModal} className='iconfont iconiconfront-2' style={{zIndex: 99, fontSize: '40px', color: '#fff', position: "fixed", top: '70%', left: '50%', transform: 'translateX(-50%)'}}></i> }]}
</Modal> className={'wechatModal'}
style={{width: '300px'}}
<Modal >
visible={waitMoneyDetail} <p style={{fontSize: '13px', color: '#666666'}}>
transparent 提现金额将通过微信零钱转账给您，识别下方二维码，关注【七月在线】服务号申请提现。
maskClosable={true} </p>
onClose={this.closeModal} <WhiteSpace size='sm'></WhiteSpace>
title="待确认金额" <Flex justify='center'>
footer={[ <img src={codeSrc} style={{width: '90px', height: '90px', backgroundColor: '#666'}} alt="二维码"/>
{ text: '知道了', onPress: () => { this.closeModal() } } </Flex>
]} </Modal>
style={{ width: '300px' }}
> <Modal
<p style={{ fontSize: '13px', color: '#666666', textAlign: 'left', lineHeight: '20px' }}> visible={drawCashHtml}
1.尚未开课的直播课程，用户购买后归属您的佣金会暂时存放在『待确认金额』中。 transparent
</p> maskClosable={true}
<p style={{ fontSize: '13px', color: '#666666', textAlign: 'left', lineHeight: '20px' }}> onClose={this.closeModal}
2.该课程正式开课时，如果用户没有退款，对应的订单金额会自动转入您的账号余额，否则该佣金会自动收回。 style={{width: '300px'}}
</p> >
<WhiteSpace></WhiteSpace> <p style={{color: '#333333', fontSize: '16px', textAlign: 'center'}}>提现</p>
<Flex style={{ fontSize: '14px', color: '#0099FF' }} justify='center'> <WhiteSpace size='lg'></WhiteSpace>
<span style={{color: "#333", marginRight: '10px'}}>待确认订单详情可</span> <p style={{fontSize: '12px', color: '#666666', textAlign: 'left'}}>
<OpenApp className='toApp' text='前往APP查看'/> 提现金额将通过微信零钱转账给您，请微信扫码关注【七月在线】服务号后申请提现。
</Flex> </p>
</Modal> <WhiteSpace size='lg'></WhiteSpace>
</div> <Flex justify='center'>
) <img src={codeSrc} style={{width: '90px', height: '90px'}} alt="二维码"/>
} </Flex>
<WhiteSpace size='sm'></WhiteSpace>
<Flex justify='center' style={{color: '#333333', fontSize: '12px'}}>长按二维码保存到相册</Flex>
<i onClick={this.closeModal} className='iconfont iconiconfront-2' style={{
zIndex: 99,
fontSize: '40px',
color: '#fff',
position: "fixed",
top: '70%',
left: '50%',
transform: 'translateX(-50%)',
}}></i>
</Modal>
<Modal
visible={waitMoneyDetail}
transparent
maskClosable={true}
onClose={this.closeModal}
title="待确认金额"
footer={[
{
text: '知道了', onPress: () => {
this.closeModal()
},
},
]}
style={{width: '300px'}}
>
<p style={{fontSize: '13px', color: '#666666', textAlign: 'left', lineHeight: '20px'}}>
1.尚未开课的直播课程，用户购买后归属您的佣金会暂时存放在『待确认金额』中。
</p>
<p style={{fontSize: '13px', color: '#666666', textAlign: 'left', lineHeight: '20px'}}>
2.该课程正式开课时，如果用户没有退款，对应的订单金额会自动转入您的账号余额，否则该佣金会自动收回。
</p>
<WhiteSpace></WhiteSpace>
<Flex style={{fontSize: '14px', color: '#0099FF'}} justify='center'>
<span style={{color: "#333", marginRight: '10px'}}>待确认订单详情可</span>
<OpenApp className='toApp' text='前往APP查看'/>
</Flex>
</Modal>
</div>
)
}
} }
// const mapStateToProps = (state) => { // const mapStateToProps = (state) => {
// return { // return {
// user: { // user: {
......
src/components/ts-test/index.tsx
import React, {Component, useState, useEffect, useLayoutEffect, useRef} from 'react'; import React, { useState} from 'react';
import {withRouter, RouteComponentProps} from 'react-router-dom' import {withRouter} from 'react-router-dom'
const TSTest: React.FC = () => { const TSTest: React.FC = () => {
const [count, setCount] = useState(0); const [count, setCount] = useState(0);
...@@ -23,14 +23,4 @@ const TSTest: React.FC = () => { ...@@ -23,14 +23,4 @@ const TSTest: React.FC = () => {
); );
} }
function Message({text}: { text: string }) {
const [message, setMessage] = useState<string | null>(null)
useEffect(() => {
setMessage(text)
})
return <span>{message}</span>
}
export default withRouter(TSTest); export default withRouter(TSTest);
\ No newline at end of file
src/setupProxy.js deleted 100755 → 0
const config = require('./utils/proxy-config')
const proxy = require('http-proxy-middleware')
module.exports = function (app) {
Object.keys(config).forEach(item => {
app.use(proxy(
config[item]['development'], {
target: config[item]['test'],
changeOrigin: true,
// secure: false,
pathRewrite: {
[`^${config[item]['development']}`]: ''
},
// cookieDomainRewrite: 'localhost',
...config[item]['proxy']
}
))
})
};
\ No newline at end of file
src/utils/index.js
export const getParam = (key, str) => { export const getParam = (key, str) => {
const _s = str ? str : location.href; const _s = str ? str : window.location.href;
const re = new RegExp(`(?:\\?|#|&)(${key})=([^=&#\\?]+)`, 'ig'); const re = new RegExp(`[?#&](${key})=([^=&#?]+)`, 'ig');
let found; let found = re.exec(_s);
return (found = re.exec(_s)) ? found[2] : null; return found ? found[2] : null;
} }
const html = content => ({ const html = content => ({
...@@ -23,8 +23,8 @@ function getTimestamp(msec) { ...@@ -23,8 +23,8 @@ function getTimestamp(msec) {
} }
function loadScript(src, cb) { function loadScript(src, cb) {
var head = document.head || document.getElementsByTagName('head')[0] let head = document.head || document.getElementsByTagName('head')[0]
var script = document.createElement('script') let script = document.createElement('script')
cb = cb || function () { cb = cb || function () {
} }
...@@ -52,7 +52,7 @@ function initCaptcha(cb) { ...@@ -52,7 +52,7 @@ function initCaptcha(cb) {
if (window.initNECaptcha) { if (window.initNECaptcha) {
cb() cb()
} else { } else {
const url = '//cstaticdun.126.net/load.min.js' + '?t=' + getTimestamp(1 * 60 * 1000) const url = '//cstaticdun.126.net/load.min.js?t=' + getTimestamp(60 * 1000)
loadScript(url, cb) loadScript(url, cb)
} }
...@@ -62,26 +62,17 @@ function initCaptchaNC(cb) { ...@@ -62,26 +62,17 @@ function initCaptchaNC(cb) {
if (window.NoCaptcha && typeof window.NoCaptcha.init === 'function') { if (window.NoCaptcha && typeof window.NoCaptcha.init === 'function') {
cb() cb()
} else { } else {
const url = '//g.alicdn.com/sd/nch5/index.js' + '?t=' + getTimestamp(1 * 60 * 1000) const url = '//g.alicdn.com/sd/nch5/index.js?t=' + getTimestamp(60 * 1000)
loadScript(url, cb) loadScript(url, cb)
} }
} }
export const is_weixin = () => {
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
return true;
}
return false;
}
function validateTel(tel) { function validateTel(tel) {
return /^1[3-9](\d{9})$/.test(tel) return /^1[3-9](\d{9})$/.test(tel)
} }
function validateEmail(email) { function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; let re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase()); return re.test(String(email).toLowerCase());
} }
...@@ -98,7 +89,7 @@ const browser = (function () { ...@@ -98,7 +89,7 @@ const browser = (function () {
})() })()
const isValidUrl = (str) => { const isValidUrl = (str) => {
return /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/.test(str) return /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&/=]*)/.test(str)
} }
......
src/utils/proxy-config.js deleted 100755 → 0
const config = {
home: {
development: '/local-api',
test: 'http://fast-test.julyedu.com',
pre: 'https://fast-pre.julyedu.com',
production: 'https://fast.julyedu.com',
proxy: {}
},
'search-api': {
development: '/search-api',
test: 'https://search.julyedu.com',
pre: 'https://search.julyedu.com',
production: 'https://search.julyedu.com',
proxy: {}
},
'passport-api': {
development: '/passport-api',
test: 'http://passport-test.julyedu.com',
pre: 'https://passport-pre.julyedu.com',
production: 'http://passport.julyedu.com',
proxy: {}
},
'base-api': {
development: '/base-api',
test: 'http://api-test.julyedu.com',
pre: 'https://api-pre.julyedu.com',
production: 'https://api.julyedu.com',
proxy: {
secure: false
}
},
}
module.exports = config
\ No newline at end of file
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