uniapp移动端优惠券! 附源码!!!!

本文为常见的移动端uniapp优惠券，共有6种优惠券样式（参考了常见的优惠券），文本内容仅为示例，您可在此基础上调整为你想要的文本

预览效果

通过模拟数据，实现点击使用优惠券让其变为灰色的效果（模拟已使用效果）

我用的是uniapp来写的

源码直接到uniapp项目中直接运行就可以


<template><view class="content"><view class="yhq1" :class="item.isUse ? 'use' : ''" v-for="(item, index) in yhqList1" :key="index"@click="click(item)"><view class="left">￥{{ item.price }}</view><view class="right"><view class="tit">{{ item.title }}</view><view class="desc"><view class="p">{{ item.time }}</view></view></view></view><view class="yhq2" :class="item.isUse ? 'use' : ''" v-for="(item, index) in yhqList2" :key="index"@click="click(item)"><view class="left">￥{{ item.price }}</view><view class="right"><view class="tit">{{ item.title }}</view><view class="desc"><view class="p">{{ item.time }}</view></view></view></view><view class="yhq3" :class="item.isUse ? 'use' : ''" v-for="(item, index) in yhqList3" :key="index"@click="click(item)"><view class="left">￥{{ item.price }}</view><view class="right"><view class="tit">{{ item.title }}</view><view class="desc"><view class="p">{{ item.time }}</view></view></view></view><view class="yhq4" :class="item.isUse ? 'use' : ''" v-for="(item, index) in yhqList4" :key="index"@click="click(item)"><view class="left">￥{{ item.price }}</view><view class="right"><view class="tit">{{ item.title }}</view><view class="desc"><view class="p">{{ item.time }}</view></view></view></view><view class="yhq5" :class="item.isUse ? 'use' : ''" v-for="(item, index) in yhqList5" :key="index"@click="click(item)"><view class="left">￥{{ item.price }}</view><view class="right"><view class="tit">{{ item.title }}</view><view class="desc"><view class="p">{{ item.time }}</view></view></view></view><view class="yhq6" :class="item.isUse ? 'use' : ''" v-for="(item, index) in yhqList6" :key="index"@click="click(item)"><view class="left">￥{{ item.price }}</view><view class="right"><view class="tit">{{ item.title }}</view><view class="desc"><view class="p">{{ item.time }}</view></view></view></view></view>
</template><script>
export default {data() {return {isUse: false, // 是否已使用yhqList1: [{isUse: false,title: '某某商品优惠券11',price: '100',time: '有效期至: 2025年10月1日'},{isUse: false,title: '某某商品优惠券12',price: '100',time: '有效期至: 2025年10月1日'},],yhqList2: [{isUse: false,title: '某某商品优惠券21',price: '100',time: '有效期至: 2025年10月1日'},{isUse: false,title: '某某商品优惠券22',price: '100',time: '有效期至: 2025年10月1日'},],yhqList3: [{isUse: false,title: '某某商品优惠券31',price: '100',time: '有效期至: 2025年10月1日'},{isUse: false,title: '某某商品优惠券32',price: '100',time: '有效期至: 2025年10月1日'},],yhqList4: [{isUse: false,title: '某某商品优惠券41',price: '100',time: '有效期至: 2025年10月1日'},{isUse: false,title: '某某商品优惠券42',price: '100',time: '有效期至: 2025年10月1日'},],yhqList5: [{isUse: false,title: '某某商品优惠券51',price: '100',time: '有效期至: 2025年10月1日'},{isUse: false,title: '某某商品优惠券52',price: '100',time: '有效期至: 2025年10月1日'},],yhqList6: [{isUse: false,title: '某某商品优惠券61',price: '100',time: '有效期至: 2025年10月1日'},{isUse: false,title: '某某商品优惠券62',price: '100',time: '有效期至: 2025年10月1日'},],}},methods: {click(item) {console.log(item);uni.showToast({title: "使用优惠券",icon: "none"})item.isUse = true}}
}
</script><style>
.content {padding: 20rpx;
}.yhq1 {width: 100%;height: 100px;margin-top: 15px;background-image: linear-gradient(-225deg, #9EFBD3 0%, #57E9F2 48%, #45D4FB 100%);-webkit-mask: radial-gradient(circle at 20px 20px, #ff0000 20px, blue 0);-webkit-mask-position: -20px -20px;display: flex;justify-content: space-around;align-items: center;padding: 20rpx 30rpx 20rpx 50rpx;box-sizing: border-box;
}.use {filter: grayscale(1);/*  
是CSS3中的一个滤镜功能，用于将元素的内容（如图像、文本或背景）转换为灰度图像。grayscale() 函数接受一个介于0%到100%之间的参数，该参数定义了图像从原始彩色转换为灰度的程度。
当参数为0% 时，图像保持原有的彩色状态，不进行任何灰度转换。
当参数为100% 时，图像完全转换为灰度，所有颜色信息都被去除。
在中间值（如50%）时，图像会是部分彩色和部分灰度的混合。
这里的 1 相当于100%，表示最大的灰度转换程度。
*/
}.left {width: 20%;font-size: 50rpx;font-weight: 700;color: #fff;
}.right .tit {font-size: 33rpx;color: #fff;font-weight: 600;
}.right .desc .p {font-size: 28rpx;color: #d8d8d8;margin-top: 10rpx;
}.yhq2 {width: 100%;height: 100px;margin-top: 15px;background-image: linear-gradient(-225deg, #FFE29F 0%, #FFA99F 48%, #FF719A 100%);-webkit-mask: radial-gradient(circle at 20px, #0000 16px, blue 0);display: flex;justify-content: space-around;align-items: center;padding: 20rpx 30rpx 20rpx 50rpx;box-sizing: border-box;
}.yhq3 {width: 100%;height: 100px;margin-top: 15px;background-image: linear-gradient(to right, #fddb92 0%, #d1fdff 100%);-webkit-mask: radial-gradient(circle at 0, #0000 20px, blue 0),radial-gradient(circle at right, #0000 20px, blue 0);-webkit-mask-size: 51%;-webkit-mask-position: 0, 100%;-webkit-mask-repeat: no-repeat;display: flex;justify-content: space-around;align-items: center;padding: 20rpx 30rpx 20rpx 50rpx;box-sizing: border-box;
}.yhq3 .left {width: 35%;height: 100%;display: flex;align-items: center;border-right: 1px dashed #fff;
}.yhq3 .right {width: 55%;text-align: center;
}.yhq4 {width: 100%;height: 100px;margin-top: 15px;
background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);-webkit-mask: radial-gradient(circle at 10px, #0000 10px, blue 0);-webkit-mask-position: -10px;-webkit-mask-size: 100% 30px;display: flex;justify-content: space-around;align-items: center;padding: 20rpx 30rpx 20rpx 50rpx;box-sizing: border-box;
}.yhq5 {width: 100%;height: 100px;margin-top: 15px;
background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);-webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, blue 0);-webkit-mask-position: -20px -20px;-webkit-mask-size: 50%;display: flex;justify-content: space-around;align-items: center;padding: 20rpx 30rpx 20rpx 50rpx;box-sizing: border-box;
}.yhq5 .left {width: 35%;height: 100%;display: flex;align-items: center;border-right: 1px dashed #fff;
}.yhq5 .right {width: 55%;text-align: center;
}.yhq6 {width: 100%;height: 100px;margin-top: 15px;background-image: linear-gradient(to right, #ff9569 0%, #e92758 100%);-webkit-mask: radial-gradient(circle at left center, transparent 20px, blue 20px);display: flex;justify-content: space-around;align-items: center;padding: 20rpx 30rpx 20rpx 50rpx;box-sizing: border-box;
}</style>

欢迎进群讨论前端内容 谢谢大家
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/883077.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

来自骨关节炎计划的膝关节MR图像的自动异常感知3D骨骼和软骨分割|文献速递-基于生成模型的数据增强与疾病监测应用

来自骨关节炎计划的膝关节MR图像的自动异常感知3D骨骼和软骨分割|文献速递-基于生成模型的数据增强与疾病监测应用

Title 题目 Automated anomaly-aware 3D segmentation of bones and cartilages in kneeMR images from the Osteoarthritis Initiative 来自骨关节炎计划的膝关节MR图像的自动异常感知3D骨骼和软骨分割 Background 背景 近年来&#xff0c;多个机器学习算法被提出用于图像…
阅读更多...
windows｜常见的文件伪装方法

windows｜常见的文件伪装方法

几种常见的文件伪装方法&#xff1a; 扩展名伪装unicode字符伪装压缩包伪装隐写术 方法仅限于学习目的&#xff0c;不用于任何恶意或非法用途。 ———— 一、扩展名伪装&#xff1a;假装是另一种类型的文件 修改文件的扩展名&#xff0c;使得文件看起来像其他类型的文件&a…
阅读更多...
python常用设计模式，单例模式和工厂设计模式

python常用设计模式，单例模式和工厂设计模式

python常用设计模式&#xff0c;单例和工厂设计模式Demo 单例模式 单例设计模式是一种创建型设计模式&#xff0c;它确保一个类只有一个实例&#xff0c;并提供一个全局访问点来获取该实例。 应用场景&#xff1a;日志记录、线程池、缓存等 优点&#xff1a; 全局访问&…
阅读更多...
洛谷题解 - P1162 填涂颜色

洛谷题解 - P1162 填涂颜色

目录 填涂颜色题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示题解思路代码 填涂颜色 题目描述 由数字 0 0 0 组成的方阵中&#xff0c;有一任意形状的由数字 1 1 1 构成的闭合圈。现要求把闭合圈内的所有空间都填写成 2 2 2。例如&#xff1a; 6 6 6\times…
阅读更多...
python的散列类型与字符编码

python的散列类型与字符编码

文章目录 一、 初识散列类型(无序序列)二、认识集合集合的方法增删 二、认识字典字典方法增删改查 声明空变量 三、字符编码元组名() #声明一个空元组 一、 初识散列类型(无序序列) 数据类型分为3种: python的序列类型有好几种&#xff0c;之前的博文讲到了两种类型 1.数值类型…
阅读更多...
Appium中的api（一）

Appium中的api（一）

目录 1.基础python代码准备 1--参数的一些说明 2--python内所要编写的代码 解释 2.如何获取包名和界面名 1-api 2-完整代码 代码解释 3.如何关闭驱动连接 4.安装卸载app 1--卸载 2--安装 5.判断app是否安装 6.将应用放到后台在切换为前台的时间 7.UIAutomatorViewer的使用 1--找…
阅读更多...
Oracle CONNECT BY、PRIOR和START WITH关键字详解

Oracle CONNECT BY、PRIOR和START WITH关键字详解

Oracle CONNECT BY、PRIOR和START WITH关键字详解 1. 基本概念2. 数据示例3. SQL示例3.1. 查询所有员工及其上级3.2. 显示层次结构3.3. 查询特定员工的子级 4. 结论 在Oracle数据库中&#xff0c;CONNECT BY、PRIOR和START WITH关键字主要用于处理层次结构数据&#xff0c;例如…
阅读更多...
5、JavaScript(四) ajax+js高级+BOM

5、JavaScript(四) ajax+js高级+BOM

25.ajax : 前端向后端异步的取数据而无需刷新页面的技术 1 公司中的整体工作流程 1、项目开发的流程 每个职位该做的工作&#xff1a; 产品经理&#xff1a;提需求的 与客户沟通 画出原型图给程序员使用 UI设计师&#xff1a;美化 替换UI框架&#xff1a;antd element-ui e…
阅读更多...
sql-labs靶场第十六关测试报告

sql-labs靶场第十六关测试报告

目录 一、测试环境 1、系统环境 2、使用工具/软件 二、测试目的 三、操作过程 1、寻找注入点 2、注入数据库 ①寻找注入方法 ②爆库&#xff0c;查看数据库名称 ③爆表&#xff0c;查看security库的所有表 ④爆列&#xff0c;查看users表的所有列 ⑤成功获取用户名…
阅读更多...
学习--四元数介绍

学习--四元数介绍

2022年的草稿箱里的一篇 四元数由William Rowan Hamilton发现 定义与复数类似&#xff0c;有三个虚部 q a b i c j d k qabicjdk qabicjdk 其中 i 2 j 2 k 2 i j k − 1 i^2j^2k^2ijk-1 i2j2k2ijk−1 四元数的模长&#xff1a; 四维的长度 加减法&#xff1a; 对应分…
阅读更多...
linux-牛刀小试

linux-牛刀小试

题目一&#xff1a; 1.第一问 首先创建用户tab在超级用户root的终端输入useradd tab 切换到tab用户&#xff1a; 推出重新登录到tab用户或者su – tab切换到tab用户 2.第二问 在桌面创建SHEGNCHAN目录 在SHENGCHAN文件夹下创建相应的文件&#xff1a; 3.第三问 首先&#…
阅读更多...
笔记本使用虚拟机，使用Ubuntu打开摄像头

笔记本使用虚拟机，使用Ubuntu打开摄像头

最近在搞ros相关的内容&#xff0c;亲测了一下虚拟机Ubuntu打开摄像头&#xff0c;也是需要简单的设置的。 只需要 简单设置这四步 目录 设置usb3.1打开摄像头查看摄像头显示摄像头内容 设置usb3.1 这一步是为了防止打开摄像头的时候&#xff0c;没有画面。 打开摄像头 选…
阅读更多...
V4L2驱动框架

V4L2驱动框架

文章目录 一、V4L2简介二、v4l2驱动关键组件&#xff08;一&#xff09;video_device结构体v4l2操作方法结构体v4l2的ioctl操作方法结构体 &#xff08;二&#xff09;v4l2_device结构体 一、V4L2简介 V4L2&#xff0c;即Video for Linux two&#xff0c;是Linux内核中用于视频…
阅读更多...
Linux Redis查询key与移除日常操作

Linux Redis查询key与移除日常操作

维护老项目Express node 编写的后端程序、有这么一个方法、没有设置redis过期时间&#xff08;建议设置过期时间&#xff0c;毕竟登录生产服务器并不是每个人都有权限登录的&#xff01;&#xff01;&#xff01;&#xff09;。如果变动只能通过登录生产服务器、手动修改… 于…
阅读更多...
本地docker部署中间件和应用

本地docker部署中间件和应用

Docker Desktop搭建 安装完成之后使用docker下载镜像&#xff0c;报以下错误&#xff1a; 解决办法&#xff1a; Docker Engine配置能访问的镜像地址&#xff1a; {"builder": {"gc": {"defaultKeepStorage": "20GB","enabled…
阅读更多...
使用 Elasticsearch 作为向量数据库询问有关你的 GitHub 存储库的问题

使用 Elasticsearch 作为向量数据库询问有关你的 GitHub 存储库的问题

作者&#xff1a;来自 Elastic Fram Souza 本博客介绍了使用 RAG 和 Elasticsearch 实现语义代码查询的 GitHub Assistant&#xff0c;提供对 GitHub 存储库的洞察&#xff0c;并可扩展到 PR 反馈、问题处理和生产准备情况审查。 该项目允许你直接与 GitHub 存储库交互并利用语…
阅读更多...
【YOLOv11】制作使用YOLOv11的docker环境

【YOLOv11】制作使用YOLOv11的docker环境

目录 一 安装docker 1 安装依赖 2 添加docker官网 GPG 密钥、设置stable 仓库 3 安装 4 使用 二 环境制作 ① 拉基础镜像 ② 起容器 ③ 安装Anaconda3 ④ 安装YOLO11 ⑤ /root/.bashrc ⑥ 退出容器 ⑦ 保存镜像 ⑧ 镜像的使用 一 安装docker ubuntu:20.04 1 安装…
阅读更多...
Java项目-基于springboot框架的人职匹配推荐系统项目实战(附源码+文档)

Java项目-基于springboot框架的人职匹配推荐系统项目实战(附源码+文档)

作者&#xff1a;计算机学长阿伟 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、ElementUI等&#xff0c;“文末源码”。 开发运行环境 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBoot、Vue、Mybaits Plus、ELementUI工具&#xff1a;IDEA/…
阅读更多...
【LeetCode】每日一题 2024_10_24 找到连续赢 K 场比赛的第一位玩家（模拟/脑筋急转弯）

【LeetCode】每日一题 2024_10_24 找到连续赢 K 场比赛的第一位玩家（模拟/脑筋急转弯）

前言 每天和你一起刷 LeetCode 每日一题~ 1024 程序员节快乐~ LeetCode 启动&#xff01; 题目&#xff1a;找到连续赢 K 场比赛的第一位玩家 代码与解题思路 题目让我们从第一个元素开始让数组中的元素排队一个个打擂台&#xff0c;直到找到最先赢下 k 次的元素编号 因为…
阅读更多...
代码随想录算法训练营第六天|454四数相加II、 383赎金信、15三数之和、18四数之和

代码随想录算法训练营第六天|454四数相加II、 383赎金信、15三数之和、18四数之和

day06 1. 454四数相加II 首先定义 一个unordered_map&#xff0c;key放a和b两数之和&#xff0c;value 放a和b两数之和出现的次数。遍历大A和大B数组&#xff0c;统计两个数组元素之和&#xff0c;和出现的次数&#xff0c;放到map中。定义int变量count&#xff0c;用来统计 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023