ytj

src/components/discounts/discounts.vue

@@ -1,17 +1,25 @@
 <template>
-  <div class="discounts flex-h">
-    <div class="card-left">
-      <div class="title">
-        <i class="iconfont icon-youhuiquan"></i>
-        <div>小小外交官体验卡</div>
+  <div class="discounts">
+    <div class="flex-h" :class="{'opacity' : data.useType == '已失效' || data.useType == '已使用', 'gray': data.useType == '已使用'}" @click="toDetail">
+      <div class="card-left">
+        <div class="title">
+          <i class="iconfont icon-youhuiquan"></i>
+          <div>{{data.title}}</div>
+        </div>
+        <div class="desc">{{data.desc}}</div>
+        <div class="time">有效期至{{data.time}}</div>
+      </div>
+      <div class="card-right">
+        <img :src="logo" alt="" width="100%" height="100%">
+        <div class="btn" @click.stop="toUse" v-if="data.useType == '未使用'">去使用</div>
+      </div>
+      <div class="tag" :class="{'gray-location' : data.useType == '已使用'}">
+        <span>{{data.tag}}</span>
       </div>
-      <div class="desc">凭此体验券可让一位小朋友体验一次 适用于小小外交官课程</div>
-      <div class="time">有效期至2018年8月17日</div>
     </div>
-    <div class="card-right">
-      <img :src="logo" alt="">
-      <div class="btn">去使用</div>
-      <div>共享</div>
+    <div class="useType">
+      <img :src="used" alt="已使用" v-if="data.useType == '已使用'" width="100%" height="100%">
+      <img :src="failure" alt="已失效" v-if="data.useType == '已失效'" width="100%" height="100%">
     </div>
   </div>
 </template>
