cfc/cfc-frontend/pages/activity/activity-detail/activity-detail.vue

<template>
  <view class="container">
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-wrap">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 错误状态 -->
    <view v-else-if="error" class="error-wrap">
      <text class="error-icon">📋</text>
      <text class="error-text">{{ errorMsg }}</text>
      <button class="retry-btn" @click="loadDetail(activityId)">重新加载</button>
    </view>

    <!-- 活动内容 -->
    <scroll-view v-else-if="activity.id" scroll-y class="content">
      <!-- 封面图 -->
      <image
        v-if="activity.coverImage"
        class="cover"
        :src="getImageUrl(activity.coverImage)"
        mode="widthFix"
      />
      <image v-else class="cover placeholder-cover" src="/static/default-activity.png" mode="aspectFill" />

      <view class="info-section">
        <text class="activity-title">{{ activity.title }}</text>

        <!-- 活动状态标签 -->
        <view class="status-row">
          <text class="status-tag" :class="'status-' + (activity.displayStatus || activity.status || 'upcoming')">{{ activity.displayLabel || statusText(activity.status) }}</text>
        </view>

        <!-- 活动元信息 -->
        <view class="meta-list">
          <view class="meta-item" v-if="activity.startTime">
            <text class="meta-icon">🕐</text>
            <text class="meta-text">{{ formatDate(activity.startTime) }}{{ activity.endTime ? ' ~ ' + formatDate(activity.endTime) : '' }}</text>
          </view>
          <view class="meta-item" v-if="activity.registrationDeadline && activity.requireRegistration === 1">
            <text class="meta-icon">⏰</text>
            <text class="meta-text">报名截止: {{ formatDate(activity.registrationDeadline) }}</text>
          </view>
          <view class="meta-item" v-if="activity.location">
            <text class="meta-icon">📍</text>
            <text class="meta-text">{{ activity.location }}</text>
          </view>
          <view class="meta-item" v-if="activity.maxParticipants">
            <text class="meta-icon">👥</text>
            <text class="meta-text">{{ activity.currentParticipants || 0 }} / {{ activity.maxParticipants }} 人</text>
          </view>
          <view class="meta-item" v-if="hasFee">
            <text class="meta-icon">💰</text>
            <view class="meta-text">
              <text class="fee-line">孩子：¥{{ feeText(activity.childFee, activity.childMemberFee) }}</text>
              <text class="fee-line">家长：¥{{ feeText(activity.parentFee, activity.parentMemberFee) }}</text>
              <text class="fee-line member-fee-link" v-if="!isMember && hasMemberPrice" @click.stop="goUpgrade">开通会员享会员价 ›</text>
            </view>
          </view>
          <view class="meta-item" v-else>
            <text class="meta-icon">💰</text>
            <text class="meta-text">免费</text>
          </view>
        </view>

        <!-- 活动简介 -->
        <view class="desc-section" v-if="activity.description">
          <text class="section-title">活动介绍</text>
          <mp-html :content="activity.description" />
        </view>

        <!-- 付费不退费说明 -->
        <view class="refund-notice" v-if="hasFee">
          <text class="refund-notice-icon">⚠️</text>
          <text class="refund-notice-text">本活动为付费活动，报名成功后不支持退费</text>
        </view>
      </view>

      </scroll-view>

    <!-- 底部操作栏：必须与 scroll-view 平级，否则 iOS 上 position: fixed 在 scroll-view 内不生效（按钮不显示） -->
    <view class="bottom-bar" v-if="!loading && activity.id">
      <view class="price-info">
        <text class="bottom-type">活动</text>
        <text class="bottom-vendor" v-if="activity.vendorName">{{ activity.vendorName }}</text>
      </view>
      <view class="action-btns">
        <button class="share-btn" @click="generatePoster">
          <text class="share-btn-icon">📤</text>
          <text class="share-btn-text">分享</text>
        </button>
        <!-- 报名按钮（仅报名中/未报名时显示） -->
        <button
          v-if="canRegister"
          class="btn-register"
          @click="onRegister"
        >
          <text v-if="hasFee">¥{{ minFeeText }} 立即报名</text>
          <text v-else>立即报名</text>
        </button>

        <!-- 已报名待审核 -->
        <button
          v-if="activity.requireRegistration === 1 && registrationStatus === 'pending'"
          class="btn-register-done"
          disabled
        >
          <text>报名待审核</text>
        </button>
        
        <!-- 已报名可取消 -->
        <button
          v-if="activity.requireRegistration === 1 && (registrationStatus === 'approved' || registrationStatus === 'registered')"
          class="btn-cancel"
          :disabled="registrationLoading"
          @click="onCancelRegistration"
        >
          <text>取消报名</text>
        </button>
        
        <!-- 签到按钮（仅进行中时显示） -->
        <button
          v-if="activity.displayStatus === 'ongoing'"
          class="btn-checkin"
          :class="{ 'btn-checkin-done': checkinDone, 'btn-checkin-loading': checkinLoading }"
          :disabled="checkinLoading || checkinDone"
          @click="onCheckin"
        >
          <text v-if="checkinLoading">签到中...</text>
          <text v-else-if="checkinDone && activity.requireCheckinReview === 1">已签到待审核</text>
          <text v-else-if="checkinDone">已签到 ✓</text>
          <text v-else>签到</text>
        </button>
        <text v-if="activity.requireCheckinReview === 1 && !checkinDone && activity.displayStatus === 'ongoing'" class="checkin-review-hint">签到需要管理员审核</text>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-else class="empty-wrap">
      <text class="empty-text">活动不存在或已下架</text>
    </view>

    <!-- 能量扣减提示弹窗：必须与 scroll-view 平级，否则 iOS 上 position: fixed 在 scroll-view 内不生效（按钮不显示） -->
    <modal v-if="showPenaltyModal" class="penalty-modal" :show="showPenaltyModal" @close="showPenaltyModal = false">
      <view class="penalty-content">
        <text class="penalty-title">签到成功但已扣能量</text>
        <text class="penalty-desc">您未报名参加此活动，已被扣除 {{ penaltyAmount }} 点能量值</text>
        <button class="penalty-btn" @click="showPenaltyModal = false">我知道了</button>
      </view>
    </modal>

    <!-- 活动评价 -->
    <view class="feedback-section" v-if="activity.status === 'ended' && checkinDone">
      <view class="feedback-header">
        <text class="feedback-title">活动评价</text>
      </view>
      <!-- Already submitted feedback -->
      <view v-if="submittedFeedback" class="feedback-submitted">
        <view class="feedback-ratings-display">
          <view class="fr-row" v-for="(val, key) in parsedSubmittedRatings" :key="key">
            <text class="fr-label">{{ key }}</text>
            <text class="fr-stars">{{ getStarDisplay(val) }}</text>
          </view>
        </view>
        <text class="feedback-comment-text" v-if="submittedFeedback.comment">{{ submittedFeedback.comment }}</text>
        <text class="feedback-thanks">感谢您的评价！</text>
      </view>
      <!-- Submit feedback button -->
      <button v-else class="feedback-btn" @click="openFeedbackModal">
        <text>提交活动评价</text>
      </button>
    </view>

    <!-- 评价弹窗：必须与 scroll-view 平级，否则 iOS 上 position: fixed 在 scroll-view 内不生效（按钮不显示） -->
    <modal v-if="showFeedbackModal" class="feedback-modal-overlay" :show="showFeedbackModal" @close="showFeedbackModal = false">
      <view class="feedback-modal">
        <text class="feedback-modal-title">活动评价</text>

        <view class="rating-row" v-for="(dim, dimIdx) in feedbackDimensions" :key="dimIdx">
          <text class="rating-label">{{ dim }}</text>
          <view class="stars">
            <text v-for="star in 5" :key="star"
              class="star-icon"
              :class="{'star-active': star <= (feedbackRatings[dim] || 0)}"
              @click="feedbackRatings[dim] = star">★</text>
          </view>
        </view>

        <textarea class="feedback-textarea" v-model="feedbackComment" placeholder="说说您的体验..." maxlength="500" />

        <view class="feedback-modal-actions">
          <button class="feedback-cancel-btn" @click="showFeedbackModal = false">取消</button>
          <button class="feedback-submit-btn" :disabled="feedbackSubmitting" @click="submitFeedback">
            <text v-if="feedbackSubmitting">提交中...</text>
            <text v-else>提交评价</text>
          </button>
        </view>
      </view>
    </modal>

    <!-- 报名表单弹窗：必须与 scroll-view 平级，否则 iOS 上 position: fixed 在 scroll-view 内不生效（按钮不显示） -->
    <view v-if="showRegModal" class="reg-modal-overlay" @click="closeRegModal">
      <view class="reg-modal" @click.stop>
        <text class="reg-modal-title">活动报名</text>

        <!-- 家庭成员选择 -->
        <view class="reg-family-section" v-if="familyMembers.length > 0">
          <text class="reg-section-label">从家庭成员中选择</text>
          <view class="reg-family-list">
            <view
              class="reg-family-item"
              v-for="member in familyMembers"
              :key="member.id"
              :class="{'reg-family-item-selected': isMemberSelected(member)}"
              @click="toggleFamilyMember(member)"
            >
              <view class="reg-family-info">
                <text class="reg-family-name">{{ member.name }}</text>
                <text class="reg-family-relation">{{ member.relation }}</text>
              </view>
              <text class="reg-checkmark" v-if="isMemberSelected(member)">✓</text>
            </view>
          </view>
        </view>

        <!-- 报名人列表 -->
        <view class="reg-list">
          <text class="reg-section-label">报名人</text>
          <view class="reg-entry" v-for="(entry, idx) in registrants" :key="idx">
            <input class="reg-input reg-input-name" v-model="entry.name" placeholder="姓名" />
            <input class="reg-input reg-input-phone" v-model="entry.phone" placeholder="手机号" type="number" maxlength="11" />
            <text class="reg-remove" @click="removeRegistrant(idx)">✕</text>
          </view>
          <button class="reg-add-btn" @click="addManualEntry">+ 添加报名人</button>
        </view>

        <!-- 合计 -->
        <view class="reg-total" v-if="hasFee">
          <text>共 {{ registrants.length }} 人 · 合计 ¥{{ registrantsTotal }}</text>
        </view>

        <!-- 操作按钮 -->
        <view class="reg-actions">
          <button class="reg-cancel" @click="closeRegModal">取消</button>
          <button class="reg-submit" :disabled="regSubmitting || registrants.length === 0" @click="submitRegistration">
            <text v-if="regSubmitting">提交中...</text>
            <text v-else>确认报名</text>
          </button>
        </view>
      </view>
    </view>
    <!-- 分享海报 -->
    <ContentSharePoster
      :show="showPoster"
      :title="(activity && activity.title) || ''"
      :coverImage="(activity && getImageUrl(activity.coverImage)) || ''"
      :qrCodeBase64="posterQrCode || ''"
      typeLabel="活动推荐"
      :dimensionCode="(activity && activity.dimensionCode) || ''"
      :summary="posterSummary || ''"
      :priceText="posterPriceText || ''"
      :inviteText="posterInviteText || ''"
      @close="closePoster"
    />
  </view>
