开发新pk结算样式

pages/commodity/index.js

@@ -63,6 +63,7 @@ Page({
         }).finally(() => {
             wx.hideLoading()
         })
+
         userEvent({
             action: 'ANDROID_PAY_ACTIVITY',
         })

pages/pkResult/index copy.less

@@ -0,0 +1,152 @@
+.pkResult {
+  width: 100vw;
+  height: 100vh;
+  background-color: #6D9FFE;
+  overflow: hidden;
+
+  .title {
+    margin: 85rpx 0rpx 34rpx;
+    color: white;
+    text-align: center;
+    font-size: 46rpx;
+  }
+
+  .time {
+    font-size: 34rpx;
+    text-align: center;
+    color: white;
+  }
+
+  .body {
+    position: relative;
+    width: 720rpx;
+    height: 640rpx;
+    margin: 60rpx auto;
+    text-align: center;
+    box-sizing: border-box;
+
+    .left {
+      position: absolute;
+      top: 30rpx;
+      left: 30rpx;
+      height: 500rpx;
+      width: 328rpx;
+      background: url('http://reader-wx.ai160.com/images/reader/v3/victory-1.png')no-repeat;
+      background-size: 100% 100%;
+
+      .avatarL {
+        top: 66rpx;
+        left: 110rpx;
+      }
+    }
+
+    .equal {
+      top: 70rpx !important;
+      background: url('http://reader-wx.ai160.com/images/reader/v3/pingzuo.png')no-repeat;
+      background-size: 100% 100%;
+    }
+
+    .right {
+      position: absolute;
+      top: 70rpx;
+      right: 30rpx;
+      height: 500rpx;
+      width: 328rpx;
+      background: url('http://reader-wx.ai160.com/images/reader/v3/defeated.png')no-repeat;
+      background-size: 100% 100%;
+
+      .avatarR {
+        top: 59rpx;
+        left: 107rpx;
+      }
+    }
+
+    .equalRight {
+      background: url('http://reader-wx.ai160.com/images/reader/v3/pingyou.png')no-repeat;
+      background-size: 100% 100%;
+
+      .avatarR {
+        top: 64rpx;
+        left: 122rpx;
+      }
+    }
+
+    .avatar {
+      position: absolute;
+      width: 110rpx;
+      height: 110rpx;
+      border-radius: 50%;
+    }
+
+    .bodyTitle {
+      font-size: 28rpx;
+      padding: 0rpx 30rpx;
+      box-sizing: border-box;
+      margin-top: 190rpx;
+    }
+
+    .bodyScore {
+      margin-top: 10rpx;
+      font-size: 38rpx;
+      font-weight: bold;
+    }
+
+    .bodyPlay {
+      width: 70rpx;
+      height: 70rpx;
+      margin-top: 40rpx;
+    }
+
+    .progress {
+      width: 250rpx;
+      margin: 10rpx auto;
+      border-radius: 50rpx;
+      overflow: hidden;
+    }
+
+    .duration {
+      margin: 10rpx auto;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      font-size: 28rpx;
+    }
+  }
+
+  .footer {
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+    width: 100%;
+    padding: 20rpx 104rpx;
+    box-sizing: border-box;
+    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+    background-color: white;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .btn {
+      padding: 16rpx 0rpx;
+      text-align: center;
+      border-radius: 50rpx;
+      width: 220rpx;
+      font-size: 30rpx;
+      color: white;
+      background-color: #F84041;
+      box-shadow: 0 6rpx 14rpx 0 rgba(251, 79, 80, 0.76);
+    }
+
+    .stBtn {
+      padding: 16rpx 0rpx;
+      text-align: center;
+      border-radius: 50rpx;
+      width: 220rpx;
+      font-size: 30rpx;
+      color: white;
+      background-color: #66C5FF;
+      box-shadow: 0 6px 14px 0 rgba(50, 197, 255, 0.65);
+    }
+  }
+}

pages/pkResult/index copy.wxml

