Merge branch 'dev' of http://git.ycjcjy.com/SpaceOfCheng/wechat into dev

src/components/myCard/myCard.vue

@@ -3,35 +3,35 @@
     <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>
@@ -54,15 +54,13 @@ export default {
     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/card/index.vue

@@ -6,12 +6,12 @@
     <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="">
@@ -81,29 +81,7 @@ export default {
           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,
@@ -139,9 +117,24 @@ export default {
   },
   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')
@@ -172,11 +165,11 @@ export default {
         }
       }
     },
-    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

@@ -1,62 +1,49 @@
 <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/coupons/index.vue

@@ -2,7 +2,9 @@
   <div class="mainPage">
     <scroll ref='scroll' :isloading='isloading' class='wrapper' :data='list' :pullUpLoad='pullUpLoadObj' :startY='parseInt(startY)' @pullingUp='getList'>
       <div class="box">
-        <discounts v-for="(item,index) in list" :key='index' @toUse='toUse' :data='item'></discounts>
+        <router-link tag="div" v-for="(item,index) in list" :key='index' :to="{name: 'couponsDetail', query: {id: item.customercouponid}}">
+          <discounts @toUse='toUse' :data='item'></discounts>
+        </router-link>
         <noMore v-if="hasPic"></noMore>
       </div>
     </scroll>
@@ -19,6 +21,9 @@ import failure from '../../../common/icon/inv.png'
 import scroll from '../../../components/scroll/scroll'
 import noMore from '../../../components/noMore/noMore'
 import discounts from '../../../components/discounts/discounts'
+import { mapState, createNamespacedHelpers } from 'vuex'
+const { mapActions: caseTableActions } = createNamespacedHelpers('placeOrderForCoffee')
+
 export default {
   data () {
     return {
@@ -32,29 +37,7 @@ export default {
       isloading: true,
       hasPic: false,
       hasMore: true,
-      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: [],
       line
     }
   },
@@ -76,7 +59,27 @@ export default {
         : false
     }
   },
+  created () {
+    this.getCouponList().then((res) => {
+      // console.log(JSON.stringify(res))
+      // console.log(JSON.stringify(this.couponList))
+      for (var n = 0; n < res.length; n++) {
+        this.list.push({
+          title: res[n].Coupon.CouponName,
+          desc: res[n].Coupon.Share.UseInstruction,
+          time: this.toolClass.dateFormat(res[n].EndDate),
+          useType: res[n].Status === 1 ? '未使用' : '已使用',
+          tag: res[n].Coupon.CouponType === 'coupon' ? '课程' : '商品',
+          customercouponid: res[n].CustomerCouponId,
+          couponid: res[n].Coupon.CouponId
+        })
+      }
+    })
+  },
   methods: {
+    ...caseTableActions([
+      'getCouponList',
+    ]),
     change (item, index) {
       this.active = index
     },
@@ -91,5 +94,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "page.scss";
+@import 'page.scss';
 </style>

src/pages/user/couponsDetail/index.vue

@@ -1,14 +1,14 @@
 <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.CustomerCouponName}}</span>
         </div>
         <div>
           <span>有效时间：</span>
-          <div class="time">{{time}}</div>
+          <div class="time">{{toolClass.dateFormat(info.EndDate)}}</div>
         </div>
       </div>
       <div class="rule">
@@ -16,41 +16,44 @@
         <div>1. 此卡不可兑换现金，不可与其他优惠活动同时使用。 </div>
         <div>2. 此卡不可多人使用，一人记一次。 </div>
         <div>3. 非会员可凭此卡享受对应课程。 </div>
-        <div>4. 截止日期至{{time}}。 </div>
+        <div>4. 截止日期至{{toolClass.dateFormat(info.EndDate)}}。 </div>
       </div>
       <div class="line">
         <img :src="Artboard" alt="" width="100%">
       </div>
-      <div class="qr-code" style="margin-top:.1rem;">
-        <div class="number">核销编码: 3423487682734</div>
-        <qrCode :msg='msg'></qrCode>
-      </div>
     </div>
   </div>
 </template>
 
 <script>
