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

import { View, Text } from "@tarojs/components"
import { useEffect, useState, useMemo } 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 useProcessStatus, { getProcessSignBy } from "@/utils/hooks/useProcessStatus"
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 } = $instance.router.params

  const [orderInfos, setOrderInfos] = useState()

  const [isAssessVisible, setIsAssessVisible] = useState(false)

  const { processStatus } = useProcessStatus(orderInfos)

  //底部弹窗
  // 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=2`
            })
          }, 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
    })

  }

  const { processLabel, stateStyle, action : Actions } = useMemo(() => {
    const { label, color } = getProcessSignBy(processStatus)
    let action = <></>;

    switch (processStatus) {
      case 1:
      case 2:
        action = <ButtontWX butText='取消' styleType onClick={cancelPay} butWidth={150} butHeight={39} butFontSize={16} butBorderRadius={49} />;
        break;
      case 4:
        action = <ButtontWX butText='支付' onClick={pay} butWidth={150} butHeight={39} butFontSize={16} butBorderRadius={49} />;
        break;
      case 5:
        action = <ButtontWX butText='评价' onClick={startModle} butWidth={323} butHeight={49} butFontSize={16} butBorderRadius={49} />;
        break;
      case 3:
      case 6:
      default:
        break;
    }
    return  {
      processLabel: label,
      stateStyle: color,
      action
    }
  }, [processStatus])

  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}` }}  >{processLabel}</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' >
        {Actions}
      </View>
    </View>
  )
})