2025-08-05 15:25:23 +08:00
|
|
|
<template>
|
|
|
|
|
<view class="mine_coupon">
|
|
|
|
|
<view class="tab_header">
|
|
|
|
|
<view :class="selectType === 0 ?'tab_item tab_item_sel':'tab_item'" @click="checkType(0)">
|
|
|
|
|
<view>待使用</view>
|
|
|
|
|
<view v-if="selectType === 0" class="tab_item_but"></view>
|
|
|
|
|
</view>
|
|
|
|
|
<view :class="selectType === 1 ?'tab_item tab_item_sel':'tab_item'" @click="checkType(1)">
|
|
|
|
|
<view>已使用</view>
|
|
|
|
|
<view v-if="selectType === 1" class="tab_item_but"></view>
|
|
|
|
|
</view>
|
|
|
|
|
<view :class="selectType === 2 ?'tab_item tab_item_sel':'tab_item'" @click="checkType(2)">
|
|
|
|
|
<view>已过期</view>
|
|
|
|
|
<view v-if="selectType === 2" class="tab_item_but"></view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="tab_content">
|
|
|
|
|
<view class="tab_list">
|
|
|
|
|
<view
|
|
|
|
|
v-for="item in tabList"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
:class="selTab === item.id?'tab_item tab_item_sel':'tab_item'"
|
|
|
|
|
@click="jumpTab(item)"
|
|
|
|
|
>{{item.name}}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="tab_list_content">
|
|
|
|
|
<view class="tab_list_content_item">
|
|
|
|
|
<view class="left_">
|
|
|
|
|
<view class="title">玩具乐器部分商品</view>
|
|
|
|
|
<view class="time">2025.03.01-2025.04.31</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="right_">
|
|
|
|
|
<view class="amount_">
|
|
|
|
|
<text>¥</text>
|
|
|
|
|
<text style="font-size: 70rpx;">20</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="max_out">满￥59使用</view>
|
|
|
|
|
<view class="use_but">立即使用</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
2026-08-17 11:32:40 +08:00
|
|
|
<qiaobao-assistant page-key="pages/mine_package/mine_coupon/mine_coupon" title="优惠券" />
|
|
|
|
|
</view>
|
2025-08-05 15:25:23 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
selectType:0,// 0:待使用，1:已使用，2:已过期
|
|
|
|
|
tabList:[
|
|
|
|
|
{
|
|
|
|
|
id:0,
|
|
|
|
|
name:"全部"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id:1,
|
|
|
|
|
name:"优惠卷"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id:2,
|
|
|
|
|
name:"平台"
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
selTab:0,//
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
checkType(tab){
|
|
|
|
|
this.selectType = tab;
|
|
|
|
|
},
|
|
|
|
|
jumpTab(item){
|
|
|
|
|
this.selTab = item.id;
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
.mine_coupon{
|
|
|
|
|
height: 100vh;
|
|
|
|
|
background-color: $app-bj;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
.tab_header{
|
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
padding: 50rpx 0 20rpx;
|
|
|
|
|
.tab_item{
|
|
|
|
|
width: 33%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
color: #999999;
|
|
|
|
|
}
|
|
|
|
|
.tab_item_sel{
|
|
|
|
|
color: #222222;
|
|
|
|
|
}
|
|
|
|
|
.tab_item_but{
|
|
|
|
|
width: 20%;
|
|
|
|
|
height: 6rpx;
|
|
|
|
|
background: $app-bt-bj;
|
|
|
|
|
margin-left: 40%;
|
|
|
|
|
margin-top: 2rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.tab_content{
|
|
|
|
|
padding:30rpx;
|
|
|
|
|
.tab_list{
|
|
|
|
|
display: flex;
|
|
|
|
|
.tab_item{
|
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
border-radius: 10rpx;
|
|
|
|
|
padding: 10rpx 20rpx;
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-right: 20rpx;
|
|
|
|
|
}
|
|
|
|
|
.tab_item_sel{
|
|
|
|
|
background: rgba(255,124,65,0.1);
|
|
|
|
|
border: 1px solid $app-bt-bj;
|
|
|
|
|
color: $app-bt-bj;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.tab_list_content{
|
|
|
|
|
.tab_list_content_item{
|
|
|
|
|
height:190rpx;
|
|
|
|
|
background-image: url("data:image/png;base64,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
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-position: center; /* 将图片居中显示 */
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
padding: 30rpx;
|
|
|
|
|
}
|
|
|
|
|
.left_{
|
|
|
|
|
color: #222222;
|
|
|
|
|
display: grid;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.title{
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #222222;
|
|
|
|
|
}
|
|
|
|
|
.time{
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
font-size: 22rpx;
|
|
|
|
|
color: #222222;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.right_{
|
|
|
|
|
text-align: center;
|
|
|
|
|
.amount_{
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
font-size: 44rpx;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
}
|
|
|
|
|
.max_out{
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
font-size: 22rpx;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
}
|
|
|
|
|
.use_but{
|
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
padding: 10rpx 30rpx;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
font-size: 20rpx;
|
|
|
|
|
color: $app-bt-delete-bj;
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
