评分 打分
<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>
更多精彩
