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>
					</view>
				</view>
				<view class="tips font_pf">最多可添加4张图片</view>
				<view class="num">
					<view class="num-pic">
						<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">综合评分</view>
						<view class="slider-box">
							<uv-slider step="1" activeColor="#0066FF" :blockSize="14" v-model="num" min="0" max="10"></uv-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="activeTab == 1 ? 'is-active' : ''" @click="changeTab(1)">建议</view>
					<view class="tab-btn" :class="activeTab == 2 ? 'is-active' : ''" @click="changeTab(2)">提问</view>
				</view>
				<view class="input-textarea">
					<uv-textarea v-model="aaa"  height="124" :placeholder="activeTab == 1?'请输入你的建议...':'请输入你的问题...'"></uv-textarea>
				</view>
			</view>
		</view>
		<view class="btn-box font_pf">
			<uv-button type="primary">去学习</uv-button>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getCourseDetailApi } from '@/api/courseDetail.js';
// import {formatDate2} from '@/common/common.js'
import common from '@/common/common';
const num = ref(0);
const activeTab = ref(1);
const aaa = ref('')
const changeTab = (type) => {
	activeTab.value = type;
};
// tab栏
onLoad((params) => {});
</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;
}
.picture {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.pic-item {
	width: 170rpx;
	height: 170rpx;
	border-radius: 8rpx;
	background-color: red;
	margin-bottom: 24rpx;
}
.tips {
	color: #666666;
	font-size: 24rpx;
	margin-bottom: 28rpx;
}
.num {
	display: flex;
	width: 100%;
	// height: 92rpx;
	justify-content: space-between;
	margin-bottom: 40rpx;
}
.num-pic {
	width: 92rpx;
	height: 92rpx;
	padding-top: 20rpx;
	margin-right: 20rpx;
}
.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 16rpx 10rpx 0;
	}
	:deep(.uni-slider-tap-area) {
		padding: 10rpx 0;
	}
	:deep(.uni-slider-thumb) {
		border: 2px solid #0066ff;
	}
}
.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>