swim-weapp/pages/course/evaluate.vue

<template>
	<view class="evaluate">
		<view class="top">
			<image :src="coachMess.head_portrait" mode="" class="avatar"></image>
			<view class="name">
				{{coachMess.name}}--{{coachMess.courseName}}
			</view>
		</view>
		<view class="content">
			<view class="ques">
				小朋友上完是否学会了？
			</view>
			<view class="tab">
				<view :class="currentTab==0 ? 'active' : 'left'" @click="changTab(0)">
					未学会
				</view>
				<view :class="currentTab==1 ? 'active' : 'right'" @click="changTab(1)">
					已学会
				</view>
			</view>
			<view class="ques">
				你的好评是给教练最好的鼓励
			</view>
			<view class="start">
				<u-rate :count="count" v-model="value" active-color="#FF6615" inactive-color="#b2b2b2" size="64" gutter="28"></u-rate>
			</view>
			<view class="body">
				<u-input v-model="body" :type="type" :height="height" :auto-height="autoHeight" placeholder="写下您对教练的评价吧~"/>
			</view>
		</view>
		<view class="submit">
			<view class="bt" @click="submit">
				提交评价
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: 5,
				value: 0,
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				body: '',
				type: 'textarea',
				height:300,
				autoHeight: true,
				currentTab:0,
				courseChildId:'',
				subscribeId:'',
				coachMess:''
				
			}

		},
		onLoad(options) {
			console.log(options.data)
			let data=JSON.parse(options.data)
			this.coachMess=data
			this.courseChildId=data.course_child_id
		},	
		methods:{
			//切换学习状态
			changTab(e){
				this.currentTab=e
			},
			submit(){
				let data={
					course_child_id:this.courseChildId,
					point:this.value,
					body:this.body,
					is_complete:this.currentTab,
				}
				this.$u.post('/course/evaluate',data).then(res=>{
					console.log(res,'ppppp')
					if(res.code==200){
						uni.switchTab({
							url:'../index/index'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.evaluate {
		padding-bottom: 55px;
		.top {
			text-align: center;
			height: 180px;
			background: linear-gradient(267deg, #FF3B21 0%, #FF8F09 100%);
			opacity: 1;

			.avatar {
				margin-top: 23px;
				height: 78px;
				width: 78px;
				display: inline-block;
				border-radius: 50%;
			}

			.name {
				margin-top: 14px;
				font-size: 19px;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 26px;
				color: #FFFFFF;
				opacity: 1;
			}
		}

		.content {
			margin-top: -12px;
			padding: 12px;
			border-radius: 8px 8px 0px 0px;
			background-color: #FFFFFF;

			.ques {
				font-size: 15px;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 21px;
				text-align: center;
				color: #333333;
				opacity: 1;
			}

			.tab {
				width: 218px;
				height: 42px;
				background: #FFEEE5;
				opacity: 1;
				border-radius: 21px;
				margin: 0 auto;
				margin-top: 12px;
				margin-bottom: 20px;

				display: flex;

				.left,
				.right {
					flex: 1;
					height: 42px;
					line-height: 42px;
					text-align: center;
					font-size: 15px;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FF4600;
					opacity: 1;
				}

				.active {
					flex: 1;
					height: 42px;
					line-height: 42px;
					text-align: center;
					background: linear-gradient(267deg, #FF3B21 0%, #FF8F09 100%);
					border-radius: 21px;
					color: #FFFFFF;
				}
			}

			.start {
				margin-top: 12px;
				text-align: center;
			}
			.body{
				margin-top: 20px;
				.u-input__textarea{
					background-color:#F5F5F5!important;
					padding: 12px;
				}
			}
		}
.submit{
	height: 50px;
	box-shadow: 0px -2px 12px rgba(0, 0, 0, 0.1);
	position: fixed;
	bottom: 0px;
	left: 0;
	width: 100%;
	.bt{
		height: 44px;
		margin: 3px 12px 0;
		background: linear-gradient(266deg, #FF3B21 0%, #FF8F09 100%);
		border-radius: 22px;
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: bold;
		text-align: center;
		line-height: 45px;
		color: #FFFFFF;
		opacity: 1;
	}
}
	}
</style>