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

本文为常见的移动端uniapp优惠券，共有6种优惠券样式（参考了常见的优惠券），文本内容仅为示例，您可在此基础上调解为你想要的文本
  预览效果

   通过模拟数据，实现点击利用优惠券让其变为灰色的效果（模拟已利用效果）
  我用的是uniapp来写的

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

2. <template>
3.         <view class="content">
5.                 <view class="yhq1" :class="item.isUse ? 'use' : ''" v-for="(item, index) in yhqList1" :key="index"
6.                         @click="click(item)">
7.                         <view class="left">
8.                                 ￥{{ item.price }}
9.                         </view>
10.                         <view class="right">
11.                                 <view class="tit">
12.                                         {{ item.title }}
13.                                 </view>
14.                                 <view class="desc">
15.                                         <view class="p">
16.                                                 {{ item.time }}
17.                                         </view>
18.                                 </view>
19.                         </view>
20.                 </view>
22.                 <view class="yhq2" :class="item.isUse ? 'use' : ''" v-for="(item, index) in yhqList2" :key="index"
23.                         @click="click(item)">
24.                         <view class="left">
25.                                 ￥{{ item.price }}
26.                         </view>
27.                         <view class="right">
28.                                 <view class="tit">
29.                                         {{ item.title }}
30.                                 </view>
31.                                 <view class="desc">
32.                                         <view class="p">
33.                                                 {{ item.time }}
34.                                         </view>
35.                                 </view>
36.                         </view>
37.                 </view>
39.                 <view class="yhq3" :class="item.isUse ? 'use' : ''" v-for="(item, index) in yhqList3" :key="index"
40.                         @click="click(item)">
41.                         <view class="left">
42.                                 ￥{{ item.price }}
43.                         </view>
44.                         <view class="right">
45.                                 <view class="tit">
46.                                         {{ item.title }}
47.                                 </view>
48.                                 <view class="desc">
49.                                         <view class="p">
50.                                                 {{ item.time }}
51.                                         </view>
52.                                 </view>
53.                         </view>
54.                 </view>
56.                 <view class="yhq4" :class="item.isUse ? 'use' : ''" v-for="(item, index) in yhqList4" :key="index"
57.                         @click="click(item)">
58.                         <view class="left">
59.                                 ￥{{ item.price }}
60.                         </view>
61.                         <view class="right">
62.                                 <view class="tit">
63.                                         {{ item.title }}
64.                                 </view>
65.                                 <view class="desc">
66.                                         <view class="p">
67.                                                 {{ item.time }}
68.                                         </view>
69.                                 </view>
70.                         </view>
71.                 </view>
73.                 <view class="yhq5" :class="item.isUse ? 'use' : ''" v-for="(item, index) in yhqList5" :key="index"
74.                         @click="click(item)">
75.                         <view class="left">
76.                                 ￥{{ item.price }}
77.                         </view>
78.                         <view class="right">
79.                                 <view class="tit">
80.                                         {{ item.title }}
81.                                 </view>
82.                                 <view class="desc">
83.                                         <view class="p">
84.                                                 {{ item.time }}
85.                                         </view>
86.                                 </view>
87.                         </view>
88.                 </view>
90.                 <view class="yhq6" :class="item.isUse ? 'use' : ''" v-for="(item, index) in yhqList6" :key="index"
91.                         @click="click(item)">
92.                         <view class="left">
93.                                 ￥{{ item.price }}
94.                         </view>
95.                         <view class="right">
96.                                 <view class="tit">
97.                                         {{ item.title }}
98.                                 </view>
99.                                 <view class="desc">
100.                                         <view class="p">
101.                                                 {{ item.time }}
102.                                         </view>
103.                                 </view>
104.                         </view>
105.                 </view>
107.         </view>
108. </template>
110. <script>
111. export default {
112.         data() {
113.                 return {
114.                         isUse: false, // 是否已使用
115.                         yhqList1: [{
116.                                 isUse: false,
117.                                 title: '某某商品优惠券11',
118.                                 price: '100',
119.                                 time: '有效期至: 2025年10月1日'
120.                         },
121.                         {
122.                                 isUse: false,
123.                                 title: '某某商品优惠券12',
124.                                 price: '100',
125.                                 time: '有效期至: 2025年10月1日'
126.                         },
127.                         ],
128.                         yhqList2: [{
129.                                 isUse: false,
130.                                 title: '某某商品优惠券21',
131.                                 price: '100',
132.                                 time: '有效期至: 2025年10月1日'
133.                         },
134.                         {
135.                                 isUse: false,
136.                                 title: '某某商品优惠券22',
137.                                 price: '100',
138.                                 time: '有效期至: 2025年10月1日'
139.                         },
140.                         ],
141.                         yhqList3: [{
142.                                 isUse: false,
143.                                 title: '某某商品优惠券31',
144.                                 price: '100',
145.                                 time: '有效期至: 2025年10月1日'
146.                         },
147.                         {
148.                                 isUse: false,
149.                                 title: '某某商品优惠券32',
150.                                 price: '100',
151.                                 time: '有效期至: 2025年10月1日'
152.                         },
153.                         ],
154.                         yhqList4: [{
155.                                 isUse: false,
156.                                 title: '某某商品优惠券41',
157.                                 price: '100',
158.                                 time: '有效期至: 2025年10月1日'
159.                         },
160.                         {
161.                                 isUse: false,
162.                                 title: '某某商品优惠券42',
163.                                 price: '100',
164.                                 time: '有效期至: 2025年10月1日'
165.                         },
166.                         ],
167.                         yhqList5: [{
168.                                 isUse: false,
169.                                 title: '某某商品优惠券51',
170.                                 price: '100',
171.                                 time: '有效期至: 2025年10月1日'
172.                         },
173.                         {
174.                                 isUse: false,
175.                                 title: '某某商品优惠券52',
176.                                 price: '100',
177.                                 time: '有效期至: 2025年10月1日'
178.                         },
179.                         ],
180.                         yhqList6: [{
181.                                 isUse: false,
182.                                 title: '某某商品优惠券61',
183.                                 price: '100',
184.                                 time: '有效期至: 2025年10月1日'
185.                         },
186.                         {
187.                                 isUse: false,
188.                                 title: '某某商品优惠券62',
189.                                 price: '100',
190.                                 time: '有效期至: 2025年10月1日'
191.                         },
192.                         ],
193.                 }
194.         },
195.         methods: {
196.                 click(item) {
197.                         console.log(item);
198.                         uni.showToast({
199.                                 title: "使用优惠券",
200.                                 icon: "none"
201.                         })
202.                         item.isUse = true
203.                 }
204.         }
205. }
206. </script>
208. <style>
209. .content {
210.         padding: 20rpx;
211. }
213. .yhq1 {
214.         width: 100%;
215.         height: 100px;
216.         margin-top: 15px;
217.         background-image: linear-gradient(-225deg, #9EFBD3 0%, #57E9F2 48%, #45D4FB 100%);
218.         -webkit-mask: radial-gradient(circle at 20px 20px, #ff0000 20px, blue 0);
219.         -webkit-mask-position: -20px -20px;
220.         display: flex;
221.         justify-content: space-around;
222.         align-items: center;
223.         padding: 20rpx 30rpx 20rpx 50rpx;
224.         box-sizing: border-box;
225. }
227. .use {
228.         filter: grayscale(1);
229.         /*  
230. 是CSS3中的一个滤镜功能，用于将元素的内容（如图像、文本或背景）转换为灰度图像。grayscale() 函数接受一个介于0%到100%之间的参数，该参数定义了图像从原始彩色转换为灰度的程度。
231. 当参数为0% 时，图像保持原有的彩色状态，不进行任何灰度转换。
232. 当参数为100% 时，图像完全转换为灰度，所有颜色信息都被去除。
233. 在中间值（如50%）时，图像会是部分彩色和部分灰度的混合。
234. 这里的 1 相当于100%，表示最大的灰度转换程度。
235. */
236. }
238. .left {
239.         width: 20%;
240.         font-size: 50rpx;
241.         font-weight: 700;
242.         color: #fff;
243. }
245. .right .tit {
246.         font-size: 33rpx;
247.         color: #fff;
248.         font-weight: 600;
249. }
251. .right .desc .p {
252.         font-size: 28rpx;
253.         color: #d8d8d8;
254.         margin-top: 10rpx;
255. }
257. .yhq2 {
258.         width: 100%;
259.         height: 100px;
260.         margin-top: 15px;
261.         background-image: linear-gradient(-225deg, #FFE29F 0%, #FFA99F 48%, #FF719A 100%);
262.         -webkit-mask: radial-gradient(circle at 20px, #0000 16px, blue 0);
263.         display: flex;
264.         justify-content: space-around;
265.         align-items: center;
266.         padding: 20rpx 30rpx 20rpx 50rpx;
267.         box-sizing: border-box;
268. }
270. .yhq3 {
271.         width: 100%;
272.         height: 100px;
273.         margin-top: 15px;
274.         background-image: linear-gradient(to right, #fddb92 0%, #d1fdff 100%);
275.         -webkit-mask: radial-gradient(circle at 0, #0000 20px, blue 0),
276.                 radial-gradient(circle at right, #0000 20px, blue 0);
277.         -webkit-mask-size: 51%;
278.         -webkit-mask-position: 0, 100%;
279.         -webkit-mask-repeat: no-repeat;
280.         display: flex;
281.         justify-content: space-around;
282.         align-items: center;
283.         padding: 20rpx 30rpx 20rpx 50rpx;
284.         box-sizing: border-box;
285. }
287. .yhq3 .left {
288.         width: 35%;
289.         height: 100%;
290.         display: flex;
291.         align-items: center;
292.         border-right: 1px dashed #fff;
293. }
295. .yhq3 .right {
296.         width: 55%;
297.         text-align: center;
298. }
301. .yhq4 {
302.         width: 100%;
303.         height: 100px;
304.         margin-top: 15px;
305. background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
306.         -webkit-mask: radial-gradient(circle at 10px, #0000 10px, blue 0);
307.         -webkit-mask-position: -10px;
308.         -webkit-mask-size: 100% 30px;
309.         display: flex;
310.         justify-content: space-around;
311.         align-items: center;
312.         padding: 20rpx 30rpx 20rpx 50rpx;
313.         box-sizing: border-box;
314. }
316. .yhq5 {
317.         width: 100%;
318.         height: 100px;
319.         margin-top: 15px;
320. background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
321.         -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, blue 0);
322.         -webkit-mask-position: -20px -20px;
323.         -webkit-mask-size: 50%;
324.         display: flex;
325.         justify-content: space-around;
326.         align-items: center;
327.         padding: 20rpx 30rpx 20rpx 50rpx;
328.         box-sizing: border-box;
329. }
331. .yhq5 .left {
332.         width: 35%;
333.         height: 100%;
334.         display: flex;
335.         align-items: center;
336.         border-right: 1px dashed #fff;
337. }
339. .yhq5 .right {
340.         width: 55%;
341.         text-align: center;
342. }
344. .yhq6 {
345.         width: 100%;
346.         height: 100px;
347.         margin-top: 15px;
348.      background-image: linear-gradient(to right, #ff9569 0%, #e92758 100%);
349.         -webkit-mask: radial-gradient(circle at left center, transparent 20px, blue 20px);
350.         display: flex;
351.         justify-content: space-around;
352.         align-items: center;
353.         padding: 20rpx 30rpx 20rpx 50rpx;
354.         box-sizing: border-box;
355. }
359. </style>

复制代码

欢迎进群讨论前端内容 谢谢大家

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。