index.js
3.28 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import Taro, {Component} from '@tarojs/taro';
import {View, Text, Button} from '@tarojs/components';
import { connect } from '@tarojs/redux';
import { showSizeBox } from '../../actions/productDetail'
import './index.scss';
@connect(({ productDetail }) => ({
productDetail
}), (dispatch) => ({
showSizeBox (isShow) {
dispatch(showSizeBox(isShow))
}
}))
export default class SelectSize extends Component {
constructor(props) {
super(props);
this.state = {
curSelect: '',
selectedskup: 0,
canBuy: true,
curPrice: '',
hide: false
};
}
static defaultProps = {
sizeList: []
}
onChangeSize(item) {
this.setState({
curSelect: item.size_id,
selectedskup: item.skup,
curPrice: item.sell_least_price,
canBuy: item.storage_num > 0
});
}
onClickMask() {
let {showSizeBox} = this.props;
showSizeBox(false);
}
onClickBuy() {
let {product_id} = this.props;
this.state.canBuy && Taro.navigateTo({
url: `/pages/order/orderConfirm/orderConfirm?skup=${this.state.selectedskup}&&product_id=${product_id}`,
})
}
render() {
let {sizeList} = this.props;
let curSelect = this.state.curSelect;
let sizeLength = sizeList.length;
let sizeStyle = 'size-item';
if (sizeLength <= 5) {
sizeStyle = 'size-item top-border';
}
return (
<View className="size-area">
<View className="mask" onClick={this.onClickMask}></View>
<View className="select-size">
<Text className="title">选择尺码</Text>
{
sizeLength > 0 &&
<View className="size-list">
{
sizeList.map(item => {
return (
<View key={item.size_id} className={curSelect === item.size_id ? `actived ${sizeStyle}` : sizeStyle} onClick={this.onChangeSize.bind(this, item)}>
<View className={item.storage_num > 0 ? 'size' : 'size gray'}>{item.size_name}</View>
{
curSelect !== item.size_id &&
<View className={item.storage_num > 0 ? 'price' : 'price gray'}>{item.storage_num > 0 ? `¥${item.sell_least_price}` : '-'}</View>
}
</View>
)
})
}
</View>
}
<Button className={this.state.canBuy ? 'buy-btn' : 'buy-btn disabled'} hover-class='none' onClick={this.onClickBuy}>
购买
{
this.state.canBuy && this.state.curPrice &&
<Text className="price">¥{this.state.curPrice}</Text>
}
</Button>
</View>
</View>
)
}
}