react-app-shell
Version:
react打包脚本和example, 这里的版本请忽略
227 lines (215 loc) • 7.92 kB
JavaScript
import React, {PureComponent} from 'react';
import {Picker, List} from 'antd-mobile';
import {DocumentTitle, InfoModal} from '../../components';
import {EXCHANGE_MODAL_KEY} from '../../constants';
import {ExchangeService} from '../../service';
import {appConfig} from '../../config';
import head from '../../public/images/exchange/exchange_head.png';
import styles from './index.less';
// 约课链接
const bookingUrl = appConfig.domain.mobileDomain.concat('/user/special');
/**
* 主课兑换专题课
*/
export default class Exchange extends PureComponent {
state = {
studentId: '',
exchangeNum: '',
modalKey: '',
errorMsg: '',
studentName: '',
visible: false
};
handleChangeState = (key, e) => {
const {value} = e.target;
this.setState({
[key]: value
});
};
/**
* 兑换按钮点击
*/
handleWillExchange = () => {
const {studentId, exchangeNum} = this.state;
let modalKey = EXCHANGE_MODAL_KEY.RECONFIRM_MODAL;
const numReg = /^[0-9]*$/;
let errorMsg = '';
if (!exchangeNum) {
modalKey = EXCHANGE_MODAL_KEY.ERROR_MODAL;
errorMsg = '请选择需要专题课课时数量';
}
if (!numReg.test(studentId)) {
modalKey = EXCHANGE_MODAL_KEY.ERROR_MODAL;
errorMsg = '学员id格式错误';
}
if (!studentId) {
modalKey = EXCHANGE_MODAL_KEY.ERROR_MODAL;
errorMsg = '请输入学员id';
}
if (errorMsg) {
this.setState({
modalKey,
errorMsg
});
return;
}
ExchangeService.getStudentMsg(studentId).then(({studentName}) => {
this.setState({
modalKey,
studentName
});
}).catch(error => {
console.error(error);
this.setState({
modalKey: EXCHANGE_MODAL_KEY.ERROR_MODAL,
errorMsg: error.msg || '系统异常，请稍后重试'
});
});
};
/**
* 兑换
*/
handleExchange = () => {
const {studentId, exchangeNum} = this.state;
this.handleModalHide();
ExchangeService.exchangeSpecial(studentId, exchangeNum).then(() => {
this.setState({
modalKey: EXCHANGE_MODAL_KEY.SUCCESS_MODAL
});
}).catch(error => {
console.error(error);
this.setState({
modalKey: EXCHANGE_MODAL_KEY.ERROR_MODAL,
errorMsg: error.msg || '系统异常，请稍后重试'
});
});
};
/**
* 兑换专题课跳转
*/
handlebookSpecial = (url) => {
window.location.href = bookingUrl;
};
/**
* 弹窗渲染
*/
renderModal = () => {
const {studentName, studentId, exchangeNum, modalKey, errorMsg} = this.state;
switch (modalKey) {
case EXCHANGE_MODAL_KEY.RECONFIRM_MODAL: {
return (
<InfoModal
okText={'确定'}
cancelText={'取消'}
okBtnStyle={{
background: '#FED501',
}}
onOk={this.handleExchange}
onCancel={this.handleModalHide}>
<div className={styles.modalMsg}>
<p>{`您确定使用${exchangeNum}节主课兑换${exchangeNum}节专题课给${studentName || '**'}(${studentId})吗？`}</p>
</div>
</InfoModal>
);
}
case EXCHANGE_MODAL_KEY.SUCCESS_MODAL: {
return (
<InfoModal
cancelVisible={false}
okText={'马上约专题课'}
okBtnStyle={{
background: '#FED501',
}}
onCancel={this.handlebookSpecial}>
<div className={styles.modalMsg}>
<p className={styles.modalTitle}>兑换成功</p>
<p>{`恭喜您获得了${exchangeNum}节专题课，快去约课吧`}</p>
</div>
</InfoModal>
);
}
case EXCHANGE_MODAL_KEY.ERROR_MODAL: {
return (
<InfoModal
cancelVisible={false}
okText={'我知道了'}
okBtnStyle={{
background: '#FED501',
}}
onCancel={this.handleModalHide}>
<div className={styles.modalMsg}>
<p>{errorMsg}</p>
</div>
</InfoModal>
);
}
default: {
return null;
}
}
};
/**
* 弹窗消失
*/
handleModalHide = () => {
this.setState({
modalKey: '',
errorMsg: ''
});
};
render() {
const {studentId, exchangeNum, visible} = this.state;
const exchangeSelect = [{
label: 1,
value: 1
}, {
label: 2,
value: 2
}];
return (
<div className={styles.wrapper}>
<DocumentTitle title="主课课时兑换专题课"/>
<header>
<img src={head}/>
</header>
<div className={styles.content}>
<div className={styles.main}>
<div className={styles.title}>主课课时兑换专题课</div>
<p>（内部亲友专用）</p>
<div>
<input
placeholder="请输入学生id" value={studentId}
onChange={this.handleChangeState.bind(null, 'studentId')}
/>
<Picker
title=""
extra="请选择需要专题课课时数量"
visible={visible}
cols={1}
data={exchangeSelect}
value={exchangeNum}
className={styles.exchangeSelect}
onChange={(v) => this.setState({exchangeNum: v})}
onOk={() => this.setState({visible: false})}
onDismiss={() => this.setState({visible: false})}
>
<List.Item onClick={() => this.setState({visible: true})}/>
</Picker>
<button onClick={this.handleWillExchange}>确定</button>
</div>
</div>
<div className={styles.rules}>
<div className={styles.title}>兑换规则</div>
<div className={styles.rulesDetail}>
<p>1.本次兑换仅针对于参加了专题课团购未成团的团长。</p>
<p>2.本次兑换最多兑换2节专题课</p>
<p>3.兑换一节专题课将消耗一节主课</p>
<p>4.兑换完成后即可生效，可前往个人中心查看兑换结果</p>
</div>
</div>
</div>
{this.renderModal()}
</div>
);
}
}