优化

src/common/api.js

@@ -8,7 +8,7 @@ module.exports = {
   register(params) {
     return http.post('/api/user/register', params, { 'content-type': 'application/json' });
   },
-  getUserInfo(params) {
+  getMainInfo(params) {
     return http.post('/api/user/main', params);
   },
   getAwardsInfo(params) {

src/common/wxRequest.js

@@ -5,6 +5,7 @@ const env = 'test'; // 每次上线手动切换成 prod/test
 let baseUrl = 'https://api-luckii.q-gp.com';
 if (env === 'test') {
   baseUrl = 'https://luckii-qa.liangkebang.net';
+  // baseUrl = 'https://luckiiapi.q-gp.com/yapi/mock/325';
 }
 const request = async (url, options) => {
   const pages = getCurrentPages();

src/components/custom/prizeList.wpy

@@ -74,11 +74,11 @@
       current="0"
       bindanimationfinish="bindanimationfinish"
     >
-      <swiper-item class="{{item.photoUrl ? 'image-item' : 'video-item'}}" v-for="(item, idx) in curQueue" :key="item.id">
+      <swiper-item :class="{'image-item': item.showType && item.showType.value === 1}" v-for="(item, idx) in curQueue" :key="item.id">
         <view class="video-wrapper">
            <video
             id="video_{{idx}}"
-            class="video_item"
+            class="video-item"
             loop
             show-center-play-btn="{{false}}"
             enable-progress-gesture="{{false}}"
@@ -90,12 +90,12 @@
             binderror="onError"
             bindtimeupdate="onTimeUpdate"
             @tap="videoTap"
-            v-if="!item.photoUrl"
+            v-if="item.showType && item.showType.value === 2"
           >
-            <video-loading v-if="item.time === 0" :snapshot="item.snapshot"/>
+            <video-loading v-if="item.time === 0" :snapshot="item.videoSnapUrl"/>
             <video-pause :pause="pause"></video-pause>
           </video>
-          <image v-if="item.photoUrl" class="images" :src="item.photoUrl" mode="widthFix"></image>
+          <image v-if="item.showType && item.showType.value === 1" class="images" :src="item.photoUrl" mode="widthFix"></image>
           <view class="rightcont">
             <view class="info">奖品库存: {{item.stock}}/{{item.totalStock}}</view>
             <view class="info">中奖概率: {{item.probability}}</view>
@@ -134,7 +134,7 @@
       videoList () {
         const newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
         this._videoListChanged(newVal);
-//        this.compute(this.userAccount);
+        this.compute(this.userAccount);
       },
       userAccount(newVal) {
         this.compute(newVal);
@@ -154,6 +154,7 @@
       async getProgress(id) {
         let detail = await getAwardsDetail({ prizeId: id });
         detail = detail || {};
+        if (detail.join > detail.quantity) detail.join = detail.quantity;
         const progress = Math.round((detail.join / detail.quantity) * 100) + '%';
 
         this.curQueue.forEach(v => {
@@ -179,6 +180,7 @@
         const current = e.$wx.detail.current;
         this.pause = false;
         this.playCurrent(current);
+        this.trigger(e, 'change');
       },
       onError(e) {
         this.trigger(e, 'error');
@@ -211,7 +213,6 @@
         this.$emit('getAwardsInfo', {
           id,
           photoUrl,
-          quantity: this.userAccount,
           name,
           chance: probability
         });
@@ -229,8 +230,12 @@
             this.pause ? ctx.play() : ctx.pause();
           }
         });
+        this.curQueue.forEach((item, index) => {
+          if (index === current && item.time !== 0) {
             this.pause = !this.pause;
           }
+        });
+      }
     }
   });
 </script>

src/components/custom/sign.wpy

@@ -38,6 +38,8 @@
 </template>
 <script>
   import wepy from '@wepy/core';
+  import store from '../../store';
+  import { mapState } from '@wepy/x';
   const images = {
     sign: {
       notComplete: '/static/images/sign@2x.png',
@@ -56,6 +58,7 @@
     lottery: '/static/images/lottery@2x.png'
   };
   wepy.component({
+    store,
     data: {
       showAnimation: false,
       addGold: false,
@@ -98,6 +101,7 @@
       }
     },
     computed: {
+      ...mapState(['safeAreaStyle']),
       goldUrl() {
         let result = images['gold'].goldOne;
         if (this.des === 2) {
@@ -115,6 +119,9 @@
       },
       addGoldUrl: function() {
         return images['gold'].addGoldUrl;
+      },
+      containerStyle() {
+        return 'position:relative; ' + this.safeAreaStyle;
       }
     },
     watch: {
@@ -169,10 +176,6 @@
         }
       }
     },
-    created() {
-      let statusHeight = this.$app.$options.globalData.statusBarHeight || '';
-      statusHeight && (this.containerStyle = 'position:relative; top:' + statusHeight + 'px');
-    }
   });
 </script>
 <style lang="less">

