spark-coach/pagesMain/evaluateDetail.vue

<template>
	<view class="content">
		<u-card :foot-border-top="false" padding="0px" margin="10px" borderRadius="40" class="card-box" box-shadow="0 0 5px 0 rgba(0, 0, 0, 0.2)">
			<view class="card-content" slot="head" style="padding: 10px 15px;">
				<view class="card-title">{{evaluateInfo.name}}</view>
			</view>
			<view class="card-content" slot="body">
				<view class="evaluate-list" v-for="(item, index) in evaluateInfo.evaluateDetailResult" :key="index">
					<view class="evaluate-info">
						<view class="evaluate-name">{{item.name}}</view>
						<view>{{item.time}}</view>
					</view>
					<u-rate :count="5" v-model="item.level" :active-color="mainColor" disabled></u-rate>
					<view style="padding-top: 10px;">{{item.content}}</view>
				</view>
			</view>
		</u-card>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		computed: {
			...mapGetters([
				'mainColor'
			])
		},
		data() {
			return {
				classId: '',
				evaluateInfo: {
					evaluateDetailResult: [],
					name: ''
				},
			}
		},
		onLoad(options) {
			this.classId = options.id
			this.getData()
		},
		onReady() {},
		onPullDownRefresh() {
			this.getData()
		},
		methods: {
			//  获取数据
			getData() {
				NET.request(API.getEvaluateInfo, {
					id: this.classId,
				}, 'POST').then(res => {
					this.evaluateInfo = res.data
					uni.stopPullDownRefresh();
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.message,
						type: 'warning',
					})
				})
			}
		},
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	@import "@/static/css/themes.scss";

	.content {
		width: 100%;
		float: left;

		.card-box {
			width: 100%;
			height: 100vh;

			.card-content {
				padding: 5px 15px;
			}

			.card-title {
				height: 20px;
				display: inline-block;
				font-weight: bold;
				font-size: 14px;
				line-height: 20px;
			}

			.evaluate-list {
				width: 100%;
				padding: 10px 0;
				border-bottom: 1px solid #e4e7ed;
				color: #999999;

				.evaluate-info {
					display: flex;
					justify-content: space-between;
					padding-bottom: 5px;

					.evaluate-name {
						font-size: 14px;
					}
				}
			}

			.evaluate-list:last-child {
				border-bottom: none;
			}
		}
	}
</style>