renli-wx/pages/tabBar/mySet/common/expense/appraise/appraise.vue

<template>
	<view>
		<view>
			<view class="" v-show="!appraiseShow">
				<view class='module'>
					<view class="cu-bar bg-white solid-bottom margin-top">
						<view class='action'>
							<text class='cuIcon-titles text-orange'></text> 服务态度
							<view class="stars-wrapper">
								<view v-for="n in 5" @mouseenter="csAttitudeStarEnter(n)" @mouseleave="csAttitudeStarLeave()" @click="csAttitudeStarSelected(n)"
								 :class="{'on':form.csAttitudeStar>=n}"></view>
							</view>
						</view>
					</view>
				</view>
				<view class='module'>
					<view class="cu-bar bg-white solid-bottom margin-top">
						<view class='action'>
							<text class='cuIcon-titles text-orange'></text> 服务技术
							<view class="stars-wrapper">
								<view v-for="n in 5" @mouseenter="csTechnicalStarEnter(n)" @mouseleave="csTechnicalStarLeave()" @click="csTechnicalStarSelected(n)"
								 :class="{'on':form.csTechnicalStar>=n}"></view>
							</view>
						</view>
					</view>
				</view>
				<view class='module'>
					<view class="cu-bar bg-white solid-bottom margin-top">
						<view class='action'>
							<text class='cuIcon-titles text-orange'></text> 其他评价
							<view class="stars-wrapper">
								<view v-for="n in 5" @mouseenter="csOtherStarEnter(n)" @mouseleave="csOtherStarLeave()" @click="csOtherStarSelected(n)"
								 :class="{'on':form.csOtherStar>=n}"></view>
							</view>
						</view>
					</view>
				</view>
				<view class='module'>
					<view class="cu-bar bg-white solid-bottom margin-top">
						<view class='action'>
							<text class='cuIcon-titles text-orange'></text> 评价内容
						</view>
					</view>
					<view class='content'>
						<textarea v-model='form.csAppraise' placeholder='请输入评价内容' maxlength="-1"></textarea>
					</view>
				</view>
				<button @click='submit' class="submit cu-btn bg-red round margin-tb-sm lg">提交评价</button>
			</view>

		</view>
		<view class="" v-show="appraiseShow">
	<view class="flex-sub text-center">
					<view class="solid-bottom text-xsl padding">
						<text class=" cuIcon-roundcheckfill text-green"></text>
					</view>
					<navigator url="../expense">
					<view class="padding">评价完成 , 返回上一页</view>
					</navigator>
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: false, //鼠标点击后变成true，鼠标进入进出事件就不会改变背景图
				form: {
					csOtherStar: 0, //其他
					csTechnicalStar: 0, //技术
					csAttitudeStar: 0, //态度
					csAppraise: null,
				},
				appraiseShow: false,
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
				console.log(option.id); //打印出上个页面传递的参数。
				this.form.id = option.id 

		},
		methods: {
			submit() {
				this.$api.appraise(this.form).then(res => {
						if (res.code == '000000') {
							this.appraiseShow=true
							setTimeout(function() {
								uni.redirectTo({
									url:'../expense'
								})
							}, 10000);
						}
					}

				)

			},
			csOtherStarEnter(idx) {
				if (!this.flag) {
					this.cur = idx;
					this.flag = false
				}
			},
			csTechnicalStarEnter(idx) {
				if (!this.flag) {
					this.cur = idx;
					this.flag = false
				}
			},
			csAttitudeStarEnter(idx) {
				if (!this.flag) {
					this.csAttitudeStar = idx;
					this.flag = false
				}
			},
			csOtherStarLeave() {
				if (!this.flag) {
					this.form.csOtherStar = -1;
					this.flag = false
				}
			},
			csTechnicalStarLeave() {
				if (!this.flag) {
					this.form.csTechnicalStar = -1;
					this.flag = false
				}
			},
			csAttitudeStarLeave() {
				if (!this.flag) {
					this.form.csAttitudeStar = -1;
					this.flag = false
				}
			},
			csOtherStarSelected(n) {
				this.flag = true;
				this.form.csOtherStar = n;
			},
			csTechnicalStarSelected(n) {
				this.flag = true;
				this.form.csTechnicalStar = n;
			},
			csAttitudeStarSelected(n) {
				this.flag = true;
				this.form.csAttitudeStar = n;
			},
		}
	}
</script>

