新增分享二维码

2020-12-31 13:15:31 +08:00
parent cff94e05f6
commit aa94413f67
12 changed files with 422 additions and 145 deletions
--- a/pages/user/code/code.js
+++ b/pages/user/code/code.js
@@ -0,0 +1,172 @@
+const style = {
+    codeContent: {
+        backgroundColor: 'white',
+        width: '375',
+        height: '525'
+    },
+    codeNickname: {
+        width: '355',
+        height: '46',
+        textAlign: 'center',
+        fontSize: '25',
+        verticalAlign: 'middle',
+        marginTop: '40',
+        marginLeft: '10'
+    },
+    codeJob: {
+        width: '355',
+        height: '30',
+        textAlign: 'center',
+        verticalAlign: 'middle',
+        fontSize: '15',
+        marginLeft: '10'
+    },
+    codeImg: {
+        width: '151',
+        height: '151',
+        marginTop: '30',
+        marginBottom: '40',
+        marginLeft: '112'
+    },
+    codeLogo: {
+        width: '51',
+        height: '51',
+        marginLeft: '162',
+        marginBottom: '5',
+    },
+    codeCompany: {
+        width: '355',
+        height: '30',
+        textAlign: 'center',
+        verticalAlign: 'middle',
+        fontSize: '15',
+        marginLeft: '10',
+        marginBottom: '20',
+    },
+    codeText: {
+        width: '355',
+        height: '30',
+        textAlign: 'center',
+        verticalAlign: 'middle',
+        fontSize: '13',
+        marginLeft: '10',
+        color: 'gray'
+    }
+}
+
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        code: "", //二维码
+        company: {}, //公司信息
+        user: {}, //用户信息,
+        name:'',//用户名
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+        wx.getStorage({
+            key: 'compayId',
+            success: res => {
+                console.log(res);
+                wx.$api.user.getShareCode(res.data).then(res => {
+                    this.setData({
+                        user: {
+                            job: res.job,
+                            cover: res.cover,
+                            name:options.name
+                        },
+                        company: {
+                            name: res.company,
+                            logo: res.logo,
+                            id: res.company_id
+                        },
+                        code: res.code
+                    })
+                })
+            }
+        })
+    },
+    /**
+     * 绘制分享海报
+     */
+    canvasDowImg() {
+        wx.showLoading({
+            title: "绘制海报中"
+        })
+        const wxml = `
+            <view class="code-content">
+                <text class="code-nickname">` + this.data.user.name + `</text>
+                <image class="code-img" src="` + this.data.code + `" mode="widthFix"></image>
+                <image class="code-logo" src="` + this.data.company.logo + `" mode="aspectFit"></image>
+                <text class="code-company">` + this.data.company.name + `</text>
+                <text class="code-text">扫一扫，快速了解我们的企业</text>
+            </view>
+        `
+        this.codeimg = this.selectComponent('.codeImg')
+        this.codeimg.renderToCanvas({
+            wxml,
+            style
+        }).then(() => {
+            this.codeimg.canvasToTempFilePath().then(res => {
+                console.log(res);
+                
+                if (res.tempFilePath) {
+                    wx.hideLoading()
+                    this.dowQrCodeImg(res.tempFilePath)
+                } else {
+                    wx.showToast({
+                        title: "绘制失败，请稍后重试",
+                        icon: "none"
+                    })
+                }
+            })
+        })
+    },
+
+    /**
+     * 保存canvas图片到本地
+     */
+    dowQrCodeImg(path) {
+        wx.saveImageToPhotosAlbum({
+            filePath: path,
+            success: () => {
+                wx.showToast({
+                    title: "保存成功，分享图已存储至您的手机相册",
+                    icon: "none"
+                })
+            },
+            fail: () => {
+                wx.showModal({
+                    title: "提示",
+                    content: "由于您的设置，系统暂无权限访问您的相册，保存海报失败",
+                    cancelText: "以后再说",
+                    cancelColor: "#4f4f4f",
+                    confirmText: "去设置",
+                    confirmColor: "#0b0041",
+                    success: res => {
+                        if (res.confirm) {
+                            wx.openSetting()
+                        }
+                    }
+                })
+            }
+        })
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+        return {
+            title: this.data.user.name + "邀请您快速了解" + this.data.company.name,
+            imageUrl: this.data.user.cover,
+            path: "/pages/employees/join/join?companyId=" + this.data.company.id
+        }
+    }
+})
--- a/pages/user/code/code.json
+++ b/pages/user/code/code.json
@@ -0,0 +1,8 @@
+{
+    "usingComponents": {
+        "wxml-to-canvas": "wxml-to-canvas"
+    },
+    "navigationBarTitleText"		: "分享海报",
+	"navigationBarBackgroundColor" 	: "#378fff",
+	"navigationBarTextStyle"		: "white"
+}
--- a/pages/user/code/code.wxml
+++ b/pages/user/code/code.wxml
@@ -0,0 +1,19 @@
+
+<wxml-to-canvas class="codeImg" width="375" height="525"></wxml-to-canvas>
+
+<view class="code-content">
+    <view class="code-nickname">{{user.name || "-"}}</view>
+    <view class="code-img">
+        <image class="code-img-src" src="{{code}}" mode="widthFix"></image>
+    </view>
+    <view class="code-logo">
+        <image class="code-logo-src" src="{{company.logo || '/static/images/logo_null.png'}}" mode="aspectFit"></image>
+    </view>
+    <view class="code-company">{{company.name}}</view>
+    <view class="code-text">扫一扫，快速了解我们的企业</view>
+</view>
+
+<view class="code-btns">
+    <button class="code-btn" size="default" open-type="share">转发邀请</button>
+    <button class="code-btn" size="default" bindtap="canvasDowImg">保存分享海报</button>
+</view>
--- a/pages/user/code/code.wxss
+++ b/pages/user/code/code.wxss
@@ -0,0 +1,73 @@
+.codeImg{
+    position: fixed;
+    left: -100%;
+    top: -100%;
+}
+
+/* 展示图片 */
+.code-content{
+    margin: 30rpx;
+    padding: 60rpx 30rpx;
+    background: white;
+    border-radius: 10rpx;
+    box-shadow: 0 0 6rpx 6rpx rgba(0, 0, 0, .02);
+    text-align: center;
+}
+
+.code-nickname{
+    font-size: 50rpx;
+    padding-bottom: 20rpx;
+}
+
+.code-text{
+    border-top: dashed 1rpx #ddd;
+    padding-top: 30rpx;
+    color: gray;
+    margin-top: 60rpx;
+    font-size: 26rpx;
+}
+
+.code-img{
+    padding: 70rpx 0;
+}
+
+.code-img-src{
+    width: 300rpx;
+    height: 300rpx;
+    background: #eee;
+    vertical-align: top;
+}
+
+.code-logo-src{
+    background: #eee;
+    width: 98rpx;
+    height: 98rpx;
+}
+
+.code-company{
+    padding-top: 20rpx;
+}
+
+/* 操作按钮 */
+.code-btns{
+    padding: 0 15rpx 50rpx 15rpx;
+    display: flex;
+}
+
+.code-btn[size="default"]{
+    background: #ddd;
+    width: 100%;
+    line-height: 90rpx;
+    height: 90rpx;
+    padding: 0;
+    border-radius: 10rpx;
+    margin: 0 15rpx;
+    font-size: 32rpx;
+    color: white;
+    background: #ff8c37;
+}
+
+.code-btn[size="default"]:last-child{
+    background: #378fff;
+}
+
--- a/pages/user/index.wxml
+++ b/pages/user/index.wxml
@@ -36,12 +36,13 @@
            </view>
            <text>我的订单</text>
        </navigator>
