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

<template>
  <div class="mainPage" v-if="showPage">
    <div class="title">课程详情</div>
    <div class="content" :class="{'opacity' : courseOrderDetail.IsDone === 1 || (courseOrderDetail.IsDone === 0 && now > time(courseOrderDetail.EndDate)), 'gray': courseOrderDetail.IsDone === 1 || (courseOrderDetail.IsDone === 0 && now > time(courseOrderDetail.EndDate))}">
      <div class="list-item flex-h">
        <span>订单编号</span>
        <span class="flex-item" style="font-size:.11rem;">{{courseOrderDetail.OrdersNo !== undefined ? courseOrderDetail.OrdersNo : ''}}</span>
      </div>
      <div class="list-item flex-h">
        <span>课程名称</span>
        <span class="flex-item">{{courseOrderDetail.CourseName}}</span>
      </div>
      <div class="list-item flex-h">
        <span>课时数</span>
        <span class="flex-item">{{courseOrderDetail.JoinNum}}/{{courseOrderDetail.CourseNum}}</span>
      </div>
      <div class="list-item flex-h">
        <span>类型</span>
        <span class="flex-item">{{returnLocationName(courseOrderDetail.LocationId)}}</span>
      </div>
      <div class="list-item flex-h">
        <span>商品价格</span>
        <span class="flex-item">¥{{courseOrderDetail.Price}}</span>
      </div>
      <div class="list-item flex-h">
        <span>下单时间</span>
        <span class="flex-item">{{toolClass.dateFormat(courseOrderDetail.CreateDate)}}</span>
      </div>
      <div class="list-item flex-h">
        <span>课程时间</span>
        <span class="flex-item">{{toolClass.dateFormat(courseOrderDetail.BeginDate) + ' ~ ' + toolClass.dateFormat(courseOrderDetail.EndDate)}}<span class="remark">计划备注({{courseOrderDetail.Remark}})</span> </span>
      </div>
      <div class="list-item">
        <span>地点</span>
        <span>{{returnCaseName(courseOrderDetail.CaseId)}}</span>
      </div>
      <div class="list-item">
        <span>付款方式</span>
        <span v-if="courseOrderDetail.CourseObtaimType === 'cheng-coin'">城币支付</span>
        <span v-if="courseOrderDetail.CourseObtaimType === 'card'">卡券抵用</span>
        <span v-if="courseOrderDetail.CourseObtaimType === 'coupon'">优惠券抵用</span>
      </div>
      <div class="half-cic">
        <span></span>
        <span></span>
      </div>
      <div class="qr-code" v-if="courseOrderDetail.IsDone === 0">
        <qrCode v-if="showQrCode" :msg="courseOrderDetail.QrCodeString"></qrCode>
        <div>{{courseOrderDetail.QrCodeString}}</div>
      </div>
    </div>
    <div class="useType">
      <img :src="used" alt="已使用" v-if="courseOrderDetail.IsDone === 1" width="100%" height="100%">
      <img :src="failure" alt="已失效" v-if="courseOrderDetail.IsDone === 0 && now > time(courseOrderDetail.EndDate)" width="100%" height="100%">
    </div>
  </div>
</template>

<script>
import qrCode from '../../../components/qrCodeCard/qrCodeCard'
import used from '../../../common/icon/already.png'
import failure from '../../../common/icon/inv.png'
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: actions } = createNamespacedHelpers('app')
const { mapActions: mapUserActions, mapState: mapUserState } = createNamespacedHelpers('userCenter')
export default {
  data () {
    return {
      useType: '未使用',
      used,
      failure,
      showQrCode: false,
      showPage: false,
      now: ''
    }
  },
  created () {
    this.now = Date.now()
    this.getCourseLocationList().then(() => {
      this.getCaseList().then(() => {
        this.getCourseOrderDetail({
          id: this.$route.query.id
        }).then((res) => {
          this.showQrCode = true
          this.showPage = true
          // console.log(JSON.stringify(res))
        })
      })
    })
  },
  computed: {
    ...mapUserState({
      courseOrderDetail: x => x.courseOrderDetail,
      courseLocationList: x => x.courseLocationList,
    }),
    ...mapState({
      CaseList: x => x.app.CaseList,
    })
  },
  methods: {
    ...mapUserActions([
      'getCourseOrderDetail',
      'getCourseLocationList',
    ]),
    ...actions([
      'getCaseList',
    ]),
    returnLocationName (id) {
      for (var n = 0; n < this.courseLocationList.length; n++) {
        if (this.courseLocationList[n].LocationId === id) {
          return this.courseLocationList[n].LocationName
        }
      }
    },
    returnCaseName (id) {
      for (var n = 0; n < this.CaseList.length; n++) {
        if (this.CaseList[n].CaseId === id) {
          return this.CaseList[n].CaseName
        }
      }
    },
    time (time) {
      return new Date(time).getTime()
    }
  },
  components: {
    qrCode,
  }
}
</script>

<style lang="scss" scoped>
@import 'page.scss';
</style>