587 lines
24 KiB
JavaScript
587 lines
24 KiB
JavaScript
import Taro, { Component } from '@tarojs/taro'
|
||
import { View, Text, Radio, RadioGroup, Label } from '@tarojs/components'
|
||
import { AtInput, AtImagePicker, AtTextarea, AtButton, Picker, AtToast, AtSearchBar } from 'taro-ui'
|
||
|
||
import URL from '../../serviceAPI.config'
|
||
|
||
|
||
import './goodsPublish.scss'
|
||
import { throws } from 'assert';
|
||
|
||
class GoodsPublish extends Component {
|
||
|
||
config = {
|
||
navigationBarTitleText: '商品发布'
|
||
}
|
||
constructor() {
|
||
super(...arguments)
|
||
this.state = {
|
||
|
||
objectMultiArray: [
|
||
|
||
],
|
||
multiIndex: [0, 0, 0],
|
||
shopCategoryPicker: [], // 店铺分类选项
|
||
shopCategoryCheckedPicker: { name: '选择店铺类型' },
|
||
productName: '',
|
||
productPrice: '',
|
||
productUnit: '',
|
||
productDescript: '',
|
||
pickerImageUrl: [], // 上传的图片
|
||
ImagesInfo: [],// 后台传回来的图片信息
|
||
isUploadImageSuccess: false,
|
||
uploadImageTextTip: '',
|
||
isUploadProductSuccess: false,
|
||
uploadProductTextTip: '',
|
||
shopCategoryList: [],
|
||
productCategoryList: [],
|
||
|
||
}
|
||
}
|
||
|
||
|
||
//商品目录请求api GetShopCategoryList
|
||
getProductCateList() {
|
||
Taro.request({
|
||
url: URL.GetProductCategoryList,
|
||
method: 'POST',
|
||
dataType: 'json',
|
||
header: {
|
||
'content-type': 'application/x-www-form-urlencoded',
|
||
'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
|
||
'X-Requested-With': 'XMLHttpRequest'
|
||
}
|
||
})
|
||
.then(res => {
|
||
if (res.data.err_msg === 'success') {
|
||
this.setState({ productCategoryList: res.data.data })
|
||
console.log('商品分类目录', res)
|
||
this.sortShopCateToState(res.data.data)
|
||
}
|
||
|
||
}
|
||
)
|
||
.catch(error => {
|
||
console.log('商品分类请求错误', error)
|
||
})
|
||
}
|
||
|
||
|
||
// 店铺分类目录请求 api
|
||
getShopCateList() {
|
||
Taro.request({
|
||
url: URL.GetShopCategoryList,
|
||
method: 'POST',
|
||
dataType: 'json',
|
||
data: {
|
||
id: Taro.getStorageSync('shopInfo').shop_id
|
||
},
|
||
header: {
|
||
'content-type': 'application/x-www-form-urlencoded',
|
||
'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
|
||
'X-Requested-With': 'XMLHttpRequest'
|
||
}
|
||
})
|
||
.then(res => {
|
||
if (res.data.err_msg === 'success') {
|
||
this.setState({ shopCategoryList: res.data.data })
|
||
const shopCategoryInfo = res.data.data
|
||
const shopCategory = []
|
||
// 处理后台返回的店铺分类信息
|
||
for (let item in shopCategoryInfo) {
|
||
const children = shopCategoryInfo[item].c
|
||
for (let child in children) {
|
||
shopCategory.push({ id: children[child].id, name: children[child].n })
|
||
}
|
||
}
|
||
this.setState({ shopCategoryPicker: shopCategory })
|
||
console.log('店铺分类目录', res)
|
||
}
|
||
}
|
||
)
|
||
.catch(error => {
|
||
console.log('店铺分类请求错误', error)
|
||
})
|
||
}
|
||
|
||
// 发布商品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: 1
|
||
})
|
||
}
|
||
}
|
||
} else {
|
||
alert('图片为空')
|
||
}
|
||
|
||
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=' + Taro.getStorageSync('session_id'),
|
||
'X-Requested-With': 'XMLHttpRequest'
|
||
}
|
||
})
|
||
.then(res => {
|
||
this.setState({ uploadProductTextTip: '发布成功', isUploadProductSuccess: true }, () => {
|
||
setTimeout(() => {
|
||
this.setState({ isUploadProductSuccess: false })
|
||
Taro.navigateTo({
|
||
url: '/pages/goodsPublish/goodsPublish'
|
||
})
|
||
}, 2000)
|
||
})
|
||
console.log('上传商品', res)
|
||
}
|
||
)
|
||
.catch(error => {
|
||
this.setState({ uploadProductTextTip: '发布失败', isUploadProductSuccess: true }, () => {
|
||
setTimeout(() => {
|
||
this.setState({ isUploadProductSuccess: false })
|
||
}, 2000)
|
||
})
|
||
})
|
||
}
|
||
|
||
// 整理后台传出来的店铺分类目录
|
||
sortShopCateToState(shopData) {
|
||
const firstColumn = []
|
||
const secondColumn = []
|
||
const thirdColumn = []
|
||
for (let outterItem of shopData) {
|
||
firstColumn.push({ id: outterItem.class_id, class_name: outterItem.class_name })
|
||
if (outterItem.children.length) {
|
||
for (let middleItem of outterItem.children) {
|
||
secondColumn.push({ id: middleItem.class_id, class_name: middleItem.class_name })
|
||
if (middleItem.children.length) {
|
||
for (let innerItem of middleItem.children) {
|
||
thirdColumn.push({ id: innerItem.class_id, class_name: innerItem.class_name })
|
||
}
|
||
break
|
||
}
|
||
}
|
||
}
|
||
}
|
||
//------- 把新指传给objectMultiArray之后就不可以用了 to be continue
|
||
|
||
this.setState({ objectMultiArray: [firstColumn, secondColumn, thirdColumn] }, () => {
|
||
console.log('new', this.state.objectMultiArray)
|
||
})
|
||
}
|
||
|
||
// 改变商品分类状态
|
||
onChangeProductType(e) {
|
||
this.setState({
|
||
selectorChecked: this.state.selector[e.detail.value]
|
||
})
|
||
}
|
||
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.UploadPorductImage,
|
||
filePath: files[files.length - 1].url,
|
||
name: 'file',
|
||
formData: {
|
||
user: 'test'
|
||
},
|
||
header: {
|
||
'content-type': 'multipart/form-data',
|
||
'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
|
||
'X-Requested-With': 'XMLHttpRequest'
|
||
},
|
||
success(response) {
|
||
const data = JSON.parse(response.data)
|
||
const imagePath = URL.Base + data.file_path
|
||
const newPickerImageUrl = that.state.pickerImageUrl.concat({ url: imagePath })
|
||
const newImageInfo = that.state.ImagesInfo.concat(data)
|
||
that.setState({ pickerImageUrl: newPickerImageUrl, isUploadImageSuccess: true, uploadImageTextTip: '图片上传成功', ImagesInfo: newImageInfo }, () => {
|
||
setTimeout(() => {
|
||
that.setState({ isUploadImageSuccess: false })
|
||
}, 2000)
|
||
})
|
||
}
|
||
})
|
||
}
|
||
if (operationType === 'remove') {
|
||
this.state.pickerImageUrl.splice(index, 1);
|
||
this.setState({ files: this.state.pickerImageUrl });
|
||
that.setState({ isUploadImageSuccess: true, uploadImageTextTip: '删除成功' }, () => {
|
||
setTimeout(() => {
|
||
that.setState({ isUploadImageSuccess: false })
|
||
}, 2000)
|
||
})
|
||
}
|
||
}
|
||
// 图片上传失败
|
||
onFail(mes) {
|
||
console.log(mes)
|
||
}
|
||
// 删除图片
|
||
onImageClick(index) {
|
||
}
|
||
onClickUploadGoods() {
|
||
if (this.state.productName && this.state.productPrice && this.state.productUnit && this.state.ImagesInfo.length && this.state.shopCategoryCheckedPicker.id) {
|
||
this.uploadGoods({
|
||
goods_name: this.state.productName,
|
||
goods_price: this.state.productPrice,
|
||
goods_unit: this.state.productUnit,
|
||
goods_profiles: this.state.productDescript,
|
||
class_id: "10103",
|
||
shop_class_id: this.state.shopCategoryCheckedPicker,
|
||
})
|
||
} else {
|
||
this.setState({ uploadProductTextTip: '请填写完表格', isUploadProductSuccess: true }, () => {
|
||
setTimeout(() => {
|
||
this.setState({ isUploadProductSuccess: false })
|
||
}, 2000)
|
||
})
|
||
}
|
||
}
|
||
shopCategoryChanged(e) {
|
||
this.setState({
|
||
shopCategoryCheckedPicker: this.state.shopCategoryPicker[e.detail.value]
|
||
}, () => {
|
||
console.log(this.state.shopCategoryCheckedPicker)
|
||
})
|
||
}
|
||
|
||
|
||
componentDidMount() {
|
||
this.getProductCateList()
|
||
this.getShopCateList()
|
||
}
|
||
|
||
componentWillReceiveProps(nextProps) {
|
||
// console.log(this.props, nextProps)
|
||
}
|
||
|
||
componentWillUnmount() { }
|
||
|
||
componentDidShow() { }
|
||
|
||
componentDidHide() { }
|
||
|
||
//--- 三级联动--------------
|
||
bindMultiPickerChange(e) {
|
||
console.log('picker发送选择改变，携带值为', e.detail.value)
|
||
this.setState({
|
||
multiIndex: e.detail.value
|
||
})
|
||
}
|
||
bindMultiPickerCol(e) {
|
||
console.log('修改的列为', e.detail.column, '，值为', e.detail.value)
|
||
const data = {
|
||
multiArray: this.state.objectMultiArray,
|
||
multiIndex: this.state.multiIndex
|
||
}
|
||
data.multiIndex[e.detail.column] = e.detail.value
|
||
switch (e.detail.column) {
|
||
case 0:
|
||
switch (data.multiIndex[0]) {
|
||
case 0:
|
||
data.multiArray[1] = this.state.productCategoryList[0].children ? this.state.productCategoryList[0].children : [{ class_name: '' }]
|
||
data.multiArray[2] = this.state.productCategoryList[0].children ? this.state.productCategoryList[0].children : [{ class_name: '' }]
|
||
|
||
break
|
||
case 1:
|
||
data.multiArray[1] = this.state.productCategoryList[1].children
|
||
break
|
||
case 2:
|
||
data.multiArray[1] = this.state.productCategoryList[2].children
|
||
break
|
||
case 3:
|
||
data.multiArray[1] = this.state.productCategoryList[3].children
|
||
break
|
||
case 4:
|
||
data.multiArray[1] = this.state.productCategoryList[4].children
|
||
break
|
||
}
|
||
data.multiIndex[1] = 0
|
||
data.multiIndex[2] = 0
|
||
break
|
||
case 1:
|
||
switch (data.multiIndex[0]) {
|
||
case 0:
|
||
|
||
break
|
||
case 1:
|
||
switch (data.multiIndex[1]) {
|
||
case 0:
|
||
data.multiArray[2] = this.state.productCategoryList[1].children[0].children
|
||
break
|
||
case 1:
|
||
data.multiArray[2] = this.state.productCategoryList[1].children[1].children
|
||
break
|
||
case 2:
|
||
data.multiArray[2] = this.state.productCategoryList[1].children[2].children
|
||
break
|
||
case 3:
|
||
data.multiArray[2] = this.state.productCategoryList[1].children[3].children ? this.state.productCategoryList[1].children[3].children : [{ class_name: '' }]
|
||
break
|
||
}
|
||
break
|
||
case 2:
|
||
switch (data.multiIndex[1]) {
|
||
case 0:
|
||
data.multiArray[2] = this.state.productCategoryList[2].children[0].children
|
||
break
|
||
case 1:
|
||
data.multiArray[2] = this.state.productCategoryList[2].children[1].children
|
||
break
|
||
case 2:
|
||
data.multiArray[2] = this.state.productCategoryList[2].children[2].children
|
||
break
|
||
case 3:
|
||
data.multiArray[2] = this.state.productCategoryList[2].children[3].children
|
||
break
|
||
case 4:
|
||
data.multiArray[2] = this.state.productCategoryList[2].children[4].children
|
||
break
|
||
case 5:
|
||
data.multiArray[2] = this.state.productCategoryList[2].children[5].children
|
||
break
|
||
}
|
||
break
|
||
case 3:
|
||
switch (data.multiIndex[1]) {
|
||
case 0:
|
||
data.multiArray[2] = this.state.productCategoryList[3].children[0].children
|
||
break
|
||
case 1:
|
||
data.multiArray[2] = this.state.productCategoryList[3].children[1].children
|
||
break
|
||
case 2:
|
||
data.multiArray[2] = this.state.productCategoryList[3].children[2].children
|
||
break
|
||
case 3:
|
||
data.multiArray[2] = this.state.productCategoryList[3].children[3].children ? this.state.productCategoryList[3].children[3].children : [{ class_name: '' }]
|
||
break
|
||
case 3:
|
||
data.multiArray[2] = this.state.productCategoryList[3].children[3].children ? this.state.productCategoryList[3].children[3].children : [{ class_name: '' }]
|
||
break
|
||
}
|
||
break
|
||
case 4:
|
||
switch (data.multiIndex[1]) {
|
||
case 0:
|
||
data.multiArray[2] = this.state.productCategoryList[4].children[0].children
|
||
break
|
||
case 1:
|
||
data.multiArray[2] = this.state.productCategoryList[4].children[1].children
|
||
break
|
||
case 2:
|
||
data.multiArray[2] = this.state.productCategoryList[4].children[2].children
|
||
break
|
||
|
||
}
|
||
break
|
||
|
||
}
|
||
data.multiIndex[2] = 0
|
||
break
|
||
}
|
||
this.setState({ multiIndex: data.multiIndex })
|
||
}
|
||
|
||
render() {
|
||
const imageUploadSuccess = <AtToast
|
||
isOpened={this.state.isUploadImageSuccess}
|
||
text={this.state.uploadImageTextTip}
|
||
duration={2000}
|
||
></AtToast>
|
||
const productUploadSuccess = <AtToast
|
||
isOpened={this.state.isUploadProductSuccess}
|
||
text={this.state.uploadProductTextTip}
|
||
duration={2000}
|
||
></AtToast>
|
||
return (
|
||
<View className='goods-publish'>
|
||
{imageUploadSuccess}
|
||
{productUploadSuccess}
|
||
<View className='searchBar-box'>
|
||
<AtSearchBar className='search-button'
|
||
actionName='搜索'
|
||
value={this.state.value}
|
||
onChange={this.onChange.bind(this)}
|
||
onActionClick={this.onActionClick.bind(this)}
|
||
/>
|
||
</View>
|
||
<View className='goods-category'>
|
||
<View className='page-section'>
|
||
<View>
|
||
<Picker
|
||
range={this.state.objectMultiArray}
|
||
onChange={this.bindMultiPickerChange.bind(this)}
|
||
rangeKey='class_name'
|
||
mode='multiSelector'
|
||
onColumnchange={this.bindMultiPickerCol.bind(this)}
|
||
value={this.state.multiIndex}
|
||
>
|
||
<View className='picker'>
|
||
<View className='title-box'>
|
||
<Text className='title'><Text className='require'>*</Text>商品分类:</Text> <Text className='selected'>
|
||
{this.state.objectMultiArray[0][this.state.multiIndex[0]].class_name}{this.state.objectMultiArray[1][this.state.multiIndex[1]].class_name}{this.state.objectMultiArray[2][this.state.multiIndex[2]].class_name}
|
||
</Text>
|
||
</View>
|
||
|
||
</View>
|
||
</Picker>
|
||
</View>
|
||
</View>
|
||
|
||
<View className='input-box'>
|
||
<Text className='require'>*</Text>
|
||
<AtInput
|
||
name='value'
|
||
title='商品名称：'
|
||
type='text'
|
||
value={this.state.productName}
|
||
onChange={this.productNameChange.bind(this)}
|
||
/>
|
||
</View>
|
||
<View className='input-box'>
|
||
<Text className='require'>*</Text>
|
||
<AtInput
|
||
name='value'
|
||
title='商品价格：'
|
||
type='number'
|
||
placeholder='￥'
|
||
value={this.state.productPrice}
|
||
onChange={this.productPriceChange.bind(this)}
|
||
/>
|
||
</View>
|
||
<View className='input-box'>
|
||
<Text className='require'>*</Text>
|
||
<AtInput
|
||
name='value'
|
||
title='商品单位：'
|
||
type='text'
|
||
value={this.state.productUnit}
|
||
onChange={this.productUnitChange.bind(this)}
|
||
/>
|
||
</View>
|
||
{/* 图片上传 */}
|
||
<View className='img-box'>
|
||
<View className='title-box'>
|
||
<Text className='require'>*</Text>
|
||
<Text className='title'>上传图片:</Text>
|
||
</View>
|
||
<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>
|
||
</View>
|
||
<View className='shoptype-box'>
|
||
{/* 店铺分类 */}
|
||
<View className='title-box page-section'>
|
||
<Picker mode='selector' rangeKey='name' range={this.state.shopCategoryPicker} onChange={this.shopCategoryChanged.bind(this)}>
|
||
<View className='picker'>
|
||
<Text className='require'>*</Text>
|
||
<Text className='title'> 店铺分类：</Text>
|
||
<Text className='selected'>{this.state.shopCategoryCheckedPicker.name}</Text>
|
||
|
||
</View>
|
||
</Picker>
|
||
</View>
|
||
|
||
|
||
</View>
|
||
|
||
<View className='description-box'>
|
||
<View className='title-box'>
|
||
<Text className='require'></Text>
|
||
<Text className='title'>商品简介:</Text>
|
||
</View>
|
||
|
||
<AtTextarea
|
||
value={this.state.productDescript}
|
||
onChange={this.productDescriptChange.bind(this)}
|
||
maxlength='200'
|
||
placeholder='你的产品简介'
|
||
/>
|
||
|
||
</View>
|
||
</View>
|
||
<View className='button-box' >
|
||
<View className='button' >
|
||
<AtButton type='primary' size='small' onClick={this.onClickUploadGoods.bind(this)}>发布</AtButton>
|
||
</View>
|
||
{/* <View className='button'>
|
||
<AtButton type='primary' className='button-a' size='small' >发布并新增</AtButton>
|
||
</View> */}
|
||
<View className='button'>
|
||
<AtButton type='primary' className='button-a' size='small'>商品列表</AtButton>
|
||
</View>
|
||
|
||
|
||
|
||
</View>
|
||
|
||
<copyrightComponent></copyrightComponent>
|
||
|
||
</View>
|
||
)
|
||
}
|
||
}
|
||
|
||
export default GoodsPublish
|