tuanfeng-pc-admin/src/views/order/franchisee/index.vue

<template>
    <div class="payreturnPage">
      <!-- 搜索 -->
      <div class="formSearch" >
        <el-input
          v-model="query.search"
          clearable
          size="mini"
          class="filter-item"
          style="display: inline-table; width: 400px; margin-left: 10px"
          placeholder="请输入内容"
        >
          <template #prepend>
            <el-select
              v-model="query.searchType"
              size="mini"
              style="width: 150px"
              placeholder="请选择"
            >
              <el-option label="订单id" value="1" />
              <el-option label="买家账户" value="2" />
              <el-option label="收件人姓名" value="3" />
              <el-option label="收件人手机号" value="4" />
              <!-- <el-option label="商品ID" value="5" /> -->
              <el-option label="下单号码" value="6" />
              <el-option label="订单编号" value="7" />
              <el-option label="支付单号" value="8" />
            </el-select>
          </template>
        </el-input>
        <el-input
          v-model="query.shopName"
          maxlength="20"
          clearable
          size="mini"
          class="filter-item"
          style="width: 200px; margin-left: 10px"
          placeholder="请输入商户名称"
        />
        <el-date-picker
          v-model="query.dates"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          size="mini"
          class="filter-item"
          style="margin-left: 10px; line-height: 1"
        />
        <el-button
          size="mini"
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          style="margin-left: 10px"
          @click="handleSearch"
        >
          查找
        </el-button>
      </div>
      <!-- 表格 -->
      <div class="tableBox">
        <el-table
          v-loading="listLoading"
          ref="multipleTable"
          :data="tableData"
          border
          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column align="center" width="55" type="selection">
          </el-table-column>
          <el-table-column
            align="center"
            width="120"
            label="订单ID"
            prop="orderId"
            fixed="left"
          >
            <template slot-scope="{ row }">
              {{ row.orderId }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="220"
            label="订单编号"
            prop="orderFormid"
            fixed="left"
          />
          <el-table-column
            align="center"
            label="下单时间"
            prop="createTime"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            width="180"
            label="下单号码"
            prop="customerPhone"
          />
          <el-table-column
            align="center"
            label="下单账户"
            prop="customerName"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            width="220"
            label="商家名称"
            prop="shopName"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            width="220"
            label="支付金额（元）"
            prop="price"
          />
          <el-table-column
            align="center"
            width="120"
            label="商家赠送代金券"
            prop="shopVoucher"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            width="120"
            label="平台赠送代金券"
            prop="platformVoucher"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            width="120"
            label="总赠送代金券"
            prop="presenterVoucher"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            width="120"
            label="代金券抵扣金额"
            prop="voucherPrice"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            min-width="120"
            label="订单状态"
            prop="state"
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              <span v-if="row.state == 1">待付款</span>
              <span v-else-if="row.state == 2">待发货</span>
              <span v-else-if="row.state == 3">待收货</span>
              <span v-else-if="row.state == 4">已完成</span>
              <span v-else-if="row.state == 5">交易关闭（已取消）</span>
              <span v-else-if="row.state == 6">待成团</span>
              <span v-else-if="row.state == 7">待售后</span>
              <span v-else-if="row.state == 8">待核销（未付款）</span>
              <span v-else-if="row.state == 9">待核销（已付款）</span>
              <span v-else-if="row.state == 10">已核销</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
  
          <el-table-column
            align="center"
            width="100"
            label="商品数量"
            prop="number"
          />
          <el-table-column
            align="center"
            label="订单类型"
            prop="scanType"
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              <el-tag v-if="row.scanType === 1" effect="plain">常规订单</el-tag>
              <el-tag v-else-if="row.scanType === 2" effect="plain"
                >收款码订单</el-tag
              >
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="收件人"
            prop="receiveName"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="手机号"
            prop="receivePhone"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="操作"
            width="180"
            fixed="right"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{ row }">
              <el-button type="warning" size="mini" @click="handleDetail(row)">
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
          title="订单详情"
          :visible.sync="detailVisible"
          width="74%"
          center
          :close-on-click-modal="false"
        >
          <OrderDetail :detail-row="form" @cancel="detailVisible = false" />
        </el-dialog>
        <div class="fenye">
          <el-pagination
            :current-page="query.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import OrderDetail from "./components/pendDetails";
  //   import { getExplosiveProductCategory } from '@/api/explosiveProduct/category'
  import { orderGetAll } from "@/api/order";
  
  export default {
    components: {
      OrderDetail,
    },
    data() {
      return {
        listLoading: false,
        query: {
          page: 1,
          pageSize: 10,
          templateType: 1,
          procureType: 1,
          supplerRole: 2,
          dates: [], // 下单时间数组
          shopName: "",
          search: "",
        },
        total: 1,
        tableData: [],
        form: {},
        //    详情弹框
        detailVisible: false,
      };
    },
    created() {
      this.getAll();
    },
    methods: {
      //  订单详情
      handleDetail(row) {
        this.detailVisible = true;
        this.form = row;
        this.$refs.DetailModal && this.$refs.DetailModal.handleOpen(row);
      },
      async getAll() {
        this.listLoading = true;
        try {
          const res = await orderGetAll(this.query);
          this.tableData = res.data.list;
          this.total = res.data.total;
        } finally {
          this.listLoading = false;
        }
      },
      handleSizeChange(val) {
        this.query.pageSize = val;
        this.getAll();
      },
      handleCurrentChange(val) {
        this.query.page = val;
        this.getAll();
      },
      handleSearch() {
        this.total = 1;
        this.query.page = 1;
        this.getAll();
      },
      clear() {
        this.query = {
          page: 1,
          pageSize: 10,
        };
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .payreturnPage {
    padding: 30px;
    .formSearch{
      margin-bottom: 20px;
    }
    .tableBox {
      .fenye {
        margin: 20px;
      }
    }
  }
  </style>