zizhujianzhan_web/components/template/component/article/900x1384/1.vue

<template>
    <div class="articleMainBox">
        <div class="articleTitle">{{templateData.title}}</div>
        <div class="articleInfo">
            <div>来源：{{templateData.copyfrom}}</div>
            <div>作者：{{templateData.author}}</div>
            <div>时间：{{templateData.updated_at}}</div>
        </div>
        <div class="articleContent" v-html="templateData.content" @click="openPreview"></div>
        <div v-if="previewVisible" class="preview-modal" @click="closePreview">
            <img :src="selectedImage" alt="Preview">
        </div>
        <div class="statementBox" v-if="templateData.copyfrom != '本网'">
            <div class="statementBoxLeft">
                <div>原文链接：http://nmyj.xlgl.gov.cn/xzxk/zsyz/202112/t20211201_2771045.html</div>
                <div>[免责声明] 本文来源于网络转载，仅供学习交流使用，不构成商业目的。版权归原作者所有，如涉及作品内容、版权和其它问题，请在30日内与本网联系，我们将在第一时间处理。</div>
            </div>
        </div>
        <div v-if="is_survey==1">
            <div :class="['index_3_box_vote', 'voteStyle' + skinId]">
                <div class="voteTitle">投票区</div>
                <div class="inquire">
                    <p v-if="voteList.length > 0">{{ voteList[0].survey_name }}</p>
                    <div class="radioBox">
                        <div v-if="!isDisabled">
                            <div class="radio" v-if="isRadio">
                                <el-radio-group v-model="radio1" @change="handleRadioChange">
                                    <el-radio 
                                        v-for="item in voteList" 
                                        :key="item.id" 
                                        :value="item.id"
                                        size="large"
                                    >
                                        <span v-if="item.is_other == 0">
                                            {{ item.choice_name }}
                                        </span>
                                        <span v-else>其他</span>
                                    </el-radio>
                                </el-radio-group>
                                <el-input v-if="showUserChoice" v-model="userChoice" :rows="2" type="textarea" resize="none" placeholder="请输入.." />
                            </div>
                            <div class="checkInputBox" v-else>
                                <el-checkbox-group v-model="check1" @change="handleCheckboxChange">
                                    <span v-for="item in voteList" :key="item.id">
                                        <span v-if="item.is_other == 0">
                                            <el-checkbox size="large" :label="item.choice_name"
                                                :value="item.id" />
                                        </span>
                                        <span v-else>
                                            <el-checkbox size="large" label="其他" :value="item.id" />
                                        </span>
                                    </span>
                                </el-checkbox-group>
                                <el-input v-if="showUserChoice" v-model="userChoice" :rows="2" type="textarea"
                                    resize="none" placeholder="请输入.." />
                            </div>
                        </div>
                        <div class="inquireData" v-else>
                            <div v-for="item in websiteSurveyData.data" :key="item.id">
                                <div class="inquireDataItem active" v-if="item.status == 1">
                                    <div class="inquireDataItemTitle">
                                        <span v-if="item.choice_name == ''">其他</span>
                                        <span v-else>{{ item.choice_name }}</span>
                                    </div>
                                    <div class="inquireDataItemNum">{{ item.results }}票</div>
                                </div>
                                <div class="inquireDataItem" v-else>
                                    <div class="inquireDataItemTitle">
                                        <span v-if="item.choice_name == ''">其他</span>
                                        <span v-else>{{ item.choice_name }}</span>
                                    </div>
                                    <div class="inquireDataItemNum">{{ item.results }}票</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="btn">
                        <button :class="['voting', 'votingStyle' + skinId]" @click="addWebsiteSurvey" :disabled="isDisabled" v-if="!isDisabled">投票</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { IArticleDetail,ISurveyResult,ISurveyResultData } from '@/utils/dataInterface';
