Browse Source

feat(福利Go)卡券中心 修改自定义轮播图

xing.li 3 years ago
parent
commit
ae7495f86a

+ 1 - 1
pages/welfareMall/activityInfo/activityInfo.js

@@ -177,7 +177,7 @@ Page({
           // })
         },
         fail: function (res) {
-         
+          _self.goToOrderList()
         }
       })
   },

+ 1 - 1
pages/welfareMall/activityInfo/activityInfo.wxml

@@ -81,5 +81,5 @@
     <view class="w_go_order" bindtap="goToOrderList">去看看</view>
 
     </view>
-   <image class="widow_del" src="/images/welfareMall/window_del.png"  bindtap="hideWindow"></image>
+   <image class="widow_del" src="/images/welfareMall/window_del.png"  bindtap="goToOrderList"></image>
 </view>

+ 7 - 1
pages/welfareMall/index/index.js

@@ -14,8 +14,9 @@ Page({
       bannerList:[],
       navigationList:[],
       autoplay: true,
-      interval: 2000,
+      interval: 5000,
       duration: 500,
+      currentSwiper:0,
       indicatorDots:true,
       grayTheme:false
   },
@@ -75,6 +76,11 @@ Page({
   onShareAppMessage: function () {
 
   },
+  swiperChange: function(e) {
+    this.setData({
+      currentSwiper: e.detail.current
+    })
+  },
 
    //跳转超值券包
    goToCouponBag:function () {

+ 43 - 40
pages/welfareMall/index/index.wxml

@@ -1,51 +1,54 @@
-
 <view class="{{grayTheme?'page':''}}">
-<view>
-<swiper  class="swiper"
-indicator-dots="{{indicatorDots}}"
-        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
-        <block wx:for="{{bannerList}}" wx:key="unique" >
-          <swiper-item >
-            <view class="swiper-item swiper1">
-              <image src="{{item.figure}}" class="top_img"  data-appid="{{item.appId}}" data-path="{{item.path}}" bindtap="goToBanner"></image>
-            </view>
-          </swiper-item>
-        </block>
+  <view class='swiper_box'>
+    <swiper class="swiper" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" current="{{currentSwiper}}" bindchange="swiperChange">
+      <block wx:for="{{bannerList}}" wx:key="unique">
+        <swiper-item>
+          <view class="swiper-item swiper1">
+            <image src="{{item.figure}}" class="top_img" data-appid="{{item.appId}}" data-path="{{item.path}}" bindtap="goToBanner"></image>
+          </view>
+        </swiper-item>
+      </block>
 
-      </swiper>
+    </swiper>
+    <view class="dots">
+      <block wx:for="{{bannerList}}" wx:key>
+        <view class="dot{{index == currentSwiper ? ' active_dot' : ''}}"></view>
+      </block>
     </view>
-<view class="banner_list flex-row">
-  <view class="banner_item flex-column" bindtap="goToCoupon" wx:for="{{navigationList}}" data-appid="{{item.appId}}" data-path="{{item.path}}" wx:key="unique">
-    <image class="b_i_img" src="{{item.figure}}"></image>
-    <view class="b_i_text">{{item.title}}</view>
-  </view>
-</view>
 
-<view class="coupon_list flex-column">
-  <view class="c_l_top flex-row">
-    <view class="c_l_top_l">推荐优惠</view>
-    <view class="c_l_top_r" bindtap="goToCouponBag">更多</view>
+  </view>
+  <view class="banner_list flex-row">
+    <view class="banner_item flex-column" bindtap="goToCoupon" wx:for="{{navigationList}}" data-appid="{{item.appId}}" data-path="{{item.path}}" wx:key="unique">
+      <image class="b_i_img" src="{{item.figure}}"></image>
+      <view class="b_i_text">{{item.title}}</view>
+    </view>
   </view>
 
-  <view class="coupon_item flex-row" wx:for="{{activityList}}"  wx:key="unique" bindtap="goCouponDetail" data-id="{{item.activityId}}">
-    <image src="{{item.coverImg}}" class="coupon_item_img"></image>
-    <view class="coupon_item_right flex-column">
-    <view class="flex-column">
-      <view class="coupon_name over-ellipsis-two">{{item.name}}</view>
-      <view class="coupon_num" wx:if="{{item.cashCouponNum > 0 && item.discountCouponNum > 0}}">含{{item.cashCouponNum}}张代金券、{{item.discountCouponNum}}张折扣券</view>
-      <view class="coupon_num"  wx:if="{{item.cashCouponNum ==0 && item.discountCouponNum > 0}}">含{{item.discountCouponNum}}张折扣券</view>
-      <view class="coupon_num" wx:if="{{item.cashCouponNum > 0 && item.discountCouponNum == 0}}">含{{item.cashCouponNum}}张代金券</view>
-      <view class="coupon_num" wx:if="{{item.cashCouponNum ==0 && item.discountCouponNum ==0}}"></view>
+  <view class="coupon_list flex-column">
+    <view class="c_l_top flex-row">
+      <view class="c_l_top_l">推荐优惠</view>
+      <view class="c_l_top_r" bindtap="goToCouponBag">更多</view>
     </view>
-      <view class="coupon_i_r_bottom flex-row">
-        <view class="coupon_price">价值 ¥{{item.formatShowPrice}}</view>
-        <view class="coupon_buy"  wx:if="{{item.isPay!=0}}">{{item.formatPrice}}元抢</view>
-        <view class="coupon_buy"  wx:else>免费领取</view>
+
+    <view class="coupon_item flex-row" wx:for="{{activityList}}" wx:key="unique" bindtap="goCouponDetail" data-id="{{item.activityId}}">
+      <image src="{{item.coverImg}}" class="coupon_item_img"></image>
+      <view class="coupon_item_right flex-column">
+        <view class="flex-column">
+          <view class="coupon_name over-ellipsis-two">{{item.name}}</view>
+          <view class="coupon_num" wx:if="{{item.cashCouponNum > 0 && item.discountCouponNum > 0}}">含{{item.cashCouponNum}}张代金券、{{item.discountCouponNum}}张折扣券</view>
+          <view class="coupon_num" wx:if="{{item.cashCouponNum ==0 && item.discountCouponNum > 0}}">含{{item.discountCouponNum}}张折扣券</view>
+          <view class="coupon_num" wx:if="{{item.cashCouponNum > 0 && item.discountCouponNum == 0}}">含{{item.cashCouponNum}}张代金券</view>
+          <view class="coupon_num" wx:if="{{item.cashCouponNum ==0 && item.discountCouponNum ==0}}"></view>
+        </view>
+        <view class="coupon_i_r_bottom flex-row">
+          <view class="coupon_price">价值 ¥{{item.formatShowPrice}}</view>
+          <view class="coupon_buy" wx:if="{{item.isPay!=0}}">{{item.formatPrice}}元抢</view>
+          <view class="coupon_buy" wx:else>免费领取</view>
+        </view>
       </view>
     </view>
-  </view>
 
-  <!-- <view class="coupon_item flex-row">
+    <!-- <view class="coupon_item flex-row">
     <image src="https://dy.shpr.top/welfareGo/index_top.png" class="coupon_item_img"></image>
     <view class="coupon_item_right flex-column">
     <view class="flex-column">
@@ -58,5 +61,5 @@ indicator-dots="{{indicatorDots}}"
       </view>
     </view>
   </view> -->
-</view>
-</view>
+  </view>
+</view>

+ 38 - 1
pages/welfareMall/index/index.wxss

@@ -140,4 +140,41 @@ border-radius: 14px;
 color: #ffffff;
 text-align: center;
 font-size: 15px;
-}
+}
+
+/*用来包裹所有的小圆点  */
+ 
+.dots {
+  width: 210rpx;
+  height: 20rpx;
+  display: flex;
+  flex-direction: row;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0rpx;
+}
+ 
+
+.swiper_box {
+  height: auto;
+  position: relative;
+}
+
+/*未选中时的小圆点样式 */
+ 
+.dot {
+  width: 70rpx;
+  height: 10rpx;
+  border-radius: 14rpx;
+  margin-right: 26rpx;
+  background-color: #de8a78;
+}
+ 
+/*选中以后的小圆点样式  */
+ 
+.active_dot {
+  width: 70rpx;
+  height: 10rpx;
+  background-color: #fc4308;
+}