YwxAppThink/addon/wxchat/YwxMakeFriends/pages/my/feedback.uvue

<template>
	<view class="page">
		<view class="-status-bar"></view>
		<view class="header">
			<text class="title">意见反馈</text>
		</view>
		<scroll-view direction="vertical" :show-scrollbar="false" style="flex:1;" class="form">
			<view class="section">
				<text class="label">反馈类型</text>
				<view class="type-row">
					<view v-for="(t, idx) in types" :key="t.value" class="type-item" :class="{ active: type == t.value }" @click="type = t.value">
						<text class="type-text">{{ t.label }}</text>
					</view>
				</view>
			</view>

			<view class="section">
				<text class="label">反馈内容</text>
				<textarea class="textarea" v-model="content" placeholder="请描述您遇到的问题或建议（最多500字）" maxlength="500" />
				<text class="counter">{{ content.length }}/500</text>
			</view>

			<view class="section">
				<text class="label">联系方式（选填）</text>
				<input class="input" v-model="contact" placeholder="手机号/微信，方便我们回复您" />
			</view>

			<view class="submit-btn" :class="{ disabled: submitting }" @click="onSubmit">
				<text class="submit-text">{{ submitting ? '提交中...' : '提交反馈' }}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="uts">
	import Api from '@/common/api-service.uts'

	type IType = { label : string, value : number }

	const types = reactive<IType[]>([
		{ label: '功能建议', value: 1 },
		{ label: '投诉举报', value: 2 },
		{ label: '其他', value: 3 }
	])
	const type = ref<number>(1)
	const content = ref<string>('')
	const contact = ref<string>('')
	const submitting = ref<boolean>(false)

	function onSubmit() {
		if (submitting.value) return
		if (content.value.trim() == '') {
			uni.showToast({ title: '请输入反馈内容', icon: 'none' })
			return
		}
		submitting.value = true
		Api.feedback.save({ type: type.value, content: content.value, contact: contact.value })
			.then(() => {
				uni.showToast({ title: '提交成功', icon: 'success' })
				content.value = ''
				contact.value = ''
			})
			.catch((e : any) => {
				const msg = e && e.message ? e.message : '提交失败'
				uni.showToast({ title: msg, icon: 'none' })
			})
			.finally(() => { submitting.value = false })
	}
</script>

<style lang="scss">
	.page {
		flex: 1;
		background-color: #f7f7f7;
	}

	.-status-bar {
		height: var(--status-bar-height);
		background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
	}

	.header {
		background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
		padding: 24rpx 30rpx 36rpx;
		display: flex;
		align-items: center;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #fff;
	}

	.form {
		padding: 24rpx 30rpx;
	}

	.section {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 24rpx;
	}

	.label {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.type-row {
		display: flex;
		flex-flow: row wrap;
	}

	.type-item {
		padding: 14rpx 36rpx;
		border-radius: 30rpx;
		background-color: #f2f2f2;
		margin: 0 20rpx 16rpx 0;
	}

	.type-item.active {
		background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
	}

	.type-text {
		font-size: 26rpx;
		color: #666;
	}

	.type-item.active .type-text {
		color: #fff;
	}

	.textarea {
		width: 100%;
		height: 200rpx;
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
	}

	.counter {
		font-size: 22rpx;
		color: #bbb;
		float: right;
		margin-top: 8rpx;
	}

	.input {
		width: 100%;
		height: 70rpx;
		font-size: 28rpx;
		color: #333;
	}

	.submit-btn {
		margin: 40rpx 30rpx 60rpx;
		height: 92rpx;
		border-radius: 46rpx;
		background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 10rpx 30rpx rgba(255, 107, 107, 0.3);
	}

	.submit-btn.disabled {
		opacity: 0.6;
	}

	.submit-text {
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
	}
</style>