import { ElRadio, ElRadioGroup, ElCheckbox, ElCheckboxGroup, ElMessage, ElInput } from 'element-plus'
const props:any = defineProps<{
    templateData: IArticleDetail;
    skinId: number;
}>();
//1.投票功能 start ---------------------------------------->
const is_survey = ref<number>(0);//是否显示投票
//1.1查询投票
const route:any = useRoute();
const articleId:number = parseInt(route.params.id);
getVoteList();
//1.2投票选项
const radio1 = ref<string>(''); //单选
const check1 = ref<string[]>([]); //多选
const isDisabled = ref<boolean>(false);//是否禁用提交按钮
const isRadio = ref<boolean>(true);//是否渲染单选
const userSurId = ref<string>('');//投票属于哪一篇文章
const userChoice = ref<string>('');//用于判断用户选择了其他选项以后，输入的值
const userIsChoice = ref<string>('');//用于判断其他选项目前是什么值
const showUserChoice = ref<boolean>(false);//是否显示其他输入框
const websiteSurveyData = ref<ISurveyResult>({//投票结果
    choice:[],
    data:[]
});
//1.3.获得投票列表
let voteList = ref<ISurveyResultData[]>([]);
async function getVoteList() {
    const voteData:any = await requestDataPromise('/web/getWebsiteSurvey', {method:'GET',query:{'art_id':articleId}});
    if (voteData.code == 200) {
        is_survey.value = 1;
        voteList.value = voteData.data;
        console.log(voteList.value)
        //判断显示单选还是多选
        //survey_type 0是单选 1是多选
        if (voteData.data[0].survey_type == 0) {
            isRadio.value = true;
        } else {
            isRadio.value = false;
        }
        //把最后一个的值拿出来 用于判断用户是否选择了其他
        for (let item of voteData.data) {
            //如果含有其他
            if (item.is_other == 1) {
                userIsChoice.value = item.id;
            }
        }
        //用户投票属于哪一篇文章
        userSurId.value = voteData.data[0].sur_id;
    } else {
        is_survey.value = 0;
    }
}
//1.4当用户选择了选项，判断是否展示其他输入框
const handleRadioChange = (value:any) => {
    if (value == userIsChoice.value) {
        showUserChoice.value = true;
    } else {
        showUserChoice.value = false;
    }
}
const handleCheckboxChange = (value:string[]) => {
    if (value.includes(userIsChoice.value)) {
        showUserChoice.value = true;
    } else {
        showUserChoice.value = false;
    }
}
//1.5发起投票
async function addWebsiteSurvey() {
    //判断当前是单选还是多选
    console.log(isRadio.value)
    if (isRadio.value) {
        console.log("用户单选！")
        if (radio1.value != '') {
            //先判断一下是否使用了其他选项
            if (showUserChoice.value) {
                if (userChoice.value != '') {
                    //文章id
                    // console.log(userSurId.value)
                    // 用户输入的值
                    // console.log(userChoice.value)
                    //如果使用了其他，其他的选项需要增加进去
                    const ChoiceData = await requestHome('/web/addWebsiteSurveyOption', {
                        method: 'GET',
                        query: {
                            'sur_id': userSurId.value,//投票的新闻id
                            'choice_name': userChoice.value,//投票的选项id
                        }
                    });
                    if (ChoiceData.code == 200) {
                        //提交完其他选项以后，再正式发起投票
                        const mkData:any = await requestHome('/web/addWebsiteSurveyVote', {
                            method: 'GET',
                            query: {
                                'sur_id': userSurId.value,
                                'choice_id': ChoiceData.data
                            }
                        });
                        if (mkData.code == 200) {
                            ElMessage.success('投票成功！')
                            //把投票结果显示到页面上 禁用投票按钮
                            isDisabled.value = true;
                            //websiteSurveyData.value = mkData.data;
                            //遍历一下，把用户选中的那个设置status为1
                            let data:any = mkData.data;
                            //遍历一下，把用户选中的那个设置status为1
                            for (let item of data.data) {
                                for (let i of data.choice) {
                                    if (item.id == i) {
                                        console.log(item.id)
                                        item.status = 1;
                                    }
                                }
                            }
                            websiteSurveyData.value = data;
                        } else {
                            ElMessage.error(mkData.message)
                        }
                    } else {
                        ElMessage.error('其他投票失败！')
                    }
                } else {
                    ElMessage.error('请输入选项内容！')
                }
            } else {
                //如果没选择其他，直接提交选择的内容
                const mkData:any = await requestHome('/web/addWebsiteSurveyVote', {
                    method: 'GET',
                    query: {
                        'sur_id': userSurId.value,
                        'choice_id': radio1.value
                    }
                });
                if (mkData.code == 200) {
                    ElMessage.success('投票成功！')
                    //把投票结果显示到页面上 禁用投票按钮
                    isDisabled.value = true;
                    let data:any = mkData.data;
                    //遍历一下，把用户选中的那个设置status为1
                    for (let item of data.data) {
                        for (let i of data.choice) {
                            if (item.id == i) {
                                item.status = 1;
                            }
                        }
                    }
                    websiteSurveyData.value = data;
                } else {
                    ElMessage.error('投票失败！')
                }
            }
        } else {
            ElMessage.error('请选择一个选项')
        }
    } else {
        console.log("多选！")
        //多选
        if (check1.value.length > 0) {
            //先判断一下是否使用了其他选项
            if (showUserChoice.value) {
                if (userChoice.value != '') {
                    //判断用户是否只选择了一个其他
                    if (check1.value.length == 1) {
                        const ChoiceData:any = await requestDataPromise('/web/addWebsiteSurveyOption', {
                            method: 'GET',
                            query: {
                                'sur_id': userSurId.value,//投票的新闻id
                                'choice_name': userChoice.value,//用户输入的其他选项文字
                            }
                        });
                        if (ChoiceData.code == 200) {
                            //提交完其他选项以后，再正式发起投票
                            const mkData:any = await requestDataPromise('/web/addWebsiteSurveyVote', {
                                method: 'GET',
                                query: {
                                    'sur_id': userSurId.value,
                                    'choice_id': ChoiceData.data
                                }
                            });
                            if (mkData.code == 200) {
                                ElMessage.success('投票成功！')
                                //把投票结果显示到页面上 禁用投票按钮
                                isDisabled.value = true;
                                websiteSurveyData.value = mkData.data;
                                //遍历一下，把用户选中的那个设置status为1
                                let data = mkData.data;
                                //遍历一下，把用户选中的那个设置status为1
                                for (let item of data.data) {
                                    for (let i of data.choice) {
                                        if (item.id == i) {
                                            console.log(item.id)
                                            item.status = 1;
                                        }
                                    }
                                }
                                websiteSurveyData.value = data;
                            } else {
                                ElMessage.error(mkData.message)
                            }
                        } else {
                            ElMessage.error('其他投票失败！')
                        }

                    } else {
                        //用户选择了除了其他以外，还包括别的选项
                        const ChoiceData:any = await requestDataPromise('/web/addWebsiteSurveyOption', {
                            method: 'GET',
                            query: {
                                'sur_id': userSurId.value,//投票的新闻id
                                'choice_name': userChoice.value,//用户输入的其他选项文字
                            }
                        });
                        if (ChoiceData.code == 200) {
                            let data:any = check1.value;
                            //找到多选的数组，把其他默认值给替换掉
                            for (let i = 0; i < data.length; i++) {
                                if (data[i] == userIsChoice.value) {
                                    data[i] = ChoiceData.data;
                                }
                            }
                            let jsonArray = JSON.stringify(data);
                            //提交完其他选项以后，再正式发起投票
                            const mkData:any = await requestDataPromise('/web/addWebsiteSurveyVote', {
                                method: 'GET',
                                query: {
                                    'sur_id': userSurId.value,
                                    'choice_id': jsonArray
                                }
                            });

                            if (mkData.code == 200) {
                                ElMessage.success('投票成功！')
                                //把投票结果显示到页面上 禁用投票按钮
                                isDisabled.value = true;
                                websiteSurveyData.value = mkData.data;
                                //遍历一下，把用户选中的那个设置status为1
                                let data = mkData.data;
                                //遍历一下，把用户选中的那个设置status为1
                                for (let item of data.data) {
                                    for (let i of data.choice) {
                                        if (item.id == i) {
                                            //console.log(item.id)
                                            item.status = 1;
                                        }
                                    }
                                }
                                websiteSurveyData.value = data;
                            } else {
                                ElMessage.error(mkData.message)
                            }
                        } else {
                            ElMessage.error('其他投票失败！')
                        }
                    }
                } else {
                    ElMessage.error('请输入选项内容！')
                }
            } else {
                let jsonArray = JSON.stringify(check1.value);
                //如果没选择其他，直接提交选择的内容
                const mkData:any = await requestDataPromise('/web/addWebsiteSurveyVote', {
                    method: 'GET',
                    query: {
                        'sur_id': userSurId.value,
                        'choice_id': jsonArray
                    }
                });
                if (mkData.code == 200) {
                    ElMessage.success('投票成功！')
                    //把投票结果显示到页面上 禁用投票按钮
                    isDisabled.value = true;
                    websiteSurveyData.value = mkData.data;
                    //遍历一下，把用户选中的那个设置status为1
                    let data = mkData.data;
                    //遍历一下，把用户选中的那个设置status为1
                    for (let item of data.data) {
                        for (let i of data.choice) {
                            if (item.id == i) {
                                console.log(item.id)
                                item.status = 1;
                            }
                        }
                    }
                    websiteSurveyData.value = data;
                } else {
                    ElMessage.error('投票失败！')
                }
            }
        } else {
            ElMessage.error('请选择一个选项')
        }
    }
}
//是否展示投票 end ---------------------------------------->

