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

news2024/10/23 6:19:26

本文为常见的移动端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.coloradmin.cn/o/2221381.html

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

相关文章

鸿蒙网络编程系列32-基于拦截器的性能监控示例

鸿蒙网络编程系列32-基于拦截器的性能监控示例

1. 拦截器简介 在Web开发中拦截器是一种非常有用的模式&#xff0c;它允许开发者在请求发送到服务器之前或响应返回给客户端之前执行一些预处理或后处理操作。这种机制特别适用于需要对所有网络请求或响应进行统一处理的情况&#xff0c;比如添加全局错误处理、请求头的修改、…
阅读更多...
Linux中输入和输出基本过程

Linux中输入和输出基本过程

目录 Linux中输入和输出基本过程 文件内核级缓冲区 何为重定向 子进程与缓冲区 手撕一个简单的shell&#xff08;版本2&#xff09; 判断重定向命令与截取 执行重定向 简单实现stdio.h中的文件相关操作 FILE结构体 fopen函数 fwrite函数 fflush函数 fclose函数 Li…
阅读更多...
Vue+TypeScript+SpringBoot的WebSocket基础教学

Vue+TypeScript+SpringBoot的WebSocket基础教学

成品图&#xff1a; 对WebSocket的理解&#xff08;在使用之前建议先了解Tcp&#xff0c;三次握手&#xff0c;四次挥手 &#xff09;&#xff1a; 首先页面与WebSocket建立连接、向WebSocket发送信息、后端WebSocket向所有连接上WebSoket的客户端发送当前信息。 推荐浏览网站…
阅读更多...
燕山大学23级经济管理学院 10.18 C语言作业

燕山大学23级经济管理学院 10.18 C语言作业

燕山大学23级经济管理学院 10.18 C语言作业 文章目录 燕山大学23级经济管理学院 10.18 C语言作业1C语言的基本数据类型主要包括以下几种&#xff1a;为什么设计数据类型&#xff1f;数据类型与知识体系的对应使用数据类型时需要考虑的因素 21. 逻辑运算符2. 真值表3. 硬件实现4…
阅读更多...
设计模式（UML图、类之间关系、设计原则）

设计模式（UML图、类之间关系、设计原则）

目录 一.类的UML图 1.类的UML图 2.类之间的关系 2.1 继承关系&#xff1a; 2.2关联关系 2.2.1单项关联 2.2.2双向关联 2.2.3自关联 2.3聚合关系 2.4组合模式 2.5依赖关系 二、设计三原则 2.1单一职责原则 2.2开放封闭原则 2.3依赖倒转原则 一.类的UML图 1.类的…
阅读更多...
考研篇——数据结构王道3.2.2_队列的顺序实现

考研篇——数据结构王道3.2.2_队列的顺序实现

目录 1.实现方式说明2.代码实现2.12.1.1 代码12.1.2 代码22.1.3 代码3 2.22.2.1 代码42.2.5 代码52.2.6 代码6 总结 1.实现方式说明 多在选择题中考察 队尾指针&#xff08;rear&#xff09;有两种指向方式&#xff1a; 队尾指针指向队尾元素的位置&#xff0c;队尾指针指向…
阅读更多...
9个3D直播场景推荐

9个3D直播场景推荐

在科技日新月异的今天&#xff0c;3D直播技术正逐步渗透至文旅领域&#xff0c;为游客带来前所未有的沉浸式体验。以下是vLive虚拟直播九个精心推荐的文旅3D直播场景&#xff0c;它们不仅展现了各地独特的文化魅力&#xff0c;还通过高科技手段让游客仿佛穿越时空&#xff0c;身…
阅读更多...
ArcGIS应用指南：多尺度渔网创建

ArcGIS应用指南：多尺度渔网创建

在GIS中&#xff0c;创建渔网矢量文件是GIS中的一项常见任务&#xff0c;通过将研究区域划分为规则的网格&#xff0c;可以更精细地分析和管理城市空间数据。本文以厦门市行政区为例&#xff0c;详细介绍了如何创建不同尺度的渔网矢量网格&#xff0c;以适应不同区域的发展特点…
阅读更多...
代码随想录算法训练营第46期Day35

代码随想录算法训练营第46期Day35

