@ozo/react-rock
Version:
React 移动端开发脚手架，基于CRA3，通用、开箱即用。
460 lines (449 loc) • 21.1 kB
JavaScript
import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import {
List,
ListItem,
ListItemSecondaryAction,
ListItemText,
ListItemAvatar,
Typography,
Divider,
Input,
Button,
IconButton,
} from '@material-ui/core';
import { number, divide } from 'mathjs';
import GoodsPrice from '@/uni-components/GoodsPrice';
import PayInfoItem from '@/pages/uni/confirmOrder/components/PayInfoItem';
import PayTypeItem from '@/pages/uni/confirmOrder/components/PayTypeItem';
import PriceView from '@/pages/uni/confirmOrder/components/PriceView';
import SMSCodeItem from '@/pages/uni/confirmOrder/components/SMSCode';
import Icon from '@/base-components/IconCaec';
import NetImage from '@/components/NetImage';
import styles from './index.module.scss';
import placeholder from '@/assets/imgs/uni-default-120-120.jpg';
('uniConfirmOrderStore')
class ListSecondary extends Component {
constructor(props) {
super(props);
this.state = {
payType: '1',
// 使用现金方式付款总额
useCashAmount: 2000,
// 使用积分方式付款总额
usePointsAmount: 200000,
// 积分-现金兑换比例
exchangeRate: 100,
// 是否支持混合支付：Y积分，N现金，M混合
isPointsPay: 'M',
customPayCash: '',
customPayPoint: '',
// U币
uniCorn: '30000',
};
}
handleClick = () => {
alert('跳转到...');
};
handlePayTypeChange = (value) => {
this.setState({ payType: value });
};
handlePayPointsChange = (value) => {
const { usePointsAmount, exchangeRate } = this.state;
const tCash = divide(number(usePointsAmount) - (number(value) || 0), number(exchangeRate));
this.setState({
customPayPoint: value,
customPayCash: tCash >= 0 ? tCash : 0,
});
};
/**
* @description 输入短信验证码
* @param {string} value 短信验证码
*/
handleSMSCodeChange = (value) => {
this.props.uniConfirmOrderStore.setSMSCode(value);
};
/**
* @description 发送短信验证码
* @returns {promise} 调用短信验证码接口
*/
sendSMSCode = () => {
return this.props.uniConfirmOrderStore.sendSMSCode();
};
render() {
const { useCashAmount = 0, exchangeRate, customPayCash = 0, customPayPoint = 0 } = this.state;
const { uniConfirmOrderStore } = this.props;
return (
<>
<List>
<h4>图文列表</h4>
{[0, 1, 2].map((value, index) => {
const labelId = `checkbox-list-secondary-label-${value}`;
return (
<ListItem key={value}>
<ListItemAvatar className={`${styles.goodImage} border`} style={{ marginRight: 10 }}>
<NetImage
lazyLoad={false}
url={
index === 0
? 'https://mall.changan.com.cn/goods-img/img/otherimg/pic/2019/03/18/14/1552892197402_200_200.jpg'
: ''
}
convertHeight={70}
placeholder={index === 1 ? placeholder : ''}
/>
</ListItemAvatar>
<ListItemText
id={labelId}
primary={
<span
style={{
display: 'flex',
minWidth: '100%',
justifyContent: 'space-between',
}}
>
<Typography
variant="body1"
component="span"
gutterBottom
style={{ maxWidth: '14em' }}
>
强生豪享陶瓷单强生豪享陶瓷单车膜（深/浅）
</Typography>
<Typography variant="body1" component="span">
x1
</Typography>
</span>
}
secondary={
<span style={{ display: 'flex', flexDirection: 'column' }}>
<Typography variant="body2" component="span" style={{ maxWidth: '14em' }}>
邮费：全国包邮；型号：常规；规格：1件装
</Typography>
<Typography variant="body2" component="span" color="primary">
<Icon icon="icon-coin" size={9} />
<span> 260000（¥2600.00）</span>
</Typography>
</span>
}
/>
</ListItem>
);
})}
</List>
<List>
<h4>文字列表</h4>
<ListItem>
<ListItemText
primary={
<Typography variant="body1" gutterBottom>
订单支付完成
</Typography>
}
secondary={'2020-06-22 09:44:28'}
/>
<ListItemSecondaryAction>
<IconButton onClick={this.handleClick}>
<Icon icon="arrow-right" size={11} />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
<Divider />
<ListItem>
<ListItemText
primary={
<>
<Typography variant="body1" style={{ marginBottom: '4px' }}>
张花花 13889999666
</Typography>
<Typography variant="body1">重庆市江北区全区金融街·融景中心</Typography>
</>
}
/>
</ListItem>
<Divider />
<ListItem>
<ListItemText
primary={
<>
<div style={{ marginBottom: '4px' }}>张花花 13889999666</div>
<div variant="body1">
重庆市重庆市重庆市重庆市重庆市重庆市重庆市江北区全区金融街·融景中心
</div>
</>
}
/>
</ListItem>
<Divider />
<ListItem>
<ListItemText
primary={
<Input
placeholder="买家留言：文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字"
disableUnderline
multiline
fullWidth
inputProps={{ 'aria-label': '买家留言' }}
/>
}
/>
</ListItem>
<Divider />
<ListItem>
<ListItemText primary={<Typography variant="h3">已选 全国包邮 1件</Typography>} />
<ListItemSecondaryAction>
<IconButton onClick={this.handleClick}>
<Icon icon="arrow-right" size={11} />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
<Divider />
<ListItem>
<ListItemText
primary={
<>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: '3px',
}}
>
<span style={{ marginRight: '15px' }}>张花花</span>
<div>
<span style={{ marginRight: '5px' }}>13889999666</span>
<Typography variant="body2" component="span" color="primary">
默认
</Typography>
</div>
</div>
<Typography variant="caption">
收货地址：重庆市重庆市江北区全区金融街·融景中心B 座23楼 400000
</Typography>
</>
}
/>
<ListItemSecondaryAction>
<IconButton onClick={this.handleClick}>
<Icon icon="arrow-right" size={11} />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
<Divider />
<ListItem>
<ListItemText
primary={
<div
style={{
height: '16px',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<div
style={{
display: 'flex',
alignItems: 'center',
flexWrap: 'nowrap',
}}
>
<span style={{ flexShrink: 0, marginRight: '15px' }}>短信验证码</span>
<Input
placeholder="请输入验证码"
disableUnderline
inputProps={{ 'aria-label': '短信验证码' }}
/>
</div>
<Button variant="outlined" size="small">
发送验证码
</Button>
</div>
}
/>
</ListItem>
<Divider />
<ListItem>
<ListItemText
primary={
<div
style={{
height: '16px',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<div
style={{
display: 'flex',
alignItems: 'center',
flexWrap: 'nowrap',
}}
>
<Icon icon="icon-coin" size={10} className={styles.icon} />
<input className={`${styles.payInput}`} placeholder={'请输入使用积分'} />
</div>
</div>
}
/>
</ListItem>
<Divider />
<ListItem>
<ListItemText
primary={
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div>
<span> 支付积分：</span>
<Icon icon="icon-coin" size={9} />
<span> 260000</span>
</div>
<div>U币支付</div>
</div>
}
secondary={'2020-06-22 09:44:28'}
/>
</ListItem>
<Divider />
<PayInfoItem
data={{
priceAmount: 2000,
useCashAmount: 1800,
discountAmount: 200,
exchangeRate: 100,
isPointsPay: 'Y',
}}
/>
<Divider />
<PayInfoItem
data={{
priceAmount: 2000,
useCashAmount: useCashAmount,
discountAmount: 200,
exchangeRate: exchangeRate,
isPointsPay: 'N',
}}
/>
<Divider />
<PayInfoItem
data={{
priceAmount: 2000,
useCashAmount: 2000,
discountAmount: 0,
exchangeRate: exchangeRate,
isPointsPay: 'M',
}}
/>
<Divider />
<h4>支付方式：M，账户积分 > 0，商品实付 > 0，账户积分 < 实付积分</h4>
<PayTypeItem
store={uniConfirmOrderStore}
data={this.state}
onInputChange={this.handlePayPointsChange}
onChange={this.handlePayTypeChange}
/>
<Divider />
<h4>支付方式：M，账户积分 > 0，商品实付 > 0，账户积分 >= 实付积分</h4>
<PayTypeItem
name="PayTypeItem2"
store={uniConfirmOrderStore}
data={{
payType: '1',
priceAmount: 20,
useCashAmount: 20,
usePointsAmount: 20 * exchangeRate,
discountAmount: 20,
isPointsPay: 'M',
uniCorn: '30000',
}}
/>
<Divider />
<h4>支付方式：M，账户积分：0，商品实付 > 0</h4>
<PayTypeItem
name="PayTypeItem3"
store={uniConfirmOrderStore}
data={{
payType: '1',
priceAmount: 20,
useCashAmount: 20,
usePointsAmount: 20 * exchangeRate,
discountAmount: 20,
isPointsPay: 'M',
uniCorn: 0,
}}
/>
<Divider />
<h4>支付方式：M，账户积分 > 0，商品实付：0</h4>
<PayTypeItem
name="PayTypeItem4"
store={uniConfirmOrderStore}
data={{
payType: '1',
priceAmount: 0,
useCashAmount: 0,
usePointsAmount: 0,
discountAmount: 0,
exchangeRate: exchangeRate,
isPointsPay: 'M',
uniCorn: '30000',
}}
onInputChange={this.handlePayPointsChange}
onChange={this.handlePayTypeChange}
/>
<Divider />
{/* 积分商品发送验证码 */}
<SMSCodeItem
service={this.sendSMSCode}
placeholder="请输入验证码"
countDown={60}
value={uniConfirmOrderStore.SMSCode}
onChange={this.handleSMSCodeChange}
initInputDisabled={true}
/>
<Divider />
<ListItem>
<GoodsPrice price={100} exchangeRate={exchangeRate} isPointsPay={'Y'} />
</ListItem>
<ListItem>
<GoodsPrice price={200} exchangeRate={exchangeRate} isPointsPay={'N'} />
</ListItem>
<ListItem>
<GoodsPrice price={300} exchangeRate={exchangeRate} isPointsPay={'M'} />
</ListItem>
<Divider />
<h4>价格、积分组合显示：</h4>
<ListItem>
<PriceView points={20000} />
</ListItem>
<ListItem>
<PriceView price={200.55555488} />
</ListItem>
<ListItem>
<PriceView price={15} points={30.15} iconSize={12} />
</ListItem>
<Divider />
<h4>0的显示 (showZero 为 false 则不显示)：</h4>
<ListItem>
<PriceView points={0} />
</ListItem>
<ListItem>
<PriceView price={0} />
</ListItem>
<ListItem>
<PriceView price={0} points={1} iconSize={12} showZero={false} />
</ListItem>
<ListItem>
<PriceView price={11.1111} points={0} iconSize={12} showZero={false} />
</ListItem>
<ListItem>
<PriceView price={0} points={0} iconSize={12} showZero={false} />
</ListItem>
</List>
</>
);
}
}
export default ListSecondary;