|
|
@@ -0,0 +1,182 @@
|
|
|
+<template>
|
|
|
+ <view class="common_page adffc" :style="{'height':h+'px', 'padding-top':mt+'px'}">
|
|
|
+ <cus-header title="我的专享卷" bgColor="#FFFFFF"></cus-header>
|
|
|
+ <div class="tab adf">
|
|
|
+ <div class="tab-pre adfacjc" :class="{'active':tidx===0}" @tap="changeTab(0)">未使用</div>
|
|
|
+ <div class="tab-pre adfacjc" :class="{'active':tidx===1}" @tap="changeTab(1)">已使用</div>
|
|
|
+ <div class="tab-pre adfacjc" :class="{'active':tidx===2}" @tap="changeTab(2)">已过期</div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <up-list @scrolltolower="scrolltolower" style="height: 100%;">
|
|
|
+ <up-list-item v-for="(item, index) in list" :key="index">
|
|
|
+ <div class="box" :style="{'margin-top':index===0?0:'24rpx'}">
|
|
|
+ <div class="box-top">
|
|
|
+ <div class="box-top-title">{{'活动专享卷'}}</div>
|
|
|
+ <div class="box-top-tip">{{'环保知识知多少? 让孩子成为大自然的守护者！'}}</div>
|
|
|
+ <div class="box-top-date adfacjb">
|
|
|
+ <div class="box-top-date-left">有效期至{{'2025.07.30 23:59'}}</div>
|
|
|
+ <div class="box-top-date-right">立即使用</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-bottom adf" @tap="handleExpand(item,index)">
|
|
|
+ <div class="box-bottom-left">
|
|
|
+ <div class="h" v-if="!item.select">本券仅限报名指定活动使用，不可用于其他场景</div>
|
|
|
+ <div class="s" v-else>
|
|
|
+ <div class="p">1.适用范围：本券仅限报名指定活动使用；</div>
|
|
|
+ <div class="p">2.使用方式：在报名指定活动时将自动抵扣爱心值；</div>
|
|
|
+ <div class="p">3.不退不换：券一经使用，不可退还、不可取消；</div>
|
|
|
+ <div class="p">4.有效期：请于券面标注日期前使用，逾期自动失效。</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-bottom-right">
|
|
|
+ <up-icon name="arrow-right" color="#CBCBCB" size="32rpx" v-if="!item.select"></up-icon>
|
|
|
+ <up-icon name="arrow-up" color="#CBCBCB" size="32rpx" v-else></up-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </up-list-item>
|
|
|
+ </up-list>
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup name="">
|
|
|
+ import CusHeader from '@/components/CusHeader/index.vue'
|
|
|
+ import { ref } from 'vue'
|
|
|
+
|
|
|
+ const tidx = ref(0)
|
|
|
+ const list = ref(
|
|
|
+ [{status:0,select:false},
|
|
|
+ {status:0,select:false},
|
|
|
+ {status:0,select:false},
|
|
|
+ {status:0,select:false}]
|
|
|
+ )
|
|
|
+
|
|
|
+ const changeTab = index => {
|
|
|
+ tidx.value = index;
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleExpand = (item,index) => {
|
|
|
+ list.value[index].select = !list.value[index].select;
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .common_page{
|
|
|
+ padding: 0 0 40rpx;
|
|
|
+ .tab{
|
|
|
+ width: 100%;
|
|
|
+ height: 110rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ &-pre{
|
|
|
+ width: 50%;
|
|
|
+ height: 110rpx;
|
|
|
+ position: relative;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #6B7280;
|
|
|
+ line-height: 28rpx;
|
|
|
+ &.active{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #252525;
|
|
|
+ line-height: 32rpx;
|
|
|
+ &::after{
|
|
|
+ content: '';
|
|
|
+ width: 120rpx;
|
|
|
+ height: 6rpx;
|
|
|
+ background: #252525;
|
|
|
+ border-radius: 3rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -60rpx;
|
|
|
+ bottom: 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list{
|
|
|
+ margin-top: 20rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ flex: 1;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ .box{
|
|
|
+ &-top{
|
|
|
+ border-radius: 24rpx 24rpx 0 0;
|
|
|
+ padding: 40rpx 24rpx 24rpx;
|
|
|
+ background: linear-gradient(90deg,#FBE9CA 50%,#FCF3E4 100%);
|
|
|
+ &-title{
|
|
|
+ font-family: PingFang-SC, PingFang-SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #7E541A;
|
|
|
+ line-height: 36rpx;
|
|
|
+ }
|
|
|
+ &-tip{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #AA7633;
|
|
|
+ line-height: 24rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ &-date{
|
|
|
+ margin-top: 42rpx;
|
|
|
+ &-left{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #AA7633;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ &-right{
|
|
|
+ padding: 8rpx 20rpx;
|
|
|
+ background: #AA7633;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 33rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-bottom{
|
|
|
+ border-radius: 0 0 24rpx 24rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding: 16rpx 24rpx;
|
|
|
+ &-left{
|
|
|
+ width: calc(100% - 54rpx);
|
|
|
+ .h{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #A4A4A4;
|
|
|
+ line-height: 40rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .s{
|
|
|
+ .p{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #A4A4A4;
|
|
|
+ line-height: 44rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-right{
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ padding-top: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
