caremate/train-frontend/pages/salon/list.vue

<template>
  <view class="salon-page">
    <view class="section-card">
      <text class="section-title">周末沙龙</text>
      <text class="card-desc">探索AI前沿，共创成长空间</text>
      
      <view v-if="loading" class="empty-tip">加载中…</view>
      <view v-else-if="salons.length === 0" class="empty-tip">暂无活动沙龙</view>
      <view v-else>
        <view class="salon-card" v-for="item in salons" :key="item.id">
          <view class="salon-head">
            <text class="salon-theme">{{ mapTheme(item.theme) }}</text>
            <text class="salon-title">{{ item.title }}</text>
          </view>
          
          <view class="salon-info">
            <view class="info-item">
              <text class="info-label">时间：</text>
              <text class="info-value">{{ formatDateTime(item.time) }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">地点：</text>
              <text class="info-value">{{ item.place }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">余位：</text>
              <text class="info-value">{{ item.num }} / {{ item.capacity }}</text>
            </view>
          </view>
          
          <view class="salon-price-box">
            <text class="salon-price" v-if="item.price > 0">¥{{ fenToYuan(item.price) }}</text>
            <text class="salon-price-free" v-else>免费</text>
            <text class="member-price" v-if="item.memberPrice > 0 && item.memberPrice < item.price">
              会员价 ¥{{ fenToYuan(item.memberPrice) }}
            </text>
          </view>
          
          <view class="salon-foot">
            <button 
              class="enroll-btn" 
              :disabled="item.num <= 0" 
              @click="handleEnrollClick(item)"
            >
              {{ item.num <= 0 ? '已满' : '立即报名' }}
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getSalonList } from '@/utils/api.js'
import { fenToYuan, formatDateTime } from '@/utils/format.js'
import { guardPage } from '@/utils/guard.js'

export default {
  data() {
    return {
      salons: [],
      loading: false,
      themeMap: {
        ai_basic: 'AI 认知基础',
        wealth: '家庭财富管理',
        health: '健康管理',
        growth: '孩子成长陪伴'
      }
    }
  },
  onShow() {
    if (!guardPage()) return
    this.loadSalons()
  },
  methods: {
    fenToYuan: fenToYuan,
    formatDateTime: formatDateTime,
    mapTheme(theme) {
      return this.themeMap[theme] || theme || '通用主题'
    },
    loadSalons() {
      var self = this
      self.loading = true
      getSalonList().then(function(resp) {
        self.salons = resp.data || []
      }).catch(function() {
        uni.showToast({ title: '加载沙龙失败', icon: 'none' })
      }).finally(function() {
        self.loading = false
      })
    },
    handleEnrollClick(item) {
      var userInfo = uni.getStorageSync('userInfo') || {}
      uni.navigateTo({ 
        url: '/pages/salon/form?salonId=' + item.id + 
             '&theme=' + encodeURIComponent(this.mapTheme(item.theme)) + 
             '&title=' + encodeURIComponent(item.title) + 
             '&name=' + encodeURIComponent(userInfo.name || '') + 
             '&phone=' + encodeURIComponent(userInfo.phone || '') 
      })
    }
  }
}
</script>

<style scoped>
.salon-page { min-height: 100vh; background: #F5F5F5; padding: 32rpx; }
.section-card { background: #FFF; border-radius: 16rpx; padding: 32rpx; }
.section-title { display: block; font-size: 32rpx; font-weight: 700; color: #1E293B; margin-bottom: 8rpx; border-left: 8rpx solid #F97316; padding-left: 16rpx; }
.card-desc { display: block; font-size: 26rpx; color: #64748B; margin-bottom: 24rpx; }
.empty-tip { font-size: 26rpx; color: #94A3B8; padding: 32rpx 0; text-align: center; }
.salon-card { border: 2rpx solid #E2E8F0; border-radius: 12rpx; padding: 24rpx; margin-bottom: 20rpx; }
.salon-head { margin-bottom: 16rpx; }
.salon-theme { display: block; background: #FFF7ED; color: #F97316; font-size: 22rpx; font-weight: 600; padding: 4rpx 12rpx; border-radius: 4rpx; width: fit-content; margin-bottom: 8rpx; }
.salon-title { display: block; font-size: 30rpx; font-weight: 600; color: #1E293B; }
.salon-info { margin-bottom: 16rpx; }
.info-item { display: flex; align-items: center; margin-bottom: 4rpx; }
.info-label { font-size: 24rpx; color: #64748B; width: 70rpx; flex-shrink: 0; }
.info-value { font-size: 26rpx; color: #475569; }
.salon-price-box { display: flex; align-items: center; gap: 16rpx; margin-bottom: 16rpx; }
.salon-price { font-size: 28rpx; color: #F97316; font-weight: 600; }
.salon-price-free { font-size: 28rpx; color: #22C55E; font-weight: 600; }
.member-price { font-size: 24rpx; color: #64748B; }
.salon-foot { display: flex; align-items: center; justify-content: flex-end; }
.enroll-btn { width: 200rpx; height: 64rpx; line-height: 64rpx; font-size: 26rpx; background: #F97316; color: #FFF; border-radius: 32rpx; border: none; margin: 0; }
.enroll-btn:active { opacity: 0.85; }
.enroll-btn:disabled { background: #CBD5E1; }
</style>