106 lines
3.5 KiB
Vue
106 lines
3.5 KiB
Vue
<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> |