feat(coach/student): 优化作业详情页面

- 添加作业展示区域，支持图片和视频显示
- 更新页面样式，增加教练头像和名称
- 实现作业详情数据的异步加载和显示- 优化文本显示样式，支持 HTML 格式

pages/coach/student/work_details.vue

@@ -1,68 +1,104 @@
-<!--作业任务-->
+<!--作业详情-->
 <template>
-	<view>
+  <view>
-		<view class="top-style">
+    <!--    作业展示-->
-			<image src="@/static/images/index/work_details.png" class="top-style-img">
+    <view class="top-style" v-if="infoData.student_file">
-		</view>
+      <video v-if="infoData.student_file_type == 2" class="pic" style="width: 100%;border-radius: 15rpx;" :src="$util.img(infoData.student_file)"></video>
+      <image v-else style="width: 100%;border-radius: 15rpx;" :src="$util.img(infoData.student_file)" mode="aspectFit"></image>
+    </view>
 
-		<view class="below-style">
+    <!--    简练信息+作业描述-->
-			<view class="head-img">
+    <view class="below-style">
-				<fui-avatar width="80" src="https://img1.baidu.com/it/u=3598104138,3632108415&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"></fui-avatar>
+      <view class="head-img">
-				<view class="head-text">智卓燕</view>
+        <!--教练头像-->
-			</view>
+        <fui-avatar width="80" :src="$util.img(infoData.coach_pic)"></fui-avatar>
-			<view class="multi-line-ellipsis">
+        <view class="head-text">{{infoData .coach_name}}</view>
-				作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述</view>
+      </view>
-		</view>
+      <view class="multi-line-ellipsis" v-html="infoData.content_text"></view>
-	</view>
+    </view>
+  </view>
 </template>
 <script>
-	export default {
+import memberApi from '@/api/member.js';
-		data() {
-			return {
 
-			}
-		},
-		methods: {
 
-		}
+export default {
-	}
+  data() {
+    return {
+      //筛选条件
+      filteredData: {
+        id: '',//作业id
+      },
+
+      infoData:{},
+    }
+  },
+  onLoad(options) {
+    this.filteredData.id = options.id
+  },
+  onShow(){
+    this.init()//初始化数据
+  },
+  methods: {
+    //初始化
+    async init(){
+      this.getAssignmentsInfo()
+    },
+
+    //获取作业详情
+    async getAssignmentsInfo() {
+      let params = {...this.filteredData}
+      let res = await memberApi.assignmentsInfo(params)
+      if (res.code != 1) {
+        uni.showToast({
+          title: res.msg,
+          icon: 'none'
+        })
+        return
+      }
+
+      this.infoData = res.data
+    },
+  }
+}
 </script>
 
 <style lang="less" scoped>
-	.top-style{
+.top-style{
-		width: 92%;
+  width: 92%;
-		height: 700rpx;
+  height: 700rpx;
-		margin: auto;
+  margin: auto;
-		display: flex;
+  margin-top: 45rpx;
-		align-items: center;
+  display: flex;
-		justify-content: center;
+  align-items: center;
-	}
+  justify-content: center;
-	.top-style-img{
+}
-		width: 120rpx;
+.top-style-img{
-		height: 120rpx;
+  width: 120rpx;
-	}
+  height: 120rpx;
-	.below-style{
+}
-		width: 92%;
+.below-style{
-		margin: auto;
+  width: 92%;
-	}
+  margin: auto;
-	.head-img {
+}
-		display: flex;
+.head-img {
-		align-items: center;
+  display: flex;
-		padding: 10rpx 20rpx;
+  align-items: center;
-	}
+  padding: 10rpx 20rpx;
-	.head-text {
+}
-		color: #333333;
+.head-text {
-		font-size: 35rpx;
+  color: #333333;
-		padding-left: 20rpx;
+  font-size: 35rpx;
-	}
+  padding-left: 20rpx;
-	.multi-line-ellipsis {
+}
-		color: #333333;
+.multi-line-ellipsis {
-		font-size: 29rpx;
+  color: #333333;
-		padding: 5rpx 10rpx;
+  font-size: 29rpx;
-		// display: -webkit-box;
+  padding: 5rpx 10rpx;
-		// -webkit-box-orient: vertical;
+  // display: -webkit-box;
-		// -webkit-line-clamp: 2;
+  // -webkit-box-orient: vertical;
-		// overflow: hidden;
+  // -webkit-line-clamp: 2;
-		// text-overflow: ellipsis;
+  // overflow: hidden;
-	}
+  // text-overflow: ellipsis;
+}
 </style>

pages/student/index/work_details.vue

@@ -65,7 +65,6 @@ export default {
 
 <style lang="less" scoped>
 	.top-style{
-    border: 1px solid red;
 		width: 92%;
 		height: 700rpx;
 		margin: auto;