226 lines
9.1 KiB
JavaScript
226 lines
9.1 KiB
JavaScript
import Taro, { Component } from '@tarojs/taro'
|
||
import { View, Button, Text, Image } from '@tarojs/components'
|
||
import { AtSearchBar, AtTabs, AtTabsPane, AtSegmentedControl, AtIcon, AtToast ,Picker } from 'taro-ui'
|
||
import copyrightComponent from '../../component/copyrightComponent/copyrightComponent'
|
||
import SearchBarComponent from '../../component/searchBarComponent/searchBarComponent'
|
||
|
||
import URL from '../../serviceAPI.config'
|
||
|
||
|
||
import './goods.scss'
|
||
|
||
|
||
|
||
class Goods extends Component {
|
||
|
||
config = {
|
||
navigationBarTitleText: '商品'
|
||
}
|
||
constructor() {
|
||
super(...arguments)
|
||
this.state = {
|
||
value:'',
|
||
current: 0,
|
||
subCurrent:0,
|
||
isOpened:false,
|
||
selector: ['0', '1', '2', '3'],
|
||
selectorChecked: '0',
|
||
}}
|
||
|
||
|
||
|
||
handleClick(value) {
|
||
this.setState({
|
||
current: value
|
||
})
|
||
}
|
||
onClick(value) {
|
||
this.setState({
|
||
subCurrent: value
|
||
})
|
||
}
|
||
goShopPage(){
|
||
Taro.navigateTo({
|
||
url: '/pages/shop/shop'
|
||
})
|
||
}
|
||
saveItem(){
|
||
this.setState({isOpened:true})
|
||
}
|
||
onChange = e => {
|
||
this.setState({
|
||
selectorChecked: this.state.selector[e.detail.value]
|
||
})
|
||
}
|
||
componentDidMount() {
|
||
|
||
}
|
||
componentWillReceiveProps(nextProps) {
|
||
console.log(this.props, nextProps)
|
||
}
|
||
|
||
componentWillUnmount() { }
|
||
|
||
componentDidShow() { }
|
||
|
||
componentDidHide() { }
|
||
|
||
render() {
|
||
const mainTabList = [{ title: '宝贝详情' }, { title: '全部评价' }, { title: '猜你喜欢' }]
|
||
const subTabList = [{ title: '全部' }, { title: '好评' }, { title: '差评' }, { title: '公开' }, { title: '匿名' }]
|
||
|
||
return (
|
||
<View className='gooods=container'>
|
||
<SearchBarComponent></SearchBarComponent>
|
||
<View className='img-box'>
|
||
<Image className='img' src={URL.Base + 'Uploads/zone/user_1041/201808/thumb/e10a0bfea09a3078a800af8054bc80ce_400X400.jpg'}></Image>
|
||
|
||
</View>
|
||
<View className='title-box'>
|
||
<View className='main-title'>
|
||
11
|
||
</View>
|
||
<View className='subtitle-box'>
|
||
11
|
||
</View>
|
||
</View>
|
||
<View className='price-box'>
|
||
<View className='org-box'>
|
||
<Text className='title'>原价</Text>
|
||
<Text className='price'>￥11</Text>
|
||
</View>
|
||
<View className='spe-price'>
|
||
<Text className='title'>促销价</Text>
|
||
<Text className='price'>￥11</Text>
|
||
</View>
|
||
</View>
|
||
<View className='info-box'>
|
||
<View className='type'>
|
||
<Text className='title'>商品类型</Text>
|
||
<Text className='desc'>设计师商品</Text>
|
||
|
||
</View>
|
||
<View className='district'>
|
||
<Text className='title'>服务区域</Text>
|
||
<Text className='desc'>中国/福建省(全省)</Text>
|
||
</View>
|
||
</View>
|
||
<View className='counter-box'>
|
||
<View className='month-sold'>
|
||
<Text className='title'>月销量</Text>
|
||
<Text className='amount'>0</Text>
|
||
</View>
|
||
<View className='total-sold'>
|
||
<Text className='title'>总销量</Text>
|
||
<Text className='amount'>0</Text>
|
||
</View>
|
||
<View className='browsing-amount'>
|
||
<Text className='title'>浏览量</Text>
|
||
<Text className='amount'>13</Text>
|
||
|
||
</View>
|
||
</View>
|
||
<View className='standard-box'>
|
||
{/* <View className='title'>
|
||
可选规格
|
||
</View>
|
||
<View className='more'>
|
||
>点击
|
||
</View> */}
|
||
<Picker mode='selector' range={this.state.selector} onChange={this.onChange}>
|
||
<View className='picker'>
|
||
<View className='title'>
|
||
可选规格:
|
||
</View>
|
||
<View className='more'>
|
||
{this.state.selectorChecked}
|
||
</View>
|
||
|
||
</View>
|
||
</Picker>
|
||
</View>
|
||
<View className='details-box'>
|
||
<AtTabs color='#FF9500' className='alltabs' animated={false} current={this.state.current} tabList={mainTabList} onClick={this.handleClick.bind(this)}>
|
||
<AtTabsPane current={this.state.current} index={0} >
|
||
<View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;' >商品细节：</View>
|
||
</AtTabsPane>
|
||
<AtTabsPane current={this.state.current} index={1}>
|
||
<View style='padding: 1px 0px 100px;background-color: #FAFBFC;text-align: center;'>
|
||
{ /*子标签Tab*/}
|
||
<AtSegmentedControl selectedColor='#FF9500'
|
||
values={['全部', '好评', '中评', '差评', '公开','匿名']}
|
||
onClick={this.onClick.bind(this)}
|
||
current={this.state.subCurrent}
|
||
/>
|
||
{
|
||
this.state.subCurrent === 0
|
||
? <View className='tab-content'>
|
||
<Text className='title'>全部</Text>
|
||
</View>
|
||
: null
|
||
}
|
||
{
|
||
this.state.subCurrent === 1
|
||
? <View className='tab-content'>好评</View>
|
||
: null
|
||
}
|
||
{
|
||
this.state.subCurrent === 2
|
||
? <View className='tab-content'>中评</View>
|
||
: null
|
||
}
|
||
{
|
||
this.state.subCurrent === 3
|
||
? <View className='tab-content'>差评</View>
|
||
: null
|
||
}
|
||
{
|
||
this.state.subCurrent === 4
|
||
? <View className='tab-content'>公开</View>
|
||
: null
|
||
}
|
||
{
|
||
this.state.subCurrent === 5
|
||
? <View className='tab-content'>匿名</View>
|
||
: null
|
||
}
|
||
|
||
</View>
|
||
</AtTabsPane>
|
||
<AtTabsPane current={this.state.current} index={2}>
|
||
<View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页三的内容</View>
|
||
</AtTabsPane>
|
||
</AtTabs>
|
||
|
||
</View>
|
||
|
||
<copyrightComponent></copyrightComponent>
|
||
|
||
<View className='shop-bottom-box' >
|
||
<View className='shop-bottom-nav'>
|
||
<View className='to-shop' onClick={this.goShopPage.bind(this)}>
|
||
<AtIcon className='icon' value='home' size='12' color='black'></AtIcon>
|
||
<Text className='title'>进店</Text>
|
||
</View>
|
||
<View className='collection' onClick={this.saveItem.bind(this)}>
|
||
<AtIcon className='icon' value='heart' size='12' color='white'></AtIcon>
|
||
<AtToast
|
||
isOpened={this.state.isOpened}
|
||
duration={1000}
|
||
text='收藏成功'
|
||
></AtToast>
|
||
<Text className='title'>收藏商品</Text>
|
||
</View>
|
||
<View className='add-cart'>
|
||
加入购物车
|
||
</View>
|
||
</View>
|
||
|
||
</View>
|
||
</View>
|
||
)
|
||
}
|
||
}
|
||
|
||
export default Goods
|