626

src/components/star/starRank.vue

@@ -37,18 +37,11 @@
         <span class="line"></span>
       </div>
     </div>
-    <van-swipe
-      :loop="false"
-      :show-indicators="false"
-      :touchable="true"
-      :initial-swipe="tabIndex-1"
-      :duration="1000"
-      class="scroll"
-      @change="swipeChange">
-      <van-swipe-item @click="swipeItemClick">
+    <swiper class="scroll" :options="swiperOption" ref="mySwiper">
+      <swiperSlide>
         <scroll
           :style="{maxHeight: height +'px'}"
-          v-if="starNum!=0&&tabIndex==1"
+          v-if="starNum!=0"
           ref="scrollItem"
           :data="starList"
           :bounce="false">
@@ -56,8 +49,7 @@
             <div class="stageBox" v-if="starInfo.code!=2001">
               <div
                 class="result"
-                v-if="starInfo.code!=2003&&starInfo.code!=2004&&starInfo.activity_result.result!=15&&starInfo.activity_result.result!=16"
-              >
+                v-if="starInfo.code!=2003&&starInfo.code!=2004&&starInfo.activity_result&&starInfo.activity_result.result!=15&&starInfo.activity_result.result!=16">
                 <div class="float">结果公示</div>
                 <div v-if="starInfo.activity_result.result==11">
                   <h2>恭喜两个阶段全勤挑战成功</h2>
@@ -84,7 +76,7 @@
                     <img :src="starPage.star_prize2" alt>
                   </div>
                 </div>
-                <div class="addr" @click="goAddr($event)" v-if="!addressObj">
+                <div class="addr" @click="goAddr()" v-if="!addressObj">
                   点击这里，快去填写收货地址吧
                   <i class="iconfont icon-youjiantou"></i>
                 </div>
@@ -100,9 +92,8 @@
                 >注意：请于{{starInfo.start_twenty_five}}之前填写完您的收货地址，否则无法寄送礼品，过期不填视为放弃领取机会</div>
               </div>
               <div
-                v-if="starInfo.code!=2003&&(starInfo.activity_result.result==15||starInfo.activity_result.result==16)"
-                class="result fal"
-              >
+                v-if="starInfo.code!=2003&&starInfo.activity_result&&(starInfo.activity_result.result==15||starInfo.activity_result.result==16)"
+                class="result fal">
                 <div class="float">结果公示</div>
                 <div v-if="starInfo.activity_result.result==15">
                   <div class="fal_title">很抱歉第一阶段全勤挑战失败</div>
@@ -162,11 +153,11 @@
             </div>
           </div>
         </scroll>
-      </van-swipe-item>
-      <van-swipe-item>
+      </swiperSlide>
+      <swiperSlide>
         <scroll
           :style="{maxHeight: height +'px'}"
-          v-if="starNum!=0&&tabIndex==2"
+          v-if="starNum!=0"
           ref="scrollItem"
           :data="starList"
           :pullup="pullup"
@@ -188,12 +179,14 @@
             <div v-if="finished" class="none">没有更多了~</div>
           </div>
         </scroll>
-      </van-swipe-item>
-    </van-swipe>
+      </swiperSlide>
+    </swiper>
   </div>
 </template>
 
 <script>
+import "swiper/dist/css/swiper.css";
+import { swiper, swiperSlide } from "vue-awesome-swiper";
 import rankBg from "../../assets/rankBg.png";
 import { starPage } from "../../util/imgUrl";
 import {
@@ -208,8 +201,8 @@ Vue.use(Swipe).use(SwipeItem);
 export default {
   name: "starRank",
   data() {
+    let that = this;
     return {
-      isClick: true,
       height: 0,
       pullup: true,
       rankBg: rankBg,
@@ -225,19 +218,24 @@ export default {
       addressObj: false,
       starInfo: {
         code: ""
+      },
+      swiperOption: {
+        on: {
+          slideChangeTransitionEnd: function() {
+            console.log(this.activeIndex);
+            that.tabIndex = this.activeIndex + 1;
+          }
+        }
       }
     };
   },
-  components: {},
+  components: { swiper, swiperSlide },
+  computed: {
+    swiper() {
+      return this.$refs.mySwiper.swiper;
+    }
+  },
   methods: {
-    swipeItemClick(e) {
-      console.log("swipeItemClick", e);
-      this.isClick = true;
-    },
-    swipeChange(index) {
-      this.tabIndex = index + 1;
-      this.isClick = false;
-    },
     goResult() {
       this.$router.push({
         name: "starResult",
@@ -245,38 +243,33 @@ export default {
       });
     },
     goAddr(e) {
-      if (this.isClick) {
-        if (this.addressObj) {
-          this.$router.push({
-            name: "activityAddr"
-          });
-        } else {
-          this.$router.push({
-            name: "addressEdit"
-          });
-        }
-      }
-    },
-    goDetail(index, e) {
-      console.log("goDetail", e);
-      if (this.isClick) {
-        let obj = {};
-        obj.index = index;
-        if (index == 1) {
-          obj.start_at = this.starInfo.start_at;
-          obj.first_over_at = this.starInfo.first_over_at;
-          obj.user_category_integral_last_ten = this.starInfo.user_category_integral_last_ten;
-        } else {
-          obj.start_at = this.starInfo.start_at;
-          obj.second_over_at = this.starInfo.second_over_at;
-          obj.user_category_integral_last_twenty = this.starInfo.user_category_integral_last_twenty;
-        }
+      if (this.addressObj) {
         this.$router.push({
-          name: "starDetail",
-          query: { starInfo: obj }
+          name: "activityAddr"
+        });
+      } else {
+        this.$router.push({
+          name: "addressEdit"
         });
       }
     },
+    goDetail(index) {
+      let obj = {};
+      obj.index = index;
+      if (index == 1) {
+        obj.start_at = this.starInfo.start_at;
+        obj.first_over_at = this.starInfo.first_over_at;
+        obj.user_category_integral_last_ten = this.starInfo.user_category_integral_last_ten;
+      } else {
+        obj.start_at = this.starInfo.start_at;
+        obj.second_over_at = this.starInfo.second_over_at;
+        obj.user_category_integral_last_twenty = this.starInfo.user_category_integral_last_twenty;
+      }
+      this.$router.push({
+        name: "starDetail",
+        query: { starInfo: obj }
+      });
+    },
     onReachBottom() {
       if (!this.finished && this.loading) {
         this.loading = false;
@@ -333,7 +326,6 @@ export default {
               getComputedStyle(this.$refs.floatBox).height.replace("px", "")
             )
           );
-          console.log(document.documentElement.clientHeight);
           let top =
             (document.documentElement.clientHeight -
               Number(
@@ -362,9 +354,13 @@ export default {
       });
     },
     tabChange(index) {
-      console.log(index);
       this.tabIndex = index;
-      // this.$refs.swipeRef.swipeTo(index+1)
+      if (index == 1) {
+        this.swiper.slidePrev();
+      } else if (index == 2) {
+        this.swiper.slideNext();
+      }
+
       // if(index==2){
       //   setTimeout(() => {
       //     this.$refs.scrollItem._initScroll()
@@ -379,7 +375,6 @@ export default {
     this.height =
       screen.height -
       Number(getComputedStyle(this.$refs.floatBox).height.replace("px", ""));
-
     this.initPage();
   }
 };