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: false, curPrice: '', hide: false }; } static defaultProps = { sizeList: [] } onChangeSize(item) { this.setState({ curSelect: item.size_id, selectedskup: item.skup, curPrice: item.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}`, }) } onTouchMove() { } 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" catchtouchmove = {this.onTouchMove.bind(this)}> <View className="mask" onClick={this.onClickMask}></View> <View className="select-size"> <Text className="title">选择尺码</Text> { sizeLength > 0 && <View className="size-list"> { sizeList.map(item => { let price; if (item.storage_num > 0) { price = `¥${item.least_price}`; } else { price = '-'; } 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'}>{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> ) } }