improvement: ui优化和头部对齐

src/app.wpy

@@ -15,10 +15,16 @@ wepy.app({
     // 同时存在 Page hook 和 App hook 时，优先执行 Page hook，返回值再交由 App hook 处
   },
   globalData: {
-    info:''
+    statusBarHeight:''
   },
   onLaunch() {
 //    this.$options.globalData.info = '333';
+    let that = this;
+    wx.getSystemInfo({
+      success: function (res) {
+        that.$options.globalData.statusBarHeight = res.statusBarHeight
+      }
+    });
     wx.checkSession({
       success () {
         console.log('已登录')

src/components/custom/videolist.wpy

 <style lang="less">
-  page {
-    width: 100%;
-    height: 100%;
-  }
   .container{
     width:100%;
     height:100%
@@ -17,6 +13,50 @@
     position: absolute;
     z-index: 1;
   }
+  .content{
+    position: absolute;
+    z-index: 9;
+    bottom: 405rpx;
+    width: 100%;
+    min-height:120rpx;
+    color: white;
+    clear: both;
+  }
+  .rightcont {
+    font-size: 24rpx;
+    display:inline-block;
+    float: right;
+    width:30%;
+    margin-right: 30rpx;
+    color: #fff;
+    .info {
+      line-height: 40rpx;
+    }
+  }
+  .progress {
+    width: 180rpx;
+    height:20rpx;
+    background-color:#fff;
+    margin-top:10rpx;
+    color:#666;
+    position: relative;
+    .text{
+      position: absolute;
+      top:0;
+      left:0;
+      width: 100%;
+      height:100%;
+      z-index:2;
+      background-color: transparent;
+      text-align: center;
+      font-size: 18rpx;
+      line-height: 20rpx;
+    }
+    .orange {
+      height:100%;
+      background-color: #FF5D15;
+    }
+  }
 </style>
 <template>
   <view class="container">
@@ -32,6 +72,16 @@
       <!-- curQueue 循环会导致video重新插入，objectFit 不可变更 -->
       <swiper-item wx:for="{{curQueue}}" wx:key="index">
         <view class="video-wrapper">
+          <cover-view class="content">
+            <cover-view class="rightcont">
+              <cover-view class="info">奖品库存: 1/8</cover-view>
+              <cover-view class="info">中奖概率: {{item.id}}/3000</cover-view>
+              <cover-view class="progress">
+                <cover-view class="text">{{progress}}%</cover-view>
+                <cover-view class="orange" style="{{progressStyle}}"></cover-view>
+              </cover-view>
+            </cover-view>
+          </cover-view>
           <video
             id="video_{{index}}"
             class="video_item"
@@ -50,8 +100,7 @@
           >
             <video-pause :pause="pause"></video-pause>
           </video>
-          <video-loading v-if="item.time === 0"/>
-          <slot></slot>
+          <!--<video-loading v-show="item.time === 0"/>-->
         </view>
       </swiper-item>
     </swiper>
@@ -84,7 +133,9 @@
       _change: -1,
       _invalidUp: 0,
       _invalidDown: 0,
-      _videoContexts: []
+      _videoContexts: [],
+      progress:0,
+      progressStyle:'',
     },
     watch: {
       videoList () {
@@ -93,6 +144,8 @@
       }
     },
     attached() {
+      this.progress = 47;
+      this.progressStyle = 'width:'+this.progress+'%';
       this._videoContexts = [
         wx.createVideoContext('video_0', this.$wx),
         wx.createVideoContext('video_1', this.$wx),
@@ -191,7 +244,7 @@
       },
       playCurrent(current) {
         this._videoContexts.forEach((ctx, index) => {
-          console.log('playCurrent', current, index);
+//          console.log('playCurrent', current, index);
         });
       },
       trigger(e, type) {

src/pages/index.wpy

@@ -18,7 +18,6 @@
     z-index: 9;
     top:100rpx;
     left: 30rpx;
-    color: #fff;
   }
   .userimage{
     width: 100rpx;
@@ -28,53 +27,19 @@
   .content{
     position: absolute;
     z-index: 9;
-    bottom: 450rpx;
+    bottom: 400rpx;
     width: 100%;
     color: white;
     clear: both;
   }
-  .rightcont {
-    font-size: 24rpx;
-    display:inline-block;
-    float: right;
-    margin-right: 30rpx;
-    color: #fff;
-    margin-top:20rpx;
-  }
-  .progress {
-    width: 180rpx;
-    height:20rpx;
-    background-color:#fff;
-    margin-top:10rpx;
-    color:#666;
-    position: relative;
-    text{
-      position: absolute;
-      top:0;
-      left:0;
-      width: 100%;
-      height:100%;
-      background-color: transparent;
-      text-align: center;
-      font-size: 18rpx;
-      line-height: 20rpx;
-    }
-    .orange {
-      height:100%;
-      background-color: #FF5D15;
-    }
-  }
   .leftcont {
     width: 44%;
     float: left;
     font-size: 12px;
     margin-left: 30rpx;
   }
-  .imgwrap{
-    margin:8px 0;
-  }
   .list-wrapper {
-    height: 70px;
+    height: 120rpx;
   }
   .leftcont .img {
     width: 40rpx;
@@ -206,7 +171,7 @@
 
       </video-list>
     </view>
-    <view class="userInfo">
+    <view class="userInfo" style="{{userImgStyle}}">
       <image src="{{userInfo.avatarUrl}}" mode="cover" class="userimage"></image>
     </view>
     <view class="content">
@@ -221,16 +186,8 @@
           </swiper-item>
         </swiper>
       </view>
-      <view class="rightcont">
-        <view>奖品库存: 1/8</view>
-        <view>中奖概率: 1/3000</view>
-        <view class="progress">
-          <text>{{progress}}%</text>
-          <view class="orange" style="{{progressStyle}}"></view>
-        </view>
-      </view>
     </view>
-    <view class="footer">
+    <!--<view class="footer">
       <swiper
         class="footswiper"
         display-multiple-items="{{swiperItem}}"
@@ -242,8 +199,8 @@
         next-margin="120rpx"
         catch:touchmove
       >
-        <!--bindtouchstart="touchStart"-->
-        <!--bindtouchend="touchEnd"-->
+        &lt;!&ndash;bindtouchstart="touchStart"&ndash;&gt;
+        &lt;!&ndash;bindtouchend="touchEnd"&ndash;&gt;
         <swiper-item wx:for="{{list}}" wx:key="index">
           <view
             data-itemid="{{index}}"
@@ -258,7 +215,7 @@
           </view>
         </swiper-item>
       </swiper>
-    </view>
+    </view>-->
     <view class="authmodal" v-show="authmodal">
       <view class="wrap">
         <view class="text">来到lukii，再平凡的人，也有幸运的权利！</view>
@@ -284,22 +241,21 @@
     },
 
     data: {
-      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,
-      progress:0,
-      progressStyle:'',
+      userImgStyle:'',
     },
 
     computed: {
@@ -477,6 +433,8 @@
 
     created () {
       let self = this;
+      let statusHeight = this.$app.$options.globalData.statusBarHeight || '';
+      statusHeight && (this.userImgStyle = 'top:'+statusHeight+'px')
       if (store.state.userInfo) {
         this.userInfo = store.state.userInfo;
       } else {
@@ -491,7 +449,7 @@
         {value: 1, text: '白色条纹马克杯，马克吐温同款1', imgsrc:'/static/images/test1.jpg', price:'￥399.00',people:2200,sku:'100004549235'},
         {value: 2, text: '白色条纹马克杯，马克吐温同款2', imgsrc:'/static/images/test2.png', price:'￥1399.22',people:2200,sku:'2004203'},
         {value: 3, text: '白色条纹马克杯，马克吐温同款3', imgsrc:'/static/images/peo1.jpg', price:'￥199.22',people:2200,sku:'17818909707'},
-        {value: 4, text: '白色条纹马克杯，马克吐温同款4', imgsrc:'/static/images/peo2.jpg', price:'￥134.12',people:2200,sku:'100004549235'},
+        {value: 4, text: '白色条纹马克杯，马克吐温同款4', imgsrc:'/static/images/peo2.jpg', price:'￥134.12',people:2200,sku:'67704484242'},
         {value: 5, text: '白色条纹马克杯，马克吐温同款5', imgsrc:'/static/images/peo3.jpg', price:'￥194.22',people:2200,sku:'100004549235'},
         {value: 6, text: '白色条纹马克杯，马克吐温同款6', imgsrc:'/static/images/peo1.jpg', price:'￥292.22',people:2200,sku:'100004549235'},
         {value: 7, text: '白色条纹马克杯，马克吐温同款7', imgsrc:'/static/images/test1.jpg', price:'￥1399.92',people:2200,sku:'100004549235'},
@@ -509,8 +467,6 @@
     },
     onLoad () {
       let that = this;
-      this.progress = 47;
-      this.progressStyle = 'width:'+this.progress+'%';
       this.adlist = [
         {imgsrc: '/static/images/test1.jpg', text: '小明刚刚参与了抽奖'},
         {imgsrc: '/static/images/test1.jpg', text: '小2刚刚参与了抽奖'},