|
@@ -0,0 +1,225 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="timeline-container">
|
|
|
|
+ <div class="timeline-content">
|
|
|
|
+ <div class="timeline-entry-list">
|
|
|
|
+ <div class="article">
|
|
|
|
+ <div class="article-title">
|
|
|
|
+ {{ data.title }}
|
|
|
|
+ </div>
|
|
|
|
+ <div class="author-info-block">
|
|
|
|
+ <div class="meta-box">
|
|
|
|
+ {{ data.createTime }}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="quesList">
|
|
|
|
+ <div class="listItem" v-for="(item, index) in dataList" :key="index">
|
|
|
|
+ <div v-if="item.type == 'SCQ'">
|
|
|
|
+ <div class="itemTitle">{{ index + 1 }}. {{ item.description }}(单选)</div>
|
|
|
|
+ <el-radio-group v-model="item.comment">
|
|
|
|
+ <el-radio :disabled="data.interactUserStatus == null?false:true" v-for="(childItem, childIndex) in item.options" :key="childIndex"
|
|
|
|
+ :label="childItem.id">{{ childItem.name }}</el-radio>
|
|
|
|
+ </el-radio-group>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div v-if="item.type == 'MCQ'">
|
|
|
|
+ <div class="itemTitle">{{ index + 1 }}. {{ item.description }}(多选)</div>
|
|
|
|
+ <el-checkbox-group v-model="item.comment">
|
|
|
|
+ <el-checkbox :disabled="data.interactUserStatus == null?false:true" v-for="(childItem, childIndex) in item.options" :key="childIndex"
|
|
|
|
+ :label="childItem.id">{{ childItem.name }}</el-checkbox>
|
|
|
|
+ </el-checkbox-group>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-if="item.type == 'SAQ'">
|
|
|
|
+ <div class="itemTitle">{{ index + 1 }}. {{ item.description }}(问答)</div>
|
|
|
|
+ <el-input :disabled="data.interactUserStatus == null?false:true" type="textarea" :rows="4" placeholder="请输入内容" v-model="item.comment"></el-input>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-if="data.interactUserStatus == null" class="footBut">
|
|
|
|
+ <el-button style="width: 200px;" type="primary" @click="save()">提交</el-button>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <SiderInfo></SiderInfo>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+<script>
|
|
|
|
+import { postInteractInfo, useInfo, postInteractSave } from "@/api/allApi";
|
|
|
|
+import SiderInfo from '@/components/SiderInfo.vue'
|
|
|
|
+export default {
|
|
|
|
+ components: {
|
|
|
|
+ SiderInfo
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ data: {
|
|
|
|
+ postId: 1,
|
|
|
|
+ questionsList: [
|
|
|
|
+ {
|
|
|
|
+ optionIds: '',
|
|
|
|
+ answer: '',
|
|
|
|
+ questionId: ''
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ },
|
|
|
|
+ dataList: [],
|
|
|
|
+ dataInfo: {},
|
|
|
|
+ avatarUrl: "",
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ this.getUserInfo();
|
|
|
|
+ this.getDataInfo(this.$route.query.id);
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ save() {
|
|
|
|
+ console.log(this.dataList);
|
|
|
|
+ let dataList = [];
|
|
|
|
+ this.dataList.forEach(item => {
|
|
|
|
+ if (item.type == "MCQ") {
|
|
|
|
+ item.comment = item.comment.join(',');
|
|
|
|
+ dataList.push({ optionIds: item.comment, answer: '', questionId: item.id })
|
|
|
|
+ }
|
|
|
|
+ if (item.type == "SCQ") {
|
|
|
|
+ dataList.push({ optionIds: item.comment, answer: '', questionId: item.id })
|
|
|
|
+ }
|
|
|
|
+ if (item.type == "SAQ") {
|
|
|
|
+ dataList.push({ optionIds: '', answer: item.comment, questionId: item.id })
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ let jsonData = JSON.stringify({
|
|
|
|
+ postId: this.data.id,
|
|
|
|
+ questionList: dataList
|
|
|
|
+ })
|
|
|
|
+ console.log(jsonData)
|
|
|
|
+ postInteractSave({jsonData:jsonData}).then(response => {
|
|
|
|
+ this.$notify({
|
|
|
|
+ title: "成功",
|
|
|
|
+ message: "操作成功",
|
|
|
|
+ type: "success",
|
|
|
|
+ duration: 2000,
|
|
|
|
+ });
|
|
|
|
+ this.$router.push({
|
|
|
|
+ path: '/home/postInteract'
|
|
|
|
+ });
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getUserInfo() {
|
|
|
|
+ useInfo().then(response => {
|
|
|
|
+ this.dataInfo = response.data.data;
|
|
|
|
+ this.avatarUrl = this.dataInfo.httpFile + this.dataInfo.headImage;
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getDataInfo(id) {
|
|
|
|
+ postInteractInfo({ postId: id }).then(response => {
|
|
|
|
+ this.data = response.data.data;
|
|
|
|
+ let questions = response.data.data.data;
|
|
|
|
+ questions.forEach(item => {
|
|
|
|
+ if (item.type == "MCQ") {
|
|
|
|
+ item.comment = [];
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ this.dataList = questions;
|
|
|
|
+ }).catch(() => { })
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+<style scoped>
|
|
|
|
+.footBut {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.quesList {
|
|
|
|
+ margin-bottom: 50px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.listItem {
|
|
|
|
+ margin-bottom: 30px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.itemTitle {
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.userInfo {
|
|
|
|
+ width: 65px;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 37%;
|
|
|
|
+ left: 46%;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-content: center;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.timeline-container {
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.timeline-entry-list {
|
|
|
|
+ margin-right: 17.5rem;
|
|
|
|
+ border-radius: 2px;
|
|
|
|
+ width: 720px;
|
|
|
|
+ position: relative;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.timeline-entry-list .article {
|
|
|
|
+ border-radius: 4px 4px 0 0;
|
|
|
|
+ position: relative;
|
|
|
|
+ padding-top: 2.667rem;
|
|
|
|
+ z-index: 1;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ padding-left: 2.67rem;
|
|
|
|
+ padding-right: 2.67rem;
|
|
|
|
+ margin-bottom: 2rem;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.article .article-title {
|
|
|
|
+ margin: 0 0 1rem;
|
|
|
|
+ font-size: 1.667rem;
|
|
|
|
+ font-weight: 600;
|
|
|
|
+ line-height: 1.31;
|
|
|
|
+ color: #252933;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.article .author-info-block {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ margin-bottom: 1.667rem
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.article .markdown-body {
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ line-height: 1.75;
|
|
|
|
+ font-size: 15px;
|
|
|
|
+ /* background-image: linear-gradient(90deg,rgba(72,42,10,.05) 5%,rgba(72,42,10,0) 0),linear-gradient(1turn,rgba(72,42,10,.05) 5%,rgba(72,42,10,0) 0); */
|
|
|
|
+ background-size: 20px 20px;
|
|
|
|
+ background-position: 50%;
|
|
|
|
+ padding-top: 0 !important;
|
|
|
|
+ min-height: 280px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.markdown-body img {
|
|
|
|
+ max-width: 100%;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.markdown-body p {
|
|
|
|
+ color: #412c0c;
|
|
|
|
+ letter-spacing: 1px;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.author-info-block .meta-box {
|
|
|
|
+ font-size: 1rem;
|
|
|
|
+ color: #8a919f;
|
|
|
|
+ margin-top: 2px;
|
|
|
|
+ line-height: 22px;
|
|
|
|
+}</style>
|