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

import Taro, { Component } from '@tarojs/taro'
import { View, Text, Button } from '@tarojs/components'
import { AtInput, AtImagePicker, AtTextarea, } from 'taro-ui'
import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'


import ShopTypeInteractionComp from '../../component/shopTypeInteractionComp/shopTypeInteractionComp'
import GoodsTypeInteractionComp from '../../component/goodsTypeInteractionComp/goodsTypeInteractionComp'

import LoginService from '../../LoginService'
import URL from '../../serviceAPI.config'


import './goodsPublish.scss'

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=' + Taro.getStorageSync('session_id'),
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
            .then(res => {
                Taro.hideLoading()
                if (res.data.err_msg === 'success') {

                    Taro.showToast({
                        title: '发布成功',
                        icon: 'success',
                        duration: 1000
                    })
                    setTimeout(() => {
                        if (this.state.isPublish) {
                            // 导航到编辑页面
                            Taro.navigateTo({
                                url: '/pages/myGoodsEdit/myGoodsEdit?id=' + res.data.goods_id
                            })
                        } else if (this.state.isPublishAndAdd) {
                            // 导航到发布页面
                            Taro.navigateTo({
                                url: '/pages/goodsPublish/goodsPublish'
                            })
                        }
                    }, 1000);

                }
                else {
                    Taro.showToast({
                        title: res.data.err_msg,
                        icon: 'none',
                        duration: 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: {

                },
                header: {
                    'content-type': 'multipart/form-data',
                    'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
                    'X-Requested-With': 'XMLHttpRequest'
                },
                success(response) {
                    const responseMsg = JSON.parse(response.data).err_msg
                    if (responseMsg === 'success' || responseMsg === 'duplicate') {
                        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, ImagesInfo: newImageInfo }, () => {
                            Taro.showToast({
                                title: '上传成功',
                                icon: 'success',
                                duration: 2000
                            })
                        })

                    } else {
                        Taro.showToast({
                            title: responseMsg,
                            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
            })
        }
    }

    publishButtonHandler() {
        if (!Taro.getStorageSync('userInfo').user_id) {
            LoginService()
            return
        }
        if (this.state.productName &&
            this.state.productPrice &&
            this.state.productUnit &&
            this.state.ImagesInfo.length &&
            this.state.goodsTypeSelected.id &&
            this.state.shopTypeSelected.id) {
            Taro.showLoading({ title: '发布中' }).then(() => {
                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 (!Taro.getStorageSync('userInfo').user_id) {
            LoginService()
            return
        }
        if (this.state.productName &&
            this.state.productPrice &&
            this.state.productUnit &&
            this.state.ImagesInfo.length &&
            this.state.goodsTypeSelected.id &&
            this.state.shopTypeSelected.id) {
            Taro.showLoading({ title: '发布中' }).then(() => {
                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() {
        console.log('list ', Taro.getStorageSync('userInfo'))
        if (!Taro.getStorageSync('userInfo').user_id) {
            LoginService()
            return
        }
        Taro.navigateTo({
            url: '/pages/myGoodList/myGoodList'
        })
    }

    getDataFromShopChild(value) {
        console.log('从子组件店铺分类传回来的值', value)
        this.setState({ shopTypeSelected: value })
    }
    getDataFromGoodsChild(value) {
        console.log('从子组件商品分类传回来的值', value)
        this.setState({ goodsTypeSelected: value })
    }

    componentWillMount() {
        if (!Taro.getStorageSync('userInfo').user_id) {
            LoginService()
        }
    }
    componentDidMount() {
        // this.getProductCateList()
        // this.getShopCateList()
    }

    componentWillReceiveProps(nextProps) {
        // console.log(this.props, nextProps)
    }

    componentWillUnmount() { }

    componentDidShow() {

    }

    componentDidHide() { }



    render() {

        return (
            <View className='goods-publish'>

                <View className='goods-category'>
                    {/* 商品分类开始 */}
                    <GoodsTypeInteractionComp
                        url={URL.GetProductCategoryList}
                        onPassDataToChild={this.getDataFromGoodsChild.bind(this)}
                        selectedValue={this.state.goodsTypeSelected}
                    ></GoodsTypeInteractionComp>
                    {/* 商品分类结束 */}

                    <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>
                        <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>
                    {/* 店铺分类 */}
                    <ShopTypeInteractionComp url={URL.GetShopCategoryList}
                        shopId={Taro.getStorageSync('shopInfo').shop_id}
                        selectedValue={this.state.shopTypeSelected}
                        onPassDataToChild={this.getDataFromShopChild.bind(this)}
                    ></ShopTypeInteractionComp>
                    {/* 店铺分类结束  */}


                    <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' >
                        <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