Merge branch 'feature/animation' into 'master'

修改奖品列表接口；优化notify延迟问题；奖品图片添加loading;

See merge request !48

src/common/api.js

@@ -26,8 +26,9 @@ module.exports = {
   signIn(params) {
     return http.post('/api/user/signin', params, { 'content-type': 'application/json' });
   },
-  getPrizeList(params) {
-    return http.post('/api/prize/list', params, { 'content-type': 'application/json' });
+  getPrizeList(id) {
+    const params = !id ? undefined : { prizeId: id };
+    return http.post('/api/prize/list', params);
   },
   getRaffles() {
     return http.post('/api/user/join/list');

src/common/wxRequest.js

@@ -38,16 +38,20 @@ const request = async (url, options) => {
     method: options.method,
     header: options.header
   }).then(res => {
-    let msg = res.data.msg || '服务器异常';
+    let errMsg = null;
     if (res.statusCode === 200) {
       if (res.data.code === 2000) {
         return res.data.data;
       }
       Notify({ message: '服务器异常,请稍后重试', safeAreaInsetTop });
-      throw new Error(msg + ',请求url:' + url + '请求返回:' + res.data);
+      errMsg = `httpurl: ${url}, method: ${options.method}, params: ${JSON.stringify(options.data)}, status: ${res.statusCode}, data: ${JSON.stringify(res.data)}`;
+      if (env === 'test') console.error(errMsg);
+      throw new Error(errMsg);
     }
     Notify({ message: '服务器异常,请稍后重试', safeAreaInsetTop });
-    throw new Error(msg + ',请求url:' + url + '请求返回:' + res.data);
+    errMsg = `httpurl: ${url}, method: ${options.method}, params: ${JSON.stringify(options.data)}, status: ${res.statusCode}, data: ${JSON.stringify(res.data)}`;
+    if (env === 'test') console.error(errMsg);
+    throw new Error(errMsg);
   });
 };
 

src/components/custom/loading.wpy

 <template>
   <div class="loading-container">
-    <image class="loading-image" :src="snapshot" mode="widthFix"></image>
-    <!-- <van-loading size="24px" vertical></van-loading> -->
+    <image v-if="snapshot" class="loading-image" :src="snapshot" mode="widthFix" bindload="imageLoad"></image>
+    <div v-if="!snapshot || snapshot && !imageLoaded" class="loading-animation">
+      <van-loading size="24px"></van-loading>
+    </div>
   </div>
 </template>
 <script>
@@ -13,19 +15,36 @@
         type: String,
         default: ''
       }
+    },
+    data: {
+      imageLoaded: false
+    },
+    methods: {
+      imageLoad() {
+        this.imageLoaded = true;
+      }
     }
   });
 </script>
 <style lang="less">
   .loading-container {
   	position: absolute;
+    top: 0;
   	width: 100%;
   	height: 100%;
-  	background:rgba(0,0,0,0.7);
   	display: flex;
   	justify-content: center;
   	align-items: center;
   	z-index: 1;
+    .loading-animation{
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background:rgba(0,0,0);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
     .loading-image {
       position: absolute;
       width: 100%;

src/components/custom/prizeList.wpy

@@ -96,7 +96,9 @@
             <video-loading v-if="item.time === 0" :snapshot="item.videoSnapUrl"/>
             <video-pause :pause="pause"></video-pause>
           </video>
-          <image v-if="item.showType && item.showType.value === 1" class="images" :src="item.photoUrl" mode="widthFix"></image>
+          <image v-if="item.showType && item.showType.value === 1" lazy-load class="images" :src="item.photoUrl" mode="widthFix" bindload="imageLoad(item.id)">
+            <image-loading v-if="item.time === 0"/>
+          </image>
           <view class="rightcont" v-show="item.id > 0">
             <view class="info">奖品库存: {{item.stock}}/{{item.totalStock}}</view>
             <view class="info">中奖概率: {{item.probability}}</view>
@@ -155,6 +157,7 @@
         this.updateAwardsInfo(this.current);
       },
       async getProgress(id) {
+        if (id <= 0) return;
         let detail = await getAwardsDetail({ prizeId: id });
         detail = detail || {};
         if (detail.join > detail.quantity) detail.join = detail.quantity;
@@ -177,7 +180,9 @@
           return item;
         });
         this.compute(this.userAccount);
-        this.playCurrent(0);
+        setTimeout(() => {
+          this.playCurrent(0);
+        }, 300);
       },
       async bindanimationfinish(e) {
         const current = e.$wx.detail.current;
@@ -212,8 +217,6 @@
       },
       playCurrent(current) {
         if (!this.curQueue || this.curQueue.length <= 1) return;
-        // 更新抽奖页面参数
-        this.updateAwardsInfo(current);
         // 播放当前视频
         this._videoContexts.forEach((ctx, index) => {
           if (index !== current) {
@@ -222,6 +225,8 @@
             ctx && ctx.play();
           }
         });
+        // 更新抽奖页面参数
+        this.updateAwardsInfo(current);
         // 更新奖品进度
         this.getProgress(this.curQueue[current].id);
       },