</template>

<script>
import { getActivityDetail, activityCheckin, cancelActivityRegistration, createActivityOrder, submitActivityFeedback, getActivityFeedbackList, getMyActivityFeedback, getFamilyMembers, getShareQrCode, getMyMembership } from '@/utils/api.js'
import config from '@/config.js'
import shareMixin from '../../../components/share-mixin.js'
import MpHtml from '@/components/mp-html/mp-html.vue'
import ContentSharePoster from '@/components/ContentSharePoster.vue'
import { backfillProfile } from '../../../utils/profile-backfill.js'
import { parseDate } from '@/utils/format.js'

export default {
  mixins: [shareMixin],
  components: { MpHtml, ContentSharePoster },
  data() {
    return {
      activityId: null,
      activity: {},
      loading: false,
      error: false,
      errorMsg: '',
      checkinLoading: false,
      checkinDone: false,
      checkinPoints: 0,
      registrationStatus: null,
      registrationLoading: false,
      isMember: false,
      showPenaltyModal: false,
      penaltyAmount: 0,
      showFeedbackModal: false,
      feedbackDimensions: [],
      feedbackRatings: {},
      feedbackComment: '',
      submittedFeedback: null,
      feedbackSubmitting: false,
      feedbackList: [],
      // registration form modal
      showRegModal: false,
      familyMembers: [],
      registrants: [],
      regSubmitting: false,
      // 分享海报
      showPoster: false,
      posterQrCode: '',
      posterSummary: '',
      posterPriceText: '',
      posterInviteText: ''
    }
  },
  onLoad: function(options) {
    if (options && options.id) {
      this.activityId = options.id
      this.loadDetail(options.id)
    } else {
      this.error = true
      this.errorMsg = '缺少活动ID'
    }

    // 检查是否已经签到（从路由参数获取）
    if (options && options.checkinDone === '1') {
      this.checkinDone = true
    }

    this.checkMemberStatus()
  },
  methods: {
    // ===== 工具方法 =====
    getImageUrl: function(path) {
      if (!path) return ''
      if (path.indexOf('http://') === 0 || path.indexOf('https://') === 0) return path
      return config.API_BASE_URL + path
    },
    checkMemberStatus: function() {
      var that = this
      getMyMembership().then(function(res) {
        if (res.data && res.data.memberLevel) {
          that.isMember = res.data.memberLevel !== 'FREE'
        }
      }).catch(function() {})
    },
    goUpgrade: function() {
      uni.navigateTo({ url: '/pages/membership/upgrade' })
    },
    formatDate: function(dateStr) {
      if (!dateStr) return ''
      var d = parseDate(dateStr)
      if (!d) return dateStr
      var year = d.getFullYear()
      var month = d.getMonth() + 1
      var day = d.getDate()
      var hour = d.getHours()
      var minute = d.getMinutes()
      var ampm = hour < 12 ? '上午' : '下午'
      var h12 = hour % 12
      if (h12 === 0) h12 = 12
      var minStr = minute < 10 ? '0' + minute : minute
      return year + '年' + month + '月' + day + '日 ' + ampm + h12 + ':' + minStr
    },
    // 费用双价展示：非会员价 / 会员价（元）
    feeText: function(regularFee, memberFee) {
      var regular = (regularFee || 0) / 100
      var member = (memberFee || 0) / 100
      if (member > 0 && member < regular) {
        return member.toFixed(2) + '（会员） / ' + regular.toFixed(2)
      }
      if (regular === 0 && member === 0) return '0.00'
      if (regular === 0) return '会员免费'
      return regular.toFixed(2)
    },
    loadDetail: function(id) {
      var self = this
      self.loading = true
      self.error = false
      getActivityDetail(id).then(function(res) {
        self.loading = false
        if (res && res.code === 200 && res.data) {
          self.activity = res.data
          self.setShareInfo('推荐活动: ' + (res.data.title || ''), '/pages/activity/activity-detail/activity-detail?id=' + id)
          self.parseFeedbackDimensions()
          self.loadFeedbackStatus()
          // registrationStatus 已由后端按当前用户计算返回
          self.registrationStatus = res.data.registrationStatus || null
        } else {
          self.error = true
          self.errorMsg = (res && res.message) || '加载失败'
        }
      }).catch(function(err) {
        self.loading = false
        self.error = true
        self.errorMsg = '网络异常，请稍后重试'
      })
    },
    statusText: function(status) {
      var map = { draft: '草稿', published: '进行中', ended: '已结束' }
      return map[status] || '未知'
    },
    onCheckin: function() {
      var self = this
      if (self.checkinLoading || self.checkinDone) return

      // 未登录则跳转登录
      if (!uni.getStorageSync('token')) {
        uni.navigateTo({ url: '/pages/login/login' })
        return
      }

      var memberId = uni.getStorageSync('currentChildId') || self.registrationChildId
      if (!memberId) {
        uni.showToast({ title: '请选择孩子身份', icon: 'none' })
        return
      }

      self.checkinLoading = true
      activityCheckin({ id: self.activity.id, memberId: memberId }).then(function(res) {
        self.checkinLoading = false
        if (res && res.code === 200 && res.data) {
          self.loadFeedbackStatus()
          // 检查是否有能量扣减
          if (res.data.energyPenalty) {
            self.penaltyAmount = res.data.energyPenalty
            self.showPenaltyModal = true
            self.checkinDone = true
            return
          }
          if (res.data.alreadyCompleted) {
            self.checkinDone = true
            uni.showToast({ title: '已签到', icon: 'success' })
          } else if (res.data.pointsEarned && res.data.pointsEarned > 0) {
            self.checkinDone = true
            self.checkinPoints = res.data.pointsEarned
            uni.showToast({ title: '签到成功 +' + res.data.pointsEarned + '积分', icon: 'success' })
          } else {
            self.checkinDone = true
            uni.showToast({ title: '签到成功', icon: 'success' })
          }
        } else {
          var msg = (res && res.message) || '签到失败'
          // 如果是报名待审核，提示用户
          if (msg.indexOf('报名') !== -1 || msg.indexOf('审核') !== -1) {
            uni.showModal({ title: '提示', content: msg, showCancel: false })
          } else {
            uni.showToast({ title: msg, icon: 'none' })
          }
        }
      }).catch(function(err) {
        self.checkinLoading = false
        uni.showToast({ title: '网络异常', icon: 'none' })
      })
    },
    onRegister: function() {
      var self = this
      // 未登录则跳转登录
      if (!uni.getStorageSync('token')) {
        uni.navigateTo({ url: '/pages/login/login' })
        return
      }
      // Open registration form modal
      self.showRegModal = true
      self.registrants = []
      self.loadFamilyMembers()
    },
    onCancelRegistration: function() {
      var self = this
      // 未登录则跳转登录
      if (!uni.getStorageSync('token')) {
        uni.navigateTo({ url: '/pages/login/login' })
        return
      }
      uni.showModal({
        title: '提示',
        content: '确定要取消报名吗？',
        success: function(res) {
          if (res.confirm) {
            var memberId = uni.getStorageSync('currentChildId')
            self.registrationLoading = true
            cancelActivityRegistration({ id: self.activity.id, memberId: memberId }).then(function(res) {
              self.registrationLoading = false
              if (res && res.code === 200) {
                self.registrationStatus = null
                uni.showToast({ title: '已取消报名', icon: 'success' })
              } else {
                uni.showToast({ title: (res && res.message) || '取消失败', icon: 'none' })
              }
            }).catch(function() {
              self.registrationLoading = false
              uni.showToast({ title: '网络异常', icon: 'none' })
            })
          }
        }
      })
    },
    // ===== 活动评价 =====
    parseFeedbackDimensions: function() {
      var dims = ['组织形式', '会场气氛', '主持人', '专家']
      if (this.activity.feedbackDimensions) {
        try {
          var parsed = JSON.parse(this.activity.feedbackDimensions)
          if (parsed && parsed.length > 0) {
            dims = parsed
          }
        } catch(e) {}
      }
      this.feedbackDimensions = dims
      this.initRatings()
    },
    initRatings: function() {
      var r = {}
      for (var i = 0; i < this.feedbackDimensions.length; i++) {
        r[this.feedbackDimensions[i]] = 0
      }
      this.feedbackRatings = r
    },
    loadFeedbackStatus: function() {
      var self = this
      var memberId = uni.getStorageSync('currentChildId')
      if (!memberId || !self.activity || !self.activity.id) return

      getMyActivityFeedback({ activityId: self.activity.id, memberId: memberId }).then(function(res) {
        if (res && res.code === 200 && res.data) {
          self.submittedFeedback = res.data
        }
      }).catch(function() {})
    },
    openFeedbackModal: function() {
      this.showFeedbackModal = true
    },
    submitFeedback: function() {
      var self = this
      // Validate at least one rating
      var hasRating = false
      for (var key in self.feedbackRatings) {
        if (self.feedbackRatings[key] > 0) { hasRating = true; break }
      }
      if (!hasRating) {
        uni.showToast({ title: '请至少评价一项', icon: 'none' })
        return
      }

      self.feedbackSubmitting = true
      var memberId = uni.getStorageSync('currentChildId')
      submitActivityFeedback({
        activityId: self.activity.id,
        memberId: memberId,
        ratings: JSON.stringify(self.feedbackRatings),
        comment: self.feedbackComment
      }).then(function(res) {
        self.feedbackSubmitting = false
        if (res && res.code === 200) {
          self.showFeedbackModal = false
          self.loadFeedbackStatus()
          uni.showToast({ title: '评价成功', icon: 'success' })
        } else {
          uni.showToast({ title: (res && res.message) || '提交失败', icon: 'none' })
        }
      }).catch(function() {
        self.feedbackSubmitting = false
        uni.showToast({ title: '网络异常', icon: 'none' })
      })
    },
    getStarDisplay: function(val) {
      var full = parseInt(val) || 0
      var empty = 5 - full
      return '★'.repeat(full) + '☆'.repeat(empty)
    },
    // ===== 报名表单 =====
    loadFamilyMembers: function() {
      var self = this
      getFamilyMembers().then(function(res) {
        if (res && res.code === 200 && res.data) {
          var list = []
          // parents
          var parents = res.data.parents || []
          for (var i = 0; i < parents.length; i++) {
            list.push({
              id: 'p_' + parents[i].id,
              name: parents[i].nickname || parents[i].name || '',
              phone: parents[i].phone || '',
              relation: '家长',
              memberId: parents[i].id,
              source: 'parent',
              targetType: 'user'
            })
          }
          // children
          var children = res.data.children || []
          for (var j = 0; j < children.length; j++) {
            list.push({
              id: 'c_' + children[j].id,
              name: children[j].nickname || children[j].name || '',
              phone: children[j].phone || '',
              relation: '孩子',
              memberId: children[j].userId || children[j].id,
              source: 'child',
              targetType: 'member'
            })
          }
          self.familyMembers = list
        }
      }).catch(function() {})
    },
    isMemberSelected: function(member) {
      for (var i = 0; i < this.registrants.length; i++) {
        if (this.registrants[i].memberId === member.id) return true
      }
      return false
    },
    toggleFamilyMember: function(member) {
      for (var i = 0; i < this.registrants.length; i++) {
        if (this.registrants[i].memberId === member.id) {
          this.registrants.splice(i, 1)
          return
        }
      }
      this.registrants.push({
        memberId: member.id,
        name: member.name,
        phone: member.phone,
        childId: member.childId,
        targetType: member.targetType,
        prevPhone: member.phone
      })
    },
    addManualEntry: function() {
      this.registrants.push({
        memberId: null,
        name: '',
        phone: '',
        memberId: null
      })
    },
    removeRegistrant: function(idx) {
      this.registrants.splice(idx, 1)
    },
    closeRegModal: function() {
      this.showRegModal = false
      this.registrants = []
      this.familyMembers = []
    },
    // ===== 分享海报 =====
    async generatePoster() {
      if (!this.activity || !this.activity.id) return
      // 未登录则跳转登录
      if (!uni.getStorageSync('token')) {
        uni.navigateTo({ url: '/pages/login/login' })
        return
      }
      uni.showLoading({ title: '生成海报中...' })
      try {
        var res = await getShareQrCode('pages/activity/activity-detail/activity-detail', 'id=' + this.activity.id)
        if (res && res.data) {
          this.posterQrCode = res.data.qrCodeBase64 || ''
          this.posterSummary = this.buildPosterSummary()
          this.posterPriceText = this.activity.price > 0 ? '¥' + this.activity.price : '免费'
          this.posterInviteText = '「' + (uni.getStorageSync('nickname') || '好友') + '」邀请你一起参加这个活动'
          this.showPoster = true
        }
      } catch (e) {
        uni.showToast({ title: '生成失败', icon: 'none' })
      } finally {
        uni.hideLoading()
      }
    },
    buildPosterSummary: function() {
      var desc = (this.activity && this.activity.description) || ''
      desc = desc.replace(/<[^>]+>/g, ' ').replace(/&nbsp;/g, ' ').replace(/\s+/g, ' ').trim()
      return desc.length > 60 ? desc.substring(0, 60) + '...' : desc
    },
    closePoster: function() {
      this.showPoster = false
    },
    submitRegistration: function() {
      var self = this
      // Validate
      if (self.registrants.length === 0) {
        uni.showToast({ title: '请至少添加一个报名人', icon: 'none' })
        return
      }
      for (var i = 0; i < self.registrants.length; i++) {
        var entry = self.registrants[i]
        if (!entry.name || entry.name.trim() === '') {
          uni.showToast({ title: '请输入第 ' + (i + 1) + ' 个报名人的姓名', icon: 'none' })
          return
        }
        var phone = (entry.phone || '').trim()
        if (phone !== '' && !/^1[3-9]\d{9}$/.test(phone)) {
          uni.showToast({ title: '请输入第 ' + (i + 1) + ' 个报名人的正确手机号', icon: 'none' })
          return
        }
      }

      // 就地补充的手机号自动回写（仅家庭成员；外部报名人 memberId=null 不回写）
      var backfillTasks = []
      for (var b = 0; b < self.registrants.length; b++) {
        var entryB = self.registrants[b]
        if (!entryB.memberId) continue
        var phoneB = (entryB.phone || '').trim()
        if (phoneB === '') continue
        var rawId = String(entryB.memberId)
        var realId = rawId.indexOf('_') >= 0 ? rawId.substring(2) : rawId
        backfillTasks.push(backfillProfile({
          targetType: entryB.targetType,
          targetId: realId,
          fields: { phone: phoneB },
          scene: 'activity-signup',
          prevValues: { phone: entryB.prevPhone }
        }))
      }
      // 回写失败不阻塞报名主流程，仅静默记录
      if (backfillTasks.length > 0) {
        Promise.all(backfillTasks).catch(function(err) {
          console.warn('[backfill] 活动报名信息回写失败', err)
        })
      }

      // 付费活动 → 先确认支付
      if (self.hasFee && self.registrantsTotal > 0) {
        uni.showModal({
          title: '确认报名',
          content: '共 ' + self.registrants.length + ' 人，需支付 ¥' + self.registrantsTotal + '，报名成功后不支持退费。是否继续？',
          confirmText: '确认支付',
          cancelText: '再想想',
          success: function(confirmRes) {
            if (confirmRes.confirm) {
              self.doCreateOrder()
            }
          }
        })
      } else {
        self.doCreateOrder()
      }
    },
    doCreateOrder: function() {
      var self = this
      self.regSubmitting = true

      var registrantsData = []
      for (var i = 0; i < self.registrants.length; i++) {
        var entry = self.registrants[i]
        // memberId 可能带 p_/c_ 前缀（仅回写用），下单需去掉前缀的纯数字
        var orderMemberId = entry.memberId
        if (orderMemberId !== null && orderMemberId !== undefined) {
          var midStr = String(orderMemberId)
          if (midStr.indexOf('_') >= 0) orderMemberId = midStr.substring(2)
        }
        registrantsData.push({
          name: entry.name.trim(),
          phone: entry.phone || '',
          memberId: orderMemberId
        })
      }

      createActivityOrder({ activityId: self.activity.id, registrants: registrantsData }).then(function(res) {
        self.regSubmitting = false
        if (res && res.code === 200) {
          var data = res.data || {}
          if (data.free) {
            // 免费活动直接报名成功
            self.closeRegModal()
            self.registrationStatus = 'registered'
            uni.showToast({ title: '报名成功', icon: 'success' })
            self.loadDetail(self.activity.id)
          } else if (data.requiresPayment && data.orderNo) {
            // 付费活动 → 跳转支付页
            self.closeRegModal()
            uni.navigateTo({
              url: '/pages/activity/order-pay/order-pay?orderNo=' + data.orderNo + '&totalAmount=' + data.totalAmount + '&activityId=' + self.activity.id
            })
          } else {
            uni.showToast({ title: '报名失败', icon: 'none' })
          }
        } else {
          uni.showToast({ title: (res && res.message) || '报名失败', icon: 'none' })
        }
      }).catch(function() {
        self.regSubmitting = false
        uni.showToast({ title: '网络异常', icon: 'none' })
      })
    }
  },
  computed: {
    parsedSubmittedRatings: function() {
      if (!this.submittedFeedback || !this.submittedFeedback.ratings) return {}
      try {
        return JSON.parse(this.submittedFeedback.ratings)
      } catch(e) {
        return {}
      }
    },
    // 4 个费用字段是否存在（任一项 > 0 即为付费活动）
    hasFee: function() {
      var a = this.activity || {}
      return (a.childFee > 0) || (a.childMemberFee > 0) || (a.parentFee > 0) || (a.parentMemberFee > 0)
    },
    // 是否存在会员专享价（用于非会员引导）
    hasMemberPrice: function() {
      var a = this.activity || {}
      return (a.childMemberFee > 0) || (a.parentMemberFee > 0)
    },
    // 报名按钮可用：需报名 + 未报名 + 展示状态为报名中
    canRegister: function() {
      var a = this.activity || {}
      if (a.requireRegistration !== 1) return false
      if (a.displayStatus !== 'open') return false
      var st = this.registrationStatus
      return !st || st === 'not_registered' || st === 'cancelled' || st === 'rejected'
    },
    // 报名弹窗内合计（按当前用户会员价估算，实际以订单为准）
    registrantsTotal: function() {
      var a = this.activity || {}
      var total = 0
      for (var i = 0; i < this.registrants.length; i++) {
        if (this.registrants[i].memberId) {
          total += (a.childFee > 0 ? a.childFee : a.childMemberFee) || 0
        } else {
          total += (a.parentFee > 0 ? a.parentFee : a.parentMemberFee) || 0
        }
      }
      return (total / 100).toFixed(2)
    },
    // 报名按钮起步价文案
    minFeeText: function() {
      var a = this.activity || {}
      var fees = [a.childFee, a.childMemberFee, a.parentFee, a.parentMemberFee]
      var min = 0
      for (var i = 0; i < fees.length; i++) {
        if (fees[i] > 0 && (min === 0 || fees[i] < min)) min = fees[i]
      }
      return (min / 100).toFixed(2)
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #FFF7ED;
}

/* 加载 / 错误 / 空状态 */
.loading-wrap,
.error-wrap,
.empty-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 40rpx;
}
.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #FDE68A;
  border-top-color: #F97316;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 20rpx;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.loading-text,
.error-text,
.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 20rpx;
}
.error-icon {
  font-size: 60rpx;
  margin-bottom: 16rpx;
}
.retry-btn {
  background: #F97316;
  color: #fff;
  border: none;
  border-radius: 40rpx;
  padding: 12rpx 40rpx;
  font-size: 26rpx;
  line-height: 1.5;
}

