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

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

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

import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'


import './grabOrderPage.scss'


class GrabOrderPage extends Component {
    config = {
        navigationBarTitleText: '抢单页面'
    }
    constructor() {
        super(...arguments);
        this.state = {
            type: '',
            title: '',
            browsing: '',
            contactName: '',
            contactNumber: '',
            address: '',
            content: '',
            isOpen: false, // 抢单消息提示
            grabOrderId: this.$router.params.orderId,
            stateId:'',
            stateName:''
        }
    }

    //获取抢单信息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)
                this.setState({
                    type: res.data.sdInfo.sd_type,
                    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,
                    stateId:res.data.sdInfo.state,
                    stateName:res.data.sdInfo.state_name,

                })
            }
            )
            .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_msg === 'success') {
                    Taro.showToast({
                        title: '抢单成功',
                        icon: 'success',
                        duration: 1500
                    })
                    setTimeout(() => {
                        Taro.navigateTo({
                            url: '/pages/home/home'
                        })
                    }, 1500);

                } else {
                    Taro.showToast({
                        title: res.data.err_msg,
                        icon: 'none',
                        duration: 1500
                    })
                }


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

            })

    }
    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() { }

    render() {
      
        // 提示模态弹窗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>

        return (
            <View className='grabOrderPage'>
                {modalMessageGrabElement}
                <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='button' onClick={this.grabButtonHandler.bind(this)}>
                        <Button size='mini' className='button-orange'>
                            <AtIcon value='close' size='12' color='white'></AtIcon> 
                            抢单</Button>
                    </View> */}
                    {this.state.stateId === '1' ? <View className='button'  onClick={this.grabButtonHandler.bind(this)}>
                            <Button size='mini' className='button-orange'>抢单</Button>
                        </View> : null || this.state.stateId === '2' ? <View className='button'>
                            <Button size='mini' className='button-orange blur'>{this.state.stateName}</Button>
                        </View> : null || this.state.stateId === '3' ? <View className='button'>
                            <Button size='mini' className='button-orange blur'>{this.state.stateName}</Button>
                        </View> : null}
               
                <CopyrightComponent></CopyrightComponent>

            </View>
        )
    }
}

export default GrabOrderPage