pointsMall/src/views/HomeView/postInteract/detail.vue

<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 }}<el-tag class="elTag" size="small" type="danger">单选</el-tag></div>
                                <el-radio-group v-model="item.comment" class="flex-column">
                                    <el-radio class="myRadio" :disabled="data.interactUserStatus == 0?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 }}<el-tag class="elTag" size="small" type="danger">多选</el-tag></div>
                                <el-checkbox-group v-model="item.comment" class="flex-column">
                                    <el-checkbox class="myRadio" :disabled="data.interactUserStatus == 0?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 }}<el-tag class="elTag" size="small" type="danger">问答</el-tag></div>
                                <div v-if="data.interactUserStatus != 0" class="myText">
                                    {{ item.comment }}
                                </div>
                                <el-input v-else type="textarea" :rows="6" maxlength="200" show-word-limit placeholder="请输入内容" v-model="item.comment"></el-input>
                            </div>
                        </div>
                        <div v-if="data.interactUserStatus == 0" 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);
            for(var i=0;i<this.dataList.length;i++){
                if(this.dataList[i].comment=='' || this.dataList[i].comment==[]){
                    this.$message.error('还有题目未完成，无法提交！');
                    return
                }
            }
            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") {
                        if (item.comment) {
                            item.comment = item.comment.split(',');
                        }else{
                            item.comment = [];
                        }
                    }
                });
                this.dataList = questions;
                console.log(this.dataList);
            }).catch(() => { })
        },
    },
}
</script>
<style scoped>
.myText {
    display: block;
    resize: vertical;
    padding: 5px 15px;
    line-height: 1.5;
    box-sizing: border-box;
    width: 100%;
    font-size: 14px;
    color: #606266;
    background-color: #FFF;
    background-image: none;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
.myRadio{
    display: flex;
    justify-content: center;
    align-items: center;
    white-space:normal !important;
    margin: 10px !important;
}
.flex-column{
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
}
.footBut {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.quesList {
    margin-bottom: 50px;
}

.listItem {
    margin-bottom: 30px;
}

.itemTitle {
    margin-bottom: 10px;
    font-weight: 700;
}
.elTag{
    margin-left: 5px;
}

.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>