浏览代码

Signed-off-by: 1004749546@qq.com <1004749546@qq.com>
修改

1004749546@qq.com 4 年之前
父节点
当前提交
998e58681a
共有 2 个文件被更改,包括 120 次插入22 次删除
  1. 20 0
      src/api/coupon.js
  2. 100 22
      src/views/AvailableCoupon/AvailableCoupon.vue

+ 20 - 0
src/api/coupon.js

@@ -0,0 +1,20 @@
+import { axios } from '@/utils/request'
+// 分页查询优惠券列表
+export function couponFind (params) {
+  const url = `coupon/findPage/${params.pageNo}/${params.pageSize}`
+  delete params.pageNo
+  delete params.pageSize
+  return axios({
+    url: url,
+    method: 'post',
+    data: params
+  })
+}
+
+// 获取二维码信息
+export function couponCode (params) {
+  return axios({
+    url: `coupon/getCouponCode/${params.couponId}/${params.customerType}`,
+    method: 'get'
+  })
+}

+ 100 - 22
src/views/AvailableCoupon/AvailableCoupon.vue

@@ -1,60 +1,138 @@
 <template>
 <template>
-  <div class="card-content">
-    <div class="card-item" v-for="item in 10">
-      <div class="card-item-head">
-        <div>满200减50</div>
-        <div>满减卷</div>
-      </div>
-      <div class="card-item-middle">
-        <div>满200减50卷</div>
-        <div>有效期:2020-05-28 至 2020-12-05</div>
-      </div>
-      <div class="card-item-button">
-        <a-button size="large" ghost type="danger">生成领取吗</a-button>
+  <div class="page-content">
+    <div class="card-content">
+      <div class="card-item" v-for="item in list">
+        <div class="card-item-head">
+          <div>满200减50</div>
+          <div>满减卷</div>
+        </div>
+        <div class="card-item-middle">
+          <div>满200减50卷</div>
+          <div>有效期:2020-05-28 至 2020-12-05</div>
+        </div>
+        <div class="card-item-button">
+          <a-button size="large" ghost type="danger">生成领取码</a-button>
+        </div>
       </div>
       </div>
+      <a-list v-if="!list.length&&status!='loading'" :data-source="[]" />
+    </div>
+    <div class="pagination">
+      <a-pagination
+        v-if="total>list.length"
+        show-size-changer
+        :total="total"
+        :current="pageNo"
+        :pageSize="pageSize"
+        showQuickJumper
+        showSizeChanger
+        @showSizeChange="onShowSizeChange" />
     </div>
     </div>
   </div>
   </div>
+
 </template>
 </template>
 
 
 <script>
 <script>
+import {
+  couponFind
+} from '@/api/coupon.js'
+export default {
+  name: 'Jobs',
+  components: {},
+  data () {
+    return {
+      status: 'loading',
+      list: [],
+      pageNo: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      vm.pageInit()
+    })
+  },
+  methods: {
+    pageInit () {
+      this.list = []
+      this.pageNo = 1
+      this.pageSize = 10
+      this.total = 0
+      this.getList()
+    },
+    // 获取列表数据
+    getList () {
+      this.status = 'loading'
+      couponFind({
+        pageNo: this.pageNo,
+        pageSize: this.pageSize
+      }).then(res => {
+        this.status = 'loadmore'
+        if (res.status == 200) {
+          this.list = res.data.list
+          this.total = res.data.count
+        } else {
+          this.list = []
+          this.total = 0
+        }
+      })
+    }
+  }
+}
 </script>
 </script>
 
 
 <style lang="less">
 <style lang="less">
-  .card-content{
+  .page-content {
+    width: 100%;
+  }
+
+  .card-content {
     width: 100%;
     width: 100%;
     display: flex;
     display: flex;
     flex-wrap: wrap;
     flex-wrap: wrap;
-    .card-item{
+
+    .card-item {
       width: 21%;
       width: 21%;
       background: #FFFFFF;
       background: #FFFFFF;
       border-radius: 5px;
       border-radius: 5px;
       box-shadow: 1px 2px 5px #999;
       box-shadow: 1px 2px 5px #999;
       overflow: hidden;
       overflow: hidden;
       margin: 2%;
       margin: 2%;
-      > div{
+
+      >div {
         padding: 15px;
         padding: 15px;
         text-align: center;
         text-align: center;
-        &:first-child{
+
+        &:first-child {
           padding-bottom: 5px;
           padding-bottom: 5px;
         }
         }
       }
       }
-      .card-item-head{
+
+      .card-item-head {
         background: #F5222D;
         background: #F5222D;
         color: #fff;
         color: #fff;
-        > div{
-          &:first-child{
+
+        >div {
+          &:first-child {
             font-size: 32px;
             font-size: 32px;
           }
           }
         }
         }
       }
       }
-      .card-item-middle{
+
+      .card-item-middle {
         padding-bottom: 0;
         padding-bottom: 0;
-        > div{
-          &:first-child{
+
+        >div {
+          &:first-child {
             font-size: 18px;
             font-size: 18px;
           }
           }
         }
         }
       }
       }
     }
     }
   }
   }
+
+  .pagination {
+    width: 100%;
+    margin-left: 2%;
+  }
 </style>
 </style>