Skip to content

Commit 69f9440

Browse files
viarotelviarotel
committed
feat: 🚀 新增意见反馈模板
1 parent 643e8e6 commit 69f9440

File tree

4 files changed

+259
-0
lines changed

4 files changed

+259
-0
lines changed

‎pages.config.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,20 @@ export default defineUniPages({
140140
},
141141
],
142142
},
143+
{
144+
root: 'pages/feedback',
145+
pages: [
146+
{
147+
path: 'index',
148+
aliasPath: '/feedback',
149+
name: 'feedback',
150+
style: {
151+
navigationBarTitleText: '意见反馈',
152+
transparentTitle: 'auto',
153+
},
154+
},
155+
],
156+
},
143157
],
144158
tabBar: {
145159
color: '#999999',

‎src/pages.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,20 @@
139139
}
140140
}
141141
]
142+
},
143+
{
144+
"root": "pages/feedback",
145+
"pages": [
146+
{
147+
"path": "index",
148+
"aliasPath": "/feedback",
149+
"name": "feedback",
150+
"style": {
151+
"navigationBarTitleText": "意见反馈",
152+
"transparentTitle": "auto"
153+
}
154+
}
155+
]
142156
}
143157
],
144158
"tabBar": {

‎src/pages/feedback/index.vue‎

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
<script setup>
2+
import { showToast } from '@uni-helper/uni-promises'
3+
4+
const feedbackForm = ref({
5+
type: '功能建议',
6+
content: '',
7+
contact: '',
8+
})
9+
10+
const feedbackTypes = [
11+
{ label: '功能建议', value: '功能建议' },
12+
{ label: '问题反馈', value: '问题反馈' },
13+
{ label: '其他', value: '其他' },
14+
]
15+
16+
const isSubmitting = ref(false)
17+
18+
// 选择反馈类型
19+
function selectFeedbackType(type) {
20+
feedbackForm.value.type = type
21+
}
22+
23+
// 提交反馈
24+
async function submitFeedback() {
25+
// 表单验证
26+
if (!feedbackForm.value.content.trim()) {
27+
await showToast({
28+
title: '请填写反馈内容',
29+
icon: 'none',
30+
})
31+
return
32+
}
33+
34+
if (feedbackForm.value.content.trim().length < 10) {
35+
await showToast({
36+
title: '反馈内容至少需要10个字符',
37+
icon: 'none',
38+
})
39+
return
40+
}
41+
42+
try {
43+
isSubmitting.value = true
44+
45+
// 模拟提交请求
46+
await new Promise(resolve => setTimeout(resolve, 1500))
47+
48+
await showToast({
49+
title: '反馈提交成功',
50+
icon: 'success',
51+
})
52+
53+
// 重置表单
54+
feedbackForm.value = {
55+
type: '功能建议',
56+
content: '',
57+
contact: '',
58+
}
59+
60+
// 延迟返回上一页
61+
setTimeout(() => {
62+
uni.navigateBack()
63+
}, 1500)
64+
}
65+
catch (error) {
66+
await showToast({
67+
title: '提交失败，请重试',
68+
icon: 'error',
69+
})
70+
}
71+
finally {
72+
isSubmitting.value = false
73+
}
74+
}
75+
76+
// 字符计数
77+
const contentLength = computed(() => feedbackForm.value.content.length)
78+
const maxLength = 500
79+
</script>
80+
81+
<template>
82+
<view class="feedback-page h-full flex flex-col bg-gray-50">
83+
<!-- 页面头部 -->
84+
<view class="header-section relative">
85+
<view class="h-32 from-primary-400 to-primary-500 bg-gradient-to-br"></view>
86+
87+
<view class="absolute inset-0 flex items-center justify-center">
88+
<view class="text-center text-white">
89+
<view class="mb-2 text-2xl font-bold">
90+
意见反馈
91+
</view>
92+
<view class="text-sm text-white/80">
93+
您的建议是我们前进的动力
94+
</view>
95+
</view>
96+
</view>
97+
</view>
98+
99+
<!-- 表单内容 -->
100+
<view class="form-section relative z-10 flex-1 px-4 -mt-4">
101+
<view class="overflow-hidden rounded-xl bg-white shadow-lg">
102+
<!-- 反馈类型选择 -->
103+
<view class="border-b border-gray-100 px-5 py-4">
104+
<view class="mb-3 text-base text-gray-800 font-medium">
105+
反馈类型
106+
</view>
107+
<view class="flex space-x-3">
108+
<view
109+
v-for="type in feedbackTypes"
110+
:key="type.value"
111+
class="flex-1 rounded-lg border-2 px-3 py-2 text-center text-sm font-medium transition-all duration-200"
112+
:class="[
113+
feedbackForm.type === type.value
114+
? 'border-primary-500 bg-primary-50 text-primary-600'
115+
: 'border-gray-200 bg-gray-50 text-gray-600 active:bg-gray-100',
116+
]"
117+
@click="selectFeedbackType(type.value)"
118+
>
119+
{{ type.label }}
120+
</view>
121+
</view>
122+
</view>
123+
124+
<!-- 反馈内容 -->
125+
<view class="border-b border-gray-100 px-5 py-4">
126+
<view class="mb-3 flex items-center justify-between">
127+
<view class="text-base text-gray-800 font-medium">
128+
反馈内容 <text class="text-red-500">
129+
*
130+
</text>
131+
</view>
132+
<view class="text-xs text-gray-400">
133+
{{ contentLength }}/{{ maxLength }}
134+
</view>
135+
</view>
136+
<textarea
137+
v-model="feedbackForm.content"
138+
class="w-full resize-none rounded-lg border border-gray-200 bg-gray-50 px-3 py-3 text-sm text-gray-700 placeholder-gray-400 transition-colors duration-200 focus:border-primary-500 focus:bg-white focus:outline-none"
139+
placeholder="请详细描述您的问题或建议，我们会认真对待每一条反馈..."
140+
:maxlength="maxLength"
141+
rows="6"
142+
/>
143+
</view>
144+
145+
<!-- 联系方式 -->
146+
<view class="px-5 py-4">
147+
<view class="mb-3 text-base text-gray-800 font-medium">
148+
联系方式 <text class="text-xs text-gray-400 font-normal">
149+
（选填）
150+
</text>
151+
</view>
152+
<input
153+
v-model="feedbackForm.contact"
154+
class="w-full h-9 rounded-lg border border-gray-200 bg-gray-50 px-3 text-sm text-gray-700 placeholder-gray-400 transition-colors duration-200 focus:border-primary-500 focus:bg-white focus:outline-none"
155+
placeholder="请输入联系方式"
156+
type="text"
157+
/>
158+
</view>
159+
</view>
160+
161+
<!-- 提交按钮 -->
162+
<view class="mt-6 px-2">
163+
<button
164+
class="w-full rounded-xl from-primary-500 to-primary-400 bg-gradient-to-r px-6 py-4 font-semibold shadow-lg transition-all duration-200 active:scale-98 disabled:cursor-not-allowed !text-white disabled:opacity-70"
165+
:class="{ 'shadow-xl': !isSubmitting }"
166+
:disabled="isSubmitting || !feedbackForm.content.trim()"
167+
@click="submitFeedback"
168+
>
169+
<view class="flex items-center justify-center space-x-2">
170+
<view v-if="isSubmitting" class="i-carbon-fade h-5 w-5 animate-spin"></view>
171+
<view v-else class="i-carbon-send h-5 w-5"></view>
172+
<text>{{ isSubmitting ? '提交中...' : '提交反馈' }}</text>
173+
</view>
174+
</button>
175+
</view>
176+
177+
<!-- 温馨提示 -->
178+
<view class="mt-4 rounded-lg bg-blue-50 p-4">
179+
<view class="flex items-start space-x-2">
180+
<view class="i-carbon-information mt-0.5 h-4 w-4 flex-shrink-0 text-primary-500"></view>
181+
<view class="text-xs text-primary-600 leading-relaxed">
182+
<view class="mb-1 font-medium">
183+
温馨提示：
184+
</view>
185+
<view>• 我们会在1-3个工作日内回复您的反馈</view>
186+
<view>• 如需紧急处理，请通过"联系我们"页面联系客服</view>
187+
<view>• 您的隐私信息将得到严格保护</view>
188+
</view>
189+
</view>
190+
</view>
191+
</view>
192+
</view>
193+
</template>
194+
195+
<style scoped>
196+
/* 自定义样式 */
197+
.feedback-page {
198+
min-height: 100vh;
199+
}
200+
201+
/* 输入框聚焦动画 */
202+
textarea:focus,
203+
input:focus {
204+
transform: translateY(-1px);
205+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
206+
}
207+
208+
/* 按钮点击动画 */
209+
button:active {
210+
transform: scale(0.98);
211+
}
212+
213+
/* 旋转动画 */
214+
@keyframes spin {
215+
from {
216+
transform: rotate(0deg);
217+
}
218+
to {
219+
transform: rotate(360deg);
220+
}
221+
}
222+
223+
.animate-spin {
224+
animation: spin 1s linear infinite;
225+
}
226+
</style>

‎src/pages/index/user/index.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@ const systemItems = computed(() => [
1515
text: '联系我们',
1616
path: '/contact',
1717
},
18+
{
19+
icon: 'i-carbon-chat',
20+
text: '意见反馈',
21+
path: '/feedback',
22+
},
1823
{
1924
icon: 'i-carbon-settings',
2025
text: '偏好设置',

0 commit comments

Comments
 (0)