352 lines
13 KiB
JavaScript
352 lines
13 KiB
JavaScript
import Taro, { Component } from '@tarojs/taro'
|
||
import { View, Text, Image, Swiper, SwiperItem } from '@tarojs/components'
|
||
|
||
import { AtTabs, AtTabsPane, AtSegmentedControl, AtIcon, Picker } from 'taro-ui'
|
||
import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
|
||
|
||
import LoginService from '../../util/LoginService'
|
||
import URL from '../../serviceAPI.config'
|
||
import './goods.scss'
|
||
import { getGlobalStorage } from '../../util/getSetStoage';
|
||
import { showLoading } from '../../util/hideShowLoading';
|
||
import onClickValueService from '../../util/onClickValueService'
|
||
|
||
class Goods extends Component {
|
||
|
||
config = {
|
||
navigationBarTitleText: '商品详情'
|
||
}
|
||
constructor() {
|
||
super(...arguments)
|
||
this.state = {
|
||
current: 0, // 当前大类评论区
|
||
subCurrent: 0, // 当前小类评论区
|
||
selector: ['0', '1', '2', '3'], // 数量或者规格选择
|
||
selectorChecked: '0', // 已选择的数量或规格
|
||
productImagesUrl: '', // 图片地址
|
||
productName: '',// 商品名字
|
||
productDes: '',// 商品简介
|
||
oldPirce: '',// 原价
|
||
specialPrice: '',//促销价
|
||
productType: '',//商品类型
|
||
serviceArea: '',//服务区域
|
||
monthSold: '',//月销量
|
||
totalSold: '',//总销量
|
||
browsingCount: '',// 浏览数
|
||
shopId: '',
|
||
actived: 0,// 默认tab
|
||
subActived:0,//默认sub-tab
|
||
}
|
||
}
|
||
|
||
// 商品详情api
|
||
getGoodDescription() {
|
||
Taro.request({
|
||
url: URL.GetShopItemDetail,
|
||
method: 'POST',
|
||
dataType: 'json',
|
||
data: {
|
||
goodsID: escape(this.$router.params.id).replace('+', '%2B'),
|
||
},
|
||
header: {
|
||
'content-type': 'application/x-www-form-urlencoded',
|
||
'Cookie': 'PFWSSS=' + getGlobalStorage('session_id'),
|
||
}
|
||
})
|
||
.then(res => {
|
||
Taro.hideLoading()
|
||
console.log('商品详情：', res)
|
||
if (res.data.err_msg === "success") {
|
||
this.setState({
|
||
productImagesUrl: res.data.goods.goods_pic,
|
||
productName: res.data.goods.goods_name,
|
||
productDes: res.data.goods.goods_profiles,
|
||
oldPirce: res.data.goods.goods_org_price,
|
||
specialPrice: res.data.goods.goods_price,
|
||
productType: res.data.goods.goods_type_name,
|
||
serviceArea: res.data.goodsRegionName[0],
|
||
monthSold: res.data.goods.month_sales,
|
||
totalSold: res.data.goods.sales_volume,
|
||
browsingCount: res.data.goods.browse_times,
|
||
shopId: res.data.goods.shop_id
|
||
})
|
||
|
||
} else {
|
||
Taro.showToast({
|
||
title: res.data.err_msg,
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
}
|
||
}
|
||
)
|
||
}
|
||
|
||
// 大类评论区方法
|
||
handleClick(value) {
|
||
this.setState({
|
||
current: value
|
||
})
|
||
}
|
||
// 小磊评论区方法
|
||
onClick(value) {
|
||
this.setState({
|
||
subCurrent: value
|
||
})
|
||
}
|
||
// 去其他页面
|
||
goShopPage() {
|
||
Taro.navigateTo({
|
||
url: '/pages/shop/shop?id=' + this.state.shopId
|
||
})
|
||
}
|
||
// 收藏商品
|
||
saveItem() {
|
||
if (!getGlobalStorage('userInfo').user_id) {
|
||
LoginService()
|
||
return
|
||
}
|
||
Taro.showToast({
|
||
title: '收藏成功',
|
||
icon: 'success',
|
||
duration: 1500
|
||
})
|
||
}
|
||
//添加到购物车
|
||
addToCart() {
|
||
if (!getGlobalStorage('userInfo').user_id) {
|
||
LoginService()
|
||
return
|
||
}
|
||
Taro.showToast({
|
||
title: '添加成功',
|
||
icon: 'success',
|
||
duration: 1500
|
||
})
|
||
|
||
}
|
||
clickTabHandler(e) {
|
||
let value = onClickValueService(e)
|
||
this.setState({
|
||
actived: value
|
||
})
|
||
}
|
||
clickSubTabHandler(e) {
|
||
let value = onClickValueService(e)
|
||
this.setState({
|
||
subActived: value
|
||
})
|
||
}
|
||
// 数量或者规格方法
|
||
onChange = e => {
|
||
this.setState({
|
||
selectorChecked: this.state.selector[e.detail.value]
|
||
})
|
||
}
|
||
|
||
componentDidMount() {
|
||
showLoading({
|
||
title: '加载中'
|
||
})
|
||
this.getGoodDescription()
|
||
}
|
||
componentWillReceiveProps(nextProps) {
|
||
console.log(this.props, nextProps)
|
||
}
|
||
|
||
componentWillUnmount() { }
|
||
|
||
componentDidShow() { }
|
||
|
||
componentDidHide() { }
|
||
|
||
render() {
|
||
const { actived,subActived } = this.state
|
||
const mainTabList = [{ title: '宝贝详情' }, { title: '全部评价' }, { title: '猜你喜欢' }]
|
||
const subTabList = [{ title: '全部' }, { title: '好评' }, { title: '中评' }, { title: '差评' }, { title: '公开' }, { title: '匿名' }]
|
||
const tabArrayElement = mainTabList.map((item, index) => {
|
||
return <View className={actived === index ? 'tab actived' : 'tab'} key={index} onClick={this.clickTabHandler.bind(this, index)}>
|
||
{item.title}
|
||
</View>
|
||
})
|
||
const subTabArrayElement = subTabList.map((item, index) => {
|
||
return <View className={subActived === index ? 'sub-tab sub-actived' : 'sub-tab'} key={index} onClick={this.clickSubTabHandler.bind(this, index)}>
|
||
{item.title}
|
||
</View>
|
||
})
|
||
|
||
|
||
// const subTabList = [{ title: '全部' }, { title: '好评' }, { title: '差评' }, { title: '公开' }, { title: '匿名' }]
|
||
const itemPicsBannerElementArray = this.state.productImagesUrl.map((item, index) => {
|
||
return <SwiperItem key={index} >
|
||
|
||
<Image mode='aspectFit' src={URL.Base + item.file_path} style='max-width: 100%; height:100%;' />
|
||
|
||
</SwiperItem >
|
||
})
|
||
|
||
const itemDescriptionPicsElementArray = this.state.productImagesUrl.map((item, index) => {
|
||
return <View className='description-img' key={index}>
|
||
<Image mode='widthFix' src={URL.Base + item.file_path} style='width: 100%; max-height:100%;' />
|
||
|
||
</View>
|
||
|
||
})
|
||
return (
|
||
<View className='gooods=container'>
|
||
<View className='img-box'>
|
||
{/* <Image className='img' src={URL.Base + this.state.productImagesUrl}></Image> */}
|
||
<Swiper
|
||
className='swipper'
|
||
style='height:100%;'
|
||
indicatorColor='#999'
|
||
indicatorActiveColor='#333'
|
||
hotizontal
|
||
circular
|
||
indicatorDots
|
||
>
|
||
{itemPicsBannerElementArray}
|
||
|
||
</Swiper>
|
||
|
||
</View>
|
||
<View className='title-box'>
|
||
<View className='main-title'>
|
||
{this.state.productName}
|
||
</View>
|
||
<View className='subtitle-box'>
|
||
{this.state.productDes}
|
||
</View>
|
||
</View>
|
||
<View className='price-box'>
|
||
<View className='org-box'>
|
||
<Text className='title'>原价</Text>
|
||
<Text className='price'>￥{this.state.oldPirce}</Text>
|
||
</View>
|
||
<View className='spe-price'>
|
||
<Text className='title'>促销价</Text>
|
||
<Text className='price'>￥{this.state.specialPrice}</Text>
|
||
</View>
|
||
</View>
|
||
<View className='info-box'>
|
||
<View className='type'>
|
||
<Text className='title'>商品类型</Text>
|
||
<Text className='desc'>{this.state.productType}</Text>
|
||
|
||
</View>
|
||
<View className='district'>
|
||
<Text className='title'>服务区域</Text>
|
||
<Text className='desc'>{this.state.serviceArea}</Text>
|
||
</View>
|
||
</View>
|
||
<View className='counter-box'>
|
||
<View className='month-sold'>
|
||
<Text className='title'>月销量</Text>
|
||
<Text className='amount'>{this.state.monthSold}</Text>
|
||
</View>
|
||
<View className='total-sold'>
|
||
<Text className='title'>总销量</Text>
|
||
<Text className='amount'>{this.state.totalSold}</Text>
|
||
</View>
|
||
<View className='browsing-amount'>
|
||
<Text className='title'>浏览量</Text>
|
||
<Text className='amount'>{this.state.browsingCount}</Text>
|
||
|
||
</View>
|
||
</View>
|
||
<View className='standard-box'>
|
||
{/* 规格或者数量 */}
|
||
<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='tab-wrapper'>
|
||
<View className='tabs'>
|
||
{tabArrayElement}
|
||
|
||
</View>
|
||
<View className='tab-details'>
|
||
{actived === 0 && <View className='first-tab' style='background-color: #FAFBFC;' >
|
||
|
||
<View className='description-title'>商品细节：</View>
|
||
<View className='description-img'>
|
||
{itemDescriptionPicsElementArray}
|
||
|
||
</View>
|
||
|
||
</View>
|
||
}
|
||
{actived===1&& <View className='second-tab'>
|
||
<View className='tab-header'> {subTabArrayElement}</View>
|
||
|
||
|
||
{
|
||
subActived===0&&<View className='sub-tab-details'>全部</View>
|
||
}
|
||
{
|
||
subActived===1&&<View className='sub-tab-details'>好评</View>
|
||
}
|
||
{
|
||
subActived===2&&<View className='sub-tab-details'>中评</View>
|
||
}
|
||
{
|
||
subActived===3&&<View className='sub-tab-details'>差评</View>
|
||
}
|
||
{
|
||
subActived===4&&<View className='sub-tab-details'>公开</View>
|
||
}
|
||
{
|
||
subActived===5&&<View className='sub-tab-details'>匿名</View>
|
||
}
|
||
|
||
|
||
|
||
|
||
</View>}
|
||
{actived === 2 && <View className='third-tab' >标签页三的内容</View>}
|
||
</View>
|
||
</View>
|
||
|
||
|
||
<CopyrightComponent></CopyrightComponent>
|
||
<View className='gap' style='height:150rpx'>
|
||
</View>
|
||
|
||
<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>
|
||
|
||
<Text className='title'>收藏商品</Text>
|
||
</View>
|
||
<View className='add-cart' onClick={this.addToCart.bind(this)}>
|
||
|
||
<AtIcon className='icon' value='shopping-cart' size='12' color='white'></AtIcon>
|
||
|
||
|
||
|
||
<Text className='title'> 加入购物车</Text>
|
||
</View>
|
||
</View>
|
||
|
||
</View>
|
||
</View >
|
||
)
|
||
}
|
||
}
|
||
|
||
export default Goods
|