开发

components/activityList/index.js

@@ -109,5 +109,9 @@ Component({
         })
       }
     },
+    drawVoucher() {
+      console.log(this.selectComponent('#voucher'));
+      this.selectComponent('#voucher').open()
+    }
   }
 })

components/activityList/index.wxml

@@ -15,7 +15,7 @@
           <view class="outNum">{{item.second}}</view>
         </view>
       </view>
-      <view class="btn {{item.second=='00'?'closingBtn':''}}">立即参与</view>
+      <view class="btn {{item.second=='00'?'closingBtn':''}}" bindtap="drawVoucher">立即领取</view>
     </view>
   </view>
   <block wx:for="{{activityList}}" wx:key="id">
@@ -99,4 +99,4 @@
     </view>
   </block>
 </view>
-<Voucher />
+<Voucher id="voucher" />

components/readingTips/index.less

@@ -1,221 +1,221 @@
 /*使屏幕变暗  */
 .background_screen {
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    background: #000;
-    opacity: 0.4;
-    overflow: hidden;
-    z-index: 99;
-    color: #fff;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: #000;
+  opacity: 0.4;
+  overflow: hidden;
+  z-index: 99;
+  color: #fff;
 }
 
 /*对话框 */
 .attr_box {
-    width: 100%;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    z-index: 99;
-    background-image: linear-gradient(180deg, #FFEBC1 1%, #FEEFCD 54%, #FFFCF0 100%);
-    border-radius: 40px 40px 0 0;
-    border-radius: 40px 40px 0px 0px;
-    border-top-left-radius: 30rpx;
-    border-top-right-radius: 30rpx;
-    padding: 29rpx 18rpx;
-    box-sizing: border-box;
-    /*兼容 IOS<11.2*/
-    padding-bottom: constant(safe-area-inset-bottom);
-    /*兼容 IOS>11.2*/
-    padding-bottom: env(safe-area-inset-bottom);
-
-
-    .payBox {
-        margin-top: 20rpx;
-        padding: 13rpx 30rpx;
-        background-color: white;
-        border-radius: 20rpx;
-
-        .title {
-            font-size: 34rpx;
-            font-weight: bold;
-            color: #000;
-        }
-
-        .pay {
-            margin: 20rpx 0rpx;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0rpx 30rpx;
-            border-radius: 22rpx;
-            overflow: hidden;
-
-            .payLeft {
-                .pLTitle {
-                    font-size: 36rpx;
-                    font-weight: bold;
-                }
-
-                .pLcontent {
-                    font-size: 22rpx;
-                }
-            }
-
-            .payRight {
-                margin: 24rpx 0rpx;
-                padding: 12rpx 28rpx;
-                border-radius: 40rpx;
-                font-size: 24rpx;
-                font-weight: bold;
-            }
-        }
-
-        .vipPay {
-            background: url('http://reader-wx.ai160.com/images/reader/v3/year.png') no-repeat;
-            background-size: cover;
-
-            .vipTitle {
-                color: #FFE6B9;
-            }
-
-            .vipContent {
-                margin-top: 4rpx;
-                color: #FFE6B9;
-            }
-
-            .vipBtn {
-                background-image: linear-gradient(to bottom, #F4E7A8, #F9EDCF);
-                color: #211501;
-            }
-        }
-
-        .buyPay {
-            background: url('http://reader-wx.ai160.com/images/reader/v3/10yuan.png') no-repeat;
-            background-size: cover;
-
-            .payLeft {
-                color: #7D320A;
-                font-size: 36rpx;
-                font-weight: bold;
-            }
-
-            .buyBtn {
-                border: 1rpx solid white;
-                color: white;
-                background-color: #7D320A;
-            }
-        }
-    }
-
-    .surplus {
-        margin-top: 20rpx;
-        padding: 22rpx 30rpx;
-        background-color: white;
-        border-radius: 20rpx;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        font-size: 32rpx;
-
-        .title {
-            font-size: 34rpx;
-            font-weight: bold;
-            color: #000;
-        }
-
-        .num {
-            color: #F97419;
-            font-weight: bold;
-            margin-right: 10rpx;
-        }
-    }
-
-    .taskBox {
-        margin-top: 20rpx;
-        padding: 20rpx 10rpx 0rpx;
-        background-color: white;
-        border-radius: 20rpx;
-
-        .title {
-            padding: 0rpx 20rpx;
-            font-size: 34rpx;
-            font-weight: bold;
-            color: #000;
-        }
-
-        .task {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 30rpx 22rpx;
-            border-bottom: 1px solid #EAEAEA;
-
-            .taskLeft {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-
-                .img {
-                    width: 76rpx;
-                    height: 76rpx;
-                    border-radius: 50%;
-                }
-
-                .taskContent {
-                    margin-left: 40rpx;
-
-                    .tcTitle {
-                        font-size: 30rpx;
-                        font-weight: bold;
-                        color: #333;
-                    }
-
-                    .tcNum {
-                        color: #FF6259;
-                        font-size: 26rpx;
-                    }
-                }
-            }
-
-            .taskRight {
-                width: 138rpx;
-                text-align: center;
-                padding: 10rpx 0rpx;
-                border-radius: 40rpx;
-                color: white;
-                background-color: #FC614E;
-                font-size: 30rpx;
-            }
-
-            .taskRight-close {
-                color: #6C6C6C;
-                background: #D0D0D0;
-                box-shadow: 0 2px 2px 0 #AEABAB;
-            }
-
-            .taskSurplus {
-                text-align: center;
-                margin-top: 4rpx;
-                color: #686868;
-                font-size: 20rpx;
-            }
-        }
-
-        .advert {
-            border: none;
-        }
-    }
-
-    .share_cancel {
-        position: absolute;
-        left: 0px;
-        right: 0px;
-        margin: auto;
-        top: -64rpx;
-        width: 60rpx;
-        height: 60rpx;
-    }
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 99;
+  background-image: linear-gradient(180deg, #FFEBC1 1%, #FEEFCD 54%, #FFFCF0 100%);
+  border-radius: 40px 40px 0 0;
+  border-radius: 40px 40px 0px 0px;
+  border-top-left-radius: 30rpx;
+  border-top-right-radius: 30rpx;
+  padding: 29rpx 18rpx;
+  box-sizing: border-box;
+  /*兼容 IOS<11.2*/
+  padding-bottom: constant(safe-area-inset-bottom);
+  /*兼容 IOS>11.2*/
+  padding-bottom: env(safe-area-inset-bottom);
+
+
+  .payBox {
+      margin-top: 20rpx;
+      padding: 13rpx 30rpx;
+      background-color: white;
+      border-radius: 20rpx;
+
+      .title {
+          font-size: 34rpx;
+          font-weight: bold;
+          color: #000;
+      }
+
+      .pay {
+          margin: 20rpx 0rpx;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0rpx 30rpx;
+          border-radius: 22rpx;
+          overflow: hidden;
+
+          .payLeft {
+              .pLTitle {
+                  font-size: 36rpx;
+                  font-weight: bold;
+              }
+
+              .pLcontent {
+                  font-size: 22rpx;
+              }
+          }
+
+          .payRight {
+              margin: 24rpx 0rpx;
+              padding: 12rpx 28rpx;
+              border-radius: 40rpx;
+              font-size: 24rpx;
+              font-weight: bold;
+          }
+      }
+
+      .vipPay {
+          background: url('http://reader-wx.ai160.com/images/reader/v3/year.png') no-repeat;
+          background-size: cover;
+
+          .vipTitle {
+              color: #FFE6B9;
+          }
+
+          .vipContent {
+              margin-top: 4rpx;
+              color: #FFE6B9;
+          }
+
+          .vipBtn {
+              background-image: linear-gradient(to bottom, #F4E7A8, #F9EDCF);
+              color: #211501;
+          }
+      }
+
+      .buyPay {
+          background: url('http://reader-wx.ai160.com/images/reader/v3/10yuan.png') no-repeat;
+          background-size: cover;
+
+          .payLeft {
+              color: #7D320A;
+              font-size: 36rpx;
+              font-weight: bold;
+          }
+
+          .buyBtn {
+              border: 1rpx solid white;
+              color: white;
+              background-color: #7D320A;
+          }
+      }
+  }
+
+  .surplus {
+      margin-top: 20rpx;
+      padding: 22rpx 30rpx;
+      background-color: white;
+      border-radius: 20rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 32rpx;
+
+      .title {
+          font-size: 34rpx;
+          font-weight: bold;
+          color: #000;
+      }
+
+      .num {
+          color: #F97419;
+          font-weight: bold;
+          margin-right: 10rpx;
+      }
+  }
+
+  .taskBox {
+      margin-top: 20rpx;
+      padding: 20rpx 10rpx 0rpx;
+      background-color: white;
+      border-radius: 20rpx;
+
+      .title {
+          padding: 0rpx 20rpx;
+          font-size: 34rpx;
+          font-weight: bold;
+          color: #000;
+      }
+
+      .task {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 30rpx 22rpx;
+          border-bottom: 1px solid #EAEAEA;
+
+          .taskLeft {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+
+              .img {
+                  width: 76rpx;
+                  height: 76rpx;
+                  border-radius: 50%;
+              }
+
+              .taskContent {
+                  margin-left: 40rpx;
+
+                  .tcTitle {
+                      font-size: 30rpx;
+                      font-weight: bold;
+                      color: #333;
+                  }
+
+                  .tcNum {
+                      color: #FF6259;
+                      font-size: 26rpx;
+                  }
+              }
+          }
+
+          .taskRight {
+              width: 138rpx;
+              text-align: center;
+              padding: 10rpx 0rpx;
+              border-radius: 40rpx;
+              color: white;
+              background-color: #FC614E;
+              font-size: 30rpx;
+          }
+
+          .taskRight-close {
+              color: #6C6C6C;
+              background: #D0D0D0;
+              box-shadow: 0 2px 2px 0 #AEABAB;
+          }
+
+          .taskSurplus {
+              text-align: center;
+              margin-top: 4rpx;
+              color: #686868;
+              font-size: 20rpx;
+          }
+      }
+
+      .advert {
+          border: none;
+      }
+  }
+
+  .share_cancel {
+      position: absolute;
+      left: 0px;
+      right: 0px;
+      margin: auto;
+      top: -64rpx;
+      width: 60rpx;
+      height: 60rpx;
+  }
 }

components/readingTips/index.wxml

@@ -1,89 +1,104 @@
 <view class="half-screen">
-    <!--屏幕背景变暗的背景  -->
-    <view class="background_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
-    <!--弹出框  -->
-    <view animation="{{animationData}}" class="attr_box" wx:if="{{showModalStatus}}">
-        <image class="share_cancel" bindtap="hideModal" src="/static/lollipop.png"></image>
-        <!-- 支付 -->
-        <view class="payBox" wx:if="{{!isIos}}">
-            <view class="title">
-                付费购
-            </view>
-            <view class="pay vipPay">
-                <view class="payLeft">
-                    <view class="pLTitle vipTitle">
-                        {{productVip.title}}
-                    </view>
-                    <view class="pLcontent vipContent">
-                        {{vipTime?filters.formatDate(vipTime)+'过期':'购买VIP会员，即可畅读全部资源'}}
-                    </view>
-                </view>
-                <view class="payRight vipBtn" bindtap="toBuy" data-type="{{productVip.id}}">
-                    {{vipTime?'立即续费':'立即开通'}}
-                </view>
-            </view>
-            <view class="pay buyPay">
-                <view class="payLeft">
-                    {{productNum.title}}
-                </view>
-                <view class="payRight buyBtn" bindtap="toBuy" data-type="{{productNum.id}}">
-                    立即购买
-                </view>
-            </view>
+  <!--屏幕背景变暗的背景  -->
+  <view class="background_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
+  <!--弹出框  -->
+  <view animation="{{animationData}}" class="attr_box" wx:if="{{showModalStatus}}">
+    <image class="share_cancel" bindtap="hideModal" src="/static/lollipop.png"></image>
+    <!-- 支付 -->
+    <view class="payBox" wx:if="{{!isIos}}">
+      <view class="title">
+        付费购
+      </view>
+      <view class="pay vipPay">
+        <view class="payLeft">
+          <view class="pLTitle vipTitle">
+            {{productVip.title}}
+          </view>
+          <view class="pLcontent vipContent">
+            {{vipTime?filters.formatDate(vipTime)+'过期':'购买VIP会员，即可畅读全部资源'}}
+          </view>
+        </view>
+        <view class="payRight vipBtn" bindtap="toBuy" data-type="{{productVip.id}}">
+          {{vipTime?'立即续费':'立即开通'}}
+        </view>
+      </view>
+      <view class="pay buyPay">
+        <view class="payLeft">
+          {{productNum.title}}
+        </view>
+        <view class="payRight buyBtn" bindtap="toBuy" data-type="{{productNum.id}}">
+          立即购买
         </view>
-        <!-- 剩余使用次数 -->
-        <view class="surplus">
-            <view class="title">剩余使用次数：</view>
-            <view class="num">{{userInfo.experienceAmount}}次</view>
+      </view>
+    </view>
+    <!-- 剩余使用次数 -->
+    <view class="surplus">
+      <view class="title">剩余使用次数：</view>
+      <view class="num">{{userInfo.experienceAmount}}次</view>
+    </view>
+    <!-- 任务活动 -->
+    <view class="taskBox">
+      <view class="title">免费获取</view>
+      <view class="task">
+        <view class="taskLeft">
+          <image class="img" src="/static/task1.png" alt="" mode="" />
+          <view class="taskContent">
+            <view class="tcTitle">
+              {{tasks[0].title}}
+            </view>
+            <view class="tcNum">+{{tasks[0].award}}天VIP</view>
+          </view>
         </view>
-        <!-- 任务活动 -->
-        <view class="taskBox">
-            <view class="title">免费获取</view>
-            <view class="task">
-                <view class="taskLeft">
-                    <image class="img" src="/static/task1.png" alt="" mode="" />
-                    <view class="taskContent">
-                        <view class="tcTitle">
-                            {{tasks[0].title}}
-                        </view>
-                        <view class="tcNum">+{{tasks[0].award}}次</view>
-                    </view>
-                </view>
-                <view class="taskRight {{tasks[0].completed?'taskRight-close':''}}" bindtap="submitTask" data-type='{{tasks[0].id}}'>
-                    {{tasks[0].completed?'已签到':'签到'}}</view>
+        <view class="taskRight {{tasks[0].completed?'taskRight-close':''}}" bindtap="submitTask"
+          data-type='{{tasks[0].id}}'>
+          {{tasks[0].completed?'已绑定':'绑定'}}</view>
+      </view>
+      <view class="task">
+        <view class="taskLeft">
+          <image class="img" src="/static/task1.png" alt="" mode="" />
+          <view class="taskContent">
+            <view class="tcTitle">
+              {{tasks[0].title}}
             </view>
-            <view class="task">
-                <view class="taskLeft">
-                    <image class="img" src="/static/task2.png" alt="" mode="" />
-                    <view class="taskContent">
-                        <view class="tcTitle">
-                            {{tasks[1].title}}
-                        </view>
-                        <view class="tcNum">+{{tasks[1].award}}次/每位</view>
-                    </view>
-                </view>
-                <button open-type="share" class="resetBtn taskRight">去邀请</button>
+            <view class="tcNum">+{{tasks[0].award}}次</view>
+          </view>
+        </view>
+        <view class="taskRight {{tasks[0].completed?'taskRight-close':''}}" bindtap="submitTask"
+          data-type='{{tasks[0].id}}'>
+          {{tasks[0].completed?'已签到':'签到'}}</view>
+      </view>
+      <view class="task">
+        <view class="taskLeft">
+          <image class="img" src="/static/task2.png" alt="" mode="" />
+          <view class="taskContent">
+            <view class="tcTitle">
+              {{tasks[1].title}}
             </view>
-            <view class="task advert">
-                <view class="taskLeft">
-                    <image class="img" src="/static/task3.png" alt="" mode="" />
-                    <view class="taskContent">
-                        <view class="tcTitle">
-                            {{tasks[2].title}}
-                        </view>
-                        <view class="tcNum">+{{tasks[2].award}}次/每条</view>
-                    </view>
-                </view>
-                <view class="taskRightBox">
-                    <view class="taskRight {{tasks[2].completed?'taskRight-close':''}}" bindtap="rewardedVideo">去观看
-                    </view>
-                    <view class="taskSurplus">
-                        剩余次数：{{tasks[2].completedNum}}/{{tasks[2].num}}
-                    </view>
-                </view>
+            <view class="tcNum">+{{tasks[1].award}}次/每位</view>
+          </view>
+        </view>
+        <button open-type="share" class="resetBtn taskRight">去邀请</button>
+      </view>
+      <view class="task advert">
+        <view class="taskLeft">
+          <image class="img" src="/static/task3.png" alt="" mode="" />
+          <view class="taskContent">
+            <view class="tcTitle">
+              {{tasks[2].title}}
             </view>
+            <view class="tcNum">+{{tasks[2].award}}次/每条</view>
+          </view>
+        </view>
+        <view class="taskRightBox">
+          <view class="taskRight {{tasks[2].completed?'taskRight-close':''}}" bindtap="rewardedVideo">去观看
+          </view>
+          <view class="taskSurplus">
+            剩余次数：{{tasks[2].completedNum}}/{{tasks[2].num}}
+          </view>
         </view>
+      </view>
     </view>
+  </view>
 </view>
 <!-- 广告组件 -->
 <rewardedVideo id='advert' bind:taskOver="setUserInfo" />

components/voucher/index.js

@@ -1,4 +1,7 @@
-// components/voucher/index.js
+import {
+  buyVip,
+  buyNum,
+} from '~/api/user'
 Component({
   /**
    * 组件的属性列表
@@ -11,13 +14,78 @@ Component({
    * 组件的初始数据
    */
   data: {
-
+    state: false
   },
 
   /**
    * 组件的方法列表
    */
   methods: {
-
+    open() {
+      this.setData({
+        state: true
+      })
+    },
+    close() {
+      this.setData({
+        state: false
+      })
+    },
+    //购买vip和购买次数不是一个接口 type 1001是vip，1010是次数
+    async toBuy({
+      currentTarget
+    }) {
+      let productId = currentTarget.dataset.type
+      wx.showLoading({
+        title: '提交中',
+        mask: true
+      })
+      let res = ''
+      if (productId == '1001') {
+        res = await buyVip({
+          productId
+        }).finally(() => {
+          wx.hideLoading()
+        })
+      } else if (productId == '1010') {
+        res = await buyNum({
+          productId
+        }).finally(() => {
+          wx.hideLoading()
+        })
+      } else {
+        wx.hideLoading()
+        wx.showToast({
+          title: "支付失败,请重试",
+          icon: "none"
+        })
+      }
+      let {
+        timeStamp,
+        nonceStr,
+        signType,
+        paySign
+      } = res
+      // package保留字
+      wx.requestPayment({
+        timeStamp,
+        nonceStr,
+        package: res.package,
+        signType,
+        paySign,
+        success(res) {
+          wx.showToast({
+            title: "支付成功",
+            duration: 2500
+          })
+        },
+        fail(res) {
+          wx.showToast({
+            title: "支付失败",
+            icon: "none"
+          })
+        }
+      })
+    },
   }
-})
+})

components/voucher/index.less

@@ -8,6 +8,7 @@
   z-index: 10;
 
   .voucher {
+    position: relative;
     margin: 340rpx auto 0px;
     width: 630rpx;
     height: 694rpx;
@@ -91,5 +92,15 @@
         font-size: 22rpx;
       }
     }
+
+    .close {
+      position: absolute;
+      bottom: -90rpx;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 60rpx;
+      height: 60rpx;
+      padding: 20rpx;
+    }
   }
 }

