维修，意见反馈，公告页面
This commit is contained in:
zjf committed
1 parent
7a12dba8b4
commit
334b2d39a7
11 files changed
+2826
-125
No files matched your search
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<view class="feedback-detail">
|
||||
<view class="detail-header">
|
||||
<view class="detail-title">{{ detail.title }}</view>
|
||||
<view v-if="typeOptions.length && detail.type" class="detail-type">反馈类型：{{ getTypeLabel(detail.type) }}</view>
|
||||
</view>
|
||||
<view class="detail-content">
|
||||
<view class="content-text">{{ detail.description }}</view>
|
||||
</view>
|
||||
<view class="detail-footer">
|
||||
<text class="create-time">提交时间：{{ formatTime(detail.createTime) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import meetingRoomApi from '@/sheep/api/meetingRoom'
|
||||
|
||||
const detail = ref<any>({})
|
||||
const typeOptions = ref<{ value: string; label: string }[]>([])
|
||||
|
||||
async function loadTypeOptions() {
|
||||
const res: any = await meetingRoomApi.getFeedbackType()
|
||||
if (res.data && Array.isArray(res.data.data)) {
|
||||
typeOptions.value = res.data.data.map(item => ({
|
||||
value: item.id,
|
||||
label: item.label
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
function getTypeLabel(type) {
|
||||
if (!typeOptions.value.length || !type) return ''
|
||||
const option = typeOptions.value.find(item => String(item.value) === String(type))
|
||||
return option ? option.label : type
|
||||
}
|
||||
|
||||
function getTypeClass(type: string) {
|
||||
const classMap: Record<string, string> = {
|
||||
'1': 'type-suggestion',
|
||||
'2': 'type-problem',
|
||||
'3': 'type-ui',
|
||||
'4': 'type-other'
|
||||
}
|
||||
return classMap[type] || 'type-other'
|
||||
}
|
||||
|
||||
function getStatusText(status: string) {
|
||||
const statusMap: Record<string, string> = {
|
||||
'1': '待处理',
|
||||
'2': '处理中',
|
||||
'3': '已处理',
|
||||
'4': '已关闭'
|
||||
}
|
||||
return statusMap[status] || '未知'
|
||||
}
|
||||
|
||||
function getStatusClass(status: string) {
|
||||
const classMap: Record<string, string> = {
|
||||
'1': 'status-pending',
|
||||
'2': 'status-processing',
|
||||
'3': 'status-completed',
|
||||
'4': 'status-closed'
|
||||
}
|
||||
return classMap[status] || 'status-pending'
|
||||
}
|
||||
|
||||
function formatTime(time: string) {
|
||||
if (!time) return ''
|
||||
return new Date(time).toLocaleString()
|
||||
}
|
||||
|
||||
onLoad(async (options: any) => {
|
||||
await loadTypeOptions()
|
||||
const id = options.id
|
||||
if (!id) return
|
||||
try {
|
||||
const response: any = await meetingRoomApi.getFeedbackDetail(id)
|
||||
if (response.code === 0 && Array.isArray(response.data) && response.data.length > 0) {
|
||||
detail.value = response.data[0]
|
||||
}
|
||||
} catch (error) {
|
||||
uni.showToast({ title: '获取详情失败', icon: 'none' })
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.feedback-detail {
|
||||
padding: 32rpx;
|
||||
background: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.type-tag {
|
||||
padding: 12rpx 24rpx;
|
||||
border-radius: 24rpx;
|
||||
font-size: 26rpx;
|
||||
|
||||
&.type-suggestion {
|
||||
background: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
&.type-problem {
|
||||
background: #ffebee;
|
||||
color: #d32f2f;
|
||||
}
|
||||
|
||||
&.type-ui {
|
||||
background: #f3e5f5;
|
||||
color: #7b1fa2;
|
||||
}
|
||||
|
||||
&.type-other {
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
padding: 12rpx 24rpx;
|
||||
border-radius: 24rpx;
|
||||
font-size: 26rpx;
|
||||
|
||||
&.status-pending {
|
||||
background: #fff3e0;
|
||||
color: #f57c00;
|
||||
}
|
||||
|
||||
&.status-processing {
|
||||
background: #e8f5e8;
|
||||
color: #388e3c;
|
||||
}
|
||||
|
||||
&.status-completed {
|
||||
background: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
&.status-closed {
|
||||
background: #f5f5f5;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.content-text {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
padding-top: 24rpx;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.reply-section {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.reply-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.reply-content {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.reply-time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-footer {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
|
||||
.create-time {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,151 +1,422 @@
|
||||
<template>
|
||||
<view class="min-h-screen bg-white px-30rpx pb-30rpx">
|
||||
<!-- 顶部导航 -->
|
||||
<view class="flex items-center h-88rpx relative">
|
||||
<view class="absolute left-0 h-88rpx flex items-center pr-20rpx" @tap="goBack">
|
||||
<text class="text-36rpx text-gray-800"><</text>
|
||||
<text class="text-28rpx text-gray-800 ml-4rpx">返回</text>
|
||||
</view>
|
||||
<view class="flex-1 text-center text-34rpx font-500">问题反馈</view>
|
||||
<view class="feedback-container">
|
||||
<view class="feedback-tabs">
|
||||
<view :class="['tab', {active: activeTab === 0} ]" @click="activeTab = 0">提交反馈</view>
|
||||
<view :class="['tab', {active: activeTab === 1} ]" @click="activeTab = 1">我的反馈</view>
|
||||
</view>
|
||||
|
||||
<!-- 问题分类 -->
|
||||
<view class="mt-40rpx">
|
||||
<view class="text-32rpx font-500 mb-24rpx">问题分类</view>
|
||||
<view class="flex flex-wrap gap-24rpx">
|
||||
<view
|
||||
v-for="(item, index) in categories"
|
||||
:key="index"
|
||||
:class="[
|
||||
'px-32rpx py-12rpx rounded-20rpx text-28rpx transition-colors duration-200',
|
||||
selectedCategory === item ? 'bg-blue-200 text-blue-600' : 'bg-gray-100',
|
||||
]"
|
||||
@tap="selectedCategory = item"
|
||||
>
|
||||
{{ item }}
|
||||
<view v-if="activeTab === 0">
|
||||
<!-- 反馈表单 -->
|
||||
<view class="feedback-form">
|
||||
<view class="form-title">提交反馈</view>
|
||||
<view class="form-item">
|
||||
<view class="label">标题</view>
|
||||
<input v-model="title" placeholder="请输入反馈标题" class="title-input" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="label">反馈类型</view>
|
||||
<picker @change="onTypeChange" :value="typeIndex" :range="typeOptions" range-key="label">
|
||||
<view class="picker">{{ typeOptions[typeIndex]?.label || '请选择类型' }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="label">反馈描述</view>
|
||||
<textarea
|
||||
v-model="description"
|
||||
placeholder="请详细描述您的问题或建议..."
|
||||
class="content-textarea"
|
||||
maxlength="500"
|
||||
/>
|
||||
<view class="char-count">{{ description.length }}/500</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="label">联系方式</view>
|
||||
<input v-model="contact" placeholder="手机号或邮箱（选填）" class="contact-input" />
|
||||
</view>
|
||||
<button @click="submitFeedback" class="submit-btn" :disabled="!canSubmit">
|
||||
提交反馈
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 详细描述 -->
|
||||
<view class="mt-40rpx">
|
||||
<view class="text-32rpx font-500 mb-24rpx">
|
||||
详细描述
|
||||
<text class="text-red-500 ml-8rpx">*</text>
|
||||
</view>
|
||||
<view class="w-full bg-gray-50 rounded-16rpx p-20rpx box-border">
|
||||
<textarea
|
||||
v-model="description"
|
||||
placeholder="您在哪个页面，遇到了什么问题，详细描述有助于帮您快速解决"
|
||||
placeholder-style="color: #999999;"
|
||||
:maxlength="200"
|
||||
class="w-full h-240rpx bg-gray-50 text-28rpx leading-40rpx p-0 box-border"
|
||||
/>
|
||||
<view class="text-right text-gray-400 text-24rpx mt-8rpx">{{ description.length }}/200</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 图片上传 -->
|
||||
<view class="mt-40rpx">
|
||||
<view class="text-32rpx font-500 mb-24rpx">上传图片 ({{ images.length }}/3)</view>
|
||||
<view class="flex flex-wrap gap-24rpx">
|
||||
<view v-for="(img, index) in images" :key="index" class="relative w-160rpx h-160rpx">
|
||||
<image :src="img" mode="aspectFill" class="w-full h-full rounded-16rpx" />
|
||||
<view
|
||||
class="absolute -right-12rpx -top-12rpx w-40rpx h-40rpx bg-black bg-opacity-60 text-white rounded-full flex items-center justify-center active:bg-opacity-80"
|
||||
@tap="deleteImage(index)"
|
||||
<view v-else>
|
||||
<!-- 我的反馈列表 -->
|
||||
<view class="feedback-list">
|
||||
<view class="list-title">我的反馈</view>
|
||||
<view v-if="feedbackList.length === 0" class="empty-tip">
|
||||
暂无反馈记录
|
||||
</view>
|
||||
<view v-else>
|
||||
<view
|
||||
v-for="item in feedbackList"
|
||||
:key="item.id"
|
||||
class="feedback-item"
|
||||
@click="viewDetail(item)"
|
||||
>
|
||||
×
|
||||
<view class="item-header">
|
||||
<view class="type-tag" :class="getTypeClass(item.type)">{{ getTypeLabel(item.type) }}</view>
|
||||
<view class="status-tag" :class="getStatusClass(item.status)">{{ getStatusText(item.status) }}</view>
|
||||
</view>
|
||||
<view class="item-content">
|
||||
<view class="item-title">{{ item.title }}</view>
|
||||
<view class="item-desc">{{ item.description }}</view>
|
||||
<image v-if="item.picUrl" :src="item.picUrl" class="item-img" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="item-footer">
|
||||
<text class="time">{{ formatTime(item.createTime) }}</text>
|
||||
<text v-if="item.reply" class="reply-count">已回复</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="images.length < 3"
|
||||
class="w-160rpx h-160rpx rounded-16rpx border border-dashed border-gray-200 flex items-center justify-center active:bg-gray-50"
|
||||
@tap="handleUpload"
|
||||
>
|
||||
<view class="text-48rpx text-gray-400">+</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 联系方式 -->
|
||||
<view class="mt-40rpx">
|
||||
<view class="text-32rpx font-500 mb-24rpx">联系方式</view>
|
||||
<view class="w-full bg-gray-50 rounded-16rpx px-20rpx box-border">
|
||||
<input
|
||||
v-model="contact"
|
||||
placeholder="手机号/邮箱/微信号"
|
||||
placeholder-style="color: #999999;"
|
||||
class="w-full h-88rpx text-28rpx bg-gray-50"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 邮箱联系我们 -->
|
||||
<view class="mt-48rpx flex items-center justify-between text-28rpx">
|
||||
<view class="text-gray-800">邮箱联系我们</view>
|
||||
<view class="flex items-center gap-16rpx">
|
||||
<text class="text-gray-600">user_service@36kr.com</text>
|
||||
<view class="px-24rpx py-8rpx bg-gray-100 rounded-8rpx text-28rpx active:bg-gray-200" @tap="copyEmail"> 复制 </view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<view
|
||||
class="my-64rpx h-88rpx bg-blue-500 text-white rounded-20rpx flex items-center justify-center text-32rpx active:bg-blue-600 transition-colors duration-200"
|
||||
@tap="handleSubmit"
|
||||
>
|
||||
提 交
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue"
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import meetingRoomApi from '@/sheep/api/meetingRoom'
|
||||
|
||||
const categories = ["产品建议", "功能Bug", "内容订正", "其他"]
|
||||
const selectedCategory = ref("产品建议")
|
||||
const description = ref("")
|
||||
const images = ref<string[]>([])
|
||||
const contact = ref("")
|
||||
const typeOptions = ref<{ value: string; label: string }[]>([])
|
||||
const typeIndex = ref(0)
|
||||
const title = ref('')
|
||||
const description = ref('')
|
||||
const contact = ref('')
|
||||
const feedbackList = ref<any[]>([])
|
||||
const activeTab = ref(0)
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack()
|
||||
const canSubmit = computed(() => {
|
||||
return title.value.trim() && description.value.trim()
|
||||
})
|
||||
|
||||
async function loadTypeOptions() {
|
||||
try {
|
||||
const res: any = await meetingRoomApi.getFeedbackType()
|
||||
if (res.data && Array.isArray(res.data.data)) {
|
||||
typeOptions.value = res.data.data.map(item => ({
|
||||
value: item.id,
|
||||
label: item.label
|
||||
}))
|
||||
}
|
||||
} catch (e) {
|
||||
uni.showToast({ title: '获取反馈类型失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
const handleUpload = () => {
|
||||
uni.chooseImage({
|
||||
count: 3 - images.value.length,
|
||||
success: (res) => {
|
||||
images.value = [...images.value, ...res.tempFilePaths]
|
||||
},
|
||||
})
|
||||
function onTypeChange(e: any) {
|
||||
typeIndex.value = e.detail.value
|
||||
}
|
||||
|
||||
const deleteImage = (index: number) => {
|
||||
images.value.splice(index, 1)
|
||||
function getTypeLabel(type: string) {
|
||||
const option = typeOptions.value.find(item => item.value === type)
|
||||
return option ? option.label : type
|
||||
}
|
||||
|
||||
const copyEmail = () => {
|
||||
uni.setClipboardData({
|
||||
data: "user_service@36kr.com",
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: "复制成功",
|
||||
icon: "none",
|
||||
})
|
||||
},
|
||||
})
|
||||
function getTypeClass(type: string) {
|
||||
const classMap: Record<string, string> = {
|
||||
'投诉': 'type-complain',
|
||||
'建议': 'type-suggest',
|
||||
'BUG报告': 'type-bug',
|
||||
'功能需求': 'type-feature'
|
||||
}
|
||||
return classMap[type] || 'type-other'
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!description.value) {
|
||||
uni.showToast({
|
||||
title: "请填写详细描述",
|
||||
icon: "none",
|
||||
})
|
||||
function getStatusText(status: string) {
|
||||
const statusMap: Record<string, string> = {
|
||||
'1': '待处理',
|
||||
'2': '处理中',
|
||||
'3': '已处理',
|
||||
'4': '已关闭'
|
||||
}
|
||||
return statusMap[status] || '未知'
|
||||
}
|
||||
|
||||
function getStatusClass(status: string) {
|
||||
const classMap: Record<string, string> = {
|
||||
'1': 'status-pending',
|
||||
'2': 'status-processing',
|
||||
'3': 'status-completed',
|
||||
'4': 'status-closed'
|
||||
}
|
||||
return classMap[status] || 'status-pending'
|
||||
}
|
||||
|
||||
function formatTime(time: string) {
|
||||
if (!time) return ''
|
||||
return new Date(time).toLocaleDateString()
|
||||
}
|
||||
|
||||
async function submitFeedback() {
|
||||
if (!canSubmit.value) {
|
||||
uni.showToast({ title: '请填写完整信息', icon: 'none' })
|
||||
return
|
||||
}
|
||||
// 实现提交逻辑
|
||||
|
||||
try {
|
||||
uni.showLoading({ title: '提交中...' })
|
||||
const data = {
|
||||
title: title.value.trim(),
|
||||
type: typeOptions.value[typeIndex.value].value,
|
||||
description: description.value.trim(),
|
||||
contact: contact.value.trim()
|
||||
}
|
||||
const response: any = await meetingRoomApi.submitFeedback(data)
|
||||
uni.hideLoading()
|
||||
if (response.code === 0) {
|
||||
uni.showToast({ title: '提交成功', icon: 'success' })
|
||||
// 清空表单
|
||||
title.value = ''
|
||||
description.value = ''
|
||||
contact.value = ''
|
||||
typeIndex.value = 0
|
||||
// 刷新列表
|
||||
loadFeedbackList()
|
||||
} else {
|
||||
uni.showToast({ title: response.msg || '提交失败', icon: 'none' })
|
||||
}
|
||||
} catch (error) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '提交失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
function viewDetail(item: any) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/integrated/feedback/detail?id=${item.id}`
|
||||
})
|
||||
}
|
||||
|
||||
async function loadFeedbackList() {
|
||||
try {
|
||||
const response: any = await meetingRoomApi.getFeedbackList({
|
||||
current: 1,
|
||||
size: 20
|
||||
})
|
||||
if (response.code === 0 && response.data) {
|
||||
feedbackList.value = response.data.records || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载反馈列表失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadTypeOptions().then(() => {
|
||||
loadFeedbackList()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.feedback-container {
|
||||
padding: 24rpx;
|
||||
background: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.feedback-tabs {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
overflow: hidden;
|
||||
margin-bottom: 24rpx;
|
||||
.tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 28rpx 0;
|
||||
font-size: 30rpx;
|
||||
color: #888;
|
||||
background: #f7f8fa;
|
||||
&.active {
|
||||
color: #1777FF;
|
||||
background: #fff;
|
||||
font-weight: bold;
|
||||
border-bottom: 4rpx solid #1777FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.feedback-form {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.form-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.title-input {
|
||||
height: 80rpx;
|
||||
padding: 0 24rpx;
|
||||
background: #f7f8fa;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.picker {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
padding: 0 24rpx;
|
||||
background: #f7f8fa;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.content-textarea {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
padding: 24rpx;
|
||||
background: #f7f8fa;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.char-count {
|
||||
text-align: right;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.contact-input {
|
||||
height: 80rpx;
|
||||
padding: 0 24rpx;
|
||||
background: #f7f8fa;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background: #007aff;
|
||||
color: #fff;
|
||||
border-radius: 8rpx;
|
||||
font-size: 32rpx;
|
||||
&:disabled {
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.feedback-list {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
.list-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
padding: 60rpx 0;
|
||||
}
|
||||
.feedback-item {
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
padding: 24rpx 0;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
.type-tag {
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 24rpx;
|
||||
&.type-complain {
|
||||
background: #ffebee;
|
||||
color: #d32f2f;
|
||||
}
|
||||
&.type-suggest {
|
||||
background: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
&.type-bug {
|
||||
background: #f3e5f5;
|
||||
color: #7b1fa2;
|
||||
}
|
||||
&.type-feature {
|
||||
background: #e8f5e8;
|
||||
color: #388e3c;
|
||||
}
|
||||
&.type-other {
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.status-tag {
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 24rpx;
|
||||
&.status-pending {
|
||||
background: #fff3e0;
|
||||
color: #f57c00;
|
||||
}
|
||||
&.status-processing {
|
||||
background: #e8f5e8;
|
||||
color: #388e3c;
|
||||
}
|
||||
&.status-completed {
|
||||
background: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
&.status-closed {
|
||||
background: #f5f5f5;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-content {
|
||||
.item-title {
|
||||
font-size: 28rpx;
|
||||
color: #222;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.item-desc {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
margin-bottom: 8rpx;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.item-img {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-top: 8rpx;
|
||||
background: #f7f8fa;
|
||||
}
|
||||
}
|
||||
.item-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
.reply-count {
|
||||
font-size: 24rpx;
|
||||
color: #007aff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user