mdaya-shop/src/views/goods-order/components/after-sale-btns/index.tsx

import { moneyFormat } from '@/helpers/utils'
import { Button, Cell } from 'vant'
import { defineComponent, PropType } 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}>
              <div>
                订单金额
                <span class={styles.price} style={{ paddingLeft: '5px' }}>
                  <i>¥ </i>
                  {moneyFormat(item.payAmount)}
                </span>
              </div>
              { !!item.couponAmount && <div class={styles.coupon}>优惠劵: -¥ {moneyFormat(item.couponAmount)}</div>}
            </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 ? (
                <>
                  <span class={styles.confirmReceipt}>已确认收货</span>
                  <Button
                    size="small"
                    round
                    type="primary"
                    onClick={(e: Event) => {
                      e.stopPropagation()
                      onAginOrder!(item)
                    }}
                  >
                    再来一单
                  </Button>
                </>
              ) : null} */}
            </div>
          )
        }}
      ></Cell>
    )
  }
})