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

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 SearchBarComponent from '../../component/searchBarComponent/searchBarComponent'
import copyrightComponent from '../../component/copyrightComponent/copyrightComponent'
import URL from '../../serviceAPI.config'


import './goodsPublish.scss'
import { throws } from 'assert';

class GoodsPublish extends Component {

    config = {
        navigationBarTitleText: '商品发布'
    }
    constructor() {
        super(...arguments)
        this.state = {
            objectMultiArray: [
                [
                    {
                        id: 0,
                        name: '无脊柱动物'
                    },
                    {
                        id: 1,
                        name: '脊柱动物'
                    }
                ],
                [
                    {
                        id: 0,
                        name: '扁性动物'
                    },
                    {
                        id: 1,
                        name: '线形动物'
                    },
                    {
                        id: 2,
                        name: '环节动物'
                    },
                    {
                        id: 3,
                        name: '软体动物'
                    },
                    {
                        id: 3,
                        name: '节肢动物'
                    }
                ],
                [
                    {
                        id: 0,
                        name: '猪肉绦虫'
                    },
                    {
                        id: 1,
                        name: '吸血虫'
                    }
                ]
            ],
            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
    //{"goods_name":"hellol","goods_price":"1.00","goods_unit":"1","goods_profiles":"111","class_id":"2","shop_class_id":"1928"}
    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 })
                console.log('上传商品', res)  // 提示非法请求  ----- to be continue
            }
            )
            .catch(error => {
                this.setState({ uploadProductTextTip: '发布失败', isUploadProductSuccess: true })
            })
    }
    // 整理后台传出来的店铺分类目录
    sortShopCateToState(shopData) {
        const firstColumn = []
        const secondColumn = []
        const thirdColumn = []
        for (let outterItem of shopData) {
            firstColumn.push({ id: outterItem.class_id, name: outterItem.class_name })
            if (outterItem.children.length) {
                for (let middleItem of outterItem.children) {
                    secondColumn.push({ id: middleItem.class_id, name: middleItem.class_name })
                    if (middleItem.children.length) {
                        for (let innerItem of middleItem.children) {
                            thirdColumn.push({ id: innerItem.class_id, name: innerItem.class_name })
                        }
                    }
                }
            }
        }


        //-------  把新指传给objectMultiArray之后就不可以用了   to be continue
        // console.log('old',this.state.objectMultiArray)
        // 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 }, () => {
                        // console.log(that.state.ImagesInfo)
                    })
                }
            })
        }
        if (operationType === 'remove') {
            this.state.pickerImageUrl.splice(index, 1);
            this.setState({ files: this.state.pickerImageUrl });
            that.setState({ isUploadImageSuccess: true, uploadImageTextTip: '删除成功' })
        }
    }
    // 图片上传失败
    onFail(mes) {
        console.log(mes)
    }
    // 删除图片
    onImageClick(index) {
    }
    onClickUploadGoods() {
        if (this.state.productName && this.state.productPrice && this.state.productUnit && this.state.ImagesInfo.length) {
            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 })
        }
    }
    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] = [
                            {
                                id: 0,
                                name: '01'
                            },
                            {
                                id: 1,
                                name: '10a'
                            }
                        ]
                        data.multiArray[2] = [{
                            id: 0,
                            name: '02'
                        },
                        {
                            id: 1,
                            name: '02a'
                        }]
                        break
                    case 1:
                        data.multiArray[1] = [{
                            id: 0,
                            name: '11'
                        },
                        {
                            id: 1,
                            name: '11a'
                        }]
                        data.multiArray[2] = [{
                            id: 0,
                            name: '12'
                        },
                        {
                            id: 1,
                            name: '12a'
                        }]
                        break
                }
                data.multiIndex[1] = 0
                data.multiIndex[2] = 0
                break
            case 1:
                switch (data.multiIndex[0]) {
                    case 0:
                        switch (data.multiIndex[1]) {
                            case 0:
                                data.multiArray[2] = [{
                                    id: 0,
                                    name: '无脊柱动物'
                                },
                                {
                                    id: 1,
                                    name: '脊柱动物'
                                }]
                                break
                            case 1:
                                data.multiArray[2] = [
                                    {
                                        id: 1,
                                        name: '脊柱动物'
                                    }]
                                break
                            case 2:
                                data.multiArray[2] = [{
                                    id: 0,
                                    name: '无脊柱动物'
                                },
                                {
                                    id: 1,
                                    name: '脊柱动物'
                                }]
                                break
                            case 3:
                                data.multiArray[2] = [{
                                    id: 0,
                                    name: '无脊柱动物'
                                },
                                {
                                    id: 1,
                                    name: '脊柱动物'
                                }, {
                                    id: 0,
                                    name: '无脊柱动物'
                                },
                                {
                                    id: 1,
                                    name: '脊柱动物'
                                }]
                                break
                            case 4:
                                data.multiArray[2] = [{
                                    id: 0,
                                    name: '无脊柱动物'
                                },
                                {
                                    id: 1,
                                    name: '脊柱动物'
                                }]
                                break
                        }
                        break
                    case 1:
                        switch (data.multiIndex[1]) {
                            case 0:
                                data.multiArray[2] = [{
                                    id: 0,
                                    name: '蛇'
                                },
                                {
                                    id: 1,
                                    name: '青蛙'
                                }]
                                break
                            case 1:
                                data.multiArray[2] = [{
                                    id: 0,
                                    name: '蛇'
                                },
                                {
                                    id: 1,
                                    name: '青蛙'
                                }, {
                                    id: 0,
                                    name: '蛇'
                                },
                                {
                                    id: 1,
                                    name: '青蛙'
                                }]
                                break
                            case 2:
                                data.multiArray[2] = [{
                                    id: 0,
                                    name: '蛇'
                                },
                                {
                                    id: 1,
                                    name: '青蛙'
                                }]
                                break
                        }
                        break
                }
                data.multiIndex[2] = 0
                break
        }
        console.log(data.multiIndex)
        this.setState({ multiIndex: data.multiIndex })
    }

    render() {
        const imageUploadSuccess = <AtToast
            isOpened={this.state.isUploadImageSuccess}
            text={this.state.uploadImageTextTip}
            duration={1000}
        ></AtToast>
        const productUploadSuccess = <AtToast
            isOpened={this.state.isUploadProductSuccess}
            text={this.state.uploadProductTextTip}
            duration={1000}
        ></AtToast>
        return (
            <View className='goods-publish'>
                {imageUploadSuccess}
                {productUploadSuccess}
                <SearchBarComponent></SearchBarComponent>
                <View className='goods-category'>
                    <View className='page-section'>
                        <View>
                            <Picker mode='selector'
                                range={this.state.objectMultiArray}
                                onChange={this.bindMultiPickerChange.bind(this)}
                                rangeKey='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.multiArray[0][this.state.multiIndex[0]].name}{this.state.multiArray[1][this.state.multiIndex[1]].name}{this.state.multiArray[2][this.state.multiIndex[2]].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