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="showLayer = true">
                <div class="flex-item">
                  <div>
                    <span>优惠信息</span>
                  </div>
                </div>
                <span>{{postData.customercouponid == '' ? '暂未选择优惠券' : '已选择优惠券'}}</span>
                <i class="iconfont icon-jiantou-right"></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>5、协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容</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: false, // 是否同意协议
      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++) {
        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) {
        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>