订单追溯

package.json

@@ -30,6 +30,7 @@
     "vue": "^2.6.10",
     "vue-axios": "^2.1.2",
     "vue-i18n": "^8.7.0",
+    "vue-infinite-loading": "^2.4.5",
     "vue-router": "^3.0.1",
     "vuex": "^3.1.1"
   },

src/api/ldt_bills/billtrace.js

@@ -0,0 +1,20 @@
+import request from '@/router/axios';
+
+export const getDetail = (id) => {
+  return request({
+    url: '/api/web/billTrace',
+    method: 'get',
+    params: {
+      id
+    }
+  })
+}
+
+export const getBills = () => {
+  return request({
+    url: '/api/web/billTrace/getBills',
+    method: 'get',
+    params: {
+    }
+  })
+}

src/views/ldt_bills/billtrace.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="avue-searchs"
+       @click.self="handleEsc">
+    <div class="avue-searchs__title">账单追溯</div>
+    <div class="avue-searchs__content">
+      <div class="avue-searchs__form">
+        <el-input :placeholder="$t('search')" v-model="value">
+          <el-button slot="append" icon="el-icon-search"></el-button>
+        </el-input>
+      </div>
+      <div class="avue-searchs__list">
+        <div class="avue-searchs__scrollbar">
+          <div class="avue-searchs__item"
+               v-for="(item,index) in billList"
+               :key="index"
+               @click="handleSelect(item)">
+            <i class="avue-searchs__item-icon"></i>
+            <span class="avue-searchs__item-title">订单号：{{ item.id }}</span>
+            <div class="avue-searchs__item-path">
+              <span style="margin-left: 10px">{{ item.title }}</span>
+              <span style="margin-left: 20px">金额:{{ item.cost }}元</span>
+            </div>
+          </div>
+          <infinite-loading @infinite="infiniteHandler">
+            <span slot="no-more">
+              No more
+            </span>
+          </infinite-loading>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {getList} from "@/api/ldt_bills/bills";
+import InfiniteLoading from 'vue-infinite-loading';
+
+export default {
+  components: {
+    InfiniteLoading,
+  },
+  data() {
+    return {
+      page: {
+        pageSize: 10,
+        currentPage: 1,
+        total: 0
+      },
+      value: "",
+      bills: [],
+      billList: [],
+    }
+  },
+  watch: {
+    value() {
+      this.querySearch();
+    },
+  },
+  methods: {
+    infiniteHandler($state) {
+      getList(this.page.currentPage, this.page.pageSize, this.value).then((res) => {
+        const data = res.data.data;
+        if (data.records.length) {
+          this.bills = this.bills.concat(data.records);
+          this.billList = this.bills;
+          $state.loaded();
+          if (data.length === 0) {
+            $state.complete();
+          }
+        } else {
+          $state.complete();
+        }
+      });
+      this.page.currentPage++;
+    },
+    querySearch() {
+      var restaurants = this.bills;
+      var queryString = this.value
+      this.billList = queryString ? this.bills.filter(this.createFilter(queryString)) : restaurants;
+    },
+    createFilter(queryString) {
+      return restaurant => {
+        return (
+          restaurant.id.indexOf(queryString) !== -1
+        );
+      };
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.avue-searchs {
+  padding-top: 50px;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  z-index: 1024;
+
+  &__title {
+    margin-bottom: 60px;
+    text-align: center;
+    font-size: 42px;
+    font-weight: bold;
+    letter-spacing: 2px;
+    text-indent: 2px;
+  }
+
+  &__form {
+    margin: 0 auto 50px auto;
+    width: 50%;
+    text-align: center;
+
+    p {
+      margin-top: 20px;
+    }
+  }
+
+  &__scrollbar {
+    height: 400px;
+    overflow: auto;
+  }
+
+  &__list {
+    box-sizing: border-box;
+    padding: 20px 30px;
+    margin: 0 auto;
+    width: 70%;
+    border-radius: 4px;
+    border: 1px solid #ebeef5;
+    background-color: #fff;
+    overflow: hidden;
+    color: #303133;
+    transition: 0.3s;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  &__item {
+    padding: 5px 0;
+    border-bottom: 1px dashed #eee;
+
+    &-icon {
+      margin-right: 5px;
+      font-size: 18px;
+    }
+
+    &-title {
+      font-size: 20px;
+      font-weight: 500;
+      color: #333;
+    }
+
+    &-path {
+      line-height: 30px;
+      color: #666;
+    }
+  }
+}
+</style>