book-hi/pages-sell/pages/feedback.vue

<template>
	<view class="feedback-page">
		<u-navbar title="反馈" :is-back="true" :border-bottom="false"></u-navbar>

		<view class="content">
			<view class="card">
				<view class="card-title">您在搜索书籍环节遇到了哪些问题？</view>
				<view class="input-container">
					<u-input v-model="description" type="textarea" placeholder="填写的信息越全，问题越可有效解决哦~" :border="false"
						:height="300" :auto-height="false" :custom-style="{ padding: '0' }" show-limit-word />
					<view class="upload-wrapper">
						<image-upload v-model="fileList" :max-count="3"></image-upload>
					</view>
				</view>
			</view>

			<view class="card">
				<view class="card-title">您愿意为本次体验打多少分？</view>
				<view class="score-wrapper">
					<view class="score-text">体验糟糕</view>
					<view class="score-options">
						<view class="score-item" v-for="i in 5" :key="i" :class="{ active: score === i + 1 }"
							@click="score = i + 1">
							{{ i + 1 }}
						</view>
					</view>
					<view class="score-text">体验超赞</view>
				</view>
			</view>
		</view>

		<view class="footer">
			<u-button type="success" shape="circle"
				:custom-style="{ backgroundColor: '#38C148', height: '88rpx', fontSize: '32rpx' }" @click="onSubmit">
				提交
			</u-button>
		</view>
	</view>
</template>

<script>
	import ImageUpload from '@/pages-sell/components/image-upload/index.vue';

	export default {
		components: {
			ImageUpload
		},
		data() {
			return {
				description: '',
				fileList: [],
				score: 5
			};
		},
		methods: {
			onSubmit() {
				if (!this.description.trim() && this.fileList.length === 0) {
					this.$u.toast('请填写问题描述或上传图片');
					return;
				}

				const params = {
					description: this.description,
					fileUrlList: this.fileList,
					score: this.score
				};
				uni.$u.http.post('/token/shop/feedback/submit', params).then(res => {
					this.$u.toast('提交成功');
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}).catch(err => {
					// 错误处理通常由拦截器完成，这里可以根据需要补充
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.feedback-page {
		min-height: 100vh;
		background-color: #f8f8f8;
	}

	.content {
		padding: 20rpx 30rpx;
	}

	.card {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;

		.card-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 30rpx;
		}
	}

	.input-container {
		background-color: #f8f8f8;
		border-radius: 12rpx;
		padding: 20rpx;

		.upload-wrapper {
			margin-top: 20rpx;
		}
	}

	.score-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10rpx;

		.score-text {
			font-size: 24rpx;
			color: #999999;
		}

		.score-options {
			display: flex;
			gap: 20rpx;
		}

		.score-item {
			width: 60rpx;
			height: 60rpx;
			background-color: #ffffff;
			border: 2rpx solid #e5e5e5;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			color: #333333;
			font-weight: bold;

			&.active {
				background-color: #d7f4da; // Light green background for active
				border-color: #38C148;
				color: #38C148;
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		padding: 20rpx 30rpx;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
</style>