zhjwxt/uniapp/pages/coach/my/service_detail.vue

<!--服务详情页面-->
<template>
  <view class="container">
    <view class="main-content">
      <view class="service-header">
        <view class="service-title">我的服务详情</view>
        <view class="service-subtitle">查看当前服务状态和详细信息</view>
      </view>

      <view class="service-cards">
        <view class="service-card" v-for="(service, index) in serviceList" :key="index">
          <view class="card-header">
            <view class="service-name">{{ service.name }}</view>
            <view class="service-status" :class="service.status === '正常' ? 'status-active' : 'status-inactive'">
              {{ service.status }}
            </view>
          </view>
          <view class="card-content">
            <view class="service-info">
              <view class="info-item">
                <text class="label">服务类型：</text>
                <text class="value">{{ service.type }}</text>
              </view>
              <view class="info-item">
                <text class="label">开始时间：</text>
                <text class="value">{{ service.startTime }}</text>
              </view>
              <view class="info-item">
                <text class="label">结束时间：</text>
                <text class="value">{{ service.endTime }}</text>
              </view>
              <view class="info-item">
                <text class="label">服务描述：</text>
                <text class="value">{{ service.description }}</text>
              </view>
            </view>
          </view>
          <view class="card-actions">
            <view class="btn btn-detail" @click="viewDetail(service)">查看详情</view>
            <view class="btn btn-contact" @click="contactService(service)">联系客服</view>
          </view>
        </view>
      </view>

      <view class="empty-state" v-if="serviceList.length === 0">
        <image class="empty-icon" src="/static/icon-img/empty.png"></image>
        <view class="empty-text">暂无服务记录</view>
      </view>
    </view>
  </view>
</template>

<script>
import apiRoute from '@/api/apiRoute.js';

export default {
  data() {
    return {
      serviceList: []
    }
  },
  onLoad() {
    this.init();
  },
  methods: {
    async init() {
      this.getServiceList();
    },

    // 获取服务列表
    async getServiceList() {
      try {
        // 模拟数据，实际应该调用API
        this.serviceList = [
          {
            id: 1,
            name: '教练服务套餐A',
            type: '专业训练',
            status: '正常',
            startTime: '2024-01-01',
            endTime: '2024-12-31',
            description: '专业体能训练指导服务'
          },
          {
            id: 2,
            name: '教练服务套餐B',
            type: '基础指导',
            status: '即将到期',
            startTime: '2024-06-01',
            endTime: '2024-06-30',
            description: '基础动作指导和纠正'
          }
        ];
        
        // 实际API调用示例：
        // let res = await apiRoute.getServiceList({});
        // if (res.code === 1) {
        //   this.serviceList = res.data;
        // }
      } catch (error) {
        console.error('获取服务列表失败:', error);
        uni.showToast({
          title: '获取数据失败',
          icon: 'none'
        });
      }
    },

    // 查看详情
    viewDetail(service) {
      uni.showModal({
        title: '服务详情',
        content: `服务名称：${service.name}\n服务类型：${service.type}\n状态：${service.status}\n描述：${service.description}`,
        showCancel: false
      });
    },

    // 联系客服
    contactService(service) {
      uni.showActionSheet({
        itemList: ['电话客服', '在线客服', '邮件客服'],
        success: (res) => {
          const actions = ['拨打客服电话', '打开在线客服', '发送邮件'];
          uni.showToast({
            title: actions[res.tapIndex],
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  background: #f5f5f5;
  min-height: 100vh;
}

.main-content {
  padding: 20rpx;
}

.service-header {
  background: #29d3b4;
  border-radius: 16rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  color: white;
  
  .service-title {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }
  
  .service-subtitle {
    font-size: 26rpx;
    opacity: 0.8;
  }
}

.service-cards {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.service-card {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .service-name {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
  
  .service-status {
    padding: 8rpx 16rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
    
    &.status-active {
      background: #e8f5e8;
      color: #52c41a;
    }
    
    &.status-inactive {
      background: #fff2e8;
      color: #fa8c16;
    }
  }
}

.card-content {
  margin-bottom: 25rpx;
}

.service-info {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.info-item {
  display: flex;
  
  .label {
    color: #666;
    font-size: 28rpx;
    min-width: 160rpx;
  }
  
  .value {
    color: #333;
    font-size: 28rpx;
    flex: 1;
  }
}

.card-actions {
  display: flex;
  gap: 20rpx;
}

.btn {
  flex: 1;
  padding: 20rpx;
  border-radius: 12rpx;
  text-align: center;
  font-size: 28rpx;
  
  &.btn-detail {
    background: #29d3b4;
    color: white;
  }
  
  &.btn-contact {
    background: #f0f0f0;
    color: #333;
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  .empty-icon {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 30rpx;
    opacity: 0.3;
  }
  
  .empty-text {
    color: #999;
    font-size: 28rpx;
  }
}
</style>