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.userRemarkTime}}</view>
					</view>
					<u-rate :count="10" v-model="item.level" :active-color="mainColor" isClick></u-rate>
					<view style="padding: 10px 0;">{{item.content}}</view>
					<template v-if="item.coachRemark">
						<view class="evaluate-info">
							<view class="evaluate-name">{{item.coachRemark}}</view>
							<view>{{item.coachRemarkTime}}</view>
						</view>
					</template>
					<template v-else>
						<view style="display: flex;justify-content: flex-end;">
							<u-button type="warning" :custom-style="{background: mainColor}" size="mini" shape="circle" :ripple="true" @click="handleReplayclick(item.id)">回复</u-button>
						</view>
					</template>
				</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
		},
		onShow() {
			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',
					})
				})
			},
			handleReplayclick(id) {
				uni.navigateTo({
					url: `/pagesMain/coachReply?id=${id}&classId=${this.classId}`
				})
			}
		},
	}
</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>