index.vue
3.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<template>
<view class="min-h-screen flex flex-col bg-white">
<AppHeader title="意见反馈" />
<view class="flex-1 px-4 py-6 pb-20">
<form @submit.prevent="handleSubmit" class="space-y-6">
<view>
<label for="feedback" class="block text-sm font-medium text-gray-700 mb-1">
您的反馈
</label>
<textarea
id="feedback"
rows="5"
class="w-full p-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
placeholder="请描述您遇到的问题或建议..."
v-model="feedback"
required
/>
</view>
<view>
<label class="block text-sm font-medium text-gray-700 mb-1">
上传截图 (可选)
</label>
<view class="flex flex-wrap gap-2 mb-2">
<view v-for="(image, index) in images" :key="index" class="relative w-20 h-20">
<image :src="image" :alt="`上传图片 ${index + 1}`" class="w-full h-full object-cover rounded-lg" />
<button type="button" class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1" @click="removeImage(index)">
<Failure size="16" />
</button>
</view>
<view
class="w-20 h-20 flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50"
@click="chooseImage"
>
<Upload size="24" class="text-gray-400" />
<span class="text-xs text-gray-500 mt-1">添加图片</span>
</view>
</view>
</view>
<view>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">
您的姓名
</label>
<input
type="text"
id="name"
class="w-full p-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
placeholder="请输入您的姓名"
v-model="name"
/>
</view>
<view>
<label for="contact" class="block text-sm font-medium text-gray-700 mb-1">
联系方式
</label>
<input
type="text"
id="contact"
class="w-full p-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
placeholder="请输入您的手机号或微信号"
v-model="contact"
/>
</view>
<button type="submit" class="w-full py-3 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 transition-colors">
提交反馈
</button>
</form>
</view>
<BottomNav />
</view>
</template>
<script setup>
import { ref } from 'vue';
import Taro from '@tarojs/taro';
import AppHeader from '../../components/AppHeader.vue';
import BottomNav from '../../components/BottomNav.vue';
import { Upload, Failure } from '@nutui/icons-vue-taro';
const feedback = ref('');
const name = ref('');
const contact = ref('');
const images = ref([]);
const chooseImage = () => {
Taro.chooseImage({
count: 9 - images.value.length,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
images.value = [...images.value, ...res.tempFilePaths];
}
});
};
const removeImage = (index) => {
images.value = images.value.filter((_, i) => i !== index);
};
const handleSubmit = () => {
// In a real app, we would send this data to a server
Taro.showToast({
title: '感谢您的反馈！我们会尽快处理。',
icon: 'success',
duration: 2000
});
setTimeout(() => {
Taro.navigateBack();
}, 2000);
};
</script>