lilishop-ui/manager/src/views/wx-channel/components/WxChannelsRefundTab.vue

<template>
  <div class="wx-channel-refund">
    <el-form :model="searchForm" inline label-width="70px" class="search-form">
      <el-form-item label="退单编号" prop="channelRefundSn">
        <el-input v-model="searchForm.channelRefundSn" placeholder="视频号退单编号" clearable style="width: 220px" />
      </el-form-item>
      <el-form-item label="订单编号" prop="channelOrderSn">
        <el-input v-model="searchForm.channelOrderSn" placeholder="视频号订单编号" clearable style="width: 220px" />
      </el-form-item>
      <el-form-item label="会员昵称" prop="memberNickName">
        <el-input v-model="searchForm.memberNickName" placeholder="请输入会员昵称" clearable style="width: 180px" />
      </el-form-item>
      <el-form-item label="商品名称" prop="goodsName">
        <el-input v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable style="width: 200px" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-input v-model="searchForm.status" placeholder="退单状态" clearable style="width: 140px" />
      </el-form-item>
      <el-form-item label="场景" prop="scene">
        <el-select v-model="searchForm.scene" clearable style="width: 140px" placeholder="全部">
          <el-option v-for="item in sceneList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="时间">
        <el-date-picker
          v-model="selectDate"
          type="daterange"
          value-format="YYYY-MM-DD"
          clearable
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 240px"
          @change="selectDateRange"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="search-btn" :loading="loading" @click="handleSearch">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" border :data="data" class="mt_10" style="width: 100%">
      <el-table-column prop="channelRefundSn" label="视频号退单编号" min-width="200" show-overflow-tooltip />
      <el-table-column prop="channelOrderSn" label="视频号订单编号" min-width="200" show-overflow-tooltip />
      <el-table-column prop="memberNickName" label="会员昵称" min-width="140" show-overflow-tooltip />
      <el-table-column prop="amount" label="退款金额" width="110" />
      <el-table-column label="退单状态" width="130">
        <template #default="{ row }">
          <el-tag v-if="row && row.status" type="primary">{{ row.status }}</el-tag>
          <span v-else-if="row">-</span>
        </template>
      </el-table-column>
      <el-table-column label="下单场景" width="110">
        <template #default="{ row }">
          <el-tag v-if="row" :type="sceneTagType(row.scene)">{{ sceneLabel(row.scene) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" min-width="160" show-overflow-tooltip />
    </el-table>

    <div class="mt_10" style="display: flex; justify-content: flex-end">
      <el-pagination
        v-model:current-page="searchForm.pageNumber"
        v-model:page-size="searchForm.pageSize"
        :page-sizes="[20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        size="small"
        @current-change="changePage"
        @size-change="changePageSize"
      />
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { getWxChannelsRefundPage } from "@/api/index";

defineOptions({ name: "WxChannelsRefundTab" });

const sceneList = ref([
  { label: "直播", value: "LIVE" },
  { label: "橱窗", value: "WINDOW" },
]);
const loading = ref(false);
const total = ref(0);
const data = ref([]);
const selectDate = ref(null);
const searchForm = reactive({
  channelRefundSn: "",
  channelOrderSn: "",
  memberNickName: "",
  goodsName: "",
  status: "",
  scene: "",
  startTime: null,
  endTime: null,
  pageNumber: 1,
  pageSize: 20,
});

onMounted(() => {
  loadPage();
});

function sceneLabel(val) {
  const map = { LIVE: "直播", WINDOW: "橱窗" };
  return map[val] || val || "-";
}
function sceneTagType(val) {
  const map = { LIVE: "warning", WINDOW: "" };
  return map[val] || "info";
}
function selectDateRange(v) {
  if (!v || v.length !== 2) {
    searchForm.startTime = null;
    searchForm.endTime = null;
    return;
  }
  const start = v[0] ? new Date(`${v[0]}T00:00:00`).getTime() : null;
  const end = v[1] ? new Date(`${v[1]}T23:59:59`).getTime() : null;
  searchForm.startTime = Number.isFinite(start) ? start : null;
  searchForm.endTime = Number.isFinite(end) ? end : null;
}
function handleSearch() {
  searchForm.pageNumber = 1;
  loadPage();
}
function changePage(pageNumber) {
  searchForm.pageNumber = pageNumber;
  loadPage();
}
function changePageSize(pageSize) {
  searchForm.pageSize = pageSize;
  searchForm.pageNumber = 1;
  loadPage();
}
function loadPage() {
  loading.value = true;
  const params = { ...searchForm };
  Object.keys(params).forEach((k) => {
    if (params[k] === null || params[k] === "" || params[k] === undefined) delete params[k];
  });
  getWxChannelsRefundPage(params)
    .then((res) => {
      if (res && res.success) {
        const page = res.result || {};
        data.value = Array.isArray(page.records) ? page.records : [];
        total.value = Number(page.total || 0);
      }
    })
    .finally(() => {
      loading.value = false;
    });
}
</script>