新增页面

src/components/newPersonalCenter/block/model/TzOrder.vue

+<style>
+@import "../../../../assets/css/newPersonalCenter/block/OrderCenter.css";
+</style>
+<template>
+  <el-row class="OrderCenter">
+    <!-- 条件 -->
+    <ul class="clearfix">
+      <template v-for="item in TitList">
+        <li
+          class="__cp"
+          @click="handleClick(item)"
+          :class="{_active: activeName === item.ID}"
+        >{{item.Type}}</li>
+      </template>
+    </ul>
+    <!-- 表格 -->
+    <TCTable :tableData="tableData"/>
+    <div class="empty-data" v-if="tableData.length<1">
+      <i class="iconfont icon-kong"></i>
+      很抱歉，你想要的信息我们真的找不到了
+    </div>
+    <!-- 分页 -->
+    <el-row class="_pagination" v-if="totalCount > 1 && tableData.length>0">
+      <el-pagination
+        :current-page.sync="currentPage"
+        :page-size="getOrderMsg.pageSize"
+        layout="total, prev, pager, next"
+        :total="Count"
+        @current-change="handleCurrentChange"
+      ></el-pagination>
+    </el-row>
+  </el-row>
+</template>
+<script>
+import TCTable from "./OrderInfoModel/TCTable";
+export default {
+  components: {
+    TCTable: TCTable
+  },
+  data() {
+    return {
+      activeName: -1,
+      currentPage: 1,
+      rderLoading: false,
+      totalCount: 1,
+      Count: 1,
+      WaitDealOrderPageList: "",
+      getOrderMsg: {
+        pageIndex: 1,
+        pageSize: 10,
+        orderType: 2,
+        queryDays: 0,
+        orderState: -1,
+        CustomerId: ""
+      },
+      TitList: [
+        {
+          Type: "全部",
+          ID: -1
+        },
+        {
+          Type: "待付定金",
+          ID: 1
+        },
+        {
+          Type: "待付尾款",
+          ID: 2
+        },
+        {
+          Type: "待发团",
+          ID: 3
+        },
+        {
+          Type: "交易完成",
+          ID: 4
+        },
+        {
+          Type: "取消",
+          ID: 5
+        }
+        // {
+        //   val: 6,
+        //   lable: '等待商家确认'
+        // },
+        // {
+        //   val: 7,
+        //   lable: '退款中'
+        // },
+        // {
+        //   val: 8,
+        //   lable: '退款成功'
+        // },
+        // {
+        //   val: 9,
+        //   lable: '交易完成'
+        // },
+      ],
+      tableData: []
+    };
+  },
+  computed: {},
+  created() {
+      console.log("定制游订单");
+  },
+  mounted() {
+    let userInfo = localStorage.userInfo
+      ? JSON.parse(localStorage.userInfo)
+      : "";
+    this.getOrderMsg.CustomerId = userInfo.customerId;
+    this.gerOrderList();
+    this.b2b_get_GetWaitDealOrderPageList();
+  },
+  methods: {
+    b2b_get_GetWaitDealOrderPageList() {
+      //获取待处理订单
+      let msg = {
+        pageIndex: 1,
+        pageSize: 100
+      };
+      this.apipost(
+        "b2b_get_GetWaitDealOrderPageList",
+        msg,
+        r => {
+          if (r.data.resultCode == 1) {
+            this.WaitDealOrderPageList = r.data.data.pageData;
+          } else {
+            this.$message.error(r.data.message);
+          }
+        },
+        null
+      );
+    },
+    gerOrderList: function() {
+      this.orderLoading = true;
+      this.apiJavaPost(
+        "/api/b2b/user/getrecentorder",
+        this.getOrderMsg,
+        res => {
+            console.log("自由行订单",res);
+          if (res.data.resultCode == 1) { 
+            this.tableData = res.data.data.pageData;
+            this.totalCount = res.data.data.pageCount;
+            this.Count = res.data.data.count;
+            this.orderLoading = false;
+          } else {
+            this.Error(res.data.message);
+            this.orderLoading = false;
+          }
+        },
+        null
+      );
+    },
+    handleClick(item) {
+      this.activeName = item.ID;
+      this.getOrderMsg.orderState = item.ID;
+      this.gerOrderList();
+    },
+    handleCurrentChange(val) {
+      // 翻页
+      this.getOrderMsg.pageIndex = parseInt(val);
+      this.gerOrderList();
+    }
+  }
+};
+</script>