erp/resources/frontend/src/views/plat/afterSaleOrder.vue

<template>
  <div class="pageBox">
    <div class="cardBox">
      <div class="searchBox">
        <div class="row">
          <span>店铺：</span>
          <el-select v-model="filter.shop_id" placeholder="店铺">
            <el-option v-for="item in shopsList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="row">
          <span>售后单状态：</span>
          <el-select v-model="filter.after_sales_status" placeholder="请选择">
            <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="row">
          <span>订单编号：</span>
          <el-input v-model="filter.order_sn" clearable></el-input>
        </div>
        <div class="row">
          <span>售后单编号：</span>
          <el-input v-model="filter.after_sales_biz_sn" clearable></el-input>
        </div>
        <div class="row">
          <span>创建时间：</span>
          <el-date-picker
            v-model="addTime"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 340px">
          </el-date-picker>
        </div>
        <div class="row">
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">筛选</el-button>
        </div>
      </div>
    </div>
    <el-card>
      <el-table v-loading="loading" :data="afterList" style="width: 100%" border>
        <el-table-column prop="after_sales_biz_sn" label="售后单编号" />
        <el-table-column prop="order_sn" label="父订单编号" />
        <el-table-column label="店铺">
          <template slot-scope="scope">
            <span>{{ Shops[scope.row.shop_id] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="refund_amount" label="退款金额" />
        <el-table-column prop="refund_shipping_amount" label="用户申请退运费金额" />
        <el-table-column prop="reason" label="退款原因" />
        <el-table-column prop="description" label="描述" />
        <el-table-column label="退款图片" width="220">
          <template slot-scope="scope">
            <div class="imgBox" v-if="scope.row.image_list">
              <el-image v-for="(it, i) in scope.row.image_list" :key="i" :src="it" :preview-src-list="scope.row.image_list" class="img"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="apply_type" label="申请类型" />
        <el-table-column label="售后单状态">
          <template slot-scope="scope">
            <span>{{ STATUS[scope.row.after_sales_status] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="after_sale_created_at" label="售后单创建时间" />
      </el-table>
      <div class="page-pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="prev, pager, next, sizes, total, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>

  </div>
</template>

<script>
import { getAfterSaleOrders } from "@/api/plat"
import { storeList } from "@/api/shop"

export default {
  data() {
    return {
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      afterList: [],
      filter: {
        shop_id: '',
        after_sales_status: '',
        order_sn: '',
        after_sales_biz_sn: ''
      },
      shopsList: [],
      Shops: {},
      addTime: [],
      statusList: [
        { id: 0, name: '未发起售后' },
        { id: 1, name: '退款中' },
        { id: 2, name: '退款成功' },
        { id: 3, name: '待处理' },
        { id: 4, name: '拒绝退款' },
        { id: 6, name: '待(顾客)退货' },
        { id: 7, name: '待(团长)确认退货' },
        { id: 8, name: '(顾客)撤销' },
        { id: 9, name: '(系统)关闭' }
      ],
      STATUS: {
        '0': '未发起售后',
        '1': '退款中',
        '2': '退款成功',
        '3': '待处理',
        '4': '拒绝退款',
        '6': '待(顾客)退货',
        '7': '待(团长)确认退货',
        '8': '(顾客)撤销',
        '9': '(系统)关闭'
      }
    }
  },
  methods: {
    fetchList() {
      this.loading = true
      let params = {
        page: this.page,
        per_page: this.pageSize,
        ...this.filter,
        created_at_start: this.addTime ? this.addTime[0] : '',
        created_at_end: this.addTime ? this.addTime[1] : ''
      }
      getAfterSaleOrders(params).then((res) => {
        this.afterList = res.data.data
        this.total = res.data.meta.total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.page = 1
      this.pageSize = val
      this.fetchList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.fetchList()
    },
    handleSearch() {
      this.page = 1
      this.fetchList()
    },
    getShopsList() {
      let params = {
        page: 1,
        per_page: 999
      }
      storeList(params).then((res) => {
        this.shopsList = res.data.data
        res.data.data.forEach((it) => {
          this.Shops[it.id] = it.name
        })
      })
    }
  },
  mounted() {
    this.getShopsList()
    this.fetchList()
  }
}
</script>

<style lang="scss" scoped>
  .searchBox{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    white-space: nowrap;
    .row{
      font-size: 14px;
      margin-bottom: 20px;
      margin-right: 15px;
      display: flex;
      align-items: center;
    }
  }
  .imgBox{
    .img{
      width: 55px;
      height: 55px;
      border-radius: 4px;
      margin: 3px;
    }
  }
</style>