-import qrCode from '../../../components/qrCodeCard/qrCodeCard'
 import Artboard from '../../../common/icon/Artboard.png'
+import { mapState, createNamespacedHelpers } from 'vuex'
+const { mapActions: caseTableActions } = createNamespacedHelpers('placeOrderForCoffee')
 export default {
   data () {
     return {
-      msg: {
-        course_type: 800
-      },
+      msg: 'sdsdssdsdsdsds',
       Artboard,
-      time: '2018年3月17日'
+      time: '2018年3月17日',
+      info: null,
     }
   },
+  created () {
+    this.getCouponInfo({
+      id: this.$route.query.id
+    }).then((res) => {
+      // console.log(JSON.stringify(res))
+      this.info = res
+    })
+  },
   methods: {
-
+    ...caseTableActions([
+      'getCouponInfo',
+    ]),
   },
-  components: {
-    qrCode
-  }
 }
 </script>
 
 <style lang="scss" scoped>
-@import "page.scss";
+@import 'page.scss';
 </style>

src/pages/user/gymCardDetail/index.vue

@@ -0,0 +1,66 @@
+<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

@@ -0,0 +1,60 @@
+.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/mainPage/coffeeIndex/index.vue

@@ -135,11 +135,16 @@ const { mapActions: caseTableActions } = createNamespacedHelpers('placeOrderForC
 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,
@@ -197,87 +202,21 @@ export default {
           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: []
         }
       ]
     }
