微信小程序教师反馈

<view class="container">
  <view wx:for="{{teachers}}" wx:key="id" class="teacher-card">
    <image class="avatar" src="{{item.avatarUrl}}" />
    <view class="info">
      <view class="header">
        <view class="name-subject">
          <text class="name">{{item.name}}</text>
          <text class="subject">{{item.subject}}</text>
        </view>
        <button class="feedback-btn" bindtap="toggleFeedbackInput" data-teacher-id="{{item.id}}">
          {{showFeedbackForTeacherId === item.id ? '关闭' : '反馈'}}
        </button>
      </view>
      <view class="message">
        <text>{{item.message}}</text>
      </view>
      <view wx:if="{{showFeedbackForTeacherId === item.id}}">
        <textarea 
          class="feedback" 
          placeholder="请输入您的反馈" 
          value="{{item.feedback}}" 
          bindinput="onFeedbackInput" 
          data-teacher-id="{{item.id}}"
        />
        <button 
          class="submit-feedback-btn" 
          bindtap="submitFeedback" 
          data-teacher-id="{{item.id}}"
        >
          提交
        </button>
      </view>
    </view>
  </view>
</view>

.container {
  padding: 15px;
  padding-bottom: 95px; 
}

.teacher-card {
  display: flex;
  align-items: flex-start;
  border: 1px solid #1296db;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 15px;
  background-color: #fff;
}
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 10px;
}
.info {
  flex: 1;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.name-subject {
  display: flex;
  flex-direction: column;
}
.name {
  font-size: 16px;
  font-weight: bold;
}
.message {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
}

.subject {
  font-size: 14px;
  color: #666;
}
.feedback-btn {
  margin-right: 20rpx !important;
  width: 160rpx !important;
  height: 60rpx;
  border-radius: 50rpx;
  color: #1296db;
  border: 1px solid #1296db;
  background-color: #EDF4FF;
  display: flex; 
  align-items: center;
  justify-content: center;
  font-size: 14px; 
}
.feedback {
  width: 100%;
  height: 60px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  box-sizing: border-box;
  margin-top: 10px;
}
.submit-feedback-btn {
  margin-right: 20rpx !important;
  width: 160rpx !important;
  margin-top: 10px;
  height: 60rpx;
  border-radius: 50rpx;
  color: #1296db;
  border: 1px solid #1296db;
  background-color: #EDF4FF;
  display: flex; 
  align-items: center;
  justify-content: center;
  font-size: 14px; 
}

Page({
  data: {
    teachers: [
      { id: 1, avatarUrl: '/images/logo.png', name: '张老师', subject: '高等数学', rating: 0, feedback: '',message:'数学是思维的体操。' },
      { id: 2, avatarUrl: '/images/logo.png', name: '李老师', subject: '英语口语', rating: 0, feedback: '',message:'语言是通往自由的钥匙。' },
      { id: 3, avatarUrl: '/images/logo.png', name: '王老师', subject: '计算机科学', rating: 0, feedback: '',message:'编程就是告诉计算机如何做它本以为已经知道的事情。' },
      { id: 4, avatarUrl: '/images/logo.png', name: '赵老师', subject: '数据结构', rating: 0, feedback: '' ,message:'选择合适的数据结构是解决问题的一半。'},
      { id: 5, avatarUrl: '/images/logo.png', name: '刘老师', subject: '微观经济学', rating: 0, feedback: '' ,message:'稀缺性是经济学的核心问题。'},
      { id: 6, avatarUrl: '/images/logo.png', name: '陈老师', subject: '有机化学', rating: 0, feedback: '',message:'化学是创造新世界的艺术。' },
      { id: 7, avatarUrl: '/images/logo.png', name: '杨老师', subject: '文学理论', rating: 0, feedback: '',message:'文学不仅是艺术，也是生活的反映。' },
      { id: 8, avatarUrl: '/images/logo.png', name: '黄老师', subject: '国际法', rating: 0, feedback: '',message:'法律是文明社会的基础。' },
      { id: 9, avatarUrl: '/images/logo.png', name: '周老师', subject: '心理学导论', rating: 0, feedback: '' ,message:'了解自己是智慧的开始。'},
      { id: 10, avatarUrl: '/images/logo.png', name: '吴老师', subject: '机械工程', rating: 0, feedback: '',message:'工程师是梦想的实现者。' },
      { id: 11, avatarUrl: '/images/logo.png', name: '徐老师', subject: '环境科学', rating: 0, feedback: '',message:'我们没有继承地球，而是从我们的孩子那里借用它。' },
      { id: 12, avatarUrl: '/images/logo.png', name: '朱老师', subject: '社会学', rating: 0, feedback: '',message:'社会学是理解社会行为的科学。' },
    ],
    showFeedbackForTeacherId: null
  },
  toggleFeedbackInput: function (e) {
    const teacherId = parseInt(e.currentTarget.dataset.teacherId);
    if (this.data.showFeedbackForTeacherId === teacherId) {
      this.setData({ showFeedbackForTeacherId: null });
    } else {
      this.setData({ showFeedbackForTeacherId: teacherId });
    }
  },
  onFeedbackInput: function (e) {
    const teacherId = parseInt(e.currentTarget.dataset.teacherId);
    const { value } = e.detail;
    if (isNaN(teacherId)) {
      console.error('Invalid teacherId:', teacherId);
      return;
    }
    const updatedTeachers = this.data.teachers.map(teacher => 
      teacher.id === teacherId ? { ...teacher, feedback: value } : teacher
    );
    this.setData({ teachers: updatedTeachers });
  },
  submitFeedback: function (e) {
    const teacherId = parseInt(e.currentTarget.dataset.teacherId);
    const teacher = this.data.teachers.find(t => t.id === teacherId);
    if (teacher) {
      if (teacher.feedback.trim() === '') {
        wx.showToast({
          title: '提交失败，未输入评价',
          icon: 'none'
        });
        return;
      }
      wx.showToast({
        title: '评价已提交',
        icon: 'success'
      });
      const updatedTeachers = this.data.teachers.map(t =>
        t.id === teacherId ? { ...t, feedback: '', rating: t.rating } : t
      );
      this.setData({
        teachers: updatedTeachers,
        showFeedbackForTeacherId: null
      });
    }
  }
  
});