wechat/src/module/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>{{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.CouponId == '' ? '暂未选择优惠券' : postData.CouponName}}</span>
                <i class="iconfont icon-jiantou-right"></i>
              </div>
              <div class="flex-h">
                <div class="flex-item">
                  <div>
                    <span>优惠券</span>
                  </div>
                </div>
                <span>{{columns.length > 1 ? (columns.length-1) + '张可用优惠券' : '暂无优惠券'}}</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>
        <van-picker
          show-toolbar
          title="选择优惠券"
          :columns="columns"
          @cancel="onCancel"
          @confirm="onConfirm"
          value-key="value"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: mapProjectActions, mapState: mapProjectState } = createNamespacedHelpers('majorProjects')

export default {
  name: '',
  data () {
    return {
      agreementOff: false, // 是否同意协议
      courseTimeList: [],
      postData: {
        CouponId: '',
        CouponName: '',
      },
      showLayer: false, // 显隐选择优惠券弹窗
      columns: [{ // 优惠券列表
        value: '不选择优惠券',
        id: '',
      }, {
        value: '优惠券1',
        id: '1',
      }, {
        value: '优惠券2',
        id: '2',
      }, {
        value: '优惠券3',
        id: '3',
      }],
    }
  },
  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.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 })
    })
  },
  methods: {
    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
        },
        coupons: []
      }).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>