mobile-admin/store/afterSale/details.vue

<template>
  <div class="floor">
    <div v-if="saleDetails.after_sale && saleDetails.after_sale != '' && saleDetails.after_sale">
      <div class="list">
        <div class="name">申请类型：</div>
        <div class="text">{{ ['', '退货退款', '换货'][saleDetails.after_sale.apply_type] }}</div>
      </div>
      <div class="list">
        <div class="name">申请原因：</div>
        <div class="text"
          v-if="afterSaleEnumsList && saleDetails && saleDetails.after_sale && saleDetails.after_sale.apply_type && saleDetails.after_sale.apply_reason && afterSaleEnumsList[saleDetails.after_sale.apply_type] && afterSaleEnumsList[saleDetails.after_sale.apply_type][saleDetails.after_sale.apply_reason]">
          {{ afterSaleEnumsList[saleDetails.after_sale.apply_type][saleDetails.after_sale.apply_reason].label }}
        </div>

        <div v-else>
          --
        </div>

      </div>
      <div class="list" v-if="saleDetails.after_sale.apply_files != ''">
        <div class="name">图片描述：</div>
        <image style="width: 100px; height: 100px;margin-right: 15px;"
          v-for="(img, i) in saleDetails.after_sale.apply_files" :key="i" :src="img" :zoom-rate="1.2"
          :preview-src-list="saleDetails.after_sale.apply_files" fit="cover">
        </image>
      </div>
      <div class="list" v-if="saleDetails.after_sale.apply_type == 1">
        <div class="name">退款金额：</div>
        <div class="text">{{ saleDetails.after_sale.refund_amount }}</div>
      </div>
      <div v-if="saleDetails.after_sale.apply_type == 2">
        <div class="list">
          <div class="name">换货类型：</div>
          <div class="text">
            <div v-for="item in saleDetails.after_sale.goods_json.goods_sku_json" :key="item.attr_group_id">
              {{ item.group_name }}：{{ item.name }}</div>
          </div>
        </div>
        <div class="list">
          <div class="name">换货数量：</div>
          <div class="text">
            {{ saleDetails.after_sale.goods_json.num }}
          </div>
        </div>
        <div class="list" v-if="saleDetails.after_sale.address_json">
          <div class="name">买家地址：</div>
          <div class="text">
            <div>收货人：{{ saleDetails.after_sale.address_json.name }}</div>
            <div>收货电话：{{ saleDetails.after_sale.address_json.mobile }}</div>
            <div>收货地址：{{ saleDetails.after_sale.address_json.address }}</div>
          </div>
        </div>
        <div class="list" v-if="saleDetails.after_sale.apply_type == 2 && saleDetails.after_sale.shop_express_json">
          <div class="name">快递公司：</div>
          <div class="text">
            {{ express_company }}
          </div>
        </div>
        <div class="list" v-if="saleDetails.after_sale.apply_type == 2 && saleDetails.after_sale.shop_express_json">
          <div class="name">快递单号：</div>
          <div class="text">
            {{ saleDetails.after_sale.shop_express_json.express_number }}
          </div>
        </div>
      </div>
      <div class="list">
        <div class="name">售后状态：</div>
        <div class="text">{{ saleDetails.after_sale.status_text }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import order from '@/api/store/order.js';

const saleDetails = ref({})

// 匹配快递公司
const express_company = ref()
const express = async () => {
  try {
    const res = await order.after_sale.express()
    if (res.code !== 0) throw new Error(res.message)
    res.data.forEach((item) => {
      if (item.value == saleDetails.value.after_sale.shop_express_json.express_company) {
        express_company.value = item.label;
      }
    })
  } catch (error) {
    console.dir(error)
  }
}

onLoad(({ id }) => {

  const getSaleDetail = async ({ id }) => {
    try {
      const res = await order.after_sale.show({ id })
      console.log(res)

      if (res.code !== 0) throw new Error(res.message)
      saleDetails.value = res.data;

      express();

    } catch (error) {
      console.dir(error)
    }
  }
  getSaleDetail({ id });
})

const afterSaleEnumsList = ref([])

const afterSaleEnums = async () => {
  try {
    const res = await order.after_sale.enums()
    if (res.code !== 0) throw new Error(res.message)
    afterSaleEnumsList.value = res.data.reasonMap
  } catch (error) {
    console.dir(error)
  }
}

afterSaleEnums();

</script>

<style scoped lang="scss">
.floor {
  background: #fff;
  padding: 30px 50px;
  height: 100%;

  .list {
    display: flex;
    justify-content: flex-start;
    padding-bottom: 15px;
    font-size: 14px;
    line-height: 36px;

    .name {
      padding-right: 20px;
      color: #888;
    }

    text {
      margin-right: 20px;
    }

    img {
      width: 300px;
    }
  }
}
</style>