@@ -317,6 +256,30 @@ export default {
     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
@@ -332,6 +295,9 @@ export default {
     })
   },
   methods: {
+    ...mapUserCenterActions([
+      'getMyCardList',
+    ]),
     ...actions([
       'getCaseList',
     ]),

src/pages/user/placeOrderDetail/index.vue

@@ -23,8 +23,8 @@
               <div class="flex-item">
                 <div><span>选择商品券</span></div>
               </div>
-              <a class="active" @click="showSelect = true">
-                <span>{{postData.ticketName === '' ? '1张饮品券' : postData.ticketName}}</span>
+              <a class="active" v-if="getCouponOff && couponList.length" @click="showSelectCouponLayer = true">
+                <span>{{postData.customercouponid === '' ? '有' + couponList.length + '张优惠券可选' : '已选择优惠券'}}</span>
                 <i class="iconfont icon-jiantou-right"></i>
               </a>
             </li>
@@ -45,16 +45,24 @@
         <a @click="toPayer">确定</a>
       </div>
     </div>
-    <div class="selectLayer" :class="{'show': showSelect}">
-      <div>
-        <van-picker
-          show-toolbar
-          title="选择优惠券"
-          :columns="ticketList"
-          @cancel="showSelect = false"
-          @confirm="onConfirm"
-          value-key="value"
-        />
+    <div class="selectCouponLayer" :class="{'show': showSelectCouponLayer}">
+      <div class="flex-v">
+        <div>
+          <i class="iconfont icon-guanbi" @click="showSelectCouponLayer = false"></i>
+        </div>
+        <div class="flex-item">
+          <div class="flex-h">
+            <div class="flex-item" style="margin: 0 .2rem;">
+              <ul>
+                <li v-for="(item,index) in couponList" :key="index" @click="selectCouponItem(item)" :class="{'active':item.select}">
+                  <i class="iconfont icon-gouxuan"></i>
+                  <discounts :data="item"></discounts>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <a @click="sureSelectCoupon">确定</a>
       </div>
     </div>
   </div>
@@ -63,12 +71,16 @@
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex'
 const { mapActions: caseTableActions } = createNamespacedHelpers('placeOrderForCoffee')
+import discounts from '../../../components/discounts/discounts'
 
 export default {
   name: '',
   data () {
     var _self = this
     return {
+      showSelectCouponLayer: false,
+      getCouponOff: false,
+      couponList: [], // 优惠券列表
       postData: {
         info: {
           CaseId: decodeURI(_self.$route.query.caseid),
@@ -81,21 +93,7 @@ export default {
           Remark: '',
         },
         detail: [],
-        coupon: [
-          //   {
-          //   OrdersCouponId: '',
-          //   OrdersId: '',
-          //   OrdersNo: '',
-          //   CouponId: '',
-          //   CouponName: '',
-          //   OrgId: '',
-          //   GoodsId: '',
-          //   GoodsName: '',
-          //   UsedAmount: '',
-          //   Status: '',
-          //   CreateDate: '',
-          // }
-        ],
+        customercouponid: ''
       },
       ticketList: [{
         value: '优惠券1',
@@ -107,10 +105,12 @@ export default {
         value: '优惠券3',
         id: '3',
       }],
-      showSelect: false,
       orderInfo: JSON.parse(_self.$route.query.info) || []
     }
   },
+  components: {
+    discounts,
+  },
   computed: {
     ...mapState({
       userInfo: x => x.userCenter.userInfo,
@@ -118,13 +118,71 @@ export default {
     })
   },
   created () {
-    // console.log(this.$route.query.info)
-    // console.log(JSON.stringify(this.postData))
+    this.getCouponList().then((res) => {
+      // console.log(JSON.stringify(res))
+      var id = JSON.parse(this.$route.query.info)[0].id, arr = [], nowDate = Date.now()
+      for (var n = 0; n < res.length; n++) {
+        if (res[n].Coupon.CouponType === 'goods' && res[n].Status === 1) {
+          if (res[n].Coupon.IsAll) {
+            this.couponList.push({
+              title: res[n].Coupon.CouponName,
+              desc: res[n].Coupon.Share.UseInstruction,
+              time: this.toolClass.dateFormat(res[n].EndDate),
+              useType: '未使用',
+              tag: '商品',
+              id: res[n].CustomerCouponId,
+              select: false,
+            })
+          } else {
+            for (var a = 0; a < res[n].Coupon.Targets.length; a++) {
+              if (res[n].Coupon.Targets[a].TargetId === id && nowDate >= new Date(res[n].StartDate).getTime() && nowDate < new Date(res[n].EndDate).getTime()) {
+                this.couponList.push({
+                  title: res[n].Coupon.CouponName,
+                  desc: res[n].Coupon.Share.UseInstruction,
+                  time: this.toolClass.dateFormat(res[n].EndDate),
+                  useType: '未使用',
+                  tag: '商品',
+                  id: res[n].CustomerCouponId,
+                  select: false,
+                })
+              }
+            }
+          }
+        }
+      }
+      this.getCouponOff = true
+      // console.log(JSON.stringify(this.couponList))
+    })
   },
   methods: {
     ...caseTableActions([
       'toPay',
+      'getCouponList',
     ]),
+    sureSelectCoupon () {
+      var bool = false
+      for (var n = 0; n < this.couponList.length; n++) {
+        if (this.couponList[n].select) {
+          bool = true
+          this.postData.customercouponid = this.couponList[n].id
+        }
+      }
+      if (!bool) {
+        this.postData.customercouponid = ''
+      }
+      this.showSelectCouponLayer = false
+    },
+    selectCouponItem (item) { // 选择优惠券
+      // item.select = !item.select
+      if (!item.select) {
+        for (var n = 0; n < this.couponList.length; n++) {
+          this.couponList[n].select = false
+        }
+        item.select = true
+      } else {
+        item.select = false
+      }
+    },
     returnAmount () { // 返回总金额  
       var amount = 0, num = 0, info = JSON.parse(this.$route.query.info)
       for (var n = 0; n < info.length; n++) {
@@ -138,16 +196,11 @@ export default {
       }
       return [amount, num]
     },
-    onConfirm (value, index) {
-      this.postData.coupon.CouponName = value.value
-      this.postData.coupon.CouponId = value.id
-      this.showSelect = false
-    },
     toPayer () { // 下单
       this.postData.info.OrgId = this.orgId
       this.postData.info.UserId = this.userInfo.CustomerId
       this.postData.info.UserName = this.userInfo.customer.CustomerName
-      this.postData.info.PayType = this.postData.coupon.length ? 'coupon' : 'vip'
+      this.postData.info.PayType = this.postData.customercouponid === '' ? 'coupon' : 'vip'
       var orderInfo = JSON.parse(this.$route.query.info)
       this.postData.detail = []
       var amount = 0
@@ -159,10 +212,10 @@ export default {
           SpecId: orderInfo[n].spec,
           SpecName: orderInfo[n].specname,
           Number: orderInfo[n].num - 0,
-          Price: String(orderInfo[n].price-0),
+          Price: String(orderInfo[n].price - 0),
         })
-        amount += (orderInfo[n].price-0) * orderInfo[n].num
-        num += orderInfo[n].num-0
+        amount += (orderInfo[n].price - 0) * orderInfo[n].num
+        num += orderInfo[n].num - 0
       }
       this.postData.info.Amount = String(amount)
       this.postData.info.OrdersNum = num
@@ -170,7 +223,7 @@ export default {
       this.toPay({
         info: JSON.stringify(this.postData.info),
         detail: JSON.stringify(this.postData.detail),
-        coupon: JSON.stringify(this.postData.coupon)
+        customercouponid: this.postData.customercouponid
       }).then((res) => {
         this.$dialog.alert({
           message: '下单成功！'

src/pages/user/placeOrderDetail/page.scss

@@ -167,4 +167,136 @@
       overflow: hidden;
     }
   }
+  .selectCouponLayer{
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 100;
+    background: rgba(0,0,0,.5);
+    display: none;
+    &.show{
+      display: block;
+    }
+    >div{
+      width: 100%;
+      height: 4rem;
+      position: absolute;
+      overflow: hidden;
+      left: 0;
+      bottom: 0;
+      background: #fff;
+      border-radius: .1rem .1rem 0 0;
+      >div{
+        width: 100%;
+        &:first-child{
+          text-align: right;
+          margin-top: .1rem;
+          >i{
+            margin-right: .1rem;
+            font-size: .2rem;
+            color: #666;
+          }
+        }
+        &.flex-item{
+          position: relative;
+          overflow: visible;
+          >div{
+            width: 100%;
+            position: absolute;
+            overflow: visible;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            >div{
+              width: 100%;
+              overflow-y: scroll;
+              -webkit-overflow-scrolling: touch;
+              transform: translateZ(0);
+              -webkit-transform: translateZ(0);
+              overflow-x: visible;
+              ul{
+                width: 100%;
+                position: relative;
+                overflow: visible;
+                li{
+                  width: 100%;
+                  position: relative;
+                  overflow: visible;
+                  margin: .1rem auto 0;
+                  >i{
+                    display: none;
+                    font-size: .2rem;
+                    color: #fd684a;
+                    position: absolute;
+                    right: .1rem;
+                    top: .1rem;
+                    z-index: 110;
+                  }
+                  &.active{
+                    >i{
+                      display: block;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      >a{
+        width: 100%;
+        display: block;
+        text-align: center;
+        font-size: .16rem;
+        color: #fff;
+        background: #fd684a;
+        line-height: .5rem;
+      }
+    }
+    // >div{
+    //   width: 100%;
+    //   max-height: 3rem;
+    //   overflow: hidden;
+    //   position: absolute;
+    //   left: 0;
+    //   bottom: 0;
+    //   background: #fff;
+    //   border-radius: .1rem .1rem 0 0;
+    //   >div{
+    //     width: 100%;
+    //     position: relative;
+    //     overflow: visible;
+    //     &:first-child{
+    //       text-align: right;
+    //     }
+    //     i{
+    //       font-size: .2rem;
+    //       color: #666;
+    //       margin-right: .1rem;
+    //     }
+    //     >ul{
+    //       position: relative;
+    //       overflow: visible;
+    //       margin: 0 .2rem;
+    //       >li{
+    //         width: 100%;
+    //         position: relative;
+    //         overflow: visible;
+    //         margin: .1rem auto 0;
+    //       }
+    //     }
+    //   }
+    //   >a{
+    //     width: 100%;
+    //     display: block;
+    //     text-align: center;
+    //     font-size: .16rem;
+    //     color: #fff;
+    //     background: #fd684a;
+    //     line-height: .5rem;
+    //   }
+    // }
+  }
 }

src/pages/user/placeOrderForCourse/index.vue

@@ -54,7 +54,7 @@
                     <span>优惠信息</span>
                   </div>
                 </div>
-                <span>{{postData.CouponId == '' ? '暂未选择优惠券' : postData.CouponName}}</span>
+                <span>{{postData.customercouponid == '' ? '暂未选择优惠券' : '已选择优惠券'}}</span>
                 <i class="iconfont icon-jiantou-right"></i>
               </div>
               <div class="flex-h">
@@ -63,7 +63,7 @@
                     <span>优惠券</span>
                   </div>
                 </div>
-                <span>{{columns.length > 1 ? (columns.length-1) + '张可用优惠券' : '暂无优惠券'}}</span>
+                <span>{{couponList.length ? couponList.length + '张可用优惠券' : '暂无优惠券'}}</span>
               </div>
             </div>
             <div class="agreement">
@@ -98,14 +98,22 @@
     </div>
     <div class="layer" :class="{'show': showLayer}"> 
       <div>
-        <van-picker
-          show-toolbar
-          title="选择优惠券"
-          :columns="columns"
-          @cancel="onCancel"
-          @confirm="onConfirm"
-          value-key="value"
-        />
+        <div class="top">
+          <i class="iconfont icon-guanbi"></i>
+        </div>
+        <div class="body flex-h">
+          <div class="flex-item">
+            <div>
+              <ul>
+                <li v-for="(item,index) in couponList" :key="index" @click="selectCouponItem(item)" :class="{'active':item.select}">
+                  <i class="iconfont icon-gouxuan"></i>
+                  <discounts :data="item"></discounts>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <a @click="sureSelectCoupon">确定</a>
       </div>
     </div>
   </div>
@@ -114,33 +122,28 @@
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex'
 const { mapActions: mapProjectActions, mapState: mapProjectState } = createNamespacedHelpers('majorProjects')
+const { mapActions: caseTableActions } = createNamespacedHelpers('placeOrderForCoffee')
+import discounts from '../../../components/discounts/discounts'
 
 export default {
   name: '',
   data () {
     return {
+      couponList: [],
+      getCouponOff: false,
       agreementOff: false, // 是否同意协议
       courseTimeList: [],
       postData: {
         CouponId: '',
         CouponName: '',
+        customercouponid: ''
       },
       showLayer: false, // 显隐选择优惠券弹窗
-      columns: [{ // 优惠券列表
-        value: '不选择优惠券',
-        id: '',
-      }, {
-        value: '优惠券1',
-        id: '1',
-      }, {
-        value: '优惠券2',
-        id: '2',
-      }, {
-        value: '优惠券3',
-        id: '3',
-      }],
     }
   },
+  components: {
+    discounts,
+  },
   computed: {
     ...mapState({
       orgid: x => x.app.orgId,
@@ -156,14 +159,74 @@ export default {
     }),
   },
   created () {
-    this.getCourseDetailInfo({ id: this.$route.query.id }).then((res) => {
-      var arr = res.CourseDetail
-      this.courseTimeList = arr.sort(function (a, b) { return new Date(a.BeginDate).getTime() > new Date(b.BeginDate).getTime() ? 1 : -1 })
+    this.getCouponList().then((res) => {
+      this.getCourseDetailInfo({ id: this.$route.query.id }).then((res) => {
+        var arr = res.CourseDetail
+        this.courseTimeList = arr.sort(function (a, b) { return new Date(a.BeginDate).getTime() > new Date(b.BeginDate).getTime() ? 1 : -1 })
+      })
+      var id = this.$route.query.id, arr = [], nowDate = Date.now()
+      for (var n = 0; n < res.length; n++) {
+        if (res[n].Coupon.CouponType === 'coupon' && res[n].Status === 1) {
+          if (res[n].Coupon.IsAll) {
+            this.couponList.push({
+              title: res[n].Coupon.CouponName,
+              desc: res[n].Coupon.Share.UseInstruction,
+              time: this.toolClass.dateFormat(res[n].EndDate),
+              useType: '未使用',
+              tag: '课程',
+              id: res[n].CustomerCouponId,
+              select: false,
+            })
+          } else {
+            for (var a = 0; a < res[n].Coupon.Targets.length; a++) {
+              if (res[n].Coupon.Targets[a].TargetId === id && nowDate >= new Date(res[n].StartDate).getTime() && nowDate < new Date(res[n].EndDate).getTime()) {
+                this.couponList.push({
+                  title: res[n].Coupon.CouponName,
+                  desc: res[n].Coupon.Share.UseInstruction,
+                  time: this.toolClass.dateFormat(res[n].EndDate),
+                  useType: '未使用',
+                  tag: '课程',
+                  id: res[n].CustomerCouponId,
+                  select: false,
+                })
+              }
+            }
+          }
+        }
+      }
+      this.getCouponOff = true
+      // console.log(JSON.stringify(this.couponList))
     })
   },
   methods: {
+    ...caseTableActions([
+      'getCouponList',
+    ]),
+    sureSelectCoupon () {
+      var bool = false
+      for (var n = 0; n < this.couponList.length; n++) {
+        if (this.couponList[n].select) {
+          bool = true
+          this.postData.customercouponid = this.couponList[n].id
+        }
+      }
+      if (!bool) {
+        this.postData.customercouponid = ''
+      }
+      this.showLayer = false
+    },
+    selectCouponItem (item) { // 选择优惠券
+      if (!item.select) {
+        for (var n = 0; n < this.couponList.length; n++) {
+          this.couponList[n].select = false
+        }
+        item.select = true
+      } else {
+        item.select = false
+      }
+    },
     placeOrder () { // 下单
-      if(!this.agreementOff){
+      if (!this.agreementOff) {
         this.$toast('请先阅读服务协议并同意')
         return false
       }
@@ -174,7 +237,7 @@ export default {
           CustomerId: this.user.CustomerId,
           Price: this.courseDetail.Price
         },
-        coupons: []
+        customercouponid: this.postData.customercouponid
       }).then((res) => {
         // console.log(JSON.stringify(res))
         this.$dialog.alert({
@@ -218,5 +281,5 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-@import "page.scss";
+@import 'page.scss';
 </style>

src/pages/user/placeOrderForCourse/page.scss

@@ -195,6 +195,70 @@
       left: 0;
       bottom: 0;
       overflow: hidden;
+      background: #fff;
+      border-radius: .1rem .1rem 0 0;
+      .top{
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        text-align: right;
+        margin-top: .1rem;
+        padding-bottom: .1rem;
+        i{
+          margin-right: .1rem;
+          font-size: .2rem;
+          color: #666;
+        }
+      }
+      >.body{
+        width: 100%;
+        position: relative;
+        overflow: visible;
+        >div{
+          margin: 0 .2rem;
+          position: relative;
+          overflow: visible;
+          >div{
+            width: 100%;
+            max-height: 3rem;
+            position: relative;
+            overflow-x: visible;
+            overflow-y: scroll;
+            -webkit-overflow-scrolling: touch;
+            transform: translateZ(0);
+            -webkit-transform: translateZ(0);
+            ul{
+              li{
+                margin: .1rem auto 0;
+                position: relative;
+                >i{
+                  display: none;
+                  font-size: .2rem;
+                  color: #fd684a;
+                  position: absolute;
+                  right: .1rem;
+                  top: .1rem;
+                  z-index: 110;
+                }
+                &.active{
+                  >i{
+                    display: block;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      >a{
+        width: 100%;
+        display: block;
+        line-height: .5rem;
+        text-align: center;
+        color: #fff;
+        font-size: .15rem;
+        background: #fc6243;
+      }
     }
   }
 }

src/pages/user/router.js

@@ -19,6 +19,7 @@ import card from './card/index' // 卡
 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 receive from './receive/index' // 领取页面
 import receiveResults from './receiveResults/index' // 领取结果页面
@@ -116,6 +117,11 @@ const router = new Router({
     name: 'cardDetail',
     component: cardDetail,
     children: []
+  }, { // 健身卡详情
+    path: '/gymCardDetail',
+    name: 'gymCardDetail',
+    component: gymCardDetail,
+    children: []
   }, { // 体验券详情
     path: '/couponsDetail',
     name: 'couponsDetail',

src/store/card/index.js

@@ -17,6 +17,31 @@ export default {
     }
   },
   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/store/index.js

@@ -22,7 +22,7 @@ export const modules = {
   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/majorProjects/majorProjects.js

@@ -17,13 +17,13 @@ export default {
     }
   },
   actions: {
-    placeOrderForCourse (context, { order, coupons = [] }) { // 课程下单
+    placeOrderForCourse (context, { order, customercouponid }) { // 课程下单
       return new Promise((resolve, reject) => {
         Ajax(api.majorProjects.placeCourseOrder.url, {
           method: api.majorProjects.placeCourseOrder.method,
           data: {
             info: window.JSON.stringify(order),
-            coupons: window.JSON.stringify(coupons),
+            customercouponid,
           }
         }).then(res => {
           resolve(res)

src/store/placeOrderForCoffee/index.js

@@ -63,14 +63,35 @@ export default {
         })
       })
     },
-    toPay (context, { info, detail, coupon }) { // 下单
+    toPay (context, { info, detail, customercouponid }) { // 下单
       return new Promise((resolve) => {
         Ajax(api.caseForCoffee.placeGoodsOrder.url, {
           method: api.caseForCoffee.placeGoodsOrder.method,
           data: {
             info,
             detail,
-            coupon,
+            customercouponid,
+          },
+        }).then(res => {
+          resolve(res)
+        })
+      })
+    },
+    getCouponList (context) { // 获取优惠券列表
+      return new Promise((resolve) => {
+        Ajax(api.caseForCoffee.getCouponList.url, {
+          method: api.caseForCoffee.getCouponList.method,
+        }).then(res => {
+          resolve(res)
+        })
+      })
+    },
+    getCouponInfo (context, { id }) { // 获取优惠券详情
+      return new Promise((resolve) => {
+        Ajax(api.caseForCoffee.getCouponInfo.url, {
+          method: api.caseForCoffee.getCouponInfo.method,
+          urlData: {
+            id,
           },
         }).then(res => {
           resolve(res)

src/store/userCenter/userCenter.js

@@ -101,6 +101,16 @@ export default {
     }
   },
   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

@@ -47,7 +47,15 @@ const $api = {
     placeGoodsOrder: { // 商品下单
       method: 'post',
       url: `${baseUrl}${wechat}/order/goods`
-    }
+    },
+    getCouponList: { // 获取优惠券列表
+      method: 'get',
+      url: `${baseUrl}${wechat}/customer/coupon`
+    },
+    getCouponInfo: { // 获取优惠券详情
+      method: 'get',
+      url: `${baseUrl}${wechat}/customer/coupon/:id`
+    },
   },
   majorProjects: { // 项目专题
     getCourseList: { // 获取课程列表
@@ -67,7 +75,15 @@ const $api = {
     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: { // 获取用户信息
@@ -106,7 +122,7 @@ const $api = {
       method: 'get',
       url: `${baseUrl}${wechat}/gymcard`
     },
-    gymCardDetail: { // 获取健身卡列表
+    gymCardDetail: { // 获取健身卡详情
       method: 'get',
       url: `${baseUrl}${wechat}/gymcard/:customerGymId`
     },
@@ -141,6 +157,16 @@ const $api = {
       url: `${baseUrl}${wechat}/coupon/detail/:id`
     }
   },
+  sales: {
+    getCardList: { // 获取我的卡列表
+      method: 'get',
+      url: `${baseUrl}${wechat}/card`
+    },
+    getCouponList: { // 获取我的券列表
+      method: 'get',
+      url: `${baseUrl}${wechat}/coupon`
+    },
+  },
   login: { // 主管、销售端登陆
     login: {
       method: 'post',