435 lines
15 KiB
JavaScript
435 lines
15 KiB
JavaScript
import Taro, { Component, UpdateManager } 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 = {
|
||
shopCategoryList: [], // 店铺分类选项
|
||
shopCategoryCheckedPicker: { name: '选择店铺类型', id: '' },
|
||
productName: '',
|
||
productPrice: '',
|
||
productUnit: '',
|
||
productDescript: '',
|
||
pickerImageUrl: [], // 上传的图片
|
||
ImagesInfo: [],// 后台传回来的图片信息
|
||
goodsTypeParam: '',//商品分类参数
|
||
goodId: '',//商品id
|
||
}
|
||
}
|
||
//获取商品信息api GetProductInfo
|
||
getGoodsInfo() {
|
||
Taro.request({
|
||
url: URL.GetProductInfo,
|
||
method: 'GET',
|
||
dataType: 'json',
|
||
data: {
|
||
// goodsID: 'c610femn1j8fHUOM5gvh6VxW03O5mBDgNcAJGGFmvFX3Zw'
|
||
goodsID: this.$router.params.id,
|
||
},
|
||
header: {
|
||
'content-type': 'application/x-www-form-urlencoded',
|
||
'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
|
||
'X-Requested-With': 'XMLHttpRequest'
|
||
}
|
||
})
|
||
.then(res => {
|
||
console.log('商品详情获取成功', res)
|
||
const imageFile = res.data.goodsFiles.map((item) => {
|
||
return { url: URL.Base + item.files.file_path }
|
||
})
|
||
const shopTypeId = res.data.goods.shop_class_id
|
||
const shopTypeName = this.state.shopCategoryList.filter(item => {
|
||
return item.id === shopTypeId
|
||
})
|
||
|
||
|
||
this.setState({
|
||
productName: res.data.goods.goods_name,
|
||
productPrice: res.data.goods.goods_price,
|
||
productUnit: res.data.goods.goods_unit,
|
||
productDescript: res.data.goods.goods_profiles,
|
||
pickerImageUrl: imageFile,
|
||
ImagesInfo: res.data.goodsFiles,
|
||
shopCategoryCheckedPicker: shopTypeName[0],
|
||
goodsTypeParam: res.data.goods.class_id,
|
||
goodId: res.data.goods.goods_id,
|
||
})
|
||
}
|
||
)
|
||
.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') {
|
||
|
||
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({ shopCategoryList: shopCategory }, () => {
|
||
this.getGoodsInfo()
|
||
})
|
||
console.log('店铺分类目录', res)
|
||
return
|
||
}
|
||
}
|
||
)
|
||
.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",
|
||
goods_id = '123' }) {
|
||
|
||
// 上传图片的参数
|
||
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('图片为空')
|
||
}
|
||
|
||
Taro.request({
|
||
url: URL.UploadProduct,
|
||
method: 'POST',
|
||
dataType: 'json',
|
||
data: {
|
||
deployType: 2,
|
||
action: 2,
|
||
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,
|
||
goods_id: goods_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 => {
|
||
Taro.hideLoading()
|
||
Taro.showToast({
|
||
title: '保存成功',
|
||
icon: 'success',
|
||
duration: 1000
|
||
})
|
||
setTimeout(() => {
|
||
Taro.navigateTo({
|
||
url: '/pages/goods/goods?id='+this.$router.params.id
|
||
})
|
||
}, 1000);
|
||
console.log('上传商品', res)
|
||
}
|
||
)
|
||
.catch(error => {
|
||
Taro.hideLoading()
|
||
Taro.showToast({
|
||
title: '保存失败',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
})
|
||
}
|
||
|
||
|
||
|
||
|
||
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)
|
||
console.log('imagedata',data)
|
||
const imagePath = URL.Base + data.file_path
|
||
const newPickerImageUrl = that.state.pickerImageUrl.concat({ url: imagePath })
|
||
const newImageInfo = that.state.ImagesInfo.concat(data)
|
||
console.log('新添加后的图片列表',newImageInfo)
|
||
|
||
that.setState({
|
||
pickerImageUrl: newPickerImageUrl,
|
||
ImagesInfo: newImageInfo
|
||
}, () => {
|
||
Taro.showToast({
|
||
title: '上传成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
})
|
||
}
|
||
})
|
||
}
|
||
if (operationType === 'remove') {
|
||
this.state.pickerImageUrl.splice(index, 1);// 删除图片param
|
||
this.state.ImagesInfo.splice(index, 1) // 删除显示的图片
|
||
|
||
this.setState({
|
||
pickerImageUrl: this.state.pickerImageUrl,
|
||
ImagesInfo: this.state.ImagesInfo
|
||
});
|
||
|
||
Taro.showToast({
|
||
title: '删除成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
|
||
}
|
||
}
|
||
|
||
|
||
onClickUploadGoods() {
|
||
if (this.state.productName && this.state.productPrice && this.state.productUnit && this.state.ImagesInfo.length && this.state.shopCategoryCheckedPicker.id) {
|
||
Taro.showLoading({ title: '保存中' }).then(() => {
|
||
setTimeout(() => {
|
||
this.uploadGoods({
|
||
goods_name: this.state.productName,
|
||
goods_price: this.state.productPrice,
|
||
goods_unit: this.state.productUnit,
|
||
goods_profiles: this.state.productDescript,
|
||
shop_class_id: this.state.shopCategoryCheckedPicker.id,
|
||
class_id: this.state.goodsTypeParam,
|
||
goods_id: this.state.goodId,
|
||
})
|
||
}, 1000);
|
||
})
|
||
} else {
|
||
Taro.showToast({
|
||
title: '请填写完表格',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
|
||
}
|
||
}
|
||
shopCategoryChanged(e) {
|
||
this.setState({
|
||
shopCategoryCheckedPicker: this.state.shopCategoryList[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() {
|
||
|
||
return (
|
||
<View className='goods-publish'>
|
||
<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.shopCategoryList} 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
|