wechat/src/pages/user/placeOrderForCourse/index.vue

<template>
  <div class="mainPage flex-v">
    <div class="flex-item">
      <div>
        <h4>订单信息</h4>
        <div class="list flex-h">
          <div class="flex-item">
            <ul>
              <li class="flex-h">
                <div class="flex-item">
                  <div>
                    <span>精品课程名称</span>
                  </div>
                </div>
                <span>{{courseDetail.CourseName}}</span>
              </li>
              <li class="flex-h">
                <div class="flex-item">
                  <div>
                    <span>预计开班时间</span>
                  </div>
                </div>
                <span>{{returnDate(courseDetail.BeginDate)}}</span>
              </li>
              <li class="flex-h">
                <div class="flex-item">
                  <div>
                    <span>时间描述</span>
                  </div>
                </div>
                <span v-if="courseTimeList.length">{{returnCourseTime(courseTimeList[0].BeginDate,courseTimeList[0].EndDate)}}</span>
              </li>
              <li class="flex-h">
                <div class="flex-item">
                  <div>
                    <span>地点</span>
                  </div>
                </div>
                <span v-if="courseDetail.CaseInfo !== undefined">{{courseDetail.CaseInfo.CaseAddress}}</span>
              </li>
              <li class="flex-h">
                <div class="flex-item">
                  <div>
                    <span>价格</span>
                  </div>
                </div>
                <span>￥{{courseDetail.Price}}</span>
              </li>
            </ul>
            <div class="selectTicket">
              <div class="flex-h" @click="couponList.length ? showLayer = true : showLayer = false">
                <div class="flex-item">
                  <div>
                    <span>优惠信息</span>
                  </div>
                </div>
                <span>{{postData.customercouponid == '' ? '暂未选择优惠券' : '已选择优惠券'}}</span>
                <i class="iconfont icon-jiantou-right" v-if="couponList.length"></i>
              </div>
              <div class="flex-h">
                <div class="flex-item">
                  <div>
                    <span>优惠券</span>
                  </div>
                </div>
                <span>{{couponList.length ? couponList.length + '张可用优惠券' : '暂无优惠券'}}</span>
              </div>
            </div>
            <div class="agreement">
              <span>购前需知</span>
              <div class="flex-h">
                <div class="flex-item">
                  <div>
                    <span>同意《银城精品团课服务协议》</span>
                  </div>
                </div>
                <i class="iconfont icon-gouxuan" :class="{'active': agreementOff}" @click="agreement"></i>
              </div>
            </div>
            <div class="protocol">
              <div>1. 甲方具有为乙方更换教练的权利及责任。(当甲方为乙方安排的教练因故离职或乙方认 为甲方的教练无法胜任对其的指导工作时,甲方应为乙方另行安排教练)。</div>
              <div>2. 甲方必须保证乙方享有与教练一对多的指导，甲方教练上课中出现违规时乙方有权投诉。</div>
              <div>3. 乙方承诺其身体状况已被医疗机构确认良好，适宜接受本协议约定的训练课程,即身体 状况完全正常，不存在运动风险及潜在运动风险。如若隐瞒，出现后果由乙方自负。</div>
              <div>4. 乙方承诺其身体状况完全符合使用甲方器械以及完成课程内容的条件和能力。若因乙方 未提供既往病史或谎报病史而引起的运动伤害,后果由乙方自负。</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-h">
      <div class="flex-item">
        <div>
          <span>总计￥<em>{{courseDetail.Price}}</em></span>
        </div>
      </div>
      <a @click="placeOrder">确认订单</a>
    </div>
    <div class="layer" :class="{'show': showLayer}"> 
      <div>
        <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>
</template>

<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: true, // 是否同意协议
      courseTimeList: [],
      postData: {
        CouponId: '',
        CouponName: '',
        customercouponid: ''
      },
      showLayer: false, // 显隐选择优惠券弹窗
    }
  },
  components: {
    discounts,
  },
  computed: {
    ...mapState({
      orgid: x => x.app.orgId,
      fiveA: x => x.index.fiveA,
      banner: x => x.index.banner,
      message: x => x.index.message,
      project: x => x.index.project,
      cms: x => x.index.cms,
      user: x => x.userCenter.userInfo
    }),
    ...mapProjectState({
      courseDetail: x => x.courseDetail
    }),
  },
  created () {
    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++) {
          console.log(res[n])
          if (res[n].Coupon.CouponType === 'course' && 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) {
        this.$toast('请先阅读服务协议并同意')
        return false
      }
      this.placeOrderForCourse({
        order: {
          CourseId: this.courseDetail.CourseId,
          CaseId: this.courseDetail.CaseId,
          CustomerId: this.user.CustomerId,
          Price: this.courseDetail.Price
        },
        customercouponid: this.postData.customercouponid
      }).then((res) => {
        // console.log(JSON.stringify(res))
        this.$dialog.alert({
          message: '下单成功！'
        }).then(() => {
          // this.$router.push({name: 'majorProjects'})
          window.history.go(-2)
        })
      })
    },
    ...mapProjectActions([
      'getCourseDetailInfo',
      'placeOrderForCourse',
    ]),
    returnCourseTime (val, endVal) { // 返回课时时间
      val = new Date(val)
      endVal = new Date(endVal)
      return this.returnNum(val.getMonth() + 1) + '/' + this.returnNum(val.getDate()) + ' 周' + '日一二三四五六'.split('')[new Date(val).getDay()] + ' ' + this.returnNum(val.getHours()) + ':' + this.returnNum(val.getMinutes()) + '~' + this.returnNum(endVal.getHours()) + ':' + this.returnNum(endVal.getMinutes())
    },
    returnNum (val) {
      return val > 9 ? val : '0' + val
    },
    returnDate (val) {
      val = new Date(val)
      return this.returnNum(val.getMonth() + 1) + '月' + this.returnNum(val.getDate()) + '日'
    },
    onConfirm (value, index) {
      this.postData.CouponId = value.id
      this.postData.CouponName = value.value
      this.showLayer = false
    },
    onCancel () {
      this.showLayer = false
    },
    agreement () { // 同意协议
      this.agreementOff = !this.agreementOff
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import 'page.scss';
</style>