cf-wx-app/src/pages/myGoodsEdit/myGoodsEdit.js

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