Merge pull request 'vip滑动Bug' (#12) from dev-qsh into master

Reviewed-on: #12

src/pages/me/vip.vue

@@ -2,8 +2,8 @@
   <view class="flex fld-c p15">
     <u-sticky>
       <view class="flex ai-c">
-        <view v-for="(item,index) in vipAllList" :key="index" class="km-item" :class="{ actived: index==current }"
+        <view v-for="(item, index) in vipAllList" :key="index" class="km-item" :class="{ actived: index == current }"
-          @click="current=index">
+          @click="current = index">
           {{ getKmTitle(item.subjects) }}
         </view>
       </view>
@@ -11,17 +11,17 @@
     <view class="mt15">
       <swiper class="swiper" :current="current" style="height: 120px;" :autoplay="false" :display-multiple-items="1.45"
         :disable-programmatic-animation="true" @change="onChange">
-        <swiper-item v-for="(item,index) in vipAllList" :key="index">
+        <swiper-item v-for="(item, index) in vipAllList" :key="index">
           <view class="relative">
             <image src="../../static/image/mine/vip_card.png" mode="widthFix" style="width:95%;"></image>
             <view class="vip-info">
               <u-avatar class="br-p50 overflow-h" style="border: 3px solid #873E1D;" :size="35" mp-avatar></u-avatar>
               <view class="ml10">
                 <view class="fs16 fwb" style="color: #7E4012;line-height: 16px;">
-                  {{item.memberName}}
+                  {{ item.memberName }}
                 </view>
                 <view class="mt5 fs12" style="color: #7E4012;line-height: 12px;">
-                  {{getExpireText(item)}}
+                  {{ getExpireText(item) }}
                 </view>
               </view>
             </view>
@@ -29,7 +29,7 @@
               VIP已开通
             </view>
             <view v-if="vipHasOpened(item)" class="renew">
-              {{item.price}}元立即续费
+              {{ item.price }}元立即续费
             </view>
             <view v-else class="buy">
               立即充值
@@ -43,10 +43,10 @@
     <view class="mt20">
       <swiper class="swiper" :current="current" style="height: 300px;" :autoplay="false"
         :disable-programmatic-animation="true" @change="onChange">
-        <swiper-item v-for="(item,index) in vipAllList" :key="index">
+        <swiper-item v-for="(item, index) in vipAllList" :key="index">
           <view v-if="index == 0 || index == 3" class="p15 br8 cor-fff">
             <view class="fs18 cor-000 fwb">
-              3步轻松学{{getKmTitle(item.subjects)}}
+              3步轻松学{{ getKmTitle(item.subjects) }}
             </view>
             <view class="mt25 flex ai-c jc-sb">
               <view class="flex ai-c">
@@ -106,7 +106,7 @@
               <view class="flex ai-c mt20">
                 <image src="../../static/image/index/index_bg.png" mode="widthFix" style="flex: 1;border-radius: 33rpx;"></image>
                 <view class="ml18 text-center">
-                  <u-button :customStyle="{width:'200rpx',height:'66rpx',borderRadius: '33rpx'}" iconColor="#fff"
+                  <u-button :customStyle="{ width: '200rpx', height: '66rpx', borderRadius: '33rpx' }" iconColor="#fff"
                     text="去看视频" color="linear-gradient(90deg, #E66501 0%, #F8A42C 100%)" icon="play-circle" @click="toPlaceLive(item)">
                   </u-button>
                   <view class="cor-333 fs15 mt17">真实考场模拟</view>
@@ -115,19 +115,17 @@
             </view>
           </view>
         </swiper-item>
-        <swiper-item>
-        </swiper-item>
       </swiper>
     </view>
   </view>
 </template>
 
 <script>
-  import useUserStore from '@/jtools/store/user'
+import useUserStore from '@/jtools/store/user'
-  export default {
+export default {
   computed: {
     vipAllList() {
-        return useUserStore().vipAllList.filter(it=>[1,2,3,4].includes(Number(it.subjects)))
+      return useUserStore().vipAllList.filter(it => [1, 2, 3, 4].includes(Number(it.subjects)))
     },
     vipOnList() {
       return useUserStore().vipOnList
@@ -153,7 +151,7 @@
     },
     getExpireText(item) {
       const vipOn = this.vipOnList.find(it => it.memberId == item.memberId)
-        if(vipOn) {
+      if (vipOn) {
         return `${vipOn.endDate.split(' ')[0]}到期`
       } else {
         return '开通vip助您快速拿证'
@@ -165,7 +163,7 @@
     // 去精选500题 item=> 当前科目vip信息
     to500(item) {
       // 当前vip是否已开通
-        if(this.vipHasOpened(item)) {
+      if (this.vipHasOpened(item)) {
         // 跳转
       } else {
         uni.showToast({
@@ -177,7 +175,7 @@
     // 去真实考场 item=> 当前科目vip信息
     toRealExam(item) {
       // 当前vip是否已开通
-        if(this.vipHasOpened(item)) {
+      if (this.vipHasOpened(item)) {
         // 跳转
       } else {
         uni.showToast({
@@ -189,7 +187,7 @@
     // 去秘卷 item=> 当前科目vip信息
     toSpecExam(item) {
       // 当前vip是否已开通
-        if(this.vipHasOpened(item)) {
+      if (this.vipHasOpened(item)) {
         // 跳转
       } else {
         uni.showToast({
@@ -201,7 +199,7 @@
     // 去考场实况 item=> 当前科目vip信息
     toPlaceLive(item) {
       // 当前vip是否已开通
-        if(this.vipHasOpened(item)) {
+      if (this.vipHasOpened(item)) {
         // 跳转
       } else {
         uni.showToast({
@@ -211,11 +209,11 @@
       }
     }
   }
-  }
+}
 </script>
 
 <style lang="scss" scoped>
-  .km-item {
+.km-item {
   margin-right: 8px;
   width: 72px;
   height: 30px;
@@ -225,26 +223,26 @@
   text-align: center;
   border-radius: 15px;
   border: 1px solid #CCCCCC;
-  }
+}
 
-  .actived {
+.actived {
   background: linear-gradient(90deg, #E66501 0%, #F8A42C 100%);
   color: #fff;
-  }
+}
 
-  .km-item:last-of-type {
+.km-item:last-of-type {
   margin-right: 0;
-  }
+}
 
-  .vip-info {
+.vip-info {
   position: absolute;
   top: 15px;
   left: 10px;
   display: flex;
   align-items: center;
-  }
+}
 
-  .corner {
+.corner {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -258,9 +256,9 @@
   justify-content: center;
   font-size: 12px;
   color: #fff;
-  }
+}
 
-  .renew {
+.renew {
   position: absolute;
   right: 10%;
   bottom: 15px;
@@ -273,8 +271,9 @@
   border-radius: 26rpx;
   font-size: 12px;
   color: #F6E99F;
-  }
+}
-  .buy {
+
+.buy {
   position: absolute;
   left: 45%;
   transform: translateX(-50%);
@@ -288,9 +287,9 @@
   border-radius: 30rpx;
   font-size: 14px;
   color: #F6E99F;
-  }
+}
 
-  .study {
+.study {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -300,13 +299,14 @@
   border-radius: 34rpx;
   font-size: 12px;
   color: #873E1D;
-  }
+}
-  .video-box {
+
+.video-box {
   padding: 20rpx;
   width: 694rpx;
   height: 369rpx;
   background: #F9F3E7;
   border: 2rpx solid #CF8B6D;
   border-radius: 16rpx;
-  }
+}
 </style>