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

<template>
  <div class="mainPage">
    <div class="title">课程详情</div>
    <div class="content" :class="{'opacity' : useType == '已失效' || useType == '已使用', 'gray': useType == '已使用' || useType == '已失效'}">
      <div class="list-item">
        <span>订单编号</span>
        <span>144215646445464</span>
      </div>
      <div class="list-item">
        <span>订单名称</span>
        <span>拉伸柔韧度</span>
      </div>
      <div class="list-item">
        <span>节课数</span>
        <span>2节课</span>
      </div>
      <div class="list-item">
        <span>类型</span>
        <span>健身</span>
      </div>
      <div class="list-item">
        <span>商品价格</span>
        <span>¥1999</span>
      </div>
      <div class="list-item">
        <span>下单时间</span>
        <span>2018/04/12 14:26:09</span>
      </div>
      <div class="list-item">
        <span>课程时间</span>
        <span>2018/04/12 12:00至14:00 计划备注（每周六 19:30)</span>
      </div>
      <div class="list-item">
        <span>地点</span>
        <span>悦见山G99</span>
      </div>
      <div class="list-item">
        <span>付款方式</span>
        <span>优惠券抵用 <div class="coupon-name">小拉伸柔韧度体验券</div></span>
      </div>
      <div class="half-cic">
        <span></span>
        <span></span>
      </div>
      <div class="qr-code">
        <qrCode :msg='msg'></qrCode>
        <div class="number">32237489123</div>
      </div>
    </div>
    <div class="useType">
      <img :src="used" alt="已使用" v-if="useType == '已使用'" width="100%" height="100%">
      <img :src="failure" alt="已失效" v-if="useType == '已失效'" 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'
export default {
  data () {
    return {
      msg: {
        course_type: 800,
        orderNo: '342897789334'
      },
      useType: '未使用',
      used,
      failure,
    }
  },
  methods: {

  },
  components: {
    qrCode
  }
}
</script>

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