lsappBms/lss_vue/src/views/my/myScoreDetail.vue

<template>
	<div class="detail">
        <mt-header class="detail_head" fixed title="评分详情">
            <router-link to="" slot="left">
                <mt-button icon="back" v-on:click="jumpBack()"></mt-button>
            </router-link>
        </mt-header>
        <div class="detail_body">
            <div class="detailBox one_recordBox">
                <div class="record_head">
                    <div>个人分：<span>{{detail.personalScore==null?'0分':detail.personalScore + '分'}}</span></div>
                    <div>建议分：<span>{{detail.ideaScoreSum==null?'0分':detail.ideaScoreSum + '分'}}</span></div>
                </div>
                <div class="record_body">
                    <div v-on:click="showSuggest()">我的建议 <span class="toDetail"><img class="rotate" src="../../assets/image/pull_down_blue.png"></span></div>
                </div>
                <div class="suggestList" >
                    <div class="one_suggest" v-for="item in detail.ideaVO">
                        <div class="one_suggest_title">
                            {{item.indate}}
                        </div>
                        <div class="one_suggest_body">
                            {{item.content}}
                        </div>
                        <div class="one_suggest_reply" v-if="item.ideaComment != null">
                            <div class="reply_title">来自领导的回复</div>
                            <div class="reply_body">
                                {{item.ideaComment.content}}
                                <div>{{item.ideaComment.responder}} <span class="score">得分：<span>{{item.score==null?'0分':item.score + '分'}}</span></span></div>
                                <div>{{item.ideaComment.indate}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="detailBox one_recordBox">
                <div class="totalScore">总得分：<span>{{detail.total==null?'0分':detail.total + '分'}}</span></div>
                <div class="totalReason">
                    <div>得分原因</div>
                    <div>
                        {{detail.reason}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
	export default {
		data() {
			return {
                uid: this.$route.params.uid,
                time: this.$route.params.time,
                detail: '',
			}
		},
		methods: {
            // 消息列表
            getDetail() {
                this.$indicator.open();
                this.http.post(this.port.my.scoreDetail, {
                    'uid': this.uid,
                    'time': this.time,
                } , 
                res => {
                    this.$indicator.close();
                    if (res.code == "ok") {
                        this.detail = res.data;
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$indicator.close();
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            showSuggest() {
                if($('.toDetail img').attr("class") == "rotate") {
                    $('.suggestList').slideDown();
                    $('.toDetail img').attr("class","rotate1")
                } else {
                    $('.suggestList').slideUp();
                    $('.toDetail img').attr("class","rotate")
                }
            },

            jumpBack() {
                this.$router.go(-1);
            }
        },
        created() {
            this.getDetail();
        },
		mounted() {
            
		}
	}

</script>

<style scoped>
    body {
        background: #EFEFEF!important;
    }

    .context_router {
        background: #EFEFEF;
    }
    
    .detail {
        background: #EFEFEF;
    }

    .detail_head {
        background: #fff;
        color: #333;
        height: 0.4rem;
    }

    .detail_body {
        margin-top: 0.4rem;
        padding-bottom: 0.15rem;
    }

    .detailBox {
        background: #fff;
        margin-bottom: 0.11rem;
    }

    .one_recordBox {
        padding: 0.12rem 0.2rem;
    }

    .record_head {
        padding: 0 0 0.1rem 0;
        line-height: 0.25rem;
        border-bottom: 1px solid #ccc;
    }

    .record_head > div {
        width: 100%;
        display: inline-block;
        vertical-align: middle;
    }

    .record_head > div span {
        color: #5FA1F0;
        margin-left: 0.2rem;
        float: right;
        margin-right: 0.08rem;
    }

    .record_body {
        color: #5FA1F0;
        font-size: 0.14rem;
        margin: 0.12rem 0 0 0;
    }

    .record_body .toDetail {
        float: right;
        margin-right: 0.05rem;
    }

    .record_body .toDetail img {
        width: 0.12rem;
    }

    .one_suggest {
        margin-top: 0.2rem;
    }

    .one_suggest_title {
        line-height: 0.3rem;
    }

    .one_suggest_body {
        font-size: 0.13rem;
        line-height: 0.2rem;
        color: #333;
    }

    .one_suggest_reply {
        margin-top: 0.12rem;
    }

    .reply_title {
        font-size: 0.12rem;
        color: #999;
        margin-bottom: 0.08rem;
    }

    .reply_body {
        padding: 0.1rem;
        background: #EEE;
        color: #333;
    }

    .reply_body > div {
        color: #333;
        line-height: 0.2rem;
        font-size: 0.13rem;
        color: #777;
    }

    .reply_body > div:nth-child(1) {
        margin-top: 0.1rem;
    }

    .reply_body .score {
        float: right;
    }

    .reply_body .score span {
        color: #5FA1F0;
    }

    .suggestList {
        display: none;
    }

    .rotate {
        transform-origin: center center;
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transition: transform 0.2s;
        -moz-transition: -moz-transform 0.2s;
        -moz-transition: -moz-transform 0.2s;
        -o-transition: -o-transform 0.2s;
        -ms-transition: -ms-transform 0.2s;
    }

    .rotate1 {
        transform-origin: center center;
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transition: transform 0.2s;
        -moz-transition: -moz-transform 0.2s;
        -moz-transition: -moz-transform 0.2s;
        -o-transition: -o-transform 0.2s;
        -ms-transition: -ms-transform 0.2s;
    }

    .totalScore {
        line-height: 0.3rem;
    }

    .totalScore span {
        color: #5FA1F0;
        margin-left: 0.2rem;
    }

    .totalReason div:nth-child(1) {
        line-height: 0.3rem;
    }

    .totalReason div:nth-child(2) {
        line-height: 0.2rem;
        color: #777;
    }
</style>