2025-12-16 17:11:52 +08:00

106 lines
3.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="container">
<!-- 顶部统计 -->
<view class="stats">
<view class="stat-item">
<view class="stat-label">红包数</view>
<view class="stat-value">1000,000</view>
</view>
<view class="stat-item">
<view class="stat-label">红包金额</view>
<view class="stat-value">1000,000</view>
</view>
</view>
<!-- 分类标签 -->
<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">
<view class="price">{{ item.yuan }}</view>
<view v-if="item.manjian" class="manjian">{{ item.manjian }}</view>
</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="item_right">
<view class="status" @click="useRedPacket(item)">{{ item.status }}</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { menuButtonInfo, NavgateTo, picUrl, request } from '../../../utils/index';
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: {
useRedPacket(item) {
console.log('使用红包:', item);
},
switchTab(index) {
this.currentTab = index;
console.log('选中的标签:', this.tabList[index]);
if(this.tabList[index] == '历史记录'){
NavgateTo('/packages/user/history/index');
}
}
}
}
</script>
<style>
@import url("./index.css");
</style>