Merge branch 'feature/raffle' into 'master'

Feature/raffle

See merge request !7

src/app.wpy

@@ -56,9 +56,9 @@ wepy.app({
 {
     pages: [
       'pages/index',
+      'pages/raffle'
     ],
     window: {
-      navigationStyle: "custom",
       backgroundTextStyle: 'light',
       navigationBarBackgroundColor: '#fff',
       navigationBarTitleText: 'WeChat',

src/components/custom/openAnimation.wpy

@@ -52,8 +52,8 @@
     created() {
       setTimeout(() => {
         this.showAnimation = true;
-        // this.click();
-      });
+         this.click();
+      },1000);
     }
   });
 </script>
@@ -216,37 +216,37 @@
     0% {
       transform: scale(1);
       -webkit-transform: scale3d(1, 1, 1);
-      
+
     }
 
     // 3%, 9%, 15%, 21%, 27%, 33%, 39%, 45%{
     //   -webkit-transform: scale(1.1) rotate(8deg);
     //   -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 8deg);
-      
+
     // }
 
     // 6%, 12%, 18%, 24%, 30%, 36%, 42%, 48%{
     //   -webkit-transform: scale(1.1) rotate(-8deg);
     //   -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -8deg);
-      
+
     // }
 
     6%, 18%, 30%, 42%, 54%, 66%{
       -webkit-transform: scale(1.1) rotate(8deg);
       -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 8deg);
-      
+
     }
 
     12%, 24%, 36%, 48%, 60%, 72%{
       -webkit-transform: scale(1.1) rotate(-8deg);
       -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -8deg);
-      
+
     }
     78%{
       -webkit-transform: scale(1);
       -webkit-transform: scale3d(1, 1, 1);
     }
