evshop_admin/src/pages/order/index.vue

<template>
  <div class="main">
    <!-- Breadcrumb: Start -->
    <div class="breadcrumb-section">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"
          >電商管理中心</el-breadcrumb-item
        >
        <el-breadcrumb-item><a href="/">訂單列表</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- Breadcrumb: End -->
    <hr />
    <el-card>
      <div class="search-section">
        訂單號：<el-input
          v-model="search.order_sn"
          placeholder=""
          style="width: 200px"
        ></el-input>
        收貨人：<el-input
          v-model="search.consignee"
          placeholder=""
          style="width: 200px"
        ></el-input>
        <el-select v-model="search.status" class="m-2" placeholder="選擇狀態">
          <el-option
            v-for="item in statusOptions"
            :label="item.label"
            :key="item.value"
            :value="item.value"
          />
        </el-select>
        <el-button type="primary" @click="handleSearch">查詢</el-button>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="order_sn" label="訂單號" />
          <el-table-column prop="add_time" label="下單時間" />
          <el-table-column prop="consignee" label="收貨人" />
          <el-table-column prop="order_amount" label="訂單金額" width="100" />
          <el-table-column prop="pay_name" label="金流方式" />
          <el-table-column prop="shipping_name" label="物流方式" />
          <el-table-column label="訂單狀態" width="200">
          <template #default="scope">
            <div v-html="scope.row.status">
            </div>
          </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="150">
            <template #default="scope">
              <el-button
                size="small"
                @click="handleEdit(scope.$index, scope.row)"
                >查看</el-button
              >
              <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                v-if="scope.row.order_status === 3"
                >刪除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-block">
          <el-pagination
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            small="small"
            layout="->,total, sizes, prev, pager, next, jumper"
            :total="total"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, watch, onActivated } from "vue";
import { getList } from "@/api/order";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

const statusOptions = [
  {
    label: "全部",
    value: "",
  },
  {
    label: "未確認",
    value: "0",
  },
  {
    label: "已確認",
    value: "1",
  },
  {
    label: "已取消",
    value: "2",
  },
  {
    label: "無效",
    value: "3",
  },
  {
    value: "4",
    label: "退貨",
  },
  {
    value: "7",
    label: "完成",
  },
];

const tableData = ref([]);
const total = ref(0);
const page = ref(1);
const pageSize = ref(10);

const search = ref({
  user_id: "",
  order_sn: "",
  consignee: "",
  status: "1",
});

if (route.query.user_id) {
  search.value.user_id = route.query.user_id;
}


onActivated(()=>{
  getListData();
})

const getListData = async()=>{
  let res = await getList({
    page: page.value,
    size: pageSize.value,
    search: search.value,
  });

  if (res.code === 200) {
    tableData.value = res.data.data;
    total.value = res.data.total;
  }
}

watch(
  () => page.value,
  async (newPage) => {
    let res = await getList({
      page: newPage,
      size: pageSize.value,
      search: search.value,
    });

    if (res.code === 200) {
      tableData.value = res.data.data;
      total.value = res.data.total;
    }
  }
);

watch(
  () => pageSize.value,
  async (newPageSize) => {
    let res = await getList({
      page: page.value,
      size: newPageSize,
      search: search.value,
    });

    if (res.code === 200) {
      tableData.value = res.data.data;
      total.value = res.data.total;
    }
  }
);

const value = ref("");

const handleEdit = (index, row) => {
  router.push({
    path: "/info",
    query: {
      order_id: row.order_id,
    },
  });
};

//搜尋
const handleSearch = async () => {
  let res = await getList({
    page: page.value,
    size: pageSize.value,
    search: search.value,
  });

  if (res.code === 200) {
    tableData.value = res.data.data;
    total.value = res.data.total;
  }
};
</script>

<style lang="less" scoped>
.search-section {
  background-color: #f3f3f3;
  border: 1px solid #d7d7d7;
  padding: 5px;
  color: #808080;
  margin: 0 0 10px 0;
}

.pagination-block {
  margin: 10px 0 0 0;
}
</style>