@@ -0,0 +1,44 @@
+<wxs src="../../utils/filter.wxs" module="filters" />
+<view class="pkResult">
+    <view class="title">{{victory.userRead.title}}</view>
+    <view class="time">{{filters.formatDate(pkRecord.gmtCreated,1)}}</view>
+    <view class="body">
+        <view class="left {{equal?'equal':''}}">
+            <image src="{{victory.user.avatar}}" class="avatar avatarL" />
+            <view class="bodyTitle textOver">{{victory.user.nickName||victory.user.eid}}</view>
+            <view class="bodyScore" wx:if="{{victory.userReadExtend.businessType!=2}}">{{victory.userRead.score}}分
+            </view>
+            <image src="{{vState?'/static/work.png':'/static/play-big.png'}}" class="bodyPlay" bindtap="playAudio"
+                data-type="victory" />
+            <progress percent="{{vProgress}}" stroke-width="4" class="progress" style="margin-right:48rpx;" />
+            <view class="duration">
+                <view class="start">{{vStart}}</view>
+                <view class="end">{{vEnd}}</view>
+            </view>
+        </view>
+        <view class="right {{equal?'equalRight':''}}">
+            <image src="{{defeated.user.avatar}}" class="avatar avatarR" />
+            <view class="bodyTitle textOver">{{defeated.user.nickName||defeated.user.eid}}</view>
+            <view class="bodyScore" wx:if="{{victory.userReadExtend.businessType!=2}}">{{defeated.userRead.score}}分
+            </view>
+            <image src="{{dState?'/static/work.png':'/static/play-big.png'}}" class="bodyPlay" bindtap="playAudio"
+                data-type="defeated" />
+            <progress percent="{{dProgress}}" stroke-width="4" class="progress" />
+            <view class="duration">
+                <view class="start">{{dStart}}</view>
+                <view class="end">{{dEnd}}</view>
+            </view>
+        </view>
+    </view>
+    <view class="footer" wx:if="{{!isplayback}}">
+        <view class="stBtn" bindtap="result" data-type="reading">重新挑战</view>
+        <button class="resetBtn btn" open-type="share">
+            分享战绩
+        </button>
+    </view>
+    <view class="footer" wx:else>
+        <view class="stBtn" bindtap="result" data-type="wantPlay">我也要玩</view>
+        <view class="btn" bindtap="result" data-type="index">回到首页</view>
+    </view>
+</view>
+<canvas id='share' type="2d"> </canvas>

pages/pkResult/index.js

