xcx

src/pages/user/coupons/index.vue

   <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>
 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 {
       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
     }
   },
         : 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
     },
 </script>
 
 <style lang="scss" scoped>
-@import "page.scss";
+@import 'page.scss';
 </style>

src/pages/user/couponsDetail/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.CustomerCouponName}}</span>
         </div>
         <div>
           <span>有效时间：</span>
-          <div class="time">{{time}}</div>
+          <div class="time">{{toolClass.dateFormat(info.EndDate)}}</div>
         </div>
       </div>
       <div class="rule">
         <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/placeOrderDetail/index.vue

       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(res[n])
+            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()) {

src/pages/user/placeOrderForCourse/index.vue

                     <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">
                     <span>优惠券</span>
                   </div>
                 </div>
-                <span>{{columns.length > 1 ? (columns.length-1) + '张可用优惠券' : '暂无优惠券'}}</span>
+                <span>{{couponList.length ? couponList.length + '张可用优惠券' : '暂无优惠券'}}</span>
               </div>
             </div>
             <div class="agreement">
     </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>
 <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,
     }),
   },
   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
       }
           CustomerId: this.user.CustomerId,
           Price: this.courseDetail.Price
         },
-        coupons: []
+        customercouponid: this.postData.customercouponid
       }).then((res) => {
         // console.log(JSON.stringify(res))
         this.$dialog.alert({
 
 <!-- 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

       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/store/majorProjects/majorProjects.js

     }
   },
   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

         })
       })
     },
+    getCouponInfo (context, { id }) { // 获取优惠券详情
+      return new Promise((resolve) => {
+        Ajax(api.caseForCoffee.getCouponInfo.url, {
+          method: api.caseForCoffee.getCouponInfo.method,
+          urlData: {
+            id,
+          },
+        }).then(res => {
+          resolve(res)
+        })
+      })
+    },
   }
 }

src/util/api.js

       method: 'get',
       url: `${baseUrl}${wechat}/customer/coupon`
     },
+    getCouponInfo: { // 获取优惠券详情
+      method: 'get',
+      url: `${baseUrl}${wechat}/customer/coupon/:id`
+    },
   },
   majorProjects: { // 项目专题
     getCourseList: { // 获取课程列表
       method: 'get',
       url: `${baseUrl}${wechat}/gymcard`
     },
-    gymCardDetail: { // 获取健身卡列表
+    gymCardDetail: { // 获取健身卡详情
       method: 'get',
       url: `${baseUrl}${wechat}/gymcard/:customerGymId`
     },