peixue-dev/peidu/uniapp/service-package/pages/online/index.vue

<template>
  <view class="online-page">
    <view class="header">
      <text class="title">💻 线上督学</text>
      <text class="subtitle">在线监督，高效学习</text>
    </view>
    
    <view class="content">
      <view class="service-intro">
        <text class="intro-title">服务介绍</text>
        <text class="intro-text">专业老师在线督学，实时监督学习进度，帮助孩子养成良好学习习惯</text>
      </view>
      
      <view class="service-list">
        <view 
          v-for="service in serviceList" 
          :key="service.id"
          class="service-card"
          @tap="selectService(service)"
        >
          <view class="service-icon">{{ service.icon }}</view>
          <view class="service-info">
            <text class="service-name">{{ service.name }}</text>
            <text class="service-desc">{{ service.description }}</text>
            <text class="service-price">¥{{ service.price }}/{{ getDurationText(service) }}</text>
          </view>
        </view>
      </view>
      
      <view v-if="loading" class="loading">加载中...</view>
      <view v-if="!loading && serviceList.length === 0" class="empty">暂无服务</view>
      
      <view v-if="serviceList.length > 0" class="btn-subscribe" @tap="subscribe">立即订阅</view>
    </view>
  </view>
</template>

<script>
import { onlineSupervisionApi } from '@/api/index.js'

export default {
  data() {
    return {
      serviceList: [],
      selectedService: null,
      loading: false,
      pageNum: 1,
      pageSize: 20
    }
  },
  
  onLoad() {
    this.loadServiceList()
  },
  
  methods: {
    async loadServiceList() {
      try {
        this.loading = true
        const res = await onlineSupervisionApi.getServiceList({
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
        
        console.log('线上督学服务列表响应:', res)
        
        // 智能判断数据结构
        let list = []
        if (res.data) {
          if (res.data.records) {
            list = res.data.records
          } else if (res.data.list) {
            list = res.data.list
          } else if (Array.isArray(res.data)) {
            list = res.data
          }
        } else if (Array.isArray(res)) {
          list = res
        }
        
        this.serviceList = list
      } catch (error) {
        console.error('加载线上督学服务列表失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    getDurationText(service) {
      const typeMap = {
        'month': '月',
        'quarter': '季度',
        'year': '年'
      }
      return typeMap[service.durationType] || '月'
    },
    
    selectService(service) {
      this.selectedService = service
      uni.showToast({
        title: `已选择${service.name}`,
        icon: 'none'
      })
    },
    
    subscribe() {
      if (!this.selectedService) {
        uni.showToast({
          title: '请先选择服务',
          icon: 'none'
        })
        return
      }
      
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';

.online-page {
  min-height: 100vh;
  background: #f8f8f8;
}

.header {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  padding: 50rpx 30rpx 40rpx;
  text-align: center;
  
  .title {
    display: block;
    font-size: 40rpx;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 15rpx;
  }
  
  .subtitle {
    display: block;
    font-size: 26rpx;
    color: rgba(255, 255, 255, 0.9);
  }
}

.content {
  padding: 30rpx;
}

.service-intro {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  
  .intro-title {
    display: block;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 15rpx;
  }
  
  .intro-text {
    font-size: 26rpx;
    color: #666;
    line-height: 1.8;
  }
}

.service-list {
  margin-bottom: 30rpx;
}

.service-card {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  gap: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .service-icon {
    width: 100rpx;
    height: 100rpx;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50rpx;
  }
  
  .service-info {
    flex: 1;
    
    .service-name {
      display: block;
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .service-desc {
      display: block;
      font-size: 26rpx;
      color: #666;
      margin-bottom: 12rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .service-price {
      display: block;
      font-size: 36rpx;
      font-weight: bold;
      color: #4facfe;
    }
  }
}

.loading, .empty {
  text-align: center;
  padding: 40rpx;
  color: #999;
  font-size: 28rpx;
}

.btn-subscribe {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: #ffffff;
  font-size: 32rpx;
  font-weight: bold;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>