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…
阅读更多...
神经网络model训练时loss=nan【原因总结】

神经网络model训练时loss=nan【原因总结】

一、Loss functions 中含 F.log_softmax()函数 原因： 由于在计算log_softmax(x)时, 出现log(0)的情况。 解决方法： 给log_softmax的参数x添加一个很小的数： out=F.log_softmax(x+1e-10).二、loss_function(x)函数参数中出现nan 原因： 网络的生成features x 中含有nan. 解…
阅读更多...
python常用设计模式，单例模式和工厂设计模式

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

python常用设计模式&#xff0c;单例和工厂设计模式Demo 单例模式 单例设计模式是一种创建型设计模式&#xff0c;它确保一个类只有一个实例&#xff0c;并提供一个全局访问点来获取该实例。 应用场景&#xff1a;日志记录、线程池、缓存等 优点&#xff1a; 全局访问&…
阅读更多...
gin入门教程（2）：go安装以及初始目录构建

gin入门教程（2）：go安装以及初始目录构建

2.1 安装 Go 1. 下载 Go 访问 Go 语言的官方网站 golang.org。根据您的操作系统&#xff08;Windows、macOS 或 Linux&#xff09;选择合适的安装包下载。 2. 安装 Go Windows&#xff1a; 运行下载的 .msi 安装程序&#xff0c;按照提示完成安装。 macOS&#xff1a; 可以…
阅读更多...
洛谷题解 - P1162 填涂颜色

洛谷题解 - P1162 填涂颜色

目录 填涂颜色题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示题解思路代码 填涂颜色 题目描述 由数字 0 0 0 组成的方阵中&#xff0c;有一任意形状的由数字 1 1 1 构成的闭合圈。现要求把闭合圈内的所有空间都填写成 2 2 2。例如&#xff1a; 6 6 6\times…
阅读更多...
驱动开发系列20 - Linux Graphics Xorg-server 介绍

驱动开发系列20 - Linux Graphics Xorg-server 介绍

一: 概述 X.Org Server 是由 X.Org 基金会管理的 X Window System (X11) 显示服务器的自由开源实现。客户端 X Window System 协议的实现以 X11 库的形式存在，这些库作为与 X 服务器通信的有用 API。有两个主要的 X11 库。第一个库是 Xlib，它是最初的 C 语言 X11 API；…
阅读更多...
python的散列类型与字符编码

python的散列类型与字符编码

文章目录 一、 初识散列类型(无序序列)二、认识集合集合的方法增删 二、认识字典字典方法增删改查 声明空变量 三、字符编码元组名() #声明一个空元组 一、 初识散列类型(无序序列) 数据类型分为3种: python的序列类型有好几种&#xff0c;之前的博文讲到了两种类型 1.数值类型…
阅读更多...
如何理解 HTTP 是无状态的，以及它与 Cookie 和 Session 之间的联系

如何理解 HTTP 是无状态的，以及它与 Cookie 和 Session 之间的联系

文章目录 一、什么是 HTTP&#xff1f;无状态的含义 二、为什么 HTTP 是无状态的&#xff1f;三、Cookie 和 Session 的引入1. Cookie特点&#xff1a;示例&#xff1a; 2. Session特点&#xff1a;示例&#xff08;Java Servlet&#xff09;&#xff1a; 四、HTTP、Cookie 和 …
阅读更多...
Appium中的api（一）

Appium中的api（一）

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

PostgreSQL的神秘面纱——pg_settings视图全解析

哈喽，大家好，我是木头左！ 概述 PostgreSQL提供了丰富的配置选项，允许用户根据具体需求调整数据库的行为和性能。其中，pg_settings 视图是 PostgreSQL 提供的一个系统视图，用于显示和修改数据库的配置参数。本文将详细介绍 pg_settings 视图中的每个字段及其含义，帮助读…
阅读更多...
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.第三问 首先&#…
阅读更多...
GitLab CVE-2024-6389、CVE-2024-4472 漏洞解决方案

GitLab CVE-2024-6389、CVE-2024-4472 漏洞解决方案

极狐GitLab 近日发布安全补丁版本17.3.2, 17.2.5, 17.1.7&#xff0c;修复了17个安全漏洞&#xff0c;本分分享其中两个漏洞 CVE-2024-6389、CVE-2024-4472 两个漏洞详情及解决方案。 极狐GitLab 正式推出面向 GitLab 老旧版本免费用户的专业升级服务&#xff0c;为 GitLab 老…
阅读更多...
笔记本使用虚拟机，使用Ubuntu打开摄像头

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

最近在搞ros相关的内容&#xff0c;亲测了一下虚拟机Ubuntu打开摄像头&#xff0c;也是需要简单的设置的。 只需要 简单设置这四步 目录 设置usb3.1打开摄像头查看摄像头显示摄像头内容 设置usb3.1 这一步是为了防止打开摄像头的时候&#xff0c;没有画面。 打开摄像头 选…
阅读更多...
STM32Cube高效开发教程＜高级篇＞＜FreeRTOS＞(九)-----信号量及二值量例程

STM32Cube高效开发教程＜高级篇＞＜FreeRTOS＞(九)-----信号量及二值量例程

声明：本人水平有限，博客可能存在部分错误的地方，请广大读者谅解并向本人反馈错误。    本专栏博客参考《STM32Cube高效开发教程(高级篇)》，有意向的读者可以购买正版书籍辅助学习，本书籍由王维波老师、鄢志丹老师、王钊老师倾力打造，书籍内容干货满满。   本专栏在前…
阅读更多...
V4L2驱动框架

V4L2驱动框架

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

Copyright @ 2022~2023