xcx

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,63 @@ 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(res[n])
+          } 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 +188,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 +204,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 +215,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/store/placeOrderForCoffee/index.js

@@ -63,19 +63,28 @@ 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)
+        })
+      })
+    },
   }
 }

src/util/api.js

@@ -47,7 +47,11 @@ const $api = {
     placeGoodsOrder: { // 商品下单
       method: 'post',
       url: `${baseUrl}${wechat}/order/goods`
-    }
+    },
+    getCouponList: { // 获取优惠券列表
+      method: 'get',
+      url: `${baseUrl}${wechat}/customer/coupon`
+    },
   },
   majorProjects: { // 项目专题
     getCourseList: { // 获取课程列表