Browse Source

refactor(student): 优化学生端作业相关页面

- 修改作业列表和详情页面的时间显示为创建时间
- 优化作业详情页面的布局和内容展示
- 添加作业预览功能
- 修复作业列表的点击事件
master
liutong 1 year ago
parent
commit
4c355d5078
  1. 2
      pages/student/index/index.vue
  2. 4
      pages/student/index/job_list.vue
  3. 19
      pages/student/index/work_details.vue

2
pages/student/index/index.vue

@ -90,7 +90,7 @@
btnSize="mini" @click="submitJob(v)">上传</fui-button> btnSize="mini" @click="submitJob(v)">上传</fui-button>
</view> </view>
</view> </view>
<view style="color: #fff;padding: 10rpx;">时间{{v.submit_time}}</view> <view style="color: #fff;padding: 10rpx;">时间{{v.create_time}}</view>
<view class="multi-line-ellipsis" v-html="v.content_text"> <view class="multi-line-ellipsis" v-html="v.content_text">
</view> </view>

4
pages/student/index/job_list.vue

@ -12,7 +12,7 @@
style="height: 100vh;" style="height: 100vh;"
> >
<view class="con-list" v-for="(v,k) in tableList" :key="k"> <view class="con-list" v-for="(v,k) in tableList" :key="k" @click="openViewWorkDetails(v)">
<view class="con-list-img" v-if="v.student_file"> <view class="con-list-img" v-if="v.student_file">
<video v-if="v.student_file_type == 2" class="pic" style="width: 100%;border-radius: 15rpx;" :src="$util.img(v.student_file)"></video> <video v-if="v.student_file_type == 2" class="pic" style="width: 100%;border-radius: 15rpx;" :src="$util.img(v.student_file)"></video>
<image v-else style="width: 100%;border-radius: 15rpx;" :src="$util.img(v.student_file)" mode="aspectFit"></image> <image v-else style="width: 100%;border-radius: 15rpx;" :src="$util.img(v.student_file)" mode="aspectFit"></image>
@ -20,7 +20,7 @@
<view class="date_box"> <view class="date_box">
<view class="describe" style="margin-top: 20rpx;"> <view class="describe" style="margin-top: 20rpx;">
时间{{v.submit_time}} 时间{{v.create_time}}
</view> </view>
<!--是否已经完成作业--> <!--是否已经完成作业-->
<view class="mark" v-if="v.status == 2"> <view class="mark" v-if="v.status == 2">

19
pages/student/index/work_details.vue

@ -1,17 +1,20 @@
<!--作业详情--> <!--作业详情-->
<template> <template>
<view> <view>
<view class="top-style"> <!-- 作业展示-->
<image src="@/static/images/index/work_details.png" class="top-style-img"></image> <view class="top-style" v-if="infoData.student_file">
<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>
<!-- 简练信息+作业描述-->
<view class="below-style"> <view class="below-style">
<view class="head-img"> <view class="head-img">
<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-text">智卓燕</view> <fui-avatar width="80" :src="$util.img(infoData.coach_pic)"></fui-avatar>
<view class="head-text">{{infoData .coach_name}}</view>
</view> </view>
<view class="multi-line-ellipsis"> <view class="multi-line-ellipsis" v-html="infoData.content_text"></view>
作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述</view>
</view> </view>
</view> </view>
</template> </template>
@ -62,9 +65,11 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.top-style{ .top-style{
border: 1px solid red;
width: 92%; width: 92%;
height: 700rpx; height: 700rpx;
margin: auto; margin: auto;
margin-top: 45rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

Loading…
Cancel
Save