yshop-pro-uniapp/components/order/order.vue

<template>
  <view>
    <view
        :class="['order', className]"
        v-if="data"
    >

      <view
          class="order-header"
          @tap="toOrderInfo"
      >
        <view class="order-logo">
          <view class="color-y">Y</view>
          <view>SHOP商城</view>
        </view>
        <view
            class="order-status status-2"
            v-if="data._status"
        >
          {{ data._status._title }}
        </view>
      </view>
      <view
          class="order-goods"
          @tap="toOrderInfo"
      >
        <view
            v-for="(item, index) in data.cartInfo"
            class="order-evaluate"
            :class="{evaluateBtn: data._status._type == 3}"
        >
          <view
              v-if="data._status._type == 3 && item.isReply === 0"
              class="order-actions-primary order-evaluate-btn"
              @tap.stop="toEvaluate(item)"
          >
            去评价
          </view>
          <goods
              list
              interval
              desc="3"
              showAction
              model
              :purchase="item.cartNum"
              :data="item.productInfo"
          >
            <template #price>
              ￥{{ item.truePrice }}
            </template>
          </goods>
        </view>
      </view>
      <view
          class="order-info"
          @tap="toOrderInfo"
      >
        <view class="text">总价：¥{{ data.cost }}</view>
        <view class="text">优惠：¥{{ couponPrice }}</view>
        <view class="text">运费：¥{{ totalPostage }}</view>
        <view class="text flex flex-ai__center">总计：
          <view class="total-price">¥{{ totalPrice }}</view>
        </view>
      </view>

      <view v-if="data._status">
        <view
            class="order-actions"

        >
          <!-- 未支付 -->
          <view class="order-actions-left">
          </view>
          <view class="order-actions-btns">
            <view
                v-if="data._status._type == 0"
                class="order-actions-default"
                @tap="handleCancel"
            >
              取消订单
            </view>
            <view
                v-if="data._status._type == 0"
                class="order-actions-primary"
                @tap="handlePay"
            >
              立即付款
            </view>
            <view
                v-if="['1','2','3','4'].includes(data._status._type)"
                class="order-actions-default"
                @tap="toSelectRefundGood"
            >
              申请退款
            </view>
            <view
                class="order-actions-default"
                v-if="data._status._type == 2"
                @tap="toOrderInfo"
            >
              查看物流
            </view>
            <view
                v-if="data._status._type == 2"
                class="order-actions-primary"
                @tap="handleOrderTake"
            >
              确认收货
            </view>
            <view
                v-if="['4'].includes(data._status._type)"
                class="order-actions-default"
                @tap="handleDelete"
            >
              删除订单
            </view>
          </view>
        </view>
      </view>

    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { orderCancel, orderDelete, orderTake } from '@/api/order'

import { useRouter } from "@/hooks/useRouter";

const {push} = useRouter()

const emit = defineEmits(['refresh', 'pay'])

const props = defineProps(['class', 'data'])

const data = ref(props.data)

// 运费金额
const totalPostage = ref(props.data.totalPostage)
// 实际支付金额
const payPrice = ref(props.data.payPrice)
// 优惠券金额
const couponPrice = ref(props.data.couponPrice)
// 订单总价
const totalPrice = ref(props.data.totalPrice)

const handleCancel = async () => {
  uni.showModal({
    title: '提示',
    content: '确认取消订单',
    success: async (res) => {
      if (res.confirm) {
        await orderCancel({
          id: data.value.orderId
        })
        data.value = null
        uni.showToast({
          title: '已取消',
          duration: 2000
        });
      } else if (res.cancel) {
      }
    }
  });
}


const toSelectRefundGood = () => {
  push({url: '/pages/selectRefundGood/selectRefundGood'}, {
    data: {
      orderId: data.value.orderId,
      id: data.value.id,
      status: data.value.status
    }
  })
}

const handlePay = () => {
  emit('pay', data.value.orderId)
  /*  push({url: '/pages/selectPlay/selectPlay'}, {
      data: {
        key: data.value.unique,
        orderId: data.value.orderId,
      }
    })*/
}


const toOrderInfo = () => {
  push({url: '/pages/orderInfo/orderInfo'}, {
    data: {
      key: data.value.unique,
      orderId: data.value.orderId,
    }
  })
}


const toEvaluate = (item) => {
  push({url: '/pages/evaluate/evaluate'}, {
    data: {
      unique: item.unique,
      orderId: data.value.orderId,
    }
  })
}


const handleDelete = async () => {
  uni.showModal({
    title: '提示',
    content: '确认取消订单',
    success: async (res) => {
      if (res.confirm) {
        await orderDelete({
          uni: data.value.orderId
        })
        data.value = null
        uni.showToast({
          title: '已删除',
          duration: 2000
        });
      } else if (res.cancel) {
      }
    }
  });
}


const handleOrderTake = async () => {
  uni.showModal({
    title: '提示',
    content: '确认收货',
    success: async (res) => {
      if (res.confirm) {
        let option = {
          uni: data.value.orderId,
        }
        await orderTake(option)
        emit('refresh')
        uni.showToast({
          title: '已收货',
          duration: 2000
        });
      } else if (res.cancel) {
      }
    }
  });

}


</script>

<style lang="scss">

</style>