xcx

src/pages/user/card/index.vue

     <scroll ref='scroll' :isloading='isloading' class='wrapper' :data='data[active].list' :pullUpLoad='pullUpLoadObj' :startY='parseInt(startY)' @pullingUp='getList'>
       <div class="box">
         <div v-if="active == 0">
-          <discounts v-for="(item,index) in data[0].list" :key='index' @toUse='toUse' :data='item' @toDetail="toCouponsDetail(item)"></discounts>
+          <discounts v-for="(item,index) in data[0].list" :key='index' @toUse='toUse' :data='item' @toDetail="toCardDetail(item)"></discounts>
           <noMore v-if="data[active].hasPic"></noMore>
         </div>
         <div v-if="active == 1">
           <div class="fitness-card" v-for="(item,index) in data[1].list" :key='index'>
-            <div :class="{'opacity' : item.CardStatus == 'expire' || item.CardStatus == 'used', 'gray': item.CardStatus == 'used'}" @click="toCardDetail(item)">
+            <div :class="{'opacity' : item.CardStatus == 'expire' || item.CardStatus == 'used', 'gray': item.CardStatus == 'used'}" @click="toGymCardDetail(item)">
               <div class="card-top">
                 <div class="top-left">
                   <img :src="logo" alt="">
           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,
   },
   created () {
     this.change('', 0)
+    this.getCardList().then((res) => {
+      for (var n = 0; n < res.length; n++) {
+        this.data[0].list.push({
+          title: res[n].CardName,
+          desc: res[n].Share.CardUseRule,
+          time: this.toolClass.dateFormat(res[n].EndDate),
+          useType: res[n].Status === 1 ? '未使用' : '已使用',
+          tag: '共享',
+          cardid: res[n].CardId
+        })
+      }
+    })
   },
   methods: {
-    ...mapCardActions(['getgymCardList']),
+    ...mapCardActions([
+      'getgymCardList',
+      'getCardList',
+    ]),
     change (item, index) {
       this.active = index
       this.getList('change')
         }
       }
     },
-    toCardDetail (item) {
-      this.$router.push({ name: 'cardDetail', query: { CustomerGymId: item.CustomerGymId } })
+    toGymCardDetail (item) {
+      this.$router.push({ name: 'gymCardDetail', query: { CustomerGymId: item.CustomerGymId } })
     },
-    toCouponsDetail () {
-      this.$router.push({ name: 'couponsDetail' })
+    toCardDetail (item) {
+      this.$router.push({ name: 'cardDetail', query: { id: item.cardid } })
     }
   }
 }

src/pages/user/cardDetail/index.vue

 <template>
   <div class="mainPage">
     <div class="title">体验卡详情</div>
-    <div class="content">
+    <div class="content" v-if="info !== null">
       <div class="message">
         <div>
-          <span>会所健身体验卡</span>
+          <span>{{info.CardName}}</span>
           <span class="sub">(可在银城会所健身房和游泳池使用)</span>
         </div>
         <div>
           <span>有效时间</span>
-          <span>{{toolClass.dateFormat(gymCardDetail.EndDate)}}</span>
+          <span>{{toolClass.dateFormat(info.EndDate)}}</span>
         </div>
       </div>
       <div class="rule">
         <div>使用规则</div>
-        <div>{{gymCardDetail.CardUseRule}}</div>
+        <div>{{info.Share.CardUseInstruction}}</div>
       </div>
       <div class="line">
         <img :src="Artboard" alt="" width="100%">
       </div>
-      <div class="qr-code" style="margin-top:.1rem;">
-        <qrCode :msg='msg' v-if="msg"></qrCode>
-      </div>
     </div>
   </div>
 </template>
 
 <script>
-import qrCode from '../../../components/qrCodeCard/qrCodeCard'
 import Artboard from '../../../common/icon/Artboard.png'
 import { createNamespacedHelpers } from 'vuex'
