|
|
@@ -0,0 +1,306 @@
|
|
|
+<template>
|
|
|
+ <view class="page-wrap">
|
|
|
+ <view class="tabs-panel">
|
|
|
+ <view :class="{ item: true, active: tabActive === item.value }" v-for="(item, index) in tabList" :key="index" @click="tabActive = item.value">
|
|
|
+ {{ item.label }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 未使用 -->
|
|
|
+ <view v-if="tabActive === 1" class="coupon-panel">
|
|
|
+ <view class="item">
|
|
|
+ <view class="name">三八女神节特惠券【通用】</view>
|
|
|
+ <view class="desc">使用范围：所有产品品类可用</view>
|
|
|
+ <view class="desc">使用条件：满100元可用</view>
|
|
|
+ <view class="desc">有效日期：至 2023-03-31</view>
|
|
|
+ <view class="side">
|
|
|
+ <view class="price">38</view>
|
|
|
+ 满100元可用
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="name">100元财税代金券</view>
|
|
|
+ <view class="desc">使用范围：指定产品品类可用</view>
|
|
|
+ <view class="desc">使用条件：无限制</view>
|
|
|
+ <view class="desc">有效日期：无限制</view>
|
|
|
+ <view class="side">
|
|
|
+ <view class="price">100</view>
|
|
|
+ 使用无限制
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="name">六一童心特惠券</view>
|
|
|
+ <view class="desc">使用范围：所有产品品类可用</view>
|
|
|
+ <view class="desc">使用条件：满100元可用</view>
|
|
|
+ <view class="desc">有效日期：至 2023-03-31</view>
|
|
|
+ <view class="side">
|
|
|
+ <view class="price">61</view>
|
|
|
+ 满100元可用
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 已使用 -->
|
|
|
+ <view v-if="tabActive === 2" class="coupon-panel">
|
|
|
+ <view class="item disabled">
|
|
|
+ <view class="name">
|
|
|
+ <view class="price">38</view>
|
|
|
+ <view class="text">三八女神节特惠券</view>
|
|
|
+ </view>
|
|
|
+ <view class="desc">使用范围：所有产品品类可用</view>
|
|
|
+ <view class="desc">使用条件：满100元可用</view>
|
|
|
+ <view class="desc">有效日期：至 2023-03-31</view>
|
|
|
+ <view class="side">
|
|
|
+ <image class="state-1" src="../../static/img_coupon_state_1.png"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item disabled">
|
|
|
+ <view class="name">
|
|
|
+ <view class="price">100</view>
|
|
|
+ <view class="text">财税代金券</view>
|
|
|
+ </view>
|
|
|
+ <view class="desc">使用范围：所有产品品类可用</view>
|
|
|
+ <view class="desc">使用条件：满100元可用</view>
|
|
|
+ <view class="desc">有效日期：至 2023-03-31</view>
|
|
|
+ <view class="side">
|
|
|
+ <image class="state-1" src="../../static/img_coupon_state_1.png"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 已使用 -->
|
|
|
+ <view v-if="tabActive === 3" class="coupon-panel">
|
|
|
+ <view class="item disabled">
|
|
|
+ <view class="name">
|
|
|
+ <view class="price">38</view>
|
|
|
+ <view class="text">三八女神节特惠券</view>
|
|
|
+ </view>
|
|
|
+ <view class="desc">使用范围：所有产品品类可用</view>
|
|
|
+ <view class="desc">使用条件：满100元可用</view>
|
|
|
+ <view class="desc">有效日期：至 2023-03-31</view>
|
|
|
+ <view class="side">
|
|
|
+ <image class="state-2" src="../../static/img_coupon_state_2.png"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item disabled">
|
|
|
+ <view class="name">
|
|
|
+ <view class="price">100</view>
|
|
|
+ <view class="text">财税代金券</view>
|
|
|
+ </view>
|
|
|
+ <view class="desc">使用范围：所有产品品类可用</view>
|
|
|
+ <view class="desc">使用条件：满100元可用</view>
|
|
|
+ <view class="desc">有效日期：至 2023-03-31</view>
|
|
|
+ <view class="side">
|
|
|
+ <image class="state-2" src="../../static/img_coupon_state_2.png"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <button class="foot-btn">去领券中心看看</button>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tabActive: 1,
|
|
|
+ tabList: [
|
|
|
+ {
|
|
|
+ label: '未使用',
|
|
|
+ value: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '已使用',
|
|
|
+ value: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '已失效',
|
|
|
+ value: 3
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {}
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.page-wrap {
|
|
|
+ padding: 82.42rpx 0 96.15rpx;
|
|
|
+}
|
|
|
+.tabs-panel {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 82.42rpx;
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+ padding: 0 41.21rpx;
|
|
|
+ z-index: 1;
|
|
|
+
|
|
|
+ &::before,
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 1rpx;
|
|
|
+ background: #e0e0e0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ padding: 0 9.62rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 27.47rpx;
|
|
|
+ color: #999;
|
|
|
+ line-height: 82.42rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ & + .item {
|
|
|
+ margin-left: 27.47rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ color: #00bcd2;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 0%;
|
|
|
+ right: 0%;
|
|
|
+ bottom: 0%;
|
|
|
+ height: 5.49rpx;
|
|
|
+ background: #00bcd2;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.coupon-panel {
|
|
|
+ .item {
|
|
|
+ width: 708.79rpx;
|
|
|
+ height: 192.31rpx;
|
|
|
+ border-radius: 8.24rpx;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 27.47rpx 233.52rpx 27.47rpx 41.21rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 13.74rpx auto;
|
|
|
+ &:before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #fff;
|
|
|
+ -webkit-mask-image: radial-gradient(circle at 13.74rpx 50%, transparent 13.74rpx, red 13.74rpx);
|
|
|
+ -webkit-mask-position: -13.74rpx;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ right: -27.47rpx;
|
|
|
+ top: 0;
|
|
|
+ height: 100%;
|
|
|
+ width: 239.01rpx;
|
|
|
+ background: #fe6e6d;
|
|
|
+ -webkit-mask-image: radial-gradient(circle at 5rpx, transparent 6rpx, red 6rpx);
|
|
|
+ -webkit-mask-position: -6rpx;
|
|
|
+ -webkit-mask-size: 100% 19rpx;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ &.disabled::after {
|
|
|
+ background: #ccc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ font-size: 30.22rpx;
|
|
|
+ height: 68.68rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: -14rpx;
|
|
|
+ .text {
|
|
|
+ flex: 1;
|
|
|
+ width: 0;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ line-height: 1;
|
|
|
+ margin: -14rpx 10rpx 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .desc {
|
|
|
+ font-size: 24.73rpx;
|
|
|
+ color: #999;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ line-height: 1.3;
|
|
|
+ }
|
|
|
+ .side {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ height: 100%;
|
|
|
+ width: 211.54rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 21.98rpx;
|
|
|
+ color: #fff;
|
|
|
+ padding-top: 27.47rpx;
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ font-size: 68.68rpx;
|
|
|
+ &:before {
|
|
|
+ content: '￥';
|
|
|
+ font-size: 38.46rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .state-1 {
|
|
|
+ width: 182.69rpx;
|
|
|
+ height: 120.88rpx;
|
|
|
+ margin-top: 13.74rpx;
|
|
|
+ }
|
|
|
+ .state-2 {
|
|
|
+ width: 189.56rpx;
|
|
|
+ height: 130.49rpx;
|
|
|
+ margin-top: 8.24rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.foot-btn {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 96.15rpx;
|
|
|
+ background: #fff;
|
|
|
+ font-size: 30.22rpx;
|
|
|
+ color: #00bcd2;
|
|
|
+ line-height: 96.15rpx;
|
|
|
+ border: none;
|
|
|
+ border-radius: 0;
|
|
|
+ &:before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 1rpx;
|
|
|
+ background: #e0e0e0;
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
sinea17
