77 lines
2.4 KiB
Vue
77 lines
2.4 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 分类标签 -->
|
|
<view class="tabs">
|
|
<view v-for="(tab, index) in tabList" :key="index" :class="['tab', { active: currentTab === index }]"
|
|
@click="switchTab(index)">
|
|
{{ tab }}
|
|
</view>
|
|
</view>
|
|
<!-- 红包列表 -->
|
|
<view class="content">
|
|
<view v-for="(item, index) in redPacketList" :key="index">
|
|
<view class="item">
|
|
<view class="item_left">￥{{ item.yuan }}</view>
|
|
<view class="item_center">
|
|
<view class="title">{{ item.name }}</view>
|
|
<view class="time">{{ item.time }}</view>
|
|
<view class="desc">{{ item.shiyong }}</view>
|
|
</view>
|
|
<view class="status2" :data-status="item.status"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
currentTab: 0, // 当前选中的标签索引
|
|
tabList: ['已使用', '已过期'],
|
|
redPacketList: [
|
|
{
|
|
name: '新用户注册红包',
|
|
time: '2085.07.77 00:27到期',
|
|
shiyong: '全平台使用',
|
|
status: '去使用',
|
|
yuan: 5.32
|
|
},
|
|
{
|
|
name: '满减红包',
|
|
time: '2085.07.77 00:27到期',
|
|
shiyong: '全平台使用',
|
|
status: '去使用',
|
|
yuan: 5,
|
|
manjian: '满0元可用'
|
|
},
|
|
{
|
|
name: '固定红包',
|
|
time: '2085.07.77 00:27到期',
|
|
shiyong: '限改店铺指定商品使用',
|
|
status: '去使用',
|
|
yuan: 5
|
|
},
|
|
{
|
|
name: '固定红包',
|
|
time: '2085.07.77 00:27到期',
|
|
shiyong: '限广州地区使用',
|
|
status: '去使用',
|
|
yuan: 5
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
switchTab(index) {
|
|
this.currentTab = index;
|
|
console.log('选中的标签:', this.tabList[index]);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import url("./index.css");
|
|
</style> |