feedback
This commit is contained in:
zjf committed
1 parent
b6fff4cb1c
commit
b1f390370b
1 file changed
+337
@@ -0,0 +1,337 @@
|
||||
<template>
|
||||
<view class="feedback-page">
|
||||
<!-- 顶部导航 -->
|
||||
<view class="header">
|
||||
<view class="back-btn" @tap="goBack">
|
||||
<text class="back-icon"><</text>
|
||||
<text class="back-text">返回</text>
|
||||
</view>
|
||||
<view class="title">其它问题</view>
|
||||
</view>
|
||||
|
||||
<!-- 问题分类 -->
|
||||
<view class="category-section">
|
||||
<view class="section-title">问题分类</view>
|
||||
<view class="category-list">
|
||||
<view
|
||||
v-for="(item, index) in categories"
|
||||
:key="index"
|
||||
:class="['category-item', { active: selectedCategory === item }]"
|
||||
@tap="selectedCategory = item"
|
||||
>
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 详细描述 -->
|
||||
<view class="description-section">
|
||||
<view class="section-title">
|
||||
详细描述
|
||||
<text class="required">*</text>
|
||||
</view>
|
||||
<view class="textarea-wrap">
|
||||
<textarea
|
||||
v-model="description"
|
||||
placeholder="您在哪个页面，遇到了什么问题，详细描述有助于帮您快速解决"
|
||||
placeholder-style="color: #999999;"
|
||||
:maxlength="200"
|
||||
class="feedback-textarea"
|
||||
></textarea>
|
||||
<view class="word-count">{{ description.length }}/200</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 图片上传 -->
|
||||
<view class="upload-section">
|
||||
<view class="section-title">上传图片 ({{ images.length }}/3)</view>
|
||||
<view class="upload-area">
|
||||
<view
|
||||
v-for="(img, index) in images"
|
||||
:key="index"
|
||||
class="image-item"
|
||||
>
|
||||
<image :src="img" mode="aspectFill"/>
|
||||
<view class="delete-btn" @tap="deleteImage(index)">×</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="images.length < 3"
|
||||
class="upload-btn"
|
||||
@tap="handleUpload"
|
||||
>
|
||||
<view class="plus">+</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 联系方式 -->
|
||||
<!-- <view class="contact-section">-->
|
||||
<!-- <view class="section-title">联系方式</view>-->
|
||||
<!-- <view class="input-wrap">-->
|
||||
<!-- <input -->
|
||||
<!-- v-model="contact"-->
|
||||
<!-- placeholder="手机号/邮箱/微信号"-->
|
||||
<!-- placeholder-style="color: #999999;"-->
|
||||
<!-- class="contact-input"-->
|
||||
<!-- />-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
|
||||
<!-- <!– 邮箱联系 –>-->
|
||||
<!-- <view class="email-contact">-->
|
||||
<!-- <view class="contact-text">联系我们</view>-->
|
||||
<!-- <view class="email">-->
|
||||
<!-- user_service@36kr.com-->
|
||||
<!-- <view class="copy-btn" @tap="copyEmail">复制</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<view class="submit-btn" @tap="handleSubmit">提交</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const categories = ['产品建议', '功能Bug', '内容订正', '其他']
|
||||
const selectedCategory = ref('产品建议')
|
||||
const description = ref('')
|
||||
const images = ref([])
|
||||
const contact = ref('')
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
const handleUpload = () => {
|
||||
uni.chooseImage({
|
||||
count: 3 - images.value.length,
|
||||
success: (res) => {
|
||||
images.value = [...images.value, ...res.tempFilePaths]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const deleteImage = (index: number) => {
|
||||
images.value.splice(index, 1)
|
||||
}
|
||||
|
||||
const copyEmail = () => {
|
||||
uni.setClipboardData({
|
||||
data: 'user_service@36kr.com',
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!description.value) {
|
||||
uni.showToast({
|
||||
title: '请填写详细描述',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
// 实现提交逻辑
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.feedback-page {
|
||||
padding: 0 30rpx;
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 88rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 36rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.back-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 34rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 40rpx 0 24rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #ff4d4f;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.category-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
padding: 12rpx 32rpx;
|
||||
border-radius: 32rpx;
|
||||
background: #f5f5f5;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.category-item.active {
|
||||
background: #e6f4ff;
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.textarea-wrap {
|
||||
width: 100%;
|
||||
background-color: #F8F8F8;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.feedback-textarea {
|
||||
width: 100%;
|
||||
height: 240rpx;
|
||||
background-color: #F8F8F8;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.word-count {
|
||||
text-align: right;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.image-item, .upload-btn {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 16rpx;
|
||||
border: 1rpx dashed #e5e5e5;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image-item image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.plus {
|
||||
font-size: 48rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
position: absolute;
|
||||
right: -12rpx;
|
||||
top: -12rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
width: 100%;
|
||||
background-color: #F8F8F8;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.contact-input {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
font-size: 28rpx;
|
||||
background-color: #F8F8F8;
|
||||
}
|
||||
|
||||
.email-contact {
|
||||
margin: 48rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.email {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
padding: 8rpx 24rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
margin: 64rpx 0;
|
||||
height: 88rpx;
|
||||
background: #1677ff;
|
||||
color: #fff;
|
||||
border-radius: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
/* 修改输入框的placeholder样式 */
|
||||
::-webkit-input-placeholder {
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user