477 lines
11 KiB
Vue
477 lines
11 KiB
Vue
<template>
|
|
<view class="package-page">
|
|
<!-- 套餐统计 -->
|
|
<view class="stats-card">
|
|
<view class="stat-item">
|
|
<text class="stat-value">{{ totalPackages }}</text>
|
|
<text class="stat-label">总套餐数</text>
|
|
</view>
|
|
<view class="stat-divider"></view>
|
|
<view class="stat-item">
|
|
<text class="stat-value">{{ activePackages }}</text>
|
|
<text class="stat-label">使用中</text>
|
|
</view>
|
|
<view class="stat-divider"></view>
|
|
<view class="stat-item">
|
|
<text class="stat-value">{{ expiredPackages }}</text>
|
|
<text class="stat-label">已过期</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 筛选标签 -->
|
|
<view class="filter-tabs">
|
|
<view
|
|
v-for="tab in tabs"
|
|
:key="tab.value"
|
|
class="tab-item"
|
|
:class="{ active: currentTab === tab.value }"
|
|
@click="changeTab(tab.value)">
|
|
{{ tab.label }}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 套餐列表 -->
|
|
<view class="package-list">
|
|
<view v-if="packageList.length === 0" class="empty-state">
|
|
<text class="empty-icon">📭</text>
|
|
<text class="empty-text">暂无套餐</text>
|
|
<button class="btn-purchase" @click="goPurchase">购买套餐</button>
|
|
</view>
|
|
|
|
<view v-else>
|
|
<view
|
|
v-for="pkg in packageList"
|
|
:key="pkg.id"
|
|
class="package-item"
|
|
@click="goDetail(pkg.id)">
|
|
<view class="package-header">
|
|
<view class="package-left">
|
|
<text class="package-name">{{ pkg.packageName }}</text>
|
|
<text class="package-type">{{ getPackageTypeName(pkg.packageType) }}</text>
|
|
</view>
|
|
<view class="package-status" :class="'status-' + pkg.status">
|
|
{{ getStatusName(pkg.status) }}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="package-progress" v-if="pkg.totalHours">
|
|
<view class="progress-bar">
|
|
<view class="progress-fill" :style="{ width: getProgress(pkg) + '%' }"></view>
|
|
</view>
|
|
<text class="progress-text">{{ getProgress(pkg) }}%</text>
|
|
</view>
|
|
|
|
<view class="package-info">
|
|
<view class="info-item" v-if="pkg.totalHours">
|
|
<text class="info-label">总时长</text>
|
|
<text class="info-value">{{ pkg.totalHours }}小时</text>
|
|
</view>
|
|
<view class="info-item" v-if="pkg.totalHours">
|
|
<text class="info-label">剩余</text>
|
|
<text class="info-value primary">{{ pkg.remainingHours }}小时</text>
|
|
</view>
|
|
<view class="info-item" v-if="pkg.totalCount">
|
|
<text class="info-label">总次数</text>
|
|
<text class="info-value">{{ pkg.totalCount }}次</text>
|
|
</view>
|
|
<view class="info-item" v-if="pkg.totalCount">
|
|
<text class="info-label">剩余</text>
|
|
<text class="info-value primary">{{ pkg.remainingCount }}次</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="package-footer">
|
|
<text class="expire-date">有效期至：{{ pkg.expireDate }}</text>
|
|
<text class="package-price">¥{{ pkg.price }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 购买按钮 -->
|
|
<view class="bottom-bar">
|
|
<button class="btn-purchase-fixed" @click="goPurchase">购买套餐</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
packageList: [],
|
|
currentTab: null,
|
|
tabs: [
|
|
{ label: '全部', value: null },
|
|
{ label: '使用中', value: 1 },
|
|
{ label: '已用完', value: 2 },
|
|
{ label: '已过期', value: 3 }
|
|
],
|
|
totalPackages: 0,
|
|
activePackages: 0,
|
|
expiredPackages: 0,
|
|
page: 1,
|
|
size: 10,
|
|
loading: false
|
|
}
|
|
},
|
|
|
|
onLoad() {
|
|
this.loadPackageList()
|
|
this.loadStatistics()
|
|
},
|
|
|
|
methods: {
|
|
async loadPackageList() {
|
|
if (this.loading) return
|
|
this.loading = true
|
|
|
|
try {
|
|
const params = {
|
|
page: this.page,
|
|
size: this.size
|
|
}
|
|
if (this.currentTab !== null) {
|
|
params.status = this.currentTab
|
|
}
|
|
|
|
const res = await this.$http.get('/api/package/user/list', { params })
|
|
if (res.code === 200) {
|
|
this.packageList = res.data.records
|
|
}
|
|
} catch (e) {
|
|
console.error('加载套餐列表失败', e)
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
|
|
async loadStatistics() {
|
|
try {
|
|
const res = await this.$http.get('/api/package/user/list', {
|
|
params: { page: 1, size: 100 }
|
|
})
|
|
if (res.code === 200) {
|
|
const list = res.data.records
|
|
this.totalPackages = list.length
|
|
this.activePackages = list.filter(p => p.status === 1).length
|
|
this.expiredPackages = list.filter(p => p.status === 3).length
|
|
}
|
|
} catch (e) {
|
|
console.error('加载统计失败', e)
|
|
}
|
|
},
|
|
|
|
changeTab(value) {
|
|
this.currentTab = value
|
|
this.page = 1
|
|
this.packageList = []
|
|
this.loadPackageList()
|
|
},
|
|
|
|
getPackageTypeName(type) {
|
|
const names = {
|
|
'time': '时长套餐',
|
|
'service': '服务套餐',
|
|
'combo': '组合套餐'
|
|
}
|
|
return names[type] || type
|
|
},
|
|
|
|
getStatusName(status) {
|
|
const names = {
|
|
0: '未激活',
|
|
1: '使用中',
|
|
2: '已用完',
|
|
3: '已过期'
|
|
}
|
|
return names[status] || '未知'
|
|
},
|
|
|
|
getProgress(pkg) {
|
|
if (pkg.totalHours && pkg.totalHours > 0) {
|
|
const progress = (pkg.usedHours / pkg.totalHours) * 100
|
|
return Math.round(progress)
|
|
}
|
|
if (pkg.totalCount && pkg.totalCount > 0) {
|
|
const progress = (pkg.usedCount / pkg.totalCount) * 100
|
|
return Math.round(progress)
|
|
}
|
|
return 0
|
|
},
|
|
|
|
goDetail(id) {
|
|
uni.navigateTo({
|
|
url: `/pages/package/detail?id=${id}`
|
|
})
|
|
},
|
|
|
|
goPurchase() {
|
|
uni.navigateTo({
|
|
url: '/pages/package/list'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/static/css/common.scss';
|
|
|
|
.package-page {
|
|
min-height: 100vh;
|
|
background: $bg-color;
|
|
padding-bottom: 120rpx;
|
|
}
|
|
|
|
.stats-card {
|
|
background: linear-gradient(135deg, #4a9b9f 0%, #3d8185 100%);
|
|
padding: 60rpx 40rpx;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
|
|
.stat-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
|
|
.stat-value {
|
|
display: block;
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.stat-label {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
}
|
|
|
|
.stat-divider {
|
|
width: 2rpx;
|
|
height: 80rpx;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
}
|
|
|
|
.filter-tabs {
|
|
display: flex;
|
|
background: #fff;
|
|
padding: 20rpx 30rpx;
|
|
|
|
.tab-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 16rpx 0;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
border-radius: 8rpx;
|
|
transition: all 0.3s;
|
|
|
|
&.active {
|
|
color: #4a9b9f;
|
|
background: rgba(74, 155, 159, 0.1);
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.package-list {
|
|
padding: 20rpx 30rpx;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 120rpx 0;
|
|
|
|
.empty-image {
|
|
width: 300rpx;
|
|
height: 300rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.empty-text {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.btn-purchase {
|
|
width: 300rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
background: #4a9b9f;
|
|
color: #fff;
|
|
border-radius: 40rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.package-item {
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
|
|
.package-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 24rpx;
|
|
|
|
.package-left {
|
|
flex: 1;
|
|
|
|
.package-name {
|
|
display: block;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.package-type {
|
|
display: inline-block;
|
|
font-size: 24rpx;
|
|
color: #4a9b9f;
|
|
background: rgba(74, 155, 159, 0.1);
|
|
padding: 4rpx 12rpx;
|
|
border-radius: 4rpx;
|
|
}
|
|
}
|
|
|
|
.package-status {
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 8rpx;
|
|
font-size: 24rpx;
|
|
|
|
&.status-0 {
|
|
background: #f0f0f0;
|
|
color: #999;
|
|
}
|
|
|
|
&.status-1 {
|
|
background: rgba(74, 155, 159, 0.1);
|
|
color: #4a9b9f;
|
|
}
|
|
|
|
&.status-2 {
|
|
background: #f0f0f0;
|
|
color: #999;
|
|
}
|
|
|
|
&.status-3 {
|
|
background: #fff3f3;
|
|
color: #ff4d4f;
|
|
}
|
|
}
|
|
}
|
|
|
|
.package-progress {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 24rpx;
|
|
|
|
.progress-bar {
|
|
flex: 1;
|
|
height: 12rpx;
|
|
background: #f0f0f0;
|
|
border-radius: 6rpx;
|
|
overflow: hidden;
|
|
margin-right: 16rpx;
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #4a9b9f 0%, #5fb3b7 100%);
|
|
border-radius: 6rpx;
|
|
transition: width 0.3s;
|
|
}
|
|
}
|
|
|
|
.progress-text {
|
|
font-size: 24rpx;
|
|
color: #4a9b9f;
|
|
font-weight: bold;
|
|
min-width: 80rpx;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.package-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 20rpx 0;
|
|
border-top: 1rpx solid #f0f0f0;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
margin-bottom: 20rpx;
|
|
|
|
.info-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
|
|
.info-label {
|
|
display: block;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.info-value {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
|
|
&.primary {
|
|
color: #4a9b9f;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.package-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.expire-date {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.package-price {
|
|
font-size: 28rpx;
|
|
color: #ff4d4f;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 20rpx 30rpx;
|
|
background: #fff;
|
|
box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
|
|
.btn-purchase-fixed {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
background: linear-gradient(135deg, #4a9b9f 0%, #3d8185 100%);
|
|
color: #fff;
|
|
border-radius: 44rpx;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
border: none;
|
|
}
|
|
}
|
|
</style>
|