h5-colexiu/src/views/goods-order/components/after-sale-btns/index.tsx

import { moneyFormat } from '@/helpers/utils'
import { Button, Cell } from 'vant'
import { defineComponent } from 'vue'
import styles from '../../index.module.less'

export default defineComponent({
  name: 'AfterSaleBtns',
  props: {
    item: {
      type: Object,
      default: {}
    },
    onCancelOrder: {
      type: Function,
      default: (n: any) => {}
    },
    onPayOrder: {
      type: Function,
      default: (n: any) => {}
    },
    onConfirmReceipt: {
      type: Function,
      default: (n: any) => {}
    },
    onAginOrder: {
      type: Function,
      default: (n: any) => {}
    }
  },
  setup({ item, onCancelOrder, onPayOrder, onConfirmReceipt, onAginOrder }) {
    return () => (
      <Cell
        center
        v-slots={{
          title: () => (
            <div class={styles.orderPrice}>
              订单金额
              <span class={styles.price} style={{ paddingLeft: '5px' }}>
                <i>¥</i>
                {moneyFormat(item.payAmount)}
              </span>
            </div>
          ),
          default: () => (
            <div class={styles.btnList}>
              {/* <span class={styles.sureGoods}>已确认收货</span> */}

              {item.status === 0 || item.status === 6 ? (
                <>
                  <Button
                    size="small"
                    round
                    onClick={(e: Event) => {
                      e.stopPropagation()
                      onCancelOrder(item)
                    }}
                  >
                    取消订单
                  </Button>
                  <Button
                    size="small"
                    round
                    type="primary"
                    onClick={(e: Event) => {
                      e.stopPropagation()
                      onPayOrder(item)
                    }}
                  >
                    继续支付
                  </Button>
                </>
              ) : null}
              {item.status === 2 ? (
                <Button
                  size="small"
                  round
                  type="primary"
                  onClick={(e: Event) => {
                    e.stopPropagation()
                    onConfirmReceipt(item)
                  }}
                >
                  确认收货
                </Button>
              ) : null}
              {item.status === 3 ? (
                <Button
                  size="small"
                  round
                  type="primary"
                  onClick={(e: Event) => {
                    e.stopPropagation()
                    onAginOrder(item)
                  }}
                >
                  再来一单
                </Button>
              ) : null}
            </div>
          )
        }}
      ></Cell>
    )
  }
})