更新记录

1.0.0（2021-06-10）

无

平台兼容性

printable-coupon

一个适用于uniapp微信小程序端的生成优惠券分享图片（5:4）的组件

可微信扫码该二维码进行测试：

安装

有两种种安装方式

1. 使用npm

   npm i printable-coupon

2. 如果您使用HBuilderX创建的uniapp项目，点击右侧使用HbuilderX导入插件一键导入

在main.js中导入本组件

import printableCoupon from "printable-coupon";

Vue.use(printableCoupon);

或者直接在用到该组件的页面import导入

在需要的地方，通过ref的方式调用onCanvas()即可在事件success中拿到图片的地址

ps：如控制台报错 getImageInfo:xxxxxxxxx... 请先检查详情区的四个图标有无配置download域名白名单

为保证速度，用时最好下载下来存放于自己的图片服务器中

属性说明：

详情区用到的icons ：

事件说明：

例子：

<template>
    <view>
        <printable-coupon ref="poster"
            :type="current" :leTitle="coupon.num" 
            :leDesc="coupon.price" :riTitle="coupon.title" 
            :riTime="coupon.time" :showDesc="shopShow==0?true:false"
            :shop="desc.shopName" :address="desc.address"
            :phone="desc.phone" :wxchat="desc.wxchat"
            @success="shareSuccess"></printable-coupon>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                imgSrc:'',
                shopShow:0,
                coupon:{
                    num:'',
                    price:'',
                    title:'',
                    time:'',
                },
                desc:{
                    shopName:'',
                    address:'',
                    phone:'',
                    wxchat:''
                }
            }
        },
        async onShareAppMessage(res) {
            //调用组件中的方法
            await  this.$refs.poster.onCanvas()
            return {
                //标题
                title: '测试',
                //图片 即通过该组件生成的图片地址
                imageUrl: this.imgSrc,
            };
        },
        methods: {
            shareSuccess(e){
                console.log('imgSrc:',e)
                this.imgSrc = e
            },
        }
    }
</script>