machinery-miniapp/src/pages/OrderInfo/index.jsx

import { View, Text } from "@tarojs/components"
import { useEffect, useState } from "react"
import Taro, { useDidShow } from "@tarojs/taro"
import CustomNav from '@/components/CustomNav'
import ButtontWX from '@/components/ButtontWX'
import formatTimes from "@/utils/codeSegment"
import withLayout from '@/layouts'
import formatPrice from "@/utils/formatPrice"
import AssessModel from "@/components/AssessModel"

import { orderPrepay, orderDelete, orderInfo, orderRefund } from "@/services/order"
// import BottomMoadl from '@/components/BottomMoadl/index'






import './style.less'

export default withLayout((props) => {
  // const { stateType } = props

  const $instance = Taro.getCurrentInstance()
  const { orderId, stateType, stateStyle } = $instance.router.params

  const [orderInfos, setOrderInfos] = useState()
  console.log("🚀 ~ file: index.jsx ~ line 27 ~ stateType ~ stateType", stateType)
  const [isAssessVisible, setIsAssessVisible] = useState(false)


  //底部弹窗
  // const [showFrame, setShowFrame] = useState(false)
  // const setRecommend = () => {
  //   setShowFrame(!showFrame)
  // }

  const cancelPay = () => {
    Taro.showModal({
      title: '提示',
      content: '您确定要取消此订单吗？',
      success: function (res) {
        if (res.confirm) {
          orderDelete(orderId).then((e) => {
            console.log('订单取消/删除', e);
            Taro.showToast({
              title: '订单取消成功',
              icon: 'success',
              duration: 2000
            }).then(() => {
              setTimeout(() => {
                Taro.navigateBack({
                  delta: 1
                })
              }, 1000)
            })
          })
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  }

  useEffect(() => {
    if (orderId) {
      orderInfo(orderId).then((res) => {
        setOrderInfos(res)
      })
    } else {

      Taro.showToast({
        title: '暂无订单详情',
        icon: 'error',
        duration: 2000
      }).then(() => {
        setTimeout(() => {
          Taro.navigateBack({
            delta: 1
          })
        }, 1000)
      })
    }

  }, [orderId])

  const requestPayment = (params) => {
    Taro.hideLoading()
    console.log("🚀 ~ file: index.jsx ~ line 92 ~ requestPayment ~ params", params)
    Taro.requestPayment({
      ...params,

      package: params.packageValue,
      success: () => {
        Taro.showToast({
          title: "支付成功",
          icon: "success",
          duration: 1000,
        }).then(() => {
          setTimeout(() => {
            Taro.reLaunch({
              url: `/pages/index/index?tab=1`
            })
          }, 400)
        })
      },
      fail: (e) => {
        Taro.showToast({
          title: "支付失败",
          icon: "none",
          duration: 2000,
        });
        Taro.reLaunch({
          // url: `/pages/MineUserAll/AllOrder/index?tabJump=1`
        })
      },
    })
  }





  const pay = () => {

    orderPrepay(orderId, {
      payType: 'wx',

    }).then((e) => {
      console.log('订单返回', e);
      Taro.showLoading({
        title: '支付中',
      })
      requestPayment(e)

    })
    //支付逻辑
  }

  //退单
  const orderRefunds = () => {
    Taro.showLoading({
      title: '退单申请中',
    })
    orderRefund(orderId).then(() => {
      Taro.showLoading()

      Taro.showToast({
        title: "退单成功",
        icon: "none",
        duration: 2000,
      }).then(() => {
        setTimeout(() => {
          Taro.navigateBack({
            delta: 1
          })
        }, 400)


      })
    }).catch(() => {
      Taro.showLoading()
      Taro.showToast({
        title: "请重试",
        icon: "error",
        duration: 2000,
      });
    })
  }
  const startModle = () => {
    setIsAssessVisible(true)

  }
  const onClose = () => {
    setIsAssessVisible(false)
    Taro.navigateBack({
      delta: 1
    })

  }


  return (
    <View className='page-index'>
      <View className='index-navbar'>
        <CustomNav title='订单详情' />
      </View>
      <AssessModel orderId={orderId} showCutover={isAssessVisible} maskClosable={isAssessVisible} onClose={onClose} onFinish={onClose} />
      {/* <BottomMoadl frameTitle='支付方式' flag={showFrame} onRecommend={setRecommend} /> */}
      <View className='orders-listBox-RihtboxBoxOrderViewText'>
        <View className='View-LiftTextTop'>订单编号：<Text>{orderInfos?.orderNo}</Text></View>
        <View>农机名称：<Text>{orderInfos?.machineryName}</Text></View>
        <View>作业面积：<Text>{orderInfos?.amount}</Text></View>
        <View>需求时间：<Text>{formatTimes(orderInfos?.appointmentDate, 'yyyy-MM-dd')}</Text></View>
        <View>下单时间：<Text>{formatTimes(orderInfos?.createDate, 'yyyy-MM-dd')}</Text></View>
        <View>订单状态：<Text style={{ color: `${stateStyle}` }}  >{stateType === '已付款' ? '已付款,待调度' : stateType}</Text></View>
        <View className='View-LiftTextBotton'>
          <View className='feiyongStyle'>费用：<Text className='feiyongStyle-charges' >{formatPrice(orderInfos?.charges)}</Text></View>
          <View className='feiyongStyle'>状态：<Text style={{ color: `${stateStyle}` }} className='feiyongStyle-stateStyle' >{orderInfos?.payStatus === 1 ? '已付款' : '待付款'}</Text></View>
        </View>
      </View>
      <View className='BottomtBut' >
        <>
          {
            stateType == '已完成' ? <></>
              : stateType == '进行中' ? <></>
                : stateType == '待评价' ? <ButtontWX butText='评价' onClick={startModle} butWidth={323} butHeight={49} butFontSize={16} butBorderRadius={49} />
                  : stateType == '待作业' ? <ButtontWX butText='退单' onClick={orderRefunds} butWidth={323} butHeight={49} butFontSize={16} butBorderRadius={49} />
                    : stateType == '待付款' ? <>
                      <ButtontWX butText='取消' styleType onClick={cancelPay} butWidth={150} butHeight={39} butFontSize={16} butBorderRadius={49} />
                      <ButtontWX butText='支付' onClick={pay} butWidth={150} butHeight={39} butFontSize={16} butBorderRadius={49} />
                    </> : stateType == '已付款' ?
                      <ButtontWX butText='退单' onClick={orderRefunds} butWidth={323} butHeight={49} butFontSize={16} butBorderRadius={49} />
                      // <ButtontWX butText={`${orderInfos?.payStatus == 3 ? '退单申请中' : '退单'}`} disabled={orderInfos?.payStatus == 3 ? true : false} onClick={orderInfos?.payStatus == 3 ? '' : orderRefunds} butWidth={323} butHeight={49} butFontSize={16} butBorderRadius={49} />
                      : stateType == '待作业' ? <ButtontWX butText={`${orderInfos?.payStatus == 3 ? '退单申请中' : '退单'}`} disabled={orderInfos?.payStatus == 3 ? true : false} onClick={orderInfos?.payStatus == 3 ? '' : orderRefunds} butWidth={323} butHeight={49} butFontSize={16} butBorderRadius={49} />

                        : stateType == '已退单' ? <></>
                          : stateType == '退单申请中' ? <ButtontWX butText={`${orderInfos?.payStatus == 3 ? '退单申请中' : '退单'}`} disabled={orderInfos?.payStatus == 3 ? true : false} onClick={orderInfos?.payStatus == 3 ? '' : orderRefunds} butWidth={323} butHeight={49} butFontSize={16} butBorderRadius={49} />

                            : <></>
          }
        </>




      </View>
    </View>
  )
})