更新记录

1.7.3(2021-11-25)

更新了失效后的样式,并且对按钮点击功能做了判断,已失效的优惠券点击时会提示已失效,并且不会触发领取功能

1.7.2(2021-10-22)

新增了一些属性,可以动态的修改自己想要的样式,更加自由灵活

查看更多

平台兼容性

Vue2 Vue3
×
App 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 快应用
× × × × × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

前言

你们的使用、评论与收藏,是我更新组件的动力。同时我会尽量保证代码的简洁性,让你们能读懂源码,希望我的组件源码,能给到你们一些学习上的帮助,谢谢

有问题,或者想和我讨论一下小程序的一些问题,可以添加我的qq(1113237401)好友哦。感谢阅读

使用

引入

 <lgf-coupon></lgf-coupon>

lgf-coupon属性

参数 说明 类型 默认值
coupons 优惠券的数据,可以设置优惠券价格,优惠券名称,优惠券的介绍描述,优惠券的有效期,下面有详细介绍 Array -
color 优惠券左右两个半圆的背景色,需要根据自己页面的背景色经行调整 String #f3f3f4
discountColor 折扣金额的字体颜色 String #f52443
expireColor 有效期的背景色 String #f5dfde
btnColor 按钮的颜色 String #e6005c
coupons数据示例
<lgf-coupon :coupons="coupons"></lgf-coupon>
coupons:{
    type:Array,
    default:[
    {
        couponName:'无门槛优惠券',
        expire:'2020-12-12 12:12:00至2020-12-12 12:12:00',
        discount:15,
        limit:'仅限于xxx使用',
        btn:'领取',
        state:null
    },{
        couponName:'无门槛优惠券',
        expire:'今日到期',
        discount:15,
        limit:'仅限于xxx使用',
        btn:'领取',
        state:"expired"
    },{
        couponName:'无门槛优惠券',
        expire:'今日到期',
        discount:15,
        limit:'仅限于xxx使用',
        btn:'去使用',
        state:"used"
    }]
}

coupons属性描述

属性 作用 类型 可选值
couponName 优惠券的名称:无门槛优惠券、王者优惠券…… String
expire 有效期 String
discount 折扣金额 Number
limit 优惠券的限制:只能用于交电话费,物业费…… String
btn 按钮文字:领取,使用…… String
state 优惠券的状态:已失效 String expired

事件

getCoupon

领取优惠券时使用

<lgf-coupon @getCoupon="getCoupon"></lgf-coupon>
getCoupon(item){
    //这是点击领取优惠券时触发的事件
}

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问