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._type === '8' && data.shippingType === 2 ? "待核销" : 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.unique,data.orderId)"
        >
          去评价
        </view>
        <Goods
            row
            :jump="false"
            imgWidth="200rpx"
            info-padding="10rpx 40rpx"
            :goods="item.productInfo"
        >
          <template #options>
            <view
                class="goods-options">
              <!-- sku select -->
              <view class="sku-row flex">
                <view
                    class="sku-info flex flex-jc__sb flex-ai__center"
                >
                  <view class="info">
                    {{
                      item.productInfo && item.productInfo.attrInfo && item.productInfo.attrInfo.sku
                    }}
                  </view>
                  <view>
                  </view>
                </view>
              </view>
              <!-- 售后 -->

              <!-- bottom -->
              <view class="price-row flex flex-ai__center flex-jc__sb">
                <!-- price -->
                <view class="price-box flex flex-ai__center">
                  ￥{{ item.truePrice }}
                </view>
                <!--  -->
                <view class="flex flex-ai__center">
                  <view
                      class="after-sale-box"
                      v-if="item.orderDetailState!==1"
                  >
                    <span v-if="item.orderDetailState===2"> 售后中 </span>
                    <span v-if="item.orderDetailState===3"> 售后完成 </span>
                  </view>
                  <view class="price-box cart-num flex flex-ai__end">
                    x{{ item.cartNum }}
                  </view>
                </view>
              </view>
            </view>
          </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(1)"
          >
            取消订单
          </view>
          <view
              v-if="data._status._type === '0'"
              class="order-actions-primary"
              @tap="handlePay"
          >
            立即付款
          </view>
          <view
              v-if="(data.shippingType ===1&&['1','2','3','4','8','6'].includes(data._status._type))||data.shippingType ===2&&['6'].includes(data._status._type)"
              class="order-actions-default"
              @tap="toSelectRefundGood(data.id)"
          >
            申请退款
          </view>
          <view
              v-if="(data.shippingType ===2 && ['8'].includes(data._status._type))"
              class="order-actions-default"
              @tap="showModal(3)"
          >
            取消订单
          </view>
          <!-- _type: 2待收货 3已收货 4已完成 8代发货 6待成团 7已成团 -->
          <view
              v-if="data._status._type==='8' && data.shippingType === 2"
              class="order-actions-primary"
              @tap="emit('checkOffCode',data.writeOffCode)"
          >
            核销码
          </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','5','-2'].includes(data._status._type)"
              class="order-actions-default"
              @tap="showModal(0)"
          >
            删除订单
          </view>
          <view
              v-if="data._status._type === '6'"
              class="order-actions-primary"
              @tap="goGroupByDetail({teamworkId:data.teamworkId})"
          >
            邀请好友拼团
          </view>
        </view>
      </view>
    </view>
    <Modal
        ref="modalRef"
        :content="modalTitle"
        @confirm="confirmModal" />
  </view>
</template>

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

import { useRouter } from "@/hooks/useRouter";
import { useInterface } from "@/hooks/useInterface";
import { useOrder } from "@/hooks/useOrder";
import { useJump } from "@/hooks/useJump";
import Goods from "@/components/goodsComponents/Goods.vue";


const {
  modalRef,
  modalType,
  modalTitle,
  showModal,
  cancelOrder,
  deleteOrder,
  toEvaluate,
  toSelectRefundGood,
  showWsReceipt,
} = useOrder()


const {push} = useRouter()
const {goGroupByDetail} = useJump()

const {toast} = useInterface()

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

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.totalCouponPrice)
// 订单总价
const totalPrice = ref(props.data.totalPrice)


/**
 * 确认取消订单
 * @returns {Promise<void>}
 */
async function doCancelOrder() {
  cancelOrder(data.value).then(() => {
    emit('refresh')
  })
}

/**
 * 确认删除订单
 * @returns {Promise<void>}
 */
async function doDeleteOrder() {
  deleteOrder(data.value).then(() => {
    emit('refresh')
  })
}

/**
 * 确认收货
 * @returns {Promise<void>}
 */
async function doTakeGoods() {
  let option = {
    uni: data.value.orderId,
  }
  let payInfo = JSON.parse(data.value.payInfo)
  showWsReceipt(payInfo.transaction_id).then(async (res) => {
    if (res === 'success') {
      await orderTake(option)
      emit('refresh')
      toast({title: '已收货'});
    }
  })
}


const doCancelAnOrder = async () => {
  await cancelAfterVerification({id: data.value.orderId})
  toast({title: '取消成功'})
  emit('refresh')
}


/**
 * 确认弹窗
 */
function confirmModal() {
  const funcArr = [doDeleteOrder, doCancelOrder, doTakeGoods, doCancelAnOrder]
  funcArr[modalType.value]()
}

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


function toOrderInfo() {
  push({url: '/pages/orderInfo/orderInfo'}, {
    data: {
      key: data.value.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;
  }
}

// 商品SKU 数量等操作条
.goods-options {
  width: 100%;


  .sku-row {
    margin-bottom: 30rpx;

    .sku-info {
      @include usePadding(10, 4);
      border: 1rpx solid #ccc;
      border-radius: 5rpx;
      font-size: 24rpx;
      transition: all .3s;
      max-width: 100%;


      .info {
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      &:active {
        scale: 1.1;
      }

      .icon {
        margin-left: 15rpx;
      }
    }
  }

  .price-row {
    width: 100%;

    .price-box {
      font-size: 30rpx;
      color: $primary-color;

      .old-price {
        font-size: 20rpx;
        color: $tips-color;
        text-decoration: line-through;
        margin-left: 10rpx;
      }
    }

    .after-sale-box {
      font-size: 22rpx;
      margin-right: 5rpx;
      color: $tips-color;
    }


    .cart-num {
      font-size: 24rpx;

      .input {
        width: 120rpx;


        input {
          width: 100%;
          text-align: center;
          color: #333;
        }
      }

      .button {
        font-size: 32rpx;
        width: 34rpx;
        aspect-ratio: 1/1;
        border-radius: 5rpx;
        border: 2rpx solid #cccccc;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .3s;

        &:active {
          scale: 1.2;
        }
      }
    }
  }
}
</style>