//页面图片放大 start---------------------------------------->
const previewVisible = ref<boolean>(false)
const selectedImage = ref<string>(' ')
const openPreview = (event:any) => {
    if (event.target.tagName === 'IMG') {
        selectedImage.value = event.target.src;
        previewVisible.value = true;
    }
}
const closePreview = () => {
    previewVisible.value = false;
}
//页面图片放大 end---------------------------------------->
</script>

<style lang="less" scoped>
.articleMainBox {
    width: 900px;
    margin: 0 auto;
    display: block;
    .articleTitle {
        width: 900px;
        font-size:30px;
        color:#333333;
        font-weight:bold;
    }
    .articleInfo {
        width: 900px;
        color:#999999;
        font-size:14px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 30px;
        div{
            margin-right: 40px;
        }
    }
    .articleContent {
        width: 900px;
        padding-top:60px;
        font-size:20px;
        margin-bottom: 60px;
        img{
            display: block;
            margin: 0 auto;
            margin-bottom: 60px;
        }
        .fontBold {
            font-weight:bold;
        }
        div {
            text-indent: 2em;
            margin-bottom: 28px;
        }
    }
    .statementBox {
        width: 900px;
        height: 143px;
        border-top: 1px solid #D9D9D9;
        .statementBoxLeft {
            width: 900px;
            height: 143px;
            padding-top: 40px;
            text-align: left;
            box-sizing: border-box;
            font-size:20px;
            color:#999999;
        }
    }
}

