feat: 新增回答列表组件并在教师信息页面中使用

components/AnswerList/index.vue

@@ -0,0 +1,168 @@
+<template>
+  <view>
+    <view
+      class="answer-item"
+      v-for="(item, index) in answerList"
+      :key="item.id"
+    >
+      <view class="student-info">
+        <image class="student-avatar" :src="item.studentAvatar"></image>
+        <text class="student-name">{{ item.studentName }}</text>
+        <text class="answer-time">{{ item.time }}</text>
+      </view>
+
+      <view class="question">
+        <image
+          class="question-tag"
+          src="/static/common/images/icon_ask.png"
+        ></image>
+        <view class="question-content">{{ item.question }}</view>
+      </view>
+
+      <view class="answer">
+        <image
+          class="answer-tag"
+          src="/static/common/images/icon_answer.png"
+        ></image>
+        <view class="answer-content">
+          <view class="answer-text">{{ item.fullAnswer }}</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "AnswerList",
+  props: {
+    answerList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.answer-item {
+  background-color: #ffffff;
+  border-radius: 16rpx;
+  padding: 32rpx;
+  margin-bottom: 32rpx;
+
+  .student-info {
+    display: flex;
+    align-items: center;
+    margin-bottom: 32rpx;
+
+    .student-avatar {
+      width: 40rpx;
+      height: 40rpx;
+      border-radius: 20rpx;
+      margin-right: 16rpx;
+    }
+
+    .student-name {
+      flex: 1;
+      font-size: 26rpx;
+      color: #666666;
+      font-weight: 500;
+    }
+
+    .answer-time {
+      font-size: 24rpx;
+      color: #666666;
+    }
+  }
+
+  .question {
+    display: flex;
+    margin-bottom: 24rpx;
+
+    .question-tag {
+      width: 42rpx;
+      height: 42rpx;
+      margin-right: 32rpx;
+      flex-shrink: 0;
+    }
+
+    .question-content {
+      font-size: 32rpx;
+      color: #333333;
+      flex: 1;
+    }
+  }
+
+  .answer {
+    display: flex;
+    align-items: flex-start;
+
+    .answer-tag {
+      width: 42rpx;
+      height: 42rpx;
+      margin-right: 32rpx;
+      flex-shrink: 0;
+    }
+
+    .answer-content {
+      font-size: 24rpx;
+      line-height: 40rpx;
+      color: #666666;
+      flex: 1;
+      position: relative;
+
+      .answer-text {
+        word-break: break-word;
+        transition: all 0.3s;
+      }
+
+      &:not(.content-expanded) .answer-text {
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        position: relative;
+      }
+
+      &.content-expanded {
+        .expand-btn-container {
+          margin-top: 16rpx;
+          text-align: right;
+        }
+      }
+
+      .expand-btn-container {
+        display: block;
+      }
+
+      &:not(.content-expanded) .expand-btn-container {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        z-index: 2;
+        background-color: #ffffff;
+        padding-left: 10rpx;
+        padding-right: 0;
+      }
+
+      .expand-btn {
+        color: #4e7eff;
+        display: inline-block;
+        font-size: 26rpx;
+        cursor: pointer;
+        white-space: nowrap;
+        padding: 0 4rpx;
+
+        .expand-icon {
+          font-size: 20rpx;
+          display: inline-block;
+          vertical-align: middle;
+          margin-left: 4rpx;
+        }
+      }
+    }
+  }
+}
+</style>

pages/home/index/index.vue

@@ -300,6 +300,7 @@ export default {
         {
           title: "招办在线",
           icon: "/static/common/images/icon_admissions.png",
+          path: "/pages/home/admissions/index",
         },
         {
           title: "留言板",
@@ -464,6 +465,11 @@ export default {
       if (item.title === "电话咨询") {
         this.advicePhoneShow = true;
         return;
+      } else if (item.title === "招办在线") {
+        uni.navigateTo({
+          url: item.path,
+        });
+        return;
       } else {
         this.$refs.uToast.show({
           title: "暂未开放",

pages/home/teacherInfo/index.vue

@@ -58,36 +58,19 @@
     <view class="teacher-answers">
       <view class="answer-title">老师回答</view>
 
-      <view
-        class="answer-item"
-        v-for="(item, index) in answerList"
-        :key="item.id"
-      >
-        <view class="student-info">
-          <image class="student-avatar" :src="item.studentAvatar"></image>
-          <text class="student-name">{{ item.studentName }}</text>
-          <text class="answer-time">{{ item.time }}</text>
-        </view>
-
-        <view class="question">
-          <view class="question-tag">问</view>
-          <view class="question-content">{{ item.question }}</view>
-        </view>
-
-        <view class="answer">
-          <view class="answer-tag">答</view>
-          <view class="answer-content">
-            <view class="answer-text">{{ item.fullAnswer }}</view>
-          </view>
-        </view>
-      </view>
+      <!-- 问答列表组件 -->
+      <answer-list :answerList="answerList"></answer-list>
     </view>
   </view>
 </template>
 
 <script>
+import AnswerList from "@/components/AnswerList/index.vue";
+
 export default {
-  components: {},
+  components: {
+    AnswerList,
+  },
   data() {
     return {
       teacherId: "",
@@ -139,7 +122,7 @@ export default {
 
     // 在页面加载后检查文本是否超过三行
     this.$nextTick(() => {
-      this.checkTextOverflow();
+      // this.checkTextOverflow();
     });
   },
   methods: {
@@ -305,143 +288,6 @@ export default {
     color: #333333;
     margin-bottom: 28rpx;
   }
-
-  .answer-item {
-    background-color: #ffffff;
-    border-radius: 16rpx;
-    padding: 32rpx;
-    margin-bottom: 32rpx;
-    border: 1px solid #ccc;
-
-    .student-info {
-      display: flex;
-      align-items: center;
-      margin-bottom: 32rpx;
-
-      .student-avatar {
-        width: 40rpx;
-        height: 40rpx;
-        border-radius: 20rpx;
-        margin-right: 16rpx;
-      }
-
-      .student-name {
-        flex: 1;
-        font-size: 26rpx;
-        color: #666666;
-        font-weight: 500;
-      }
-
-      .answer-time {
-        font-size: 24rpx;
-        color: #666666;
-      }
-    }
-
-    .question {
-      display: flex;
-      margin-bottom: 24rpx;
-
-      .question-tag {
-        width: 40rpx;
-        height: 40rpx;
-        background-color: #4e7eff;
-        color: #ffffff;
-        font-size: 24rpx;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 8rpx;
-        margin-right: 32rpx;
-        flex-shrink: 0;
-        font-weight: 500;
-      }
-
-      .question-content {
-        font-size: 32rpx;
-        color: #333333;
-        flex: 1;
-      }
-    }
-
-    .answer {
-      display: flex;
-      align-items: flex-start;
-
-      .answer-tag {
-        width: 40rpx;
-        height: 40rpx;
-        background-color: #ffbd41;
-        color: #ffffff;
-        font-size: 24rpx;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 8rpx;
-        margin-right: 32rpx;
-        flex-shrink: 0;
-        font-weight: 500;
-      }
-
-      .answer-content {
-        font-size: 28rpx;
-        color: #666666;
-        flex: 1;
-        position: relative;
-
-        .answer-text {
-          word-break: break-word;
-          transition: all 0.3s;
-        }
-
-        &:not(.content-expanded) .answer-text {
-          display: -webkit-box;
-          -webkit-line-clamp: 3;
-          -webkit-box-orient: vertical;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          position: relative;
-        }
-
-        &.content-expanded {
-          .expand-btn-container {
-            margin-top: 16rpx;
-            text-align: right;
-          }
-        }
-
-        .expand-btn-container {
-          display: block;
-        }
-
-        &:not(.content-expanded) .expand-btn-container {
-          position: absolute;
-          right: 0;
-          bottom: 0;
-          z-index: 2;
-          background-color: #ffffff;
-          padding-left: 10rpx;
-          padding-right: 0;
-        }
-
-        .expand-btn {
-          color: #4e7eff;
-          display: inline-block;
-          font-size: 26rpx;
-          cursor: pointer;
-          white-space: nowrap;
-          padding: 0 4rpx;
-
-          .expand-icon {
-            font-size: 20rpx;
-            display: inline-block;
-            vertical-align: middle;
-            margin-left: 4rpx;
-          }
-        }
-      }
-    }
-  }
 }
 
 /* 响应式布局 - PC端样式 */