购买成功弹窗zuj

app.wxss

@@ -1,113 +1,114 @@
 /**app.wxss**/
 page {
-  width: 100%;
-  /* min-height: 100%; */
-  color: #333;
-  font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
-  background: #F2F6FC;
+    width: 100%;
+    /* min-height: 100%; */
+    color: #333;
+    font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
+    background: #F2F6FC;
 }
 
 view {
-  font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
+    font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
 }
 
 text {
-  font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
+    font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
 }
 
 .container {
-  height: auto;
-  box-sizing: border-box;
-  font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
+    height: auto;
+    box-sizing: border-box;
+    font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
 }
 
 #share {
-  width: 375px;
-  height: 300px;
-  position: absolute;
-  left: -9999rpx;
-  top: -9999rpx;
+    width: 375px;
+    height: 300px;
+    position: absolute;
+    left: -9999rpx;
+    top: -9999rpx;
 }
 
 #vip {
-  width: 375px;
-  height: 201px;
-  left: 0px;
-  position: absolute;
+    width: 375px;
+    height: 201px;
+    position: absolute;
+    left: -9999rpx;
+    top: -9999rpx;
 }
 
 .textOver {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .resetBtn {
-  padding: 0px;
-  margin: 0;
-  line-height: normal;
-  background-color: transparent;
+    padding: 0px;
+    margin: 0;
+    line-height: normal;
+    background-color: transparent;
 }
 
 .resetBtn::after {
-  border: none;
+    border: none;
 }
 
 .seat {
-  padding-bottom: calc(134rpx + env(safe-area-inset-bottom)) !important;
+    padding-bottom: calc(134rpx + env(safe-area-inset-bottom)) !important;
 }
 
 .seat2 {
-  padding-bottom: calc(130rpx + env(safe-area-inset-bottom)) !important;
+    padding-bottom: calc(130rpx + env(safe-area-inset-bottom)) !important;
 }
 
 .isFixed {
-  position: fixed;
-  z-index: 998;
+    position: fixed;
+    z-index: 998;
 }
 
 .isFixed2 {
-  width: 100%;
-  box-sizing: border-box;
-  background-color: white;
-  box-shadow: 0px 26rpx 24rpx rgba(0, 0, 0, 0.1);
-  border-bottom-left-radius: 24rpx;
-  border-bottom-right-radius: 24rpx;
-  padding: 20rpx 15rpx 20rpx 26rpx !important;
+    width: 100%;
+    box-sizing: border-box;
+    background-color: white;
+    box-shadow: 0px 26rpx 24rpx rgba(0, 0, 0, 0.1);
+    border-bottom-left-radius: 24rpx;
+    border-bottom-right-radius: 24rpx;
+    padding: 20rpx 15rpx 20rpx 26rpx !important;
 }
 
 .brace {
-  /* 高度为一级分类的高度再加一丢丢 */
-  height: 260rpx;
+    /* 高度为一级分类的高度再加一丢丢 */
+    height: 260rpx;
 }
 
 /* 转圈动画 */
 @keyframes identifier {
-  0% {
-    transform: rotate(0deg);
-  }
+    0% {
+        transform: rotate(0deg);
+    }
 
-  50% {
-    transform: rotate(180deg);
-  }
+    50% {
+        transform: rotate(180deg);
+    }
 
-  100% {
-    transform: rotate(360deg);
-  }
+    100% {
+        transform: rotate(360deg);
+    }
 }
 
 .zoomIn {
-  animation: zoomIn 0.4s forwards;
+    animation: zoomIn 0.4s forwards;
 }
 
 @keyframes zoomIn {
-  from {
-    transform: scale(0);
-    opacity: 0;
-  }
-
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
+    from {
+        transform: scale(0);
+        opacity: 0;
+    }
+
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
 }

components/vipModal/index.js

@@ -0,0 +1,91 @@
+import {
+    getVipInfo,
+} from '~/api/user'
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        show: false,
+        type: '',
+        vipTime:''
+    },
+    methods: {
+        open({
+            type
+        }) {
+            if (typeof this.getTabBar === 'function') {
+                this.getTabBar().setData({
+                    mask: true
+                })
+            }
+            this.getVipInfo()
+            this.setData({
+                type,
+                show: true
+            })
+        },
+        closeModal() {
+            this.setData({
+                show: false
+            })
+            if (typeof this.getTabBar === 'function') {
+                this.getTabBar().setData({
+                    mask: false
+                })
+            }
+        },
+        async getVipInfo() {
+            let vipTime = await getVipInfo()
+            console.log(vipTime);
+            this.setData({
+                vipTime
+            })
+        },
+        creatShare() {
+            let context = wx.createSelectorQuery();
+            context
+                .select('#vip')
+                .fields({
+                    node: true,
+                    size: true
+                }).exec((res) => {
+                    const canvas = res[0].node;
+                    const ctx = canvas.getContext('2d');
+                    const dpr = wx.getSystemInfoSync().pixelRatio;
+                    canvas.width = res[0].width * dpr;
+                    canvas.height = res[0].height * dpr;
+                    ctx.scale(dpr, dpr);
+                    ctx.font = '20px PingFang';
+                    let pic = canvas.createImage();
+                    pic.src = 'http://reader-wx.ai160.com/images/reader/v3/learn/vip1.png'
+                    pic.onload = () => {
+                        ctx.drawImage(pic, 0, 0, 375, 201);
+                        ctx.fillText('终身使用', 144, 135)
+                        ctx.fillStyle = 'red'
+                        setTimeout(() => {
+                            wx.canvasToTempFilePath({
+                                canvas: canvas,
+                                success(res) {
+                                    wx.saveImageToPhotosAlbum({
+                                        filePath: res.tempFilePath,
+                                        success(res) {}
+                                    })
+                                },
+                                fail(res) {
+                                    console.log('fail', res);
+                                }
+                            }, this)
+                        }, 500)
+                    }
+                })
+        },
+    }
+})

components/vipModal/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

components/vipModal/index.less

