xcx

src/components/myCard/myCard.vue

     <div class="card-top flex-h">
       <div>
         <img :src="logo" class="logo">
-        <span>￥ <span> 9999 </span> 元</span>
+        <span>￥ <span> {{data.Price}} </span> 元</span>
         <img :src="line3" class="line3">
       </div>
       <div>
-        <h2>咖啡团课一次体验卡</h2>
-        <span>可在银城会所健身房体验私教课一次</span>
-        <span>2018年02月17日-2018年3月17日</span>
+        <h2>{{data.title}}</h2>
+        <span>{{data.desc}}</span>
+        <span>{{data.startDate}}-{{data.endDate}}</span>
       </div>
     </div>
     <div class="card-main flex-h">
       <img :src="line">
       <div class="flex-h">
         <span>总数量</span>
-        <span>40</span>
+        <span>{{data.totalCount}}</span>
       </div>
       <div>
         <span>总剩余</span>
-        <span>40</span>
+        <span>{{data.totalCount - data.SentCount}}</span>
       </div>
       <div>
         <span>用户领取</span>
-        <span>40</span>
+        <span>{{data.SentCount}}</span>
       </div>
       <div>
         <span>用户使用</span>
-        <span>40</span>
+        <span>{{data.usedCount}}</span>
       </div>
     </div>
-    <div v-if='canShare' class="card-bottom" @click.stop="share">
+    <div v-if='data.invalid' class="card-bottom" @click.stop="share">
       分享卡券
     </div>
   </div>
     data: {
       type: Object,
       default: () => { }
-    },
-    canShare: {
-      type: Boolean,
-      default: true
     }
   },
   methods: {
     share () {
-      this.$emit('share', this.data)
+      if(this.data.invalid){
+        this.$emit('share', this.data)
+      }
     }
   }
 }

src/pages/user/mainPage/coffeeIndex/index.vue

 const { mapState: mapCaseState, mapActions: mapCaseActions } = createNamespacedHelpers('case')
 const { mapState: mapCustomerState, mapActions: mapCustomerActions } = createNamespacedHelpers('myCustomer')
 const { mapState: mapCardState, mapActions: mapCardActions } = createNamespacedHelpers('myCard')
+const { mapActions: mapUserCenterActions } = createNamespacedHelpers('userCenter')
 
 export default {
   name: '',
   data () {
     return {
+      postCardData: {
+        page: 1,
+        pageSize: 10
+      },
       pullUpLoad: true,
       pullUpLoadThreshold: 40,
       startY: 0,
           hasMore: true,
           page: 1,
           pageSize: 1,
-          list: [
-            {
-              title: '小小外交官体验卡',
-              desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程',
-              time: '2018年02月17日',
-              useType: '未使用',
-              tag: '共享'
-            },
-            {
-              title: '小小外交官体验卡',
-              desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程',
-              time: '2018年02月17日',
-              useType: '已使用',
-              tag: '商品'
-            },
-            {
-              title: '小小外交官体验卡',
-              desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程',
-              time: '2018年02月17日',
-              useType: '已失效',
-              tag: '商品'
-            }
-          ]
+          list: []
         },
         {
           hasPic: false,
           hasMore: true,
           page: 1,
           pageSize: 1,
-          list: [
-            {
-              title: '小小外交官体验卡',
-              desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程',
-              time: '2018年02月17日',
-              useType: '未使用',
-              tag: '共享'
-            },
-            {
-              title: '小小外交官体验卡',
-              desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程',
-              time: '2018年02月17日',
-              useType: '已使用',
-              tag: '商品'
-            },
-            {
-              title: '小小外交官体验卡',
-              desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程',
-              time: '2018年02月17日',
-              useType: '已失效',
-              tag: '商品'
-            }
-          ]
+          list: []
         },
         {
           hasPic: false,
           hasMore: true,
           page: 1,
           pageSize: 1,
-          list: [
-            {
-              title: '小小外交官体验卡',
-              desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程',
-              time: '2018年02月17日',
-              useType: '未使用',
-              tag: '共享'
-            },
-            {
-              title: '小小外交官体验卡',
-              desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程',
-              time: '2018年02月17日',
-              useType: '已使用',
-              tag: '商品'
-            },
-            {
-              title: '小小外交官体验卡',
-              desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程',
-              time: '2018年02月17日',
-              useType: '已失效',
-              tag: '商品'
-            }
-          ]
+          list: []
         }
       ]
     }
     scroll
   },
   created () {
+    this.getMyCardList({
+      ...this.postCardData
+    }).then((res) => {
+      console.log(JSON.stringify(res))
+      for (var n = 0; n < res.list.length; n++) {
+        this.data[1].list.push({
+          invalid: '',
+          price: res.list[n].Price,
+          title: res.list[n].CardName,
+          desc: 'xxx',
+          startDate: this.toolClass.dateFormat(res.list[n].StartDate),
+          endDate: this.toolClass.dateFormat(res.list[n].EndDate),
+          totalCount: res.list[n].TotalCount,
+          SentCount: res.list[n].SentCount,
+          usedCount: res.list[n].UsedCount,
+          // title: res.list[n].CardName,
+          // desc: '描述',
+          // time: this.toolClass.dateFormat(res.list[n].EndDate),
+          // useType: '未使用',
+          // tag: '共享'
+        })
+      }
+      console.log(JSON.stringify(this.data[1].list))
+    })
     this.getCaseList().then((res) => {
       this.topCaseInfoData.CaseName = res.cases[0].CaseName
       this.topCaseInfoData.CaseId = res.cases[0].CaseId
     })
   },
   methods: {
+    ...mapUserCenterActions([
+      'getMyCardList',
+    ]),
     ...actions([
       'getCaseList',
     ]),

src/store/index.js

   myCustomer: () => require('./myCustomer/index').default,
   myCard: () => require('./myCard/index').default,
   card: () => require('./card/index').default,
-  forbid: () => require('./forbid/index').default
+  forbid: () => require('./forbid/index').default,
 }
 
 Object.keys(modules).forEach((modKey) => {

src/store/userCenter/userCenter.js

     }
   },
   actions: {
+    getMyCardList (context, payload) { // 获取我的卡列表
+      return new Promise((resolve) => {
+        Ajax(api.sales.getCardList.url, {
+          method: api.sales.getCardList.method,
+          queryData: { ...payload }
+        }).then(res => {
+          resolve(res)
+        })
+      })
+    },
     getCourseOrderDetail (context, payload) { // 获取课程类型详情
       return new Promise((resolve) => {
         Ajax(api.user.getCourseOrderDetail.url, {

src/util/api.js

       url: `${baseUrl}${wechat}/user/detail/:id`
     }
   },
+  sales: {
+    getCardList: { // 获取我的卡列表
+      method: 'get',
+      url: `${baseUrl}${wechat}/card`
+    },
+    getCouponList: { // 获取我的券列表
+      method: 'get',
+      url: `${baseUrl}${wechat}/coupon`
+    },
+  },
   login: { // 主管、销售端登陆
     login: {
       method: 'post',