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>

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

使用Dask在多块AMD GPU上加速XGBoost

使用Dask在多块AMD GPU上加速XGBoost

Accelerating XGBoost with Dask using multiple AMD GPUs — ROCm Blogs 2024年1月26日 由Clint Greene撰写。 XGBoost 是一个用于分布式梯度提升的优化库。它已经成为解决回归和分类问题的领先机器学习库。如果您想深入了解梯度提升的工作原理&#xff0c;推荐阅读 Introduc…
阅读更多...
Maven入门到实践：从安装到项目构建与IDEA集成

Maven入门到实践：从安装到项目构建与IDEA集成

目录 1. Maven的概念 1.1 什么是Maven 1.2 什么是依赖管理 1.3 什么是项目构建 1.4 Maven的应用场景 1.5 为什么使用Maven 1.6 Maven模型 2.初识Maven 2.1 Maven安装 2.1.1 安装准备 2.1.2 Maven安装目录分析 2.1.3 Maven的环境变量 2.2 Maven的第一个项目 2.2.1…
阅读更多...
深度学习Pytorch-Tensor函数

深度学习Pytorch-Tensor函数

深度学习Pytorch-Tensor函数 Tensor的三角函数Tensor中其他的数学函数Tensor中统计学相关的函数&#xff08;维度&#xff0c;对于二维数据&#xff1a;dim0 按列&#xff0c;dim1 按行&#xff0c;默认 dim1&#xff09;Tensor的torch.distributions(分布函数)Tensor中的随机抽…
阅读更多...
图论day62|拓扑排序理论基础、117.软件构建（卡码网）、最短路径之dijkstra理论基、47.参加科学大会（卡码网 第六期模拟笔试）

图论day62|拓扑排序理论基础、117.软件构建（卡码网）、最短路径之dijkstra理论基、47.参加科学大会（卡码网 第六期模拟笔试）

图论day62|拓扑排序理论基础、117.软件构建&#xff08;卡码网&#xff09;、最短路径之dijkstra理论基、47.参加科学大会&#xff08;卡码网 第六期模拟笔试&#xff09; 拓扑排序理论基础117.软件构建&#xff08;卡码网&#xff09;最短路径之dijkstra理论基础47.参加科学大…
阅读更多...
IDEA 安装热部署 JRebel -新版-亲测有效

IDEA 安装热部署 JRebel -新版-亲测有效

由于采用直接从idea 下载的插件会出现版本不适配&#xff0c;激活不成功 下载地址&#xff1a;https://note.youdao.com/web/#/file/recent/note/WEB0e3010b4015162dc6a11d6c0ab11f750/ 导入刚才下载的插件 其中&#xff0c;Team URL可以使用在线GUID地址在线生成GUID 拿到GUID…
阅读更多...
Node.js 模块化

Node.js 模块化

1. 介绍 1.1 什么是模块化与模块 ? 将一个复杂的程序文件依据一定规则&#xff08;规范&#xff09;拆分成多个文件的过程称之为 模块化其中拆分出的 每个文件就是一个模块 &#xff0c;模块的内部数据是私有的&#xff0c;不过模块可以暴露内部数据以便其他模块使用 1.2 什…
阅读更多...
蓝桥杯注意事项

蓝桥杯注意事项

蓝桥杯注意事项 比赛注意事项 能暴力枚举就暴力枚举&#xff0c;能用简单的思路做就尽量用简单的思路做。认真审核题目的题意和输入输出的要求&#xff0c;避免因为误解题意而导致题目错误。对于提供多组测试样例或者需要对一个过程重复进行循环的代码&#xff0c;要时刻记住…
阅读更多...
第四范式发布AI Data Foundry，加速大模型训练及应用

第四范式发布AI Data Foundry，加速大模型训练及应用

产品上新 Product Release 今日&#xff0c;第四范式发布AI Data Foundry&#xff0c;提供基于AI技术&#xff0c;融合人类专家反馈的高质量、丰富可扩展、多样化的数据集&#xff0c;大幅提升模型效果。同时&#xff0c;通过模型评估系统及工具&#xff0c;对模型效果进行有效…
阅读更多...
w外链如何跳转微信小程序

w外链如何跳转微信小程序

要创建外链跳转微信小程序&#xff0c;主要有以下几种方法&#xff1a; 使用第三方工具生成跳转链接&#xff1a; 注册并登录第三方外链平台&#xff1a;例如 “W外链” 等工具。前往该平台的官方网站&#xff0c;使用手机号、邮箱等方式进行注册并登录账号。选择创建小程序外…
阅读更多...
windows SVN 忘记账号密码

windows SVN 忘记账号密码

一、本地登录过且记录未清空 1、打开C:\Users\用户名\AppData\Roaming\Subversion\auth\svn.simple目录 2、下载SvnPwd.exe文件 链接地址&#xff1a;TortoiseSVN Password Decrypter 复制SvnPwd.exe到 C:\Users\用户名\AppData\Roaming\Subversion\auth\svn.simple目录下 3、运…
阅读更多...
Web组态-仪器间的相互通信（WebSocket技术）

