<template>
|
<view class="feedback-container">
|
<!-- 问题类型选择 -->
|
<wd-cell-group title="问题类型" border>
|
<view class="radio-group">
|
<label v-for="item in feedbackTypes" :key="item.value" class="radio-item">
|
<text class="radio-text">{{ item.label }}</text>
|
<radio
|
:value="item.value"
|
:checked="feedbackType === item.value"
|
color="#0083ff"
|
class="radio-button"
|
style="transform: scale(0.8)"
|
@click="handleRadioChange(item.value)"
|
/>
|
</label>
|
</view>
|
</wd-cell-group>
|
|
<!-- 问题描述 -->
|
<wd-cell-group title="问题描述" border>
|
<wd-textarea
|
v-model="description"
|
placeholder="请详细描述您遇到的问题或建议..."
|
:maxlength="500"
|
show-count
|
:rows="5"
|
/>
|
</wd-cell-group>
|
|
<!-- 图片上传 -->
|
<wd-cell-group title="相关截图（选填）" border>
|
<view class="upload-box">
|
<wd-upload
|
v-model="fileList"
|
:max-count="3"
|
:before-read="beforeRead"
|
@delete="handleDelete"
|
/>
|
</view>
|
</wd-cell-group>
|
|
<!-- 联系方式 -->
|
<wd-cell-group title="联系方式（选填）" border>
|
<wd-input v-model="contact" placeholder="请输入您的手机号或邮箱" clearable />
|
</wd-cell-group>
|
|
<!-- 提交按钮 -->
|
<view class="submit-btn">
|
<wd-button type="primary" block :loading="submitting" @click="handleSubmit">
|
提交反馈
|
</wd-button>
|
</view>
|
|
<wd-toast />
|
</view>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref } from "vue";
|
import { useToast } from "wot-design-uni";
|
import { checkLogin } from "@/utils/auth";
|
|
const toast = useToast();
|
|
// 检查登录状态
|
onLoad(() => {
|
if (!checkLogin()) return;
|
});
|
|
// 问题类型选项
|
const feedbackTypes = [
|
{ label: "功能异常", value: "bug" },
|
{ label: "优化建议", value: "suggestion" },
|
{ label: "其他问题", value: "other" },
|
];
|
|
// 表单数据
|
const feedbackType = ref("bug");
|
const description = ref("");
|
const fileList = ref<any[]>([]);
|
const contact = ref("");
|
const submitting = ref(false);
|
|
// 图片上传前的校验
|
const beforeRead = (file: any) => {
|
// 验证文件类型
|
const validTypes = ["image/jpeg", "image/png", "image/gif"];
|
if (!validTypes.includes(file.type)) {
|
toast.error("请上传 jpg、png 或 gif 格式的图片");
|
return false;
|
}
|
// 验证文件大小（限制为 5MB）
|
if (file.size > 5 * 1024 * 1024) {
|
toast.error("图片大小不能超过 5MB");
|
return false;
|
}
|
return true;
|
};
|
|
// 删除图片
|
const handleDelete = (detail: any) => {
|
const index = detail.index;
|
fileList.value.splice(index, 1);
|
};
|
|
// 处理单选框变化
|
const handleRadioChange = (value: string) => {
|
feedbackType.value = value;
|
};
|
|
// 提交反馈
|
const handleSubmit = async () => {
|
// 表单验证
|
if (!description.value.trim()) {
|
toast.error("请描述您遇到的问题");
|
return;
|
}
|
|
submitting.value = true;
|
try {
|
// TODO: 调用提交反馈的接口
|
await new Promise((resolve) => setTimeout(resolve, 1500)); // 模拟提交
|
toast.success("提交成功");
|
// 重置表单
|
description.value = "";
|
fileList.value = [];
|
contact.value = "";
|
|
// 延迟返回上一页
|
setTimeout(() => {
|
uni.navigateBack();
|
}, 1500);
|
} catch {
|
toast.error("提交失败，请重试");
|
} finally {
|
submitting.value = false;
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.feedback-container {
|
min-height: 100vh;
|
padding: 20rpx 0;
|
background-color: #f5f5f5;
|
|
:deep(.wd-cell-group__title) {
|
padding: 20rpx 30rpx 10rpx;
|
font-size: 28rpx;
|
color: #666;
|
}
|
|
.radio-group {
|
padding: 4rpx 0;
|
background-color: #fff;
|
}
|
|
.radio-item {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 10rpx 30rpx;
|
border-bottom: 1px solid #eee;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
}
|
|
.radio-text {
|
font-size: 22rpx;
|
color: #333;
|
}
|
|
.upload-box {
|
padding: 20rpx 30rpx;
|
}
|
|
.submit-btn {
|
margin: 40rpx 30rpx;
|
}
|
|
:deep(.wd-textarea) {
|
padding: 20rpx 30rpx;
|
background-color: #fff;
|
}
|
|
.radio-button {
|
margin-right: -8rpx;
|
}
|
}
|
</style>
|
