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

//grabOrderPage
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Button, Image } from '@tarojs/components'
import { AtModal, AtModalHeader, AtModalContent, AtModalAction, AtIcon } from 'taro-ui'

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

import RenderingView from './renderingView/renderingView'
import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
import './grabOrderPage.scss'
import loginExpired from '../../util/loginExpired';


class GrabOrderPage extends Component {
    config = {
        navigationBarTitleText: '业主需求'
    }
    constructor() {
        super(...arguments);
        this.state = {
            isShowRendering: false,
            type: '',
            title: '',
            browsing: '',
            contactName: '',
            contactNumber: '',
            address: '',
            content: '',
            images: [],
            isOpen: false, // 抢单消息提示
            grabOrderId: this.$router.params.orderId,
            stateId: '',
            stateName: '',
            userId: '',
            renderingImage: [],
            isDeleteModal: false
        }
    }

    //获取抢单信息api supplyDemandDetails
    getGrabOrderInfo() {
        Taro.request({
            url: URL.supplyDemandDetails,
            method: 'GET',
            dataType: 'json',
            data: {
                demandId: this.$router.params.orderId,
            },
            header: {
                'content-type': 'application/x-www-form-urlencoded',
                'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
            .then(res => {
                console.log('抢单详情获取成功', res)
                if (res.data.err_code === 0) {
                    this.setState({
                        type: res.data.sdInfo.class_name,
                        title: res.data.sdInfo.sd_title,
                        browsing: res.data.sdInfo.browse_times,
                        contactName: res.data.sdInfo.user_name,
                        contactNumber: res.data.sdInfo.user_phone,
                        address: res.data.sdInfo.user_address,
                        content: res.data.sdInfo.sd_desc,
                        images: res.data.sdInfo.file_path,
                        stateId: res.data.sdInfo.state,
                        stateName: res.data.sdInfo.state_name,
                        userId: res.data.sdInfo.user_id,
                        renderingImage: res.data.sdInfo.render_pics || []
                    })
                } else if (res.data.err_code === 88888) {
                    Taro.clearStorageSync()
                    Taro.showToast({
                        title: res.data.err_msg,
                        icon: 'none'
                    })
                    setTimeout(() => {
                        Taro.reLaunch({
                            url: '/pages/home/home'
                        })
                    }, 1500);
                }

            }
            )
            .catch(error => {
                console.log('抢单详情获取失败', error)
            })
    }
    //抢单请求
    GrabDemand({ demandId = 218 }) {
        Taro.request({
            url: URL.GrabDemand,
            method: 'POST',
            dataType: 'json',
            data: {
                demandId: demandId
            },
            header: {
                'content-type': 'application/x-www-form-urlencoded',
                'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
            .then(res => {
                if (res.data.err_code === 0) {
                    Taro.showToast({
                        title: '抢单成功',
                        icon: 'success',
                        duration: 1500
                    })
                    setTimeout(() => {
                        Taro.navigateTo({
                            url: '/pages/home/home'
                        })
                    }, 1500);

                } else if (res.data.err_code === 88888) {
                    loginExpired(res)
                } else {
                    Taro.showToast({
                        title: res.data.err_msg,
                        icon: 'none',
                        duration: 1500
                    })
                }


                console.log('抢单请求：', res)

            })

    }
    showImageButton() {
        this.setState({
            isShowRendering: true
        })
    }
    callPhoneNumber() {
        Taro.makePhoneCall({
            phoneNumber: this.state.contactNumber
        })
    }
    grabButtonHandler() {
        this.setState({ isOpen: true })
    }
    handleGrabModalClose() {
        this.setState({ isOpen: false })
    }
    handleGrabModalCancel() {
        this.setState({ isOpen: false })
    }
    handleGrabConfirm() {
        this.setState({ isOpen: false })
        // 确认抢单之后
        this.GrabDemand({ demandId: this.state.grabOrderId })
    }

    componentDidMount() {

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

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }
    goMyNeedsPublishPage() {
        Taro.navigateTo({
            url: '/pages/myNeedsPublish/myNeedsPublish'
        })
    }
    goToMyNeedsPage() {
        Taro.switchTab({
            url: '/pages/myNeeds/myNeeds'
        })
    }
    goMyNeedEditPage() {
        let id = this.$router.params.orderId
        Taro.navigateTo({
            url: '/pages/myNeedsEdit/myNeedsEdit?id=' + id
        })
    }
    deleteButton() {
        this.setState({ isDeleteModal: true })
    }
    handleWindowModCancel() {
        this.setState({ isDeleteModal: false })
    }
    handleWindowConfirm() {
        this.setState({ isDeleteModal: false })
        this.deleteMyNeeds({ demandId: this.$router.params.orderId })
    }
    deleteMyNeeds({ demandId }) {
        Taro.request({
            url: URL.DeleteMyNeeds,
            method: 'POST',
            dataType: 'json',
            data: {
                demandId: demandId
            },
            header: {
                'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
                'content-type': 'application/x-www-form-urlencoded',
                'X-Requested-With': 'XMLHttpRequest'
            }
        }).then(res => {

            if (res.data.err_code === 0) {
                Taro.showToast({
                    title: '删除成功',
                    icon: 'success',
                    duration: 1500
                })
                setTimeout(() => {
                    Taro.reLaunch({
                        url: '/pages/myNeeds/myNeeds'
                    })
                }, 1500);
            } else if (res.data.err_code === 88888) {
                loginExpired(res)
            } else {
                Taro.showToast({
                    title: res.data.err_msg,
                    icon: 'none',
                    duration: 1500
                })
            }
        })

    }

    render() {
        const localStoageUserId = Taro.getStorageSync('userInfo').user_id

        // 提示框
        const deleteModalWindowElement = <AtModal isOpened={this.state.isDeleteModal}>
            <AtModalHeader>提示</AtModalHeader>
            <AtModalContent>
                确认删除{this.state.needsItem.sd_title}？
      </AtModalContent>
            <AtModalAction>  <Button onClick={this.handleWindowModCancel.bind(this)}>取消</Button> <Button className='orange' onClick={this.handleWindowConfirm.bind(this)}>确定</Button>  </AtModalAction>
        </AtModal>
        let ButtonElement
        if (localStoageUserId === this.state.userId && this.state.stateId === '1') {
            ButtonElement = <View className='button-box'>
                <View className='button' onClick={this.goMyNeedsPublishPage.bind(this)}>
                    <Button size='mini' className='button-green'>
                        <AtIcon value='add' size='12' color='white'></AtIcon>
                        新增</Button>
                </View>
                <View className='button' onClick={this.goToMyNeedsPage.bind(this)}>
                    <Button size='mini' className='button-orange'>
                        <AtIcon value='' size='12' color='white'></AtIcon>
                        我的需求</Button>
                </View>
                <View className='button' onClick={this.goMyNeedEditPage.bind(this)}>
                    <Button size='mini' className='button-blue'>
                        <AtIcon value='settings' size='12' color='white'></AtIcon>
                        修改</Button>
                </View>

                <View className='button' onClick={this.deleteButton.bind(this)}>
                    <Button size='mini' className='button-dark-red'>
                        <AtIcon value='trash' size='12' color='white'></AtIcon>
                        删除</Button>
                </View>
            </View>
        } else if (localStoageUserId === this.state.userId && this.state.stateId != '1') {
            ButtonElement = <View className='button-box'>
                <View className='button' onClick={this.goMyNeedsPublishPage.bind(this)}>
                    <Button size='mini' className='button-green'>
                        <AtIcon value='add' size='12' color='white'></AtIcon>
                        新增</Button>
                </View>
                <View className='button' onClick={this.goToMyNeedsPage.bind(this)}>
                    <Button size='mini' className='button-orange'>
                        <AtIcon value='' size='12' color='white'></AtIcon>
                        我的需求</Button>
                </View>
            </View>
        } else if (this.state.stateId === '1') {
            ButtonElement = <View className='button-box'><View className='button' onClick={this.grabButtonHandler.bind(this)}>
                <Button size='mini' className='button-orange'>抢单</Button>
            </View></View>

        } else if (this.state.stateId === '2') {
            ButtonElement = <View className='button-box'><View className='button'>
                <Button size='mini' className='button-orange blur'>{this.state.stateName}</Button>
            </View></View>
        } else if (this.state.stateId === '3') {
            ButtonElement = <View className='button-box'><View className='button'>
                <Button size='mini' className='button-orange blur'>{this.state.stateName}</Button>
            </View></View>
        }



        // 提示模态弹窗element
        const modalMessageGrabElement = <AtModal isOpened={this.state.isOpen}>
            <AtModalHeader>提示</AtModalHeader>
            <AtModalContent>
                确认抢单？
            </AtModalContent>
            <AtModalAction> <Button onClick={this.handleGrabModalCancel.bind(this)}>取消</Button> <Button className='orange' onClick={this.handleGrabConfirm.bind(this)}>确定</Button> </AtModalAction>
        </AtModal>
        const imageElementArray = this.state.images.map((item, index) => {
            return <View className='image-wrapper' key={index}>

                <Image mode='aspectFit' src={URL.Base + item.file_path} style='max-width:100%; max-height:100%;' />

            </View>
        })

        return (
            <View className='grabOrderPage'>

                {modalMessageGrabElement}
                {deleteModalWindowElement}
                {this.state.isShowRendering ? <RenderingView rendering={this.state.renderingImage}></RenderingView> : null}
                {this.state.stateId === '3' && !this.state.isShowRendering ? <View className='button-box show-image-button'><View className='button' onClick={this.showImageButton.bind(this)}>
                    <Button className='button-orange'>查看效果图</Button>
                </View></View> : null}
                <View className='type box'>
                    <Text className='title'>行业分类：</Text>
                    <Text className='content'>{this.state.type}</Text>
                </View>
                <View className='sd-title box'>
                    <Text className='title'>业主需求标题：</Text>
                    <Text className='content'>{this.state.title}</Text>
                </View>
                <View className='browsing-amount box'>
                    <Text className='title'>浏览量：</Text>
                    <Text className='content'>{this.state.browsing}</Text>
                </View>
                <View className='contact-name box'>
                    <Text className='title'>联系人：</Text>
                    <Text className='content'>{this.state.contactName}</Text>
                </View>
                <View className='phone-number box' onClick={this.callPhoneNumber.bind(this)} >
                    <Text className='title'>联系电话：</Text>
                    <Text className='content'>{this.state.contactNumber}</Text>
                </View>
                <View className='address box'>
                    <Text className='title'>联系地址：</Text>
                    <Text className='content'>{this.state.address}</Text>
                </View>
                <View className='sd-content box'>
                    <Text className='title'>业主需求内容：</Text>
                    <Text className='content'>{this.state.content}</Text>
                </View>
                <View className='image-container box'>
                    {this.state.images.length ? <Text className='title'>业主需求图片:</Text> : null}
                    {imageElementArray}
                </View>
                {ButtonElement}


                <CopyrightComponent></CopyrightComponent>

            </View>
        )
    }
}

export default GrabOrderPage