Printable-coupon NPM

printable-coupon

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

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

安装

有三种安装方式

使用npm
```
npm i printable-coupon
```
如果您使用HBuilderX创建的uniapp项目，点击跳转至插件市场查看该项目
手动下载或者 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>

printable-coupon components

printable-coupon vue

@everything-registry/sub-chunk-2473 printable-coupon

3 years ago

3 years ago

3 years ago

3 years ago