import Taro, {Component} from '@tarojs/taro'; import {View, Text, Button} from '@tarojs/components'; import { connect } from '@tarojs/redux'; import {productDetail as productDetailModel} from '../../models'; 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 || 0, canBuy: item.skup > 0, curLowestPrice: item.lowest_price || item.least_price || 0, }); } onClickMask() { let {showSizeBox} = this.props; showSizeBox(false); } onClickBuy(canBuy) { if (!canBuy) { return; } productDetailModel.createPaymentinfo(this.state.selectedskup).then(data => { if (data && data.code === 200) { let {product_id, onConfirmSelect} = this.props; onConfirmSelect && onConfirmSelect(this.state.selectedskup); this.state.canBuy && Taro.navigateTo({ url: `/pages/order/orderConfirm/orderConfirm?skup=${this.state.selectedskup}&&product_id=${product_id}`, }) } else { Taro.showToast({ title: data.message, icon: 'none' }) } }).catch(error => { Taro.showToast({ title: error.message, icon: 'none' }) }) } 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, index) => { let price; if (item.skup > 0) { price = `¥${item.lowest_price || item.least_price}`; } else { price = item.lowest_price || item.least_price; price = price ? `¥${price}` : '-'; } let rightStyle = '' let topStyle = '' if (index < 5) { topStyle = 'top-border' } if (index !== 0 && (index + 1) % 5 === 0) { rightStyle = 'right-border' } else if (index === sizeLength - 1) { rightStyle = 'right-border' } return ( <View key={item.size_id} className={curSelect === item.size_id ? `actived ${sizeStyle}` : `${sizeStyle} ${topStyle} ${rightStyle}`} 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> } { this.state.canBuy && this.state.curPrice > this.state.curLowestPrice ? (<View className='btn-group'> <Button className='buy-btn btn-col' hover-class='none' onClick={this.onClickBuy.bind(this, this.state.canBuy)} data-can-buy={this.state.canBuy}> 现货购买 { this.state.canBuy && this.state.curPrice && <Text className="price"> ¥{this.state.curPrice}</Text> } </Button> {this.state.canBuy && <Button className='dowload-btn btn-col' hover-class='none'> <Text>下载有货app体验</Text> <Text className="price"> 更低价 ¥{this.state.curLowestPrice}</Text> </Button>} </View>) : <Button className='buy-btn disabled' hover-class='none' onClick={this.onClickBuy.bind(this, this.state.canBuy)} data-can-buy={this.state.canBuy}> { this.state.curPrice > this.state.curLowestPrice ? '下载有货app体验更低价 ¥' + this.state.curLowestPrice : '现货购买' } </Button> } </View> </View> ) } }