移动端优惠券（一键复制）

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

——  预览效果  ——

 通过模拟数据，实现点击使用优惠券让其变为灰色的效果（模拟已使用效果） 

实现原理：点击当前优惠券拿到当前的数据，然后把当前的优惠券数据的isUse的值改为true（isUse为false代表未使用，为true代表已使用），再通过isUse的值判断是否显示灰色类(use为灰色的类样式) 

模拟数据：        

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日'
          },
        ],
      }
    },

点击设置isUse的值：

methods: {
    click(item) {
      console.log(item);
      uni.showToast({
          title: "使用优惠券",
        icon: "none"
        })
      item.isUse = true
    }
 }

判断是否显示灰色类：

:class="item.isUse?'use':''"

效果预览：

完整源码 

      源码为uniapp项目源码，如需要优惠券，以下代码一键复制到你的页面中，共六种样式，每一个展示了两次（因为一般都是列表），每一个都有自己的类样式（yhq1，yhq2，...yhq6），按照你的需求删除不需要的，留下你想要的即可

<template>
  <view class="content">

    <view class="yhq1" :class="item.isUse?'use':''" v-for="(item,index) in yhqList1" @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" @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" @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" @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" @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" @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: linear-gradient(to right, #aa55ff, #ff007f);
    -webkit-mask: radial-gradient(circle at 20px 20px, #0000 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);
  }

  .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(to top, #ff0844 0%, #ffb199 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: linear-gradient(45deg, #aa55ff, #00aaff);
    -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, #fa709a 0%, #ff00ff 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(120deg, #00aa7f 0%, #8fd3f4 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: linear-gradient(45deg, #ff0000, #ff11ff);
    -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>

关于优惠券，满减券等这种需求在商城项目中用的不少，通常情况下优惠券的样式都需要前端写样式，为避免重复写代码，记录以上优惠券六种优惠券的样式源码，以后需要直接一键复制拿来使用即可，具体的细节按照UI设计图调整即可。

如有帮助，求个赞可否