//投票 start ---------------------------------------->
.index_3_box_vote {
    .voteTitle {
        font-size: 20px;
        height: 40px;
        line-height: 40px;
        color: #333333;
        padding-left: 20px;
        width: 100%;
        border-bottom: 1px solid #E7E7E7;
        border-top: 1px solid #333;
        box-sizing: border-box;
    }
    width:100%;
    box-sizing:border-box;
    border:solid 1px #FBFBFB;
    background: #FBFBFB;
    .inquire {
        height: 394px;
        margin-top: 20px;
        border-radius: 6px 6px 6px 6px;
        padding: 4px 40px 4px 6px;
        box-sizing: border-box;
        p {
            font-weight: bold;
            height: 69px;
            font-family: PingFang SC, PingFang SC;
            font-size: 20px;
            color: #333333;
            line-height: 21px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            padding: 12px 20px 0 32px;
        }
        .radioBox {
            height: 250px;
            padding-left: 30px;
            overflow-y: auto;
            box-sizing: border-box;
            padding-bottom: 20px;
        }
        .radio {
            /deep/.el-radio {
                --el-radio-input-border-color-hover: #dd7d18;
            }
            /deep/.el-radio-group {
                align-items: center;
                display: inline-flex;
                flex-wrap: wrap;
                font-size: 0;
                //padding-left: 35px;
            }
            /deep/.el-radio.el-radio--large {
                width: 100%;
                height: 29px;
                margin-bottom: 15px;
            }
            /deep/.el-radio.el-radio--large .el-radio__label {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 16px;
                color: #333333;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 300px;
            }
            /deep/.el-radio.el-radio--large .el-radio__inner {
                height: 16px;
                width: 16px;
            }
            /deep/.el-radio__input.is-checked+.el-radio__label {
                color: #333;
            }
            /deep/.el-radio__input.is-checked .el-radio__inner {
                background: #333;
                border-color: #333;
            }
        }
        .checkInputBox {
            /deep/.el-checkbox {
                --el-radio-input-border-color-hover: #333;
            }
            /deep/.el-checkbox-group {
                align-items: center;
                display: inline-flex;
                flex-wrap: wrap;
                font-size: 0;
            }
            /deep/.el-checkbox.el-checkbox--large {
                width: 330px;
                height: 29px;
                margin-bottom: 15px;
            }
            /deep/.el-checkbox.el-checkbox--large .el-checkbox__label {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 16px;
                color: #333333;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 300px;
            }
            /deep/.el-checkbox.el-checkbox--large .el-checkbox__inner {
                height: 16px;
                width: 16px;
            }
            /deep/.el-checkbox__input.is-checked+.el-checkbox__label {
                color: #333;
            }
            /deep/.el-checkbox__input.is-checked .el-checkbox__inner {
                background: #333;
                border-color: #333;
            }
        }
        .btn {
            padding-left: 30px;
            button {
                width: 78px;
                height: 37px;
                line-height: 37px;
                border-radius: 6px;
                border: none;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 16px;
                color: #999999;
            }
            .voting {
                //background-color: #dd7d18;
                color: #fff;
                margin-right: 44px;
                cursor: pointer;
            }
            .look {
                cursor: pointer;
            }
        }
    }
    .inquireData {
        .inquireDataItem {
            width: 100%;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #F3F3F3;
            border: 1px solid #D2D2D2;
            margin-bottom: 10px;
            border-radius: 6px;
            padding: 0 15px;
            box-sizing: border-box;
            color: #999999;
            .inquireDataItemTitle {
                width: 290px;
                height: 38px;
                font-size: 16px;
                line-height: 38px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .inquireDataItemNum {
                font-size: 16px;
            }
        }
        .active {
            color: #dd7d18;
            background: #f3e9de;
            border: 1px solid #dd7d18;
        }
    }
}

//样式1
.voteStyle1 {
    .voteTitle {
        border-bottom: 1px solid #E7E7E7;
        border-top: 1px solid #1C5468;
    }
    border:solid 1px #FBFBFB;
    background: #FBFBFB;
    .inquire {
        .radio {
            /deep/.el-radio__input.is-checked+.el-radio__label {
                color: #1C5468;
            }
            /deep/.el-radio__input.is-checked .el-radio__inner {
                background: #1C5468;
                border-color: #1C5468;
            }
        }
        .checkInputBox {
            /deep/.el-checkbox {
                --el-radio-input-border-color-hover: #1C5468;
            }
            /deep/.el-checkbox__input.is-checked+.el-checkbox__label {
                color: #1C5468;
            }
            /deep/.el-checkbox__input.is-checked .el-checkbox__inner {
                background: #1C5468;
                border-color: #1C5468;
            }
        }
    }
    .inquireData {
        .active {
            color: #1C5468;
            background: #f3e9de;
            border: 1px solid #1C5468;
        }
    }
}
.votingStyle1 {
    background-color: #1C5468;
}

//样式2
.voteStyle2 {
    .voteTitle {
        border-bottom: 1px solid #E7E7E7;
        border-top: 1px solid #A91B33;
    }
    border:solid 1px #FBFBFB;
    background: #FBFBFB;
    .inquire {
        .radio {
            /deep/.el-radio__input.is-checked+.el-radio__label {
                color: #A91B33;
            }
            /deep/.el-radio__input.is-checked .el-radio__inner {
                background: #A91B33;
                border-color: #A91B33;
            }
        }
        .checkInputBox {
            /deep/.el-checkbox {
                --el-radio-input-border-color-hover: #A91B33;
            }
            /deep/.el-checkbox__input.is-checked+.el-checkbox__label {
                color: #A91B33;
            }
            /deep/.el-checkbox__input.is-checked .el-checkbox__inner {
                background: #A91B33;
                border-color: #A91B33;
            }
        }
    }
    .inquireData {
        .active {
            color: #A91B33;
            background: #f3e9de;
            border: 1px solid #A91B33;
        }
    }
}
.votingStyle2 {
    background-color: #A91B33;
}
//投票 end ---------------------------------------->

//放大图片
.preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.preview-modal img {
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
    /* 关闭按钮样式 */
}
</style>