@@ -21,7 +21,6 @@ Page({
         vState: false,
         vStart: '00:00',
         vEnd: '00:00',
-        vProgress: 0,
         dState: false,
         dStart: '00:00',
         dEnd: '00:00',
@@ -41,6 +40,7 @@ Page({
             pkRecord,
             pkRecordVOS
         } = await getPkResult(options.id)
+        console.log(pkRecordVOS);
         this.setData({
             pkId: options.id,
             pkRecord,
@@ -59,7 +59,7 @@ Page({
         let defeated = second.userRead.score < first.userRead.score ? second : first
         this.setData({
             equal: first.userReadExtend.businessType != 2 ? first.userRead.score == second.userRead.score : true,
-            victory: first.userRead.score > second.userRead.score ? first : second,
+            victory,
             defeated,
             vEnd: setDuration(victory.userRead.duration),
             dEnd: setDuration(defeated.userRead.duration),
@@ -109,10 +109,8 @@ Page({
         // })
         this.innerAudioContext.onTimeUpdate(() => {
             let label = this.data.currentType == 'victory' ? 'vStart' : 'dStart'
-            let progressV = this.data.currentType == 'victory' ? 'vProgress' : 'dProgress'
             this.setData({
                 [label]: setDuration(this.innerAudioContext.currentTime),
-                [progressV]: Math.round((this.innerAudioContext.currentTime / this.innerAudioContext.duration) * 100)
             })
         })
     },

pages/pkResult/index.less

@@ -1,152 +1,125 @@
 .pkResult {
-  width: 100vw;
-  height: 100vh;
-  background-color: #6D9FFE;
-  overflow: hidden;
-
-  .title {
-    margin: 85rpx 0rpx 34rpx;
-    color: white;
-    text-align: center;
-    font-size: 46rpx;
-  }
-
-  .time {
-    font-size: 34rpx;
-    text-align: center;
-    color: white;
-  }
-
-  .body {
-    position: relative;
-    width: 720rpx;
-    height: 640rpx;
-    margin: 60rpx auto;
-    text-align: center;
-    box-sizing: border-box;
-
-    .left {
-      position: absolute;
-      top: 30rpx;
-      left: 30rpx;
-      height: 500rpx;
-      width: 328rpx;
-      background: url('http://reader-wx.ai160.com/images/reader/v3/victory-1.png')no-repeat;
-      background-size: 100% 100%;
-
-      .avatarL {
-        top: 66rpx;
-        left: 110rpx;
-      }
-    }
-
-    .equal {
-      top: 70rpx !important;
-      background: url('http://reader-wx.ai160.com/images/reader/v3/pingzuo.png')no-repeat;
-      background-size: 100% 100%;
-    }
-
-    .right {
-      position: absolute;
-      top: 70rpx;
-      right: 30rpx;
-      height: 500rpx;
-      width: 328rpx;
-      background: url('http://reader-wx.ai160.com/images/reader/v3/defeated.png')no-repeat;
-      background-size: 100% 100%;
-
-      .avatarR {
-        top: 59rpx;
-        left: 107rpx;
-      }
-    }
-
-    .equalRight {
-      background: url('http://reader-wx.ai160.com/images/reader/v3/pingyou.png')no-repeat;
-      background-size: 100% 100%;
-
-      .avatarR {
-        top: 64rpx;
-        left: 122rpx;
-      }
-    }
-
-    .avatar {
-      position: absolute;
-      width: 110rpx;
-      height: 110rpx;
-      border-radius: 50%;
-    }
-
-    .bodyTitle {
-      font-size: 28rpx;
-      padding: 0rpx 30rpx;
-      box-sizing: border-box;
-      margin-top: 190rpx;
-    }
-
-    .bodyScore {
-      margin-top: 10rpx;
-      font-size: 38rpx;
-      font-weight: bold;
-    }
-
-    .bodyPlay {
-      width: 70rpx;
-      height: 70rpx;
-      margin-top: 40rpx;
-    }
-
-    .progress {
-      width: 250rpx;
-      margin: 10rpx auto;
-      border-radius: 50rpx;
-      overflow: hidden;
-    }
-
-    .duration {
-      margin: 10rpx auto;
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: space-around;
-      font-size: 28rpx;
-    }
-  }
-
-  .footer {
-    position: fixed;
-    bottom: 0px;
-    left: 0px;
-    width: 100%;
-    padding: 20rpx 104rpx;
-    box-sizing: border-box;
-    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
-    background-color: white;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.8);
+    overflow: hidden;
     display: flex;
+    flex-direction: column;
     align-items: center;
-    justify-content: space-between;
-
-    .btn {
-      padding: 16rpx 0rpx;
-      text-align: center;
-      border-radius: 50rpx;
-      width: 220rpx;
-      font-size: 30rpx;
-      color: white;
-      background-color: #F84041;
-      box-shadow: 0 6rpx 14rpx 0 rgba(251, 79, 80, 0.76);
+    justify-content: center;
+
+    .body {
+        position: relative;
+        width: 600rpx;
+        height: 674rpx;
+        background: url('https://reader-wx.ai160.com/images/reader/v3/win.png') no-repeat;
+        background-size: 100% 100%;
+
+        .userBox {
+            position: absolute;
+            bottom: 0;
+            padding-top: 140rpx;
+            box-sizing: border-box;
+            width: 300rpx;
+            height: 514rpx;
+            text-align: center;
+            color: white;
+            .avatar {
+                width: 110rpx;
+                height: 110rpx;
+                background-color: white;
+                border-radius: 50%;
+            }
+
+            .bodyTitle {
+                margin: 12rpx 0 4rpx;
+                font-size: 27rpx;
+            }
+
+            .bodyScore {
+                font-size: 38rpx;
+                font-weight: 600;
+                letter-spacing: 3rpx;
+            }
+
+            .duration {
+                margin-top: 30rpx;
+                box-sizing: border-box;
+
+                .bodyPlay {
+                    left: 26rpx;
+                    width: 70rpx;
+                    height: 70rpx;
+                }
+
+                .time {
+                    padding-bottom: 20rpx;
+                    display: flex;
+                    align-items: center;
+                    font-size: 28rpx;
+                    font-weight: 500;
+                }
+            }
+        }
+
+        .left {
+            left: 0;
+
+            .duration {
+                padding-left: 20rpx;
+                text-align: left;
+            }
+        }
+
+        .right {
+            right: 0;
+            padding-left: 70rpx;
+            background-color: rgba(255, 166, 0, 0.212);
+
+            .duration {
+                padding-right: 20rpx;
+                text-align: right;
+                .time{
+                    justify-content: flex-end;
+                }
+            }
+        }
     }
 
-    .stBtn {
-      padding: 16rpx 0rpx;
-      text-align: center;
-      border-radius: 50rpx;
-      width: 220rpx;
-      font-size: 30rpx;
-      color: white;
-      background-color: #66C5FF;
-      box-shadow: 0 6px 14px 0 rgba(50, 197, 255, 0.65);
+    .footer {
+        width: 600rpx;
+        margin-top: 96rpx;
+        margin-bottom: 10%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .stBtn {
+            position: relative;
+            width: 267rpx;
+            height: 70rpx;
+            line-height: 70rpx;
+            border-radius: 40rpx;
+
+
+            .imgBtn {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+            }
+
+            .text {
+                position: absolute;
+                width: 100%;
+                text-align: center;
+                z-index: 2;
+                font-size: 26rpx;
+                font-weight: 500;
+                color: #FFFFFF;
+                letter-spacing: 2rpx;
+            }
+        }
     }
-  }
 }

pages/pkResult/index.wxml

@@ -1,39 +1,35 @@
 <wxs src="../../utils/filter.wxs" module="filters" />
 <view class="pkResult">
-    <view class="title">{{victory.userRead.title}}</view>
-    <view class="time">{{filters.formatDate(pkRecord.gmtCreated,1)}}</view>
     <view class="body">
-        <view class="left {{equal?'equal':''}}">
-            <image src="{{victory.user.avatar}}" class="avatar avatarL" />
-            <view class="bodyTitle textOver">{{victory.user.nickName||victory.user.eid}}</view>
-            <view class="bodyScore" wx:if="{{victory.userReadExtend.businessType!=2}}">{{victory.userRead.score}}分
-            </view>
-            <image src="{{vState?'/static/work.png':'/static/play-big.png'}}" class="bodyPlay" bindtap="playAudio"
-                data-type="victory" />
-            <progress percent="{{vProgress}}" stroke-width="4" class="progress" style="margin-right:48rpx;" />
+        <view class="userBox left">
+            <image src="" class="avatar avatarL" />
+            <view class="bodyTitle textOver">名字名字名字</view>
+            <view class="bodyScore">100分</view>
             <view class="duration">
-                <view class="start">{{vStart}}</view>
-                <view class="end">{{vEnd}}</view>
+                <image src="{{vState?'/static/play-big2.png':'/static/play-big.png'}}" class="bodyPlay"
+                    bindtap="playAudio" data-type="victory" />
+                <view class="time">{{vStart}}/{{vEnd}}</view>
             </view>
         </view>
-        <view class="right {{equal?'equalRight':''}}">
-            <image src="{{defeated.user.avatar}}" class="avatar avatarR" />
-            <view class="bodyTitle textOver">{{defeated.user.nickName||defeated.user.eid}}</view>
-            <view class="bodyScore" wx:if="{{victory.userReadExtend.businessType!=2}}">{{defeated.userRead.score}}分
-            </view>
-            <image src="{{dState?'/static/work.png':'/static/play-big.png'}}" class="bodyPlay" bindtap="playAudio"
-                data-type="defeated" />
-            <progress percent="{{dProgress}}" stroke-width="4" class="progress" />
+        <view class="userBox right">
+            <image src="" class="avatar avatarL" />
+            <view class="bodyTitle textOver">名字名字名字</view>
+            <view class="bodyScore">100分</view>
             <view class="duration">
-                <view class="start">{{dStart}}</view>
-                <view class="end">{{dEnd}}</view>
+                <image src="{{vState?'/static/play-big2.png':'/static/play-big.png'}}" class="bodyPlay"
+                    bindtap="playAudio" data-type="victory" />
+                <view class="time">{{vStart}}/{{vEnd}}</view>
             </view>
         </view>
     </view>
     <view class="footer" wx:if="{{!isplayback}}">
-        <view class="stBtn" bindtap="result" data-type="reading">重新挑战</view>
-        <button class="resetBtn btn" open-type="share">
-            分享战绩
+        <view class="stBtn" bindtap="result" data-type="reading">
+            <image src="/static/pr1.png" class="imgBtn" />
+            <view class="text">重新调整</view>
+        </view>
+        <button class="resetBtn stBtn" open-type="share">
+            <image src="/static/pr2.png" class="imgBtn" />
+            <view class="text" style="color: #AC2A00;">炫耀一下</view>
         </button>
     </view>
     <view class="footer" wx:else>

pages/pkResult/index.wxss

@@ -1,133 +1,109 @@
 .pkResult {
   width: 100vw;
   height: 100vh;
-  background-color: #6D9FFE;
+  background: rgba(0, 0, 0, 0.8);
   overflow: hidden;
-}
-.pkResult .title {
-  margin: 85rpx 0rpx 34rpx;
-  color: white;
-  text-align: center;
-  font-size: 46rpx;
-}
-.pkResult .time {
-  font-size: 34rpx;
-  text-align: center;
-  color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 .pkResult .body {
   position: relative;
-  width: 720rpx;
-  height: 640rpx;
-  margin: 60rpx auto;
-  text-align: center;
-  box-sizing: border-box;
-}
-.pkResult .body .left {
-  position: absolute;
-  top: 30rpx;
-  left: 30rpx;
-  height: 500rpx;
-  width: 328rpx;
-  background: url('http://reader-wx.ai160.com/images/reader/v3/victory-1.png') no-repeat;
+  width: 600rpx;
+  height: 674rpx;
+  background: url('https://reader-wx.ai160.com/images/reader/v3/win.png') no-repeat;
   background-size: 100% 100%;
 }
-.pkResult .body .left .avatarL {
-  top: 66rpx;
-  left: 110rpx;
-}
-.pkResult .body .equal {
-  top: 70rpx !important;
-  background: url('http://reader-wx.ai160.com/images/reader/v3/pingzuo.png') no-repeat;
-  background-size: 100% 100%;
-}
-.pkResult .body .right {
+.pkResult .body .userBox {
   position: absolute;
-  top: 70rpx;
-  right: 30rpx;
-  height: 500rpx;
-  width: 328rpx;
-  background: url('http://reader-wx.ai160.com/images/reader/v3/defeated.png') no-repeat;
-  background-size: 100% 100%;
-}
-.pkResult .body .right .avatarR {
-  top: 59rpx;
-  left: 107rpx;
-}
-.pkResult .body .equalRight {
-  background: url('http://reader-wx.ai160.com/images/reader/v3/pingyou.png') no-repeat;
-  background-size: 100% 100%;
-}
-.pkResult .body .equalRight .avatarR {
-  top: 64rpx;
-  left: 122rpx;
+  bottom: 0;
+  padding-top: 140rpx;
+  box-sizing: border-box;
+  width: 300rpx;
+  height: 514rpx;
+  text-align: center;
+  color: white;
 }
-.pkResult .body .avatar {
-  position: absolute;
+.pkResult .body .userBox .avatar {
   width: 110rpx;
   height: 110rpx;
+  background-color: white;
   border-radius: 50%;
 }
-.pkResult .body .bodyTitle {
-  font-size: 28rpx;
-  padding: 0rpx 30rpx;
-  box-sizing: border-box;
-  margin-top: 190rpx;
+.pkResult .body .userBox .bodyTitle {
+  margin: 12rpx 0 4rpx;
+  font-size: 27rpx;
 }
-.pkResult .body .bodyScore {
-  margin-top: 10rpx;
+.pkResult .body .userBox .bodyScore {
   font-size: 38rpx;
-  font-weight: bold;
+  font-weight: 600;
+  letter-spacing: 3rpx;
 }
-.pkResult .body .bodyPlay {
+.pkResult .body .userBox .duration {
+  margin-top: 30rpx;
+  box-sizing: border-box;
+}
+.pkResult .body .userBox .duration .bodyPlay {
+  left: 26rpx;
   width: 70rpx;
   height: 70rpx;
-  margin-top: 40rpx;
-}
-.pkResult .body .progress {
-  width: 250rpx;
-  margin: 10rpx auto;
-  border-radius: 50rpx;
-  overflow: hidden;
 }
-.pkResult .body .duration {
-  margin: 10rpx auto;
-  width: 100%;
+.pkResult .body .userBox .duration .time {
+  padding-bottom: 20rpx;
   display: flex;
   align-items: center;
-  justify-content: space-around;
   font-size: 28rpx;
+  font-weight: 500;
+}
+.pkResult .body .left {
+  left: 0;
+}
+.pkResult .body .left .duration {
+  padding-left: 20rpx;
+  text-align: left;
+}
+.pkResult .body .right {
+  right: 0;
+  padding-left: 70rpx;
+  background-color: rgba(255, 166, 0, 0.212);
+}
+.pkResult .body .right .duration {
+  padding-right: 20rpx;
+  text-align: right;
+}
+.pkResult .body .right .duration .time {
+  justify-content: flex-end;
 }
 .pkResult .footer {
-  position: fixed;
-  bottom: 0px;
-  left: 0px;
-  width: 100%;
-  padding: 20rpx 104rpx;
-  box-sizing: border-box;
-  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
-  background-color: white;
+  width: 600rpx;
+  margin-top: 96rpx;
+  margin-bottom: 10%;
   display: flex;
-  align-items: center;
   justify-content: space-between;
-}
-.pkResult .footer .btn {
-  padding: 16rpx 0rpx;
-  text-align: center;
-  border-radius: 50rpx;
-  width: 220rpx;
-  font-size: 30rpx;
-  color: white;
-  background-color: #F84041;
-  box-shadow: 0 6rpx 14rpx 0 rgba(251, 79, 80, 0.76);
+  align-items: center;
 }
 .pkResult .footer .stBtn {
-  padding: 16rpx 0rpx;
+  position: relative;
+  width: 267rpx;
+  height: 70rpx;
+  line-height: 70rpx;
+  border-radius: 40rpx;
+}
+.pkResult .footer .stBtn .imgBtn {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.pkResult .footer .stBtn .text {
+  position: absolute;
+  width: 100%;
   text-align: center;
-  border-radius: 50rpx;
-  width: 220rpx;
-  font-size: 30rpx;
-  color: white;
-  background-color: #66C5FF;
-  box-shadow: 0 6px 14px 0 rgba(50, 197, 255, 0.65);
+  z-index: 2;
+  font-size: 26rpx;
+  font-weight: 500;
+  color: #FFFFFF;
+  letter-spacing: 2rpx;
 }