377 lines
14 KiB
JavaScript
377 lines
14 KiB
JavaScript
|
import Taro, { Component } from '@tarojs/taro'
|
|||
|
|
import { View, Text, Radio, RadioGroup, Label } from '@tarojs/components'
|
|||
|
|
import { AtInput, AtImagePicker, AtTextarea, AtButton, Picker, AtToast } from 'taro-ui'
|
|||
|
|
|
|||
|
|
import URL from '../../serviceAPI.config'
|
|||
|
|
|
|||
|
|
|
|||
|
|
import './myGoodsEdit.scss'
|
|||
|
|
|
|||
|
|
class MyGoodsEdit extends Component {
|
|||
|
|
config = {
|
|||
|
|
navigationBarTitleText: '商品编辑'
|
|||
|
|
}
|
|||
|
|
constructor() {
|
|||
|
|
super(...arguments)
|
|||
|
|
this.state = {
|
|||
|
|
|
|||
|
|
shopCategoryPicker: [], // 店铺分类选项
|
|||
|
|
shopCategoryCheckedPicker: { name: '选择店铺类型' },
|
|||
|
|
productName: '',
|
|||
|
|
productPrice: '',
|
|||
|
|
productUnit: '',
|
|||
|
|
productDescript: '',
|
|||
|
|
pickerImageUrl: [], // 上传的图片
|
|||
|
|
ImagesInfo: [],// 后台传回来的图片信息
|
|||
|
|
|
|||
|
|
|
|||
|
|
shopCategoryList: [],
|
|||
|
|
isToast:false,
|
|||
|
|
toastText:'',
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 店铺分类目录请求 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({ toastText: '发布成功', isToast: true }, () => {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.setState({ isToast: false })
|
|||
|
|
Taro.navigateTo({
|
|||
|
|
url: '/pages/goods/goods?id=5cf3Ptn5wKQdyPpwsSe2nDKnN4QDFdz8moPTf+QIOm788Q'// 虚拟地址
|
|||
|
|
})
|
|||
|
|
}, 2000)
|
|||
|
|
})
|
|||
|
|
console.log('上传商品', res)
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
.catch(error => {
|
|||
|
|
this.setState({ toastText: '发布失败', isToast: true }, () => {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.setState({ isToast: false })
|
|||
|
|
}, 2000)
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
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: {
|
|||
|
|
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, isToast: true, toastText: '图片上传成功', ImagesInfo: newImageInfo }, () => {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
that.setState({ isToast: false })
|
|||
|
|
}, 2000)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
if (operationType === 'remove') {
|
|||
|
|
this.state.pickerImageUrl.splice(index, 1);
|
|||
|
|
this.setState({ files: this.state.pickerImageUrl });
|
|||
|
|
that.setState({ isToast: true, toastText: '删除成功' }, () => {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
that.setState({ isToast: 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({ toastText: '请填写完表格', isToast: true }, () => {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.setState({ isToast: false })
|
|||
|
|
}, 2000)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
shopCategoryChanged(e) {
|
|||
|
|
this.setState({
|
|||
|
|
shopCategoryCheckedPicker: this.state.shopCategoryPicker[e.detail.value]
|
|||
|
|
}, () => {
|
|||
|
|
console.log(this.state.shopCategoryCheckedPicker)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
goToMyGoodListPage(){
|
|||
|
|
Taro.navigateTo({
|
|||
|
|
url: '/pages/myGoodList/myGoodList'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
componentDidMount() {
|
|||
|
|
|
|||
|
|
this.getShopCateList()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
componentWillReceiveProps(nextProps) {
|
|||
|
|
// console.log(this.props, nextProps)
|
|||
|
|
}
|
|||
|
|
componentWillUnmount() { }
|
|||
|
|
|
|||
|
|
componentDidShow() { }
|
|||
|
|
|
|||
|
|
componentDidHide() { }
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
render() {
|
|||
|
|
const imageUploadSuccess = <AtToast
|
|||
|
|
isOpened={this.state.isToast}
|
|||
|
|
text={this.state.toastText}
|
|||
|
|
duration={2000}
|
|||
|
|
></AtToast>
|
|||
|
|
const productUploadSuccess = <AtToast
|
|||
|
|
isOpened={this.state.isToast}
|
|||
|
|
text={this.state.toastText}
|
|||
|
|
duration={2000}
|
|||
|
|
></AtToast>
|
|||
|
|
return (
|
|||
|
|
<View className='goods-publish'>
|
|||
|
|
{imageUploadSuccess}
|
|||
|
|
{productUploadSuccess}
|
|||
|
|
|
|||
|
|
<View className='goods-category'>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<View className='input-box'>
|
|||
|
|
<Text className='require'>*</Text>
|
|||
|
|
<AtInput
|
|||
|
|
name='productName'
|
|||
|
|
title='商品名称：'
|
|||
|
|
type='text'
|
|||
|
|
value={this.state.productName}
|
|||
|
|
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}
|
|||
|
|
onChange={this.productPriceChange.bind(this)}
|
|||
|
|
/>
|
|||
|
|
</View>
|
|||
|
|
<View className='input-box'>
|
|||
|
|
<Text className='require'>*</Text>
|
|||
|
|
<AtInput
|
|||
|
|
name='productUnit'
|
|||
|
|
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' onClick={this.goToMyGoodListPage.bind(this)}>
|
|||
|
|
<AtButton type='primary' className='button-a' size='small'>商品列表</AtButton>
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
|
|||
|
|
<copyrightComponent></copyrightComponent>
|
|||
|
|
|
|||
|
|
</View>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default MyGoodsEdit
|