index.wxml
<view style="margin: 0.5rem;"><view class="points">我的积分：{{integralInfo}}</view></view><view><view wx:if="{{couponList.length>0}}" wx:for="{{couponList}}" wx:key="{{item.id}}"><view class="tickets"><view class="l-tickets.usable"><view class="discounts"><text class="symbol">￥</text><text class="quantity">{{item.couponValue}}</text></view><view class="rule"><text class="rule-text">{{item.useSill}}</text></view></view><view class="r-tickets"><van-row><van-col span="22"><view class="coupon-left"><view class="coupon-name"><text class="coupon-name-text {{currentTab ==0 ? 'usable' : currentTab ==1 ? 'used' : 'expired'}}">{{item.couponName}}</text></view><view class="coupon-Instructions"><text class="coupon-Instructions-text {{currentTab ==0 ? 'usable' : currentTab ==1 ? 'used' : 'expired'}}">{{item.couponExplain}}</text></view><view class="coupon-validity"><text class="coupon-validity-text {{currentTab ==0 ? 'usable' : currentTab ==1 ? 'used' : 'expired'}}">有效日期：{{item.deadlineDate}}</text></view></view></van-col><van-col span="2"><view bindtap="exchangeCoupon" data-info="{{item}}" class="lmmediate-use.usable">立即兑换</view></van-col></van-row></view></view></view><view class="empty" wx:if="{{couponList.length==0}}"><van-empty description="暂无优惠卷！" /><!-- <van-empty class="custom-image" image="/pages/image/userCenter/coupon.png" description="暂无优惠卷！" /> --></view>
</view>
<van-dialog style="text-align: center;" use-slot title="{{popupData.codename}}" show="{{ show }}" bind:close="onClose"><image style="width: 15rem;height: 15rem;" src="{{popupData.codeimage}}" /><view style="text-align: center;font-size: 0.95rem;font-weight: 700;margin-bottom: 0.5rem;letter-spacing: 0.05rem;margin-top: -1rem;">{{popupData.code}}</view>
</van-dialog>index.wxss
.topBar {margin-top: -0.5rem;display: flex;/* box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5); *//* position: fixed; */top: 0;left: 0;width: 100%;z-index: 9999;background-color: white;
}.classScroll {width: 375px;padding-left: 2px;
}.tab-bar {display: flex;justify-content: flex-start;/* 修改为左对齐 */width: fit-content;/* 修改为适应内容的宽度 */
}.tab-item {flex: 1 0 auto;display: inline-flex;flex-direction: column;align-items: center;justify-content: center;padding-left: 5px;padding-right: 5px;line-height: 40px;color: #888888;}.tab-item.active {/* margin-left: 0.5rem; */height: 1.5rem;width: 3rem;color: black;border-radius: 5px;font-weight: 500;font-weight: bolder;
}.tab-item.index {/* margin-left: 0.5rem; */height: 1.5rem;width: 3rem;color: rgb(156, 148, 148);border-radius: 5px;font-weight: bolder;
}.teacher .tab-item.active1 {/* margin-left: 0.5rem; */height: 1.5rem;width: 2rem;color: #56c5a1;/* border-radius: 5px; *//* background-color: #56c5a1; */font-weight: bolder;}.text-title.active1 {height: 2rem;border-bottom-color: #56c5a1;border-bottom-style: solid;border-bottom-width: 6rpx;
}.points {font-size: 0.95rem;font-weight: 800;
}.convert {font-size: 0.65rem;float: right;margin-right: 0.5rem;margin-top: 0.5rem;background-color: #2ea37e;color: white;padding: 0.25rem 0.25rem;border-radius: 5px;font-weight: bolder;letter-spacing: 0.15rem;
}.tickets {display: flex;padding: 20rpx;width: 100%;height: 230rpx;box-sizing: border-box;
}.l-tickets.usable {width: 25%;position: relative;background: radial-gradient(circle at right top, transparent 16rpx, #ce0f0f 0, #c9380c 100%) right top / 100% 50% no-repeat,radial-gradient(circle at right bottom, transparent 16rpx, #ce0f0f 0, #c9380c 100%) right bottom / 100% 50% no-repeat;filter: drop-shadow(-3px 0 3px rgba(0, 0, 0, .3));
}.l-tickets.usable::after {content: '';position: absolute;height: 100%;width: 8rpx;top: 0;left: -8rpx;background: radial-gradient(circle at left center, transparent 8rpx, #ce0f0f 0) left center / 8rpx 20rpx;
}.l-tickets.used {width: 25%;position: relative;background: radial-gradient(circle at right top, transparent 16rpx, #835243 0, #ac644e 100%) right top / 100% 50% no-repeat,radial-gradient(circle at right bottom, transparent 16rpx, #835243 0, #ac644e 100%) right bottom / 100% 50% no-repeat;filter: drop-shadow(-3px 0 3px rgba(0, 0, 0, .3));
}.l-tickets.used::after {content: '';position: absolute;height: 100%;width: 8rpx;top: 0;left: -8rpx;background: radial-gradient(circle at left center, transparent 8rpx, #ac644e 0) left center / 8rpx 20rpx;
}.l-tickets.expired {width: 25%;position: relative;background: radial-gradient(circle at right top, transparent 16rpx, #999292 0, #817a7a 100%) right top / 100% 50% no-repeat,radial-gradient(circle at right bottom, transparent 16rpx, #999292 0, #817a7a 100%) right bottom / 100% 50% no-repeat;filter: drop-shadow(-3px 0 3px rgba(0, 0, 0, .3));
}.l-tickets.expired::after {content: '';position: absolute;height: 100%;width: 8rpx;top: 0;left: -8rpx;background: radial-gradient(circle at left center, transparent 8rpx, #817a7a 0) left center / 8rpx 20rpx;
}.r-tickets {flex: 1;position: relative;background: radial-gradient(circle at left top, transparent 16rpx, #fdfcfb 0, #fdfcfb 100%) right top / 100% 50% no-repeat,radial-gradient(circle at left bottom, transparent 16rpx, #fdfcfb 0, #fdfcfb 100%) right bottom / 100% 50% no-repeat;filter: drop-shadow(3px 0 3px rgba(0, 0, 0, .3));
}.r-tickets::before {content: '';width: 1rpx;background: linear-gradient(to top, #fff 0%, #fff 50%, transparent 50%) top left / 1rpx 20rpx repeat-y;position: absolute;left: 0;top: 16rpx;bottom: 16rpx;
}.r-tickets::after {content: '';position: absolute;height: 100%;width: 8rpx;top: 0;right: -8rpx;background: radial-gradient(circle at right center, transparent 8rpx, #fdfcfb 0) right center / 8rpx 20rpx;
}.discounts {color: white;text-align: center;margin-top: 1.0rem;
}.symbol {font-size: 1.25rem;
}.quantity {font-size: 1.75rem;
}.rule {margin-top: 0.5rem;text-align: center;color: white;
}.rule-text {font-size: 0.65rem;
}.coupon-left {/* width: 100%; *//* height: 190rpx; */margin-left: 20rpx;padding-right: 10rpx;border-right-color: #79726f;border-right-style: solid;border-right-width: 2rpx;border-right-style: dashed;
}.coupon-name {margin-top: 10rpx;font-weight: 1000;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;
}.coupon-Instructions {margin-top: 0.5rem;height: 70rpx;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;
}.coupon-validity {margin-top: 0.5rem;
}/* 立即使用 */
.coupon-name-text.usable {font-size: 0.85rem;color: black;
}.coupon-Instructions-text.usable {font-size: 0.80rem;color: black;
}.coupon-validity-text.usable {font-size: 0.80rem;color: rgb(90, 81, 81);
}/* 已使用 */
.coupon-name-text.used {font-size: 0.85rem;color: #ac644e;
}.coupon-Instructions-text.used {font-size: 0.80rem;color: #ac644e;
}.coupon-validity-text.used {font-size: 0.80rem;color: #ac644e;
}/* 已过期 */
.coupon-name-text.expired {font-size: 0.85rem;color: #817a7a;
}.coupon-Instructions-text.expired {font-size: 0.80rem;color: #817a7a;
}.coupon-validity-text.expired {font-size: 0.80rem;color: #817a7a;
}.lmmediate-use.usable {color: tomato;margin-top: 20rpx;display: flex;text-align: center;justify-content: center;
}.lmmediate-use.used {color: #ac644e;margin-top: 35rpx;display: flex;text-align: center;justify-content: center;
}.lmmediate-use.expired {color: #817a7a;margin-top: 35rpx;display: flex;text-align: center;justify-content: center;
}/* .empty .van-empty__image__img {height: 8rem;width: 8rem;
} *//* .empty .van-empty__description {color: #969799;font-size: 20px;line-height: 20px;margin-top: 16px;padding: 0 60px;
} */index.js
// pages/user/pointExchange/pointExchange.js
Page({/*** 页面的初始数据*/data: {currentTab: 0,show: false,integralInfo:0,couponList: [{ids: 0,couponValue: 299,useSill: "满6500元可用",couponName: "手机回收平台加价卷",couponExplain: "用户回收手机可使用此卷",deadlineDate: "兑换起1月内",timeLimit: 1,},{ids: 1,couponValue: 129,useSill: "无使用门槛",couponName: "笔记本回收平台加价卷",couponExplain: "用户回收笔记本可使用此卷",deadlineDate: "兑换起3个月内",timeLimit:3},]},/*** 生命周期函数--监听页面加载*/onLoad(options) {// this.getMyIntegralInfo()},exchangeCoupon(e){var that=thisconsole.log("====",e.currentTarget.dataset.info)return},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})页面效果
