init
This commit is contained in:
@@ -0,0 +1,300 @@
|
||||
<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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user