192 lines
4.0 KiB
Vue
192 lines
4.0 KiB
Vue
<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>
|
|
<qiaobao-assistant page-key="pages/mine_package/mine_coupon/mine_coupon" title="优惠券" />
|
|
</view>
|
|
</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("https://static.tbmall.xin/static/mine_coupon_opt_1.png");
|
|
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>
|