src/pages/index.wpy

@@ -8,7 +8,7 @@
     width: 100%;
     height: 100%;
   }
-  #myvideo{
+  .prize{
     width: 100%;
     height: 100%;
     position: absolute;
@@ -49,43 +49,123 @@
       opacity: 0;
     }
   }
-  .authmodal{
-    width:100%;
-    height:100%;
-    background-color: rgba(0,0,0,0.7);
-    position: fixed;
-    z-index:20;
-    .wrap {
-      width: 90%;
+  .content{
+    position: absolute;
+    z-index: 9;
+    bottom: 400rpx;
+    width: 100%;
+    color: @whitecolor;
+    clear: both;
+    &.anima {
+      animation:fadeout 2s;
+    }
+    &.hide {
+      display: none;
+    }
+  }
+  .leftcont {
+    width: 44%;
+    float: left;
+    font-size: @font-normal;
+    margin-left: 30rpx;
+  }
+  .list-wrapper {
+    height: 120rpx;
+  }
+  .leftcont .img {
+    width: 40rpx;
+    height: 40rpx;
+    border-radius: 50%;
+    vertical-align: middle;
+  }
+  .leftcont .text {
+    max-width: 200rpx;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-left: 10rpx;
+    vertical-align: middle;
+    border-radius: 20rpx;
+    display: inline-block;
+    font-size: @font-small;
+    box-sizing: border-box;
+    padding:6rpx 15rpx;
+    background-color:rgba(238, 238, 238, 0.2);
+  }
+
+  .footer {
+    position: absolute;
+    z-index: 9;
+    bottom: 20rpx;
+    width: 100%;
+  }
+  .footswiper {
+    height: 360rpx;
+  }
+  .list-item{
+    width:220rpx;
+    /*height: 330rpx;*/
+    background-color:@whiteback;
+    border-radius: 10rpx;
+    transform: scale(0.7,0.7) translateY(65rpx);
+    transition: all 0.5s;
+    padding:10rpx 10rpx 5rpx 10rpx;
     margin:0 auto;
+    margin-top: 2rpx;
     position: relative;
-      top:200px;
-      padding: 50rpx 0;
-      background-color: @whiteback;
-      border-radius: 20rpx;
-      .text {
-        color:#333;
-        text-align: center;
-        padding-top:30rpx;
-        padding-bottom: 60rpx;
   }
-      button {
-        width:80%;
+  .list-item image {
+    width: 210rpx;
+    display: block;
+    height: 210rpx;
+    margin:0 auto;
+    border-radius: 10rpx;
+  }
+  .list-item .text {
+    font-size: @font-small;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2; //行数
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-height:24rpx;
+    margin-top:10rpx;
+  }
+  .list-item .price{
+    color:@maincolor;
+    font-size:@font-common;
+    margin-top:2rpx;
+  }
+  .list-item .buy{
+    font-size: 16rpx;
+    color:@darkgrey;
   }
+  .list-item.subright {
+    transform: scale(0.85,0.85) translateY(26rpx) translateX(25rpx);
   }
+  .list-item.subleft {
+    transform: scale(0.85,0.85) translateY(26rpx) translateX(-25rpx);
+  }
+  .list-item.select{
+    transform: scale(1,1);
+    bottom: 2rpx;
+  }
+  .list-item.delete {
+    opacity:0;
+    transform:translateY(-220rpx)
   }
 </style>
 <template>
   <view class="video-wrapper">
-    <view id="myvideo">
-      <prize-list v-if="videoList && videoList.length" :videoList.sync="videoList" :userAccount="mainInfo && mainInfo.account && mainInfo.account.quantity || 0" :total="total" bindchange="changeVideo" @getAwardsInfo="getAwardsInfo">
+    <view class="prize">
+      <prize-list :videoList="videoList" :userAccount="mainInfo && mainInfo.account && mainInfo.account.quantity || 0" :total="total" bindchange="changeVideo" @getAwardsInfo="getAwardsInfo">
       </prize-list>
     </view>
-    <view class="userInfo" style="{{userImgStyle}}">
+    <view class="userInfo" style="{{safeAreaStyle}}">
       <button v-if="authmodal" open-type="getUserInfo" bindgetuserinfo="getUserInfo" class="userinfo-button">
-        <image class="userinfo-image" src="{{userInfo.avatarUrl || '/static/images/user@2x.png'}}"></image>
+        <image class="userinfo-image" :src="userInfo.avatarUrl"></image>
       </button>
-      <image v-if="!authmodal" @tap="showMenu(!showMenus)" src="{{userInfo.avatarUrl || '/static/images/user@2x.png'}}" mode="cover" class="userimage"></image>
+      <image v-if="!authmodal" @tap="showMenu(!showModal)" :src="userInfo.avatarUrl" mode="cover" class="userimage"></image>
     </view>
     <view>
       <gold type="gold" :des="mainInfo && mainInfo.account && mainInfo.account.quantity || 0" :gold="sign" :isReceive="isReceive"></gold>
@@ -94,14 +174,12 @@
       <share type="share" des="分享"></share>
     </view>
     <activity-list :activityList="activityList"></activity-list>
-    <network v-if="isConnected === false"></network>
-    <open-animation v-if="showAwardsModal" :joinRecord="mainInfo && mainInfo.joinRecord"></open-animation>
-    <shared-popup v-if="showShareModal" :inviteinfo="mainInfo && mainInfo.inviteRecord" @getSharedGold="getSharedGold"></shared-popup>
-    <popup @showMenu="showMenu" :showMenus="showMenus"></popup>
-    <!--推荐商品列表-->
-    <!--<goods-list :goodsList="goodsList"></goods-list>-->
+    <network v-if="isConnected === false"/>
+    <open-animation v-if="showModal === 2" :joinRecord="mainInfo && mainInfo.joinRecord"/>
+    <shared-popup v-if="showModal === 1" :inviteinfo="mainInfo && mainInfo.inviteRecord" @getSharedGold="getSharedGold"/>
+    <popup @showMenu="showMenu" :showMenus="showModal === 3"/>
     <van-dialog id="van-dialog"/>
-    <van-notify id="van-notify" />
+    <van-notify id="van-notify"/>
   </view>
 </template>
 
@@ -111,7 +189,7 @@
   import wepy from '@wepy/core';
   import Notify from '../components/vant/notify/notify';
   import Dialog from '../components/vant/dialog/dialog';
-  import { login, register, getUserInfo, addGold, getPrizeList, signIn, getActivityFeed } from '../common/api.js';
+  import { login, register, getMainInfo, addGold, getPrizeList, signIn, getActivityFeed } from '../common/api.js';
   wepy.page({
     store,
     data: {
@@ -120,23 +198,19 @@
       activityList: [],
       authmodal: false,
       sign: true,
-      userImgStyle: '',
-      awards: false,
-      showMenus: false,
       inviter: '',
       mainInfo: null,
-      showShareModal: false,
-      showAwardsModal: false,
+      showModal: 0, // 1: 展示领取金币弹窗 2: 展示抽奖弹窗 3: 头像菜单弹窗
       awardsInfo: {},
       isReceive: false
     },
 
     computed: {
-      ...mapState([ 'isConnected', 'userInfo' ])
+      ...mapState([ 'isConnected', 'userInfo', 'safeAreaStyle' ])
     },
 
     methods: {
-      ...mapActions([ 'setIsConnected', 'setUserInfo' ]),
+      ...mapActions([ 'setIsConnected', 'setUserInfo', 'setSafeAreaStyle' ]),
       async getUserInfo (e, isFromLottery) {
         if (e.$wx.detail.userInfo) {
           this.setUserInfo(e.$wx.detail.userInfo);
@@ -231,7 +305,7 @@
         };
       },
       getAwards: function() {
-        const { id, photoUrl, quantity, name, chance } = this.awardsInfo;
+        const { id, photoUrl, name, chance } = this.awardsInfo;
         if (!id || !this.mainInfo || !this.mainInfo.account) {
           Notify({ message: '服务器异常,请稍后重试', safeAreaInsetTop: true });
           return;
@@ -241,17 +315,17 @@
           return;
         }
         wx.navigateTo({
-          url: `/pages/raffle?prizeId=${id}&chance=${chance}&photoUrl=${photoUrl}&quantity=${quantity}&name=${name}`
+          url: `/pages/raffle?prizeId=${id}&chance=${chance}&photoUrl=${photoUrl}&quantity=${this.mainInfo.account.quantity}&name=${name}`
         });
       },
       getAwardsInfo: function(v) {
         this.awardsInfo = v;
       },
       showMenu: function(v) {
-        this.showMenus = v;
+        this.showModal = v ? 3 : 0;
       },
       getSharedGold: async function(v) {
-        this.showShareModal = false;
+        this.showModal = 0;
         await addGold(v);
         let account = this.mainInfo.account || {};
         let quantity = account.quantity || 0;
@@ -259,13 +333,13 @@
         this.isReceive = true;
         setTimeout(() => {
           if (this.mainInfo.joinRecord && this.mainInfo.joinRecord.id) {
-            this.showAwardsModal = true;
+            this.showModal = 2;
           }
         }, 1000);
       },
       getMainInfo: async function() {
-        this.mainInfo = await getUserInfo(wx.getStorageSync('openId'));
-        this.sign = this.mainInfo && this.mainInfo.signin;
+        this.mainInfo = await getMainInfo();
+        this.sign = (this.mainInfo && this.mainInfo.signin) || true;
         wx.setStorageSync('hasPhone', this.mainInfo.phone);
         if (this.mainInfo && this.mainInfo.innerActivity) {
           wx.setStorageSync('innerActivity', this.mainInfo.innerActivity);
@@ -273,9 +347,9 @@
           wx.setStorageSync('innerActivity', '');
         }
         if (this.mainInfo.inviteRecord && this.mainInfo.inviteRecord.length) {
-          this.showShareModal = true;
+          this.showModal = 1;
         } else if (this.mainInfo.joinRecord && this.mainInfo.joinRecord.id) {
-          this.showAwardsModal = true;
+          this.showModal = 2;
         }
       },
       async registUser(userInfo) {
@@ -292,25 +366,31 @@
         // 1期方案先一次取50
         const list = await getActivityFeed({ count: 50 });
         this.activityList = list;
+      },
+      async getOpenId() {
+        const { code } = await wepy.wx.login();
+        let loginInfo = await login(code);
+        loginInfo = loginInfo || {};
+        wx.setStorageSync('openId', loginInfo.openid);
+        wx.setStorageSync('isRegister', loginInfo.register);
       }
 
     },
     async onLoad (options) {
+      // 获取分享人openid
       if (options.openid) {
         this.inviter = options.openid;
       }
+
+      // 获取头像安全距离
       let statusHeight = this.$app.$options.globalData.statusBarHeight || '';
-      statusHeight && (this.userImgStyle = 'top:' + statusHeight + 'px');
+      this.setSafeAreaStyle('top:' + statusHeight + 'px');
 
-      if (!wx.getStorageSync('openId')) {
-        const { code } = await wepy.wx.login();
-        let userInfo = await login(code);
-        userInfo = userInfo || {};
-        wx.setStorageSync('openId', userInfo.openid);
-        wx.setStorageSync('isRegister', userInfo.register);
-      }
-      if (store.state.userInfo) {
-        this.userInfo = store.state.userInfo;
+      // 获取openid
+      await this.getOpenId();
+  
+      // 获取用户信息并注册
+      if (this.userInfo.nickName) {
         this.registUser(this.userInfo);
       } else {
         const setting = await wepy.wx.getSetting();
@@ -322,9 +402,13 @@
           this.authmodal = true;
         }
       }
+
+      // 获取主页信息
       this.getMainInfo();
-      this.videoList = await getPrizeList();
+      // 获取活动信息
       this.showActivity();
+      // 获取奖品列表
+      this.videoList = await getPrizeList();
     },
     async onShow() {
     }

src/store/index.js

@@ -2,8 +2,11 @@ import Vuex from '@wepy/x';
 
 export default new Vuex.Store({
   state: {
-    userInfo: '',
-    isConnected: true
+    userInfo: {
+      avatarUrl: '/static/images/user@2x.png'
+    },
+    isConnected: true,
+    safeAreaStyle: ''
   },
   mutations: {
     setInfo (state, info) {
@@ -11,6 +14,9 @@ export default new Vuex.Store({
     },
     setIsConnected (state, isConnected) {
       state.isConnected = isConnected;
+    },
+    setSafeAreaStyle (state, safeAreaStyle) {
+      state.safeAreaStyle = safeAreaStyle;
     }
   },
   actions: {
@@ -20,6 +26,9 @@ export default new Vuex.Store({
     setIsConnected ({ commit }) {
       const isConnected = wx.getStorageSync('onNetworkStatusChange');
       commit('setIsConnected', isConnected);
+    },
+    setSafeAreaStyle ({ commit }, safeAreaStyle) {
+      commit('setSafeAreaStyle', safeAreaStyle);
     }
   }
 });