school/pages/course/evaluate.vue

<template>
	<view class="center">
		<view class="bg"></view>
		<view class="main">
			<view class="toux"><image :src="userInfo.avatar"></image></view>
			<view class="name">{{ userInfo.nickname }}</view>
			<view class="pj">您的评价让我们做的更好</view>
			<view class="fanqu">你的反馈将有助于提高我们的教师授课体验</view>
			<view class="dafen">为课程体验打分</view>
			<uniRate class="fenshu" text="1" size="44" margin="15" :value="evaluate_fraction" @change="rateChange1"></uniRate>
			<textarea v-model="evaluate" maxlength="300" focus placeholder="添加评价..."></textarea>
			<view class="button" @click="submit('/pages/course/success')">提交评价</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { setEvaluate,uploads } from '@/api/course.js';
import uniRate from '@/components/uni-rate/uni-rate.vue';
export default {
	computed: {
		...mapState(['hasLogin', 'userInfo', 'baseURL', 'urlFile'])
	},
	components: {
		uniRate
	},
	data(){
		return{
			cardimg: '',
			id: '',
			evaluate_fraction: '',//评分
			evaluate: '',//评价内容
			evaluate_imgs: '',//图片
		}
	},
	onLoad(option) {
		this.id = option.id;
	},
	methods: {
		imgsub() {
			console.log('上传照片')
			uploads({
				filename: ''
			}).then(data => {
				console.log("data",data);
				this.evaluate_imgs = data[0].url;
			})
		},
		submit(url){
			console.log(this.evaluate_fraction)
			setEvaluate({
				timetable_id: this.id,
				evaluate_fraction: this.evaluate_fraction,
				evaluate: this.evaluate,
				evaluate_imgs: this.evaluate_imgs
			}).then(() =>{
				uni.navigateTo({
					url: url
				})
			}).catch(err =>{
				console.log(err)
			})
		},
		nav(url) {
			uni.navigateTo({
				url: url
			})
		},
		rateChange1(val) {
			this.evaluate_fraction = val.value;
		},
	}
}
</script>

<style lang="scss">
.bg {
	position: relative;
	background: #DDFBFB;
	height: 300rpx;
}
.main{
	width: 90%;
	text-align: center;
	margin: 0 auto;
	margin-top: -190rpx;
	position: relative;
	background: #FFFFFF;
	padding-top: 94rpx;
	padding-bottom: 42rpx;
	box-shadow: 0px 23rpx 29rpx 0px rgba(24, 32, 93, 0.07);
	border-radius: 16rpx;
	.toux {
		position: absolute;
		top: -70rpx;
		left: 50%;
		margin-left: -71rpx;
		height: 142rpx;
		width: 142rpx;
		border-radius: 50%;
		box-shadow: 0rpx 16rpx 29rpx 0rpx rgba(24, 32, 93, 0.11);
		background-color: #ffff7f;
		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	.name {
		font-size: 37rpx;
		font-weight: bold;
		color: #303338;
	}
	.pj {
		margin-top: 114rpx;
		font-size: 45rpx;
		font-weight: bold;
		color: #FA7268;
	}
	.fanqu {
		margin-top: 32rpx;
		font-size: 21rpx;
		font-weight: 500;
		color: #8A8A8F;
	}
	.dafen {
		margin-top: 76rpx;
		font-size: 21rpx;
		font-weight: 500;
		color: #242E42;
		opacity: 0.5;
	}
	.fenshu {
		width: 560rpx;
		margin-left: 45rpx;
		margin-top: 82rpx;
	}
	textarea{
		padding: 20rpx;
		width: 80%;
		margin: 0 auto;
		margin-top: 86rpx;
		height: 232rpx;
		background: rgba(239, 239, 244, 0.5);
		border: 2rpx solid #EFEFF2;
		border-radius: 16rpx;
		font-size: 34rpx;
		font-weight: 500;
		text-align: left;
	}
	.button {
		margin: 0 auto;
		margin-top: 58rpx;
		width: 90%;
		height: 90rpx;
		background: #1CC7C7;
		border-radius: 16rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 90rpx;
	}
}

</style>