devbox
神奇cpp
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序 简单优惠卷页面设计_微信小程序优惠券页面的实现

作者：神奇cpp | 2024-08-09 01:34:38

赞

踩

微信小程序优惠券页面的实现

index.wxml

  1. <view style="margin: 0.5rem;">
  2.     <view class="points">
  3.         我的积分：{{integralInfo}}
  4.     </view>
  5.  
  6. </view>
  7.  
  8. <view>
  9.     <view wx:if="{{couponList.length>0}}" wx:for="{{couponList}}" wx:key="{{item.id}}">
  10.         <view class="tickets">
  11.             <view class="l-tickets.usable">
  12.                 <view class="discounts">
  13.                     <text class="symbol">￥</text>
  14.                     <text class="quantity">{{item.couponValue}}</text>
  15.                 </view>
  16.                 <view class="rule">
  17.                     <text class="rule-text">{{item.useSill}}</text>
  18.                 </view>
  19.             </view>
  20.             <view class="r-tickets">
  21.                 <van-row>
  22.                     <van-col span="22">
  23.                         <view class="coupon-left">
  24.                             <view class="coupon-name">
  25.                                 <text class="coupon-name-text {{currentTab ==0 ? 'usable' : currentTab ==1 ? 'used' : 'expired'}}">{{item.couponName}}</text>
  26.                             </view>
  27.                             <view class="coupon-Instructions">
  28.                                 <text class="coupon-Instructions-text {{currentTab ==0 ? 'usable' : currentTab ==1 ? 'used' : 'expired'}}">{{item.couponExplain}}</text>
  29.                             </view>
  30.                             <view class="coupon-validity">
  31.                                 <text class="coupon-validity-text {{currentTab ==0 ? 'usable' : currentTab ==1 ? 'used' : 'expired'}}">有效日期：{{item.deadlineDate}}</text>
  32.                             </view>
  33.                         </view>
  34.                     </van-col>
  35.                     <van-col span="2">
  36.                         <view bindtap="exchangeCoupon" data-info="{{item}}" class="lmmediate-use.usable">
  37.                             立即兑换
  38.                         </view>
  39.                     </van-col>
  40.                 </van-row>
  41.             </view>
  42.         </view>
  43.     </view>
  44.  
  45.     <view class="empty" wx:if="{{couponList.length==0}}">
  46.         <van-empty description="暂无优惠卷！" />
  47.         <!-- <van-empty class="custom-image" image="/pages/image/userCenter/coupon.png" description="暂无优惠卷！" /> -->
  48.     </view>
  49. </view>
  50. <van-dialog style="text-align: center;" use-slot title="{{popupData.codename}}" show="{{ show }}" bind:close="onClose">
  51.     <image style="width: 15rem;height: 15rem;" src="{{popupData.codeimage}}" />
  52.     <view style="text-align: center;font-size: 0.95rem;font-weight: 700;margin-bottom: 0.5rem;letter-spacing: 0.05rem;margin-top: -1rem;">
  53.         {{popupData.code}}
  54.     </view>
  55. </van-dialog>

