epmet-wx-pa-chengyang/src/views/peoSuggestion/topicListDetail.vue

<template>
    <div>
           <div class='container' style="height: 85vh; overflow: auto;">
        <div class="card flex flex-y ">
            <h2>{{ ProblemDescription.subjectTitle }}</h2>
            <div class="m-bottom5">{{ ProblemDescription.subjectContent }}</div>
            <div class="font-size13 gray">{{ ProblemDescription.updatedTime }}</div>
            <div class="image-grid" v-for="item in ProblemDescription.attachmentList" >
                <div class="grid-item ">
                    <img :src="item" style="width: 105px; height: 75px;">
                </div>
            </div>
            <!-- <div class="flex flex-y flex-center1 flex-center2 gray back_color  m-top15">
                <div class="flex m-top16 flex-center1 flex-center2 vote white">
                    <div :style="{ width:support1Width}">
                        <span class="van-ellipsis" style="width: 100px;">支持 {{ ProblemDescription.supportNum }}</span>
                        <img src="@/assets/images/discusion/VS.png" alt="">
                    </div>
                    <div :style="{ width:oppose1Width}"class="text-right van-ellipsis">
                        反对 {{ ProblemDescription.opposeNum }}
                    </div>
                </div>
                <div class="gray  font-size13 p-12">{{dataValue}}人参与</div>

            </div> -->

        </div>
        <!-- <div class="bot_btn flex flex-x flex-mean m-bot50 back_color back_color">
            <van-button :disabled="disableAllButtons" round class="support"
                :icon="require('@/assets/images/icons/support.png')" type="info" @click="handelClicsupport">
                支持
            </van-button>

            <van-button :disabled="disableAllButtons" round class="support"
                :icon="require('@/assets/images/icons/oppose.png')" type="info" @click="handelClicopposeNum">
                反对
            </van-button>
        </div> -->
        <div class="flex flex-center1 " style="position: fixed; bottom:60px; left: 0px; right:0px;">
            <van-button block color="linear-gradient(to right, #81B5FB, #3E92FF)" style="width: 300px;"  round @click="onClickdaily">开始填写</van-button>
        </div>
    </div>
    <Android/>
    </div>
 
</template>

<script>
import {
    getDetailSpecial
} from "@/api/peoSuggestion"
export default {
    data() {
        return {
            signUp: [
                {},
            ],
            dataValue: null,
            support: false,
            oppose: false,
            supportNum: null,
            opposeNum: null,
            disableAllButtons: false,
            eventId: "",
            ProblemDescription: {},
            vote: {}
        };

    },
    components:{},
    created() {
        console.log(this.$route.query.id);
        this.eventId = this.$route.query.id
        this.id = this.$route.query.eventId
        this.agencyId = this.$store.state.app.agencyId;
        this.userId = this.$store.state.app.userInfo.id;
        this.getDetail()
    },
    computed: {
        support1Width() {
            return (!this.support1?50:this.support1.toFixed(2) * 100) + '%';
        },
        oppose1Width() {
            return (!this.oppose1?50:this.oppose1.toFixed(2) * 100) + '%';
        }
    },
    methods: {
        onClickdaily(){
            this.$router.push({path:'peoSuggestionexplain',query: { title:this.ProblemDescription.subjectTitle,
                subjectContent: this.ProblemDescription.subjectContent,id:this.eventId
            } })
        },
        async handelClicsupport() {
            let parm = {
                eventId: this.eventId,
                agencyId: this.agencyId,
                userId: this.userId,
                opinionFlag: 0
            }
            let res = await handelClicsupport(parm)
            if(res.code == 0){
                await this.icEventOldDiscussDetil1()
            }
        },
        async handelClicopposeNum(data) {
            let parm = {
                eventId: this.eventId,
                agencyId: this.agencyId,
                userId: this.userId,
                opinionFlag: 1
            }
            let res = await handelClicsupport(parm)
            if(res.code === 0){
                await this.icEventOldDiscussDetil1()
            }
        },
        async getDetail() {
            console.log(this.eventId, "this.id");
            let parm = {
                id: this.eventId
            }
            await getDetailSpecial(parm).then(res => {
                this.ProblemDescription = res.data;
                this.ProblemDescription.subjectContent=  this.ProblemDescription.subjectContent.replace(/<[^>]*>/g, '')
                this.dataValue = res.data.opposeNum + res.data.supportNum
            })
        },
        handsupport() {
            this.support = true;
        },
    },

}
</script>

<style lang='less' scoped>
.image-container {
    position: relative;
    display: inline-block;
}

.image-grid {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row;
    /* 自动换行 */
}

.z_img {
    width: 10px;
    height: 35px;
    background: url('@/assets/images/discusion/f-y.png');
    background-size: cover;
}

.image-with-text {
    position: relative;
    display: inline-block;
}

.grid-item {
    text-align: center;
}

.support {
    background-color: #ffffff;
    color: black;
}

.t_sup {
    display: inline-flex;
    position: absolute;
}

.support_img1 {
    height: 35px;
}

.support_img2 {
    height: 35px;
}

.header_img_left {
    // background:"@/assets/images/discusion/1.png";
    background: url('@/assets/images/discusion/h-l.png');
    width: 10px;
    height: 35px;
    background-size: cover;
    /* 使背景图片覆盖整个元素 */
}

.header_img_right {
    background: url('@/assets/images/discusion/f-l.png');
    width: 10px;
    height: 35px;
    background-size: cover;
    /* 使背景图片覆盖整个元素 */
}

.text-overlay {
    position: absolute;
    bottom: 10px;
    /* 文字距离图片底部的距离 */
    color: white;
    /* 文字颜色，可以根据需要调整 */
    padding: 5px;
    border-radius: 3px;
    /* 可选，圆角 */
    font-size: 13px;
    text-align: center;

}

.text-overlay1 {
    position: absolute;
    bottom: 10px;
    /* 文字距离图片底部的距离 */
    color: white;
    /* 文字颜色，可以根据需要调整 */
    padding: 5px;
    border-radius: 3px;
    /* 可选，圆角 */
    font-size: 13px;
    text-align: center;
    right: 0px;

}

.footer_img_left {
    background: url('@/assets/images/discusion/h-y.png');
    width: 10px;
    height: 35px;
    background-size: cover;
}

.vote {
    width: 100%;

    &>:nth-child(1),
    >:nth-child(2) {
        height: 35px;
        line-height: 35px;
        padding: 0 11px;
        box-sizing: border-box;
        font-size: 13px;
    }

    &>:nth-child(1) {
        background: url('@/assets/images/discusion/left-bg.png') no-repeat;
        background-size: 97% 100%;
        padding: 0 10px;
        box-sizing: border-box;
        position: relative;
        z-index: 4;
        &>img{
            width: 25px;
            height: 25px;
            position: absolute;
            right: -10px;
            top: 5px;
            z-index: 10;
        }
    }

    &>:nth-child(2) {
        background: url('@/assets/images/discusion/right-bg.png') no-repeat;
        background-size: 100% 100%;
        z-index: 3;
    }
}
</style>