uniapp高颜值优惠券组件，支持多选，单选（支持互斥）

于 2025-04-06 19:56:49 发布
阅读量243 收藏 2
点赞数 5
文章标签： uniapp 小程序 优惠券 高颜值 vue 优惠
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cxsj999/article/details/147029168
版权

先上图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

前言

最近项目需要一个多选且互斥的优惠券组件，找了好久，发现并没有于是决定自己撸起袖子造一个 （互斥比如说二个优惠券A,B选A,就不能选B,选B就不能选A）

实现思路

  • 1 先写单选优惠券组件

  • 2 单选优惠券添加复选框

  • 3复选框组件是否勾选由数据里面的checked决定

    javascript checked: false||true

  • 4 动态改变每个优惠券里面的checked就能实现多选效果

  • 5 优惠券选中状态改变时候判断，循环判断每个优惠券的右上角可叠加提示和左下角的不可叠加提示是否显示显示即可

  • 6获取所有checked为true的优惠券就是用户勾选的

源码下载

github nx-coupon

Dcloud插件市场 nx-coupon

作者相关文章

反编译获取任何微信小程序源码——看这篇就够了

零成本，零基础搭建获利的影视小程序

零基础搭建智能垃圾分类小程序(可做毕设，可加入流量主，赚取零花钱)

