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">
          <!-- <image :src="data." alt=""> -->
        </view>
        <view class="order-status status-1">
          {{ data._status._msg }}
        </view>
      </view>
      <view
        class="order-goods"
        @tap="toOrderInfo"
      >
        <goods
          list
          interval
          desc="3"
          showAction
          model
          purchase="x3"
          :data="item.productInfo"
          v-for="(item, index) in data.cartInfo"
        />
      </view>
      <view
        class="order-info"
        @tap="toOrderInfo"
      >
        <text>总价：¥{{ payPrice }}</text>
        <text>优惠：¥{{ deductionPrice }}</text>
        <text>运费：-¥{{ freightPrice }}</text>
        <text>总计：¥{{ totalPrice }}</text>
      </view>

      <view
        class="order-actions"
        v-if="data._status._type == 0"
      >
        <!-- 未支付 -->
        <view class="order-actions-left">
        </view>
        <view class="order-actions-btns">
          <view
            class="order-actions-delete"
            @tap="handleCancel"
          >
            取消订单
          </view>
          <view
            class="order-actions-primary"
            @tap="handlePay"
          >
            立即付款
          </view>
        </view>
      </view>


      <view
        class="order-actions"
        v-if="data._status._type == 1"
      >
        <!-- 待发货 -->
        <view class="order-actions-left">
        </view>

        <view class="order-actions-btns">
          <view
            class="order-actions-delete"
            @tap="toSelectRefundGood"
          >
            申请退款
          </view>

        </view>
      </view>

      <view
        class="order-actions"
        v-if="data._status._type == 2"
      >
        <!-- 待收货 -->
        <view class="order-actions-left">
        </view>
        <view class="order-actions-btns">

          <view
            class="order-actions-delete"
            @tap="toOrderInfo"
          >
            查看物流
          </view>
          <view
            class="order-actions-primary"
            @tap="handleOrderTake"
          >
            确认收货
          </view>

        </view>
      </view>
      <view
        class="order-actions"
        v-if="data._status._type == 3"
      >
        <!-- 待评价 -->
        <view class="order-actions-left">
        </view>
        <view class="order-actions-btns">
          <view
            class="order-actions-delete"
            @tap="handleDelete"
          >
            删除订单
          </view>
          <view
            class="order-actions-primary"
            @tap="toOrderInfo"
          >
            去评价
          </view>
        </view>
      </view>

      <view
        class="order-actions"
        v-if="data._status._type == 4"
      >
        <!-- 已完成 -->
        <view class="order-actions-left">
        </view>
        <view class="order-actions-btns">
          <view
            class="order-actions-delete"
            @tap="handleDelete"
          >
            删除订单
          </view>
          <view
            class="order-actions-primary"
            @tap="toOrderInfo"
          >
            查看订单
          </view>
        </view>
      </view>

      <view
        class="order-actions"
        v-if="data._status._type == 5"
      >
        <!-- 退款中 -->
        <view class="order-actions-left">
        </view>
        <view class="order-actions-btns">
          <view
            class="order-actions-primary"
            @tap="toOrderInfo"
          >
            查看订单
          </view>
        </view>
      </view>

      <view
        class="order-actions"
        v-if="data._status._type == 6"
      >
        <!-- 已退款 -->
        <view class="order-actions-left">
        </view>
        <view class="order-actions-btns">
          <view
            class="order-actions-primary"
            @tap="toOrderInfo"
          >
            查看订单
          </view>
        </view>
      </view>

      <view
        class="order-actions"
        v-if="data._status._type == 7"
      >
        <!-- 退款 -->
        <view class="order-actions-left">
        </view>
        <view class="order-actions-btns">
          <view
            class="order-actions-primary"
            @tap="toOrderInfo"
          >
            查看订单
          </view>
        </view>
      </view>

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

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

import { navigateTo, back } from '@/utils/router'

const emit = defineEmits(['refresh'])

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

const data = ref(props.data)

// 运费金额
const freightPrice = ref(props.data.freightPrice)
// 实际支付金额
const payPrice = ref(props.data.payPrice)
// 优惠券金额
const couponPrice = ref(props.data.couponPrice)
// 抵扣金额
const deductionPrice = ref(props.data.deductionPrice)
// 订单总价
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) {
        console.log('用户点击取消');
      }
    }
  });
}


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

const handlePay = () => {

  navigateTo({
    url: '/pages/selectPlay/selectPlay',
    query: {
      key: data.value.unique,
      orderId: data.value.orderId,
    }
  })
}


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


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


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



const handleOrderTake = async () => {
  uni.showModal({
    title: '提示',
    content: '确认收货',
    success: async (res) => {
      console.log("gxs --> % success: % res:\n", res)
      if (res.confirm) {
        let option = {
          uni: data.value.orderId,
        }
        const res = await orderTake(option)

        emit('refresh')
      } else if (res.cancel) {
        // console.log('用户点击取消');
      }
    }
  });

}


</script>

<style lang="less">
</style>