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

<template>
  <view class="feedback-page">
    <view class="section-card">
      <text class="section-title">沙龙反馈</text>
      <text class="card-desc">分享你对本次沙龙的感受与建议</text>

      <view class="summary-box" v-if="salonTitle">
        <text class="summary-text">{{ salonTitle }}</text>
      </view>

      <view class="rate-box">
        <text class="form-label">整体评分</text>
        <view class="star-row">
          <text
            v-for="star in 5"
            :key="star"
            class="star"
            :class="star <= rating ? 'star-on' : 'star-off'"
            @click="setRating(star)"
          >★</text>
          <text class="rate-tip">{{ ratingText }}</text>
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">留言建议（选填）</text>
        <textarea
          class="form-input textarea"
          v-model="comment"
          maxlength="500"
          placeholder="说说你对沙龙内容、讲师、场地的建议…"
        />
      </view>

      <button class="submit-btn" @click="handleSubmit" :loading="loading" :disabled="loading">提交反馈</button>
    </view>
  </view>
</template>

<script>
import { salonFeedback } from '@/utils/api.js'
import { guardPage } from '@/utils/guard.js'

export default {
  data() {
    return {
      salonId: '',
      salonTitle: '',
      rating: 5,
      comment: '',
      loading: false
    }
  },
  onLoad(options) {
    if (!guardPage()) return
    this.salonId = options && options.salonId ? options.salonId : ''
    this.salonTitle = options && options.title ? decodeURIComponent(options.title) : ''
    if (!this.salonId) {
      uni.showToast({ title: '参数错误', icon: 'none' })
      setTimeout(function() {
        uni.navigateBack({ delta: 1 })
      }, 1500)
    }
  },
  computed: {
    ratingText() {
      var map = { 1: '很差', 2: '较差', 3: '一般', 4: '满意', 5: '非常满意' }
      return map[this.rating] || ''
    }
  },
  methods: {
    setRating: function(star) {
      this.rating = star
    },
    handleSubmit: function() {
      var self = this
      if (self.loading) return
      self.loading = true
      var payload = {
        salonId: self.salonId,
        rating: self.rating,
        comment: (self.comment || '').trim()
      }
      salonFeedback(payload).then(function() {
        uni.showToast({ title: '提交成功', icon: 'success' })
        setTimeout(function() {
          uni.navigateBack({ delta: 1 })
        }, 1200)
      }).catch(function(err) {
        uni.showToast({ title: (err && err.message) || '提交失败', icon: 'none' })
      }).finally(function() {
        self.loading = false
      })
    }
  }
}
</script>

<style scoped>
.feedback-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; }
.summary-box { background: #FFF7ED; border-radius: 8rpx; padding: 20rpx 24rpx; margin-bottom: 24rpx; border: 2rpx solid #FED7AA; }
.summary-text { display: block; font-size: 28rpx; color: #1E293B; font-weight: 600; }
.rate-box { margin-bottom: 24rpx; }
.form-label { display: block; font-size: 26rpx; color: #475569; font-weight: 500; margin-bottom: 12rpx; }
.star-row { display: flex; align-items: center; }
.star { font-size: 56rpx; margin-right: 16rpx; }
.star-on { color: #F97316; }
.star-off { color: #CBD5E1; }
.rate-tip { font-size: 26rpx; color: #64748B; margin-left: 8rpx; }
.form-item { margin-bottom: 24rpx; }
.form-input { width: 100%; box-sizing: border-box; border: 2rpx solid #E2E8F0; border-radius: 8rpx; padding: 16rpx; font-size: 28rpx; color: #1E293B; background: #F8FAFC; }
.textarea { height: 240rpx; }
.submit-btn { width: 100%; height: 88rpx; line-height: 88rpx; background: #F97316; color: #FFF; font-size: 30rpx; font-weight: 600; border-radius: 44rpx; border: none; margin-top: 24rpx; }
.submit-btn:active { opacity: 0.85; }
</style>