tra-app/src/pages/courseDetail/submit.vue

<template>
	<view class="max_page detail-main">
		<nav-bar :is_seat="false"></nav-bar>
		<view class="fixed_search_div">
			<view class="back_div" @click="common.navigateBack()">
				<view class="back-icon"></view>
			</view>
		</view>
		<view class="detail-body">
			<view class="title font_pf">发表评价</view>
			<view class="body-content">
				<view class="picture">
					<!-- <view class="pic-item" v-for="item in 4" :key="item"> -->
					<!-- <image class="w_100" src="/src/static/images/test/touxiang.png" mode="widthFix"></image> -->
					<picture-upload :limit="4" v-model="formData.imgIdList"></picture-upload>
					<!-- </view> -->
				</view>
				<view class="tips font_pf">最多可添加4张图片</view>
				<view class="num">
					<view class="num-pic">
						<image-preview class="img_100" :imgId="imgId" :isCache="true"></image-preview>
						<!-- <img class="w_100" src="/src/static/images/test/touxiang.png" mode="widthFix" /> -->
					</view>
					<view class="num-box">
						<view class="font_pf fz-28 c-666">综合评分(1-11)</view>
						<view class="slider-box">
							<!-- <uv-slider step="1" activeColor="#0066FF" :blockSize="14" v-model="formData.bbsGrade"
								:min="0" :max="10"></uv-slider> -->
							<slider :min="0" :max="10" :value="formData.bbsGrade" :step="0.1" :show-value="true"
								:blockSize="14"></slider>
						</view>
						<!-- <view class="flex-jcsb">
							<view class="font_pf fz-30 c-000">0</view>
							<view class="font_pf fz-30 c-000 tar">10</view>
						</view> -->
					</view>
				</view>
				<view class="tab">
					<view class="tab-btn" :class="{'is-active':formData.bbsTag=='SUG'}" @click="formData.bbsTag='SUG'">
						建议</view>
					<view class="tab-btn" :class="{'is-active':formData.bbsTag=='ASK'}" @click="formData.bbsTag='ASK'">
						提问</view>
				</view>
				<view class="input-textarea">
					<uv-textarea v-model="formData.bbsContent" height="124" count
						:maxlength="TextareaInputLimitCharacter"
						:placeholder="formData.bbsTag == 'SUG'?'请输入你的建议...':'请输入你的问题...'"></uv-textarea>
				</view>
			</view>
		</view>
		<view class="btn-box font_pf">
			<uv-button type="primary" @click="submit" :disabled="!formData.bbsContent">提交评价</uv-button>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		TextareaInputLimitCharacter
	} from "@/enum.js"
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		publishCrsEvaluation
	} from '@/api/courseDetail.js';
	import common from '@/common/common';

	const formData = reactive({
		"crsNum": null,
		"imgIdList": [], // 发表图片ID列表，文件ID集
		"bbsGrade": 10, // 综合评分(最高10分)
		"bbsTag": 'SUG', // 评价标签 （SUG 建议 ASK 提问 ）
		"bbsContent": '', // 评价内容
	})
	const imgId = ref('')
	const submit = () => {
		if (formData.bbsContent === '') {
			if (formData.bbsTag == 'SUG') {
				return common.msg('请输入你的建议')
			} else {
				return common.msg('请输入你的问题')
			}
		}
		publishCrsEvaluation(formData).then(res => {
			common.msg('发表成功')
			setTimeout(() => {
				common.navigateBack(1, () => {
					common.setPageCache('GLOBAL_TRIGGER_UPDATE_REFRESH_KEY', true)
				})
			}, 500)
		})
	}
	onLoad((params) => {
		formData.crsNum = params.crsNum;
		imgId.value = params.imgId;
	});
</script>

<style lang="scss" scoped>
	.detail-main {
		background-color: #f6f8ff;
	}

	.detail-body {
		box-sizing: border-box;
		min-height: calc(100vh - (var(--status-bar-height) + 50rpx));
		padding: 29rpx 37rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.title {
		color: #000000;
		font-size: 34rpx;
		height: 34rpx;
		font-weight: 600;
		margin-bottom: 30rpx;
	}

	.body-content {
		flex: 1;
		background-color: #ffffff;
		border-radius: 15rpx;
		padding: 36rpx;
	}





	.tips {
		color: #666666;
		font-size: 24rpx;
		margin-top: 24rpx;
		margin-bottom: 28rpx;
	}

	.num {
		display: flex;
		width: 100%;
		// height: 92rpx;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}

	.num-pic {
		width: 92rpx;
		height: 92rpx;
		// margin-top: 20rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.num-box {
		flex: 1;
		display: flex;
		// height: 100%;
		justify-content: space-between;
		flex-direction: column;
	}

	.slider-box {
		width: 100%;

		:deep(.uv-slider) {
			width: 100%;
		}

		:deep(uni-slider) {
			margin: 0 0rpx 10rpx 0;
		}

		:deep(.uni-slider-tap-area) {
			padding: 10rpx 0;
		}

		:deep(.uni-slider-thumb) {
			border: 2px solid #0066ff;
		}

		:deep(.uni-slider-value) {
			color: #0066FF;
			font-size: 15px;
			margin-left: 1em;
			font-weight: 600;
			font-family: Arial;
		}
	}

	.tab {
		display: flex;
		margin-bottom: 30rpx;
	}

	.tab-btn {
		width: 78rpx;
		height: 36rpx;
		font-size: 22rpx;
		color: #999999;
		text-align: center;
		border-radius: 8rpx;
		border: 2rpx solid #999999;
		margin-right: 30rpx;
	}

	.is-active {
		color: #0066ff;
		border: 2rpx solid #0066ff;
	}

	.input-textarea {
		// height: 250rpx;
		// padding-bottom: 250rpx;
	}

	.btn-box {
		position: fixed;
		bottom: 0;
		// height: 187rpx;
		width: 100%;
		display: flex;
		padding-bottom: 30rpx;
		justify-content: space-evenly;

		:deep(.uv-button) {
			border-radius: 14rpx;
			width: 616rpx;
			height: 80rpx;
		}
	}

	.c-666 {
		color: #666666;
	}

	.c-000 {
		font-weight: 600;
		color: #000;
	}

	.fixed_search_div {
		padding: calc(10rpx + var(--status-bar-height)) 15rpx 24rpx 30rpx;
		display: flex;
		align-items: center;

		.back_div {
			margin-right: 10rpx;

			.back-icon {
				position: relative;
				width: 40rpx;
				height: 40rpx;
				cursor: pointer;
			}

			.back-icon::before,
			.back-icon::after {
				content: '';
				position: absolute;
				transition: all 0.3s ease;
			}

			.back-icon::after {
				top: 25%;
				left: 25%;
				width: 40%;
				height: 40%;
				border-top: 4rpx solid #2b2c2e;
				border-left: 4rpx solid #2b2c2e;
				transform: rotate(-45deg);
			}
		}
	}
</style>