diff --git a/src/api/order.js b/src/api/order.js
index 5461a9d..f1febfc 100644
--- a/src/api/order.js
+++ b/src/api/order.js
@@ -155,3 +155,11 @@ export function takeOrderListApi(data) {
  export function rechargeBalancei() {
   return request.get(`delivery/belence`)
 }
+// 在线买单 - 统计
+export function getOnlineTitle() {
+  return request.get(`order/online_title`)
+}
+// 在线买单 - 列表
+export function getOnlineList(data) {
+  return request.get(`order/online_list`,data)
+}
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
index 7363163..e4e4fbd 100644
--- a/src/router/modules/order.js
+++ b/src/router/modules/order.js
@@ -36,7 +36,16 @@ const orderRouter =
           title: '核销订单'
         },
         component: () => import('@/views/order/orderCancellate/index')
+      },
+      {
+        path: 'onlinePay',
+        name: 'OrderOnlinePay',
+        meta: {
+          title: '在线买单'
+        },
+        component: () => import('@/views/order/onlinePay/index')
       }
+
     ]
   }
 
diff --git a/src/views/order/onlinePay/index.vue b/src/views/order/onlinePay/index.vue
new file mode 100644
index 0000000..fc7f834
--- /dev/null
+++ b/src/views/order/onlinePay/index.vue
@@ -0,0 +1,196 @@
+<template>
+  <div class="divBox">
+    <el-card class="box-card">
+      <!--顶部搜索栏-->
+      <div slot="header" class="clearfix">
+        <div class="container">
+          <el-form inline size="small" label-width="80px">
+            <el-form-item label="搜索：">
+              <el-input v-model="tableFrom.uid" @keyup.enter.native="getList(1)" placeholder="请输入用户ID" class="selWidth" clearable>
+                <el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getList(1)" />
+              </el-input>
+            </el-form-item>
+            <el-form-item class="width100">
+            </el-form-item>
+          </el-form>
+          <cards-data :card-lists="cardLists" />
+        </div>
+      </div>
+      <!--表格信息-->
+      <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="mini">
+        <el-table-column prop="order_id" label="ID" min-width="50" align="center"/>
+        <el-table-column label="买单用户" min-width="150" align="center">
+          <template slot-scope="scope">
+            <div class="user-content">
+              <div class="user-avatar" v-if="scope.row.avatar && scope.row.avatar != 1">
+                <img :src="scope.row.avatar" />
+              </div>
+              <div class="user-info">
+                <div class="nickname">{{ scope.row.nickname }}</div>
+                <div class="user-id">ID：{{ scope.row.uid }}</div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="归属门店" min-width="150" align="center">
+          <template slot-scope="scope">
+            <div class="user-content">
+              <div class="user-avatar" v-if="scope.row.mer_avatar && scope.row.mer_avatar != 1">
+                <img :src="scope.row.mer_avatar" />
+              </div>
+              <div class="user-info">
+                <div class="nickname">{{ scope.row.mer_name }}</div>
+                <div class="user-id">ID：{{ scope.row.mer_id }}</div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" prop="create_time" min-width="120" align="center"/>
+        <el-table-column label="支付金额" prop="pay_price" min-width="120" align="center"/>
+        <el-table-column label="支付时间" min-width="120" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.pay_time || '未支付' }}
+          </template>
+        </el-table-column>
+      </el-table>
+      <!--分页-->
+      <div class="block">
+        <el-pagination
+          :page-sizes="[20, 40, 60, 80]"
+          :page-size="tableFrom.limit"
+          :current-page="tableFrom.page"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="tableData.total"
+          @size-change="handleSizeChange"
+          @current-change="pageChange"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import cardsData from '@/components/cards/index'
+import {getOnlineList, getOnlineTitle} from "@/api/order";
+export default {
+  name: "preSaleProductList",
+  components: { cardsData },
+  data() {
+    return {
+      listLoading: true,
+      tableData: {
+        data: [],
+        total: 0,
+      },
+      tableFrom: {
+        page: 1,
+        limit: 20,
+        uid: ''
+      },
+      loading: false,
+      cardLists: [],
+    };
+  },
+  watch: {},
+  mounted() {
+    this.getStatistics();
+    this.getList('');
+  },
+  methods: {
+    // 获取统计数据
+    getStatistics() {
+      let _this = this;
+      getOnlineTitle(_this.tableFrom).then((res) => {
+        this.cardLists = res.data
+      }).catch((res) => {
+        this.$message.error(res.message)
+      })
+    },
+    // 获取列表
+    getList(num) {
+      let _this = this;
+      this.listLoading = true;
+      this.tableFrom.page = num ? num : this.tableFrom.page;
+      getOnlineList(this.tableFrom)
+        .then((res) => {
+          this.tableData.data = res.data.list;
+          this.tableData.total = res.data.count;
+          this.listLoading = false;
+        })
+        .catch((res) => {
+          this.listLoading = false;
+          this.$message.error(res.message);
+        });
+    },
+    pageChange(page) {
+      this.tableFrom.page = page;
+      this.getList('');
+    },
+    handleSizeChange(val) {
+      this.tableFrom.limit = val;
+      this.getList('');
+    },
+
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.selWidth {
+  width: 350px !important;
+}
+.seachTiele {
+  line-height: 35px;
+}
+.title{
+  margin-bottom: 16px;
+  color: #17233d;
+  font-size: 14px;
+  font-weight: bold;
+}
+.scollhide::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
+.user-content{
+  --user-content-height-: 80px;
+
+  height: var(--user-content-height-);
+  width: 100%;
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  .user-avatar{
+    height: var(--user-content-height-);
+    width: var(--user-content-height-);
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    img{
+      height: 80%!important;
+      width: 80%!important;
+      border-radius: 50% !important;
+    }
+  }
+  .user-info{
+    height: var(--user-content-height-);
+    display: inline-flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: flex-start;
+    .nickname{
+      font-size: 15px;
+      font-weight: bold;
+      line-height: calc(var(--user-content-height- * 65%));
+    }
+    .user-id{
+      font-size: 13px;
+      line-height: calc(var(--user-content-height- * 35%));
+    }
+  }
+}
+</style>