@@ -243,6 +248,14 @@
             this.pause = !this.pause;
           }
         });
+      },
+      imageLoad(id) {
+        this.curQueue.forEach(item => {
+          if (item.id === id) {
+            item.time = 1;
+          }
+        });
+        this.curQueue = [...this.curQueue];
       }
     }
   });
@@ -252,6 +265,7 @@
     usingComponents: {
       'video-pause': '~@/components/custom/videoPause',
       'video-loading': '~@/components/custom/loading',
+      'image-loading': '~@/components/custom/loading',
       "van-image": "~@/components/vant/image/index"
     }
 }

src/components/vant/mixins/transition.js

@@ -5,7 +5,9 @@ const getClassNames = (name) => ({
   leave: `van-${name}-leave van-${name}-leave-active leave-class leave-active-class`,
   'leave-to': `van-${name}-leave-to van-${name}-leave-active leave-to-class leave-active-class`,
 });
-const nextTick = () => new Promise((resolve) => setTimeout(resolve, 1000 / 30));
+// const nextTick = () => new Promise((resolve) => setTimeout(resolve, 1000 / 30));
+// 解决动画延迟问题
+const nextTick = () => new Promise((resolve) => resolve());
 export const transition = function (showDefaultValue) {
   return Behavior({
     properties: {

src/pages/index.wpy

@@ -295,7 +295,7 @@
         const openid = wx.getStorageSync('openId');
         return {
           title: `${(this.$wepy.userInfo && this.$wepy.userInfo.nickName) || '您的好朋友'}邀请您来抽奖啦～`,
-          path: `/pages/index?openid=${openid}`,
+          path: `/pages/index?openid=${openid}&prizeId=${this.$wepy.awardsInfo.id}`,
           imageUrl: decodeURIComponent(this.$wepy.awardsInfo.photoUrl),
           success: function(res) {
             let shareId = res.shareTickets[0];
@@ -416,12 +416,13 @@
       // 获取活动信息
       this.showActivity();
       // 获取奖品列表
-      this.videoList = await getPrizeList();
+      this.videoList = await getPrizeList(options.prizeId);
     },
     async onShow() {
       let join = wx.getStorageSync('userJoin');
       if (join === 1) {
         wx.removeStorageSync('userJoin');
+        this.getMainInfo();
         this.showActivity();
       }
     }

src/pages/raffle.wpy

@@ -331,7 +331,7 @@
             title: title[code],
             message: message[code]
           }).then(() => {
-            wx.reLaunch({url: '/pages/index'});
+            wx.navigateBack({url: '/pages/index'});
           });
         }).catch(() => {
           this.btnfont = '立即参与';