支付及截屏分享

api/global.js

@@ -4,6 +4,10 @@ import {
 module.exports = {
     //获取充值配置信息
     getProducts: data => request('/v3/product', 'get', data),
+    // 购买vip
+    buyVip: data => request('/order', 'post', data, true),
+    // 购买次数
+    buyNum: data => request('/v3/pay', 'post', data),
     // 获取任务配置
     getTasks: data => request('/v3/task', 'get', data),
     // 提交任务

app.wxss

@@ -41,4 +41,9 @@ text {
     padding: 0px;
     margin: 0;
     line-height: normal;
+    background-color: transparent;
+}
+
+.resetBtn::after {
+    border: none;
 }

component/videoPreview/index.js

@@ -7,7 +7,7 @@ Component({
      * 组件的属性列表
      */
     properties: {
-        item: {
+        videoInfo: {
             type: Object,
             value: {}
         },
@@ -18,21 +18,22 @@ Component({
             type: Number,
         }
     },
-
-    /**
-     * 组件的初始数据
-     */
     data: {
 
     },
-
-    /**
-     * 组件的方法列表
-     */
     methods: {
+        // 播放视频
+        playVideo() {
+            this.triggerEvent('playVideo', this.properties.videoInfo.userRead.id)
+        },
+        // 分享视频
+        shareVideo() {
+            let videoInfo = this.properties.videoInfo
+            console.log(videoInfo);
+        },
         // 设置视频公开还是隐私
         async setVideoPublic() {
-            let info = this.properties.item.userRead
+            let info = this.properties.videoInfo.userRead
             let data = {
                 id: info.id,
                 status: info.status === 'NORMAL' ? 'DISABLE' : 'NORMAL'
@@ -57,8 +58,8 @@ Component({
         async likeVideo() {
             let {
                 id
-            } = this.properties.item.userRead
-            if (this.properties.item.isLike) {
+            } = this.properties.videoInfo.userRead
+            if (this.properties.videoInfo.isLike) {
                 return
             }
             await likeVideo(id)
@@ -67,7 +68,7 @@ Component({
             let likeNumStr = `list[${index}].userRead.likeAmount`;
             let options = {
                 [likeStr]: true,
-                [likeNumStr]: this.properties.item.userRead.likeAmount + 1
+                [likeNumStr]: this.properties.videoInfo.userRead.likeAmount + 1
             }
             this.triggerEvent('changStatus', options)
         },
@@ -77,7 +78,7 @@ Component({
                 title: '保存到本地',
                 mask: true
             })
-            const url = this.properties.item.userRead.markPath || ''
+            const url = this.properties.videoInfo.userRead.markPath || ''
             wx.downloadFile({
                 url,
                 success(res) {
@@ -122,7 +123,7 @@ Component({
         delete() {
             let {
                 id
-            } = this.properties.item.userRead
+            } = this.properties.videoInfo.userRead
             wx.showModal({
                 title: '确认删除吗？',
                 content: '作品将被永久删除，无法找回。',

component/videoPreview/index.json

@@ -1,4 +1,5 @@
 {
     "component": true,
-    "usingComponents": {}
+    "usingComponents": {},
+    "styleIsolation": "apply-shared"
 }

component/videoPreview/index.wxml

@@ -2,13 +2,13 @@
 <view class="work">
     <view class="workHead">
         <view class="wH-left">
-            <image src="{{item.user.avatar}}" class="avatar" mode="" />
+            <image src="{{videoInfo.user.avatar}}" class="avatar" mode="" />
             <view class="wH-left-user">
-                <view class="nickname textOver">{{item.user.wechatName}}</view>
-                <view class="time">发布时间：{{item.userRead.day}}</view>
+                <view class="nickname textOver">{{videoInfo.user.wechatName}}</view>
+                <view class="time">发布时间：{{videoInfo.userRead.day}}</view>
             </view>
         </view>
-        <view class="wH-right" wx:if="{{item.userRead.status!='CHECK'}}">
+        <view class="wH-right" wx:if="{{videoInfo.userRead.status!='CHECK'}}">
             <view class="wH-right-btn" bindtap="download">
                 <image class="img" src="/static/index/down.png" mode="" />
                 <view class="text">下载</view>
@@ -19,52 +19,53 @@
             </view>
             <view class="wH-right-btn" bindtap="setVideoPublic">
                 <image class="img" style="width:30rpx"
-                    src="{{item.userRead.status==='NORMAL'? '/static/index/unlock.png': '/static/index/lock.png'}}" />
+                    src="{{videoInfo.userRead.status==='NORMAL'? '/static/index/unlock.png': '/static/index/lock.png'}}" />
                 <view class="text">
-                    {{item.userRead.status==='NORMAL'? '公开': '私密'}}
+                    {{videoInfo.userRead.status==='NORMAL'? '公开': '私密'}}
                 </view>
             </view>
         </view>
     </view>
     <view class="workContent">
         <!-- 审核中遮罩 -->
-        <view class="videoBox" wx:if="{{item.userRead.status=='CHECK'&&item.userRead.id!=currentId}}">
+        <view class="videoBox" wx:if="{{videoInfo.userRead.status=='CHECK'&&videoInfo.userRead.id!=currentId}}">
             <view class="maskBg"></view>
             <image class="maskImg" src="/static/index/checking.png" />
-            <image class="cover" src="{{item.userRead.coverImg}}" />
+            <image class="cover" src="{{videoInfo.userRead.coverImg}}" />
         </view>
         <!--未播放-->
-        <view class="videoBox" wx:if="{{item.userRead.status!='CHECK'&&item.userRead.id!=currentId}}">
+        <view class="videoBox" wx:if="{{videoInfo.userRead.status!='CHECK'&&videoInfo.userRead.id!=currentId}}"
+            bindtap="playVideo">
             <image class="play" src="/static/image/play-btn.png" />
-            <image class="cover" src="{{item.userRead.coverImg}}" />
+            <image class="cover" src="{{videoInfo.userRead.coverImg}}" />
         </view>
         <!-- 播放时渲染的video -->
-        <video class="video" id="myVideo" wx:if="{{item.userRead.id==currentId}}" src="{{item.userRead.videoPath}}"
-            autoplay="true" object-fit="contain">
+        <video class="video" id="myVideo" wx:if="{{videoInfo.userRead.id==currentId}}"
+            src="{{videoInfo.userRead.videoPath}}" autoplay="true" object-fit="contain">
         </video>
     </view>
     <view class="workFooter">
-        <view class="title">{{item.userRead.title}}</view>
-        <view class="mange" wx:if="{{item.userRead.status!='CHECK'}}">
+        <view class="title">{{videoInfo.userRead.title}}</view>
+        <view class="mange" wx:if="{{videoInfo.userRead.status!='CHECK'}}">
             <view class="mangeL">
                 <view class="mangeL-box">
                     <image src="/static/image/no_collect.png" mode="" class="icon" />
                     <view class="icon-name">收藏</view>
                 </view>
-                <view class="mangeL-box">
+                <button class="resetBtn mangeL-box" open-type="share" data-info='{{videoInfo}}'>
                     <image src="/static/index/share.png" mode="" class="icon" />
                     <view class="icon-name">分享</view>
-                </view>
+                </button>
             </view>
             <view class="mangeL">
                 <view class="mangeL-box" bindtap="likeVideo">
-                    <image src="{{item.isLike ? '/static/index/heart_colored.png' : '/static/index/heart.png'}}" mode=""
-                        class="icon" />
-                    <view class="icon-name">{{filters.numFilter(item.userRead.likeAmount)}}</view>
+                    <image src="{{videoInfo.isLike ? '/static/index/heart_colored.png' : '/static/index/heart.png'}}"
+                        mode="" class="icon" />
+                    <view class="icon-name">{{filters.numFilter(videoInfo.userRead.likeAmount)}}</view>
                 </view>
                 <view class="mangeL-box" bindtap="openComment">
                     <image src="/static/index/comment.png" mode="" class="icon" />
-                    <view class="icon-name">{{filters.numFilter(item.userRead.commentAmount)}}</view>
+                    <view class="icon-name">{{filters.numFilter(videoInfo.userRead.commentAmount)}}</view>
                 </view>
             </view>
         </view>

pages/my/index.js

@@ -5,6 +5,8 @@ import {
 import {
     getProducts,
     getTasks,
+    buyVip,
+    buyNum,
     submitTask
 } from '~/api/global'
 import {
@@ -66,7 +68,6 @@ Page({
             tasks
         })
     },
-
     async getProducts() {
         let products = await getProducts()
         let productVip = products.find(item => {
@@ -75,17 +76,70 @@ Page({
         let productNum = products.find(item => {
             return item.type == 2
         })
-        console.log(products);
         this.setData({
             productNum,
             productVip
         })
     },
-    // 支付
-    toPay({
+    //购买vip和购买次数不是一个接口 type 1001是vip，1010是次数
+    async toBuy({
         currentTarget
     }) {
-        let type = currentTarget.dataset.type
+        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
+                })
+                setTimeout(() => {
+                    this.setUserInfo()
+                }, 1500)
+
+            },
+            fail(res) {
+                wx.showToast({
+                    title: "支付失败",
+                    icon: "none"
+                })
+            }
+        })
     },
     // 提交任务
     async submitTask({
@@ -129,7 +183,6 @@ Page({
     // 分享配置
     onShareAppMessage: function (res) {
         const user = wx.getStorageSync('user');
-        console.log(`/pages/index/index?sid=${user.uid}`);
         return {
             title: `邀请你一起来朗读课文`,
             path: `/pages/index/index?uid=${user.uid}`,

pages/my/index.wxml

@@ -85,7 +85,7 @@
                     {{vipTime?filters.formatDate(vipTime)+'过期':'购买VIP会员，即可畅读全部资源'}}
                 </view>
             </view>
-            <view class="payRight vipBtn" bindtap="toPay" data-type='1'>
+            <view class="payRight vipBtn" bindtap="toBuy" data-type="{{productVip.id}}">
                 {{vipTime?'立即续费':'立即开通'}}
             </view>
         </view>
@@ -93,7 +93,7 @@
             <view class="payLeft">
                 {{productNum.title}}
             </view>
-            <view class="payRight buyBtn" bindtap="toPay" data-type='2'>
+            <view class="payRight buyBtn" bindtap="toBuy" data-type="{{productNum.id}}">
                 立即购买
             </view>
         </view>

pages/userWorks/index.js

@@ -10,7 +10,9 @@ Page({
     data: {
         list: [],
         currentId: '',
-        videoState: true
+        videoState: true,
+        canvasHidden: false, //设置画板的显示与隐藏
+        shareImgPath: '' //用于储存canvas生成的图片
     },
     onLoad(options) {
         this.getSelfRead()
@@ -23,11 +25,19 @@ Page({
         })
         console.log(list[0]);
     },
+    creatShare() {
+        let context = wx.createSelectorQuery();
+        context
+            .select('#share')
+            .fields({
+                node: true,
+                size: true
+            }).exec(this.initCanvas.bind(this))
+    },
     // 改变视频状态
     changStatus({
         detail
     }) {
-        console.log(detail);
         this.setData(detail)
     },
     // 开始播放
@@ -53,8 +63,42 @@ Page({
             videoState: !videoState
         })
     },
+    // 初始化canvan并绘制
+    initCanvas(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 = '14px PingFang';
+        let pic = canvas.createImage();
+        pic.src = 'https://yfklxt-image.ai160.com/reader/20210910/1631254820926145.jpg'; //可以是本地，也可以是网络图片
+        pic.onload = () => {
+            ctx.drawImage(pic, 0, 0, 375, 211);
+        }
+        let peiyin = canvas.createImage();
+        peiyin.src = '/static/image/peiyin.jpg';
 
-    onShareAppMessage() {
+        peiyin.onload = () => {
+            ctx.drawImage(peiyin, 0, 211, 375, 89);
+            // 收藏
+            let sc = canvas.createImage();
+            sc.src = '/static/image/no_collect.png'
+            ctx.drawImage(sc, 12, 220, 20, 20)
+            ctx.fillText('收藏', 36, 238)
+            //分享
+            let fx = canvas.createImage();
+            fx.src = '/static/index/share.png'
+            ctx.drawImage(fx, 78, 220, 22, 22)
+            ctx.fillText('分享', 104, 238)
+        }
 
+    },
+    onShareAppMessage({
+        target
+    }) {
+        let video = target.dataset.info
+        console.log(video);
     }
 })

pages/userWorks/index.json

@@ -1,5 +1,6 @@
 {
     "usingComponents": {
         "videoPreview": "/component/videoPreview/index"
-    }
+    },
+    "enablePullDownRefresh": false
 }

pages/userWorks/index.wxml

@@ -1,8 +1,12 @@
 <view class="worksBox">
     <!-- 作品列表 -->
+    <view bindtap="creatShare">
+        3333
+    </view>
+    <canvas id='share' type="2d" style="width: 100%;height: 300px;"> </canvas>
     <block wx:for="{{list}}" wx:key="index">
-        <videoPreview item="{{item}}" index='{{index}}' currentId="{{currentId}}" data-id="{{item.userRead.id}}"
-            catchtap="playVideo" bind:changStatus="changStatus" bind:getList="getSelfRead">
+        <videoPreview videoInfo="{{item}}" index='{{index}}' currentId="{{currentId}}" data-id="{{item.userRead.id}}"
+            bind:playVideo="playVideo" bind:changStatus="changStatus" bind:getList="getSelfRead">
         </videoPreview>
     </block>
 </view>

utils/request.js

@@ -1,7 +1,8 @@
 let baseUrl = 'https://reader-api.efunbox.cn/wx'
+let oldUrl = 'https://reader-api.efunbox.cn'
 
 
-function request(url, method, data, abort = false) {
+function request(url, method, data, oldBaseUrl = false) {
     let header = {
         'uid': wx.getStorageSync('uid') || ''
     }
@@ -15,7 +16,7 @@ function request(url, method, data, abort = false) {
     }
     return new Promise((reslove, reject) => {
         wx.request({
-            url: baseUrl + url,
+            url: oldBaseUrl ? oldUrl + url : baseUrl + url,
             method: method,
             data: data,
             header: header,