sunday

src/components/discounts/discounts.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="discounts flex-h">
+    <div class="card-left">
+      <div class="title">
+        <i class="iconfont icon-youhuiquan"></i>
+        <div>小小外交官体验卡</div>
+      </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>
+  </div>
+</template>
+
+<script>
+import logo from '../../common/icon/logo-t.png'
+import used from '../../common/icon/already.png'
+import failure from '../../common/icon/inv.png'
+export default {
+  data () {
+    return {
+      logo,
+      used,
+      failure
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.discounts{
+  padding: .15rem .2rem;
+  box-sizing: border-box;
+  .card-left{
+
+  }
+  .card-right{
+    width: .9rem;
+  }
+}
+</style>

src/module/user/bindMobile/bindMobile.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="mainPage">
     <div class="mask">
+      <img :src="logo" class="logo" alt="">
       <div class="box">
         <div class="title">绑定</div>
 
@@ -61,11 +62,13 @@
 </template>
 
 <script>
+import logo from '../../../common/icon/logo.png'
 import { mapState, createNamespacedHelpers } from 'vuex'
 const { mapActions: actions } = createNamespacedHelpers('userCenter')
 export default {
   data () {
     return {
+      logo,
       showCase: false,
       showSales: false,
       columns: [],

src/module/user/bindMobile/page.scss

@@ -8,8 +8,14 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    background: rgba(0,0,0,0.3);
+    // background: rgba(0,0,0,0.3);
     position: relative;
+    .logo{
+      position: absolute;
+      top: .5rem;
+      left: .3rem;
+      width: 1.8rem;
+    }
     .select {
       position: absolute;
       bottom: 0;

src/module/user/card/index.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="mainPage">
+    <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>
+              </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>
+          </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>
+        </div>
+        <noMore v-if="data[active].hasPic"></noMore>
+      </div>
+    </div>
+  </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,
+      data: [
+        {
+          hasPic: false,
+          list: [
+            {
+              title: '会所健身体验卡',
+              desc: '适用于游泳',
+              time: '2018年02月17日-2018年3月17日',
+              price: '120',
+              useType: '未使用'
+            },
+            {
+              title: '会所健身体验卡',
+              desc: '适用于游泳',
+              time: '2018年02月17日-2018年3月17日',
+              price: '120',
+              useType: '未使用'
+            }
+          ]
+        },
+        {
+          hasPic: false,
+          list: [
+            {
+              title: '会所健身体验卡',
+              desc: '适用于游泳',
+              time: '2018年02月17日-2018年3月17日',
+              price: '120',
+              useType: '未使用'
+            },
+            {
+              title: '会所健身体验卡',
+              desc: '适用于游泳',
+              time: '2018年02月17日-2018年3月17日',
+              price: '120',
+              useType: '已使用'
+            },
+            {
+              title: '会所健身体验卡',
+              desc: '适用于游泳',
+              time: '2018年02月17日-2018年3月17日',
+              price: '120',
+              useType: '已失效'
+            }
+          ]
+        }
+      ],
+      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
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/module/user/card/page.scss

@@ -0,0 +1,163 @@
+.mainPage{
+  background: #fff;
+  nav{
+    white-space: nowrap;
+    overflow-x: scroll;
+    -webkit-overflow-scrolling: touch;
+    font-size: 0;
+    padding: .09rem 0;
+    background: #fff;
+    z-index: 100;
+    position: relative;
+    a{
+      line-height: .32rem;
+      text-align: center;
+      position: relative;
+      &.active::after{
+        content: '';
+        width: 20%;
+        height: .02rem;
+        display: block;
+        position: absolute;
+        left: 50%;
+        bottom: 0;
+        transform: translateX(-50%);
+        -webkit-transform: translateX(-50%);
+        background: #fc6243;
+      }
+    }
+  }
+  .box{
+    padding: .25rem;
+    box-sizing: border-box;
+    .fitness-card{
+      overflow: hidden;
+      background: rgba(255,255,255,1);
+      box-shadow: 0px 2px .1rem 0px rgba(193,204,217,0.5);
+      border-radius: 8px;
+      margin-bottom: .2rem;
+      position: relative;
+      &.opacity {
+        opacity: .5;
+      }
+      &.gray {
+        filter: grayscale(100%);
+      }
+      .card-top{
+        display: flex;
+        .top-left{
+          padding: .09rem;
+          position: relative;
+          box-sizing: border-box;
+          img{
+            width: 1.15rem;
+            position: absolute;
+            top: .09rem;
+            left: .09rem;
+          }
+          .price{
+            display: flex;
+            width: 1.1rem;
+            height: 1.1rem;
+            justify-content: center;
+            align-items: baseline;
+            line-height: 1.1rem;
+            span{
+              font-size: .14rem;
+              color: #FC6243;
+            }
+            h1{
+              font-size: .36rem;
+              color: #FC6243;
+            }
+          }
+        }
+        .top-right {
+          position: relative;
+          flex: 1;
+          box-sizing: border-box;
+          padding: .21rem .14rem;
+          img{
+            position: absolute;
+            left: 0;
+            top: 50%;
+            height: 60%;
+            transform: translateY(-50%);
+          }
+          div:nth-of-type(1){
+            font-size: .18rem;
+            font-weight: 600;
+            color: rgba(50,54,69,1);
+            padding-bottom: .16rem;
+          }
+          div:nth-of-type(2){
+            font-size: .12rem;
+            color: rgba(50,54,69,1);
+          }
+        }
+      }
+      .card-bottom{
+        position: relative;
+        padding: .06rem .2rem .12rem;
+        box-sizing: border-box;
+        img{
+          width: 100%;
+          height: .07rem;
+          position: absolute;
+          top: -0.15rem;
+          left: 0rem;
+        }
+        .time {
+          font-size: .12rem;
+          color: rgba(50,54,69,1);
+          overflow: hidden;
+        }
+        .status{
+          position: absolute;
+          background:linear-gradient(45deg,rgba(255,105,0,1) 0%,rgba(255,136,0,0.76) 100%);
+          opacity:0.85;
+          width: .6rem;
+          height: .6rem;
+          transform: rotate(45deg);
+          bottom: -0.3rem;
+          right: -0.3rem;
+          &.gray-location{
+            background: rgba(189,189,189,1);
+          }
+          span{
+            position: absolute;
+            top: .22rem;
+            left: -0.03rem;
+            font-size: .12rem;
+            color: #fff;
+            transform: rotate(-90deg);
+          }
+        }
+      }
+      .useType{
+        position: absolute;
+        bottom: .25rem;
+        right: .25rem;
+        width: .76rem;
+        height: .76rem;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 320px) {
+  .mainPage{
+    .box{
+      .fitness-card{
+        .card-bottom{
+          .status{
+            span{
+              top: .2rem !important;
+              left: -0.05rem !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/module/user/lessonOrder/index.vue

@@ -2,22 +2,22 @@
   <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="{'gray' : item.useType == '已失效'}">
-            <div class="card-pic">
-              <div :class="{'gray-location' : item.useType == '已失效'}"><span>{{item.LocationName}}</span></div>
-              <img src="" class="cover" width="100%" height="100%" alt="">
-            </div>
-            <div class="card-msg">
-              <div class="title">{{item.title}}</div>
-              <div class="text">付款方式：{{item.payType}}</div>
-              <div class="text">下单时间：{{item.time}}</div>
-            </div>
-            <div class="card-price">
-              <div class="price">￥ {{item.price}}</div>
-              <div class="type" :class="{'un-use' : item.useType == '未使用'}">{{item.useType}}</div>
-            </div>
+        <div class="order-card flex-h" v-for="(item,index) in list" :key='index' :class="{'opacity' : item.useType == '已失效'}">
+          <div class="card-pic">
+            <div :class="{'gray-location' : item.useType == '已失效'}"><span>{{item.LocationName}}</span></div>
+            <img src="" class="cover" width="100%" height="100%" alt="">
           </div>
-          <!-- <noMore v-if="hasPic"></noMore> -->
+          <div class="card-msg">
+            <div class="title">{{item.title}}</div>
+            <div class="text">付款方式：{{item.payType}}</div>
+            <div class="text">下单时间：{{item.time}}</div>
+          </div>
+          <div class="card-price">
+            <div class="price">￥ {{item.price}}</div>
+            <div class="type" :class="{'un-use' : item.useType == '未使用'}">{{item.useType}}</div>
+          </div>
+        </div>
+        <!-- <noMore v-if="hasPic"></noMore> -->
       </div>
     </scroll>
   </div>

src/module/user/lessonOrder/page.scss

@@ -7,7 +7,7 @@
     box-shadow:0px 2px 8px 0px rgba(204,204,204,0.5);
     border-radius:10px;
     margin-bottom: .2rem;
-    &.gray {
+    &.opacity {
       opacity: .5;
     }
     .card-pic {

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

@@ -25,7 +25,7 @@
           <span>优惠券</span>
           <span>2张未使用</span>
         </div>
-        <div class="flex-item privilege-item">
+        <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>
@@ -86,7 +86,6 @@ export default {
       this.user = this.userInfo.customer
       this.AccountInfo = JSON.parse(this.user.AccountInfo)
       this.headimgurl = this.AccountInfo.headimgurl
-      console.log(this.AccountInfo)
       if (this.user.Phone) {
         this.isLoading = false
       } else {
@@ -101,6 +100,9 @@ export default {
     },
     toVip () {
       this.$router.push({ name: 'vip' })
+    },
+    toCard () {
+      this.$router.push({ name: 'card' })
     }
   }
 }

src/module/user/router.js

@@ -11,6 +11,7 @@ import userCenter from './mainPage/userCenter/index' // 个人中心
 import bindMobile from './bindMobile/bindMobile' // 绑定手机号
 import lessonOrder from './lessonOrder/index' // 我的订单
 import vip from './vip/index' // vip卡说明
+import card from './card/index' // 卡
 
 Vue.use(Router)
 
@@ -61,9 +62,14 @@ const router = new Router({
     component: lessonOrder,
     children: []
   },{ // vip卡说明
-    path: '/lessonOrder',
-    name: 'lessonOrder',
-    component: lessonOrder,
+    path: '/vip',
+    name: 'vip',
+    component: vip,
+    children: []
+  },{ // 卡
+    path: '/card',
+    name: 'card',
+    component: card,
     children: []
   }],
   linkActiveClass: 'active',

src/module/user/vip/index.vue

@@ -1,108 +1,13 @@
 <template>
   <div class="mainPage">
-    vip
+    <h5>VIP卡使用说明</h5>
+    <div>1、VIP卡属于城的空间专属会员余额,可以在城的空间用于所有消费。</div>
+    <div>2、VIP卡内的余额不能提现。</div>
   </div>
 </template>
 
 <script>
 export default {
-  data () {
-    return {
-      hasPic: false,
-      pullUpLoad: true,
-      pullUpLoadThreshold: 40,
-      startY: 0,
-      isloading: true,
-      hasMore: true,
-      list: [
-        {
-          LocationName: '社交',
-          title: '小小外交官课程',
-          payType: '优惠券抵用',
-          time: '2018-7-18 12:19',
-          price: 199,
-          useType: '未使用'
-        },
-        {
-          LocationName: '社交',
-          title: '小小外交官课程',
-          payType: '优惠券抵用',
-          time: '2018-7-18 12:19',
-          price: 199,
-          useType: '已使用'
-        },
-        {
-          LocationName: '社交',
-          title: '小小外交官课程',
-          payType: '优惠券抵用',
-          time: '2018-7-18 12:19',
-          price: 199,
-          useType: '已失效'
-        },
-        {
-          LocationName: '社交',
-          title: '小小外交官课程',
-          payType: '优惠券抵用',
-          time: '2018-7-18 12:19',
-          price: 199,
-          useType: '已失效'
-        },
-        {
-          LocationName: '社交',
-          title: '小小外交官课程',
-          payType: '优惠券抵用',
-          time: '2018-7-18 12:19',
-          price: 199,
-          useType: '已失效'
-        },
-        {
-          LocationName: '社交',
-          title: '小小外交官课程',
-          payType: '优惠券抵用',
-          time: '2018-7-18 12:19',
-          price: 199,
-          useType: '已失效'
-        }
-      ]
-    }
-  },
-  components: {
-    scroll,
-    noMore
-  },
-  computed: {
-    pullUpLoadObj: function () {
-      return this.pullUpLoad
-        ? {
-          threshold: parseInt(this.pullUpLoadThreshold),
-          txt: {
-            more: this.pullUpLoadMoreTxt,
-            noMore: this.pullUpLoadNoMoreTxt
-          }
-        }
-        : false
-    }
-  },
-  methods: {
-    getList () {
-      this.list.length <= 8 ? this.hasMore = true : this.hasMore = false
-      if (this.hasMore) {
-        setTimeout(() => {
-          this.list.push({
-            LocationName: '社交',
-            title: '小小外交官课程',
-            payType: '优惠券抵用',
-            time: '2018-7-18 12:19',
-            price: 199,
-            useType: '已失效'
-          })
-        }, 1000)
-      } else {
-        this.$refs.scroll.forceUpdate()
-        return false
-      }
-    }
-  }
 }
 </script>
 

src/module/user/vip/page.scss

@@ -0,0 +1,12 @@
+.mainPage{
+  padding: .3rem .25rem;
+  box-sizing: border-box;
+  h5{
+    font-size: .16rem;
+    text-align: center;
+    padding-bottom: .2rem;
+  }
+  div{
+    font-size: .14rem;
+  }
+}