<template> <div class="evaluateDetail"> <div class="nav"> <van-nav-bar title="评价" left-arrow :fixed="true" @click-left="onClickLeft" /> </div> <ul class="list"> <li v-for="(n, i) in list" :key="n.id"> <div class="info"> <img :src="n.faceUrl ? n.faceUrl : require('../assets/boy.png')" alt="" /> <div class="name"> <h3>{{ n.name }}</h3> <p>{{ n.intime.substring(0, 10) }}</p> </div> </div> <div class="cont">{{ n.evaluation }}</div> <div class="imgs"> <img @click="previewImg(i, j)" v-for="(k, j) in n.imgList" :key="k.id" :src="k.imgUrl" alt="" /> </div> <div class="star oh" v-show="n.userType == 1"> <div class="fl">我对课程的评分</div> <div class="fr"> <van-rate v-model="n.courseScore" readonly void-icon="star" void-color="#eee" /> <span>{{ n.courseScore }}.0</span> </div> </div> <div class="star oh" v-show="n.userType == 1"> <div class="fl">我对基地的评分</div> <div class="fr"> <van-rate v-model="n.baseScore" readonly void-icon="star" void-color="#eee" /> <span>{{ n.baseScore }}.0</span> </div> </div> </li> </ul> <van-image-preview v-model="show" :startPosition="imgIndex" :closeable="true" :images="images"></van-image-preview> </div> </template> <script> export default { data() { return { list: '', userInfo: '', show: false, images: [], imgIndex: 0, } }, created() { var userInfo = localStorage.getItem('userInfo') if (userInfo) { this.userInfo = JSON.parse(userInfo) } var id = this.$route.query.id this.GetEvaluationList(id) }, methods: { GetEvaluationList(id) { var that = this this.http .GetEvaluationList({ courseId: id, userId: this.userInfo ? this.userInfo.centerNo : 0, }) .then(function (res) { if (res.status == 1) { that.list = res.data } }) }, onClickLeft() { history.back() }, previewImg(i, j) { var that = this this.images = [] this.list[i].imgList.forEach(function (z, x) { that.images.push(z.imgUrl) }) this.imgIndex = j this.show = true }, }, } </script> <style lang="stylus" scoped> .list{ padding 20px box-sizing border-box margin-top 50px li{ margin-bottom 20px .info{ img { width 50px height 50px border-radius 50px display inline-block vertical-align middle } div.name{ display inline-block vertical-align middle h3{ margin 0 font-size 1.4rem } p{ margin 0 color #ccc font-size 1.2rem } } } .cont{ margin-top 10px font-size 1.4rem } .imgs{ margin-top 10px img{ display inline-block width 60px height 60px margin-right 10px border-radius 5px } } .star{ margin-top 10px .fl{ font-size 1.2rem } } } } </style>