448 lines
17 KiB
JavaScript
448 lines
17 KiB
JavaScript
import Taro, { Component } from '@tarojs/taro'
|
|
import { View, Text, Button } from '@tarojs/components'
|
|
import { AtInput, AtTextarea, AtImagePicker } from 'taro-ui'
|
|
import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
|
|
import AliPictureUploadComponent from '../../component/aliPictureUploadComponent/aliPictureUploadComponent'
|
|
|
|
import ShopTypeInteractionComp from '../../component/shopTypeInteractionComp/shopTypeInteractionComp'
|
|
import AliShopTypeInteraction from '../../component/AliShopTypeInteraction/AliShopTypeInteraction'
|
|
import GoodsTypeInteractionComp from '../../component/goodsTypeInteractionComp/goodsTypeInteractionComp'
|
|
import AliGoodsTypeInteraction from '../../component/aliGoodsTypeInteraction/aliGoodsTypeInteraction'
|
|
|
|
import LoginService from '../../util/LoginService'
|
|
import URL from '../../serviceAPI.config'
|
|
|
|
|
|
import './goodsPublish.scss'
|
|
import loginExpired from '../../util/loginExpired';
|
|
import { getGlobalStorage } from '../../util/getSetStoage';
|
|
import { showLoading } from '../../util/hideShowLoading';
|
|
import { isUserShopOwner } from '../../util/checkLogin';
|
|
import platformChecker from '../../util/plaformChecker';
|
|
|
|
class GoodsPublish extends Component {
|
|
|
|
config = {
|
|
navigationBarTitleText: '商品发布'
|
|
}
|
|
constructor() {
|
|
super(...arguments)
|
|
this.state = {
|
|
|
|
shopTypeSelected: { name: '选择店铺类型', id: '' },//已选的店铺分类
|
|
goodsTypeSelected: { name: '选择商品分类', id: '' },// 已选的商品分类
|
|
productName: '',
|
|
productPrice: '',
|
|
productUnit: '',
|
|
productDescript: '',
|
|
pickerImageUrl: [], // 上传的图片
|
|
ImagesInfo: [],// 后台传回来的图片信息
|
|
shopCategoryList: [],
|
|
productCategoryList: [],
|
|
isPublishAndAdd: false,// 是否点击发布新增按钮
|
|
isPublish: false, // 时候点击发布按钮
|
|
}
|
|
}
|
|
|
|
// 发布商品api
|
|
uploadGoods({ goods_name = "test2",
|
|
goods_price = "1.00",
|
|
goods_unit = "1", goods_profiles = "test2",
|
|
class_id = "10103",
|
|
shop_class_id = "1930" }) {
|
|
|
|
// 上传图片的参数
|
|
const uploadProductGoodFileParams = []
|
|
if (this.state.ImagesInfo.length) {
|
|
for (let i = 0; i < this.state.ImagesInfo.length; i++) {
|
|
if (i === 0) {
|
|
uploadProductGoodFileParams.push({
|
|
file_id: this.state.ImagesInfo[i].file_id,
|
|
file_type: 1,
|
|
if_cover: 1,
|
|
file_sort: 1
|
|
})
|
|
} else {
|
|
uploadProductGoodFileParams.push({
|
|
file_id: this.state.ImagesInfo[i].file_id,
|
|
file_type: 1,
|
|
if_cover: 0,
|
|
file_sort: i + 1
|
|
})
|
|
}
|
|
}
|
|
} else {
|
|
alert('图片为空')
|
|
}
|
|
console.log('页面图片列表', this.state.pickerImageUrl)
|
|
console.log('图片参数列表', uploadProductGoodFileParams)
|
|
Taro.request({
|
|
url: URL.UploadProduct,
|
|
method: 'POST',
|
|
dataType: 'json',
|
|
data: {
|
|
deployType: 1,
|
|
action: 1,
|
|
goods: JSON.stringify({
|
|
goods_name: goods_name,
|
|
goods_price: goods_price,
|
|
goods_unit: goods_unit,
|
|
goods_profiles: goods_profiles,
|
|
class_id: class_id,
|
|
shop_class_id: shop_class_id
|
|
}),
|
|
goodsFiles: JSON.stringify(uploadProductGoodFileParams)
|
|
},
|
|
header: {
|
|
'content-type': 'application/x-www-form-urlencoded',
|
|
'Cookie': 'PFWSSS=' + getGlobalStorage('session_id'),
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
}
|
|
})
|
|
.then(res => {
|
|
Taro.hideLoading()
|
|
console.log('发布消息', res)
|
|
if (res.data.err_code === 0) {
|
|
|
|
Taro.showToast({
|
|
title: '发布成功',
|
|
icon: 'success',
|
|
duration: 1000
|
|
})
|
|
setTimeout(() => {
|
|
if (this.state.isPublish) {
|
|
// 导航到编辑页面
|
|
Taro.redirectTo({
|
|
url: '/pages/myGoodsList/myGoodsList'
|
|
})
|
|
} else if (this.state.isPublishAndAdd) {
|
|
// 导航到发布页面
|
|
Taro.navigateTo({
|
|
url: '/pages/goodsPublish/goodsPublish'
|
|
})
|
|
}
|
|
}, 1000);
|
|
|
|
} else if (res.data.err_code === 88888) {
|
|
loginExpired(res)
|
|
}
|
|
else {
|
|
Taro.showToast({
|
|
title: res.data.err_msg,
|
|
icon: 'none',
|
|
duration: 1000
|
|
})
|
|
}
|
|
console.log('上传商品', res)
|
|
}
|
|
)
|
|
}
|
|
productNameChange(event) {
|
|
this.setState({
|
|
productName: event
|
|
})
|
|
}
|
|
productPriceChange(event) {
|
|
this.setState({
|
|
productPrice: event
|
|
})
|
|
}
|
|
productUnitChange(event) {
|
|
this.setState({
|
|
productUnit: event
|
|
})
|
|
}
|
|
productDescriptChange(event) {
|
|
this.setState({
|
|
productDescript: event.target.value
|
|
})
|
|
}
|
|
// 上传图片
|
|
onChangeImg(files, operationType, index) {
|
|
const that = this
|
|
if (operationType === 'add') {
|
|
Taro.uploadFile({
|
|
url: URL.UploadGoodsPorductImage,
|
|
filePath: files[files.length - 1].url,
|
|
name: 'file',
|
|
formData: {
|
|
|
|
},
|
|
header: {
|
|
'content-type': 'multipart/form-data',
|
|
'Cookie': 'PFWSSS=' + getGlobalStorage('session_id'),
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
},
|
|
success(response) {
|
|
const responseData = JSON.parse(response.data)
|
|
console.log('responseData', responseData)
|
|
if (responseData.err_code === 0) {
|
|
const imagePath = URL.Base + responseData.file_path
|
|
const newPickerImageUrl = that.state.pickerImageUrl.concat({ url: imagePath })
|
|
const newImageInfo = that.state.ImagesInfo.concat(responseData)
|
|
that.setState({ pickerImageUrl: newPickerImageUrl, ImagesInfo: newImageInfo }, () => {
|
|
Taro.showToast({
|
|
title: '上传成功',
|
|
icon: 'success',
|
|
duration: 2000
|
|
})
|
|
})
|
|
|
|
} else {
|
|
Taro.showToast({
|
|
title: responseData.err_msg,
|
|
icon: 'none',
|
|
duration: 1500
|
|
})
|
|
}
|
|
|
|
}
|
|
})
|
|
}
|
|
if (operationType === 'remove') {
|
|
this.state.pickerImageUrl.splice(index, 1);
|
|
this.state.ImagesInfo.splice(index, 1);
|
|
this.setState({ pickerImageUrl: this.state.pickerImageUrl, ImagesInfo: this.state.ImagesInfo });
|
|
Taro.showToast({
|
|
title: '删除成功',
|
|
icon: 'success',
|
|
duration: 2000
|
|
})
|
|
}
|
|
}
|
|
// 从图片子组件获取信息
|
|
getImageDetails(value) {
|
|
this.setState({
|
|
ImagesInfo: value
|
|
})
|
|
}
|
|
publishButtonHandler() {
|
|
|
|
if (this.state.productName &&
|
|
this.state.productPrice &&
|
|
this.state.productUnit &&
|
|
this.state.ImagesInfo.length &&
|
|
this.state.goodsTypeSelected.id &&
|
|
this.state.shopTypeSelected.id) {
|
|
showLoading({ title: '发布中' })
|
|
this.setState({ isPublish: true }, () => {
|
|
this.uploadGoods({
|
|
goods_name: this.state.productName,
|
|
goods_price: this.state.productPrice,
|
|
goods_unit: this.state.productUnit,
|
|
goods_profiles: this.state.productDescript,
|
|
class_id: this.state.goodsTypeSelected.id,
|
|
shop_class_id: this.state.shopTypeSelected.id,
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
} else {
|
|
Taro.showToast({ title: '请填写完表格', icon: 'none' })
|
|
}
|
|
}
|
|
publishAndNewButton() {
|
|
|
|
if (this.state.productName &&
|
|
this.state.productPrice &&
|
|
this.state.productUnit &&
|
|
this.state.ImagesInfo.length &&
|
|
this.state.goodsTypeSelected.id &&
|
|
this.state.shopTypeSelected.id) {
|
|
showLoading({ title: '发布中' })
|
|
this.setState({ isPublishAndAdd: true }, () => {
|
|
this.uploadGoods({
|
|
goods_name: this.state.productName,
|
|
goods_price: this.state.productPrice,
|
|
goods_unit: this.state.productUnit,
|
|
goods_profiles: this.state.productDescript,
|
|
class_id: this.state.goodsTypeSelected.id,
|
|
shop_class_id: this.state.shopTypeSelected.id,
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
} else {
|
|
Taro.showToast({ title: '请填写完表格', icon: 'none' })
|
|
}
|
|
}
|
|
|
|
|
|
goToMyGoodListPage() {
|
|
if (!getGlobalStorage('userInfo').user_id) {
|
|
LoginService()
|
|
return
|
|
}
|
|
Taro.redirectTo({
|
|
url: '/pages/myGoodList/myGoodList'
|
|
})
|
|
}
|
|
|
|
getDataFromShopChild(value) {
|
|
console.log('从子组件店铺分类传回来的值', value)
|
|
this.setState({ shopTypeSelected: value })
|
|
}
|
|
getDataFromGoodsChild(value) {
|
|
console.log('从子组件商品分类传回来的值', value)
|
|
this.setState({ goodsTypeSelected: value })
|
|
}
|
|
|
|
componentWillMount() {
|
|
if (!getGlobalStorage('userInfo').user_id) {
|
|
LoginService()
|
|
}
|
|
}
|
|
componentDidMount() {
|
|
}
|
|
componentWillReceiveProps(nextProps) {
|
|
// console.log(this.props, nextProps)
|
|
}
|
|
|
|
componentWillUnmount() { }
|
|
|
|
componentDidShow() {
|
|
isUserShopOwner()
|
|
}
|
|
|
|
componentDidHide() { }
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
|
<View className='goods-publish'>
|
|
|
|
<View className='goods-category'>
|
|
{/* 商品分类开始 */}
|
|
{platformChecker() ? <GoodsTypeInteractionComp
|
|
url={URL.GetProductCategoryList}
|
|
onPassDataToChild={this.getDataFromGoodsChild.bind(this)}
|
|
selectedValue={this.state.goodsTypeSelected}
|
|
></GoodsTypeInteractionComp>
|
|
|
|
: <AliGoodsTypeInteraction url={URL.GetProductCategoryList}
|
|
onPassDataToChild={this.getDataFromGoodsChild.bind(this)}
|
|
selectedValue={this.state.goodsTypeSelected} />}
|
|
|
|
{/* 商品分类结束 */}
|
|
|
|
<View className='input-box'>
|
|
<Text className='require'>*</Text>
|
|
<AtInput
|
|
name='productName'
|
|
title='商品名称：'
|
|
type='text'
|
|
value={this.state.productName}
|
|
border={false}
|
|
onChange={this.productNameChange.bind(this)}
|
|
/>
|
|
</View>
|
|
<View className='input-box'>
|
|
<Text className='require'>*</Text>
|
|
<AtInput
|
|
name='productPrice'
|
|
title='商品价格：'
|
|
type='number'
|
|
placeholder='￥'
|
|
value={this.state.productPrice}
|
|
border={false}
|
|
onChange={this.productPriceChange.bind(this)}
|
|
/>
|
|
</View>
|
|
<View className='input-box'>
|
|
<Text className='require'>*</Text>
|
|
<AtInput
|
|
name='productUnit'
|
|
title='商品单位：'
|
|
type='number'
|
|
value={this.state.productUnit}
|
|
border={false}
|
|
onChange={this.productUnitChange.bind(this)}
|
|
/>
|
|
</View>
|
|
{/* 图片上传 */}
|
|
<View className='img-box'>
|
|
<View className='title-box'>
|
|
<Text className='require'>*</Text>
|
|
<Text className='title'>上传图片:</Text>
|
|
</View>
|
|
{platformChecker() ? <View className='img-container'>
|
|
<AtImagePicker
|
|
multiple
|
|
files={this.state.pickerImageUrl}
|
|
onChange={this.onChangeImg.bind(this)}
|
|
onFail={this.onFail.bind(this)}
|
|
onImageClick={this.onImageClick.bind(this)}
|
|
/>
|
|
</View> : <AliPictureUploadComponent maxLength={20} isReceiveImageUrl={false} url={URL.UploadGoodsPorductImage} onGetImageDetails={this.getImageDetails.bind(this)} />
|
|
}
|
|
|
|
</View>
|
|
{/* 店铺分类 */}
|
|
{platformChecker() ?
|
|
<ShopTypeInteractionComp url={URL.GetShopCategoryList}
|
|
shopId={getGlobalStorage('shopInfo').shop_id}
|
|
selectedValue={this.state.shopTypeSelected}
|
|
onPassDataToChild={this.getDataFromShopChild.bind(this)}
|
|
></ShopTypeInteractionComp>
|
|
|
|
: <AliShopTypeInteraction url={URL.GetShopCategoryList}
|
|
shopId={getGlobalStorage('shopInfo') ? getGlobalStorage('shopInfo').shop_id : ''}
|
|
selectedValue={this.state.shopTypeSelected}
|
|
onPassDataToChild={this.getDataFromShopChild.bind(this)}
|
|
></AliShopTypeInteraction>
|
|
}
|
|
{/* 店铺分类结束 */}
|
|
|
|
|
|
<View className='description-box'>
|
|
<View className='title-box'>
|
|
<Text className='require'></Text>
|
|
<Text className='title'>商品简介:</Text>
|
|
</View>
|
|
{platformChecker() ? <AtTextarea
|
|
value={this.state.productDescript}
|
|
onChange={this.productDescriptChange.bind(this)}
|
|
maxlength='140'
|
|
placeholder='你的产品简介'
|
|
/> : <View className='textarea-wrapper'>
|
|
<textarea className='text-area'
|
|
onInput={this.productDescriptChange.bind(this)}
|
|
value={this.state.productDescript}
|
|
placeholder='你的产品简介'
|
|
maxlength='140' /></View>
|
|
}
|
|
|
|
</View>
|
|
</View>
|
|
<View className='button-box' >
|
|
<View className='button' >
|
|
<Button size='mini' className='button-orange' onClick={this.publishButtonHandler.bind(this)}>发布</Button>
|
|
</View>
|
|
{/* <View className='button'>
|
|
<Button type='primary' className='button-a' size='small' >发布并新增</Button>
|
|
</View> */}
|
|
{/* <View className='button' onClick={this.publishAndNewButton.bind(this)}>
|
|
<Button size='mini' className='button-green'>发布并新增</Button>
|
|
</View> */}
|
|
<View className='button' onClick={this.goToMyGoodListPage.bind(this)}>
|
|
<Button size='mini' className='button-green'>商品列表</Button>
|
|
</View>
|
|
</View>
|
|
|
|
<CopyrightComponent></CopyrightComponent>
|
|
|
|
</View>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default GoodsPublish
|