merchant-web/src/views/modules/operation-management/order/index.vue

<template>
  <div style="height: calc(100vh - 200px)">
    <el-form
      v-if="storeList.length > 1"
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
    >
      <el-form-item label="摊铺">
        <el-select
          class="filter-item"
          style="width: 200px"
          v-model="formInline.shopId"
          placeholder="请选择摊铺"
        >
          <el-option
            v-for="item in storeList"
            :key="item.shopId"
            :label="item.shopName"
            :value="item.shopId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">查询</el-button>
        <el-button type="primary" @click="Reset">重置</el-button>
        <el-button
          type="success"
          @click="
            $router.push({ name: 'operation-management-total-order/index' })
          "
          >菜市场总订单</el-button
        >
      </el-form-item>
    </el-form>
    <el-tabs v-model="formInline.group" @tab-click="handleClick">
      <el-tab-pane
        v-for="item in statusList"
        :key="item.value"
        :label="item.label"
        :name="item.value"
      ></el-tab-pane>
    </el-tabs>
    <el-table :data="tableData" height="70vh" border style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <div style="padding-left: 20px" m="4">
            <el-table :data="props.row.productOrders" :border="true">
              <el-table-column type="index" width="50" label="序号">
              </el-table-column>
              <el-table-column label="商品订单号" prop="productOrderNo" />
              <el-table-column label="商品名称" prop="productName" />
              <el-table-column label="商品原价" prop="originPrice" />
              <el-table-column label="商品终价" prop="finalPrice" />
              <el-table-column label="商品订单金额" prop="productOrderMoney" />
              <el-table-column label="商品数量" prop="productCount" />
              <el-table-column label="商品单价" prop="productFinalPrice" />
              <el-table-column label="商品图片" prop="productImg">
                <template slot-scope="scope">
                  <el-image
                    style="width: 60px; height: 60px"
                    :src="scope.row.productImg"
                    :preview-src-list="[scope.row.productImg]"
                  >
                  </el-image>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="总订单号" prop="orderNo" />
      <el-table-column label="结算单位订单号" prop="unitOrderNo" />
      <el-table-column label="总商品数量" prop="productCount" />
      <el-table-column label="顾客实际支付" prop="totalMoney" />
      <el-table-column label="商品总价" prop="productMoney" />
      <el-table-column label="配送费" prop="deliveryMoney" />
      <el-table-column label="优惠券减免" prop="couponMoney" />
      <el-table-column label="支付时间" prop="payTime" />
      <el-table-column label="预计送达时间" prop="predictDeliveryTime" />
      <el-table-column label="预计收入" prop="predictIncome" />
      <el-table-column label="距离" prop="distance" />
      <el-table-column label="备注" prop="remark" />
      <el-table-column fixed="right" width="100px" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="view(scope.row)">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        :current-page="formInline.pageNumber"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="formInline.pageSize"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 订单详情 -->
    <viewDetails ref="viewDetails"></viewDetails>
  </div>
</template>

<script>
import viewDetails from "./popup/view-details.vue";
import { mapState } from "vuex";
export default {
  components: { viewDetails },
  data() {
    return {
      formInline: {
        group: "",
        shopId: "",
        pageNumber: 1,
        pageSize: 10,
      },
      statusList: [
        {
          label: "全部订单",
          value: "0",
        },
        {
          label: "待备货",
          value: "1",
        },
        {
          label: "待取货",
          value: "2",
        },
        {
          label: "待收货",
          value: "3",
        },
        {
          label: "已完成",
          value: "4",
        },
      ],
      tableData: [],
      total: 0,
    };
  },
  created() {
    this.formInline = {
      group: "0",
      // marketId: this.marketId,
      shopId: this.shopId,
    };
    this.getList();
  },
  methods: {
    getList() {
      //根据店铺查询
      this.$api.mer_admin
        .shopOrderPage({
          ...this.formInline,
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data.data;
          this.total = Number(res.data.data.total);
        });
    },
    Reset() {
      this.formInline = {
        group: "0",
        shopId: this.shopId,
      };
      this.getList();
    },
    handleClick(e) {
      this.advanceSellStatus = e.name;
      this.getList();
    },
    view(row) {
      this.$refs.viewDetails.toggle(row).update();
    },
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.formInline.pageNumber = val;
      this.getList();
    },
  },
  computed: {
    ...mapState("userData", [
      "isMerchant",
      "marketList",
      "storeList",
      "marketId",
      "shopId",
    ]),
  },
};
</script>

<style lang="scss" scoped></style>