-const { mapState: mapCardState, mapActions: mapCardActions } = createNamespacedHelpers('card')
+const { mapActions: mapCardActions } = createNamespacedHelpers('card')
 export default {
   data () {
     return {
       msg: '',
       Artboard,
-      time: '2018年3月17日'
+      time: '2018年3月17日',
+      info: null,
     }
   },
-  methods: {
-
-  },
-  computed: {
-    ...mapCardState({
-      gymCardDetail: x => x.gymCardDetail
-    })
-  },
-  components: {
-    qrCode
-  },
   created () {
-    this.getgymCardDetail({ customerGymId: this.$route.query.CustomerGymId }).then(() => {
-      this.msg = this.gymCardDetail.CustomerGymId
+    this.getCardInfo({ id: this.$route.query.id }).then((res) => {
+      console.log(JSON.stringify(res))
+      this.info = res
     })
   },
   methods: {
-    ...mapCardActions(['getgymCardDetail'])
+    ...mapCardActions(['getCardInfo'])
   }
 }
 </script>

src/pages/user/gymCardDetail/index.vue

+<template>
+  <div class="mainPage">
+    <div class="title">健身卡详情</div>
+    <div class="content">
+      <div class="message">
+        <div>
+          <span>会所健身体验卡</span>
+          <span class="sub">(可在银城会所健身房和游泳池使用)</span>
+        </div>
+        <div>
+          <span>有效时间</span>
+          <span>{{toolClass.dateFormat(gymCardDetail.EndDate)}}</span>
+        </div>
+      </div>
+      <div class="rule">
+        <div>使用规则</div>
+        <div>{{gymCardDetail.CardUseRule}}</div>
+      </div>
+      <div class="line">
+        <img :src="Artboard" alt="" width="100%">
+      </div>
+      <div class="qr-code" style="margin-top:.1rem;">
+        <qrCode :msg='msg' v-if="msg"></qrCode>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import qrCode from '../../../components/qrCodeCard/qrCodeCard'
+import Artboard from '../../../common/icon/Artboard.png'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapCardState, mapActions: mapCardActions } = createNamespacedHelpers('card')
+export default {
+  data () {
+    return {
+      msg: '',
+      Artboard,
+      time: '2018年3月17日'
+    }
+  },
+  methods: {
+
+  },
+  computed: {
+    ...mapCardState({
+      gymCardDetail: x => x.gymCardDetail
+    })
+  },
+  components: {
+    qrCode
+  },
+  created () {
+    this.getgymCardDetail({ customerGymId: this.$route.query.CustomerGymId }).then(() => {
+      this.msg = this.gymCardDetail.CustomerGymId
+    })
+  },
+  methods: {
+    ...mapCardActions(['getgymCardDetail'])
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import 'page.scss';
+</style>

src/pages/user/gymCardDetail/page.scss

+.mainPage{
+  padding: .3rem .16rem .45rem;
+  box-sizing: border-box;
+  .title{
+    font-size: .18rem;
+    font-weight: bold;
+    padding-bottom: .14rem;
+    padding-left: .2rem;
+  }
+  .content{
+    background:#fff;
+    box-shadow:0px .08rem .37rem 0px rgba(202,202,202,0.42);
+    border-radius:.1rem;
+    padding: .12rem 0;
+    .message{
+      padding: 0 .22rem;
+      div{
+        margin-bottom: .2rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        span:nth-of-type(1){
+          font-size: .14rem;
+        }
+        span:nth-last-of-type(1){
+          text-align: right;
+        }
+        .sub{
+          color: #FA2A00;
+          font-size: .12rem;
+        }
+      }
+    }
+    .rule{
+      padding: 0 .22rem;
+      div:nth-of-type(1){
+        margin-bottom: .2rem;
+        font-size: .14rem;
+        color: #000;
+      }
+      div{
+        font-size: .12rem;
+        color: rgba(174,174,174,1);
+        margin-bottom: .1rem;
+      }
+    }
+  }
+  .number{
+    text-align: center;
+    color:rgba(143,143,143,1);
+    margin-bottom: .2rem;
+  }
+  .useType{
+    position: absolute;
+    bottom: 1.6rem;
+    right: .8rem;
+    width: .76rem;
+    height: .76rem;
+  }
+}

src/pages/user/router.js

 import coupons from './coupons/index' // 优惠券
 import lessonDetail from './lessonDetail/index' // 课程详情
 import cardDetail from './cardDetail/index' // 体验卡详情
+import gymCardDetail from './gymCardDetail/index' // 健身卡详情
 import couponsDetail from './couponsDetail/index' // 体验券详情
 import share from './share/index' // 卡券分享页面
 
     name: 'cardDetail',
     component: cardDetail,
     children: []
+  }, { // 健身卡详情
+    path: '/gymCardDetail',
+    name: 'gymCardDetail',
+    component: gymCardDetail,
+    children: []
   }, { // 体验券详情
     path: '/couponsDetail',
     name: 'couponsDetail',

src/store/card/index.js

     }
   },
   actions: {
+    getCardList (context) { // 获取体验卡列表
+      return new Promise((resolve) => {
+        Ajax(api.card.getCardList.url, {
+          method: api.card.getCardList.method,
+        }).then(res => {
+          resolve(res)
+        }).catch((err) => {
+          reject(err)
+        })
+      })
+    },
+    getCardInfo (context, { id }) { // 获取体验卡详情
+      return new Promise((resolve) => {
+        Ajax(api.card.getCardInfo.url, {
+          method: api.card.getCardInfo.method,
+          urlData: {
+            id,
+          }
+        }).then(res => {
+          resolve(res)
+        }).catch((err) => {
+          reject(err)
+        })
+      })
+    },
     getgymCardList (context, data) { // 获取课程详情信息
       return new Promise((resolve) => {
         Ajax(api.user.gymCard.url, {

src/util/api.js

     myCustomer: { // 我的客户
       method: 'get',
       url: `${baseUrl}${wechat}/customer/user`
-    }
+    },
+    getCardList: { // 我的体验卡列表
+      method: 'get',
+      url: `${baseUrl}${wechat}/customer/card`
+    },
+    getCardInfo: { // 我的体验卡详情
+      method: 'get',
+      url: `${baseUrl}${wechat}/customer/card/:id`
+    },
   },
   user: {
     info: { // 获取用户信息