当前位置： 首页 > article >正文

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

article 2024/10/19 9:10:02

本文为常见的移动端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.kler.cn/news/355648.html

相关文章：

  • 数据库血缘工具学习，使用以及分享
  • 状态设计模式
  • JavaScript 第20章：Web Workers
  • 设计一个高效的日志分析系统：自动检测错误日志的实用指南
  • 计算机网络架构实例
  • Rocketmq 发送消息超时踩坑，消费正常
  • AJAX——HTTP 协议请求报文和响应报文结构
  • 字节跳动青训营——入营考核解答（持续更新中~~~）
  • 《 C++ 修炼全景指南：十六 》玩转 C++ 特殊类：C++ 六种必备特殊类设计的全面解析
  • C#第四讲：C#语言基本元素概览，初识类型、变量与方法，算法简介
  • nginx配置多个SSL证书实操记录
  • Qt 支持打包成安卓
  • RestClient查询文档match查询、精确查询和布尔查询
  • SSD |（七）FTL详解（中）
  • 轻松实现 API 接口限流：Bucket4j 在 Spring Boot 中的应用
  • 自适应权重
  • MongoDB集合（Collection）的详细使用说明
  • OpenAI重磅发布GPT-4O-Audio-Preview 语音也能“读懂”情绪！
  • 重塑企业数字化未来：物联网与微服务架构的战略性深度融合
  • 【设计一个恒流转恒压用于电池充电管理】2022-01-25