本文為常見的移動端uniapp優(yōu)惠券，共有6種優(yōu)惠券樣式（參考了常見的優(yōu)惠券），文本內(nèi)容僅為示例，您可在此基礎(chǔ)上調(diào)整為你想要的文本

預(yù)覽效果

通過模擬數(shù)據(jù)，實現(xiàn)點擊使用優(yōu)惠券讓其變?yōu)榛疑男Ч?#xff08;模擬已使用效果）

我用的是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: '某某商品優(yōu)惠券11',price: '100',time: '有效期至: 2025年10月1日'},{isUse: false,title: '某某商品優(yōu)惠券12',price: '100',time: '有效期至: 2025年10月1日'},],yhqList2: [{isUse: false,title: '某某商品優(yōu)惠券21',price: '100',time: '有效期至: 2025年10月1日'},{isUse: false,title: '某某商品優(yōu)惠券22',price: '100',time: '有效期至: 2025年10月1日'},],yhqList3: [{isUse: false,title: '某某商品優(yōu)惠券31',price: '100',time: '有效期至: 2025年10月1日'},{isUse: false,title: '某某商品優(yōu)惠券32',price: '100',time: '有效期至: 2025年10月1日'},],yhqList4: [{isUse: false,title: '某某商品優(yōu)惠券41',price: '100',time: '有效期至: 2025年10月1日'},{isUse: false,title: '某某商品優(yōu)惠券42',price: '100',time: '有效期至: 2025年10月1日'},],yhqList5: [{isUse: false,title: '某某商品優(yōu)惠券51',price: '100',time: '有效期至: 2025年10月1日'},{isUse: false,title: '某某商品優(yōu)惠券52',price: '100',time: '有效期至: 2025年10月1日'},],yhqList6: [{isUse: false,title: '某某商品優(yōu)惠券61',price: '100',time: '有效期至: 2025年10月1日'},{isUse: false,title: '某某商品優(yōu)惠券62',price: '100',time: '有效期至: 2025年10月1日'},],}},methods: {click(item) {console.log(item);uni.showToast({title: "使用優(yōu)惠券",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中的一個濾鏡功能，用于將元素的內(nèi)容（如圖像、文本或背景）轉(zhuǎn)換為灰度圖像。grayscale() 函數(shù)接受一個介于0%到100%之間的參數(shù)，該參數(shù)定義了圖像從原始彩色轉(zhuǎn)換為灰度的程度。
當參數(shù)為0% 時，圖像保持原有的彩色狀態(tài)，不進行任何灰度轉(zhuǎn)換。
當參數(shù)為100% 時，圖像完全轉(zhuǎn)換為灰度，所有顏色信息都被去除。
在中間值（如50%）時，圖像會是部分彩色和部分灰度的混合。
這里的 1 相當于100%，表示最大的灰度轉(zhuǎn)換程度。
*/
}.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>

歡迎進群討論前端內(nèi)容 謝謝大家