添加订单列表

src/api/order/index.js

@@ -0,0 +1,11 @@
+import axios from "axios"
+import '@/mock/index'
+
+// 获取订单信息
+export const getOrdersList = (param)=>{
+  return axios.post('/order/list',param)
+}
+// 删除订单
+export const deleteOrder = (param)=>{
+  return axios.post('/order/delete',param)
+}

src/mock/index.js

@@ -6,7 +6,7 @@ let data = Mock.mock({
             "messageTitle": "@ctitle(3,7)", //生成消息标题，长度为10个汉字
             "shopName": "@cname",//生成商品名 ， 都是中国人的名字
             "messageTel": /^1(5|3|7|8)[0-9]{9}$/,//生成随机电话号
-            "messageData":"@date('yyyy-MM-dd')",//生成随机发布时间
+            "messageData": "@date('yyyy-MM-dd')",//生成随机发布时间
             "shopAddress": "@county(true)", //随机生成地址
             "shopStar|1-5": "★", //随机生成1-5个星星
             "salesVolume|30-1000": 30, //随机生成商品价格 在30-1000之间
@@ -17,9 +17,9 @@ let data = Mock.mock({
                     "foodPic": "@Image('100x40','#c33', '#ffffff','小可爱')",//生成随机图片，大小/背景色/字体颜色/文字信息
                     "foodPrice|1-100": 20,//生成1-100的随机数
                     "aname|2": [
-                        { 
-                            "aname": "@cname", 
-                            "aprice|30-60": 20 
+                        {
+                            "aname": "@cname",
+                            "aprice|30-60": 20
                         }
                     ]
                 }
@@ -35,77 +35,80 @@ Mock.mock(/goods\/goodAll/, 'post', () => { //三个参数。第一个：路径
 
 Mock.mock('http://localhost:8080/api/list', 'post', (params) => {
 
-  var info = JSON.parse(params.body)
+    var info = JSON.parse(params.body)
 
-  var [index, size, total] = [info.pageIndex, info.pageSize, dataList.length]
+    var [index, size, total] = [info.pageIndex, info.pageSize, dataList.length]
 
-  var len = total / size
+    var len = total / size
 
-  var totalPages = len - parseInt(len) > 0 ? parseInt(len) + 1 : len
+    var totalPages = len - parseInt(len) > 0 ? parseInt(len) + 1 : len
 
-  var newDataList = dataList.slice(index * size, (index + 1) * size)
+    var newDataList = dataList.slice(index * size, (index + 1) * size)
 
-  return {
+    return {
 
-    'code': '0',
+        'code': '0',
 
-    'message': 'success',
+        'message': 'success',
 
-    'data': {
+        'data': {
 
-      'pageIndex': index,
+            'pageIndex': index,
 
-      'pageSize': size,
+            'pageSize': size,
 
-      'rows': newDataList,
+            'rows': newDataList,
 
-      'total': total,
+            'total': total,
 
-      'totalPages': totalPages
+            'totalPages': totalPages
 
-    }
+        }
 
-  }
+    }
 
 })
 
 // app用户列表 
 let usersList = Mock.mock({
-    "data|100":[{
-            "userId|+1": 1,//编号
-            "number": /[A-Z]*[0-9]{10}$/,//账号
-            "name":"@cname",//真实姓名
-            "phoneNumber":/^1(5|3|7|8)[0-9]{9}$/,//手机号
-            "adress":"@csentence",//详细地址
-            "status|1":["0","1"],//状态
-            "registerTime":"@datetime('yyyy-MM-dd HH:mm:ss')",//注册时间
-            "verifiedTime":"@datetime('yyyy-MM-dd HH:mm:ss')"//实名时间
-        }
+    "data|100": [{
+        "userId|+1": 1,//编号
+        "number": /[A-Z]*[0-9]{10}$/,//账号
+        "name": "@cname",//真实姓名
+        "phoneNumber": /^1(5|3|7|8)[0-9]{9}$/,//手机号
+        "adress": "@csentence",//详细地址
+        "status|1": ["0", "1"],//状态
+        "registerTime": "@datetime('yyyy-MM-dd HH:mm:ss')",//注册时间
+        "verifiedTime": "@datetime('yyyy-MM-dd HH:mm:ss')"//实名时间
+    }
     ]
 })
+
+
+
 // 分页获取
-Mock.mock('/user/list', 'post', (params) => { 
+Mock.mock('/user/list', 'post', (params) => {
     let body = JSON.parse(params.body);
-    let { pageIndex, pageSize,queryParams,dateRange } = body;
+    let { pageIndex, pageSize, queryParams, dateRange } = body;
     let newList = usersList.data;
-    if( newList.length>0 && queryParams.userId ){
-        newList  = newList.filter( (res)=>{
-            return res.userId==queryParams.userId;
+    if (newList.length > 0 && queryParams.userId) {
+        newList = newList.filter((res) => {
+            return res.userId == queryParams.userId;
         });
     }
-    if(newList.length>0 && queryParams.phoneNumber){
-        newList  = newList.filter( (res)=>{
-            return res.phoneNumber==queryParams.phoneNumber;
+    if (newList.length > 0 && queryParams.phoneNumber) {
+        newList = newList.filter((res) => {
+            return res.phoneNumber == queryParams.phoneNumber;
         });
     }
-    if(newList.length>0 && queryParams.status){
-        newList  = newList.filter( (res)=>{
-            return res.status==queryParams.status;
+    if (newList.length > 0 && queryParams.status) {
+        newList = newList.filter((res) => {
+            return res.status == queryParams.status;
         });
     }
-    if(newList.length>0 && dateRange.length>0){
-        newList  = newList.filter( (res)=>{
-            return res.registerTime>=dateRange[0] && res.registerTime<=dateRange[1];
+    if (newList.length > 0 && dateRange.length > 0) {
+        newList = newList.filter((res) => {
+            return res.registerTime >= dateRange[0] && res.registerTime <= dateRange[1];
         });
     }
     let total = newList.length;
@@ -127,27 +130,27 @@ Mock.mock('/user/list', 'post', (params) => {
 
 // 公告列表
 let noticeList = Mock.mock({
-    "data|100":[{
-            "noticeId|+1": 1,//编号
-            "noticeTitle":"@ctitle",//公告标题
-            "noticeContent":"@cparagraph(20)",//公告内容
-            "createTime":"@datetime('yyyy-MM-dd HH:mm:ss')",//发布时间
-        }
+    "data|100": [{
+        "noticeId|+1": 1,//编号
+        "noticeTitle": "@ctitle",//公告标题
+        "noticeContent": "@cparagraph(20)",//公告内容
+        "createTime": "@datetime('yyyy-MM-dd HH:mm:ss')",//发布时间
+    }
     ]
 })
 // 分页获取
-Mock.mock('/notice/list', 'post', (params) => { 
+Mock.mock('/notice/list', 'post', (params) => {
     let body = JSON.parse(params.body);
-    let { pageIndex, pageSize,queryParams } = body
+    let { pageIndex, pageSize, queryParams } = body
     let newList = noticeList.data;
-    if( newList.length>0 && queryParams.noticeTitle ){
-        newList  = newList.filter( (res)=>{
-            return res.noticeTitle==queryParams.noticeTitle;
+    if (newList.length > 0 && queryParams.noticeTitle) {
+        newList = newList.filter((res) => {
+            return res.noticeTitle == queryParams.noticeTitle;
         });
     }
-    if( newList.length>0 && queryParams.dateRange.length>0 ){
-        newList  = newList.filter( (res)=>{
-            return res.createTime>=queryParams.dateRange[0] && res.createTime<=queryParams.dateRange[1];
+    if (newList.length > 0 && queryParams.dateRange.length > 0) {
+        newList = newList.filter((res) => {
+            return res.createTime >= queryParams.dateRange[0] && res.createTime <= queryParams.dateRange[1];
         });
     }
     let total = newList.length;
@@ -167,11 +170,113 @@ Mock.mock('/notice/list', 'post', (params) => {
     }
 });
 // 删除公告
-Mock.mock('/notice/delete', 'post', (params) => { 
+Mock.mock('/notice/delete', 'post', (params) => {
+    let body = JSON.parse(params.body);
+    let { id } = body
+    noticeList.data = noticeList.data.filter((res) => {
+        return res.noticeId != id;
+    });
+    return {
+        code: 200,
+        message: 'success',
+    }
+})
+
+
+
+// 订单列表mock数据模拟
+let ordersList = Mock.mock({
+"data|100": [{
+    "oId|+1": 1,//ID
+    "oNumber": /[A-Z]*[0-9]{10}$/,//订单编号
+    "collectionsNumber": "@cname",//藏品套系ID
+    "collectionNumber": /^1(5|3|7|8)[0-9]{9}$/,//藏品ID
+    "number": /[0-9]{10}$/,//账号
+    "oName": "@cname",//名称
+    "buyNumber": /[0-9]{2}$/,// 购买数量
+    "lssuerName": "@cname",// 发行方名称
+    "payTime": "@datetime('yyyy-MM-dd HH:mm:ss')",//支付时间
+    "orderType|1": ["0", "1"],// 订单类型
+}
+]
+})
+
+// 订单列表查询，分页功能实现
+Mock.mock('/order/list', 'post', (params) => {
+    let body = JSON.parse(params.body);
+    let { pageIndex, pageSize, queryParams, dateRange } = body;
+    let newList = ordersList.data;
+
+    if (newList.length > 0 && queryParams.number) {
+        newList = newList.filter((res) => {
+            return res.number == queryParams.number;
+        });
+    }
+
+    if (newList.length > 0 && queryParams.oNumber) {
+        newList = newList.filter((res) => {
+            return res.oNumber == queryParams.oNumber;
+        });
+    }
+
+    if (newList.length > 0 && queryParams.oName) {
+        newList = newList.filter((res) => {
+            return res.oName == queryParams.oName;
+        });
+    }
+
+    if (newList.length > 0 && queryParams.lssuerName) {
+        newList = newList.filter((res) => {
+            return res.lssuerName == queryParams.lssuerName;
+        });
+    }
+
+    if (newList.length > 0 && queryParams.collectionsNumber) {
+        newList = newList.filter((res) => {
+            return res.collectionsNumber == queryParams.collectionsNumber;
+        });
+    }
+
+    if (newList.length > 0 && queryParams.collectionNumber) {
+        newList = newList.filter((res) => {
+            return res.collectionNumber == queryParams.collectionNumber;
+        });
+    }
+
+    if (newList.length > 0 && queryParams.orderType) {
+        newList = newList.filter((res) => {
+            return res.orderType == queryParams.orderType;
+        });
+    }
+    if (newList.length > 0 && dateRange.length > 0) {
+        newList = newList.filter((res) => {
+            return res.payTime >= dateRange[0] && res.payTime <= dateRange[1];
+        });
+    }
+    let total = newList.length;
+    let len = total / pageSize;
+    let totalPages = len - parseInt(len) > 0 ? parseInt(len) + 1 : len;
+    let newDataList = newList.slice((pageIndex - 1) * pageSize, pageIndex * pageSize);
+    return {
+        code: 200,
+        message: 'success',
+        data: {
+            pageIndex,
+            pageSize,
+            userList: newDataList,
+            total,
+            totalPages: totalPages,
+        }
+    }
+})
+
+
+// 订单删除
+Mock.mock('/order/delete', 'post', (params) => {
     let body = JSON.parse(params.body);
     let { id } = body
-    noticeList.data = noticeList.data.filter( (res)=>{
-        return res.noticeId!=id;
+    ordersList.data = ordersList.data.filter((res) => {
+        return res.oId != id;
     });
     return {
         code: 200,

src/views/announcement/list/index.vue

@@ -129,6 +129,7 @@ export default {
         pageSize: this.pagination.pageSize,
         queryParams:this.queryParams
       }).then( res =>{
+        // console.log(res)
         let data = res.data.data;
         this.noticeList = data.noticeList;
         this.pagination.total = data.total;

src/views/appuserlist/index.vue

@@ -159,7 +159,7 @@
           queryParams:this.queryParams,
           dateRange:this.dateRange
         }).then(response => {
-          //console.log("数据",response);
+          // console.log("数据",response);
           let data = response.data.data;
           this.userList = data.userList;
           this.pagination.total = data.total;

src/views/order/index.vue

@@ -1,3 +1,307 @@
 <template>
-    <div>订单列表</div>
-</template>
+    <div class="app-container">
+      <el-row>
+        <div class="select-box">
+            <div class="search-title">
+              <i class="el-icon-search"></i>
+              <span>  筛选搜查</span>
+              <div class="search-button">
+                <el-button  @click="resetQuery" >重置</el-button>
+                <el-button  type="primary"  @click="handleQuery">查询搜索</el-button>
+              </div>
+            </div>
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px" class="search-form">
+
+              <el-form-item label="账号：" prop="number">
+                <el-input
+                  v-model="queryParams.number"
+                  placeholder="请输入账号"
+                  clearable
+                  style="width: 240px"
+                  @keyup.enter.native="handleQuery"
+                />
+              </el-form-item>
+
+              <el-form-item label="订单编号：" prop="oNumber">
+                <el-input
+                  v-model="queryParams.oNumber"
+                  placeholder="请输入订单编号"
+                  clearable
+                  style="width: 240px"
+                  @keyup.enter.native="handleQuery"
+                />
+              </el-form-item>
+
+              <el-form-item label="名称：" prop="oName">
+                <el-input
+                  v-model="queryParams.oName"
+                  placeholder="请输入用户名称"
+                  clearable
+                  style="width: 240px"
+                  @keyup.enter.native="handleQuery"
+                />
+              </el-form-item>
+
+              <el-form-item label="发行方名称：" prop="lssuerName">
+                <el-input
+                  v-model="queryParams.lssuerName"
+                  placeholder="请输入发行方名称"
+                  clearable
+                  style="width: 240px"
+                  @keyup.enter.native="handleQuery"
+                />
+              </el-form-item>
+
+              <el-form-item label="藏品套系ID:" prop="collectionsNumber">
+                <el-input
+                  v-model="queryParams.collectionsNumber"
+                  placeholder="请输入藏品套系ID"
+                  clearable
+                  style="width: 240px"
+                  @keyup.enter.native="handleQuery"
+                />
+              </el-form-item>
+
+              <el-form-item label="藏品ID:" prop="collectionNumber">
+                <el-input
+                  v-model="queryParams.collectionNumber"
+                  placeholder="请输入藏品ID"
+                  clearable
+                  style="width: 240px"
+                  @keyup.enter.native="handleQuery"
+                />
+              </el-form-item>
+              <el-form-item label="订单类型：" prop="orderType">
+                <el-select
+                  v-model="queryParams.orderType"
+                  placeholder="选择订单类型"
+                  clearable
+                  style="width: 240px"
+                >
+                  <el-option
+                      v-for="item in options"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+
+              <el-form-item label="支付时间：">
+                <el-date-picker
+                  v-model="dateRange"
+                  style="width: 240px"
+                  value-format="yyyy-MM-dd"
+                  type="daterange"
+                  range-separator="-"
+                  start-placeholder="开始时间"
+                  end-placeholder="结束时间"
+                ></el-date-picker>
+              </el-form-item>
+            </el-form>
+          </div>
+      </el-row>
+      <!-- 标题 -->
+      <el-row>
+        <div class="list-title">
+          <div class="title">
+            <span class="el-icon-tickets"></span>
+            <span class="title-font">订单列表</span>
+          </div>
+        </div>
+      </el-row>
+  
+      <el-row>
+        <!--用户数据-->
+        <el-table v-loading="loading" :data="ordersList"  border >
+          <el-table-column label="ID" align="center"  prop="oId" width="60" />
+          <el-table-column label="订单编号" align="center" width="150" prop="oNumber"  />
+          <el-table-column label="藏品套系ID" align="center"  prop="collectionsNumber"  :show-overflow-tooltip="true" />
+          <el-table-column label="藏品ID" align="center"  prop="collectionNumber" width="120" />
+          <el-table-column label="账号" align="center"  prop="number"  width="120" :show-overflow-tooltip="true" />
+          <el-table-column label="名称" align="center"  prop="oName" width="80" />
+          <el-table-column label="购买数量" align="center"  prop="buyNumber" width="60" />
+          <el-table-column label="发行方名称" align="center"  prop="lssuerName" width="100" />
+
+          
+          <el-table-column label="支付时间" align="center" prop="payTime"  width="160">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.payTime) }}</span>
+            </template>
+          </el-table-column>
+
+        <el-table-column label="订单类型" align="center" prop="orderType" width="80"  >
+            <template slot-scope="scope">
+              <span>{{ scope.row.orderType == "0" ? "A类" : "B类"  }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="170">
+        <template slot-scope="scope">
+
+          <el-button
+            size="mini"
+            type="text"
+            @click="handleDelete(scope.row)"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+
+        </el-table>
+        <el-pagination
+          background
+          :current-page="pagination.current"
+          :page-size="pagination.pageSize"
+          layout="total, prev, pager, next"
+          :total="pagination.total"
+          @pagination="getList"
+          @current-change="onPageChange"
+          class="paper"
+        >
+        </el-pagination>
+      </el-row>
+    </div>
+  </template>
+  
+  <script>
+  import {getOrdersList,deleteOrder} from '@/api/order'
+  
+
+  export default {
+    name: "Order",
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 用户表格数据
+        ordersList: null,
+        // 日期范围
+        dateRange:[],
+        // 查询参数
+        queryParams: {
+          number:undefined,
+          oNumber:undefined,
+          oName:undefined,
+          lssuerName:undefined,
+          collectionsNumber:undefined,
+          collectionNumber:undefined,
+          orderType:undefined,
+
+        },
+        // 分页参数
+        pagination:{
+          total:0,
+          current:1,
+          pageSize:10,
+        },
+        // 搜索下拉框参数
+        options:[
+          {
+            value:"0",
+            label:"A类型"
+          },
+          {
+            value:"1",
+            label:"B类型"
+          }
+        ]
+      };
+    },
+    created() {
+      this.getList()
+    },
+    methods: {
+      /** 查询用户列表 */
+      getList() {
+        this.loading = true;
+        getOrdersList({
+          pageIndex: this.pagination.current,
+          pageSize: this.pagination.pageSize,
+          queryParams:this.queryParams,
+          dateRange:this.dateRange
+        }).then(response => {     
+          // console.log(response)
+          let data = response.data.data;
+          this.ordersList = data.userList;
+          this.pagination.total = data.total;
+          this.pagination.current = data.pageIndex;
+          this.loading = false;
+        });
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.pagination.current = 1;
+        this.getList();
+        
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.dateRange = [];
+        this.resetForm("queryForm")
+        this.handleQuery();
+      },
+      // 页号发生变化
+      onPageChange(number){
+        this.pagination.current=number;
+        this.getList();
+      },
+       /** 删除按钮操作 */
+    handleDelete(row) {
+      const orderIds = row.oId;
+      const oNumber = row.oNumber;
+      this.$modal.confirm('是否确认删除编号为"' + oNumber + '"的订单？').then(function() {
+        return deleteOrder({id:orderIds});
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      });
+    },
+    }
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .select-box{
+    border: 1px solid rgb(0, 0, 0,0.1);
+    border-radius: 5px;
+    padding: 20px;
+  }
+  .search-form{
+    margin-top: 20px;
+    padding: 0 20px;
+  }
+  .search-title{
+    overflow: hidden;
+  }
+  .search-button{
+    float: right;
+  }
+  .el-row {
+    margin-bottom: 20px;
+  }
+  .list-title {
+    height: 50px;
+    width: 100%;
+    border: solid 1px #DCDFE6;
+    border-radius: 5px;
+  
+    .title {
+      margin: 14px;
+      float: left;
+    }
+  
+    .title-font {
+      margin-left: 5px;
+    }
+  }
+  .paper{
+    float: right;
+    margin-top: 10px;
+  }
+  </style>