生成图片保存到相册

components/vipModal/index.js

@@ -1,6 +1,9 @@
 import {
     getVipInfo,
 } from '~/api/user'
+import {
+    formatDate
+} from '~/utils/util'
 Component({
     /**
      * 组件的属性列表
@@ -15,7 +18,7 @@ Component({
     data: {
         show: false,
         type: '',
-        vipTime:''
+        vipTime: ''
     },
     methods: {
         open({
@@ -50,6 +53,7 @@ Component({
             })
         },
         creatShare() {
+            let type = this.data.type
             let context = wx.createSelectorQuery();
             context
                 .select('#vip')
@@ -63,13 +67,18 @@ Component({
                     canvas.width = res[0].width * dpr;
                     canvas.height = res[0].height * dpr;
                     ctx.scale(dpr, dpr);
-                    ctx.font = '20px PingFang';
+                    ctx.font = '16px PingFang';
                     let pic = canvas.createImage();
-                    pic.src = 'http://reader-wx.ai160.com/images/reader/v3/learn/vip1.png'
+                    pic.src = type == 'svip' ? 'http://reader-wx.ai160.com/images/reader/v3/learn/vip1.png' : 'http://reader-wx.ai160.com/images/reader/v3/learn/vip2.png'
                     pic.onload = () => {
                         ctx.drawImage(pic, 0, 0, 375, 201);
-                        ctx.fillText('终身使用', 144, 135)
-                        ctx.fillStyle = 'red'
+                        if (type == 'svip') {
+                            ctx.fillStyle = "#D7E6FF";
+                            ctx.fillText('终身使用', 16, 184)
+                        } else {
+                            ctx.fillStyle = "#FFE6D2";
+                            ctx.fillText('有效期至：' + formatDate(this.data.vipTime, 5), 16, 184)
+                        }
                         setTimeout(() => {
                             wx.canvasToTempFilePath({
                                 canvas: canvas,

pages/my/index.js

@@ -35,9 +35,6 @@ Page({
             }
         })
         this.getProducts()
-        this.selectComponent('#vipModal').open({
-            type: 'vip'
-        })
     },
     async onShow() {
         if (typeof this.getTabBar === 'function') {

utils/filter.wxs

@@ -1,70 +1,70 @@
 var formatNumber = function (n) {
-  n = n.toString()
-  return n[1] ? n : '0' + n
+    n = n.toString()
+    return n[1] ? n : '0' + n
 }
 /**
  * 将时间戳(1570550400)格式转为 yyyy-MM-dd格式
  */
 //时间戳转时间
 function formatDate(time, flag) {
-  if (!time) {
-    return
-  }
-  var time = time * 1
-  var t = getDate(time);
-  var tf = function (i) {
-    return (i < 10 ? '0' : '') + i
-  };
-  var year = t.getFullYear();
-  var month = tf(t.getMonth() + 1);
-  var day = tf(t.getDate());
-  var hour = tf(t.getHours());
-  var minute = tf(t.getMinutes());
-  if (flag == 1) {
-    return year + '-' + month + '-' + day + '' + ' ' + hour + ':' + minute;
-  } else if (flag == 2) {
-    return year + '.' + month + '.' + day
-  } else if (flag == 3) {
-    return month + '-' + day + ' ' + hour + ':' + minute;
-  } else if (flag == 4) {
-    return year + '年' + month + '月' + day + '日';
-  } else if (flag == 5) {
-    return year + '-' + month + '-' + day;
-  }
+    if (!time) {
+        return
+    }
+    var time = time * 1
+    var t = getDate(time);
+    var tf = function (i) {
+        return (i < 10 ? '0' : '') + i
+    };
+    var year = t.getFullYear();
+    var month = tf(t.getMonth() + 1);
+    var day = tf(t.getDate());
+    var hour = tf(t.getHours());
+    var minute = tf(t.getMinutes());
+    if (flag == 1) {
+        return year + '-' + month + '-' + day + '' + ' ' + hour + ':' + minute;
+    } else if (flag == 2) {
+        return year + '.' + month + '.' + day
+    } else if (flag == 3) {
+        return month + '-' + day + ' ' + hour + ':' + minute;
+    } else if (flag == 4) {
+        return year + '年' + month + '月' + day + '日';
+    } else if (flag == 5) {
+        return year + '-' + month + '-' + day;
+    }
 }
 
 function gradeFilter(grade) {
-  if (!grade) {
-    return '暂无'
-  }
-  var gradeObj = {
-    "PRIMARY_FIRST_GRADE": "一年级",
-    "PRIMARY_SECOND_GRADE": "二年级",
-    "PRIMARY_THREE_GRADE": "三年级",
-    "PRIMARY_SENIOR_GRADE": "四年级",
-    "PRIMARY_FIVE_GRADE": "五年级",
-    "PRIMARY_SIX_GRADE": "六年级",
-    "PRESCHOOL": "学前班",
-  }
-  return gradeObj[grade]
+    if (!grade) {
+        return '暂无'
+    }
+    var gradeObj = {
+        "PRIMARY_FIRST_GRADE": "一年级",
+        "PRIMARY_SECOND_GRADE": "二年级",
+        "PRIMARY_THREE_GRADE": "三年级",
+        "PRIMARY_SENIOR_GRADE": "四年级",
+        "PRIMARY_FIVE_GRADE": "五年级",
+        "PRIMARY_SIX_GRADE": "六年级",
+        "PRESCHOOL": "学前班",
+    }
+    return gradeObj[grade]
 }
 // 数字满万补w
 function numFilter(num) {
-  if (!num) {
-    return 0
-  }
-  if (num < 10000) {
-    return num
-  }
-  return Math.floor(num / 100) / 100 + 'w'
+    if (!num) {
+        return 0
+    }
+    if (num < 10000) {
+        return num
+    }
+    return Math.floor(num / 100) / 100 + 'w'
 }
 // 四舍五入保留两位小数
 function twoDecimal(num) {
-  return (num / 100).toFixed(2)
+    return (num / 100).toFixed(2)
 }
 module.exports = {
-  formatDate: formatDate,
-  gradeFilter: gradeFilter,
-  numFilter: numFilter,
-  twoDecimal: twoDecimal
+    formatDate: formatDate,
+    gradeFilter: gradeFilter,
+    numFilter: numFilter,
+    twoDecimal: twoDecimal
 }

utils/util.js

@@ -1,37 +1,68 @@
 const formatTime = date => {
-  const year = date.getFullYear()
-  const month = date.getMonth() + 1
-  const day = date.getDate()
-  const hour = date.getHours()
-  const minute = date.getMinutes()
-  const second = date.getSeconds()
+    const year = date.getFullYear()
+    const month = date.getMonth() + 1
+    const day = date.getDate()
+    const hour = date.getHours()
+    const minute = date.getMinutes()
+    const second = date.getSeconds()
 
-  return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
+    return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
 }
 
 const formatNumber = n => {
-  n = n.toString()
-  return n[1] ? n : `0${n}`
+    n = n.toString()
+    return n[1] ? n : `0${n}`
 }
 // 设置时间文案
 const setDuration = (s) => {
-  let t = '';
-  s = Math.floor(s);
-  if (s > -1) {
-    let min = Math.floor(s / 60) % 60;
-    let sec = s % 60;
-    if (min < 10) {
-      t += "0";
+    let t = '';
+    s = Math.floor(s);
+    if (s > -1) {
+        let min = Math.floor(s / 60) % 60;
+        let sec = s % 60;
+        if (min < 10) {
+            t += "0";
+        }
+        t += min + ":";
+        if (sec < 10) {
+            t += "0";
+        }
+        t += sec;
     }
-    t += min + ":";
-    if (sec < 10) {
-      t += "0";
+    return t
+}
+/**
+ * 将时间戳(1570550400)格式转为 yyyy-MM-dd格式
+ */
+//时间戳转时间
+function formatDate(time, flag) {
+    if (!time) {
+        return
+    }
+    var time = time * 1
+    var t = new Date(time);
+    var tf = function (i) {
+        return (i < 10 ? '0' : '') + i
+    };
+    var year = t.getFullYear();
+    var month = tf(t.getMonth() + 1);
+    var day = tf(t.getDate());
+    var hour = tf(t.getHours());
+    var minute = tf(t.getMinutes());
+    if (flag == 1) {
+        return year + '-' + month + '-' + day + '' + ' ' + hour + ':' + minute;
+    } else if (flag == 2) {
+        return year + '.' + month + '.' + day
+    } else if (flag == 3) {
+        return month + '-' + day + ' ' + hour + ':' + minute;
+    } else if (flag == 4) {
+        return year + '年' + month + '月' + day + '日';
+    } else if (flag == 5) {
+        return year + '-' + month + '-' + day;
     }
-    t += sec;
-  }
-  return t
 }
 module.exports = {
-  formatTime,
-  setDuration
+    formatDate,
+    formatTime,
+    setDuration
 }