leetcode.452.用最少数量的箭射爆气球 class Solution { public:static bool cmp(const vector<int>& a,const vector<int>& b){//对Xend进行排序return a[1]<b[1]; } //这个题比较好贪&#xff0c;我们每次射只需要射Xend就可以了&#xff0c;然后用此…
阅读更多...
OpenCL内存模型

OpenCL内存模型

OpenCL将内存划分成主机内存和设备内存。主机内存可在主机上使用&#xff0c;其并不在OpenCL的定义范围内。使用对应的OpenCL API可以进行主机和设备的数据传输&#xff0c;或者通过共享虚拟内存接口进行内存共享。而设备内存&#xff0c;指定是能在执行内核中使用的内存空间。…
阅读更多...
什么是不同类型的微服务测试？

什么是不同类型的微服务测试？

大家好&#xff0c;我是锋哥。今天分享关于【什么是不同类型的微服务测试&#xff1f;】面试题&#xff1f;希望对大家有帮助&#xff1b; 什么是不同类型的微服务测试&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 微服务架构中的测试可以分为多种类…
阅读更多...
【ROS2】构建导航工程

【ROS2】构建导航工程

1、ROS小车组成 ROS小车由三大件组成：运动底盘、ROS主控、导航传感器。 1.1 运动底盘 运动底盘的硬件由车轮、电机（带编码器）、电机驱动器、STM32控制器、电池等组成。 涉及的知识点主要为：STM32单片机程序、机器人运动学分析 1）STM32单片机程序 单片机程序框架如下：…
阅读更多...
在Linux命令行下载Google Drive大文件（解决Google Drive下载慢的问题）

在Linux命令行下载Google Drive大文件（解决Google Drive下载慢的问题）

文章目录 1、使用gdown命令2、复制链接3、替换为Linux下载链接 注意&#xff1a;在Linux命令行进行 1、使用gdown命令 wget只能下载小文件&#xff0c;大文件需要用到gdown pip install gdown# 如果不能够直接安装&#xff0c;使用以下命令 git clone https://github.com/wk…
阅读更多...
基于Spring Boot + Vue程序员云书店系统设计与实现

基于Spring Boot + Vue程序员云书店系统设计与实现

&#x1f497;博主介绍&#x1f497;&#xff1a;✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示&#xff1a;文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…
阅读更多...
MySQL9.0安装教程zip手动安装（Windows）

MySQL9.0安装教程zip手动安装（Windows）

本章教程&#xff0c;主要介绍如何在Windows上安装MySQL9.0&#xff0c;通过zip方式进行手动安装。 一、下载MySQL压缩包 下载地址&#xff1a;https://downloads.mysql.com/archives/community/ 二、解压MySQL压缩包 将下载好的压缩包&#xff0c;进行解压缩&#xff0c;并且将…
阅读更多...
要让AI（任何一款绘图AI）把一个己有风格的图片画到一个实物商品上的窍门

要让AI（任何一款绘图AI）把一个己有风格的图片画到一个实物商品上的窍门

本教程适合midjourney, comfyui, stable diffusion 己有图片 希望生成效果 我们希望&#xff0c;在一个现实世界真实IPhone手机上可以有一个这样的小魔女作为一个手机的展示&#xff0c;同时手机处于开机状态&#xff0c;在手机的屏幕上有一个这样的戴帽子的穿蓝色小披风的小…
阅读更多...
阿里Dataworks使用循环节点和赋值节点完成对mongodb分表数据同步

阿里Dataworks使用循环节点和赋值节点完成对mongodb分表数据同步

背景 需求将MongoDB数据入仓MaxCompute 环境说明 MongoDB 100个Collections&#xff1a;orders_1、orders_2、…、orders_100 前期准备 1、MongoDB数据源配置 需要先保证DW和MongoDB网络是能够联通的&#xff0c;需要现在集成任务中配置MongoDB的数据源信息。 具体可以查…
阅读更多...
Java项目-基于springboot框架的学习选课系统项目实战(附源码+文档)

Java项目-基于springboot框架的学习选课系统项目实战(附源码+文档)

作者&#xff1a;计算机学长阿伟 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、ElementUI等&#xff0c;“文末源码”。 开发运行环境 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBoot、Vue、Mybaits Plus、ELementUI工具&#xff1a;IDEA/…
阅读更多...
Linux基础命令（入门）

Linux基础命令（入门）

linux 用户 root 用户 一个特殊的管理帐户 也被称为超级用户 root已接近完整的系统控制 对系统损害几乎有无限的能力 除非必要,不要登录为 root 普通&#xff08; 非特权 &#xff09; 用户权限有限 造成损害的能力比较有限 linux的哲学思想&#xff08;优点&#xf…
阅读更多...
vue3学习记录-组件通信

vue3学习记录-组件通信

vue3学习记录-组件通信 1.父子组件通信2.兄弟组件传值2.1 以父组件为媒介2.2 发布订阅模式2.3 使用mitt2.3.1 全局使用2.3.2 局部使用 1.父子组件通信 父组件&#xff1a; <template>父组件原有的title:{{ title }}<p>---</p><com :title"title&qu…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023