index.vue
3.31 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
<!--
* @Date: 2026-01-29 22:26:13
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-31 14:40:32
* @FilePath: /manulife-weapp/src/pages/feedback/index.vue
* @Description: 文件描述
-->
<template>
<view class="min-h-screen bg-gray-50 pb-[200rpx]">
<NavHeader title="反馈问题" />
<view class="p-[32rpx]">
<!-- Feedback Type -->
<view class="bg-white rounded-[24rpx] p-[32rpx] mb-[24rpx] shadow-sm">
<view class="text-[30rpx] font-bold text-gray-900 mb-[24rpx]">反馈类型</view>
<view class="flex flex-wrap gap-[24rpx]">
<view
v-for="type in types"
:key="type.value"
class="px-[32rpx] py-[16rpx] rounded-full text-[26rpx] transition-colors"
:class="selectedType === type.value ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600'"
@tap="selectedType = type.value"
>
{{ type.label }}
</view>
</view>
</view>
<!-- Description -->
<view class="bg-white rounded-[24rpx] p-[28rpx] mb-[24rpx] shadow-sm">
<view class="text-[30rpx] font-bold text-gray-900 mb-[24rpx]">问题描述</view>
<view class="feedback-textarea-wrapper border border-[#E5E7EB] rounded-[16rpx] overflow-hidden relative">
<textarea
v-model="description"
placeholder="请详细描述您遇到的问题或建议..."
:maxlength="200"
class="w-full h-[240rpx] p-[24rpx] text-[28rpx] leading-normal bg-transparent resize-none"
auto-height
/>
<view class="absolute bottom-[16rpx] right-[24rpx] text-[22rpx] text-gray-400">
{{ description.length }}/200
</view>
</view>
</view>
<!-- Screenshots -->
<view class="bg-white rounded-[24rpx] p-[32rpx] mb-[40rpx] shadow-sm">
<view class="text-[30rpx] font-bold text-gray-900 mb-[24rpx]">添加截图（可选）</view>
<nut-uploader
url="https://xxx"
v-model:file-list="fileList"
maximum="3"
>
</nut-uploader>
</view>
<!-- Submit Button -->
<nut-button type="primary" block class="!h-[88rpx] !rounded-[44rpx] !text-[32rpx]" @click="onSubmit">提交反馈</nut-button>
</view>
<!-- TabBar -->
<!-- <TabBar current="me" /> -->
</view>
</template>
<script setup>
import { ref } from 'vue'
import TabBar from '@/components/TabBar.vue'
import NavHeader from '@/components/NavHeader.vue'
import Taro from '@tarojs/taro'
const selectedType = ref('suggestion')
const description = ref('')
const fileList = ref([])
const types = [
{ label: '功能建议', value: 'suggestion' },
{ label: '问题反馈', value: 'issue' },
{ label: '其他', value: 'other' }
]
const onSubmit = () => {
if (!description.value) {
Taro.showToast({ title: '请输入问题描述', icon: 'none' })
return
}
Taro.showLoading({ title: '提交中...' })
// Simulate API call
setTimeout(() => {
Taro.hideLoading()
Taro.showToast({ title: '提交成功', icon: 'success' })
// Reset form
description.value = ''
fileList.value = []
selectedType.value = 'suggestion'
// Navigate back or stay
setTimeout(() => {
Taro.navigateBack()
}, 1500)
}, 1000)
}
</script>
<style lang="less">
</style>