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 }"
-          @click="current=index">
+        <view v-for="(item, index) in vipAllList" :key="index" class="km-item" :class="{ actived: index == current }"
+          @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,198 +115,198 @@
             </view>
           </view>
         </swiper-item>
-        <swiper-item>
-        </swiper-item>
       </swiper>
     </view>
   </view>
 </template>
 
 <script>
-  import useUserStore from '@/jtools/store/user'
-  export default {
-    computed: {
-      vipAllList() {
-        return useUserStore().vipAllList.filter(it=>[1,2,3,4].includes(Number(it.subjects)))
-      },
-      vipOnList() {
-        return useUserStore().vipOnList
-      },
-      
+import useUserStore from '@/jtools/store/user'
+export default {
+  computed: {
+    vipAllList() {
+      return useUserStore().vipAllList.filter(it => [1, 2, 3, 4].includes(Number(it.subjects)))
     },
-    data() {
+    vipOnList() {
+      return useUserStore().vipOnList
+    },
+
+  },
+  data() {
+    return {
+      current: 0
+    }
+  },
+  methods: {
+    onChange(e) {
+      this.current = e.detail.current
+    },
+    getKmTitle(km) {
       return {
-        current: 0
+        '1': '科一',
+        '2': '科二',
+        '3': '科三',
+        '4': '科四',
+      }[km]
+    },
+    getExpireText(item) {
+      const vipOn = this.vipOnList.find(it => it.memberId == item.memberId)
+      if (vipOn) {
+        return `${vipOn.endDate.split(' ')[0]}到期`
+      } else {
+        return '开通vip助您快速拿证'
       }
     },
-    methods: {
-      onChange(e) {
-        this.current = e.detail.current
-      },
-      getKmTitle(km) {
-        return {
-          '1': '科一',
-          '2': '科二',
-          '3': '科三',
-          '4': '科四',
-        }[km]
-      },
-      getExpireText(item) {
-        const vipOn = this.vipOnList.find(it => it.memberId == item.memberId)
-        if(vipOn) {
-          return `${vipOn.endDate.split(' ')[0]}到期`
-        } else {
-          return '开通vip助您快速拿证'
-        }
-      },
-      vipHasOpened(item) {
-        return !!this.vipOnList.find(it => it.memberId == item.memberId)
-      },
-      // 去精选500题 item=> 当前科目vip信息
-      to500(item) {
-        // 当前vip是否已开通
-        if(this.vipHasOpened(item)) {
-          // 跳转
-        } else {
-          uni.showToast({
-            title: `请先充值${this.getKmTitle(item.subjects)}vip`,
-            icon: 'none'
-          })
-        }
-      },
-      // 去真实考场 item=> 当前科目vip信息
-      toRealExam(item) {
-        // 当前vip是否已开通
-        if(this.vipHasOpened(item)) {
-          // 跳转
-        } else {
-          uni.showToast({
-            title: `请先充值${this.getKmTitle(item.subjects)}vip`,
-            icon: 'none'
-          })
-        }
-      },
-      // 去秘卷 item=> 当前科目vip信息
-      toSpecExam(item) {
-        // 当前vip是否已开通
-        if(this.vipHasOpened(item)) {
-          // 跳转
-        } else {
-          uni.showToast({
-            title: `请先充值${this.getKmTitle(item.subjects)}vip`,
-            icon: 'none'
-          })
-        }
-      },
-      // 去考场实况 item=> 当前科目vip信息
-      toPlaceLive(item) {
-        // 当前vip是否已开通
-        if(this.vipHasOpened(item)) {
-          // 跳转
-        } else {
-          uni.showToast({
-            title: `请先充值${this.getKmTitle(item.subjects)}vip`,
-            icon: 'none'
-          })
-        }
+    vipHasOpened(item) {
+      return !!this.vipOnList.find(it => it.memberId == item.memberId)
+    },
+    // 去精选500题 item=> 当前科目vip信息
+    to500(item) {
+      // 当前vip是否已开通
+      if (this.vipHasOpened(item)) {
+        // 跳转
+      } else {
+        uni.showToast({
+          title: `请先充值${this.getKmTitle(item.subjects)}vip`,
+          icon: 'none'
+        })
+      }
+    },
+    // 去真实考场 item=> 当前科目vip信息
+    toRealExam(item) {
+      // 当前vip是否已开通
+      if (this.vipHasOpened(item)) {
+        // 跳转
+      } else {
+        uni.showToast({
+          title: `请先充值${this.getKmTitle(item.subjects)}vip`,
+          icon: 'none'
+        })
+      }
+    },
+    // 去秘卷 item=> 当前科目vip信息
+    toSpecExam(item) {
+      // 当前vip是否已开通
+      if (this.vipHasOpened(item)) {
+        // 跳转
+      } else {
+        uni.showToast({
+          title: `请先充值${this.getKmTitle(item.subjects)}vip`,
+          icon: 'none'
+        })
+      }
+    },
+    // 去考场实况 item=> 当前科目vip信息
+    toPlaceLive(item) {
+      // 当前vip是否已开通
+      if (this.vipHasOpened(item)) {
+        // 跳转
+      } else {
+        uni.showToast({
+          title: `请先充值${this.getKmTitle(item.subjects)}vip`,
+          icon: 'none'
+        })
       }
     }
   }
+}
 </script>
 
 <style lang="scss" scoped>
-  .km-item {
-    margin-right: 8px;
-    width: 72px;
-    height: 30px;
-    line-height: 30px;
-    font-size: 12px;
-    color: #333;
-    text-align: center;
-    border-radius: 15px;
-    border: 1px solid #CCCCCC;
-  }
+.km-item {
+  margin-right: 8px;
+  width: 72px;
+  height: 30px;
+  line-height: 30px;
+  font-size: 12px;
+  color: #333;
+  text-align: center;
+  border-radius: 15px;
+  border: 1px solid #CCCCCC;
+}
 
-  .actived {
-    background: linear-gradient(90deg, #E66501 0%, #F8A42C 100%);
-    color: #fff;
-  }
+.actived {
+  background: linear-gradient(90deg, #E66501 0%, #F8A42C 100%);
+  color: #fff;
+}
 
-  .km-item:last-of-type {
-    margin-right: 0;
-  }
+.km-item:last-of-type {
+  margin-right: 0;
+}
 
-  .vip-info {
-    position: absolute;
-    top: 15px;
-    left: 10px;
-    display: flex;
-    align-items: center;
-  }
+.vip-info {
+  position: absolute;
+  top: 15px;
+  left: 10px;
+  display: flex;
+  align-items: center;
+}
 
-  .corner {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 77px;
-    height: 23px;
-    background: linear-gradient(0deg, #E66501 0%, #F8A42C 100%);
-    opacity: 0.86;
-    border-radius: 0px 8px 0px 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 12px;
-    color: #fff;
-  }
+.corner {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 77px;
+  height: 23px;
+  background: linear-gradient(0deg, #E66501 0%, #F8A42C 100%);
+  opacity: 0.86;
+  border-radius: 0px 8px 0px 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: #fff;
+}
 
-  .renew {
-    position: absolute;
-    right: 10%;
-    bottom: 15px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 185rpx;
-    height: 52rpx;
-    background: #873E1D;
-    border-radius: 26rpx;
-    font-size: 12px;
-    color: #F6E99F;
-  }
-  .buy {
-    position: absolute;
-    left: 45%;
-    transform: translateX(-50%);
-    bottom: 15px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 200rpx;
-    height: 60rpx;
-    background: #873E1D;
-    border-radius: 30rpx;
-    font-size: 14px;
-    color: #F6E99F;
-  }
+.renew {
+  position: absolute;
+  right: 10%;
+  bottom: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 185rpx;
+  height: 52rpx;
+  background: #873E1D;
+  border-radius: 26rpx;
+  font-size: 12px;
+  color: #F6E99F;
+}
 
-  .study {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 161rpx;
-    height: 67rpx;
-    background: #F6E99F;
-    border-radius: 34rpx;
-    font-size: 12px;
-    color: #873E1D;
-  }
-  .video-box {
-  	padding: 20rpx;
-  	width: 694rpx;
-  	height: 369rpx;
-  	background: #F9F3E7;
-  	border: 2rpx solid #CF8B6D;
-  	border-radius: 16rpx;
-  }
+.buy {
+  position: absolute;
+  left: 45%;
+  transform: translateX(-50%);
+  bottom: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 200rpx;
+  height: 60rpx;
+  background: #873E1D;
+  border-radius: 30rpx;
+  font-size: 14px;
+  color: #F6E99F;
+}
+
+.study {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 161rpx;
+  height: 67rpx;
+  background: #F6E99F;
+  border-radius: 34rpx;
+  font-size: 12px;
+  color: #873E1D;
+}
+
+.video-box {
+  padding: 20rpx;
+  width: 694rpx;
+  height: 369rpx;
+  background: #F9F3E7;
+  border: 2rpx solid #CF8B6D;
+  border-radius: 16rpx;
+}
 </style>