/* 内容区 */
.content {
  height: 100vh;
  padding-bottom: 120rpx;
}
.cover {
  width: 100%;
  display: block;
}
.placeholder-cover {
  height: 400rpx;
  background: #f0f0f0;
}

/* 信息区 */
.info-section {
  padding: 30rpx;
}
.activity-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #1f2937;
  line-height: 1.4;
}
.status-row {
  margin-top: 16rpx;
}
.status-tag {
  display: inline-block;
  font-size: 22rpx;
  padding: 4rpx 16rpx;
  border-radius: 8rpx;
}
.status-draft { background: #F5F5F5; color: #999; }
.status-published { background: #F0FDF4; color: #22C55E; }
.status-ended { background: #F5F5F5; color: #999; }
.status-upcoming { background: #FFF7ED; color: #F97316; }

/* 元信息列表 */
.meta-list {
  margin-top: 24rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
}
.meta-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 16rpx;
}
.meta-item:last-child {
  margin-bottom: 0;
}
.meta-icon {
  font-size: 28rpx;
  margin-right: 12rpx;
  width: 32rpx;
  text-align: center;
}
.meta-text {
  font-size: 26rpx;
  color: #4b5563;
  flex: 1;
  line-height: 1.4;
}
.fee-line {
  display: block;
}
.member-fee-link {
  color: #F97316;
  font-weight: 500;
  text-decoration: underline;
  margin-top: 4rpx;
}

/* 活动介绍 */
.desc-section {
  margin-top: 30rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
}
.section-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #1f2937;
  display: block;
  margin-bottom: 12rpx;
}
.desc-text {
  font-size: 26rpx;
  color: #4b5563;
  line-height: 1.6;
}

/* 付费不退费说明 */
.refund-notice {
  margin-top: 20rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  margin-bottom: 10rpx;
  background: #FEF2F2;
  border: 2rpx solid #FECACA;
  border-radius: 12rpx;
  padding: 16rpx 20rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.refund-notice-icon {
  font-size: 24rpx;
  margin-right: 10rpx;
  flex-shrink: 0;
}
.refund-notice-text {
  font-size: 24rpx;
  color: #DC2626;
  line-height: 1.4;
}

/* 底部操作栏 */
.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -2rpx 12rpx rgba(0,0,0,0.06);
}
.price-info {
  display: flex;
  flex-direction: column;
}
.bottom-type {
  font-size: 22rpx;
  color: #999;
}
.bottom-vendor {
  font-size: 22rpx;
  color: #999;
  margin-top: 4rpx;
}
.action-btns {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
}
.btn-checkin {
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
  border: none;
  border-radius: 40rpx;
  padding: 16rpx 48rpx;
  font-size: 28rpx;
  font-weight: 600;
  line-height: 1.5;
  min-width: 160rpx;
  text-align: center;
}
.btn-checkin:active {
  opacity: 0.85;
}
.btn-checkin-done {
  background: #22C55E;
}
.btn-checkin-loading {
  opacity: 0.7;
}

/* 报名按钮 */
.btn-register {
  background: linear-gradient(135deg, #10B981, #34D399);
  color: #fff;
  border: none;
  border-radius: 40rpx;
  padding: 16rpx 32rpx;
  font-size: 26rpx;
  font-weight: 600;
  line-height: 1.5;
  min-width: 140rpx;
  text-align: center;
}
.btn-register:active { opacity: 0.85; }
.btn-register-loading { opacity: 0.7; }
.btn-register-done {
  background: #F5F5F5;
  color: #999;
  border: none;
  border-radius: 40rpx;
  padding: 16rpx 32rpx;
  font-size: 26rpx;
  line-height: 1.5;
  min-width: 140rpx;
  text-align: center;
}
.btn-cancel {
  background: #fff;
  color: #999;
  border: 2rpx solid #ddd;
  border-radius: 40rpx;
  padding: 14rpx 28rpx;
  font-size: 24rpx;
  line-height: 1.5;
  min-width: 120rpx;
  text-align: center;
}
.btn-cancel:active { opacity: 0.7; }

/* 能量扣减弹窗 */
.penalty-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.penalty-content {
  background: #fff;
  border-radius: 24rpx;
  padding: 48rpx 40rpx;
  width: 560rpx;
  text-align: center;
}
.penalty-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #EF4444;
  display: block;
  margin-bottom: 20rpx;
}
.penalty-desc {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 40rpx;
  line-height: 1.6;
}
.penalty-btn {
  background: #F97316;
  color: #fff;
  border: none;
  border-radius: 40rpx;
  padding: 16rpx 60rpx;
  font-size: 28rpx;
}

/* 活动评价 */
.feedback-section {
  padding: 30rpx;
  margin: 20rpx;
  background: #fff;
  border-radius: 16rpx;
}
.feedback-header { margin-bottom: 20rpx; }
.feedback-title { font-size: 32rpx; font-weight: bold; color: #333; }
.feedback-btn {
  background: #F97316; color: #fff; border: none;
  border-radius: 40rpx; padding: 20rpx 40rpx; font-size: 28rpx;
  text-align: center;
}
.feedback-submitted { padding: 10rpx 0; }
.feedback-ratings-display { margin-bottom: 16rpx; }
.fr-row { display: flex; justify-content: space-between; padding: 8rpx 0; }
.fr-label { font-size: 28rpx; color: #333; }
.fr-stars { font-size: 28rpx; color: #F97316; }
.feedback-comment-text { font-size: 26rpx; color: #666; margin: 10rpx 0; line-height: 1.5; }
.feedback-thanks { font-size: 24rpx; color: #999; text-align: center; margin-top: 16rpx; }
.feedback-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.feedback-modal {
  background: #fff; border-radius: 20rpx; padding: 40rpx;
  width: 80%; max-width: 600rpx;
}
.feedback-modal-title {
  font-size: 34rpx; font-weight: bold; color: #333;
  text-align: center; margin-bottom: 30rpx;
}
.rating-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16rpx 0;
}
.rating-label { font-size: 28rpx; color: #333; min-width: 120rpx; }
.stars { display: flex; }
.star-icon { font-size: 40rpx; color: #ddd; padding: 0 6rpx; }
.star-active { color: #F97316; }
.feedback-textarea {
  width: 100%; height: 160rpx; margin-top: 20rpx;
  border: 1rpx solid #eee; border-radius: 12rpx;
  padding: 16rpx; font-size: 26rpx; box-sizing: border-box;
}
.feedback-modal-actions {
  display: flex; justify-content: space-between; margin-top: 30rpx;
}
.feedback-cancel-btn {
  flex: 1; background: #f5f5f5; color: #666; border: none;
  border-radius: 40rpx; padding: 20rpx; font-size: 28rpx;
  text-align: center; margin-right: 20rpx;
}
.feedback-submit-btn {
  flex: 1; background: #F97316; color: #fff; border: none;
  border-radius: 40rpx; padding: 20rpx; font-size: 28rpx;
  text-align: center;
}
.share-btn { height: 64rpx; line-height: 64rpx; background: #f5f5f5; color: #666; font-size: 24rpx; border-radius: 32rpx; padding: 0 20rpx; display: flex; align-items: center; border: none; flex-shrink: 0; }
.share-btn::after { border: none; }
.share-btn-icon { font-size: 28rpx; margin-right: 4rpx; }
.share-btn-text { font-size: 24rpx; }

/* 报名表单弹窗 */
.reg-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.reg-modal {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  width: 85%;
  max-height: 80vh;
  overflow-y: auto;
}
.reg-modal-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  display: block;
  margin-bottom: 30rpx;
}
.reg-section-label {
  font-size: 28rpx;
  font-weight: 600;
  color: #555;
  display: block;
  margin-bottom: 16rpx;
}
.reg-family-section {
  margin-bottom: 24rpx;
}
.reg-family-list {
  max-height: 300rpx;
  overflow-y: auto;
}
.reg-family-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 20rpx;
  background: #f9f9f9;
  border-radius: 12rpx;
  margin-bottom: 10rpx;
}
.reg-family-item-selected {
  background: #FFF7ED;
  border: 2rpx solid #F97316;
}
.reg-family-info {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.reg-family-name {
  font-size: 28rpx;
  color: #333;
  margin-right: 12rpx;
}
.reg-family-relation {
  font-size: 22rpx;
  color: #999;
  background: #eee;
  padding: 2rpx 12rpx;
  border-radius: 8rpx;
}
.reg-checkmark {
  color: #F97316;
  font-size: 32rpx;
  font-weight: bold;
}
.reg-list {
  margin-bottom: 20rpx;
}
.reg-entry {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 12rpx;
  gap: 10rpx;
}
.reg-input {
  flex: 1;
  background: #f5f5f5;
  border: none;
  border-radius: 12rpx;
  padding: 16rpx 20rpx;
  font-size: 26rpx;
  color: #333;
}
.reg-input-name {
  flex: 2;
}
.reg-input-phone {
  flex: 3;
}
.reg-remove {
  color: #EF4444;
  font-size: 28rpx;
  padding: 10rpx;
  flex-shrink: 0;
}
.reg-add-btn {
  background: none;
  border: 2rpx dashed #ddd;
  border-radius: 12rpx;
  padding: 16rpx;
  font-size: 26rpx;
  color: #F97316;
  text-align: center;
  width: 100%;
  margin-top: 6rpx;
}
.reg-total {
  text-align: center;
  font-size: 30rpx;
  font-weight: bold;
  color: #F97316;
  margin-bottom: 24rpx;
  padding: 16rpx;
  background: #FFF7ED;
  border-radius: 12rpx;
}
.reg-actions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 20rpx;
}
.reg-cancel {
  flex: 1;
  background: #f5f5f5;
  color: #666;
  border: none;
  border-radius: 40rpx;
  padding: 20rpx;
  font-size: 28rpx;
  text-align: center;
}
.reg-submit {
  flex: 1;
  background: linear-gradient(135deg, #10B981, #34D399);
  color: #fff;
  border: none;
  border-radius: 40rpx;
  padding: 20rpx;
  font-size: 28rpx;
  font-weight: 600;
  text-align: center;
}
.reg-submit:active { opacity: 0.85; }
.reg-submit[disabled] { opacity: 0.5; }
</style>