anxine-htgl/src/views/userManage/UserOrderList.vue

<template>
  <div class="common-info-box">
    <div class="common-info-header">
      <i class="line-icon" />
      <div class="common-info-title">订单记录</div>
    </div>
    <!-- 表格组件 -->
    <el-table ref="multipleTable" v-loading="loading" :data="dataList" style="margin-top: 10px">
      <el-table-column label="订单编号" align="center" prop="id" />
      <el-table-column label="提交时间" align="center" prop="account" />
      <el-table-column label="商品类型" align="center" prop="nickname" />
      <el-table-column label="订单金额" align="center" prop="registerTime" />
      <el-table-column label="支付方式" align="center" prop="lastLoginTime" />
      <el-table-column label="订单状态" align="center" prop="amount" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-text class="common-btn-text-primary" @click="handleView(scope.row)">查看报告</el-text>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.page_size" :total="total" @pagination="getList" />
  </div>
</template>

<script setup name="UserOrderList">
const props = defineProps({
  id: String
});
// 搜索条件
const queryParams = reactive({
  page: 1,
  page_size: 10
});
// 表格数据
const dataList = ref([]);
// 加载中
const loading = ref(false);
// 总数
const total = ref(0);

// 获取数据
const getList = () => {
  loading.value = true;
  setTimeout(() => {
    dataList.value = [{ orderStatus: 20 }];
    loading.value = false;
  }, 500);
};

const handleView = (row) => {}
getList();
</script>

<style lang="scss" scoped>

</style>