index.wxss

  1. .topBar {
  2.     margin-top: -0.5rem;
  3.     display: flex;
  4.     /* box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5); */
  5.     /* position: fixed; */
  6.     top: 0;
  7.     left: 0;
  8.     width: 100%;
  9.     z-index: 9999;
  10.     background-color: white;
  11. }
  12.  
  13. .classScroll {
  14.     width: 375px;
  15.     padding-left: 2px;
  16. }
  17.  
  18. .tab-bar {
  19.     display: flex;
  20.     justify-content: flex-start;
  21.     /* 修改为左对齐 */
  22.     width: fit-content;
  23.     /* 修改为适应内容的宽度 */
  24. }
  25.  
  26. .tab-item {
  27.     flex: 1 0 auto;
  28.     display: inline-flex;
  29.     flex-direction: column;
  30.     align-items: center;
  31.     justify-content: center;
  32.     padding-left: 5px;
  33.     padding-right: 5px;
  34.     line-height: 40px;
  35.     color: #888888;
  36.  
  37. }
  38.  
  39. .tab-item.active {
  40.     /* margin-left: 0.5rem; */
  41.     height: 1.5rem;
  42.     width: 3rem;
  43.     color: black;
  44.     border-radius: 5px;
  45.     font-weight: 500;
  46.     font-weight: bolder;
  47. }
  48.  
  49. .tab-item.index {
  50.     /* margin-left: 0.5rem; */
  51.     height: 1.5rem;
  52.     width: 3rem;
  53.     color: rgb(156, 148, 148);
  54.     border-radius: 5px;
  55.     font-weight: bolder;
  56. }
  57.  
  58. .teacher .tab-item.active1 {
  59.     /* margin-left: 0.5rem; */
  60.     height: 1.5rem;
  61.     width: 2rem;
  62.     color: #56c5a1;
  63.     /* border-radius: 5px; */
  64.     /* background-color: #56c5a1; */
  65.     font-weight: bolder;
  66.  
  67. }
  68.  
  69. .text-title.active1 {
  70.     height: 2rem;
  71.     border-bottom-color: #56c5a1;
  72.     border-bottom-style: solid;
  73.     border-bottom-width: 6rpx;
  74. }
  75.  
  76. .points {
  77.     font-size: 0.95rem;
  78.     font-weight: 800;
  79. }
  80.  
  81. .convert {
  82.     font-size: 0.65rem;
  83.     float: right;
  84.     margin-right: 0.5rem;
  85.     margin-top: 0.5rem;
  86.     background-color: #2ea37e;
  87.     color: white;
  88.     padding: 0.25rem 0.25rem;
  89.     border-radius: 5px;
  90.     font-weight: bolder;
  91.     letter-spacing: 0.15rem;
  92. }
  93.  
  94. .tickets {
  95.     display: flex;
  96.     padding: 20rpx;
  97.     width: 100%;
  98.     height: 230rpx;
  99.     box-sizing: border-box;
  100. }
  101.  
  102. .l-tickets.usable {
  103.     width: 25%;
  104.     position: relative;
  105.     background: radial-gradient(circle at right top, transparent 16rpx, #ce0f0f 0, #c9380c 100%) right top / 100% 50% no-repeat,
  106.         radial-gradient(circle at right bottom, transparent 16rpx, #ce0f0f 0, #c9380c 100%) right bottom / 100% 50% no-repeat;
  107.     filter: drop-shadow(-3px 0 3px rgba(0, 0, 0, .3));
  108. }
  109.  
  110. .l-tickets.usable::after {
  111.     content: '';
  112.     position: absolute;
  113.     height: 100%;
  114.     width: 8rpx;
  115.     top: 0;
  116.     left: -8rpx;
  117.     background: radial-gradient(circle at left center, transparent 8rpx, #ce0f0f 0) left center / 8rpx 20rpx;
  118. }
  119.  
  120. .l-tickets.used {
  121.     width: 25%;
  122.     position: relative;
  123.     background: radial-gradient(circle at right top, transparent 16rpx, #835243 0, #ac644e 100%) right top / 100% 50% no-repeat,
  124.         radial-gradient(circle at right bottom, transparent 16rpx, #835243 0, #ac644e 100%) right bottom / 100% 50% no-repeat;
  125.     filter: drop-shadow(-3px 0 3px rgba(0, 0, 0, .3));
  126. }
  127.  
  128. .l-tickets.used::after {
  129.     content: '';
  130.     position: absolute;
  131.     height: 100%;
  132.     width: 8rpx;
  133.     top: 0;
  134.     left: -8rpx;
  135.     background: radial-gradient(circle at left center, transparent 8rpx, #ac644e 0) left center / 8rpx 20rpx;
  136. }
  137.  
  138. .l-tickets.expired {
  139.     width: 25%;
  140.     position: relative;
  141.     background: radial-gradient(circle at right top, transparent 16rpx, #999292 0, #817a7a 100%) right top / 100% 50% no-repeat,
  142.         radial-gradient(circle at right bottom, transparent 16rpx, #999292 0, #817a7a 100%) right bottom / 100% 50% no-repeat;
  143.     filter: drop-shadow(-3px 0 3px rgba(0, 0, 0, .3));
  144. }
  145.  
  146. .l-tickets.expired::after {
  147.     content: '';
  148.     position: absolute;
  149.     height: 100%;
  150.     width: 8rpx;
  151.     top: 0;
  152.     left: -8rpx;
  153.     background: radial-gradient(circle at left center, transparent 8rpx, #817a7a 0) left center / 8rpx 20rpx;
  154. }
  155.  
  156. .r-tickets {
  157.     flex: 1;
  158.     position: relative;
  159.     background: radial-gradient(circle at left top, transparent 16rpx, #fdfcfb 0, #fdfcfb 100%) right top / 100% 50% no-repeat,
  160.         radial-gradient(circle at left bottom, transparent 16rpx, #fdfcfb 0, #fdfcfb 100%) right bottom / 100% 50% no-repeat;
  161.     filter: drop-shadow(3px 0 3px rgba(0, 0, 0, .3));
  162. }
  163.  
  164. .r-tickets::before {
  165.     content: '';
  166.     width: 1rpx;
  167.     background: linear-gradient(to top, #fff 0%, #fff 50%, transparent 50%) top left / 1rpx 20rpx repeat-y;
  168.     position: absolute;
  169.     left: 0;
  170.     top: 16rpx;
  171.     bottom: 16rpx;
  172. }
  173.  
  174. .r-tickets::after {
  175.     content: '';
  176.     position: absolute;
  177.     height: 100%;
  178.     width: 8rpx;
  179.     top: 0;
  180.     right: -8rpx;
  181.     background: radial-gradient(circle at right center, transparent 8rpx, #fdfcfb 0) right center / 8rpx 20rpx;
  182. }
  183.  
  184. .discounts {
  185.     color: white;
  186.     text-align: center;
  187.     margin-top: 1.0rem;
  188. }
  189.  
  190. .symbol {
  191.     font-size: 1.25rem;
  192. }
  193.  
  194. .quantity {
  195.     font-size: 1.75rem;
  196. }
  197.  
  198. .rule {
  199.     margin-top: 0.5rem;
  200.     text-align: center;
  201.     color: white;
  202. }
  203.  
  204. .rule-text {
  205.     font-size: 0.65rem;
  206. }
  207.  
  208. .coupon-left {
  209.     /* width: 100%; */
  210.     /* height: 190rpx; */
  211.     margin-left: 20rpx;
  212.     padding-right: 10rpx;
  213.     border-right-color: #79726f;
  214.     border-right-style: solid;
  215.     border-right-width: 2rpx;
  216.     border-right-style: dashed;
  217. }
  218.  
  219. .coupon-name {
  220.     margin-top: 10rpx;
  221.     font-weight: 1000;
  222.     display: -webkit-box;
  223.     -webkit-box-orient: vertical;
  224.     -webkit-line-clamp: 1;
  225.     overflow: hidden;
  226.     text-overflow: ellipsis;
  227. }
  228.  
  229. .coupon-Instructions {
  230.     margin-top: 0.5rem;
  231.     height: 70rpx;
  232.     display: -webkit-box;
  233.     -webkit-box-orient: vertical;
  234.     -webkit-line-clamp: 3;
  235.     overflow: hidden;
  236.     text-overflow: ellipsis;
  237. }
  238.  
  239. .coupon-validity {
  240.     margin-top: 0.5rem;
  241. }
  242.  
  243. /* 立即使用 */
  244. .coupon-name-text.usable {
  245.     font-size: 0.85rem;
  246.     color: black;
  247. }
  248.  
  249. .coupon-Instructions-text.usable {
  250.     font-size: 0.80rem;
  251.     color: black;
  252. }
  253.  
  254. .coupon-validity-text.usable {
  255.     font-size: 0.80rem;
  256.     color: rgb(90, 81, 81);
  257. }
  258.  
  259.  
  260. /* 已使用 */
  261. .coupon-name-text.used {
  262.     font-size: 0.85rem;
  263.     color: #ac644e;
  264. }
  265.  
  266. .coupon-Instructions-text.used {
  267.     font-size: 0.80rem;
  268.     color: #ac644e;
  269. }
  270.  
  271. .coupon-validity-text.used {
  272.     font-size: 0.80rem;
  273.     color: #ac644e;
  274. }
  275.  
  276. /* 已过期 */
  277. .coupon-name-text.expired {
  278.     font-size: 0.85rem;
  279.     color: #817a7a;
  280. }
  281.  
  282. .coupon-Instructions-text.expired {
  283.     font-size: 0.80rem;
  284.     color: #817a7a;
  285. }
  286.  
  287. .coupon-validity-text.expired {
  288.     font-size: 0.80rem;
  289.     color: #817a7a;
  290. }
  291.  
  292.  
  293.  
  294. .lmmediate-use.usable {
  295.     color: tomato;
  296.     margin-top: 20rpx;
  297.     display: flex;
  298.     text-align: center;
  299.     justify-content: center;
  300. }
  301.  
  302. .lmmediate-use.used {
  303.     color: #ac644e;
  304.     margin-top: 35rpx;
  305.     display: flex;
  306.     text-align: center;
  307.     justify-content: center;
  308. }
  309.  
  310. .lmmediate-use.expired {
  311.     color: #817a7a;
  312.     margin-top: 35rpx;
  313.     display: flex;
  314.     text-align: center;
  315.     justify-content: center;
  316. }
  317.  
  318. /* .empty .van-empty__image__img {
  319.     height: 8rem;
  320.     width: 8rem;
  321. } */
  322.  
  323. /* .empty .van-empty__description {
  324.     color: #969799;
  325.     font-size: 20px;
  326.     line-height: 20px;
  327.     margin-top: 16px;
  328.     padding: 0 60px;
  329. } */

index.js

  1. // pages/user/pointExchange/pointExchange.js
  2. Page({
  3.  
  4.     /**
  5.      * 页面的初始数据
  6.      */
  7.     data: {
  8.         currentTab: 0,
  9.         show: false,
  10.         integralInfo:0,
  11.         couponList: [{
  12.                 ids: 0,
  13.                 couponValue: 299,
  14.                 useSill: "满6500元可用",
  15.                 couponName: "手机回收平台加价卷",
  16.                 couponExplain: "用户回收手机可使用此卷",
  17.                 deadlineDate: "兑换起1月内",
  18.                 timeLimit: 1,
  19.  
  20.             },
  21.             {
  22.                 ids: 1,
  23.                 couponValue: 129,
  24.                 useSill: "无使用门槛",
  25.                 couponName: "笔记本回收平台加价卷",
  26.                 couponExplain: "用户回收笔记本可使用此卷",
  27.                 deadlineDate: "兑换起3个月内",
  28.                 timeLimit:3
  29.             },
  30.         ]
  31.     },
  32.  
  33.     /**
  34.      * 生命周期函数--监听页面加载
  35.      */
  36.     onLoad(options) {
  37.         // this.getMyIntegralInfo()
  38.     },
  39.  
  40.     exchangeCoupon(e){
  41.         var that=this
  42.         console.log("====",e.currentTarget.dataset.info)
  43.         return
  44.     },
  45.  
  46.     
  47.  
  48.     /**
  49.      * 生命周期函数--监听页面初次渲染完成
  50.      */
  51.     onReady() {
  52.  
  53.     },
  54.  
  55.     /**
  56.      * 生命周期函数--监听页面显示
  57.      */
  58.     onShow() {
  59.  
  60.     },
  61.  
  62.     /**
  63.      * 生命周期函数--监听页面隐藏
  64.      */
  65.     onHide() {
  66.  
  67.     },
  68.  
  69.     /**
  70.      * 生命周期函数--监听页面卸载
  71.      */
  72.     onUnload() {
  73.  
  74.     },
  75.  
  76.     /**
  77.      * 页面相关事件处理函数--监听用户下拉动作
  78.      */
  79.     onPullDownRefresh() {
  80.  
  81.     },
  82.  
  83.     /**
  84.      * 页面上拉触底事件的处理函数
  85.      */
  86.     onReachBottom() {
  87.  
  88.     },
  89.  
  90.     /**
  91.      * 用户点击右上角分享
  92.      */
  93.     onShareAppMessage() {
  94.  
  95.     }
  96. })

页面效果

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/神奇cpp/article/detail/950786
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号