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

🕗 发布于 2024-10-19 17:07 uni-app javascript 前端

本文为常见的移动端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>

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

原文地址：https://blog.csdn.net/m0_50864141/article/details/143052815

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：运行Springboot + Vue 项目
下一篇：数据仓库构建的两种方法：自上向下、自下向上

C++ 中的友元（Friend）用法详解
假设有一个类 Person。
阅读更多2024-10-20
Oracle 更换监听端口
业务需求：由于安全考虑，需要将Oracle默认端口1521更换端口，比如：15211端口。修改Oracle端口号步骤：1）修改监听中的端口号2）注册数据库服务3）重启监听
阅读更多2024-10-20
Linux在命令行直接使用密码来远程执行命令和远程复制 + 新安装的库找不到问题解决方式
本文主要介绍如何使用非交互式的方式，直接设置密码来远程执行命令和远程复制。另外介绍下往/usr/lib或者/lib下拷贝了新库但找不到的解决方式。
阅读更多2024-10-20
解决SolidWorks装配体无法更改透明度问题
1、因为该装配体里面存在过多的零部件层级的自定义外观（这些外观可能互相之前有了干扰）导致透明设置被覆盖而无法正常显示。这个问题是在零件上各个部件显示正常，且透明度可以更改，但是一到装配体上就出现问题都
阅读更多2024-10-20
怎么修改编辑PDF的内容，有这４个工具就行了。
PDF 软件在现代的办公或者是学习当中的应用非常广泛，编辑PDF内容对很多人来说也是一件常有的事情。如果有了PDF 编辑软件，查看，编辑，修改，分享也会变得更加方便简单，所以今天要给大家介绍几款这样的
阅读更多2024-10-20
解锁A/B测试：如何用数据驱动的实验提升你的网站和应用
A/B测试是一种通过对比实验来优化网站和应用的有效方法，它帮助我们基于数据做出更明智的决策。避免急躁、关注核心指标并进行重复测试，可以提高A/B测试的准确性，从而在数字世界中取得成功。
阅读更多2024-10-20
【含文档】基于Springboot+Vue的地方特色美食分享管理系统（含源码+数据库+lw）
管理员登录进入地方特色美食分享管理系统可以查看系统首页、个人中心、用户管理、美食菜谱管理、菜谱分类管理、美食信息管理、美食分类管理、美食论坛、系统管理等信息。在这里，游客能够看到地方特色美食分享管理系
阅读更多2024-10-20
数据之钥：C++ 二分查找，在代码的解锁中，开启数据检索的宝藏
数据之钥：C++ 二分查找，在代码的解锁中，开启数据检索的宝藏
阅读更多2024-10-20
网站建设完成后，多久需要升级迭代一次
综上所述，网站建设完成后，每隔几个月进行一次迭代升级是比较合适的。这样可以确保网站始终保持最新状态，满足用户的需求和期望，同时也可以提升企业的品牌形象和市场竞争力。网站建设完成后，一般每隔几个月就会进
阅读更多2024-10-20
Mojo 编程语言入门：AI开发者的新宠儿
Mojo 是一种专为人工智能和高性能计算任务设计的编程语言，由 Modular 公司开发。与其他AI相关语言（如Python、C++等）相比，Mojo 集成了高级编程的简易性和底层硬件优化的高效性。这
阅读更多2024-10-20

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

预览效果

我用的是uniapp来写的

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

相关文章