zhxy-desk/components/teaMark.vue

<template>
	<view class="mark">
		<view class="mark-item">
			<view class="mark-item-left">
				评分
			</view>
			<view class="mark-item-right">
				<uni-data-select v-model="value" :localdata="range"></uni-data-select>
			</view>
		</view>
		<view class="mark-item">

			<view style="width: 100%;" class="">
				<view style="margin-bottom: 32rpx;" class="">
					评价
				</view>
				<view class="tag">
					<view @click="tagClick(item)" :class="item.show? 'active':''" v-for="(item,index) in tagList"
						:key="index" class="tag-item">
						{{item.tab_name}}
					</view>
				</view>
				<view style="width: 100%;margin-top: 32rpx;" class="">
					<uni-easyinput :maxlength="100" type="textarea" autoHeight v-model="remark"
						placeholder="备注"></uni-easyinput>
				</view>

			</view>

		</view>


		<view class="mark-btn">
			<view @click="ok" class="mark-left">
				确定
			</view>
			<view @click="close" class="mark-right">
				关闭
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "teaMark",
		props: ['id'],
		data() {
			return {
				value: 0,
				range: [{
						value: 100,
						text: "A+",

					},
					{
						value: 95,
						text: "A",

					},
					{
						value: 90,
						text: "A-",

					},
					{
						value: 85,
						text: "B",

					},
					{
						value: 80,
						text: "C",
					},
				],
				tagList: [],
				remark: ''
			};
		},
		methods: {
			tagClick(item) {
				item.show = !item.show
			},
			getTag() {
				this.$api.sendRequest({
					url: `/mobile/teacher/tabs?teacher_id=${this.id}`,
					success: res => {
						res.data.forEach(item => {
							item.show = false
						})
						this.tagList = res.data
					},

				})
			},
			ok() {

				if (this.value == '') {
					uni.showToast({
						title: '请选择评分',
						'icon': 'none',

					});
					return
				}

				let arr = []
				this.tagList.forEach(item => {
					if (item.show) {
						arr.push(item.tab_id)
					}
				})
				if (arr.length == 0) {
					uni.showToast({
						title: '请选择评价',
						'icon': 'none',

					});
					return
				}
				
				 let obj = {
					 tab_ids:arr,
					 remark:this.remark,
					 score:this.value,
					 
				 }
				this.$emit('okClick',obj)
			},
			close(){
				this.$emit('close')
			}
		},
		mounted() {
			this.getTag()
		}
	}
</script>

<style lang="scss">
	.mark-btn {
		width: 100%;
		margin-top: 32rpx;
		display: flex;
		height: 60rpx;
		font-size: 36rpx;
		line-height: 56rpx;

		.mark-left {
			border: 1px solid #05CCA1;
			flex: 1;
			color: #05CCA1;
			text-align: center;
			border-radius: 30rpx;
			margin-right: 16rpx;
		}

		.mark-right {
			flex: 1;
			text-align: center;
			border-radius: 30rpx;
			border: 1px solid #999;
			color: #999;
			margin-left: 16rpx;

		}
	}

	.mark {
		width: 100%;
		box-sizing: border-box;
		padding: 0 32rpx 32rpx 32rpx;

	}

	.mark-item {
		padding: 32rpx 0;
		border-bottom: 1px solid #f2f2f2;
		display: flex;
		align-items: center;
	}

	.mark-item-left {
		margin-right: 32rpx;
	}

	.mark-item-right {
		flex: 1;
	}

	.tag {
		display: flex;
		flex-wrap: wrap;

		.tag-item {
			border: 1px solid #999;
			color: #999;
			border-radius: 5px;
			padding: 10rpx 16rpx;
			margin-right: 10rpx;
			margin-bottom: 16rpx;
		}

		.active {
			background: rgba(5, 204, 161, 0.20);
			border: 1px solid #05cca1;
			color: #05CCA1;
		}
	}
</style>