Web组态-仪器间的相互通信（WebSocket技术）

Web组态&#xff0c;通过Vue3TypeScriptWebSocket技术实现平台仪器间的相互通信&#xff0c;用于设计工业化虚拟仿真。 界面图如下&#xff08;之前文章有详细教学&#xff09; 如下是通信设备虚拟仿真的三个仪器&#xff0c;设计初衷是想三个仪器能够数据互通&#xff0c;实现…
阅读更多...
【Thymeleaf】spring boot模板引擎thymeleaf用法详解

【Thymeleaf】spring boot模板引擎thymeleaf用法详解

快速入门Thymeleaf 1️⃣ 什么是Thymeleaf&#xff1f;1️⃣ 模板入门2️⃣ 创建测试工程2️⃣ 配置文件2️⃣ 创建controller2️⃣ 写一个html页面2️⃣ 启动测试 1️⃣ Thymeleaf基础2️⃣ 实体类2️⃣ 增加接口2️⃣ $符号使用2️⃣ *符号的使用2️⃣ 符号的使用2️⃣ #符号…
阅读更多...
一文掌握异步web框架FastAPI（五）-- 中间件（测试环境、访问速率限制、请求体解析、自定义认证、重试机制、请求频率统计、路径重写）

一文掌握异步web框架FastAPI（五）-- 中间件（测试环境、访问速率限制、请求体解析、自定义认证、重试机制、请求频率统计、路径重写）

接上篇：一文掌握异步web框架FastAPI（四）-CSDN博客 目录 七、中间件 15、测试环境中间件 16、访问速率限制中间件，即限制每个IP特定时间内的请求数（基于内存，生产上要使用数据库） 1）限制单ip访问速率 2）增加限制单ip并发（跟上面的一样，也是限制每个IP特定时间内的请…
阅读更多...
??? 命令行形式的简单功能的计算器的Shell脚本

??? 命令行形式的简单功能的计算器的Shell脚本

文章目录 需求编码Way1Way2&#xff1a; 测试 需求 需求分析&#xff1a; 支持浮点型&#xff1a;使用let命令 编码 Way1 用下循环吧&#xff01; #!/bin/bash # Author: # Date: # Description:# functions defines: input_check_to_startup() {num1$1num2$2isNum_statu…
阅读更多...
Node版本管理nvm

Node版本管理nvm

公司项目比较多&#xff0c;且有历史包袱&#xff0c;没时间升级&#xff0c;高版本的node无法在低版本项目中打包编译&#xff1b; 下载地址 gitHub地址 nvm-setup.zip&#xff1a;安装版&#xff0c;推荐使用 nvm-setup.exe 常用指令 // 查看版本信息 nvm -v // 查看能安装…
阅读更多...
《线下学习受局限，知识付费小程序开启新篇》

《线下学习受局限，知识付费小程序开启新篇》

在知识大爆炸的时代&#xff0c;人们对知识的渴望从未如此强烈。然而&#xff0c;传统的线下学习方式却逐渐显露出诸多局限。 线下学习往往受到时间和空间的严格限制。为了参加一场培训课程或者讲座&#xff0c;你可能需要在特定的时间赶到特定的地点&#xff0c;这对于忙碌的…
阅读更多...
大数据-188 Elasticsearch - ELK 家族 Logstash Output 插件

大数据-188 Elasticsearch - ELK 家族 Logstash Output 插件

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…
阅读更多...
基于开源Jetlinks物联网平台协议包-MQTT自定义主题数据的编解码

基于开源Jetlinks物联网平台协议包-MQTT自定义主题数据的编解码

目录 前言 1.下载官方协议包 2.解压 3.自定义主题 4.重写解码方法 5.以下是我解析后接收到的数据 前言 最近这段时间&#xff0c;一直在用开源的Jetlinks物联网平台在学习&#xff0c;偶尔有一次机会接触到物联网设备对接&#xff0c;在协议对接的时候&#xff0c;遇到了…
阅读更多...
400行程序写一个实时操作系统（十）：用面向对象思想构建抢占式内核

400行程序写一个实时操作系统（十）：用面向对象思想构建抢占式内核

前言 通过前几章的学习&#xff0c;我们学会了如何为RTOS设计一个合理的内存管理算法。现在&#xff0c;是时候学习设计RTOS内核了。 关于RTOS内核的文章也有很多&#xff0c;但都有一点先射箭再化靶子的意味。要么是代码连篇解释却寥寥无几&#xff0c;要么是要先怎么样再怎么…
阅读更多...
【星闪开发连载】WS63E模块连接华为IoT云

【星闪开发连载】WS63E模块连接华为IoT云

目录 引言 WS63E对MQTT的支持 程序修改 测试结果 结语 引言 在上一篇博文中已经介绍了WiFi的使用。今天介绍一下如何使用MQTT协议连接到华为云上。 WS63E对MQTT的支持 WS63E的代码参考直接提供了MQTT的支持&#xff0c;文档介绍见docs/board/WS63V100 MQTT 开发指南.pd…
阅读更多...
最新文章

Copyright @ 2022~2023