-    
+
     80%{
       -webkit-transform: scale(1);
       -webkit-transform: scale3d(1, 1, 1);
@@ -255,7 +255,7 @@
     81% {
       -webkit-transform: scale(1) translate(0rpx, 0rpx);
     }
-    
+
     90% {
       -webkit-transform: scale(1) translate(0rpx,200rpx);
       // -webkit-transform: scale3d(1, 1, 1) translate3d(0rpx,61rpx,0);

src/components/custom/videolist.wpy

@@ -23,18 +23,18 @@
   }
   .progress {
     width: 180rpx;
-    height:20rpx;
-    background-color:#fff;
-    margin-top:10rpx;
-    color:#666;
+    height: 20rpx;
+    background-color: #fff;
+    margin-top: 10rpx;
+    color: #666;
     position: relative;
-    .text{
+    .text {
       position: absolute;
-      top:0;
-      left:0;
+      top: 0;
+      left: 0;
       width: 100%;
-      height:100%;
-      z-index:2;
+      height: 100%;
+      z-index: 2;
       background-color: transparent;
       text-align: center;
       font-size: 18rpx;
@@ -42,8 +42,10 @@
     }
     .orange {
       height:100%;
+      transition:all 1s;
       background-color: #FF5D15;
     }
+  }
   .images {
     width: 100%;
   }
@@ -90,7 +92,6 @@
           </view>
           <!-- <video-loading v-if="item.time === 0"/> -->
           <image class="images" :src="item.url" mode="widthFix"></image>
-          <slot></slot>
         </view>
       </swiper-item>
     </swiper>
@@ -104,6 +105,10 @@
         type: Array,
         value: []
       },
+      loading: {
+        type: Boolean,
+        default: false
+      },
       duration: {
         type: Number,
         value: 800
@@ -130,7 +135,6 @@
     },
     watch: {
       videoList () {
-        console.log('timeout 4');
         const newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
         this.loading = false;
         if (newVal.length) this._videoListChanged(newVal);
@@ -154,12 +158,10 @@
         if (!this.curQueue.length) {
           this.curQueue = this.nextQueue.splice(0, 3);
           this.playCurrent(1);
-          console.log('newVal', this.nextQueue, this.curQueue);
         }
       },
       animationfinish(e) {
         const current = e.$wx.detail.current;
-        console.log(current);
         const diff = current - this._last;
         if (diff === 0) return;
         this._last = current;
@@ -167,7 +169,7 @@
         // this.$emit('change', { activeId: this.curQueue[current].id });
         this.loading = true;
         this.circular = false;
-        
+
         setTimeout(() => {
           const direction = diff === 1 || diff === -2 ? 'up' : 'down';
           if (direction === 'up') {
@@ -215,9 +217,8 @@
           //   console.log('circular2');
           //   this.circular = false;
           // }
-        
+
         })
-          console.log(this.prevQueue, this.curQueue, this.nextQueue)
       },
       onWaiting (e) {
         this.trigger(e, 'wait');

src/pages/index.wpy

@@ -136,6 +136,8 @@
       .text {
         color:#333;
         text-align: center;
+        padding-top:30rpx;
+        padding-bottom: 60rpx;
       }
       button {
         width:80%;
@@ -193,7 +195,7 @@
         </swiper>
       </view>
     </view>
-    <!--<view class="footer">
+    <view class="footer">
       <swiper
         class="footswiper"
         display-multiple-items="{{swiperItem}}"
@@ -205,8 +207,8 @@
         next-margin="120rpx"
         catch:touchmove
       >
-        &lt;!&ndash;bindtouchstart="touchStart"&ndash;&gt;
-        &lt;!&ndash;bindtouchend="touchEnd"&ndash;&gt;
+        <!--bindtouchstart="touchStart"-->
+        <!--bindtouchend="touchEnd"-->
         <swiper-item wx:for="{{list}}" wx:key="index">
           <view
             data-itemid="{{index}}"
@@ -221,23 +223,22 @@
           </view>
         </swiper-item>
       </swiper>
-    </view>-->
+    </view>
     <view class="authmodal" v-show="authmodal">
       <view class="wrap">
-        <view class="text">来到lukii，再平凡的人，也有幸运的权利！</view>
+        <view class="text">来到lukii，再平凡的人，<br>也有幸运的权利！</view>
         <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">授权并进入</button>
       </view>
     </view>
     <network v-if="!isConnected"></network>
     <!-- <star-animation></star-animation> -->
     <star-animation1 v-if="sign && showAnimation"></star-animation1>
-    <open-animation v-if="awards"></open-animation>
+    <open-animation></open-animation>
   </view>
 </template>
 
 <script>
   let touchDotX = 0, touchDotY = 0;
-  let timeout = null, timeout1 = null;
   import store from '../store';
   import { mapState, mapActions } from '@wepy/x';
   import wepy from '@wepy/core';
@@ -249,26 +250,22 @@
     },
 
     data: {
-//      list:[], //商品list
+      list:[], //商品list
       adlist:[],
-//      current:5, //商品列表初次展示第几个
+      current:5, //商品列表初次展示第几个
 //      userInfo: {},
       swiperItem:2,
       videoList:[],
       length: 4,
-//      circular:false, 商品是否无限循环
+      circular:false, // 商品是否无限循环
       topPage:0,
       lastPage:0,
-//      currentIndex:5,  //商品当前滑动到第几个
+      currentIndex:5,  //商品当前滑动到第几个
       authmodal:false,
       sign: false,
       showAnimation: false,
       userImgStyle:'',
-      progress:0,
-      progressStyle:'',
-      total: 4,
-      goldNum: 2500,
-      awards: false
+      goldNum:2500,
     },
 
     computed: {
@@ -507,7 +504,10 @@
         }
       },
       getAwards: function() {
-        this.awards = !this.awards;
+        wx.navigateTo({
+          url: '/pages/raffle?id=1&progress=70&chance=1/780&corn=50000&imgsrc=/static/images/test2.png&goods=Nintendo Switch任天堂游戏机任天堂游戏机'
+        });
+//        this.awards = !this.awards;
       }
     },
 
@@ -619,6 +619,7 @@
       'star-animation1': '~@/components/custom/starAnimation1',
       'open-animation': '~@/components/custom/openAnimation',
     },
+    navigationStyle: "custom",
     "navigateToMiniProgramAppIdList":[
       "wx91d27dbf599dff74"
     ],

src/pages/raffle.wpy

+<style lang="less">
+  page {
+    width:100%;
+    height:100%;
+    background-color:#F1F1F1;
+  }
+  .raffle-wrapper {
+    width:100%;
+    height:100%;
+    background-color:#F1F1F1;
+    padding-top:40rpx;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  .raffle-content {
+    background-color: #fff;
+    width: 94%;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    margin:0 auto;
+    padding:50rpx 50rpx 40rpx 50rpx;
+    border-radius: 10rpx;
+    box-shadow:0px 2rpx 20rpx 0px rgba(188,188,188,0.75);
+    .img {
+      width:610rpx;
+      height:610rpx;
+      border-radius: 10rpx;
+      box-shadow:0px 3rpx 13rpx 1rpx rgba(163,163,163,0.38);
+    }
+  }
+  .goodsinfo {
+    margin-top:15rpx;
+    overflow: hidden;
+    .text {
+      font-size: 28rpx;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2; //行数
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      float: left;
+      text-align: left;
+      width: 65%;
+      color: #333;
+    }
+    .money{
+      float: right;
+      width:30%;
+      color:#FF5D15;
+      font-size: 30rpx;
+      text-align: right;
+      font-weight:bold;
+    }
+  }
+  .raffle-chance {
+    font-size: 24rpx;
+    color:#666;
+    margin-top:20rpx;
+  }
+  .raffle-progress {
+    font-size: 24rpx;
+    color:#666;
+  }
+  .progress {
+    width: 298rpx;
+    height:18rpx;
+    background-color:#fff;
+    border:1px solid #FF5D15;
+    color:#666;
+    display: inline-block;
+    position: relative;
+    top:3rpx;
+    .orange {
+      height:100%;
+      transition:all 1s;
+      background-color: #FF5D15;
+    }
+  }
+  .pronumber{
+    font-size: 20rpx;
+    color:#666;
+    margin-left:10rpx;
+    position: relative;
+    top:-3rpx;
+  }
+  .user-wish {
+    padding-left:35rpx;
+    font-size: 24rpx;
+    color:#aaa;
+    margin-top:25rpx;
+    height:50rpx;
+    line-height: 50rpx;
+    .checkimg {
+      width:24rpx;
+      height:24rpx;
+      vertical-align: middle;
+      margin-right:10rpx;
+    }
+    .checktext{
+      top: 2rpx;
+      position: relative;
+    }
+  }
+  .joinin {
+    width:380rpx;
+    height:70rpx;
+    line-height: 70rpx;
+    background-color: #FF5D15;
+    border-radius:10rpx;
+    margin:0 auto;
+    margin-top:80rpx;
+    font-size: 34rpx;
+    color:#fff;
+  }
+</style>
+<template>
+  <view class="raffle-wrapper">
+    <view class="raffle-content">
+      <image class="img" src="{{goodsimg}}"></image>
+      <view class="goodsinfo">
+        <text class="text">{{goods}}</text>
+        <text class="money">{{corn}}克币</text>
+      </view>
+      <view class="raffle-chance">中奖概率: {{chance}}</view>
+      <view class="raffle-progress">中奖进度:
+        <view class="progress">
+          <view class="orange" style="{{progressStyle}}"></view>
+        </view>
+        <text class="pronumber">{{progress}}%</text>
+      </view>
+    </view>
+    <view class="user-wish" bindtap="check">
+      <image src="{{imgsrc}}" class="checkimg"></image>
+      <text class="checktext">我同意花费所有克币参与抽奖，并承诺购买的商品不再退货。</text>
+    </view>
+    <button class="joinin" open-type="{{opentype}}" bindtap="joinin" bindgetphonenumber="getPhoneNumber" >立即参与</button>
+    <van-dialog id="van-dialog" />
+  </view>
+</template>
+<script>
+  import wepy from '@wepy/core';
+  import Dialog from '../components/vant/dialog/dialog';
+  wepy.page({
+    data: {
+      progress:0,
+      progressStyle:'',
+      isCheck:false,
+      id:null,
+      corn:'',
+      goods:'',
+      chance:'',
+      goodsimg:'',
+    },
+    methods: {
+      check() {
+        this.isCheck = !this.isCheck;
+      },
+      getPhoneNumber(e) {
+        let detail = e.$wx.detail || {};
+        //调用接口将加密数据传给后端，e.$wx.detail整体都传过去
+        //如果数据得到了就跳转
+        console.log(detail,111)
+        if(detail.encryptedData) {
+          Dialog.alert({
+            title: '参与结果',
+            message: '恭喜您参与成功！',
+          })
+        }else {
+          Dialog.alert({
+            title: '参与结果',
+            message: '参与失败，请重新授权！',
+          })
+        }
+      },
+      joinin() {
+        if(!this.isCheck) {
+          Dialog.alert({
+            message: '请先勾选协议！',
+          })
+        }
+      }
+    },
+    computed: {
+      imgsrc() {
+        let imgsrc = '';
+        if(this.isCheck) {
+          imgsrc = '/static/images/selected.png';
+        }else {
+          imgsrc = '/static/images/selectno.png';
+        }
+        return imgsrc
+      },
+      opentype() {
+        if(this.isCheck) {
+          return 'getPhoneNumber'
+        }else {
+          return ''
+        }
+      }
+    },
+    onLoad (query) {
+      console.log(query);
+      let {id,corn,goods,chance,imgsrc,progress} = query;
+      if(progress) {
+        this.progress = progress;
+        this.progressStyle = 'width:'+progress+'%';
+      }
+      this.id = id;
+      this.corn = corn;
+      this.goods = goods;
+      this.chance = chance;
+      this.goodsimg = imgsrc;
+    },
+  });
+</script>
+<config>
+  {
+    navigationStyle: "default",
+    navigationBarTitleText: '参与抽奖',
+    navigationBarBackgroundColor: '#f1f1f1',
+    "usingComponents": {
+      "van-dialog": "../components/vant/dialog/index"
+    }
+  }
+</config>