|
|
@@ -0,0 +1,118 @@
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <!-- 加载中 -->
|
|
|
+ <view class="loading" v-if="loading">
|
|
|
+ <text>加载中...</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 计划详情 -->
|
|
|
+ <template v-else-if="plan">
|
|
|
+ <view class="header">
|
|
|
+ <text class="title">{{ plan.title }}</text>
|
|
|
+ <view class="status-badge" :class="'status-' + (plan.status || 0)">
|
|
|
+ <text>{{ statusText(plan.status) }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="info-card" v-if="plan.description">
|
|
|
+ <text class="info-label">计划说明</text>
|
|
|
+ <text class="info-value">{{ plan.description }}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="info-card">
|
|
|
+ <text class="info-label">孩子</text>
|
|
|
+ <text class="info-value">{{ plan.childName || '--' }}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="info-card" v-if="plan.guideName">
|
|
|
+ <text class="info-label">规划师</text>
|
|
|
+ <text class="info-value">{{ plan.guideName }}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="info-card">
|
|
|
+ <text class="info-label">创建时间</text>
|
|
|
+ <text class="info-value">{{ plan.createTime || '--' }}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 计划条目 -->
|
|
|
+ <view class="items-section" v-if="plan.items && plan.items.length > 0">
|
|
|
+ <text class="section-title">计划内容</text>
|
|
|
+ <view class="item-card" v-for="item in plan.items" :key="item.id">
|
|
|
+ <view class="item-top">
|
|
|
+ <text class="item-title">{{ item.title }}</text>
|
|
|
+ <text class="item-status" v-if="item.completed">✅ 已完成</text>
|
|
|
+ </view>
|
|
|
+ <text class="item-desc" v-if="item.description">{{ item.description }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 空状态 -->
|
|
|
+ <view class="empty" v-else>
|
|
|
+ <text class="empty-icon">📋</text>
|
|
|
+ <text class="empty-text">计划不存在</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getGuidePlanDetail } from '../../../utils/api.js'
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ plan: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad: function(options) {
|
|
|
+ if (options.planId) {
|
|
|
+ this.planId = options.planId
|
|
|
+ this.loadDetail()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ loadDetail: function() {
|
|
|
+ if (!this.planId) return
|
|
|
+ this.loading = true
|
|
|
+ var self = this
|
|
|
+ getGuidePlanDetail({ planId: this.planId }).then(function(res) {
|
|
|
+ self.loading = false
|
|
|
+ if (res.code === 200 && res.data) {
|
|
|
+ self.plan = res.data
|
|
|
+ }
|
|
|
+ }).catch(function() {
|
|
|
+ self.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ statusText: function(status) {
|
|
|
+ var map = { 0: '待审核', 1: '进行中', 2: '已完成', 3: '已取消' }
|
|
|
+ return map[status] || '未知'
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.container { min-height: 100vh; background: #f8f8f8; padding-bottom: 30rpx; }
|
|
|
+.loading, .empty { display: flex; flex-direction: column; align-items: center; padding: 100rpx 0; }
|
|
|
+.empty-icon { font-size: 80rpx; }
|
|
|
+.empty-text { font-size: 30rpx; color: #666; margin-top: 20rpx; }
|
|
|
+.header { background: #fff; padding: 40rpx 30rpx; display: flex; justify-content: space-between; align-items: center; }
|
|
|
+.title { font-size: 36rpx; font-weight: bold; color: #333; flex: 1; }
|
|
|
+.status-badge { font-size: 24rpx; padding: 6rpx 20rpx; border-radius: 20rpx; }
|
|
|
+.status-0 { background: #FFF3E0; color: #F97316; }
|
|
|
+.status-1 { background: #E8F5E9; color: #4CAF50; }
|
|
|
+.status-2 { background: #E3F2FD; color: #2196F3; }
|
|
|
+.status-3 { background: #F5F5F5; color: #999; }
|
|
|
+.info-card { background: #fff; margin: 20rpx 30rpx; padding: 24rpx 30rpx; border-radius: 16rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
|
|
|
+.info-label { font-size: 26rpx; color: #999; display: block; margin-bottom: 8rpx; }
|
|
|
+.info-value { font-size: 28rpx; color: #333; display: block; }
|
|
|
+.items-section { margin: 20rpx 30rpx; }
|
|
|
+.section-title { font-size: 30rpx; font-weight: bold; color: #333; display: block; margin-bottom: 16rpx; }
|
|
|
+.item-card { background: #fff; border-radius: 12rpx; padding: 24rpx; margin-bottom: 16rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04); }
|
|
|
+.item-top { display: flex; justify-content: space-between; align-items: center; }
|
|
|
+.item-title { font-size: 28rpx; font-weight: bold; color: #333; }
|
|
|
+.item-status { font-size: 24rpx; color: #4CAF50; }
|
|
|
+.item-desc { font-size: 26rpx; color: #666; margin-top: 10rpx; display: block; line-height: 1.5; }
|
|
|
+</style>
|