537 lines
12 KiB
Vue
537 lines
12 KiB
Vue
<template>
|
||
<view class="feedback-page">
|
||
|
||
|
||
<view class="feedback-content">
|
||
<!-- 常见问题 -->
|
||
<view class="section">
|
||
<view class="section-title">常见问题</view>
|
||
<view class="faq-list">
|
||
<view class="faq-item" v-for="(faq, index) in faqList" :key="index" @click="toggleFaq(index)">
|
||
<view class="faq-header">
|
||
<text class="faq-question">{{faq.question}}</text>
|
||
<uni-icons
|
||
:type="expandedIndex === index ? 'up' : 'down'"
|
||
size="24"
|
||
color="#999"
|
||
></uni-icons>
|
||
</view>
|
||
<view class="faq-answer" v-if="expandedIndex === index">
|
||
<text>{{faq.answer}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 问题类型选择 -->
|
||
<view class="section" v-if="!showSubmitForm">
|
||
<view class="section-title">问题类型</view>
|
||
<view class="problem-types">
|
||
<view
|
||
class="problem-type"
|
||
v-for="(type, index) in problemTypes"
|
||
:key="index"
|
||
@click="selectProblemType(type)"
|
||
>
|
||
<view class="type-icon">
|
||
<image :src="type.img" alt="问题类型图标" class="type-icon-image" mode="aspectFit"></image>
|
||
</view>
|
||
<text class="type-name">{{type.name}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 意见反馈表单 -->
|
||
<view class="section" v-if="showSubmitForm">
|
||
<view class="section-title">意见反馈</view>
|
||
<view class="form-group">
|
||
<view class="form-label">反馈内容</view>
|
||
<textarea
|
||
v-model="feedbackContent"
|
||
class="feedback-textarea"
|
||
placeholder="请详细描述您遇到的问题或建议"
|
||
maxlength="500"
|
||
rows="6"
|
||
></textarea>
|
||
<view class="word-count">{{feedbackContent.length}}/500</view>
|
||
</view>
|
||
|
||
<!-- 图片上传 -->
|
||
<view class="form-group">
|
||
<view class="form-label">上传截图（选填）</view>
|
||
<view class="image-upload">
|
||
<view class="upload-btn" @click="chooseImage" v-if="images.length < 3">
|
||
<uni-icons type="plus" size="40" color="#999"></uni-icons>
|
||
</view>
|
||
<view class="image-item" v-for="(image, index) in images" :key="index">
|
||
<image :src="image" mode="aspectFill" class="preview-image"></image>
|
||
<view class="delete-btn" @click="deleteImage(index)">
|
||
<uni-icons type="close" size="20" color="white"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="upload-text">最多上传3张图片，每张不超过5MB</view>
|
||
</view>
|
||
|
||
<!-- 联系方式 -->
|
||
<view class="form-group">
|
||
<view class="form-label">联系方式（选填）</view>
|
||
<input
|
||
v-model="contactInfo"
|
||
class="contact-input"
|
||
placeholder="请留下您的邮箱或手机号，方便我们联系您"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 提交按钮 -->
|
||
<button
|
||
class="submit-btn"
|
||
:disabled="!feedbackContent.trim()"
|
||
@click="submitFeedback"
|
||
>提交反馈</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 联系方式 -->
|
||
<view class="contact-options">
|
||
<view class="contact-item">
|
||
<view class="contact-icon">
|
||
<image src="/static/emile.png" alt="客服邮箱" class="contact-icon-image" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="contact-info">
|
||
<view class="contact-label">客服邮箱</view>
|
||
<view class="contact-value" @click="copyEmail">support@example.com</view>
|
||
</view>
|
||
</view>
|
||
<view class="contact-item">
|
||
<view class="contact-icon">
|
||
<uni-icons type="chat" size="32" color="#4cd964"></uni-icons>
|
||
</view>
|
||
<view class="contact-info">
|
||
<view class="contact-label">在线客服</view>
|
||
<view class="contact-value">立即联系</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
|
||
// 响应式数据
|
||
const expandedIndex = ref(-1)
|
||
const showSubmitForm = ref(false)
|
||
const selectedType = ref('')
|
||
const feedbackContent = ref('')
|
||
const images = ref([])
|
||
const contactInfo = ref('')
|
||
|
||
// 常见问题数据
|
||
const faqList = [
|
||
{
|
||
question: '如何添加新玩家？',
|
||
answer: '在游戏开始页面，点击"添加玩家"按钮，输入玩家名称即可添加新玩家。您可以添加多个玩家参与计分。'
|
||
},
|
||
{
|
||
question: '如何修改玩家分数？',
|
||
answer: '点击玩家对应的分数区域，会弹出数字键盘，输入新的分数后点击"提交"即可更新玩家分数。'
|
||
},
|
||
{
|
||
question: '如何查看历史对局记录？',
|
||
answer: '在首页点击"历史记录"图标，进入历史记录页面即可查看所有保存的对局记录。'
|
||
},
|
||
{
|
||
question: '如何清除应用缓存？',
|
||
answer: '在"我的"页面，点击"设置"，然后选择"清除缓存"选项即可清除应用缓存数据。'
|
||
},
|
||
{
|
||
question: '计分数据会同步到云端吗？',
|
||
answer: '目前计分数据仅保存在本地，不会自动同步到云端。如需备份，请定期导出数据。'
|
||
}
|
||
]
|
||
|
||
// 问题类型数据
|
||
const problemTypes = [
|
||
{
|
||
name: '功能建议',
|
||
img: '/static/advise.png',
|
||
color: '#ffcc00'
|
||
},
|
||
{
|
||
name: 'bug反馈',
|
||
img: '/static/bug.png',
|
||
color: '#ff3b30'
|
||
},
|
||
{
|
||
name: '界面优化',
|
||
img: '/static/optimize.png',
|
||
color: '#34aadc'
|
||
},
|
||
{
|
||
name: '其他问题',
|
||
img: '/static/other.png',
|
||
color: '#999999'
|
||
}
|
||
]
|
||
|
||
// 切换FAQ展开状态
|
||
const toggleFaq = (index) => {
|
||
expandedIndex.value = expandedIndex.value === index ? -1 : index
|
||
}
|
||
|
||
// 选择问题类型
|
||
const selectProblemType = (type) => {
|
||
selectedType.value = type.name
|
||
showSubmitForm.value = true
|
||
}
|
||
|
||
// 选择图片
|
||
const chooseImage = () => {
|
||
uni.chooseImage({
|
||
count: 3 - images.value.length,
|
||
sizeType: ['compressed'],
|
||
sourceType: ['album', 'camera'],
|
||
success: (res) => {
|
||
images.value = [...images.value, ...res.tempFilePaths]
|
||
}
|
||
})
|
||
}
|
||
|
||
// 删除图片
|
||
const deleteImage = (index) => {
|
||
images.value.splice(index, 1)
|
||
}
|
||
|
||
// 提交反馈
|
||
const submitFeedback = () => {
|
||
if (!feedbackContent.value.trim()) {
|
||
uni.showToast({
|
||
title: '请输入反馈内容',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
// 模拟提交
|
||
uni.showLoading({
|
||
title: '提交中...'
|
||
})
|
||
|
||
setTimeout(() => {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '反馈提交成功',
|
||
icon: 'success'
|
||
})
|
||
|
||
// 重置表单
|
||
feedbackContent.value = ''
|
||
images.value = []
|
||
contactInfo.value = ''
|
||
showSubmitForm.value = false
|
||
}, 1500)
|
||
}
|
||
|
||
// 移除多余的返回函数，使用默认的导航返回
|
||
|
||
// 复制邮箱
|
||
const copyEmail = () => {
|
||
uni.setClipboardData({
|
||
data: 'support@example.com',
|
||
success: () => {
|
||
uni.showToast({
|
||
title: '邮箱已复制',
|
||
icon: 'success'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.feedback-page {
|
||
background-color: #f5f5f5;
|
||
min-height: 100vh;
|
||
padding-bottom: 40rpx;
|
||
}
|
||
|
||
/* 简化的页面标题 */
|
||
.page-title {
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
background-color: #fff;
|
||
padding: 30rpx;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
text-align: center;
|
||
}
|
||
|
||
/* 内容区域 */
|
||
.feedback-content {
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.section {
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 30rpx;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
/* 常见问题样式 */
|
||
.faq-list {
|
||
width: 100%;
|
||
}
|
||
|
||
.faq-item {
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
.faq-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.faq-header {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 25rpx 0;
|
||
}
|
||
|
||
.faq-question {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
flex: 1;
|
||
}
|
||
|
||
.faq-answer {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
padding: 0 0 25rpx 0;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 问题类型样式 */
|
||
.problem-types {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.problem-type {
|
||
width: 45%;
|
||
background-color: #f8f8f8;
|
||
border-radius: 15rpx;
|
||
padding: 30rpx 0;
|
||
margin-bottom: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.problem-type:active {
|
||
background-color: #e8e8e8;
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.type-icon {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 40rpx;
|
||
background-color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 15rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.type-name {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
/* 表单样式 */
|
||
.form-group {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.form-label {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-bottom: 15rpx;
|
||
display: block;
|
||
}
|
||
|
||
.feedback-textarea {
|
||
width: 100%;
|
||
height: 240rpx;
|
||
border: 1rpx solid #e0e0e0;
|
||
border-radius: 10rpx;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
background-color: #fafafa;
|
||
resize: none;
|
||
}
|
||
|
||
.word-count {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
text-align: right;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
/* 优化的图片上传样式 */
|
||
.image-upload {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
margin: 0 -10rpx;
|
||
}
|
||
|
||
.upload-btn {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border: 2rpx dashed #007aff;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 10rpx;
|
||
background-color: #f0f8ff;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.upload-btn:active {
|
||
background-color: #e0e8ff;
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.upload-text {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.image-item {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
position: relative;
|
||
margin: 10rpx;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.preview-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 12rpx;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.delete-btn {
|
||
position: absolute;
|
||
top: -10rpx;
|
||
right: -10rpx;
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
background-color: rgba(255, 0, 0, 0.8);
|
||
border-radius: 22rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.contact-input {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
border: 1rpx solid #e0e0e0;
|
||
border-radius: 10rpx;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
background-color: #fafafa;
|
||
}
|
||
|
||
.submit-btn {
|
||
margin: 40rpx 30rpx 20rpx;
|
||
background-color: #007aff;
|
||
color: #fff;
|
||
border-radius: 40rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.submit-btn[disabled] {
|
||
background-color: #cccccc;
|
||
}
|
||
|
||
/* 联系方式样式 */
|
||
.contact-options {
|
||
padding: 0 30rpx 30rpx;
|
||
}
|
||
|
||
.contact-item {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding: 20rpx 0;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
.contact-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.contact-icon {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
background-color: #f0f8ff;
|
||
border-radius: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 20rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.contact-icon-image {
|
||
width: 80%;
|
||
height: 80%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.contact-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.contact-label {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
display: block;
|
||
}
|
||
|
||
.contact-value {
|
||
font-size: 30rpx;
|
||
color: #007aff;
|
||
display: block;
|
||
margin-top: 5rpx;
|
||
}
|
||
</style> |