yshop-pro-uniapp/pages/orderInfo/component/OrderGoodsInfo.vue

<!--
    @name: OrderGoodsInfo
    @author: kahu4
    @date: 2024-01-22 11:55
    @description：OrderGoodsInfo
    @update: 2024-01-22 11:55
-->
<script setup>
import { toRefs } from "vue";
import { useRouter } from "@/hooks/useRouter";

const {push} = useRouter()

const props = defineProps({
  orderInfoData: {
    type: Object,
    required: true
  }
})

const {orderInfoData} = toRefs(props)

/**
 * 去评价
 */
const toEvaluate = (unique, orderId, isRedirectTo) => {
  let config = {
    data: {
      unique: unique,
      orderId: orderId
    }
  }
  if (isRedirectTo) {
    config.type = 'redirectTo'
  }
  push({url: '/pages/evaluate/evaluate'}, config)
}
</script>

<template>
  <view class="order-good">
    <view
        v-for="item in orderInfoData.cartInfo"
        :class="{evaluateBtn: orderInfoData._status._type == 3}"
        class="order-evaluate"
    >
      <goods
          :data="item.productInfo"
          :purchase="item.cartNum"
          desc="3"
          interval
          link
          list
          model
          showAction
      >
        <template #price>
          ￥{{ item.truePrice }}
        </template>
        <template #action>
          <view class="flex flex-column flex-ai__end">
            <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>
        </template>
      </goods>
      <view
          v-if="orderInfoData.status == 2 && item.isReply === 0"
          class="order-actions-primary order-evaluate-btn"
          @tap.stop="toEvaluate(item.unique,orderInfoData.orderId,true)"
      >去评价
      </view>
    </view>
    <view class="order-infos infos mb-20 infos-right border-top">
      <view class="info-cell">
        <view class="info-cell-label">商品总价：</view>
        <view class="info-cell-value">¥{{ orderInfoData.cost }}</view>
      </view>
      <view class="info-cell ">
        <view class="info-cell-label">优惠：</view>
        <view class="info-cell-value">¥{{ orderInfoData.totalCouponPrice }}</view>
      </view>
      <view class="info-cell ">
        <view class="info-cell-label">运费：</view>
        <view class="info-cell-value">¥{{ orderInfoData.totalPostage }}</view>
      </view>
      <view class="info-cell ">
        <view class="info-cell-label">总计：</view>
        <view class="info-cell-value">¥{{ orderInfoData.payPrice }}</view>
      </view>
    </view>
  </view>
</template>

<style
    scoped
    lang="scss">
.order-good {
  background: #fff;
  border-radius: 15rpx;
  margin-bottom: 20rpx;
}

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

</style>