hz/fe-student
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git synced 2025-12-14 05:16:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat:v-for添加:key

Browse Source
This commit is contained in:
lixg
2022-12-13 11:05:40 +08:00
parent 8624a8a384
commit 9517f4cb12
9 changed files with 665 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/views/debate/DebatePage.vue
View File

@@ -23,17 +23,22 @@
<div class="detail"> <div class="detail">
<!-- 左侧 --> <!-- 左侧 -->
<div <div
style="margin-left: 48px; margin-right: 48px; background-color: pink" style="margin-left: 48px; margin-right: 48px; background-color: pink"
> >
<div class="title"> <div class="title">
<img width="20px" height="20px" src="../../assets/image/yuan.png"/> <img
style="width: 20px; height: 20px"
src="../../assets/image/yuan.png"
/>
<div class="text">参与情况</div> <div class="text">参与情况</div>
<div class="box"></div> <div class="box"></div>
</div> </div>
<!-- <div style="display: flex; align-items: center"></div> --> <!-- <div style="display: flex; align-items: center"></div> -->
<div class="all"> <div class="all">
<div class="item allbox1"> <div class="item allbox1">
<div class="item1" style="color: #089dff">{{ data.accessCnt }}</div> <div class="item1" style="color: #089dff">
{{ data.accessCnt }}
</div>
<div class="item2">参与数</div> <div class="item2">参与数</div>
</div> </div>
<div class="item allbox2"> <div class="item allbox2">
@@ -47,12 +52,11 @@
</div> </div>
<!-- todo #提交投票 提交投票时投票列表如何来的？--> <!-- todo #提交投票 提交投票时投票列表如何来的？-->
<div class="vsbox"> <div class="vsbox">
<div class="yes"> <div class="yes"></div>
</div>
<div class="vs clearfix"> <div class="vs clearfix">
<img <img
style="margin-top: 20px; margin-left: 85px" style="margin-top: 20px; margin-left: 85px"
src="../../assets/image/VS.png" src="../../assets/image/VS.png"
/> />
<div class="count"> <div class="count">
<span style="color: #fe6a64">576票</span> <span style="color: #fe6a64">576票</span>
@@ -64,9 +68,7 @@
<button class="btn btn2">投票</button> <button class="btn btn2">投票</button>
</div> </div>
</div> </div>
<div class="no"> <div class="no"></div>
</div>
</div> </div>
</div> </div>
<!-- 左侧 --> <!-- 左侧 -->
@@ -77,23 +79,23 @@
</template> </template>
<script setup> <script setup>
import {reactive, toRefs} from "vue"; import { reactive, toRefs } from "vue";
import {useRequest} from "@/api/request"; import { useRequest } from "@/api/request";
import {TASK_VOTE_DETAIL, VOTE_DETAIL} from "@/api/api"; import { TASK_VOTE_DETAIL, VOTE_DETAIL } from "@/api/api";
import {useRoute} from "vue-router/dist/vue-router"; import { useRoute } from "vue-router/dist/vue-router";
const {query: {id: voteSubmitId}} = useRoute() const {
const {data} = useRequest(TASK_VOTE_DETAIL, {voteSubmitId}) query: { id: voteSubmitId },
const {data:voteDetail} = useRequest(VOTE_DETAIL, {voteSubmitId}) } = useRoute();
const { data } = useRequest(TASK_VOTE_DETAIL, { voteSubmitId });
const { data: voteDetail } = useRequest(VOTE_DETAIL, { voteSubmitId });
const state = reactive({ const state = reactive({
activeName: "first", activeName: "first",
}); });
const {activeName} = toRefs(state) const { activeName } = toRefs(state);
const handleClick = (id) => { const handleClick = (id) => {};
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@@ -191,26 +193,26 @@ const handleClick = (id) => {
.allbox1 { .allbox1 {
margin-right: 22px; margin-right: 22px;
background: linear-gradient( background: linear-gradient(
0deg, 0deg,
rgba(160, 193, 230, 0) 0%, rgba(160, 193, 230, 0) 0%,
rgba(161, 195, 231, 0.2) 100% rgba(161, 195, 231, 0.2) 100%
); );
} }
.allbox2 { .allbox2 {
margin-right: 22px; margin-right: 22px;
background: linear-gradient( background: linear-gradient(
0deg, 0deg,
rgba(177, 219, 229, 0) 0%, rgba(177, 219, 229, 0) 0%,
rgba(172, 216, 227, 0.2) 100% rgba(172, 216, 227, 0.2) 100%
); );
} }
.allbox3 { .allbox3 {
background: linear-gradient( background: linear-gradient(
0deg, 0deg,
rgba(195, 209, 234, 0) 0%, rgba(195, 209, 234, 0) 0%,
rgba(191, 206, 231, 0.2) 100% rgba(191, 206, 231, 0.2) 100%
); );
} }
@@ -289,9 +291,9 @@ const handleClick = (id) => {
width: 435px; width: 435px;
// height: 763px; // height: 763px;
background: linear-gradient( background: linear-gradient(
0deg, 0deg,
rgba(226, 104, 119, 0) 0%, rgba(226, 104, 119, 0) 0%,
rgba(226, 104, 119, 0.1) 100% rgba(226, 104, 119, 0.1) 100%
); );
border-radius: 8px; border-radius: 8px;
@@ -477,9 +479,9 @@ const handleClick = (id) => {
width: 435px; width: 435px;
// height: 763px; // height: 763px;
background: linear-gradient( background: linear-gradient(
0deg, 0deg,
rgba(88, 164, 232, 0) 0%, rgba(88, 164, 232, 0) 0%,
rgba(88, 164, 232, 0.1) 100% rgba(88, 164, 232, 0.1) 100%
); );
border-radius: 8px; border-radius: 8px;

100
src/views/discuss/DiscussPage.vue
View File

@@ -2,7 +2,7 @@
<div class="surveydetail"> <div class="surveydetail">
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div <div
style="display: flex; align-items: center; justify-content: space-between" style="display: flex; align-items: center; justify-content: space-between"
> >
<div class="crumb"> <div class="crumb">
<div>混合制项目</div> <div>混合制项目</div>
@@ -14,16 +14,16 @@
<div class="prevnext"> <div class="prevnext">
<div class="prev"> <div class="prev">
<img <img
style="width: 23px; height: 23px" style="width: 23px; height: 23px"
src="../../assets/image/prev.png" src="../../assets/image/prev.png"
/> />
<div style="margin-left: 7px">上一个</div> <div style="margin-left: 7px">上一个</div>
</div> </div>
<div class="prev" style="margin-left: 31px"> <div class="prev" style="margin-left: 31px">
<div style="margin-right: 7px">下一个</div> <div style="margin-right: 7px">下一个</div>
<img <img
style="width: 23px; height: 23px" style="width: 23px; height: 23px"
src="../../assets/image/next.png" src="../../assets/image/next.png"
/> />
</div> </div>
</div> </div>
@@ -39,7 +39,7 @@
<div class="title"> <div class="title">
{{ info.name }} {{ info.name }}
</div> </div>
<!-- <button class="btn">发表帖子</button>--> <!-- <button class="btn">发表帖子</button>-->
</div> </div>
<div> <div>
@@ -49,29 +49,49 @@
<div class="intime">进行中</div> <div class="intime">进行中</div>
</div> </div>
<div class="allbtn"> <div class="allbtn">
<button :class="`btnone ${param.searchType==1?'active':''}`" >最新</button> <button :class="`btnone ${param.searchType == 1 ? 'active' : ''}`">
<button :class="`btntwo ${param.searchType==2?'active':''}`" 最新
style="margin-left: 20px">最热 </button>
<button
:class="`btntwo ${param.searchType == 2 ? 'active' : ''}`"
style="margin-left: 20px"
>
最热
</button> </button>
</div> </div>
<div class="discusslist" v-for="(d,j) in info?.discussDtoList"> <div
class="discusslist"
v-for="(d, j) in info?.discussDtoList"
:key="j"
>
<div class="itemtitle">{{ d.discussName }}</div> <div class="itemtitle">{{ d.discussName }}</div>
<div class="itemdiscuss"> <div class="itemdiscuss">
{{ d.discussExplain }} {{ d.discussExplain }}
</div> </div>
<div class="allstar clearfix"> <div class="allstar clearfix">
<div @click="comment(d)" style="display: flex;cursor: pointer"> <div @click="comment(d)" style="display: flex; cursor: pointer">
<span class="iconfont icon-pinglun" style="color:#b3bdc4"></span> <span class="iconfont icon-pinglun" style="color: #b3bdc4"></span>
<div class="count"> {{ d.commentNum || 0 }}</div> <div class="count">{{ d.commentNum || 0 }}</div>
</div> </div>
<div @click="like(d)" style="display: flex;cursor: pointer"> <div @click="like(d)" style="display: flex; cursor: pointer">
<span class="iconfont icon-dianzan" :style="{color:d.praised?'red':'#b3bdc4',marginLeft: '19px'}"></span> <span
<div class="count"> {{ d.praiseNum || 0 }}</div> class="iconfont icon-dianzan"
:style="{
color: d.praised ? 'red' : '#b3bdc4',
marginLeft: '19px',
}"
></span>
<div class="count">{{ d.praiseNum || 0 }}</div>
</div> </div>
<div @click="collection(d)" style="display: flex;cursor: pointer"> <div @click="collection(d)" style="display: flex; cursor: pointer">
<span class="iconfont icon-shoucang" <span
:style="{color:d.collected?'red':'#b3bdc4',marginLeft: '19px'}"></span> class="iconfont icon-shoucang"
<div class="count"> {{ d.collectionNum || 0 }}</div> :style="{
color: d.collected ? 'red' : '#b3bdc4',
marginLeft: '19px',
}"
></span>
<div class="count">{{ d.collectionNum || 0 }}</div>
</div> </div>
</div> </div>
<div class="thinline"></div> <div class="thinline"></div>
@@ -83,42 +103,40 @@
</template> </template>
<script setup> <script setup>
import {request, useRequest} from "@/api/request"; import { request, useRequest } from "@/api/request";
import { import { COMMENT_COLLECTION, COMMENT_PRAISE, DISCUSS_LIST } from "@/api/api";
COMMENT_COLLECTION, import { reactive, ref, toRefs } from "vue";
COMMENT_PRAISE, import { useRoute, useRouter } from "vue-router";
DISCUSS_LIST,
} from "@/api/api";
import {reactive, ref, toRefs} from "vue";
import {useRoute, useRouter} from "vue-router";
const router = useRouter() const router = useRouter();
const {query: {id,type}} = useRoute() const {
query: { id, type },
} = useRoute();
const param = ref({ const param = ref({
type, type,
id id,
}) });
const {data: info} = useRequest(DISCUSS_LIST, param.value) const { data: info } = useRequest(DISCUSS_LIST, param.value);
const state = reactive({ const state = reactive({
activeName: "first", activeName: "first",
}); });
function comment({discussId: id}) { function comment({ discussId: id }) {
router.push({path: 'discussdetail', query: {id,type}}) router.push({ path: "discussdetail", query: { id, type } });
} }
function like(d) { function like(d) {
d.praised ? (d.praiseNum -= 1) : (d.praiseNum += 1) d.praised ? (d.praiseNum -= 1) : (d.praiseNum += 1);
d.praised = !d.praised d.praised = !d.praised;
request(COMMENT_PRAISE, {targetId: d.discussId, type: 3}) request(COMMENT_PRAISE, { targetId: d.discussId, type: 3 });
} }
function collection(d) { function collection(d) {
d.collected ? (d.collectionNum -= 1) : (d.collectionNum += 1) d.collected ? (d.collectionNum -= 1) : (d.collectionNum += 1);
d.collected = !d.collected d.collected = !d.collected;
request(COMMENT_COLLECTION, {targetId: d.discussId, type: 4}) request(COMMENT_COLLECTION, { targetId: d.discussId, type: 4 });
} }
</script> </script>

279
src/views/discussdetail/DiscussDetail.vue
View File

@@ -2,7 +2,7 @@
<div class="surveydetailpage"> <div class="surveydetailpage">
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div <div
style="display: flex; align-items: center; justify-content: space-between" style="display: flex; align-items: center; justify-content: space-between"
> >
<div class="crumb"> <div class="crumb">
<div>混合制项目</div> <div>混合制项目</div>
@@ -14,16 +14,16 @@
<div class="prevnext"> <div class="prevnext">
<div class="prev"> <div class="prev">
<img <img
style="width: 23px; height: 23px" style="width: 23px; height: 23px"
src="../../assets/image/prev.png" src="../../assets/image/prev.png"
/> />
<div style="margin-left: 7px">上一个</div> <div style="margin-left: 7px">上一个</div>
</div> </div>
<div class="prev" style="margin-left: 31px"> <div class="prev" style="margin-left: 31px">
<div style="margin-right: 7px">下一个</div> <div style="margin-right: 7px">下一个</div>
<img <img
style="width: 23px; height: 23px" style="width: 23px; height: 23px"
src="../../assets/image/next.png" src="../../assets/image/next.png"
/> />
</div> </div>
</div> </div>
@@ -49,20 +49,42 @@
</div> </div>
<div class="discusscontent clearfix"> <div class="discusscontent clearfix">
<div class="contenttop clearfix"> <div class="contenttop clearfix">
<div class="contenttitle">{{ disDetail.discussName }}</div> <div class="contenttitle">{{ disDetail.discussName }}</div>
<div @click="like()" <div
style="display: flex;cursor: pointer;align-items: baseline;margin-left: 20px"> @click="like()"
<span class="iconfont icon-dianzan" style="
:style="{color:disDetail.praised?'red':'#b3bdc4',marginLeft: '19px'}"></span> display: flex;
<div class="count"> {{ disDetail.praiseNum || 0 }}</div> cursor: pointer;
align-items: baseline;
margin-left: 20px;
"
>
<span
class="iconfont icon-dianzan"
:style="{
color: disDetail.praised ? 'red' : '#b3bdc4',
marginLeft: '19px',
}"
></span>
<div class="count">{{ disDetail.praiseNum || 0 }}</div>
</div> </div>
<div @click="collection()" <div
style="display: flex;cursor: pointer;align-items: baseline;margin-left: 20px"> @click="collection()"
<span class="iconfont icon-shoucang" style="
:style="{color: disDetail.collected?'red':'#b3bdc4',marginLeft: '19px'}"></span> display: flex;
<div class="count"> {{ disDetail.collectionNum || 0 }}</div> cursor: pointer;
align-items: baseline;
margin-left: 20px;
"
>
<span
class="iconfont icon-shoucang"
:style="{
color: disDetail.collected ? 'red' : '#b3bdc4',
marginLeft: '19px',
}"
></span>
<div class="count">{{ disDetail.collectionNum || 0 }}</div>
</div> </div>
</div> </div>
<div class="contentmid"> <div class="contentmid">
@@ -74,18 +96,28 @@
<div class="bascinfor"> <div class="bascinfor">
<div class="inputone"> <div class="inputone">
<el-input <el-input
v-model="disComment.content" v-model="disComment.content"
:autosize="{ minRows: 5, maxRows: 5 }" :autosize="{ minRows: 5, maxRows: 5 }"
resize="none" resize="none"
maxlength="100" maxlength="100"
type="textarea" type="textarea"
placeholder="写评论~" placeholder="写评论~"
/> />
<div class="words">{{ disComment.content.length }}/100</div> <div class="words">{{ disComment.content.length }}/100</div>
<div class="upload"> <div class="upload">
<div style="display: flex"> <div style="display: flex">
<div class="allimg" v-for="(img,i) in commentSubmitFileList"> <div
<div class="imgone" :style="{backgroundImage: `url('${img.url}')`,marginLeft:'15px'}"></div> class="allimg"
v-for="(img, i) in commentSubmitFileList"
:key="i"
>
<div
class="imgone"
:style="{
backgroundImage: `url('${img.url}')`,
marginLeft: '15px',
}"
></div>
<div class="cha" @click="removeCommentImg(i)"></div> <div class="cha" @click="removeCommentImg(i)"></div>
</div> </div>
</div> </div>
@@ -93,7 +125,7 @@
<div class="btnone clearfix"> <div class="btnone clearfix">
<UploadImg v-model="commentSubmitFileList"> <UploadImg v-model="commentSubmitFileList">
<button class="btwwo"> <button class="btwwo">
<img class="image" src="../../assets/image/uploadimg.png"/> <img class="image" src="../../assets/image/uploadimg.png" />
<div class="shangchuan">上传图片</div> <div class="shangchuan">上传图片</div>
</button> </button>
</UploadImg> </UploadImg>
@@ -105,7 +137,7 @@
<div class="thinline"></div> <div class="thinline"></div>
<div class="bottom"> <div class="bottom">
<div v-for="(row,i) in commontList"> <div v-for="(row, i) in commontList" :key="i">
<div class="header"> <div class="header">
<div class="avator"></div> <div class="avator"></div>
<div class="id">{{ row.userName }}</div> <div class="id">{{ row.userName }}</div>
@@ -120,19 +152,33 @@
</div> </div>
<div class="intime">{{ row.ctime }}</div> <div class="intime">{{ row.ctime }}</div>
<div class="likeYou"> <div class="likeYou">
<div @click="commentComment(row)" style="display: flex;cursor: pointer;align-items: baseline;"> <div
<span class="iconfont icon-pinglun" @click="commentComment(row)"
:style="{color:'#b3bdc4'}"></span> style="display: flex; cursor: pointer; align-items: baseline"
>
<span
class="iconfont icon-pinglun"
:style="{ color: '#b3bdc4' }"
></span>
<!-- <div class="count"> {{ row.praiseNum || 0 }}</div>--> <!-- <div class="count"> {{ row.praiseNum || 0 }}</div>-->
</div> </div>
<div @click="commentLike(row)" <div
style="display: flex;cursor: pointer;align-items: baseline;margin-left: 19px"> @click="commentLike(row)"
<span class="iconfont icon-dianzan" style="
:style="{color:row.praised?'red':'#b3bdc4'}"></span> display: flex;
<div class="count"> {{ row.praiseNum || 0 }}</div> cursor: pointer;
align-items: baseline;
margin-left: 19px;
"
>
<span
class="iconfont icon-dianzan"
:style="{ color: row.praised ? 'red' : '#b3bdc4' }"
></span>
<div class="count">{{ row.praiseNum || 0 }}</div>
</div> </div>
</div> </div>
<div v-for="(replay,j) in row.children"> <div v-for="(replay, j) in row.children" :key="j">
<div class="reply"> <div class="reply">
<div class="sameava avaone"></div> <div class="sameava avaone"></div>
<div class="sameuser">{{ replay.userName }}</div> <div class="sameuser">{{ replay.userName }}</div>
@@ -151,46 +197,79 @@
<!-- <div class="talk"></div> --> <!-- <div class="talk"></div> -->
</div> </div>
<div class="likeYou"> <div class="likeYou">
<div @click="commentComment(replay)" style="display: flex;cursor: pointer;align-items: baseline;"> <div
<span class="iconfont icon-pinglun" :style="{color:'#b3bdc4'}"></span> @click="commentComment(replay)"
<!-- <div class="count"> {{ replay.commentNum }}</div>--> style="
display: flex;
cursor: pointer;
align-items: baseline;
"
>
<span
class="iconfont icon-pinglun"
:style="{ color: '#b3bdc4' }"
></span>
<!-- <div class="count"> {{ replay.commentNum }}</div>-->
</div> </div>
<div @click="commentLike(replay)" <div
style="display: flex;cursor: pointer;align-items: baseline;margin-left: 19px"> @click="commentLike(replay)"
<span class="iconfont icon-dianzan" style="
:style="{color:replay.praised?'red':'#b3bdc4'}"></span> display: flex;
<div class="count"> {{ replay.praiseNum || 0 }}</div> cursor: pointer;
align-items: baseline;
margin-left: 19px;
"
>
<span
class="iconfont icon-dianzan"
:style="{ color: replay.praised ? 'red' : '#b3bdc4' }"
></span>
<div class="count">{{ replay.praiseNum || 0 }}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="discuss clearfix" v-if="commontList && commontList.length"> <div
class="discuss clearfix"
v-if="commontList && commontList.length"
>
<div class="inreply"> <div class="inreply">
<el-input <el-input
v-model="replayComment.content" v-model="replayComment.content"
:autosize="{ minRows: 5, maxRows: 5 }" :autosize="{ minRows: 5, maxRows: 5 }"
resize="none" resize="none"
maxlength="100" maxlength="100"
type="textarea" type="textarea"
:placeholder="replayComment.placeholder" :placeholder="replayComment.placeholder"
/> />
<div class="words">{{ replayComment.content.length }}/100</div> <div class="words">{{ replayComment.content.length }}/100</div>
<div class="upload"> <div class="upload">
<div style="display: flex"> <div style="display: flex">
<div class="allimg" v-for="(img,i) in fileList"> <div class="allimg" v-for="(img, i) in fileList" :key="i">
<div class="imgone" :style="{backgroundImage: `url('${img.url}')`,marginLeft:'15px'}"></div> <div
class="imgone"
:style="{
backgroundImage: `url('${img.url}')`,
marginLeft: '15px',
}"
></div>
<div class="cha" @click="removeImg(i)"></div> <div class="cha" @click="removeImg(i)"></div>
</div> </div>
</div> </div>
<datagrid class="uploadAnd"> <datagrid class="uploadAnd">
<UploadImg v-model="fileList"> <UploadImg v-model="fileList">
<button class="btnone clearfix"> <button class="btnone clearfix">
<img class="image" src="../../assets/image/uploadimg.png"/> <img
class="image"
src="../../assets/image/uploadimg.png"
/>
<div class="shangchuan">上传图片</div> <div class="shangchuan">上传图片</div>
</button> </button>
</UploadImg> </UploadImg>
<button class="btntwo" @click="submitReplayComment">发表</button> <button class="btntwo" @click="submitReplayComment">
发表
</button>
</datagrid> </datagrid>
</div> </div>
</div> </div>
@@ -202,73 +281,85 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import {reactive, ref, toRefs} from "vue"; import { reactive, ref, toRefs } from "vue";
import {useRoute} from "vue-router/dist/vue-router"; import { useRoute } from "vue-router/dist/vue-router";
import {request, usePage, useRequest} from "@/api/request"; import { request, usePage, useRequest } from "@/api/request";
import { import {
COMMENT_ADD, COMMENT_ADD,
COMMENT_COLLECTION, COMMENT_COLLECTION,
COMMENT_LIST, COMMENT_PRAISE, COMMENT_LIST,
COMMENT_PRAISE,
DISCUSS_DETAIL, DISCUSS_DETAIL,
FILE_UPLOAD FILE_UPLOAD,
} from "@/api/api"; } from "@/api/api";
import UploadImg from '@/components/img/UploadImg.vue' import UploadImg from "@/components/img/UploadImg.vue";
const {query: {id, discussSubmitId,type}} = useRoute() const {
query: { id, discussSubmitId, type },
} = useRoute();
const {data: commontList, fetchData: commonFetch} = usePage(COMMENT_LIST, {id, type: 1}) const { data: commontList, fetchData: commonFetch } = usePage(COMMENT_LIST, {
id,
type: 1,
});
const {data: disDetail} = useRequest(DISCUSS_DETAIL, {id,type}) const { data: disDetail } = useRequest(DISCUSS_DETAIL, { id, type });
const fileList = ref([]) const fileList = ref([]);
const commentSubmitFileList = ref([]) const commentSubmitFileList = ref([]);
const disComment = ref({ const disComment = ref({
content: '', content: "",
}) });
const replayComment = ref({ const replayComment = ref({
placeholder: '', placeholder: "",
content: '', content: "",
pid: '' pid: "",
}) });
function removeImg(i) { function removeImg(i) {
fileList.value.splice(i, 1) fileList.value.splice(i, 1);
} }
function removeCommentImg() { function removeCommentImg() {
commentSubmitFileList.value.splice(i, 1) commentSubmitFileList.value.splice(i, 1);
} }
function like() { function like() {
disDetail.value.praised ? (disDetail.value.praiseNum -= 1) : (disDetail.value.praiseNum += 1) disDetail.value.praised
disDetail.value.praised = !disDetail.value.praised ? (disDetail.value.praiseNum -= 1)
request(COMMENT_PRAISE, {targetId: disDetail.value.discussId, type: 5}) : (disDetail.value.praiseNum += 1);
disDetail.value.praised = !disDetail.value.praised;
request(COMMENT_PRAISE, { targetId: disDetail.value.discussId, type: 5 });
} }
function collection() { function collection() {
disDetail.value.collected ? (disDetail.value.collectionNum -= 1) : (disDetail.value.collectionNum += 1) disDetail.value.collected
disDetail.value.collected = !disDetail.value.collected ? (disDetail.value.collectionNum -= 1)
request(COMMENT_COLLECTION, {targetId: disDetail.value.discussId, type: 6}) : (disDetail.value.collectionNum += 1);
disDetail.value.collected = !disDetail.value.collected;
request(COMMENT_COLLECTION, { targetId: disDetail.value.discussId, type: 6 });
} }
function commentLike(obj) { function commentLike(obj) {
obj.praised ? (obj.praiseNum -= 1) : (obj.praiseNum += 1) obj.praised ? (obj.praiseNum -= 1) : (obj.praiseNum += 1);
obj.praised = !obj.praised obj.praised = !obj.praised;
request(COMMENT_PRAISE, {targetId: obj.id, type: 5}) request(COMMENT_PRAISE, { targetId: obj.id, type: 5 });
} }
function commentComment(obj) { function commentComment(obj) {
replayComment.value.placeholder = '@ ' + obj.userName replayComment.value.placeholder = "@ " + obj.userName;
replayComment.value.pid = obj.id replayComment.value.pid = obj.id;
} }
function submitComment() { function submitComment() {
request(COMMENT_ADD, {targetId: disDetail.value.discussId, content: disComment.value.content, type: 1}).then(() => { request(COMMENT_ADD, {
commonFetch() targetId: disDetail.value.discussId,
}) content: disComment.value.content,
type: 1,
}).then(() => {
commonFetch();
});
} }
function submitReplayComment() { function submitReplayComment() {
@@ -276,10 +367,10 @@ function submitReplayComment() {
targetId: disDetail.value.discussId, targetId: disDetail.value.discussId,
content: replayComment.value.content, content: replayComment.value.content,
type: 2, type: 2,
pid: replayComment.value.pid pid: replayComment.value.pid,
}).then(() => { }).then(() => {
commonFetch() commonFetch();
}) });
} }
</script> </script>
@@ -529,7 +620,7 @@ function submitReplayComment() {
.uploadAnd { .uploadAnd {
margin-top: 21px; margin-top: 21px;
.btwwo{ .btwwo {
cursor: pointer; cursor: pointer;
.image { .image {

47
src/views/examination/ExamPage.vue
View File

@@ -2,7 +2,7 @@
<div class="surveydetail"> <div class="surveydetail">
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div <div
style="display: flex; align-items: center; justify-content: space-between" style="display: flex; align-items: center; justify-content: space-between"
> >
<div class="crumb"> <div class="crumb">
<div>混合制项目</div> <div>混合制项目</div>
@@ -14,16 +14,16 @@
<div class="prevnext"> <div class="prevnext">
<div class="prev"> <div class="prev">
<img <img
style="width: 23px; height: 23px" style="width: 23px; height: 23px"
src="../../assets/image/prev.png" src="../../assets/image/prev.png"
/> />
<div style="margin-left: 7px">上一个</div> <div style="margin-left: 7px">上一个</div>
</div> </div>
<div class="prev" style="margin-left: 31px"> <div class="prev" style="margin-left: 31px">
<div style="margin-right: 7px">下一个</div> <div style="margin-right: 7px">下一个</div>
<img <img
style="width: 23px; height: 23px" style="width: 23px; height: 23px"
src="../../assets/image/next.png" src="../../assets/image/next.png"
/> />
</div> </div>
</div> </div>
@@ -37,7 +37,10 @@
<!-- 中间盒子 --> <!-- 中间盒子 -->
<div class="centercontent"> <div class="centercontent">
<div class="righttitle"> <div class="righttitle">
<img width="20px" height="20px" src="../../assets/image/yuan.png"/> <img
style="width: 20px; height: 20px"
src="../../assets/image/yuan.png"
/>
<div class="text">{{ data.examinationName }}</div> <div class="text">{{ data.examinationName }}</div>
<div class="box"></div> <div class="box"></div>
@@ -45,12 +48,15 @@
<!-- 考试测试的盒子 --> <!-- 考试测试的盒子 -->
<div class="test clearfix"> <div class="test clearfix">
<div class="detail"> <div class="detail">
<span style="margin-right: 43px">考试时间：{{ data.examinationDuration }}分钟</span> <span style="margin-right: 43px"
<span>及格线：{{data.passLine || 60}}</span> >考试时间：{{ data.examinationDuration }}分钟</span
>
<span>及格线：{{ data.passLine || 60 }}</span>
</div> </div>
<div class="testtime clearfix"> <div class="testtime clearfix">
<div class="timedetail"> <div class="timedetail">
考试时间：{{ data.examinationStartTime }} 至 {{ data.examinationEndTime }} 考试时间：{{ data.examinationStartTime }} 至
{{ data.examinationEndTime }}
</div> </div>
</div> </div>
</div> </div>
@@ -60,7 +66,10 @@
<button class="starttest" style="cursor: pointer">开始考试</button> <button class="starttest" style="cursor: pointer">开始考试</button>
<!-- 开始考试按钮 --> <!-- 开始考试按钮 -->
<div class="righttitleE"> <div class="righttitleE">
<img width="20px" height="20px" src="../../assets/image/yuan.png"/> <img
style="width: 20px; height: 20px"
src="../../assets/image/yuan.png"
/>
<div class="text">历史纪录</div> <div class="text">历史纪录</div>
<div class="box"></div> <div class="box"></div>
@@ -88,8 +97,8 @@
</div> </div>
<div class="fenge"></div> <div class="fenge"></div>
<div <div
class="historytitle2 clearfix tongyi" class="historytitle2 clearfix tongyi"
style="border-radius: 0px 0px 8px 8px" style="border-radius: 0px 0px 8px 8px"
> >
<div class="content1">2022-7-14&nbsp;00:00</div> <div class="content1">2022-7-14&nbsp;00:00</div>
<div class="content2">10分</div> <div class="content2">10分</div>
@@ -105,15 +114,15 @@
</template> </template>
<script setup> <script setup>
import { useRoute } from "vue-router/dist/vue-router";
import { usePage, useRequest } from "@/api/request";
import { COMMENT_LIST, DISCUSS_DETAIL, EXAMINATION_QUERY } from "@/api/api";
import {useRoute} from "vue-router/dist/vue-router"; const {
import {usePage, useRequest} from "@/api/request"; query: { id, discussSubmitId },
import {COMMENT_LIST, DISCUSS_DETAIL, EXAMINATION_QUERY} from "@/api/api"; } = useRoute();
const {query: {id, discussSubmitId}} = useRoute()
const {data} = useRequest(EXAMINATION_QUERY(159), {})
const { data } = useRequest(EXAMINATION_QUERY(159), {});
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

98
src/views/faceteach/FaceTeach.vue
View File

@@ -13,14 +13,18 @@
<div style="margin-left: 46px"> <div style="margin-left: 46px">
<div class="title">【面授课】{{ data.planDto?.name }}</div> <div class="title">【面授课】{{ data.planDto?.name }}</div>
<div class="time" style="margin-top: 26px"> <div class="time" style="margin-top: 26px">
<img width="15px" height="17px" src="../../assets/image/time.png"/> <img
<div style="margin-left: 8px">{{ data.offcourseDto?.publishTime }}</div> style="width: 15px; height: 17px"
src="../../assets/image/time.png"
/>
<div style="margin-left: 8px">
{{ data.offcourseDto?.publishTime }}
</div>
</div> </div>
<div class="time" style="margin-top: 23px"> <div class="time" style="margin-top: 23px">
<img <img
width="16px" style="width: 16px; height: 18px"
height="18px" src="../../assets/image/position.png"
src="../../assets/image/position.png"
/> />
<div style="margin-left: 8px">{{ data.planDto?.address }}</div> <div style="margin-left: 8px">{{ data.planDto?.address }}</div>
</div> </div>
@@ -36,9 +40,8 @@
<div class="" style="margin-left: 48px; margin-right: 48px"> <div class="" style="margin-left: 48px; margin-right: 48px">
<div class="title"> <div class="title">
<img <img
width="20px" style="width: 20px; height: 20px"
height="20px" src="../../assets/image/course.png"
src="../../assets/image/course.png"
/> />
<div class="text">课程详情</div> <div class="text">课程详情</div>
<div class="box"></div> <div class="box"></div>
@@ -52,21 +55,27 @@
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="课程附件" name="first"> <el-tab-pane label="课程附件" name="first">
<div <div
v-for="(el, index) in data.planDto?.attach.split(',')" v-for="(el, index) in data.planDto?.attach.split(',')"
:key="index" :key="index"
v-if="data.planDto" v-if="data.planDto"
class="enclosure" class="enclosure"
:style="{borderBottom: '1px solid rgba(56, 125, 247, 0.2)' }" :style="{ borderBottom: '1px solid rgba(56, 125, 247, 0.2)' }"
> >
<div class="enclosureL"> <div class="enclosureL">
<FileTypeImg v-model="data.planDto.attach.split(',')[index]" <FileTypeImg
:style="{width:'22px',height:'26px',marginLeft:'10px'}"></FileTypeImg> v-model="data.planDto.attach.split(',')[index]"
:style="{
width: '22px',
height: '26px',
marginLeft: '10px',
}"
></FileTypeImg>
<div style="margin-left: 20px">{{ el }}</div> <div style="margin-left: 20px">{{ el }}</div>
</div> </div>
<div class="download"> <div class="download">
<img <img
style="width: 16px; height: 15px" style="width: 16px; height: 15px"
src="../../assets/image/download.png" src="../../assets/image/download.png"
/> />
<div style="margin-left: 5px" @click="download(el)">下载</div> <div style="margin-left: 5px" @click="download(el)">下载</div>
</div> </div>
@@ -81,7 +90,13 @@
<div class="tag3" style="margin-left: 11px">作业</div> <div class="tag3" style="margin-left: 11px">作业</div>
</div> </div>
</div> </div>
<div class="submit" @click="toWork(data.workDto)" v-if="!data.workDto.workId">提交</div> <div
class="submit"
@click="toWork(data.workDto)"
v-if="!data.workDto.workId"
>
提交
</div>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="课程考试" name="third"> <el-tab-pane label="课程考试" name="third">
@@ -91,11 +106,18 @@
{{ data.examinationDto?.examinationTestName }} {{ data.examinationDto?.examinationTestName }}
</div> </div>
<div style="margin-top: 16px; display: flex"> <div style="margin-top: 16px; display: flex">
<div class="tag1" v-if="data.examinationDto?.examinationFlag">必修</div> <div
class="tag1"
v-if="data.examinationDto?.examinationFlag"
>
必修
</div>
<div class="tag3" style="margin-left: 11px">考试</div> <div class="tag3" style="margin-left: 11px">考试</div>
</div> </div>
</div> </div>
<div class="submit" @click="toExamItem(data.examinationDto)">去考试</div> <div class="submit" @click="toExamItem(data.examinationDto)">
去考试
</div>
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
@@ -104,15 +126,15 @@
<div class="teacher"> <div class="teacher">
<div class="title"> <div class="title">
<img <img
style="width: 21px; height: 23px" style="width: 21px; height: 23px"
src="../../assets/image/livelecturer.png" src="../../assets/image/livelecturer.png"
/> />
<div class="text">直播讲师</div> <div class="text">直播讲师</div>
<div class="box"></div> <div class="box"></div>
</div> </div>
<!-- todo #面授课接口 讲师缺少img和介绍--> <!-- todo #面授课接口 讲师缺少img和介绍-->
<div class="teacheritem"> <div class="teacheritem">
<img class="peopleimg" :src="data.planDto?.avatar"/> <img class="peopleimg" :src="data.planDto?.avatar" />
<div style="margin-left: 17px; width: 190px"> <div style="margin-left: 17px; width: 190px">
<div class="teacherName" style="margin-right: 5px"> <div class="teacherName" style="margin-right: 5px">
{{ data.planDto?.teacher }} {{ data.planDto?.teacher }}
@@ -128,34 +150,36 @@
</template> </template>
<script setup> <script setup>
import {reactive, toRefs, watch} from "vue"; import { reactive, toRefs, watch } from "vue";
import FileTypeImg from "@/components/FileTypeImg.vue"; import FileTypeImg from "@/components/FileTypeImg.vue";
import {request, useRequest} from "@/api/request"; import { request, useRequest } from "@/api/request";
import {STU_OFFCOURSE_DETAIL} from "@/api/api"; import { STU_OFFCOURSE_DETAIL } from "@/api/api";
import {useRoute, useRouter} from "vue-router"; import { useRoute, useRouter } from "vue-router";
const router = useRouter() const router = useRouter();
const {query: {courseId}} = useRoute() const {
query: { courseId },
} = useRoute();
const {data} = useRequest(STU_OFFCOURSE_DETAIL, {courseId}) const { data } = useRequest(STU_OFFCOURSE_DETAIL, { courseId });
const state = reactive({ const state = reactive({
activeName: "first", activeName: "first",
enclosure: '' enclosure: "",
}) });
const {activeName, enclosure} = toRefs(state) const { activeName, enclosure } = toRefs(state);
const handleClick = (tab, event) => { const handleClick = (tab, event) => {
console.log(tab, event); console.log(tab, event);
}; };
const download = (url) => { const download = (url) => {
window.open(url) window.open(url);
} };
function toWork(obj) { function toWork(obj) {
router.push({path: '/homeworkpage', query: {id: obj.courseId}}) router.push({ path: "/homeworkpage", query: { id: obj.courseId } });
} }
function toExamItem(obj) { function toExamItem(obj) {
router.push({path: '/starttest', query: {id: obj.courseId}}) router.push({ path: "/starttest", query: { id: obj.courseId } });
} }
</script> </script>

220
src/views/homework/HomeworkPage.vue
View File

@@ -24,7 +24,7 @@
<div class="detail"> <div class="detail">
<div class="detailT"> <div class="detailT">
<div <div
style=" style="
margin-left: 45px; margin-left: 45px;
margin-right: 42px; margin-right: 42px;
position: relative; position: relative;
@@ -33,9 +33,8 @@
> >
<div class="title"> <div class="title">
<img <img
width="20px" style="width: 20px; height: 20px"
height="20px" src="../../assets/image/yuan.png"
src="../../assets/image/yuan.png"
/> />
<div class="text">作业名称</div> <div class="text">作业名称</div>
<div class="box"></div> <div class="box"></div>
@@ -49,59 +48,73 @@
</div> </div>
<UploadImg v-model="fileList" ref="uploadRef"> <UploadImg v-model="fileList" ref="uploadRef">
<button <button
class="shangchuan" class="shangchuan"
style="cursor: pointer" style="cursor: pointer"
@mousemove='showFileList=1' @mousemove="showFileList = 1"
@mouseout='showFileList=0' @mouseout="showFileList = 0"
> >
上传 上传
</button> </button>
</UploadImg> </UploadImg>
<div <div
class="uploadDetail" class="uploadDetail"
:style="{ display: showFileList ? 'block' : 'none' }" :style="{ display: showFileList ? 'block' : 'none' }"
@mousemove='showFileList=1' @mousemove="showFileList = 1"
@mouseout='showFileList=0' @mouseout="showFileList = 0"
style="padding-top: 60px" style="padding-top: 60px"
> >
<div class="triangle"></div> <div class="triangle"></div>
<div class="square clearfix"> <div class="square clearfix">
<div class="squarecontent1" v-for="(file,i) in fileList"> <div
<FileTypeImg v-model="file.name" :style="{margin:'12px 15px 0 27px'}"></FileTypeImg> class="squarecontent1"
v-for="(file, i) in fileList"
:key="i"
>
<FileTypeImg
v-model="file.name"
:style="{ margin: '12px 15px 0 27px' }"
></FileTypeImg>
<div class="rarDetail"> <div class="rarDetail">
<span class="detail1" style="margin-right: 130px"> <span class="detail1" style="margin-right: 130px">
{{ file.name }} {{ file.name }}
</span> </span>
<span class="detail2" style="margin-right: 10px">{{ file.percentage }}%</span> <span class="detail2" style="margin-right: 10px"
>{{ file.percentage }}%</span
>
<span class="detail1">{{ <span class="detail1">{{
{ {
ready: '正在上传', ready: "正在上传",
abort: '暂停', abort: "暂停",
uploading: '正在上传', uploading: "正在上传",
fail: '上传失败', fail: "上传失败",
success: '上传成功' success: "上传成功",
}[file.status] }[file.status]
}}</span> }}</span>
<div class="progress"> <div class="progress">
<div class="progressinner" :style="{width:`${291*file.percentage/100}px`}"></div> <div
class="progressinner"
:style="{ width: `${(291 * file.percentage) / 100}px` }"
></div>
</div> </div>
</div> </div>
<button class="btn btndetail" @click="reUpload(i)">{{ <button class="btn btndetail" @click="reUpload(i)">
{{
{ {
ready: '暂停', ready: "暂停",
uploading: '暂停', uploading: "暂停",
abort: '开始', abort: "开始",
fail: '重传', fail: "重传",
}[file.status] }[file.status]
}} }}
</button> </button>
<button class="btn" @click="remove">{{ <button class="btn" @click="remove">
{{
{ {
ready: '取消', ready: "取消",
abort: '取消', abort: "取消",
uploading: '取消', uploading: "取消",
fail: '取消', fail: "取消",
success: '删除' success: "删除",
}[file.status] }[file.status]
}} }}
</button> </button>
@@ -111,8 +124,8 @@
<div class="title"> <div class="title">
<img <img
style="width: 20px; height: 20px" style="width: 20px; height: 20px"
src="../../assets/image/yuan.png" src="../../assets/image/yuan.png"
/> />
<div class="text">作业内容</div> <div class="text">作业内容</div>
<div class="box"></div> <div class="box"></div>
@@ -120,11 +133,11 @@
<div class="join"> <div class="join">
<el-input <el-input
v-model="textarea1" v-model="textarea1"
:autosize="{ minRows: 12.5, maxRows: 12.5 }" :autosize="{ minRows: 12.5, maxRows: 12.5 }"
resize="none" resize="none"
type="textarea" type="textarea"
@input="textareaInput" @input="textareaInput"
/> />
</div> </div>
<div style="display: flex; justify-content: center"> <div style="display: flex; justify-content: center">
@@ -135,9 +148,8 @@
<div class="title" style="margin-top: 0px"> <div class="title" style="margin-top: 0px">
<img <img
width="20px" style="width: 20px; height: 20px"
height="20px" src="../../assets/image/yuan.png"
src="../../assets/image/yuan.png"
/> />
<div class="text">历史纪录</div> <div class="text">历史纪录</div>
<div class="box"></div> <div class="box"></div>
@@ -149,10 +161,10 @@
<div class="content2">作业内容</div> <div class="content2">作业内容</div>
</div> </div>
<div <div
v-for="(value, index) in submitList" v-for="(value, index) in submitList"
:key="index" :key="index"
class="historytitle2" class="historytitle2"
:style="{ :style="{
'border-bottom': 'border-bottom':
index === submitList.length - 1 index === submitList.length - 1
? '1px solid rgba(215, 229, 253, 0)' ? '1px solid rgba(215, 229, 253, 0)'
@@ -162,7 +174,7 @@
<div class="content1">{{ value.createTime }}</div> <div class="content1">{{ value.createTime }}</div>
<div class="content2"> <div class="content2">
<div <div
style=" style="
width: 95%; width: 95%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -179,7 +191,10 @@
</div> </div>
<div class="right"> <div class="right">
<div class="righttitle"> <div class="righttitle">
<img width="20px" height="20px" src="../../assets/image/yuan.png"/> <img
style="width: 20px; height: 20px"
src="../../assets/image/yuan.png"
/>
<div class="text">截止时间</div> <div class="text">截止时间</div>
<div class="box"></div> <div class="box"></div>
</div> </div>
@@ -187,28 +202,41 @@
<div class="innertime"> <div class="innertime">
{{ {{
data?.submitStartTime data?.submitStartTime
}}&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;{{ data?.submitEndTime }} }}&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;{{
data?.submitEndTime
}}
</div> </div>
<div class="endtime clearfix"> <div class="endtime clearfix">
<div class="endtimetext"> <div class="endtimetext">
距离结束还有&nbsp;&nbsp; 距离结束还有&nbsp;&nbsp;
<span class="te">{{ parseInt(dayjs(data?.submitEndTime).diff(dayjs(), 'minute') / 60) }}</span>&nbsp;&nbsp; <span class="te">{{
小时&nbsp;&nbsp;<span parseInt(
class="te" dayjs(data?.submitEndTime).diff(dayjs(), "minute") / 60
>{{ dayjs(data?.submitEndTime).diff(dayjs(), 'minute') % 60 }}</span )
>&nbsp;&nbsp;分钟 }}</span
>&nbsp;&nbsp; 小时&nbsp;&nbsp;<span class="te">{{
dayjs(data?.submitEndTime).diff(dayjs(), "minute") % 60
}}</span
>&nbsp;&nbsp;分钟
</div> </div>
</div> </div>
</div> </div>
<div class="righttitle"> <div class="righttitle">
<img width="20px" height="20px" src="../../assets/image/yuan.png"/> <img
style="width: 20px; height: 20px"
src="../../assets/image/yuan.png"
/>
<div class="text">作业说明</div> <div class="text">作业说明</div>
<div class="box"></div> <div class="box"></div>
</div> </div>
<div class="explain clearfix"> <div class="explain clearfix">
<!-- todo #作业任务详情 作业说明是作业要求字段么？--> <!-- todo #作业任务详情 作业说明是作业要求字段么？-->
<div class="explain1" style="margin-top: 26px" v-html="data?.workRequirement"></div> <div
class="explain1"
style="margin-top: 26px"
v-html="data?.workRequirement"
></div>
</div> </div>
</div> </div>
</div> </div>
@@ -217,46 +245,56 @@
</template> </template>
<script setup> <script setup>
import {reactive, ref, toRefs} from "vue"; import { reactive, ref, toRefs } from "vue";
import {request, useRequest} from "@/api/request"; import { request, useRequest } from "@/api/request";
import {TASK_WORK_COMMIT, TASK_WORK_DETAIL, TASK_WORK_SUBMIT_LIST, WORK_HISTROY} from "@/api/api"; import {
TASK_WORK_COMMIT,
TASK_WORK_DETAIL,
TASK_WORK_SUBMIT_LIST,
WORK_HISTROY,
} from "@/api/api";
import dayjs from "dayjs"; import dayjs from "dayjs";
import {useRouter} from "vue-router"; import { useRouter } from "vue-router";
import UploadImg from '@/components/img/UploadImg.vue' import UploadImg from "@/components/img/UploadImg.vue";
import FileTypeImg from "@/components/FileTypeImg.vue"; import FileTypeImg from "@/components/FileTypeImg.vue";
import {useRoute} from "vue-router/dist/vue-router"; import { useRoute } from "vue-router/dist/vue-router";
const fileList = ref([]);
const fileList = ref([]) const uploadRef = ref();
const uploadRef = ref() const showFileList = ref(0);
const showFileList = ref(0)
const state = reactive({ const state = reactive({
textarea1: "", textarea1: "",
}) });
const {textarea1} = toRefs(state); const { textarea1 } = toRefs(state);
const router = useRouter() const router = useRouter();
const {query: {courseId:workId,type}} = useRoute() const {
query: { courseId: workId, type },
} = useRoute();
const {data} = useRequest(TASK_WORK_DETAIL, {workId}) const { data } = useRequest(TASK_WORK_DETAIL, { workId });
const {data: submitList} = useRequest(TASK_WORK_SUBMIT_LIST, {workId}) const { data: submitList } = useRequest(TASK_WORK_SUBMIT_LIST, { workId });
const handleClick = () => { const handleClick = () => {
request(TASK_WORK_COMMIT, {projectOrRouterLogo: type, workUploadContent: textarea1.value, workId}).then(res => { request(TASK_WORK_COMMIT, {
submitList.value.unshift(res.data) projectOrRouterLogo: type,
}) workUploadContent: textarea1.value,
textarea1.value='' workId,
}).then((res) => {
submitList.value.unshift(res.data);
});
textarea1.value = "";
}; };
const textareaInput = (e) => { const textareaInput = (e) => {
state.textarea1 = e; state.textarea1 = e;
}; };
function remove(i) { function remove(i) {
uploadRef.value.remove(i) uploadRef.value.remove(i);
} }
function reUpload(i) { function reUpload(i) {
uploadRef.value.reUpload(i) uploadRef.value.reUpload(i);
} }
</script> </script>
@@ -662,25 +700,25 @@ function reUpload(i) {
.allbox1 { .allbox1 {
background: linear-gradient( background: linear-gradient(
0deg, 0deg,
rgba(160, 193, 230, 0) 0%, rgba(160, 193, 230, 0) 0%,
rgba(161, 195, 231, 0.2) 100% rgba(161, 195, 231, 0.2) 100%
); );
} }
.allbox2 { .allbox2 {
background: linear-gradient( background: linear-gradient(
0deg, 0deg,
rgba(177, 219, 229, 0) 0%, rgba(177, 219, 229, 0) 0%,
rgba(172, 216, 227, 0.2) 100% rgba(172, 216, 227, 0.2) 100%
); );
} }
.allbox3 { .allbox3 {
background: linear-gradient( background: linear-gradient(
0deg, 0deg,
rgba(195, 209, 234, 0) 0%, rgba(195, 209, 234, 0) 0%,
rgba(191, 206, 231, 0.2) 100% rgba(191, 206, 231, 0.2) 100%
); );
} }

123
src/views/liveBroadcast/LiveBroadcast.vue
View File

@@ -22,23 +22,38 @@
<div style="margin-left: 46px"> <div style="margin-left: 46px">
<div class="title">【直播】{{ data?.liveName }}</div> <div class="title">【直播】{{ data?.liveName }}</div>
<div class="time" style="margin-top: 26px"> <div class="time" style="margin-top: 26px">
<img width="15px" height="17px" src="../../assets/image/time.png"/> <img
style="width: 15px; height: 17px"
src="../../assets/image/time.png"
/>
<div style="margin-left: 8px">{{ data?.liveStartTime }}</div> <div style="margin-left: 8px">{{ data?.liveStartTime }}</div>
</div> </div>
<div class="time" style="margin-top: 23px"> <div class="time" style="margin-top: 23px">
<img <img
width="16px" style="width: 16px; height: 18px"
height="18px" src="../../assets/image/position.png"
src="../../assets/image/position.png"
/> />
<!-- todo #直播详情 没有位置字段--> <!-- todo #直播详情 没有位置字段-->
<div style="margin-left: 8px">大族广场</div> <div style="margin-left: 8px">大族广场</div>
</div> </div>
</div> </div>
<div class="threeBtn"> <div class="threeBtn">
<botton class="btn" style="background: rgb(59, 191, 252)" @click="commitClick">观看</botton> <botton
<botton class="btn" style="background: rgb(57, 146, 249)" @click="signClick" v-if="!data.signFlag">签到</botton> class="btn"
<botton class="btn" @click="commitClick" v-if="!data.evalFlag">评估</botton> style="background: rgb(59, 191, 252)"
@click="commitClick"
>观看</botton
>
<botton
class="btn"
style="background: rgb(57, 146, 249)"
@click="signClick"
v-if="!data.signFlag"
>签到</botton
>
<botton class="btn" @click="commitClick" v-if="!data.evalFlag"
>评估</botton
>
</div> </div>
</div> </div>
<!-- 基本信息 --> <!-- 基本信息 -->
@@ -50,9 +65,8 @@
<div class="" style="margin-left: 48px; margin-right: 48px"> <div class="" style="margin-left: 48px; margin-right: 48px">
<div class="title"> <div class="title">
<img <img
width="20px" style="width: 20px; height: 20px"
height="20px" src="../../assets/image/course.png"
src="../../assets/image/course.png"
/> />
<div class="text">课前预习</div> <div class="text">课前预习</div>
<div class="box"></div> <div class="box"></div>
@@ -60,22 +74,21 @@
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<!-- todo #直播 没有课前预习字段--> <!-- todo #直播 没有课前预习字段-->
<div class="content"> <div class="content">
通过对各级人员的软件平台培训，使其能够了解如何运用乾元坤和智能信息管理系统来提升企业管理水平，最大限度发挥软件产品在企业中的作用;<br/> 通过对各级人员的软件平台培训，使其能够了解如何运用乾元坤和智能信息管理系统来提升企业管理水平，最大限度发挥软件产品在企业中的作用;<br />
● 培训目标 ● 培训目标
<br/>1.使企业不同部门人员掌握便捷、有效的系统平台操作方法;<br/> <br />1.使企业不同部门人员掌握便捷、有效的系统平台操作方法;<br />
2.通过系统平台的培训提高员工对企业的管理理念认识与提升。<br/> 2.通过系统平台的培训提高员工对企业的管理理念认识与提升。<br />
3.通过系统平台培训加强沟通，统一部署，协同工作，提高效率。 3.通过系统平台培训加强沟通，统一部署，协同工作，提高效率。
<br/> <br />
●培训对象<br/> ●培训对象<br />
集团领导、各相关部门领导、总经理、车间主管、车间操作员等;<br/> 集团领导、各相关部门领导、总经理、车间主管、车间操作员等;<br />
</div> </div>
</div> </div>
<div class="title"> <div class="title">
<img <img
width="20px" style="width: 20px; height: 20px"
height="20px" src="../../assets/image/write.png"
src="../../assets/image/write.png"
/> />
<!-- todo #直播 课后作业--> <!-- todo #直播 课后作业-->
<div class="text">课后作业</div> <div class="text">课后作业</div>
@@ -84,9 +97,9 @@
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<div class="content"> <div class="content">
<span style="font-weight: 600" <span style="font-weight: 600"
>网易有道词典现有功能结构拆解+问题分析</span >网易有道词典现有功能结构拆解+问题分析</span
><br/> ><br />
查找资料，介绍一种国外（日本、美国、欧洲）道路（公路、铁路、城市道路、地铁）设计规范的演变过程，可以一种或几种主要技术指标为例，并说明其原因。<br/> 查找资料，介绍一种国外（日本、美国、欧洲）道路（公路、铁路、城市道路、地铁）设计规范的演变过程，可以一种或几种主要技术指标为例，并说明其原因。<br />
</div> </div>
</div> </div>
</div> </div>
@@ -96,8 +109,8 @@
<div class="tell"> <div class="tell">
<div class="title"> <div class="title">
<img <img
style="width: 21px; height: 23px" style="width: 21px; height: 23px"
src="../../assets/image/tv.png" src="../../assets/image/tv.png"
/> />
<div class="text">直播公告</div> <div class="text">直播公告</div>
<div class="box"></div> <div class="box"></div>
@@ -107,25 +120,25 @@
<div class="teacher"> <div class="teacher">
<div class="title"> <div class="title">
<img <img
style="width: 21px; height: 23px" style="width: 21px; height: 23px"
src="../../assets/image/livelecturer.png" src="../../assets/image/livelecturer.png"
/> />
<!-- todo #直播详情 没有直播讲师--> <!-- todo #直播详情 没有直播讲师-->
<div class="text">直播讲师</div> <div class="text">直播讲师</div>
<div class="box"></div> <div class="box"></div>
</div> </div>
<div <div
v-for="(el, index) in teacher" v-for="(el, index) in teacher"
:key="el.id" :key="el.id"
class="teacheritem" class="teacheritem"
:style="{ :style="{
'border-bottom': 'border-bottom':
index === teacher.length - 1 index === teacher.length - 1
? null ? null
: '1px solid rgba(56, 125, 247, 0.2)', : '1px solid rgba(56, 125, 247, 0.2)',
}" }"
> >
<img class="peopleimg" :src="el.peopleimg"/> <img class="peopleimg" :src="el.peopleimg" />
<div style="margin-left: 17px; width: 190px"> <div style="margin-left: 17px; width: 190px">
<div class="teacherName" style="margin-right: 5px"> <div class="teacherName" style="margin-right: 5px">
{{ data.userInfoBo?.userName }} {{ data.userInfoBo?.userName }}
@@ -142,15 +155,21 @@
</template> </template>
<script setup> <script setup>
import {reactive, toRefs} from "vue"; import { reactive, toRefs } from "vue";
import img from '@/assets/image/uploadimg.png' import img from "@/assets/image/uploadimg.png";
import {request, useRequest} from "@/api/request"; import { request, useRequest } from "@/api/request";
import {TASK_BROADCAST_COMMIT, TASK_BROADCAST_DETAIL, TASK_BROADCAST_SIGN} from "@/api/api"; import {
import {useRoute} from "vue-router/dist/vue-router"; TASK_BROADCAST_COMMIT,
TASK_BROADCAST_DETAIL,
TASK_BROADCAST_SIGN,
} from "@/api/api";
import { useRoute } from "vue-router/dist/vue-router";
const {query: {courseId: liveId}} = useRoute() const {
query: { courseId: liveId },
} = useRoute();
const {data} = useRequest(TASK_BROADCAST_DETAIL, {liveId}) const { data } = useRequest(TASK_BROADCAST_DETAIL, { liveId });
const state = reactive({ const state = reactive({
activeName: "first", activeName: "first",
teacher: [ teacher: [
@@ -158,27 +177,25 @@ const state = reactive({
id: 1, id: 1,
name: "王星天（显示事业）", name: "王星天（显示事业）",
introduce: introduce:
"教师是学生的镜子,学生是老师的影子。教师是学生的镜子,学生是老师的影子。教师是学生的镜子,学生是老师的影子。", "教师是学生的镜子,学生是老师的影子。教师是学生的镜子,学生是老师的影子。教师是学生的镜子,学生是老师的影子。",
peopleimg: img, peopleimg: img,
}, },
], ],
}); });
const {activeName, teacher} = toRefs(state) const { activeName, teacher } = toRefs(state);
const signClick = (id) => { const signClick = (id) => {
request(TASK_BROADCAST_SIGN, {id}).then(() => { request(TASK_BROADCAST_SIGN, { id }).then(() => {
console.log(data.value) console.log(data.value);
data.value.signFlag = 1 data.value.signFlag = 1;
}) });
}; };
const commitClick = (id) => { const commitClick = (id) => {
request(TASK_BROADCAST_COMMIT, {id}).then(() => { request(TASK_BROADCAST_COMMIT, { id }).then(() => {
data.value.evalFlag = 1 data.value.evalFlag = 1;
}) });
}; };
function showClick() { function showClick() {}
}
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
@@ -465,9 +482,9 @@ function showClick() {
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
border-radius: 8px; border-radius: 8px;
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
rgba(36, 120, 255, 0.15) 0%, rgba(36, 120, 255, 0.15) 0%,
rgba(255, 255, 255) 50% rgba(255, 255, 255) 50%
); );
.title { .title {

5
src/views/starttest/StartTest.vue
View File

@@ -8,7 +8,10 @@
<!-- 中间盒子 --> <!-- 中间盒子 -->
<div class="middle clearfix"> <div class="middle clearfix">
<div class="righttitle"> <div class="righttitle">
<img width="20px" height="20px" src="../../assets/image/yuan.png" /> <img
style="width: 20px; height: 20px"
src="../../assets/image/yuan.png"
/>
<div class="text">阶段性考试</div> <div class="text">阶段性考试</div>
<div class="box"></div> <div class="box"></div>

139
src/views/survey/SurveyDetail.vue
View File

@@ -2,7 +2,7 @@
<div class="surveydetail"> <div class="surveydetail">
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div <div
style="display: flex; align-items: center; justify-content: space-between" style="display: flex; align-items: center; justify-content: space-between"
> >
<div class="crumb"> <div class="crumb">
<div>混合制项目</div> <div>混合制项目</div>
@@ -14,16 +14,16 @@
<div class="prevnext"> <div class="prevnext">
<div class="prev"> <div class="prev">
<img <img
style="width: 23px; height: 23px" style="width: 23px; height: 23px"
src="../../assets/image/prev.png" src="../../assets/image/prev.png"
/> />
<div style="margin-left: 7px">上一个</div> <div style="margin-left: 7px">上一个</div>
</div> </div>
<div class="prev" style="margin-left: 31px"> <div class="prev" style="margin-left: 31px">
<div style="margin-right: 7px">下一个</div> <div style="margin-right: 7px">下一个</div>
<img <img
style="width: 23px; height: 23px" style="width: 23px; height: 23px"
src="../../assets/image/next.png" src="../../assets/image/next.png"
/> />
</div> </div>
</div> </div>
@@ -36,20 +36,23 @@
<div class="bascinfo"> <div class="bascinfo">
<div> <div>
<div <div
class="question" class="question"
v-for="(value, index) in data.scoringQuestionVoList" v-for="(value, index) in data.scoringQuestionVoList"
:key="index" :key="index"
:style="{ 'margin-top': index === 0 ? '57px' : '41px' }" :style="{ 'margin-top': index === 0 ? '57px' : '41px' }"
> >
<div class="text">{{ value.assessmentScTitle }}</div> <div class="text">{{ value.assessmentScTitle }}</div>
<div class="answer"> <div class="answer">
<div class="answerL">完全没用</div> <div class="answerL">完全没用</div>
<div class="answerC"> <div class="answerC">
<div <div
class="answerCitem" class="answerCitem"
v-for="(item, key) in Array.from({length:value.assessmentMaxScore},(k,i)=>i)" v-for="(item, key) in Array.from(
:key="key" { length: value.assessmentMaxScore },
:style="{ (k, i) => i
)"
:key="key"
:style="{
'margin-left': key === 0 ? '15px' : '10px', 'margin-left': key === 0 ? '15px' : '10px',
background: background:
value.selectAnswer === item value.selectAnswer === item
@@ -60,7 +63,11 @@
? '#fff' ? '#fff'
: 'rgba(86, 163, 249, 1)', : 'rgba(86, 163, 249, 1)',
}" }"
@click="()=>{value.selectAnswer=item}" @click="
() => {
value.selectAnswer = item;
}
"
> >
<div>{{ item + 1 }}</div> <div>{{ item + 1 }}</div>
</div> </div>
@@ -68,45 +75,76 @@
<div class="answerR">非常有帮助/启发</div> <div class="answerR">非常有帮助/启发</div>
</div> </div>
</div> </div>
<div class="question" style="margin-top: 41px" v-for="(item,i) in data.singleStemVoList" :key="i"> <div
class="question"
style="margin-top: 41px"
v-for="(item, i) in data.singleStemVoList"
:key="i"
>
<div class="text">{{ item.singleStemName }}</div> <div class="text">{{ item.singleStemName }}</div>
<div <div
v-for="(value, index) in item.assessmentSingleChoiceVoList" v-for="(value, index) in item.assessmentSingleChoiceVoList"
:key="index" :key="index"
style="display: flex; align-items: center" style="display: flex; align-items: center"
:style="{ 'margin-top': index === 0 ? '29px' : '22px' ,cursor:'pointer'}" :style="{
@click="()=>{ 'margin-top': index === 0 ? '29px' : '22px',
item.assessmentSingleChoiceVoList.forEach(e=>{e.select = false}); cursor: 'pointer',
value.select=true; }"
}" @click="
() => {
item.assessmentSingleChoiceVoList.forEach((e) => {
e.select = false;
});
value.select = true;
}
"
> >
<img style="width: 19px; height: 18px; cursor: pointer" :src=" value.select? checkbox: checkbox2"/> <img
style="width: 19px; height: 18px; cursor: pointer"
:src="value.select ? checkbox : checkbox2"
/>
<div class="people">{{ value.singleOptionName }}</div> <div class="people">{{ value.singleOptionName }}</div>
</div> </div>
</div> </div>
<div class="question" style="margin-top: 41px" v-for="(item,i) in data.multipleStemVoList" :key="i"> <div
class="question"
style="margin-top: 41px"
v-for="(item, i) in data.multipleStemVoList"
:key="i"
>
<div class="text">{{ item.multipleStemName }}</div> <div class="text">{{ item.multipleStemName }}</div>
<div <div
v-for="(value, index) in item.multipleChoiceVoList" v-for="(value, index) in item.multipleChoiceVoList"
:key="index" :key="index"
style="display: flex; align-items: center" style="display: flex; align-items: center"
:style="{ 'margin-top': index === 0 ? '29px' : '22px' ,cursor:'pointer'}" :style="{
@click="()=>value.select=!value.select" 'margin-top': index === 0 ? '29px' : '22px',
cursor: 'pointer',
}"
@click="() => (value.select = !value.select)"
> >
<img style="width: 19px; height: 18px; cursor: pointer" :src="value.select? checkbox: checkbox2"/> <img
style="width: 19px; height: 18px; cursor: pointer"
:src="value.select ? checkbox : checkbox2"
/>
<div class="people">{{ value.multipleOptionName }}</div> <div class="people">{{ value.multipleOptionName }}</div>
</div> </div>
</div> </div>
<div class="question" style="margin-top: 41px" v-for="(item,i) in data.essayQuestionVoList"> <div
class="question"
style="margin-top: 41px"
v-for="(item, i) in data.essayQuestionVoList"
:key="i"
>
<div class="text">{{ item.assessmentQaTitle }}</div> <div class="text">{{ item.assessmentQaTitle }}</div>
<div style="width: 713px; margin-top: 31px; position: relative"> <div style="width: 713px; margin-top: 31px; position: relative">
<el-input <el-input
v-model="item.content" v-model="item.content"
:autosize="{ minRows: 5, maxRows: 5 }" :autosize="{ minRows: 5, maxRows: 5 }"
resize="none" resize="none"
maxlength="200" maxlength="200"
type="textarea" type="textarea"
/> />
<div class="words">{{ item.content?.length || 0 }}/200</div> <div class="words">{{ item.content?.length || 0 }}/200</div>
</div> </div>
@@ -121,23 +159,28 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import checkbox from '@/assets/image/checkbox.png' import checkbox from "@/assets/image/checkbox.png";
import checkbox2 from '@/assets/image/checkbox2.png' import checkbox2 from "@/assets/image/checkbox2.png";
import {useRoute} from "vue-router/dist/vue-router"; import { useRoute } from "vue-router/dist/vue-router";
import {request, usePage, useRequest} from "@/api/request"; import { request, usePage, useRequest } from "@/api/request";
import {ASSESSMENT_QUERY, ASSESSMENT_SUBMIT, COMMENT_LIST, DISCUSS_DETAIL} from "@/api/api"; import {
ASSESSMENT_QUERY,
ASSESSMENT_SUBMIT,
COMMENT_LIST,
DISCUSS_DETAIL,
} from "@/api/api";
const {query: {courseId}} = useRoute() const {
query: { courseId },
} = useRoute();
const { data } = useRequest(ASSESSMENT_QUERY(courseId), {});
const {data} = useRequest(ASSESSMENT_QUERY(courseId), {})
function submit() { function submit() {
request(ASSESSMENT_SUBMIT, data).then(() => { request(ASSESSMENT_SUBMIT, data).then(() => {
console.log('提交成功') console.log("提交成功");
}) });
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.surveydetail { .surveydetail {