<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
});
}
}
});