printable-coupon

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

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

安装

有三种安装方式

1. 使用npm

   npm i printable-coupon

2. 如果您使用HBuilderX创建的uniapp项目，点击跳转至插件市场查看该项目

3. 手动下载或者 git clone 本项目， 将其中的printable-coupon文件夹及内容放入项目中的components文件夹内， 用时直接import即可

在main.js中导入本组件

import printableCoupon from "printable-coupon";

Vue.use(printableCoupon);

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

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

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

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

属性说明：

| 属性名 | 是否必须 | 类型 | 默认值 | 说明 | | :------: | :------: | :-----: | :--------------------------: | :----------------------------------------------------------------------------------------------------------------: | | canvasID | 否 | String | posterCanvas | 等同于 canvas-id，不报错的情况下不建议修改 | | type | 否 | Number | 0 | 优惠券类型 0 代金券 1 折扣券 2 兑换券 | | leTitle | 否 | String | | 优惠券内部左侧显示的金额或折扣。当 type 为 2 时固定显示为兑换券 | | leDesc | 否 | Number | | 优惠券内部左侧满减金额。当金额<=0 时，显示【无门槛使用】。当 type 为 2 时不显示 | | riTitle | 否 | String | | 优惠券内部右侧标题 | | riTime | 否 | String | | 优惠券内部右侧领取时间限制 | | showDesc | 否 | Boolean | true | 是否展示下半部分详情区，默认展示 | | shop | 否 | String | | 商家名称。在 showDesc 为 true 时才会展示 | | address | 否 | String | | 商家地址（最多显示 28 个字，共两行，如果超过 28 个字则显示前 27 个字并显示三个点）。在 showDesc 为 true 时才会展示 | | phone | 否 | String | | 商家电话。在 showDesc 为 true 时才会展示 | | wxchat | 否 | String | | 商家微信。在 showDesc 为 true 时才会展示 | | icons | 否 | Object | shop，address，phone，wxchat | 详情区用到的 icons。在 showDesc 为 true 时才会展示。强烈建议更改为自己图片服务器的网址 |

​ 详情区用到的 icons ：

事件说明：

| 事件称名 | 说明 | | :------: | :-----------------------------------------: | | success | success(e){ console.log('临时图片地址:',e } |

例子：

<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>