cxsj999
关注
购物栏加优惠券使用案例-- vue组件传值
m0_66717003的博客
10-26 859
一个购买物品并且使用优惠券的案例
elementUI多选组件的全部与单选选项互斥逻辑
qq_41728872的博客
06-14 1953
使用多选下拉框组件，会出现选择‘全部’与选择某一项互斥的逻辑 <template> <div> <div> <el-row :class="[this.isDataMore ? 'el-icon-arrow-down' : 'el-icon-arrow-up']" class="one-row"> <el-col :xs="20" :sm="20" :md="18
移动端优惠券（uniapp）
qq_59697494的博客
04-11 1304
源码为uniapp项目源码，如需要优惠券，以下代码一键复制到你的页面中，共六种样式，每一个展示了两次（因为一般都是列表），每一个都有自己的类样式（yhq1，yhq2，...yhq6），按照你的需求删除不需要的，留下你想要的即可。time: '有效期至: 2025年10月1日'time: '有效期至: 2025年10月1日'time: '有效期至: 2025年10月1日'time: '有效期至: 2025年10月1日'time: '有效期至: 2025年10月1日'
支持多选，单选，互斥优惠券组件
源码好优多
04-10 949
效果图 效果图链接 https://ext.dcloud.net.cn/plugin?id=7878 前言 最近项目需要一个多选且互斥的优惠券组件，找了好久，发现并没有于是决定自己撸起袖子造一个 （互斥比如说二个优惠券A,B选A,就不能选B,选B就不能选A） 实现思路 1 先写单选优惠券组件 2 单选优惠券添加复选框 3复选框组件是否勾选由数据里面的checked决定 javascript checked: false||true 4 动态改变每个优惠券里面的checked就能实现多选
vcoupon一款基于vue的卡券组件
08-12
v-coupon 一款基于 vue 的卡券组件
仿京东拼多多优惠券弹出框popup组件的实践与探索
最新发布
chenchuang0128的博客
07-19 858
在前端开发的领域里，随着业务逻辑的日益复杂和技术的不断进步，组件化开发逐渐成为了一种主流的开发模式。组件化不仅提高了开发效率，降低了维护成本，更使得代码复用和模块化管理成为可能。本文将介绍一种仿京东拼多多领取优惠券弹出框popup组件的开发实践，并探讨其在实际应用中的意义与价值。一、组件化开发概述在传统的开发方式中，整个系统往往被构建成一个整块应用，这样的结构使得任何小的改动或功能的增加都可能牵一发而动全身，导致整体逻辑的修改。随着业务复杂性的增加，这种开发方式显然已经无法满足现代前端开发的需求。
vue两个子组件互斥显示
miraclepbs的博客
12-18 984
1.在父组件分别数据声明provinceActive=false，cityActive=false,并将showWrapperActive传入到两子组件中 :showWrapperActive=“provinceActive”,:showWrapperActive=“cityActive” 2.在子组件中利用props接收showWrapperActive,动态绑定类名class中‘active’=showWrapperActive 3.在父组件中注册change_active方法 @change_acti
单选多选以及单选互斥.rar
07-21
总的来说，“单选多选以及单选互斥.rar”项目提供了一个学习和实践Android选择组件功能的良好起点，涵盖了基本的单选、多选以及单选互斥的实现，对于初学者和进阶开发者都有参考价值。通过研究这个项目，开发者可以...
Android listview ExpandableListView实现多选，单选，全选，edittext实现批量输入的实例代码
08-31
主要介绍了Android listview ExpandableListView实现多选，单选，全选，edittext实现批量输入的实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
多个按钮单选/多选，高度自适应
07-09
本话题主要关注的是如何实现“多个按钮的单选或多选，并且具有高度自适应”的功能。这种功能常见于各种应用，例如设置选项、问卷调查或者用户偏好选择等场景。 首先，让我们详细探讨“单选”和“多选”按钮的概念。...
vue优惠券模板
06-01
移动端优惠券点击使用效果，通用的商城优惠券选择兑换点击付款手机页面模板。
vue实现商城购物车功能
12-29
本文实例为大家分享了vue实现商城购物车功能的具体代码，供大家参考，具体内容如下 首先，先上最终的效果图 效果并不是很好看，但是这不是重点。 首先，我们先看下布局： <template> <div class=shopcar id=demo04> <div class=header-title> <h3>购物车</h3> </div> <div class=car-list> <ul> <li class=car-item v-for=(item,index)> <div class=input-block>
mobiscroll多选互斥
10-21
在本场景中，我们关注的是其在多选功能上的互斥实现，即"mobiscroll多选互斥"。这个特性主要用于优化用户体验，特别是当用户需要在一组选项中进行选择时，确保他们的选择是互斥的，即选择了某个特定选项后，其他相关...
前端Vue仿京东淘宝我的优惠券列表组件 用于电商App/小程序我的优惠券列表功能页面
chenchuang0128的博客
07-09 1496
今天给大家介绍的一款组件是：仿京东淘宝我的优惠券列表组件 用于电商我的优惠券列表页面，附带完整代码下载地址：https://ext.dcloud.net.cn/plugin?随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。-- color：主题色 couponList：优惠券数组 @itemClick：条目点击-->* 生命周期函数--监听页面加载。* 用户点击右上角分享。
css制作类似优惠券的卡片样式（vue）
qq_38337245的博客
12-16 1839
有点小瑕疵，勉强能用，安卓机使用下面的样式有缝，只能加了0.01、0.02的高度去缝，不完美半圆不圆，苹果机测试没问题。 代码： <!-- 卡片详情 --> <template> <div class="pages"> <div class="bg-img" :style="'background: url('+require('@/assets/images/biaozhi_kapian.png')+') no-repeat;background-..
Spring Boot + Vue的网上商城之优惠券和会员等级优惠实现
qq_22593423的博客
09-09 877
在网上商城系统中，优惠券和会员等级优惠是吸引用户的重要手段。本篇博客将介绍如何使用Spring Boot和Vue实现网上商城中的优惠券和会员等级优惠功能。首先，我们需要在后端定义优惠券、会员等级和用户实体类，并通过关联表建立它们之间的关联。然后，在前台实现中，我们可以展示用户可用的优惠券列表，并提供领取优惠券的功能。同时，我们还可以展示用户的会员等级信息，并提供选择会员等级的功能。最后，在后端实现中，我们可以根据用户的会员等级和可用的优惠券进行优惠计算，得到最终的订单金额。
优惠券样式
XYLHxylh的博客
07-09 1342
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com...
uniapp--支付宝领券组件插件使用
weixin_42464273的博客
08-29 1275
uniapp 小程序 支付宝商家券 领券组件 get-coupon onGetCouponSuccess
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值