388 lines
8.8 KiB
Vue
388 lines
8.8 KiB
Vue
<template>
|
|
<view class="detail-page">
|
|
<!-- 时卡信息卡片 -->
|
|
<view class="card-info-card">
|
|
<view class="card-header">
|
|
<view class="card-name">{{ card.cardName }}</view>
|
|
<view class="card-status" :class="'status-' + card.status">
|
|
{{ card.statusName }}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="card-no">{{ card.cardNo }}</view>
|
|
|
|
<view class="hours-display">
|
|
<view class="hours-item">
|
|
<text class="hours-value">{{ card.totalHours }}</text>
|
|
<text class="hours-label">总时长(小时)</text>
|
|
</view>
|
|
<view class="hours-divider"></view>
|
|
<view class="hours-item">
|
|
<text class="hours-value used">{{ card.usedHours }}</text>
|
|
<text class="hours-label">已使用(小时)</text>
|
|
</view>
|
|
<view class="hours-divider"></view>
|
|
<view class="hours-item">
|
|
<text class="hours-value remaining">{{ card.remainingHours }}</text>
|
|
<text class="hours-label">剩余(小时)</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="progress-section">
|
|
<view class="progress-bar">
|
|
<view class="progress-fill" :style="{ width: progress + '%' }"></view>
|
|
</view>
|
|
<text class="progress-text">已使用 {{ progress }}%</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 时卡详细信息 -->
|
|
<view class="info-section">
|
|
<view class="section-title">时卡信息</view>
|
|
<view class="info-list">
|
|
<view class="info-item">
|
|
<text class="label">时卡类型</text>
|
|
<text class="value">{{ card.cardTypeName }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="label">购买价格</text>
|
|
<text class="value price">¥{{ card.price }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="label">服务类型</text>
|
|
<text class="value">{{ card.serviceType || '不限' }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="label">教师等级</text>
|
|
<text class="value">{{ getTeacherLevel(card.teacherLevel) }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="label">服务方式</text>
|
|
<text class="value">{{ getServiceMode(card.serviceMode) }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="label">开始日期</text>
|
|
<text class="value">{{ card.startDate || '未开始' }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="label">有效期至</text>
|
|
<text class="value">{{ card.expireDate }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="label">使用次数</text>
|
|
<text class="value">{{ card.usageCount || 0 }}次</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 使用记录 -->
|
|
<view class="usage-section">
|
|
<view class="section-header">
|
|
<text class="section-title">使用记录</text>
|
|
<text class="view-all" @click="goUsageList">查看全部 ></text>
|
|
</view>
|
|
|
|
<view v-if="usageList.length === 0" class="empty-usage">
|
|
<text>暂无使用记录</text>
|
|
</view>
|
|
|
|
<view v-else class="usage-list">
|
|
<view v-for="item in usageList" :key="item.id" class="usage-item">
|
|
<view class="usage-left">
|
|
<text class="usage-date">{{ item.usageDate }}</text>
|
|
<text class="usage-content">{{ item.serviceContent || '陪读服务' }}</text>
|
|
</view>
|
|
<view class="usage-right">
|
|
<text class="usage-hours">-{{ item.usageHours }}小时</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
cardId: null,
|
|
card: {},
|
|
usageList: [],
|
|
progress: 0
|
|
}
|
|
},
|
|
|
|
onLoad(options) {
|
|
this.cardId = options.id
|
|
this.loadCardDetail()
|
|
this.loadUsageList()
|
|
},
|
|
|
|
methods: {
|
|
async loadCardDetail() {
|
|
try {
|
|
const res = await this.$http.get(`/api/timecard/${this.cardId}`)
|
|
if (res.code === 200) {
|
|
this.card = res.data
|
|
this.calculateProgress()
|
|
}
|
|
} catch (e) {
|
|
console.error('加载详情失败', e)
|
|
uni.showToast({
|
|
title: '加载失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
|
|
async loadUsageList() {
|
|
try {
|
|
const res = await this.$http.get('/api/timecard/usage/list', {
|
|
params: {
|
|
timeCardId: this.cardId,
|
|
page: 1,
|
|
size: 5
|
|
}
|
|
})
|
|
if (res.code === 200) {
|
|
this.usageList = res.data.records
|
|
}
|
|
} catch (e) {
|
|
console.error('加载使用记录失败', e)
|
|
}
|
|
},
|
|
|
|
calculateProgress() {
|
|
if (this.card.totalHours && this.card.totalHours > 0) {
|
|
this.progress = Math.round((this.card.usedHours / this.card.totalHours) * 100)
|
|
}
|
|
},
|
|
|
|
getTeacherLevel(level) {
|
|
const levels = {
|
|
'normal': '普通教师',
|
|
'gold': '金牌教师',
|
|
'scholar': '学霸教师'
|
|
}
|
|
return levels[level] || '不限'
|
|
},
|
|
|
|
getServiceMode(mode) {
|
|
const modes = {
|
|
'home': '入户服务',
|
|
'store': '到店服务'
|
|
}
|
|
return modes[mode] || '不限'
|
|
},
|
|
|
|
goUsageList() {
|
|
uni.navigateTo({
|
|
url: `/pages/timecard/usage?id=${this.cardId}`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/static/css/common.scss';
|
|
|
|
.detail-page {
|
|
min-height: 100vh;
|
|
background: $bg-color;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
|
|
.card-info-card {
|
|
background: linear-gradient(135deg, #4a9b9f 0%, #3d8185 100%);
|
|
padding: 60rpx 40rpx;
|
|
color: #fff;
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
|
|
.card-name {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.card-status {
|
|
padding: 8rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
}
|
|
|
|
.card-no {
|
|
font-size: 24rpx;
|
|
opacity: 0.8;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.hours-display {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-bottom: 40rpx;
|
|
|
|
.hours-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
|
|
.hours-value {
|
|
display: block;
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 12rpx;
|
|
|
|
&.used {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
&.remaining {
|
|
color: #ffd700;
|
|
}
|
|
}
|
|
|
|
.hours-label {
|
|
display: block;
|
|
font-size: 24rpx;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.hours-divider {
|
|
width: 2rpx;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
margin: 10rpx 0;
|
|
}
|
|
}
|
|
|
|
.progress-section {
|
|
.progress-bar {
|
|
height: 16rpx;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-radius: 8rpx;
|
|
overflow: hidden;
|
|
margin-bottom: 16rpx;
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: #ffd700;
|
|
border-radius: 8rpx;
|
|
transition: width 0.3s;
|
|
}
|
|
}
|
|
|
|
.progress-text {
|
|
font-size: 24rpx;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
}
|
|
|
|
.info-section, .usage-section {
|
|
background: #fff;
|
|
margin: 20rpx 30rpx;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 30rpx;
|
|
|
|
.view-all {
|
|
font-size: 28rpx;
|
|
color: #4a9b9f;
|
|
}
|
|
}
|
|
}
|
|
|
|
.info-list {
|
|
.info-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 24rpx 0;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.label {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.value {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
|
|
&.price {
|
|
color: #ff4d4f;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.empty-usage {
|
|
text-align: center;
|
|
padding: 80rpx 0;
|
|
color: #999;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.usage-list {
|
|
.usage-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 24rpx 0;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.usage-left {
|
|
flex: 1;
|
|
|
|
.usage-date {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.usage-content {
|
|
display: block;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.usage-right {
|
|
.usage-hours {
|
|
font-size: 32rpx;
|
|
color: #4a9b9f;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|