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

<template>
    <view
        :class="['order']"
        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="showModal(0)"
            >
              取消订单
            </view>
            <view
                v-if="data._status._type === '0'"
                class="order-actions-primary"
                @tap="handlePay"
            >
              立即付款
            </view>
            <view
                v-if="!['0','5','-1','-2'].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="showModal(2)"
            >
              确认收货
            </view>
            <view
                v-if="['4'].includes(data._status._type)"
                class="order-actions-default"
                @tap="showModal(1)"
            >
              删除订单
            </view>
          </view>
        </view>
      </view>
      <Modal ref="modalRef" :content="modalTitle" @confirm="handleModalConfirm" />
    </view>
</template>

<script setup>
import { computed, ref, unref } from 'vue';
import { orderCancel, orderDelete, orderTake } from '@/api/order'
import Modal from "@/components/Modal/index.vue"

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

const {push} = useRouter()
const {toast} = useInterface()

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 modalRef = ref()
const modalType = ref(0) // 0取消订单 1删除订单 2确认收获
const modalTitle = computed(()=>{
  const tipArr = ['确认取消订单吗？','确认删除订单吗？','确认要确认收货吗？']
  return tipArr[modalType.value]
})

/**
 * 弹窗确认
 */
function handleModalConfirm(){
  const funcArr = [doCancelRequest,doDeleteRequest,doTakeRequest]
  funcArr[modalType.value]()

}

/**
 * 打开弹窗
 * @param {number} type  0取消订单 1删除订单 2确认收获
 */
function showModal(type = 0){
  modalType.value = type
  unref(modalRef).show()
}

/**
 * 确认取消订单
 * @returns {Promise<void>}
 */
async function doCancelRequest(){
  await orderCancel({
    id: data.value.orderId
  })
  emit('refresh')
  toast({title: '已取消'});
}

/**
 * 确认删除订单
 * @returns {Promise<void>}
 */
async function doDeleteRequest(){
  await orderDelete({
    uni: data.value.orderId
  })
  emit('refresh')
  toast({title: '删除成功'});
}

/**
 * 确认收货
 * @returns {Promise<void>}
 */
async function doTakeRequest(){
  let option = {
    uni: data.value.orderId,
  }
  await orderTake(option)
  emit('refresh')
  toast({title: '已收货'});
}

function toSelectRefundGood(){
  push({url: '/pages/selectRefundGood/selectRefundGood'}, {
    data: {
      id: data.value.id
    }
  })
}

function handlePay(){
  emit('pay', data.value.orderId)
}


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


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


</script>

<style lang="scss" scoped>
.order-header{
  width: 100%;
  box-sizing: border-box;
  .order-logo,.order-status{
    flex-shrink: 0;
  }
  .order-logo{
    white-space: nowrap;
  }
  .order-status{
    max-width: 80%;
    text-align: right;
    white-space: pre-wrap;
    font-size: 22rpx;
  }
}
</style>