<style>
	.content {
		background-color: white;
		padding-left: 35upx;
	}

	textarea {
		width: 100%;
		height: 300upx;
		background-color: white;
		padding: 35upx 35upx 35upx 0;
	}

	.submit {
		margin: 20upx 10%;
		width: 80%;
	}

	.stars-wrapper {
		background-color: #FFFFFF;
		padding: 20upx 30upx;
	}

	.stars-wrapper view {
		width: 38upx;
		height: 38upx;
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkMyRENERDc2MTQ3MDExRTk4RjNCRDAzNTY2RjUzMDY2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkMyRENERDc3MTQ3MDExRTk4RjNCRDAzNTY2RjUzMDY2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QzJEQ0RENzQxNDcwMTFFOThGM0JEMDM1NjZGNTMwNjYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QzJEQ0RENzUxNDcwMTFFOThGM0JEMDM1NjZGNTMwNjYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6VuCzfAAADhUlEQVR42sSYe2iOURzH373NPZvLejEhjKmtLZdQbCWlTUgslCRhcsvksho2c0mW26Yt2/iDXFpzyT1RDKm5hMJspWyj5pIhizGb74/vqdPTe3n2Po/n/dWnc97zPpfv8zuX3++csOLiYpcN1hkUgkEgC9w3e2N6errX9nCXPXYdTGS9EnQBP6w80G2DqPEUVQMesi3D6kPtEJbPMgfMYj0r1MLGgLGsnwb1oA50B4tDKewAywLQwvomlttCJUw8NQG0shuVHQfvQDSYEwphJ1lmgs+G/5axPOS0sKlgKGgCe7z8fx68BT3BQieF7TMxjtRY2+CUsMEgFvwCe/1cdxR8B3GggxPCtrLcDn6bvPYaWASSQV8zLwljrIwEHtCV4yKKXokBCeAjmA5+st4NRNBr/kw89YbP1k0myxNGimrwCnxiewPiZ7MIm4If5XyRL/vCL5X4N5ACG0x6uBeYz4+MZ9f28XP9e7A6nAM5gsob+UKp1zL+1bNUVtfOrhdPHDS0Sa8MByNYiuAh7LkBoEyEveZXXALrXc5YI7OQSj3tKSkpSUVxRQ3+NWxfB7JdITKIStQW7Qw3B95MNuQSp0WN4mToAc7Ai/lubaWex3q2k+IgSpaQB/wpotKM61gZ0xgl7pgDumS2VlBHnhLlbYF9pOVXC+zIRP1YPDORv+kTRGUGWvnFrUms7wcr/oMoWQvvsF4IUWvNhqS7YIa6ESyxUVQ0e0YG+mGIWtXeWHkR7GS9FMy1QZSHW7so9szSYIP4ZubyaqBaNdl39mc0SLKaXahAXWGDsKegDXQCzVaFTWL5zAZhEvyrmJ3EWhHm0fKnGpsG/2OWw6wIU1/1lcHeDntueHZQwmK0bmyzSVg1yzh/FwU6VFE3vzDxwtmcceeYw/myKjPCAnks0TAuvJkE/5dcVvKZSBaBfgE8ZqkrEwwP020yuA1O8SX3JDvgf8s5JnO4NOjWSo9GBiust7aJqDHMVPHODS6SjUw25bggjaFMcquO3CXJR6V4Wc/UfiAoYSpnr9c2r7UcT2I7GJALDKFsJFgJPnC1v8r20bzmbKAlwx0g2LoY21IoKM/171izlJuGLeCbj/uLuDlWRwjTuF3L1U6GxgUzK9VRZYrWFZKq7KIHzFgTvXwZbASphn1FSzAek13Mbm5YL3CGJrdDlG63eBAjW7UTFHQTHPF1wx8BBgBGdNDH1AgKhgAAAABJRU5ErkJggg==');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-right: 30upx;
		display: inline-block;
	}

	.stars-wrapper .on {
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJGNzUxM0YxMTQ3MDExRTlCMkMxQTAyRjJEODVFNjM4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJGNzUxM0YyMTQ3MDExRTlCMkMxQTAyRjJEODVFNjM4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkY3NTEzRUYxNDcwMTFFOUIyQzFBMDJGMkQ4NUU2MzgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkY3NTEzRjAxNDcwMTFFOUIyQzFBMDJGMkQ4NUU2MzgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6Tfw3WAAACM0lEQVR42syYSShFURjHr0ciMmcoU6ZneoliYYEshHobCxJWMiUbw042VsqwsZKsDGVaeGJhQ1akFMmYCEsylFiQ/8336vW679zh3OF99evdzj3n3t+7Zz4Bn44yQYeIACsgEQwDl9KCoScHkulBgj4xA2roeoNEP3geaNNBKgU0eaUN8T5UD7ExibR+EGilWAJolkgPAz1Wis0x7o2CECvESkA9434UVanpYlMK8gyZLVYEKhTkE79al5likyry9polFgmqVeR3gFi1L1Ey8seBdJAPsoFTw5/ZpR58D27o941VIMBjrnQL5IEMUAAKQSqNS3rGK3gEZ+Aa3IFz8IS5894tlobfVZALwgVr4xecgnZRbBsXtYJ/xZuNqsrfIlIU6/RDsQF3468DW34itYAO0OrZKxvAmsVSm5Byeg+w66DNQqkdt5TUyD8POiyQ2oNUjdyUNAu6TZRyQaqKNfJ7h5M2FkbGDKS61E7iLlqFGhWHrCWR3OpihPaLeoc4H1byLnveDRD7Bl+8YuUGiOWAZB6xOFqDGREOHrE8HY8RvKOARyzbwF5p5xGzGyiWySOWY6BYNI9YvooXXYEjM8Ri5D43xQvtuMVqLxX+j6QuFZRLYsnZZIYKuaOkCeog4x5py7SxGSBpXxEMsrSIxTPuLdJQMsh4+SRJTzOeU6xF7NdHO2oELeBCYTX30amQVPsL1yJ2DPbBD3gQ/o+U7Bon9W1qf+Jh3i2lPYMlXwX+BBgA/6doZQMn2nUAAAAASUVORK5CYII=');
	}
</style>