mall-front/src/pages/order-detail/index.jsx

import React from 'react'
import { Image, Text, View } from '@tarojs/components'
import './index.scss'
import { useEffect } from 'react';
import { useState } from 'react';
import backNav from '@/images/backNav.png'
import success from '@/images/success.png'
import clock from '@/images/clock.png'
import tick from '@/images/tick.png'
import Taro from '@tarojs/taro';
import { useRouter } from '@tarojs/taro';
import { Popup } from '@nutui/nutui-react-taro';
import { formatDateByStr, navigateTo, orderState, orderStateNotice } from '../../utils/utils';
import { orderList } from '../../utils/api';



function Index() {

  const param = useRouter().params
  const [id] = useState(param.id)
  const [chanel] = useState('all')
  const [actionVisible, setActionVisible] = useState(false)
  const [actionText, setActionText] = useState('')
  const [detail, setDetail] = useState({})



  useEffect(() => {
    if (!id) return
    orderList(chanel, { id }).then(re => {
      if (!re) return
      if (!re.items?.length) return
      setDetail(re.items[0])
    })

  }, [id])


  // 跳转
  const navDetailFn = (id) => {
    Taro.navigateTo({
      url: `/pages/pay-success/index?id=${id}`
    })
  }

  // 返回页面
  const backFn = () => {
    Taro.getCurrentPages().length > 0 && Taro.navigateBack()
  }

  // 选择地址
  const goAddr = (id) => {
    Taro.navigateTo({
      url: '/pages/address/index?id=' + id
    })
  }

  return (
    <View className='order-detail-container'>
      <View className='order-detail-detail-title'>
        <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
        订单详情
      </View>
      <View className='order-detail-state flex-between'>
        <View className='flex-center'>
          <Image src={detail.state == 'received' ? tick : clock} className='w-6 h-6 mr-1' />
          {orderState.get(detail.state)}
        </View>
        <Text>{orderStateNotice.get(detail.state)}</Text>
      </View>
      <View className='order-detail-body' >
        <View className='order-detail-address'>
          <View className='order-detail-address-area'>
            <View className='address-item'>
              <View className='address-item-name'>{detail.recipient_name} {detail.recipient_phone}</View>
              <View className='address-info'>{`${detail.province?.name}${detail.city?.name}${detail.county?.name}${detail.address}`}</View>
              {/* <View className='address-item-name text-gold'>选择地址</View> */}
            </View>
          </View>
        </View>

        <View className='order-detail-goods'>
          <View className='mt-22 order-detail-goods-title'>商品信息</View>
          <View className='order-detail-goods-info'>
            <Image className='order-detail-goods-img' src={detail.product?.cover_image} />
            <View className='order-detail-goods-content'>
              <View className='order-detail-goods-content-title line-clamp-1'>{detail.product?.name}</View>
              <View className='order-detail-goods-content-price'>
                <View className='order-detail-goods-content-price-1'>¥{detail.amount}</View>
                <View className='order-detail-goods-content-price-num'>x1</View>
              </View>
            </View>
          </View>
        </View>
        <View className='order-detail-price-container'>
          <View>总价：</View>
          <View className='order-detail-price-p'>¥1{detail.amount}</View>
        </View>
      </View>

      <View className='order-detail-body flex-col' >
        <View className='order-detail-title mt-22'>订单信息</View>
        <View className="flex-between order-detail-item">
          <Text>商品合计</Text>
          <Text className='order-detail-item-right'>¥{detail.amount}</Text>
        </View>
        <View className="flex-between order-detail-item">
          <Text>运费</Text>
          <Text className='order-detail-item-right'>¥0</Text>
        </View>
        <View className="flex-between order-detail-item">
          <Text>优惠券</Text>
          <Text className='order-detail-item-right'>¥0</Text>
        </View>
        <View className="flex-between order-detail-item">
          <Text>购物金折扣</Text>
          <Text className='order-detail-item-right'>¥{detail.channel == 'shopping_score_mall' ? detail.amount : 0}</Text>
        </View>
      </View>

      <View className='order-detail-body flex-col' >
        <View className="flex-between order-detail-item">
          <Text>订单编号</Text>
          <View className='flex-center'>
            <Text className='order-detail-item-right'>{detail.id}</Text>
            <View className='order-detail-copy flex-center' onClick={() => {
              Taro.setClipboardData({
                data: detail.id
              })
            }}>复制</View>
          </View>
        </View>
        <View className="flex-between order-detail-item">
          <Text>提交时间</Text>
          <Text className='order-detail-item-right'>{formatDateByStr(detail.created_at)}</Text>
        </View>
        <View className="flex-between order-detail-item">
          <Text>支付方式</Text>
          <Text className='order-detail-item-right'>在线支付</Text>
        </View>
      </View>
      <View className='flex-end order-detail-action'>
        {/* <View className='order-detail-btn flex-center order-btn-cancel'>取消订单</View>
        <View className='order-detail-btn flex-center order-btn-pay'>去支付</View> */}
        <View className='order-detail-algin-btn flex-center order-btn-algin' onClick={() => {
          navigateTo(`/pages/settle/index?id=${detail.product_id}`)
        }}>再次购买</View>
      </View>
    </View>
  )
}

export default Index