@@ -21,25 +29,133 @@ import logo from '../../common/icon/logo-t.png'
 import used from '../../common/icon/already.png'
 import failure from '../../common/icon/inv.png'
 export default {
+  props: ['data'],
   data () {
     return {
       logo,
       used,
       failure
     }
+  },
+  methods: {
+    toUse () {
+      this.$emit('toUse', this.data)
+    },
+    toDetail () {
+      this.$emit('toDetail', this.data)
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.discounts{
-  padding: .15rem .2rem;
+.discounts {
+  padding: 0.15rem 0.2rem;
   box-sizing: border-box;
-  .card-left{
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 2px 0.1rem 0px rgba(193, 204, 217, 0.5);
+  border-radius: 0.08rem;
+  margin-bottom: 0.2rem;
+  position: relative;
+  overflow: hidden;
+  .flex-h {
+    &.opacity {
+      opacity: 0.5;
+    }
+    &.gray {
+      filter: grayscale(100%);
+    }
+    .card-left {
+      flex: 1;
+      display: flex;
+      flex-flow: column nowrap;
+      .title {
+        display: flex;
+        align-items: center;
+        i {
+          padding-right: 0.08rem;
+          color: #ff7c1c;
+          font-weight: bold;
+          font-size: 0.2rem;
+        }
+        div {
+          font-size: 0.16rem;
+          font-weight: bold;
+          color: rgba(50, 54, 69, 1);
+        }
+      }
+      .desc {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        font-size: 0.12rem;
+        color: rgba(128, 128, 128, 1);
+      }
+      .time {
+        font-size: 0.12rem;
+        color: rgba(128, 128, 128, 1);
+      }
+    }
+    .card-right {
+      width: 0.9rem;
+      height: 0.9rem;
+      position: relative;
+      .btn {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-25%, -50%);
+        color: #ff7c1c;
+        width: 0.62rem;
+        text-align: center;
+        padding-bottom: 0.02rem;
+        border: 1px solid #ff7c1c;
+        border-radius: 0.2rem;
+        z-index: 2;
+      }
+    }
 
+    .tag {
+      position: absolute;
+      background: linear-gradient(
+        45deg,
+        rgba(255, 105, 0, 1) 0%,
+        rgba(255, 136, 0, 0.76) 100%
+      );
+      opacity: 0.85;
+      width: 0.6rem;
+      height: 0.6rem;
+      transform: rotate(45deg);
+      bottom: -0.3rem;
+      right: -0.3rem;
+      &.gray-location {
+        background: rgba(189, 189, 189, 1);
+      }
+      span {
+        position: absolute;
+        top: 0.22rem;
+        left: -0.03rem;
+        font-size: 0.12rem;
+        color: #fff;
+        transform: rotate(-90deg);
+      }
+    }
+  }
+  .useType {
+    position: absolute;
+    bottom: 0.25rem;
+    right: 0.25rem;
+    width: 0.76rem;
+    height: 0.76rem;
   }
-  .card-right{
-    width: .9rem;
+}
+
+@media screen and (max-width: 320px) {
+  .tag {
+    span {
+      top: 0.2rem !important;
+      left: -0.05rem !important;
+    }
   }
 }
 </style>

src/components/qrCodeCard/qrCodeCard.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="codeLayout">
+    <div id="QRcode"></div>
+  </div>
+</template>
+
+<script>
+import QRCode from 'qrcodejs2'
+export default {
+  name: 'qrCodeCard',
+  props: {
+    msg: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data () {
+    return {
+      lessonType: {
+        800: '1012-',
+        801: '1012-',
+        802: '1011-',
+        803: '1010-',
+        804: '1013-'
+      }
+    }
+  },
+  methods: {
+    InitCodeRules (info) {
+      let codeText
+      for (var Key in this.lessonType
+      ) {
+        if (parseInt(Key) === this.msg.course_type) {
+          codeText = this.lessonType[Key] + '-1'
+        }
+      }
+      const ele = document.querySelector('#QRcode')
+      this.qrCode = new QRCode(ele, {
+        text: codeText,
+        width: '100',
+        height: '100',
+        colorDark: '#000000',
+        colorLight: '#ffffff',
+        correctLevel: QRCode.CorrectLevel.H
+      })
+    }
+  },
+  components: {
+    QRCode
+  },
+  mounted () {
+    this.InitCodeRules()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.codeLayout{
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: .1rem;
+}
+</style>

src/module/user/card/index.vue

@@ -3,42 +3,47 @@
     <nav class="flex-h">
       <a class="flex-item" v-for="(item,index) in nav" :key="index" :class="{'active':index==active}" @click="change(item,index)">{{item}}</a>
     </nav>
-    <div class="box">
-      <div v-if="active == 0">
-        <discounts v-for="(item,index) in data[0].list" :key='index'></discounts>
-      </div>
-      <div v-if="active == 1">
-        <div class="fitness-card" v-for="(item,index) in data[1].list" :key='index' :class="{'opacity' : item.useType == '已失效' || item.useType == '已使用', 'gray': item.useType == '已使用'}">
-          <div class="card-top">
-            <div class="top-left">
-              <img :src="logo" alt="">
-              <div class="price">
-                <span>￥</span>
-                <h1>{{item.price}}</h1>
-                <span>元</span>
+    <scroll ref='scroll' :isloading='isloading' class='wrapper' :data='data[active].list' :pullUpLoad='pullUpLoadObj' :startY='parseInt(startY)' @pullingUp='getList'>
+      <div class="box">
+        <div v-if="active == 0">
+          <discounts v-for="(item,index) in data[0].list" :key='index' @toUse='toUse' :data='item' @toDetail="toCouponsDetail(item)"></discounts>
+          <noMore v-if="data[active].hasPic"></noMore>
+        </div>
+        <div v-if="active == 1">
+          <div class="fitness-card" v-for="(item,index) in data[1].list" :key='index'>
+            <div :class="{'opacity' : item.useType == '已失效' || item.useType == '已使用', 'gray': item.useType == '已使用'}" @click="toCardDetail(item)">
+              <div class="card-top">
+                <div class="top-left">
+                  <img :src="logo" alt="">
+                  <div class="price">
+                    <span>￥</span>
+                    <h1>{{item.price}}</h1>
+                    <span>元</span>
+                  </div>
+                </div>
+                <div class="top-right">
+                  <img :src="Line3" alt="">
+                  <div>{{item.title}}</div>
+                  <div>{{item.desc}}</div>
+                </div>
+              </div>
+              <div class="card-bottom">
+                <img :src="line" alt="">
+                <div class="time">有效期:{{item.time}}</div>
+                <div class="status" :class="{'gray-location' : item.useType == '已使用'}">
+                  <span>{{item.tag}}</span>
+                </div>
               </div>
             </div>
-            <div class="top-right">
-              <img :src="Line3" alt="">
-              <div>{{item.title}}</div>
-              <div>{{item.desc}}</div>
-            </div>
-          </div>
-          <div class="card-bottom">
-            <img :src="line" alt="">
-            <div class="time">有效期:{{item.time}}</div>
-            <div class="status" :class="{'gray-location' : item.useType == '已使用'}">
-              <span>次卡</span>
+            <div class="useType">
+              <img :src="used" alt="已使用" v-if="item.useType == '已使用'" width="100%" height="100%">
+              <img :src="failure" alt="已失效" v-if="item.useType == '已失效'" width="100%" height="100%">
             </div>
           </div>
-          <div class="useType">
-            <img :src="used" alt="已使用" v-if="item.useType == '已使用'" width="100%" height="100%">
-            <img :src="failure" alt="已失效" v-if="item.useType == '已失效'" width="100%" height="100%">
-          </div>
+          <noMore v-if="data[active].hasPic"></noMore>
         </div>
-        <noMore v-if="data[active].hasPic"></noMore>
       </div>
-    </div>
+    </scroll>
   </div>
 </template>
 
@@ -69,46 +74,58 @@ export default {
       data: [
         {
           hasPic: false,
+          hasMore: true,
           list: [
             {
-              title: '会所健身体验卡',
-              desc: '适用于游泳',
-              time: '2018年02月17日-2018年3月17日',
-              price: '120',
-              useType: '未使用'
+              title: '小小外交官体验卡',
+              desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程',
+              time: '2018年02月17日',
+              useType: '未使用',
+              tag: '共享'
             },
             {
-              title: '会所健身体验卡',
-              desc: '适用于游泳',
-              time: '2018年02月17日-2018年3月17日',
-              price: '120',
-              useType: '未使用'
+              title: '小小外交官体验卡',
+              desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程',
+              time: '2018年02月17日',
+              useType: '已使用',
+              tag: '商品'
+            },
+            {
+              title: '小小外交官体验卡',
+              desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程',
+              time: '2018年02月17日',
+              useType: '已失效',
+              tag: '商品'
             }
           ]
         },
         {
           hasPic: false,
+          hasMore: true,
           list: [
             {
               title: '会所健身体验卡',
               desc: '适用于游泳',
               time: '2018年02月17日-2018年3月17日',
               price: '120',
-              useType: '未使用'
+              useType: '未使用',
+              tag: '年卡'
             },
             {
               title: '会所健身体验卡',
               desc: '适用于游泳',
               time: '2018年02月17日-2018年3月17日',
               price: '120',
-              useType: '已使用'
+              useType: '已使用',
+              tag: '季卡'
             },
             {
               title: '会所健身体验卡',
               desc: '适用于游泳',
               time: '2018年02月17日-2018年3月17日',
               price: '120',
-              useType: '已失效'
+              useType: '已失效',
+              tag: '次卡'
             }
           ]
         }
@@ -137,6 +154,18 @@ export default {
   methods: {
     change (item, index) {
       this.active = index
+    },
+    toUse (item) {
+      console.log(item)
+    },
+    getList () {
+      console.log(111)
+    },
+    toCardDetail (item) {
+      this.$router.push({ name: 'cardDetail' })
+    },
+    toCouponsDetail () {
+      this.$router.push({ name: 'couponsDetail' })
     }
   }
 }

src/module/user/card/page.scss

@@ -37,10 +37,10 @@
       border-radius: 8px;
       margin-bottom: .2rem;
       position: relative;
-      &.opacity {
+      .opacity {
         opacity: .5;
       }
-      &.gray {
+      .gray {
         filter: grayscale(100%);
       }
       .card-top{
@@ -160,4 +160,4 @@
       }
     }
   }
-}
+}

src/module/user/cardDetail/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="mainPage">
+    <div class="title">体验卡详情</div>
+    <div class="content">
+      <div class="message">
+        <div>
+          <span>会所健身体验卡</span>
+          <span class="sub">(可在银城会所健身房和游泳池使用)</span>
+        </div>
+        <div>
+          <span>有效时间</span>
+          <span>{{time}}</span>
+        </div>
+      </div>
+      <div class="rule">
+        <div>使用规则</div>
+        <div>1. 此卡不可兑换现金，不可与其他优惠活动同时使用。 </div>
+        <div>2. 此卡不可多人使用，一人记一次。 </div>
+        <div>3. 非会员可凭此卡享受对应课程。 </div>
+        <div>4. 截止日期至{{time}}。 </div>
+      </div>
+      <div class="line">
+        <img :src="Artboard" alt="" width="100%">
+      </div>
+      <div class="qr-code" style="margin-top:.1rem;">
+        <div class="number">核销编码: 3423487682734</div>
+        <qrCode :msg='msg'></qrCode>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import qrCode from '../../../components/qrCodeCard/qrCodeCard'
+import Artboard from '../../../common/icon/Artboard.png'
+export default {
+  data () {
+    return {
+      msg: {
+        course_type: 800
+      },
+      Artboard,
+      time: '2018年3月17日'
+    }
+  },
+  methods: {
+
+  },
+  components: {
+    qrCode
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/module/user/cardDetail/page.scss

@@ -0,0 +1,60 @@
+.mainPage{
+  padding: .3rem .16rem .45rem;
+  box-sizing: border-box;
+  .title{
+    font-size: .18rem;
+    font-weight: bold;
+    padding-bottom: .14rem;
+    padding-left: .2rem;
+  }
+  .content{
+    background:#fff;
+    box-shadow:0px .08rem .37rem 0px rgba(202,202,202,0.42);
+    border-radius:.1rem;
+    padding: .12rem 0;
+    .message{
+      padding: 0 .22rem;
+      div{
+        margin-bottom: .2rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        span:nth-of-type(1){
+          font-size: .14rem;
+        }
+        span:nth-last-of-type(1){
+          text-align: right;
+        }
+        .sub{
+          color: #FA2A00;
+          font-size: .12rem;
+        }
+      }
+    }
+    .rule{
+      padding: 0 .22rem;
+      div:nth-of-type(1){
+        margin-bottom: .2rem;
+        font-size: .14rem;
+        color: #000;
+      }
+      div{
+        font-size: .12rem;
+        color: rgba(174,174,174,1);
+        margin-bottom: .1rem;
+      }
+    }
+  }
+  .number{
+    text-align: center;
+    color:rgba(143,143,143,1);
+    margin-bottom: .2rem;
+  }
+  .useType{
+    position: absolute;
+    bottom: 1.6rem;
+    right: .8rem;
+    width: .76rem;
+    height: .76rem;
+  }
+}

src/module/user/coupons/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="mainPage">
+    <scroll ref='scroll' :isloading='isloading' class='wrapper' :data='list' :pullUpLoad='pullUpLoadObj' :startY='parseInt(startY)' @pullingUp='getList'>
+      <div class="box">
+        <discounts v-for="(item,index) in list" :key='index' @toUse='toUse' :data='item'></discounts>
+        <noMore v-if="hasPic"></noMore>
+      </div>
+    </scroll>
+  </div>
+</template>
+
+<script>
+import line from '../../../common/icon/cicyle.png'
+import logo from '../../../common/icon/logo-t.png'
+import Line3 from '../../../common/icon/Line3.png'
+import used from '../../../common/icon/already.png'
+import failure from '../../../common/icon/inv.png'
+// 上拉加载组件
+import scroll from '../../../components/scroll/scroll'
+import noMore from '../../../components/noMore/noMore'
+import discounts from '../../../components/discounts/discounts'
+export default {
+  data () {
+    return {
+      nav: ['课程体验卡', '健身卡'],
+      active: 0,
+      logo,
+      Line3,
+      used,
+      failure,
+      pullUpLoad: true,
+      pullUpLoadThreshold: 40,
+      startY: 0,
+      isloading: true,
+      hasMore: true,
+      hasPic: false,
+      hasMore: true,
+      list: [
+        {
+          title: '小小外交官体验卡',
+          desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程',
+          time: '2018年02月17日',
+          useType: '未使用',
+          tag: '共享'
+        },
+        {
+          title: '小小外交官体验卡',
+          desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程',
+          time: '2018年02月17日',
+          useType: '已使用',
+          tag: '商品'
+        },
+        {
+          title: '小小外交官体验卡',
+          desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程',
+          time: '2018年02月17日',
+          useType: '已失效',
+          tag: '商品'
+        }
+      ],
+      line
+    }
+  },
+  components: {
+    scroll,
+    noMore,
+    discounts
+  },
+  computed: {
+    pullUpLoadObj: function () {
+      return this.pullUpLoad
+        ? {
+          threshold: parseInt(this.pullUpLoadThreshold),
+          txt: {
+            more: this.pullUpLoadMoreTxt,
+            noMore: this.pullUpLoadNoMoreTxt
+          }
+        }
+        : false
+    }
+  },
+  methods: {
+    change (item, index) {
+      this.active = index
+    },
+    toUse (item) {
+      console.log(item)
+    },
+    getList () {
+      console.log(111)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/module/user/coupons/page.scss

@@ -0,0 +1,7 @@
+.mainPage{
+  background: #fff;
+  .box{
+    padding: .25rem;
+    box-sizing: border-box;
+  }
+}

src/module/user/couponsDetail/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="mainPage">
+    <div class="title">体验券详情</div>
+    <div class="content">
+      <div class="message">
+        <div>
+          <span>体验券名称：小小外交官体验券</span>
+        </div>
+        <div>
+          <span>有效时间：</span>
+          <div class="time">{{time}}</div>
+        </div>
+      </div>
+      <div class="rule">
+        <div>使用规则</div>
+        <div>1. 此卡不可兑换现金，不可与其他优惠活动同时使用。 </div>
+        <div>2. 此卡不可多人使用，一人记一次。 </div>
+        <div>3. 非会员可凭此卡享受对应课程。 </div>
+        <div>4. 截止日期至{{time}}。 </div>
+      </div>
+      <div class="line">
+        <img :src="Artboard" alt="" width="100%">
+      </div>
+      <div class="qr-code" style="margin-top:.1rem;">
+        <div class="number">核销编码: 3423487682734</div>
+        <qrCode :msg='msg'></qrCode>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import qrCode from '../../../components/qrCodeCard/qrCodeCard'
+import Artboard from '../../../common/icon/Artboard.png'
+export default {
+  data () {
+    return {
+      msg: {
+        course_type: 800
+      },
+      Artboard,
+      time: '2018年3月17日'
+    }
+  },
+  methods: {
+
+  },
+  components: {
+    qrCode
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/module/user/couponsDetail/page.scss

@@ -0,0 +1,58 @@
+.mainPage{
+  padding: .3rem .16rem .45rem;
+  box-sizing: border-box;
+  .title{
+    font-size: .18rem;
+    font-weight: bold;
+    padding-bottom: .14rem;
+    padding-left: .2rem;
+  }
+  .content{
+    background:#fff;
+    box-shadow:0px .08rem .37rem 0px rgba(202,202,202,0.42);
+    border-radius:.1rem;
+    padding: .12rem 0;
+    .message{
+      padding: 0 .22rem;
+      div{
+        margin-bottom: .2rem;
+        span:nth-of-type(1){
+          font-size: .14rem;
+        }
+        span:nth-last-of-type(1){
+          text-align: right;
+        }
+        .time{
+          margin-top: .1rem;
+          color: rgba(174,174,174,1);
+          font-size: .14rem;
+        }
+      }
+    }
+    .rule{
+      padding: 0 .22rem;
+      div:nth-of-type(1){
+        margin-bottom: .2rem;
+        font-size: .14rem;
+        color: #000;
+      }
+      div{
+        font-size: .12rem;
+        color: rgba(174,174,174,1);
+        margin-bottom: .1rem;
+      }
+    }
+  }
+  .number{
+    text-align: center;
+    color:rgba(143,143,143,1);
+    margin-bottom: .2rem;
+  }
+  .useType{
+    position: absolute;
+    bottom: 1.6rem;
+    right: .8rem;
+    width: .76rem;
+    height: .76rem;
+  }
+}

src/module/user/lessonDetail/index.vue

@@ -0,0 +1,84 @@
+<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>

src/module/user/lessonDetail/page.scss

@@ -0,0 +1,73 @@
+.mainPage{
+  padding: .3rem .16rem .45rem;
+  box-sizing: border-box;
+  .title{
+    font-size: .18rem;
+    font-weight: bold;
+    padding-bottom: .14rem;
+    padding-left: .2rem;
+  }
+  .content{
+    background:#fff;
+    box-shadow:0px .08rem .37rem 0px rgba(202,202,202,0.42);
+    border-radius:.1rem;
+    padding: .12rem 0;
+    &.opacity {
+      opacity: .5;
+    }
+    &.gray {
+      filter: grayscale(100%);
+    }
+    .list-item{
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      padding: 0 .22rem;
+      margin-bottom: .1rem;
+      span{
+        display: block;
+        color: #666;
+      }
+      span:nth-of-type(2){
+        width: 60%;
+        text-align: right;
+        color: #000;
+        .coupon-name{
+          color: #FF2B00;
+          font-size: .12rem;
+        }
+      }
+    }
+    .half-cic{
+      height: .25rem;
+      display: flex;
+      justify-content: space-between;
+      overflow: hidden;
+      span{
+        display: block;
+        width: .25rem;
+        height: .25rem;
+        border-radius: 50%;
+        background: rgba(202,202,202,0.2);
+      }
+      span:nth-of-type(1){
+        transform: translateX(-50%);
+      }
+      span:nth-of-type(2){
+        transform: translateX(50%);
+      }
+    }
+    .number{
+      text-align: center;
+      color:rgba(143,143,143,1);
+      margin-top: .2rem;
+    }
+  }
+  .useType{
+    position: absolute;
+    bottom: 1.6rem;
+    right: .8rem;
+    width: .76rem;
+    height: .76rem;
+  }
+}

src/module/user/lessonOrder/index.vue

@@ -2,7 +2,7 @@
   <div class="mainPage">
     <scroll ref='scroll' :isloading='isloading' class='wrapper' :data='list' :pullUpLoad='pullUpLoadObj' :startY='parseInt(startY)' @pullingUp='getList'>
       <div class="box">
-        <div class="order-card flex-h" v-for="(item,index) in list" :key='index' :class="{'opacity' : item.useType == '已失效'}">
+        <div class="order-card flex-h" v-for="(item,index) in list" :key='index' :class="{'opacity' : item.useType == '已失效'}" @click="toDetail(item)">
           <div class="card-pic">
             <div :class="{'gray-location' : item.useType == '已失效'}"><span>{{item.LocationName}}</span></div>
             <img src="" class="cover" width="100%" height="100%" alt="">
@@ -123,6 +123,9 @@ export default {
         this.$refs.scroll.forceUpdate()
         return false
       }
+    },
+    toDetail () {
+      this.$router.push({name: 'lessonDetail'})
     }
   }
 }

src/module/user/mainPage/userCenter/index.vue

@@ -18,14 +18,14 @@
         </div>
       </div>
       <div class="vip-privilege flex-h">
-        <div class="flex-item privilege-item">
+        <div class="flex-item privilege-item" @click="toCoupons">
           <div class="img-box">
             <img src="../../../../common/icon/userCenter-icon-1.png" width="100%" height="100%" alt="">
           </div>
           <span>优惠券</span>
           <span>2张未使用</span>
         </div>
-        <div class="flex-item privilege-item"  @click="toCard">
+        <div class="flex-item privilege-item" @click="toCard">
           <div class="img-box">
             <img src="../../../../common/icon/userCenter-icon-2.png" width="100%" height="100%" alt="">
           </div>
@@ -103,6 +103,9 @@ export default {
     },
     toCard () {
       this.$router.push({ name: 'card' })
+    },
+    toCoupons () {
+      this.$router.push({ name: 'coupons' })
     }
   }
 }

src/module/user/router.js

@@ -12,6 +12,10 @@ import bindMobile from './bindMobile/bindMobile' // 绑定手机号
 import lessonOrder from './lessonOrder/index' // 我的订单
 import vip from './vip/index' // vip卡说明
 import card from './card/index' // 卡
+import coupons from './coupons/index' // 优惠券
+import lessonDetail from './lessonDetail/index' // 课程详情
+import cardDetail from './cardDetail/index' // 体验卡详情
+import couponsDetail from './couponsDetail/index' // 体验券详情
 
 Vue.use(Router)
 
@@ -71,6 +75,26 @@ const router = new Router({
     name: 'card',
     component: card,
     children: []
+  },{ // 优惠券
+    path: '/coupons',
+    name: 'coupons',
+    component: coupons,
+    children: []
+  },{ // 课程详情
+    path: '/lessonDetail',
+    name: 'lessonDetail',
+    component: lessonDetail,
+    children: []
+  },{ // 体验卡详情
+    path: '/cardDetail',
+    name: 'cardDetail',
+    component: cardDetail,
+    children: []
+  },{ // 体验券详情
+    path: '/couponsDetail',
+    name: 'couponsDetail',
+    component: couponsDetail,
+    children: []
   }],
   linkActiveClass: 'active',
 })