new-zx-front-admin/src/views/mall/trade/order/components/OrderAfterSale.vue

<!-- 订单查看 - 售后 -->
<template>
  
  <div v-if="formData != null" style="text-align: center;margin-top: 50px;font-size: 14px;">
    该订单暂无售后记录
  </div>
  <div v-else class="aftersale-container">
    <h3 class="rating-title">{{formData.spuName}}</h3>
    <div class="aftersale-content">
        <div class="aftersale-image">
            <!-- 请将此处替换为实际评价图片链接 -->
            <img src="https://static.iocoder.cn/mall/a79f5d2ea6bf0c3c11b2127332dfe2df.jpg" alt="商品主图" />
        </div>
        <div class="aftersale-details">
            <p class="product-model">{{formData.status}}</p>
            <p class="first-aftersale">退款：{{fenToYuan(formData.refundPrice)}}元</p>
            <p class="first-aftersale">原由：{{formData.applyReason || "无"}}</p>
            <p class="aftersale-comment" :title="formData.applyDescription">描述：{{formData.applyDescription || "无"}}</p>
        </div>
    </div>
  </div>

</template>
<script lang="ts" setup>
	import { propTypes } from '@/utils/propTypes'
  import * as TradeOrderApi from '@/api/mall/trade/order'
  import { fenToYuan } from '@/utils'
  import { formatDate } from '@/utils/formatTime'
  import { DICT_TYPE, getDictLabel, getDictObj } from '@/utils/dict'
	const props = defineProps({
    id: propTypes.number.def(undefined), // 订单ID
    showPickUp: propTypes.bool.def(true) // 显示核销按钮
  })
  const formData = ref<TradeOrderApi.OrderVO>({
    logs: []
  })
  const id = props.id
  const getOrderAfterSale = async () => {
    if (id) {
      const res = (await TradeOrderApi.getOrderAfterSale(id)) 
      // 没有表单信息则关闭页面返回
      if (!res) {
        message.error('交易订单不存在')
        close()
      }
      console.log(res)
      formData.value = res
    }
  }

	const message = useMessage() // 消息弹窗


	onMounted(async () => {
    getOrderAfterSale()
	})
</script>
<style lang="scss" scoped>
  .aftersale-container {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 355px;
      border: 1px solid #ebeef5;
      height: 180px;
      padding: 0 20px;
      border-radius: 10px;
      float: left;
      margin: 10px;
    }
    
    .rating-title {
        font-weight: bold;
        margin-bottom: 10px;
    }
    
    .aftersale-content {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
    }
    .aftersale-image{margin-right: 10px;}
    .aftersale-image img {
        width: 100px; /* 根据实际情况调整评价图片宽度 */
        height: auto;
        border: 1px solid #ebeef5;
        border-radius: 10px;
    }
    
    .aftersale-details p {
        margin: 5px 0;
    }
    .aftersale-comment{
      margin-top:12px !important;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;

    }
</style>