@@ -0,0 +1,58 @@
+.activationModal {
+    position: fixed;
+    z-index: 2;
+    left: 0rpx;
+    top: 0rpx;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.7);
+
+    .vipModal {
+        position: relative;
+        left: 0;
+        right: 0;
+        width: 600rpx;
+        height: 506rpx;
+        top: 30%;
+        margin: auto;
+        border-radius: 20rpx;
+        text-align: center;
+    }
+
+    .bg1 {
+        background: url(http://reader-wx.ai160.com/images/reader/v3/learn/saveImage2.png);
+        background-size: cover;
+    }
+
+    .bg2 {
+        background: url(http://reader-wx.ai160.com/images/reader/v3/learn/saveImage.png);
+        background-size: cover;
+    }
+
+    .text {
+        position: absolute;
+        left: 86rpx;
+        top: 190rpx;
+        font-size: 26rpx;
+        color: #FFE6D2;
+    }
+
+    .save {
+        position: absolute;
+        top: 390rpx;
+        left: 90rpx;
+        width: 410rpx;
+        height: 80rpx;
+    }
+
+    .close {
+        position: absolute;
+        padding: 40rpx;
+        width: 54rpx;
+        height: 54rpx;
+        left: 0;
+        right: 0;
+        bottom: -140rpx;
+        margin: auto;
+    }
+}

components/vipModal/index.wxml

@@ -0,0 +1,8 @@
+<wxs src="../../utils/filter.wxs" module="filters" />
+<view class="activationModal" wx:if="{{show}}">
+    <view class="vipModal {{type=='svip'?'bg2':'bg1'}}">
+        <view class="text" wx:if="{{type=='vip'}}">有效期至：{{filters.formatDate(vipTime,5)}}</view>
+        <view class="save" catchtap="creatShare"></view>
+        <image src="/static/lollipop.png" class="close" catchtap="closeModal" />
+    </view>
+</view>

components/vipModal/index.wxss

@@ -0,0 +1,52 @@
+.activationModal {
+  position: fixed;
+  z-index: 2;
+  left: 0rpx;
+  top: 0rpx;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.7);
+}
+.activationModal .vipModal {
+  position: relative;
+  left: 0;
+  right: 0;
+  width: 600rpx;
+  height: 506rpx;
+  top: 30%;
+  margin: auto;
+  border-radius: 20rpx;
+  text-align: center;
+}
+.activationModal .bg1 {
+  background: url(http://reader-wx.ai160.com/images/reader/v3/learn/saveImage2.png);
+  background-size: cover;
+}
+.activationModal .bg2 {
+  background: url(http://reader-wx.ai160.com/images/reader/v3/learn/saveImage.png);
+  background-size: cover;
+}
+.activationModal .text {
+  position: absolute;
+  left: 86rpx;
+  top: 190rpx;
+  font-size: 26rpx;
+  color: #FFE6D2;
+}
+.activationModal .save {
+  position: absolute;
+  top: 390rpx;
+  left: 90rpx;
+  width: 410rpx;
+  height: 80rpx;
+}
+.activationModal .close {
+  position: absolute;
+  padding: 40rpx;
+  width: 54rpx;
+  height: 54rpx;
+  left: 0;
+  right: 0;
+  bottom: -140rpx;
+  margin: auto;
+}

pages/my/index.js

@@ -1,260 +1,219 @@
 import {
-  getMyInfo,
-  buyVip,
-  getVipInfo,
-  getLearnCard
+    getMyInfo,
+    buyVip,
+    getVipInfo,
+    getLearnCard
 } from '~/api/user'
 import {
-  getProducts
+    getProducts
 } from '~/api/global'
 import {
-  createStoreBindings
+    createStoreBindings
 } from 'mobx-miniprogram-bindings'
 import {
-  store
+    store
 } from '~/store/index'
 const app = getApp()
 Page({
-  data: {
-    userInfo: {},
-    vipTime: '',
-    tasks: [],
-    isIos: app.globalData.isIOS,
-    /*     activationModal: true,
-        isPay: true, */
-    activationModal: false,
-    isPay: false,
-    activationRes: {},
-    products: []
-  },
-  onLoad() {
-    // 手工绑定 
-    this.storeBindings = createStoreBindings(this, {
-      store,
-      actions: {
-        setUser: 'setUser'
-      }
-    })
-    this.getProducts()
-    this.creatShare()
-  },
-  async onShow() {
-    if (typeof this.getTabBar === 'function') {
-      this.getTabBar().setData({
-        selected: 4
-      })
-    }
-    let uid = wx.getStorageSync('uid') || ''
-    if (!uid) {
-      getApp().callBack = (res) => {
-        this.setUserInfo()
-      }
-    } else {
-      this.setUserInfo()
-    }
-  },
-  // 设置用户信息及vip状态
-  async setUserInfo() {
-    let userInfo = await getMyInfo()
-    let vipTime = await getVipInfo()
-    console.log(vipTime);
-    this.setUser(userInfo.user)
-    this.setData({
-      userInfo,
-      vipTime,
-    })
-  },
-  async getProducts() {
-    let products = await getProducts()
-    console.log(products);
-    this.setData({
-      products,
-    })
-  },
-  activationCode() {
-    wx.showModal({
-      title: '请输入激活码',
-      editable: true,
-      success: async ({
-        confirm,
-        content
-      }) => {
-        if (confirm) {
-          let regexp = /^[a-zA-Z0-9]{4}$/
-          if (regexp.test(content)) {
-            let activationRes = await getLearnCard({
-              cardNo: content
-            })
-            console.log(activationRes);
-            if (activationRes.code == 200) {
-              activationRes = {
-                code: 200,
-                message: '快去朗读挑战吧！'
-              }
-            }
-            this.setUserInfo()
-            if (typeof this.getTabBar === 'function') {
-              this.getTabBar().setData({
-                mask: true
-              })
+    data: {
+        userInfo: {},
+        vipTime: '',
+        tasks: [],
+        isIos: app.globalData.isIOS,
+        /*     activationModal: true,
+         */
+        activationModal: false,
+        activationRes: {},
+        products: []
+    },
+    onLoad() {
+        // 手工绑定 
+        this.storeBindings = createStoreBindings(this, {
+            store,
+            actions: {
+                setUser: 'setUser'
             }
-            this.setData({
-              activationModal: true,
-              isPay: false,
-              activationRes
+        })
+        this.getProducts()
+        this.selectComponent('#vipModal').open({
+            type: 'vip'
+        })
+    },
+    async onShow() {
+        if (typeof this.getTabBar === 'function') {
+            this.getTabBar().setData({
+                selected: 4
             })
-          } else {
-            if (typeof this.getTabBar === 'function') {
-              this.getTabBar().setData({
-                mask: true
-              })
+        }
+        let uid = wx.getStorageSync('uid') || ''
+        if (!uid) {
+            getApp().callBack = (res) => {
+                this.setUserInfo()
             }
-            this.setData({
-              activationModal: true,
-              activationRes: {
-                code: 581,
-                message: '请检查激活码输入是否正确'
-              }
-            })
-          }
+        } else {
+            this.setUserInfo()
         }
-      }
-    })
-  },
-  async toBuy({
-    currentTarget
-  }) {
-    wx.showLoading({
-      title: '提交中',
-      mask: true
-    })
-    let res = await buyVip({
-      productId: currentTarget.dataset.id
-    }).finally(() => {
-      wx.hideLoading()
-    })
-    let {
-      timeStamp,
-      nonceStr,
-      signType,
-      paySign
-    } = res
-    // package保留字
-    wx.requestPayment({
-      timeStamp,
-      nonceStr,
-      package: res.package,
-      signType,
-      paySign,
-      success: (res) => {
-        console.log(res);
+    },
+    // 设置用户信息及vip状态
+    async setUserInfo() {
+        let userInfo = await getMyInfo()
+        let vipTime = await getVipInfo()
+        this.setUser(userInfo.user)
         this.setData({
-          activationModal: true
+            userInfo,
+            vipTime,
         })
-        setTimeout(() => {
-          this.setUserInfo()
-        }, 1500)
-      },
-      fail(res) {
-        wx.showToast({
-          title: "支付失败",
-          icon: "none",
-          duration: 3000
+    },
+    async getProducts() {
+        let products = await getProducts()
+        console.log(products);
+        this.setData({
+            products,
+        })
+    },
+    activationCode() {
+        wx.showModal({
+            title: '请输入激活码',
+            editable: true,
+            success: async ({
+                confirm,
+                content
+            }) => {
+                if (confirm) {
+                    let regexp = /^[a-zA-Z0-9]{4}$/
+                    if (regexp.test(content)) {
+                        let activationRes = await getLearnCard({
+                            cardNo: content
+                        })
+                        console.log(activationRes);
+                        if (activationRes.code == 200) {
+                            activationRes = {
+                                code: 200,
+                                message: '快去朗读挑战吧！'
+                            }
+                        }
+                        this.setUserInfo()
+                        if (typeof this.getTabBar === 'function') {
+                            this.getTabBar().setData({
+                                mask: true
+                            })
+                        }
+                        this.setData({
+                            activationModal: true,
+                            activationRes
+                        })
+                    } else {
+                        if (typeof this.getTabBar === 'function') {
+                            this.getTabBar().setData({
+                                mask: true
+                            })
+                        }
+                        this.setData({
+                            activationModal: true,
+                            activationRes: {
+                                code: 581,
+                                message: '请检查激活码输入是否正确'
+                            }
+                        })
+                    }
+                }
+            }
         })
-      }
-    })
-  },
-  jump({
-    currentTarget
-  }) {
-    let url = currentTarget.dataset.url
-    wx.navigateTo({
-      url: url
-    });
-    /*      wx.openChannelsUserProfile({
-           finderUserName: 'sphaBwcNkKMpmwi',
-           success: (res) => {
-             console.log(res);
-           },
-           fail: (res) => {
-             console.log(res);
-           }
-         }) */
-  },
-  clipboar() {
-    wx.setClipboardData({
-      data: this.data.userInfo.user.eid,
-      success: function (res) { //成功回调函数
-        wx.showToast({
-          title: '已复制',
-          icon: "none"
+    },
+    async toBuy({
+        currentTarget
+    }) {
+        wx.showLoading({
+            title: '提交中',
+            mask: true
         })
-      }
-    })
-  },
-  closeModal() {
-    this.setData({
-      activationModal: false
-    })
-    if (typeof this.getTabBar === 'function') {
-      this.getTabBar().setData({
-        mask: false
-      })
-    }
-  },
-  creatShare() {
-    let context = wx.createSelectorQuery();
-    context
-      .select('#vip')
-      .fields({
-        node: true,
-        size: true
-      }).exec((res) => {
-        const canvas = res[0].node;
-        const ctx = canvas.getContext('2d');
-        const dpr = wx.getSystemInfoSync().pixelRatio;
-        canvas.width = res[0].width * dpr;
-        canvas.height = res[0].height * dpr;
-        ctx.scale(dpr, dpr);
-        ctx.font = '20px PingFang';
-        let pic = canvas.createImage();
-        pic.src = 'http://reader-wx.ai160.com/images/reader/v3/learn/vip1.png'
-        pic.onload = () => {
-          ctx.drawImage(pic, 0, 0, 375, 201);
-          ctx.fillText('终身使用', 144, 135)
-          // ctx.fillStyle("#39029B");
-          ctx.fillStyle = 'red'
-          console.log(ctx);
-          setTimeout(() => {
-            wx.canvasToTempFilePath({
-              canvas: canvas,
-              success(res) {
-                /*    wx.saveImageToPhotosAlbum({
-                     filePath: res.tempFilePath,
-                     success(res) {}
-                   }) */
-              },
-              fail(res) {
-                console.log('fail', res);
-              }
-            }, this)
-          }, 500)
+        let res = await buyVip({
+            productId: currentTarget.dataset.id
+        }).finally(() => {
+            wx.hideLoading()
+        })
+        let {
+            timeStamp,
+            nonceStr,
+            signType,
+            paySign
+        } = res
+        // package保留字
+        wx.requestPayment({
+            timeStamp,
+            nonceStr,
+            package: res.package,
+            signType,
+            paySign,
+            success: (res) => {
+                console.log(res);
+                this.selectComponent('#vipModal').open({
+                    type: 'svip'
+                })
+                setTimeout(() => {
+                    this.setUserInfo()
+                }, 1500)
+            },
+            fail(res) {
+                wx.showToast({
+                    title: "支付失败",
+                    icon: "none",
+                    duration: 3000
+                })
+            }
+        })
+    },
+    jump({
+        currentTarget
+    }) {
+        let url = currentTarget.dataset.url
+        wx.navigateTo({
+            url: url
+        });
+        /*      wx.openChannelsUserProfile({
+               finderUserName: 'sphaBwcNkKMpmwi',
+               success: (res) => {
+                 console.log(res);
+               },
+               fail: (res) => {
+                 console.log(res);
+               }
+             }) */
+    },
+    clipboar() {
+        wx.setClipboardData({
+            data: this.data.userInfo.user.eid,
+            success: function (res) { //成功回调函数
+                wx.showToast({
+                    title: '已复制',
+                    icon: "none"
+                })
+            }
+        })
+    },
+    closeModal() {
+        this.setData({
+            activationModal: false
+        })
+        if (typeof this.getTabBar === 'function') {
+            this.getTabBar().setData({
+                mask: false
+            })
+        }
+    },
+    // 分享配置
+    onShareAppMessage: function (res) {
+        return {
+            title: '自从用了它，家里朗朗书声，美妙极了！你家孩子也快来试试！',
+            path: '/pages/index/index',
+            imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/375-300-1.jpg'
+        }
+    },
+    onShareTimeline: function () {
+        return {
+            title: '终于找到适合孩子的朗读神器了！动画配音，边玩边学！',
+            query: `uid=${wx.getStorageSync('uid')}`,
+            imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/yuwen.jpg'
         }
-      })
-  },
-  // 分享配置
-  onShareAppMessage: function (res) {
-    return {
-      title: '自从用了它，家里朗朗书声，美妙极了！你家孩子也快来试试！',
-      path: '/pages/index/index',
-      imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/375-300-1.jpg'
-    }
-  },
-  onShareTimeline: function () {
-    return {
-      title: '终于找到适合孩子的朗读神器了！动画配音，边玩边学！',
-      query: `uid=${wx.getStorageSync('uid')}`,
-      imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/yuwen.jpg'
-    }
-  },
+    },
 })

pages/my/index.json

@@ -1,6 +1,7 @@
 {
     "usingComponents": {
-        "navigationBar": "/components/navigationBar/index"
+        "navigationBar": "/components/navigationBar/index",
+        "vipModal": "/components/vipModal/index"
     },
     "navigationStyle": "custom",
     "enablePullDownRefresh": false

pages/my/index.less

@@ -1,311 +1,311 @@
 .container {
-  padding: 0rpx 20rpx 240rpx;
+    padding: 0rpx 20rpx 240rpx;
 
-  .userBox {
-    background-color: white;
-    padding: 20rpx 20rpx 0rpx;
-    border-radius: 20rpx;
+    .userBox {
+        background-color: white;
+        padding: 20rpx 20rpx 0rpx;
+        border-radius: 20rpx;
 
-    .above {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding-bottom: 30rpx;
-      border-bottom: 1rpx solid #D6D6D6;
+        .above {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding-bottom: 30rpx;
+            border-bottom: 1rpx solid #D6D6D6;
+
+            .identity {
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                text-align: center;
+
+                .avatar {
+                    width: 106rpx;
+                    height: 106rpx;
+                    border-radius: 50%;
+                    position: relative;
+                }
+
+                .identityText {
+                    position: absolute;
+                    bottom: -10rpx;
+                    width: 80rpx;
+                    font-size: 24rpx;
+                    color: white;
+                    background-color: #10CA61;
+                    border-radius: 25rpx;
+                }
+            }
 
-      .identity {
-        position: relative;
+            .userRight {
+                flex: 1;
+                margin-left: 40rpx;
+                padding: 0px 10rpx;
+
+                .uRtop {
+                    display: flex;
+                    justify-content: space-between;
+
+                    .uRtopleft {
+                        .nickName {
+                            margin: 10rpx 0rpx 18rpx;
+                            max-width: 340rpx;
+                            color: #333;
+                            font-size: 32rpx;
+                        }
+
+                        .gradeText {
+                            font-size: 24rpx;
+                            color: #989A9C;
+                        }
+                    }
+
+                    .uRtopRight {
+                        display: flex;
+                        align-items: center;
+
+                        .edit {
+                            width: 22rpx;
+                            height: 28rpx;
+                        }
+
+                        text {
+                            margin: 0px 10rpx;
+                            font-size: 24rpx;
+                            color: #666;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .below {
+        padding: 20rpx 0rpx;
         display: flex;
-        flex-direction: column;
         align-items: center;
-        text-align: center;
+        justify-content: space-between;
+        background-color: white;
+        border-radius: 20rpx;
 
-        .avatar {
-          width: 106rpx;
-          height: 106rpx;
-          border-radius: 50%;
-          position: relative;
-        }
+        .sBox {
+            width: 110rpx;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
 
-        .identityText {
-          position: absolute;
-          bottom: -10rpx;
-          width: 80rpx;
-          font-size: 24rpx;
-          color: white;
-          background-color: #10CA61;
-          border-radius: 25rpx;
-        }
-      }
+            .img {
+                width: 69rpx;
+                height: 69rpx;
+            }
 
-      .userRight {
-        flex: 1;
-        margin-left: 40rpx;
-        padding: 0px 10rpx;
-
-        .uRtop {
-          display: flex;
-          justify-content: space-between;
-
-          .uRtopleft {
-            .nickName {
-              margin: 10rpx 0rpx 18rpx;
-              max-width: 340rpx;
-              color: #333;
-              font-size: 32rpx;
+            .title {
+                margin-top: 8rpx;
+                font-size: 26rpx;
+                color: #333;
             }
 
-            .gradeText {
-              font-size: 24rpx;
-              color: #989A9C;
+            .noticeTips {
+                position: absolute;
+                right: 8rpx;
+                top: -8rpx;
+                width: 34rpx;
+                padding: 4rpx 0rpx;
+                border-radius: 40rpx;
+                color: white;
+                font-size: 18rpx;
+                text-align: center;
+                background-color: #FF0000;
             }
-          }
+        }
 
-          .uRtopRight {
+        .contactBtn {
+            border: none;
+            padding: 0rpx;
+            line-height: normal;
+            margin: 0;
+        }
+    }
+
+    .medalBox {
+        margin: 30rpx 0rpx;
+        padding: 20rpx 30rpx;
+        background-color: white;
+        border-radius: 20rpx;
+
+        .header {
             display: flex;
             align-items: center;
+            justify-content: space-between;
 
-            .edit {
-              width: 22rpx;
-              height: 28rpx;
+            .title {
+                font-size: 30rpx;
+                font-weight: bold;
+                color: #000;
             }
 
-            text {
-              margin: 0px 10rpx;
-              font-size: 24rpx;
-              color: #666;
+            .jump {
+                font-size: 26rpx;
+                color: #666666;
+
+                .jumpIcon {
+                    width: 12rpx;
+                    height: 22rpx;
+                }
             }
-          }
         }
-      }
-    }
-  }
-
-  .below {
-    padding: 20rpx 0rpx;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background-color: white;
-    border-radius: 20rpx;
-
-    .sBox {
-      width: 110rpx;
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
 
-      .img {
-        width: 69rpx;
-        height: 69rpx;
-      }
-
-      .title {
-        margin-top: 8rpx;
-        font-size: 26rpx;
-        color: #333;
-      }
+        .body {
+            margin-top: 20rpx;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
 
-      .noticeTips {
-        position: absolute;
-        right: 8rpx;
-        top: -8rpx;
-        width: 34rpx;
-        padding: 4rpx 0rpx;
-        border-radius: 40rpx;
-        color: white;
-        font-size: 18rpx;
-        text-align: center;
-        background-color: #FF0000;
-      }
+            .medal {
+                width: 112rpx;
+                height: 94rpx;
+            }
+        }
     }
 
-    .contactBtn {
-      border: none;
-      padding: 0rpx;
-      line-height: normal;
-      margin: 0;
-    }
-  }
-
-  .medalBox {
-    margin: 30rpx 0rpx;
-    padding: 20rpx 30rpx;
-    background-color: white;
-    border-radius: 20rpx;
-
-    .header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      .title {
-        font-size: 30rpx;
-        font-weight: bold;
-        color: #000;
-      }
+    .activation {
+        margin-top: 30rpx;
+        padding: 13rpx 40rpx;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background-color: white;
+        border-radius: 50rpx;
 
-      .jump {
-        font-size: 26rpx;
-        color: #666666;
+        .tips {
+            font-size: 28rpx;
+            color: #666666;
+        }
 
-        .jumpIcon {
-          width: 12rpx;
-          height: 22rpx;
+        .subBtn {
+            padding: 10rpx 50rpx;
+            border-radius: 50rpx;
+            color: white;
+            font-size: 25rpx;
+            background-color: #FC614E;
         }
-      }
     }
 
-    .body {
-      margin-top: 20rpx;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
 
-      .medal {
-        width: 112rpx;
-        height: 94rpx;
-      }
-    }
-  }
-
-  .activation {
-    margin-top: 30rpx;
-    padding: 13rpx 40rpx;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background-color: white;
-    border-radius: 50rpx;
-
-    .tips {
-      font-size: 28rpx;
-      color: #666666;
-    }
 
-    .subBtn {
-      padding: 10rpx 50rpx;
-      border-radius: 50rpx;
-      color: white;
-      font-size: 25rpx;
-      background-color: #FC614E;
+    .payBox {
+        position: relative;
+        margin-top: 36rpx;
+        width: 710rpx;
+        height: 224rpx;
+        border-radius: 20rpx;
+        background: url(http://reader-wx.ai160.com/images/reader/v3/learn/2-1.png);
+        background-size: cover;
+        -webkit-box-reflect: below 2rpx linear-gradient(to bottom, transparent 92%, rgba(0, 0, 0, 0.3));
+
+        .buyBtn {
+            width: 254rpx;
+            text-align: center;
+            position: absolute;
+            left: 90rpx;
+            top: 156rpx;
+            color: #39029B;
+            font-size: 26rpx;
+            font-weight: bold;
+            letter-spacing: 2rpx;
+        }
     }
-  }
-
-
-
-  .payBox {
-    position: relative;
-    margin-top: 36rpx;
-    width: 710rpx;
-    height: 224rpx;
-    border-radius: 20rpx;
-    background: url(http://reader-wx.ai160.com/images/reader/v3/learn/2-1.png);
-    background-size: cover;
-    -webkit-box-reflect: below 2rpx linear-gradient(to bottom, transparent 92%, rgba(0, 0, 0, 0.3));
 
-    .buyBtn {
-      width: 254rpx;
-      text-align: center;
-      position: absolute;
-      left: 90rpx;
-      top: 156rpx;
-      color: #39029B;
-      font-size: 26rpx;
-      font-weight: bold;
-      letter-spacing: 2rpx;
+    .payBox2 {
+        background: url(http://reader-wx.ai160.com/images/reader/v3/learn/2-2.png);
+        background-size: cover;
     }
-  }
-
-  .payBox2 {
-    background: url(http://reader-wx.ai160.com/images/reader/v3/learn/2-2.png);
-    background-size: cover;
-  }
 
-  .renewBox {
-    margin-top: 40rpx;
-    padding: 0rpx 10rpx;
+    .renewBox {
+        margin-top: 40rpx;
+        padding: 0rpx 10rpx;
 
-    .title {
-      font-size: 36rpx;
-      font-weight: bold;
-    }
+        .title {
+            font-size: 36rpx;
+            font-weight: bold;
+        }
 
-    .renew {
-      margin-top: 18rpx;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 19rpx 26rpx;
-      background-color: white;
-      border-radius: 50rpx;
-      font-size: 30rpx;
-
-      .left {
-        flex: 1;
-        margin-right: 40rpx;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        color: #666666;
+        .renew {
+            margin-top: 18rpx;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 19rpx 26rpx;
+            background-color: white;
+            border-radius: 50rpx;
+            font-size: 30rpx;
+
+            .left {
+                flex: 1;
+                margin-right: 40rpx;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                color: #666666;
+
+                .money {
+                    color: #FC614E;
+                }
+            }
 
-        .money {
-          color: #FC614E;
+            .pay {
+                padding: 6rpx 40rpx;
+                border-radius: 50rpx;
+                background-image: linear-gradient(129deg, #F9D9BF 0%, #F6D0B2 45%, #F3C0A3 70%, #F1B998 100%);
+            }
         }
-      }
-
-      .pay {
-        padding: 6rpx 40rpx;
-        border-radius: 50rpx;
-        background-image: linear-gradient(129deg, #F9D9BF 0%, #F6D0B2 45%, #F3C0A3 70%, #F1B998 100%);
-      }
     }
-  }
-
-  .activationModal {
-    position: fixed;
-    z-index: 2;
-    left: 0rpx;
-    top: 0rpx;
-    width: 100vw;
-    height: 100vh;
-    background: rgba(0, 0, 0, 0.7);
-
-    .box {
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 30%;
-      margin: auto;
-      width: 496rpx;
-      height: 365rpx;
-      background-color: white;
-      border-radius: 20rpx;
-      text-align: center;
-
 
-      .sLcon {
-        margin-top: 34rpx;
-        width: 100rpx;
-        height: 100rpx;
-      }
+    .activationModal {
+        position: fixed;
+        z-index: 2;
+        left: 0rpx;
+        top: 0rpx;
+        width: 100vw;
+        height: 100vh;
+        background: rgba(0, 0, 0, 0.7);
+
+        .box {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 30%;
+            margin: auto;
+            width: 496rpx;
+            height: 365rpx;
+            background-color: white;
+            border-radius: 20rpx;
+            text-align: center;
+
+
+            .sLcon {
+                margin-top: 34rpx;
+                width: 100rpx;
+                height: 100rpx;
+            }
 
-      .tips1 {
-        margin: 36rpx 0rpx 24rpx;
-        color: #131313;
-        font-weight: bold;
-        font-size: 34rpx;
-      }
+            .tips1 {
+                margin: 36rpx 0rpx 24rpx;
+                color: #131313;
+                font-weight: bold;
+                font-size: 34rpx;
+            }
 
-      .tips2 {
-        font-size: 30rpx;
-        color: #12C962;
-      }
+            .tips2 {
+                font-size: 30rpx;
+                color: #12C962;
+            }
 
-    }
+        }
 
-    .vipModal {
+        /* .vipModal {
       position: relative;
       left: 0;
       right: 0;
@@ -318,17 +318,17 @@
         width: 600rpx;
       }
     }
+ */
+        .close {
+            position: absolute;
+            padding: 40rpx;
+            width: 54rpx;
+            height: 54rpx;
+            left: 0;
+            right: 0;
+            bottom: -140rpx;
+            margin: auto;
+        }
 
-    .close {
-      position: absolute;
-      padding: 40rpx;
-      width: 54rpx;
-      height: 54rpx;
-      left: 0;
-      right: 0;
-      bottom: -140rpx;
-      margin: auto;
     }
-
-  }
 }

pages/my/index.wxml

@@ -1,52 +1,52 @@
 <wxs src="../../utils/filter.wxs" module="filters" />
 <navigationBar></navigationBar>
 <view class="container">
-  <!-- 用户信息 -->
-  <view class="userBox">
-    <view class="above" bindtap="jump" data-url="/pages/editUser/index">
-      <view class="identity">
-        <image class='avatar' src='{{ userInfo.user.avatar}}'></image>
-        <view class="identityText">{{ userInfo.user.profession}}</view>
-      </view>
-      <view class="userRight">
-        <view class="uRtop">
-          <view class="uRtopleft">
-            <view class="nickName textOver">{{userInfo.user.nickName||'请输入昵称' }}</view>
-            <view class="gradeText textOver" catchtap="clipboar">学号：{{userInfo.user.eid}}</view>
-          </view>
-          <view class="uRtopRight">
-            <image class="edit" src="/static/edit_new.png" mode="" />
-            <text>编辑</text>
-          </view>
+    <!-- 用户信息 -->
+    <view class="userBox">
+        <view class="above" bindtap="jump" data-url="/pages/editUser/index">
+            <view class="identity">
+                <image class='avatar' src='{{ userInfo.user.avatar}}'></image>
+                <view class="identityText">{{ userInfo.user.profession}}</view>
+            </view>
+            <view class="userRight">
+                <view class="uRtop">
+                    <view class="uRtopleft">
+                        <view class="nickName textOver">{{userInfo.user.nickName||'请输入昵称' }}</view>
+                        <view class="gradeText textOver" catchtap="clipboar">学号：{{userInfo.user.eid}}</view>
+                    </view>
+                    <view class="uRtopRight">
+                        <image class="edit" src="/static/edit_new.png" mode="" />
+                        <text>编辑</text>
+                    </view>
+                </view>
+            </view>
         </view>
-      </view>
-    </view>
-    <view class="below sectionBoxs">
-      <view class="sBox" bindtap='jump' data-url="/pages/friend/index">
-        <view class="noticeTips" wx:if="{{userInfo.newFansCount>0}}">{{userInfo.newFansCount}}</view>
-        <image class="img" src="/static/concern.png" mode="" />
-        <text class="title">朋友 {{filters.numFilter(userInfo.friendCount)}}</text>
-      </view>
-      <view class="sBox" bindtap='jump' data-url="/pages/userWorks/index">
-        <view class="noticeTips" wx:if="{{userInfo.unReadPostsCount>0}}">{{userInfo.unReadPostsCount}}</view>
-        <image class="img" src="/static/work.png" mode="" />
-        <text class="title">作品 {{filters.numFilter(userInfo.readAmount)}}</text>
-      </view>
-      <view class="sBox" bindtap='jump' data-url="/pages/notice/index">
-        <view class="noticeTips" wx:if="{{userInfo.user.messageCount>0}}">{{userInfo.user.messageCount}}</view>
-        <image class="img" src="/static/message3.png" mode="" />
-        <text class="title">消息通知</text>
-      </view>
-      <button class="resetBtn contactBtn" open-type="contact" plain="true">
-        <view class="sBox">
-          <image class="img" src="/static/contact.png" mode="" />
-          <text class="title">联系客服</text>
+        <view class="below sectionBoxs">
+            <view class="sBox" bindtap='jump' data-url="/pages/friend/index">
+                <view class="noticeTips" wx:if="{{userInfo.newFansCount>0}}">{{userInfo.newFansCount}}</view>
+                <image class="img" src="/static/concern.png" mode="" />
+                <text class="title">朋友 {{filters.numFilter(userInfo.friendCount)}}</text>
+            </view>
+            <view class="sBox" bindtap='jump' data-url="/pages/userWorks/index">
+                <view class="noticeTips" wx:if="{{userInfo.unReadPostsCount>0}}">{{userInfo.unReadPostsCount}}</view>
+                <image class="img" src="/static/work.png" mode="" />
+                <text class="title">作品 {{filters.numFilter(userInfo.readAmount)}}</text>
+            </view>
+            <view class="sBox" bindtap='jump' data-url="/pages/notice/index">
+                <view class="noticeTips" wx:if="{{userInfo.user.messageCount>0}}">{{userInfo.user.messageCount}}</view>
+                <image class="img" src="/static/message3.png" mode="" />
+                <text class="title">消息通知</text>
+            </view>
+            <button class="resetBtn contactBtn" open-type="contact" plain="true">
+                <view class="sBox">
+                    <image class="img" src="/static/contact.png" mode="" />
+                    <text class="title">联系客服</text>
+                </view>
+            </button>
         </view>
-      </button>
     </view>
-  </view>
-  <!-- 勋章 -->
-  <!--   <view class="medalBox">
+    <!-- 勋章 -->
+    <!--   <view class="medalBox">
     <view class="header">
       <view class="title">我的勋章</view>
       <view class="jump" bindtap='jump' data-url="/pages/medalStore/index">查看全部
@@ -57,49 +57,45 @@
       <image src="/static/concern.png" class="medal" wx:for="{{5}}" wx:key="index" />
     </view>
   </view> -->
-  <!-- 激活码 -->
-  <view class="activation" bindtap="activationCode" wx:if="{{vipTime!='1'}}">
-    <view class="tips">请输入学习卡激活码</view>
-    <view class="subBtn">激活</view>
-  </view>
-
-  <view class="payBox" wx:if="{{!vipTime||vipTime=='1'}}">
-    <view class="buyBtn" bindtap="toBuy" data-id="{{products[0].id}}">
-      {{ !vipTime?'立即开通':'终身使用'}}
-    </view>
-  </view>
-  <view class="payBox payBox2" wx:if="{{vipTime!='1'}}">
-    <view class="buyBtn" bindtap="toBuy" data-id="{{products[1].id}}" wx:if="{{!vipTime}}">立即开通
-    </view>
-    <view class="buyBtn" style="font-size: 22rpx;" wx:else>
-      有效期：{{filters.formatDate(vipTime,5)}}
+    <!-- 激活码 -->
+    <view class="activation" bindtap="activationCode" wx:if="{{vipTime!='1'}}">
+        <view class="tips">请输入学习卡激活码</view>
+        <view class="subBtn">激活</view>
     </view>
-  </view>
-  <view class="renewBox" wx:if="{{vipTime&&vipTime!='1'}}">
-    <view class="title">续费</view>
-    <view class="renew">
-      <view class="left">升级成svlp会员终身的 <view class="money">+200元</view>
-      </view>
-      <view class="pay">购买</view>
+
+    <view class="payBox" wx:if="{{!vipTime||vipTime=='1'}}">
+        <view class="buyBtn" bindtap="toBuy" data-id="{{products[0].id}}">
+            {{ !vipTime?'立即开通':'终身使用'}}
+        </view>
     </view>
-    <view class="renew">
-      <view class="left">{{products[1].title}} <view class="money">{{products[1].price/100}}元</view>
-      </view>
-      <view class="pay" bindtap="toBuy" data-id="{{products[1].id}}">续费</view>
+    <view class="payBox payBox2" wx:if="{{vipTime!='1'}}">
+        <view class="buyBtn" bindtap="toBuy" data-id="{{products[1].id}}" wx:if="{{!vipTime}}">立即开通
+        </view>
+        <view class="buyBtn" style="font-size: 22rpx;" wx:else>
+            有效期：{{filters.formatDate(vipTime,5)}}
+        </view>
     </view>
-  </view>
-  <!-- 弹窗 -->
-  <view class="activationModal" wx:if="{{activationModal}}">
-    <view class="box zoomIn" wx:if="{{!isPay}}">
-      <image src="{{activationRes.code==200?'/static/lan.png':'/static/df.png'}}" class="sLcon" />
-      <view class="tips1">{{activationRes.code==200?'恭喜您，激活成功':'很遗憾，激活失败'}}</view>
-      <view class="tips2">{{activationRes.message}}</view>
-      <image src="/static/lollipop.png" class="close" catchtap="closeModal" />
+    <view class="renewBox" wx:if="{{vipTime&&vipTime!='1'}}">
+        <view class="title">续费</view>
+        <view class="renew">
+            <view class="left">升级成svlp会员终身的 <view class="money">+200元</view>
+            </view>
+        </view>
+        <view class="renew">
+            <view class="left">{{products[1].title}} <view class="money">{{products[1].price/100}}元</view>
+            </view>
+            <view class="pay" bindtap="toBuy" data-id="{{products[1].id}}">续费</view>
+        </view>
     </view>
-    <view class="vipModal" wx:if="{{isPay}}">
-      <image src="/static/vipModal.png" class="mBg" />
-      <image src="/static/lollipop.png" class="close" catchtap="closeModal" />
+    <!-- 弹窗 -->
+    <view class="activationModal" wx:if="{{activationModal}}">
+        <view class="box zoomIn">
+            <image src="{{activationRes.code==200?'/static/lan.png':'/static/df.png'}}" class="sLcon" />
+            <view class="tips1">{{activationRes.code==200?'恭喜您，激活成功':'很遗憾，激活失败'}}</view>
+            <view class="tips2">{{activationRes.message}}</view>
+            <image src="/static/lollipop.png" class="close" catchtap="closeModal" />
+        </view>
     </view>
-  </view>
-  <canvas id='vip' type="2d"> </canvas>
+    <vipModal id="vipModal"></vipModal>
+    <canvas id='vip' type="2d"> </canvas>
 </view>

pages/my/index.wxss

@@ -230,6 +230,20 @@
   width: 100vw;
   height: 100vh;
   background: rgba(0, 0, 0, 0.7);
+  /* .vipModal {
+      position: relative;
+      left: 0;
+      right: 0;
+      top: 30%;
+      margin: auto;
+      border-radius: 20rpx;
+      text-align: center;
+
+      .mBg {
+        width: 600rpx;
+      }
+    }
+ */
 }
 .container .activationModal .box {
   position: absolute;
@@ -258,18 +272,6 @@
   font-size: 30rpx;
   color: #12C962;
 }
-.container .activationModal .vipModal {
-  position: relative;
-  left: 0;
-  right: 0;
-  top: 30%;
-  margin: auto;
-  border-radius: 20rpx;
-  text-align: center;
-}
-.container .activationModal .vipModal .mBg {
-  width: 600rpx;
-}
 .container .activationModal .close {
   position: absolute;
   padding: 40rpx;

pages/pkResult/index.js

@@ -1,278 +1,278 @@
 import {
-  getPkResult
+    getPkResult
 } from '~/api/works'
 import {
-  setDuration
+    setDuration
 } from '~/utils/util'
 import {
-  userEvent
+    userEvent
 } from '~/api/global'
 let innerAudioContext
 Page({
-  /**
-   * 页面的初始数据
-   */
-  data: {
-    pkId: '',
-    pkRecord: {},
-    vState: false,
-    vStart: '00:00',
-    vEnd: '00:00',
-    vProgress: 0,
-    dState: false,
-    dStart: '00:00',
-    dEnd: '00:00',
-    dProgress: 0,
-    currentType: '',
-    victory: {},
-    defeated: {},
-    equal: false,
-    // 是否是分享进来的
-    isPlayback: false
-  },
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  async onLoad(options) {
-    let {
-      pkRecord,
-      pkRecordVOS
-    } = await getPkResult(options.id)
-    this.setData({
-      pkId: options.id,
-      pkRecord,
-      isplayback: options.playback || false
-    })
-    this.compareScore(pkRecordVOS)
-    this.innerAudioContext = wx.createInnerAudioContext()
-    await userEvent({
-      action: 'WXPKSCORE',
-    })
-  },
-  compareScore(resultData) {
-    let first = resultData[0]
-    let second = resultData[1]
-    let victory = first.userRead.score > second.userRead.score ? first : second
-    let defeated = second.userRead.score < first.userRead.score ? second : first
-    this.setData({
-      equal: first.userRead.score == second.userRead.score,
-      victory: first.userRead.score > second.userRead.score ? first : second,
-      defeated,
-      vEnd: setDuration(victory.userRead.duration),
-      dEnd: setDuration(defeated.userRead.duration),
-    })
-  },
-  playAudio({
-    currentTarget
-  }) {
-    let type = currentTarget.dataset.type
-    // 重置音频对象
-    if (type != this.data.currentType) {
-      this.innerAudioContext.stop();
-    }
-    // 处理音频播放
-    if (type == 'victory' && !this.data.vState) {
-      if (this.data.currentType != 'victory') {
-        this.innerAudioContext.src = this.data.victory.userRead.audioPath
-      }
-      this.setData({
-        vState: true,
-        dState: false
-      })
-    } else if (type == 'victory' && this.data.vState) {
-      this.innerAudioContext.pause();
-      return this.setData({
-        vState: false
-      })
-    } else if (type == 'defeated' && !this.data.dState) {
-      if (this.data.currentType != 'defeated') {
-        this.innerAudioContext.src = this.data.defeated.userRead.audioPath;
-      }
-      this.setData({
-        dState: true,
-        vState: false
-      })
-    } else if (type == 'defeated' && this.data.dState) {
-      this.innerAudioContext.pause();
-      return this.setData({
-        dState: false
-      })
-    }
-    this.setData({
-      currentType: type
-    })
-    // this.innerAudioContext.onCanplay(() => {
-    this.innerAudioContext.play();
-    // })
-    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)
-      })
-    })
-  },
-  result({
-    currentTarget
-  }) {
-    if (currentTarget.dataset.type == 'reading') {
-      wx.redirectTo({
-        url: `/pages/reading/index?videoId=${this.data.victory.userRead.exampleId}&readingType=pk`,
-      })
-    } else if (currentTarget.dataset.type == 'index') {
-      wx.switchTab({
-        url: '/pages/index/index',
-      })
-    } else {
-      wx.redirectTo({
-        url: `/pages/pkPage/index?videoId=${this.data.pkRecord.challengerUserReadId}&isShare=true`,
-      })
-    }
-  },
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload() {
-    this.innerAudioContext.destroy()
-  },
-  creatShare() {
-    return new Promise((resolve, reject) => {
-      let context = wx.createSelectorQuery();
-      context
-        .select('#share')
-        .fields({
-          node: true,
-          size: true
-        }).exec((res) => {
-          const canvas = res[0].node;
-          const ctx = canvas.getContext('2d');
-          const dpr = wx.getSystemInfoSync().pixelRatio;
-          canvas.width = res[0].width * dpr;
-          canvas.height = res[0].height * dpr;
-          ctx.scale(dpr, dpr);
-          ctx.font = '16px PingFang';
-          let bgImg = canvas.createImage();
-          bgImg.src = this.data.equal ? 'https://reader-wx.ai160.com/images/reader/v3/equal.png' : 'https://reader-wx.ai160.com/images/reader/v3/victory.png'
-          bgImg.onload = () => {
-            ctx.drawImage(bgImg, 0, 0, 375, 300);
-            ctx.textAlign = "center";
-            var lnamex = this.data.equal ? 100 : 100,
-              lnamey = this.data.equal ? 125 : 115;
-            var vName = this.data.victory.user.nickName || this.data.victory.user.eid
-            if (vName.length > 4) {
-              vName = vName.slice(0, 4) + '...'
-            }
-            ctx.fillText(vName, lnamex, lnamey)
-            var rnamex = this.data.equal ? 280 : 280,
-              rnamey = this.data.equal ? 125 : 140;
-            var dName = this.data.defeated.user.nickName || this.data.defeated.user.eid
-            if (dName.length > 4) {
-              dName = dName.slice(0, 4) + '...'
-            }
-            ctx.fillText(dName, rnamex, rnamey)
-            ctx.font = '19px PingFang';
-            var lnumx = this.data.equal ? 100 : 100,
-              lnumy = this.data.equal ? 150 : 140;
-            ctx.fillText(this.data.victory.userRead.score + '分', lnumx, lnumy)
-            var rnumx = this.data.equal ? 280 : 280,
-              rnumy = this.data.equal ? 150 : 165;
-            ctx.fillText(this.data.defeated.userRead.score + '分', rnumx, rnumy)
-            ctx.font = '13px PingFang';
-            var ltimex = this.data.equal ? 136 : 136,
-              ltimey = this.data.equal ? 252.5 : 239.5;
-            ctx.fillText(this.data.vEnd, ltimex, ltimey)
-            var rtimex = this.data.equal ? 320 : 320,
-              rtimey = this.data.equal ? 253 : 267;
-            ctx.fillText(this.data.dEnd, rtimex, rtimey)
-            // 圆形位置 大小
-            var size = 55;
-            var lx = this.data.equal ? 71 : 72,
-              ly = this.data.equal ? 45 : 38;
-            var rx = this.data.equal ? 252 : 247,
-              ry = this.data.equal ? 45 : 60;
-            ctx.save(); // 保存
-            ctx.arc(size / 2 + lx, size / 2 + ly, size / 2, 0, Math.PI * 2, false);
-            ctx.arc(size / 2 + rx, size / 2 + ry, size / 2, 0, Math.PI * 2, false);
-            ctx.clip();
-            let leftImg = canvas.createImage();
-            leftImg.src = this.data.victory.user.avatar
-            leftImg.onerror = () => {
-              loadRightImg()
-            }
-            leftImg.onload = () => {
-              ctx.drawImage(leftImg, lx, ly, size, size)
-              loadRightImg()
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        pkId: '',
+        pkRecord: {},
+        vState: false,
+        vStart: '00:00',
+        vEnd: '00:00',
+        vProgress: 0,
+        dState: false,
+        dStart: '00:00',
+        dEnd: '00:00',
+        dProgress: 0,
+        currentType: '',
+        victory: {},
+        defeated: {},
+        equal: false,
+        // 是否是分享进来的
+        isPlayback: false
+    },
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    async onLoad(options) {
+        let {
+            pkRecord,
+            pkRecordVOS
+        } = await getPkResult(options.id)
+        this.setData({
+            pkId: options.id,
+            pkRecord,
+            isplayback: options.playback || false
+        })
+        this.compareScore(pkRecordVOS)
+        this.innerAudioContext = wx.createInnerAudioContext()
+        await userEvent({
+            action: 'WXPKSCORE',
+        })
+    },
+    compareScore(resultData) {
+        let first = resultData[0]
+        let second = resultData[1]
+        let victory = first.userRead.score > second.userRead.score ? first : second
+        let defeated = second.userRead.score < first.userRead.score ? second : first
+        this.setData({
+            equal: first.userRead.score == second.userRead.score,
+            victory: first.userRead.score > second.userRead.score ? first : second,
+            defeated,
+            vEnd: setDuration(victory.userRead.duration),
+            dEnd: setDuration(defeated.userRead.duration),
+        })
+    },
+    playAudio({
+        currentTarget
+    }) {
+        let type = currentTarget.dataset.type
+        // 重置音频对象
+        if (type != this.data.currentType) {
+            this.innerAudioContext.stop();
+        }
+        // 处理音频播放
+        if (type == 'victory' && !this.data.vState) {
+            if (this.data.currentType != 'victory') {
+                this.innerAudioContext.src = this.data.victory.userRead.audioPath
             }
-            let loadRightImg = () => {
-              let rightImg = canvas.createImage();
-              rightImg.src = this.data.defeated.user.avatar
-              rightImg.onload = () => {
-                ctx.drawImage(rightImg, rx, ry, size, size)
-                setTimeout(() => {
-                  wx.canvasToTempFilePath({
-                    canvas: canvas,
-                    success: (res) => {
-                      let userName = this.data.pkRecord.userReadId == this.data.victory.userRead.id ? this.data.victory.user.nickName || this.data.victory.user.eid : this.data.defeated.user.nickName || this.data.defeated.user.eid
-                      if (userName.length > 4) {
-                        userName = userName.slice(0, 4) + '...'
-                      }
-                      resolve({
-                        title: `我挑战了${userName}的作品，这场比拼真精彩！点击加入战局！`,
-                        path: `/pages/pkResult/index?id=${this.data.pkId}&uid=${wx.getStorageSync('uid')}&playback=true`,
-                        imageUrl: res.tempFilePath
-                      })
-                    },
-                    fail(res) {
-                      reject()
-                    }
-                  }, this)
-                }, 500)
-              }
-              rightImg.onerror = () => {
-                setTimeout(() => {
-                  wx.canvasToTempFilePath({
-                    canvas: canvas,
-                    success(res) {
-                      resolve({
-                        title: '我的新作品发布啦，快来捧场点赞！',
-                        path: `/pages/pkResult/index?uid=${wx.getStorageSync('uid')}`,
-                        imageUrl: res.tempFilePath
-                      })
-                    },
-                    fail(res) {
-                      reject()
-                    }
-                  }, this)
-                }, 500)
-              }
+            this.setData({
+                vState: true,
+                dState: false
+            })
+        } else if (type == 'victory' && this.data.vState) {
+            this.innerAudioContext.pause();
+            return this.setData({
+                vState: false
+            })
+        } else if (type == 'defeated' && !this.data.dState) {
+            if (this.data.currentType != 'defeated') {
+                this.innerAudioContext.src = this.data.defeated.userRead.audioPath;
             }
-          }
+            this.setData({
+                dState: true,
+                vState: false
+            })
+        } else if (type == 'defeated' && this.data.dState) {
+            this.innerAudioContext.pause();
+            return this.setData({
+                dState: false
+            })
+        }
+        this.setData({
+            currentType: type
+        })
+        // this.innerAudioContext.onCanplay(() => {
+        this.innerAudioContext.play();
+        // })
+        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)
+            })
         })
-    })
-  },
-  onShareAppMessage({
-    from,
-    target
-  }) {
-    if (from == 'button') {
-      const promise = new Promise(resolve => {
-        this.creatShare().then(res => {
-          resolve(res)
+    },
+    result({
+        currentTarget
+    }) {
+        if (currentTarget.dataset.type == 'reading') {
+            wx.redirectTo({
+                url: `/pages/reading/index?videoId=${this.data.victory.userRead.exampleId}&readingType=pk`,
+            })
+        } else if (currentTarget.dataset.type == 'index') {
+            wx.switchTab({
+                url: '/pages/index/index',
+            })
+        } else {
+            wx.redirectTo({
+                url: `/pages/pkPage/index?videoId=${this.data.pkRecord.challengerUserReadId}&isShare=true`,
+            })
+        }
+    },
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+        this.innerAudioContext.destroy()
+    },
+    creatShare() {
+        return new Promise((resolve, reject) => {
+            let context = wx.createSelectorQuery();
+            context
+                .select('#share')
+                .fields({
+                    node: true,
+                    size: true
+                }).exec((res) => {
+                    const canvas = res[0].node;
+                    const ctx = canvas.getContext('2d');
+                    const dpr = wx.getSystemInfoSync().pixelRatio;
+                    canvas.width = res[0].width * dpr;
+                    canvas.height = res[0].height * dpr;
+                    ctx.scale(dpr, dpr);
+                    ctx.font = '16px PingFang';
+                    let bgImg = canvas.createImage();
+                    bgImg.src = this.data.equal ? 'https://reader-wx.ai160.com/images/reader/v3/equal.png' : 'https://reader-wx.ai160.com/images/reader/v3/victory.png'
+                    bgImg.onload = () => {
+                        ctx.drawImage(bgImg, 0, 0, 375, 300);
+                        ctx.textAlign = "center";
+                        var lnamex = this.data.equal ? 100 : 100,
+                            lnamey = this.data.equal ? 125 : 115;
+                        var vName = this.data.victory.user.nickName || this.data.victory.user.eid
+                        if (vName.length > 4) {
+                            vName = vName.slice(0, 4) + '...'
+                        }
+                        ctx.fillText(vName, lnamex, lnamey)
+                        var rnamex = this.data.equal ? 280 : 280,
+                            rnamey = this.data.equal ? 125 : 140;
+                        var dName = this.data.defeated.user.nickName || this.data.defeated.user.eid
+                        if (dName.length > 4) {
+                            dName = dName.slice(0, 4) + '...'
+                        }
+                        ctx.fillText(dName, rnamex, rnamey)
+                        ctx.font = '19px PingFang';
+                        var lnumx = this.data.equal ? 100 : 100,
+                            lnumy = this.data.equal ? 150 : 140;
+                        ctx.fillText(this.data.victory.userRead.score + '分', lnumx, lnumy)
+                        var rnumx = this.data.equal ? 280 : 280,
+                            rnumy = this.data.equal ? 150 : 165;
+                        ctx.fillText(this.data.defeated.userRead.score + '分', rnumx, rnumy)
+                        ctx.font = '13px PingFang';
+                        var ltimex = this.data.equal ? 136 : 136,
+                            ltimey = this.data.equal ? 252.5 : 239.5;
+                        ctx.fillText(this.data.vEnd, ltimex, ltimey)
+                        var rtimex = this.data.equal ? 320 : 320,
+                            rtimey = this.data.equal ? 253 : 267;
+                        ctx.fillText(this.data.dEnd, rtimex, rtimey)
+                        // 圆形位置 大小
+                        var size = 55;
+                        var lx = this.data.equal ? 71 : 72,
+                            ly = this.data.equal ? 45 : 38;
+                        var rx = this.data.equal ? 252 : 247,
+                            ry = this.data.equal ? 45 : 60;
+                        ctx.save(); // 保存
+                        ctx.arc(size / 2 + lx, size / 2 + ly, size / 2, 0, Math.PI * 2, false);
+                        ctx.arc(size / 2 + rx, size / 2 + ry, size / 2, 0, Math.PI * 2, false);
+                        ctx.clip();
+                        let leftImg = canvas.createImage();
+                        leftImg.src = this.data.victory.user.avatar
+                        leftImg.onerror = () => {
+                            loadRightImg()
+                        }
+                        leftImg.onload = () => {
+                            ctx.drawImage(leftImg, lx, ly, size, size)
+                            loadRightImg()
+                        }
+                        let loadRightImg = () => {
+                            let rightImg = canvas.createImage();
+                            rightImg.src = this.data.defeated.user.avatar
+                            rightImg.onload = () => {
+                                ctx.drawImage(rightImg, rx, ry, size, size)
+                                setTimeout(() => {
+                                    wx.canvasToTempFilePath({
+                                        canvas: canvas,
+                                        success: (res) => {
+                                            let userName = this.data.pkRecord.userReadId == this.data.victory.userRead.id ? this.data.victory.user.nickName || this.data.victory.user.eid : this.data.defeated.user.nickName || this.data.defeated.user.eid
+                                            if (userName.length > 4) {
+                                                userName = userName.slice(0, 4) + '...'
+                                            }
+                                            resolve({
+                                                title: `我挑战了${userName}的作品，这场比拼真精彩！点击加入战局！`,
+                                                path: `/pages/pkResult/index?id=${this.data.pkId}&uid=${wx.getStorageSync('uid')}&playback=true`,
+                                                imageUrl: res.tempFilePath
+                                            })
+                                        },
+                                        fail(res) {
+                                            reject()
+                                        }
+                                    }, this)
+                                }, 500)
+                            }
+                            rightImg.onerror = () => {
+                                setTimeout(() => {
+                                    wx.canvasToTempFilePath({
+                                        canvas: canvas,
+                                        success(res) {
+                                            resolve({
+                                                title: '我的新作品发布啦，快来捧场点赞！',
+                                                path: `/pages/pkResult/index?uid=${wx.getStorageSync('uid')}`,
+                                                imageUrl: res.tempFilePath
+                                            })
+                                        },
+                                        fail(res) {
+                                            reject()
+                                        }
+                                    }, this)
+                                }, 500)
+                            }
+                        }
+                    }
+                })
         })
-      })
-      return {
-        title: '自从用了它，家里朗朗书声，美妙极了！你家孩子也快来试试！',
-        path: `/pages/index/index?uid=${wx.getStorageSync('uid')}`,
-        imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/375-300-1.jpg',
-        promise
-      }
-    } else {
-      return {
-        title: '自从用了它，家里朗朗书声，美妙极了！你家孩子也快来试试！',
-        path: `/pages/index/index?uid=${wx.getStorageSync('uid')}`,
-        imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/375-300-1.jpg'
-      }
-    }
-  },
+    },
+    onShareAppMessage({
+        from,
+        target
+    }) {
+        if (from == 'button') {
+            const promise = new Promise(resolve => {
+                this.creatShare().then(res => {
+                    resolve(res)
+                })
+            })
+            return {
+                title: '自从用了它，家里朗朗书声，美妙极了！你家孩子也快来试试！',
+                path: `/pages/index/index?uid=${wx.getStorageSync('uid')}`,
+                imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/375-300-1.jpg',
+                promise
+            }
+        } else {
+            return {
+                title: '自从用了它，家里朗朗书声，美妙极了！你家孩子也快来试试！',
+                path: `/pages/index/index?uid=${wx.getStorageSync('uid')}`,
+                imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/375-300-1.jpg'
+            }
+        }
+    },
 })

pages/reading/index.js

@@ -472,6 +472,7 @@ Page({
           userReadId: this.data.pkData.id,
           winnerUId: this.data.pkData.score > _data.myOverall ? this.data.pkData.uid : this.data.pkData.score == _data.myOverall ? '' : wx.getStorageSync('uid')
         }
+        console.log('data----',this.data.pkData.score , _data.myOverall ,data);
         let result = await uploadPk(data)
         await userEvent({
           action: 'WXPKUPLOAD',