components/voucher/index.wxml

@@ -1,4 +1,4 @@
-<view class="voucherBox" catchtouchmove='true'>
+<view class="voucherBox" catchtouchmove='true' wx:if="{{state}}">
   <view class="voucher">
     <view class="body">
       <view class="title" style="margin-top: 24rpx;">
@@ -22,8 +22,9 @@
           </view>
         </view>
       </view>
-      <view class="btn">领取使用</view>
+      <view class="btn" catchtap="toBuy">领取使用</view>
       <view class="tips">领取后在24小时内使用，过期作废</view>
     </view>
+    <image src="/static/lollipop.png" class="close" catchtap="close" />
   </view>
 </view>

components/voucher/index.wxss

@@ -8,6 +8,7 @@
   z-index: 10;
 }
 .voucherBox .voucher {
+  position: relative;
   margin: 340rpx auto 0px;
   width: 630rpx;
   height: 694rpx;
@@ -81,3 +82,12 @@
   margin-top: 20rpx;
   font-size: 22rpx;
 }
+.voucherBox .voucher .close {
+  position: absolute;
+  bottom: -90rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60rpx;
+  height: 60rpx;
+  padding: 20rpx;
+}

pages/userWorks/index.js

@@ -1,9 +1,10 @@
 import {
   getSelfRead
 } from '~/api/user'
+import share from '~/mixins/share'
 import reachBottom from '~/mixins/reachBottom'
 Page({
-  behaviors: [reachBottom],
+  behaviors: [reachBottom, share],
   data: {
 
   },