评分 打分

<template>
    <div>
        <!-- <div class="title">
            测评
            <span>条</span>
        </div> -->
        <div class="cont">
            <div class="list">
                <div class="bt">
                    <div class="lefthead">
                        <img :src="data.headImage" alt="" srcset="">
                        <span></span>
                    </div>
                    <div class="user">
                        <h2>{{data.nikeName}}</h2>
                        <p>已甄选{{data.spuNum}}件好货</p>
                    </div>
                </div>
                <div class="line"></div>
                <div class="score">
                    <h2>评分</h2>
                    <ul>
                        <li v-for="(point,j) in pointArr" v-bind:key="j">
                            <img src="../../assets/images/product/point01.png" v-if="point < data.score" alt="" srcset="">
                            <img src="../../assets/images/product/point02.png" v-else alt="" srcset="">
                        </li>
                    </ul>
                    <div class="point">
                        {{score(data.score)}}
                    </div>
                </div>
                <div class="line"></div>
                <div class="nr" v-html="data.content">
                </div>
                <div class="piclist" v-show="data.imageList && data.type == 1">
                    <p v-for="(item,index) in data.imageList" :key="index">
                        <img :src="item" alt="" srcset="">
                    </p>
                </div>
                <div class="videolist" @click="play" v-show="data.videoPlayUrl && data.type == 2">
                    <!-- <img :src="data.videoImageUrl" alt="" srcset=""> -->
                    <span class="video-btn" v-show="videoflag"></span>
                    <p>
                        <video width="100%" height="auto" ref="video" :poster="data.videoImageUrl" :src="data.videoPlayUrl">
                        </video>
                    </p>
                    
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import ProductService from '../../services/ProductService.js';
export default {
    data() {
        return {
            pointArr: [0,1,2,3,4],
            productId: '',
            data: {},
            list: [],
            videoflag: true
        }
    },
    created() {
        this.productId = this.$route.query.productId;
        this.getList()
    },
    beforeCreate: function() {
        document.getElementsByTagName("body")[0].className="white";
    },
    beforeDestroy: function() {
        document.body.removeAttribute("class","white");
    },
    methods: {
        getList() {
            ProductService.getReviewDetail(this,this.productId,(res) => {
                console.log(res)
                this.data = res
            })
        },
        score(score) {
            return score + ".0"
        },
        tmpPic() {
            return process.env.OSS_API+"buyHead/fake_avatar_"+Math.ceil(Math.random()*30)+".png"
        },
        play() {
            this.videoflag = false
            this.$refs.video.play()
        }
    }
}
</script>
<style>
.white {
    background: #fff;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0
}
</style>
<style scoped lang="less">
.line {
    height: 0.3rem;
    background: #f2f2f2;
}
.title {
    height: 1.5rem;
    padding: 0 0.5rem;
    line-height: 1.5rem;
    font-size: 0.48rem;
    background: #fff;
    span {
        display: inline-block;
        padding-left: 0.2rem;
        font-size: 0.36rem;
        color: #ff4646;
    }
}
.cont {
    .list {
        .bt {
            height: 2.1rem;
            padding: 0.25rem 0.36rem 0;
            line-height: 2.1rem;
            background: #fff;
            .lefthead {
                float: left;
                width: 1.29rem;
                height: 1.59rem;
                background: url(../../assets/images/product/lefthead.png) center no-repeat;
                background-size: 1.29rem 1.59rem;
                img {
                    display: block;
                    width: 1.21rem;
                    height: 1.21rem;
                    margin: 0.04rem auto;
                    border-radius: 50%;
                }
                span {
                    display: block;
                    margin: 0px;
                    padding: 0px;
                    text-align: center;
                    width: 1.29rem;
                    height: 0.3rem;
                    overflow: hidden;
                    background: url(../../assets/images/product/txt1.png) center no-repeat;
                    background-size: 1.17rem 0.23rem;
                }
            }
            .user {
                float: left;
                width: 3.63rem;
                padding: 0.35rem 0 0 0.35rem;
                h2 {
                    font-weight: normal;
                    font-size: 0.42rem;
                    color: #333;
                    line-height: 0.5rem;
                    margin: 0px;
                    padding: 0px;
                }
                p {
                   font-size: 0.31rem;
                   color: #ccc;
                   line-height: 0.5rem;
                   margin: 0px;
                   padding: 0px;
                }
            }
        }
        .score {
            background: #fff;
            height: 1.5rem;
            line-height: 1.5rem;
            padding: 0 0.36rem;
            h2 {
                font-weight: normal;
                font-size: 0.42rem;
                line-height: 1.5rem;
                text-align: center;
                float: left;
                padding-right: 0.4rem;
            }
            ul {
                height: 0.5rem;
                padding-top: 0.59rem;
                float: left;
                li {
                    float: left;
                    width: 0.34rem;
                    height: 0.32rem;
                    margin-right: 0.05rem;
                    img {
                        width: 0.34rem;
                        height: 0.32rem;
                        display: block;
                    }
                }
            }
            .point {
                float: left;
                font-size: 0.47rem;
                color: #ff4646;
                padding-left: 0.15rem;
            }
        }
        .nr {
            padding: 0.6rem 0.36rem 0.36rem;
            background: #fff;
            font-size: 0.42rem;
            line-height: 0.8rem;
            white-space: pre-wrap;
            /deep/ img {
                width: 100%;
                margin: 0px;
                padding: 0px;
                vertical-align: middle;
            }
            /deep/ p {
                margin: 0px;
                padding: 0px;
            }
        }
        .piclist {
            padding: 0 0.36rem 0.6rem;
            background: #fff;
            font-size: 0.42rem;
            line-height: 0.8rem;
            width: 100%;
            img {
                width: 100%;
                margin: 0px;
                padding: 0px;
                margin: 0.3rem 0;
                vertical-align: middle;
            }
            p {
                margin: 0px;
                padding: 0px;
            }
        }
        .videolist {
            padding: 0 0.36rem 0.6rem;
            background: #fff;
            position: relative;
            .video-btn {
                display: inline-block;
                width: 2.24rem;
                height: 2.24rem;
                background-image: url(/static/images/goods/CompoundShape.png);
                background-size: 100% 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -1.12rem;
                margin-top: -1.12rem;
                border-radius: 100%;
                box-shadow: 0 0 10px 1px #ffffff;
            }
            img {
                width: 100%;
            }
        }
    }
}
</style>