pcwl_yancheng/uni-fans-score
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(feedback): 实现反馈表单提交功能并清空表单数据

Browse Source 
在反馈页面中，新增了表单提交功能，用户提交反馈后，表单数据将被清空。同时，处理了提交成功和失败的场景，并显示相应的提示信息。
This commit is contained in:
8vd8
2025-05-06 14:04:50 +08:00
parent 1f264393b9
commit 28c61385da
8 changed files with 402 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/feedback/index.vue
+332 -299
View File
@@ -1,300 +1,333 @@
<template>
<view class="feedback-container">
<!-- 问题类型选择 -->
<view class="type-section">
<view class="section-title">问题类型</view>
<view class="type-grid">
<view
v-for="(type, index) in types"
:key="index"
class="type-item"
:class="{ active: selectedType === index }"
@click="selectType(index)"
>
{{ type }}
</view>
</view>
</view>
<!-- 问题描述 -->
<view class="description-section">
<view class="section-title">问题描述</view>
<textarea
class="description-input"
v-model="description"
placeholder="请详细描述您遇到的问题，以便我们更好地为您解决"
maxlength="500"
/>
<view class="word-count">{{ description.length }}/500</view>
</view>
<!-- 图片上传 -->
<view class="upload-section">
<view class="section-title">图片上传（选填）</view>
<view class="upload-grid">
<view
class="upload-item"
v-for="(img, index) in images"
:key="index"
>
<image :src="img" mode="aspectFill" />
<view class="delete-btn" @click="deleteImage(index)">×</view>
</view>
<view class="upload-btn" @click="chooseImage" v-if="images.length < 3">
<text class="plus">+</text>
<text class="tip">上传图片</text>
</view>
</view>
</view>
<!-- 联系方式 -->
<view class="contact-section">
<view class="section-title">联系方式</view>
<input
class="contact-input"
v-model="contact"
placeholder="请留下您的手机号，方便我们联系您"
type="number"
maxlength="11"
/>
</view>
<!-- 提交按钮 -->
<view class="submit-section">
<button class="submit-btn" @click="submitFeedback">提交反馈</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
types: ['设备故障', '收费问题', '使用建议', '其他'],
selectedType: -1,
description: '',
images: [],
contact: ''
}
},
methods: {
selectType(index) {
this.selectedType = index
},
chooseImage() {
uni.chooseImage({
count: 3 - this.images.length,
success: (res) => {
this.images = [...this.images, ...res.tempFilePaths]
}
})
},
deleteImage(index) {
this.images.splice(index, 1)
},
submitFeedback() {
if (this.selectedType === -1) {
uni.showToast({
title: '请选择问题类型',
icon: 'none'
})
return
}
if (!this.description.trim()) {
uni.showToast({
title: '请描述您的问题',
icon: 'none'
})
return
}
if (!this.contact) {
uni.showToast({
title: '请留下联系方式',
icon: 'none'
})
return
}
// TODO: 提交反馈
uni.showToast({
title: '提交成功',
icon: 'success'
})
}
}
}
</script>
<style lang="scss" scoped>
.feedback-container {
min-height: 100vh;
background: #f8f8f8;
padding: 30rpx;
.section-title {
font-size: 30rpx;
color: #333;
font-weight: 500;
margin-bottom: 20rpx;
}
.type-section {
background: #fff;
border-radius: 20rpx;
padding: 30rpx;
margin-bottom: 20rpx;
.type-grid {
display: flex;
flex-wrap: wrap;
margin: 0 -10rpx;
.type-item {
width: calc(50% - 20rpx);
margin: 10rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
background: #f5f5f5;
border-radius: 10rpx;
font-size: 28rpx;
color: #666;
transition: all 0.3s;
&.active {
background: #E3F2FD;
color: #1976D2;
}
}
}
}
.description-section {
background: #fff;
border-radius: 20rpx;
padding: 30rpx;
margin-bottom: 20rpx;
.description-input {
width: 100%;
height: 240rpx;
background: #f8f8f8;
border-radius: 10rpx;
padding: 20rpx;
font-size: 28rpx;
color: #333;
box-sizing: border-box;
}
.word-count {
text-align: right;
font-size: 24rpx;
color: #999;
margin-top: 10rpx;
}
}
.upload-section {
background: #fff;
border-radius: 20rpx;
padding: 30rpx;
margin-bottom: 20rpx;
.upload-grid {
display: flex;
flex-wrap: wrap;
.upload-item {
width: 200rpx;
height: 200rpx;
margin-right: 20rpx;
margin-bottom: 20rpx;
position: relative;
image {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
.delete-btn {
position: absolute;
right: -10rpx;
top: -10rpx;
width: 40rpx;
height: 40rpx;
background: rgba(0,0,0,0.5);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
}
}
.upload-btn {
width: 200rpx;
height: 200rpx;
background: #f5f5f5;
border-radius: 10rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #999;
.plus {
font-size: 60rpx;
line-height: 1;
margin-bottom: 10rpx;
}
.tip {
font-size: 24rpx;
}
}
}
}
.contact-section {
background: #fff;
border-radius: 20rpx;
padding: 30rpx;
margin-bottom: 40rpx;
.contact-input {
width: 100%;
height: 80rpx;
background: #f8f8f8;
border-radius: 10rpx;
padding: 0 20rpx;
font-size: 28rpx;
color: #333;
box-sizing: border-box;
}
}
.submit-section {
padding: 0 40rpx;
.submit-btn {
width: 100%;
height: 88rpx;
background: #1976D2;
color: #fff;
border-radius: 44rpx;
font-size: 32rpx;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
&:active {
transform: scale(0.98);
}
}
}
}
<template>
<view class="feedback-container">
<!-- 问题类型选择 -->
<view class="type-section">
<view class="section-title">问题类型</view>
<view class="type-grid">
<view
v-for="(type, index) in types"
:key="index"
class="type-item"
:class="{ active: selectedType === index }"
@click="selectType(index)"
>
{{ type }}
</view>
</view>
</view>
<!-- 问题描述 -->
<view class="description-section">
<view class="section-title">问题描述</view>
<textarea
class="description-input"
v-model="description"
placeholder="请详细描述您遇到的问题，以便我们更好地为您解决"
maxlength="500"
/>
<view class="word-count">{{ description.length }}/500</view>
</view>
<!-- 图片上传 -->
<view class="upload-section">
<view class="section-title">图片上传（选填）</view>
<view class="upload-grid">
<view
class="upload-item"
v-for="(img, index) in images"
:key="index"
>
<image :src="img" mode="aspectFill" />
<view class="delete-btn" @click="deleteImage(index)">×</view>
</view>
<view class="upload-btn" @click="chooseImage" v-if="images.length < 3">
<text class="plus">+</text>
<text class="tip">上传图片</text>
</view>
</view>
</view>
<!-- 联系方式 -->
<view class="contact-section">
<view class="section-title">联系方式</view>
<input
class="contact-input"
v-model="contact"
placeholder="请留下您的手机号，方便我们联系您"
type="number"
maxlength="11"
/>
</view>
<!-- 提交按钮 -->
<view class="submit-section">
<button class="submit-btn" @click="submitFeedback">提交反馈</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
types: ['设备故障', '收费问题', '使用建议', '其他'],
selectedType: -1,
description: '',
images: [],
contact: ''
}
},
methods: {
selectType(index) {
this.selectedType = index
},
chooseImage() {
uni.chooseImage({
count: 3 - this.images.length,
success: (res) => {
this.images = [...this.images, ...res.tempFilePaths]
}
})
},
deleteImage(index) {
this.images.splice(index, 1)
},
submitFeedback() {
if (this.selectedType === -1) {
uni.showToast({
title: '请选择问题类型',
icon: 'none'
})
return
}
if (!this.description.trim()) {
uni.showToast({
title: '请描述您的问题',
icon: 'none'
})
return
}
if (!this.contact) {
uni.showToast({
title: '请留下联系方式',
icon: 'none'
})
return
}
// 构建反馈数据
const feedbackData = {
type: this.types[this.selectedType],
content: this.description,
phone: this.contact,
images: this.images
}
// 调用提交接口
uni.request({
url: '/app/feedback/add',
method: 'POST',
data: feedbackData,
success: (res) => {
if (res.statusCode === 200) {
uni.showToast({
title: '提交成功',
icon: 'success'
})
// 清空表单
this.selectedType = -1
this.description = ''
this.contact = ''
this.images = []
} else {
uni.showToast({
title: '提交失败',
icon: 'none'
})
}
},
fail: () => {
uni.showToast({
title: '提交失败',
icon: 'none'
})
}
})
}
}
}
</script>
<style lang="scss" scoped>
.feedback-container {
min-height: 100vh;
background: #f8f8f8;
padding: 30rpx;
.section-title {
font-size: 30rpx;
color: #333;
font-weight: 500;
margin-bottom: 20rpx;
}
.type-section {
background: #fff;
border-radius: 20rpx;
padding: 30rpx;
margin-bottom: 20rpx;
.type-grid {
display: flex;
flex-wrap: wrap;
margin: 0 -10rpx;
.type-item {
width: calc(50% - 20rpx);
margin: 10rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
background: #f5f5f5;
border-radius: 10rpx;
font-size: 28rpx;
color: #666;
transition: all 0.3s;
&.active {
background: #E3F2FD;
color: #1976D2;
}
}
}
}
.description-section {
background: #fff;
border-radius: 20rpx;
padding: 30rpx;
margin-bottom: 20rpx;
.description-input {
width: 100%;
height: 240rpx;
background: #f8f8f8;
border-radius: 10rpx;
padding: 20rpx;
font-size: 28rpx;
color: #333;
box-sizing: border-box;
}
.word-count {
text-align: right;
font-size: 24rpx;
color: #999;
margin-top: 10rpx;
}
}
.upload-section {
background: #fff;
border-radius: 20rpx;
padding: 30rpx;
margin-bottom: 20rpx;
.upload-grid {
display: flex;
flex-wrap: wrap;
.upload-item {
width: 200rpx;
height: 200rpx;
margin-right: 20rpx;
margin-bottom: 20rpx;
position: relative;
image {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
.delete-btn {
position: absolute;
right: -10rpx;
top: -10rpx;
width: 40rpx;
height: 40rpx;
background: rgba(0,0,0,0.5);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
}
}
.upload-btn {
width: 200rpx;
height: 200rpx;
background: #f5f5f5;
border-radius: 10rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #999;
.plus {
font-size: 60rpx;
line-height: 1;
margin-bottom: 10rpx;
}
.tip {
font-size: 24rpx;
}
}
}
}
.contact-section {
background: #fff;
border-radius: 20rpx;
padding: 30rpx;
margin-bottom: 40rpx;
.contact-input {
width: 100%;
height: 80rpx;
background: #f8f8f8;
border-radius: 10rpx;
padding: 0 20rpx;
font-size: 28rpx;
color: #333;
box-sizing: border-box;
}
}
.submit-section {
padding: 0 40rpx;
.submit-btn {
width: 100%;
height: 88rpx;
background: #1976D2;
color: #fff;
border-radius: 44rpx;
font-size: 32rpx;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
&:active {
transform: scale(0.98);
}
}
}
}
</style>