-        <view class="userNav-label" catchtap="showtoast">
+        <navigator hover-class="none" url="/pages/user/code/code?name={{info.user.nickname}}" class="userNav-label">
+        <!-- <view class="userNav-label" catchtap="showtoast"> -->
            <view class="userNav-label-img">
                <image src="/static/user_iocn/userNav_02.png"></image>
            </view>
            <text>分享海报</text>
-        </view>
+        </navigator>
    </view>

    <view class="userTool">
--- a/pages/user/setting/aboutUs/aboutUs.wxml
+++ b/pages/user/setting/aboutUs/aboutUs.wxml
@@ -2,6 +2,5 @@
 <!-- <rich-text nodes="{{nodes}}"></rich-text> -->
 <view>
  电子科技有限公司是一家集产品研发，生产及销售的大型高科技电子企业，是全球专业的液晶广告机，液晶电视及液晶拼接墙制造商，从创立伊始，历经多年的稳健发展，以推动国内液晶广告机的普及化为己任，以提升人类视听享受为目标，公司旗下品牌博视（TBOSV）已经成为全球普遍赞誉的知名品牌。上海域展电子科技有限公司成立于2006年。我们凭借着"以品质为根本、以创新求发展"的理念；力争以优质的全方位服务为客户提供具有竞争力价...
-
-电子科技有限公司是一家集产品研发，生产及销售的大型高科技电子企业，是全球专业的液晶广告机，液晶电视及液晶拼接墙制造商，从创立伊始，历经多年的稳健发展，以推动国内液晶广告机的普及化为己任，以提升人类视听享受为目标，公司旗下品牌博视（TBOSV）已经成为全球普遍赞誉的知名品牌。上海域展电子科技有限公司成立于2006年。我们凭借着"以品质为根本、以创新求发展"的理念；力争以优质的全方位服务为客户提供具有竞争力价...
+  电子科技有限公司是一家集产品研发，生产及销售的大型高科技电子企业，是全球专业的液晶广告机，液晶电视及液晶拼接墙制造商，从创立伊始，历经多年的稳健发展，以推动国内液晶广告机的普及化为己任，以提升人类视听享受为目标，公司旗下品牌博视（TBOSV）已经成为全球普遍赞誉的知名品牌。上海域展电子科技有限公司成立于2006年。我们凭借着"以品质为根本、以创新求发展"的理念；力争以优质的全方位服务为客户提供具有竞争力价...
 </view>