初始化

2024-12-06 16:18:22 +08:00
commit 884dd70d83
751 changed files with 60883 additions and 0 deletions
@@ -0,0 +1,103 @@
+// pages/activitySharing.js
+const {
+  getWxml,
+  getStyle
+} = require("./poster-data.js");
+
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    poster: "",
+    path: "",
+    showObj: {}
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    var obj = JSON.parse(options.obj);
+    console.log(obj)
+    this.setData({
+      showObj: obj,
+      path: decodeURIComponent(options.path)
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+    this.genImg();
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {},
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {},
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {},
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {},
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {},
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+    return {
+      path: this.data.path
+    }
+  },
+
+  genImg() {
+    const poster = this.selectComponent("#poster");
+
+    wx.showLoading({
+      title: '加载中',
+    })
+    setTimeout(() => {
+      const wxml = getWxml(this.data.showObj);
+      const style = getStyle();
+      const p1 = poster.renderToCanvas({
+        wxml,
+        style
+      });
+      let container = null;
+      p1.then((res) => {
+        container = res;
+        console.log(container);
+        return poster.canvasToTempFilePath();
+      }).then((res) => {
+        this.setData({
+          poster: res.tempFilePath,
+          width: container.layoutBox.width,
+          height: container.layoutBox.height,
+        });
+        wx.hideLoading()
+      });
+    }, 500);
+  },
+  shareFriend() {
+    wx.showShareImageMenu({
+      path: this.data.poster,
+    });
+  },
+});
@@ -0,0 +1,7 @@
+{
+  "navigationBarTitleText": "邀请好友赚奖金，多邀多得！",
+  "usingComponents": {
+    "wxml-to-canvas": "wxml-to-canvas"
+    
+  }
+}
@@ -0,0 +1,36 @@
+<view class="ac-page">
+  <view class="as-title">邀请好友赚奖金，多邀多得！</view>
+  <view class="as-body">
+    每成功邀请1名好友购课，你可获得
+    <text class="emphasis">{{showObj.distributionRule.distributionVlue1}}</text>
+    元奖励
+  </view>
+  <view class="as-body" wx:if="{{showObj.distributionRule.isOpenDistribution2}}">
+    好友成功邀请他人购课，你可再获得
+    <text class="emphasis">{{showObj.distributionRule.distributionVlue2}}</text>
+    元奖励
+  </view>
+  <!-- <view class="as-body">
+    （奖励金直接转入微信零钱）
+    <text class="link">收益到账提醒</text>
+  </view> -->
+
+  <view class="ac-poster">
+    <image class="ac-poster-preview" src="{{poster}}" style="width: 300px;" mode="widthFix" show-menu-by-longpress />
+    <wxml-to-canvas id="poster" class="ac-poster-canvas" width="300" height="600"></wxml-to-canvas>
+    <view class="ac-actions">
+      <button class="ac-action" open-type="share">
+        <image src="https://xiaohebang.oss-cn-beijing.aliyuncs.com/system/material/mini/fx/wx.png" />
+        <text>发送给好友</text>
+      </button>
+      <button class="ac-action" style="margin-left: 100px;" bindtap="shareFriend">
+        <image src="https://xiaohebang.oss-cn-beijing.aliyuncs.com/system/material/mini/fx/xz.png" />
+        <text>分享海报</text>
+      </button>
+    </view>
+  </view>
+  <!-- <view class="desc" style="margin-top: 1rem;">
+    使用此功能即代表知晓
+    <text class="link">平台免责声明&用户协议</text>
+  </view> -->
+</view>
@@ -0,0 +1,70 @@
+.ac-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem;
+}
+.emphasis {
+  color: #eb1741;
+  font-weight: bold;
+}
+.link {
+  color: #6297db;
+}
+.desc {
+  color: #999;
+  font-size: 12px;
+}
+
+.as-title {
+  color: #333;
+  font-weight: bold;
+  font-size: 16px;
+  line-height: 2.5;
+}
+.as-body {
+  color: #999;
+  font-size: 14px;
+}
+
+.align-center {
+  text-align: center;
+}
+
+.ac-poster {
+  margin-top: 1rem;
+}
+
+.ac-actions {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+}
+.ac-action {
+  margin: initial;
+  width: initial !important;
+  background: initial;
+  padding: initial;
+  font-weight: initial;
+
+  text-align: center;
+  font-size: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.ac-action image {
+  width: 64px;
+  height: 64px;
+  margin-bottom: 8px;
+}
+
+.ac-poster-preview {
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+  border-radius: 16px;
+}
+
+.ac-poster-canvas {
+  position: absolute;
+  left: -100%;
+}
@@ -0,0 +1,155 @@
+/**
+ * 
+ * @param {Object} options 
+ * @param {string} options.title 标题
+ * @param {string} options.img 大图
+ * @param {string} options.portrait 头像
+ * @param {string} options.name 姓名
+ * @param {string} options.qrcode 二维码
+ * @returns 
+ */
+export const getWxml = ({
+    title,
+    img,
+    portrait,
+    name,
+    qrcode
+}) => {
+    return `
+  <view class="poster">
+    <image class="img" src="${img}" />
+    <view class="title-box">
+        <text class="title">${title}</text>
+    </view>
+    <view class="info-box">
+      <image class="portrait" src="${portrait}" />
+      <view class="info-main">
+        <text class="name">${name}</text>
+        <text class="desc">分享好课给你</text>
+      </view>
+      <image class="qrcode" src="${qrcode}" />
+    </view>
+    <view class="extract-box">
+      <text class="extract-text">长按识别小程序</text>
+      <image class="extract-icon" src="https://xiaohebang.oss-cn-beijing.aliyuncs.com/system/material/mini/fx/zw.png" />
+    </view>
+  </view>
+  `;
+};
+
+export const getStyle = () => {
+    return {
+        poster: {
+            width: 300,
+            height: 368,
+            padding: 20,
+            flexDirection: "column",
+            backgroundColor: "#fff",
+            borderRadius: 16,
+        },
+        img: {
+            width: 260,
+            height: 156,
+            borderRadius: 8,
+        },
+        titleBox: {
+            width: 260,
+            height: 60,
+        },
+        title: {
+            top: 8,
+            width: 260,
+            height: 60,
+            fontSize: 16,
+            lineHeight: "1.5em",
+        },
+        name: {
+            width: 124,
+            height: 28,
+            fontSize: 16,
+            lineHeight: "1.5em",
+        },
+        desc: {
+            width: 124,
+            height: 28,
+            fontSize: 14,
+            lineHeight: "1.5em",
+            color: "#666"
+        },
+        infoBox: {
+            top: 8,
+            width: 260,
+            height: 64,
+            flexDirection: "row",
+        },
+        infoMain: {
+            left: 8,
+            width: 132,
+            height: 60,
+        },
+        portrait: {
+            width: 56,
+            height: 56,
+            borderRadius: 28,
+        },
+        qrcode: {
+            right: 10,
+            width: 84,
+            height: 84,
+        },
+        extractBox: {
+            top: 16,
+            width: 158,
+            height: 30,
+            backgroundColor: "#f6f6f8",
+            flexDirection: "row",
+            borderRadius: 15,
+        },
+        extractText: {
+            left: 16,
+            width: 120,
+            height: 30,
+            verticalAlign: "middle",
+        },
+        extractIcon: {
+            top: 4,
+            width: 22,
+            height: 22,
+            borderRadius: 11,
+        },
+
+    };
+};
+
+// 单图像导出
+/**
+ * @param {Object} options 
+ * @param {string} options.img 大图
+ * @returns 
+ */
+export const getWxml1 = ({
+    img
+}) => {
+    return `
+  <view class="imgBox">
+    <image class="img" src="${img}" />
+   
+  </view>
+  `;
+};
+export const getStyle1 = () => {
+    return {
+        imgBox:{
+            width: 300,
+            height: 300,
+            padding: 20,
+            flexDirection: "column",
+            backgroundColor: "#fff",
+            borderRadius: 16,
+        },
+        img :{
+            width: 260,
+            height: 260,
+        }
+    }
+}