<template>
<view class="container">
<view class="header">
<text class="header
-title">xians投诉举报平台</text>
<text class="header
-subtitle">诚信是企业生存和发展的根本</text>
</view>
<!
-- 欢迎页面
-->
<view v
-if="showWelcome" class="welcome
-section">
<view class="welcome
-image">
<image src="/static/OnlinComplaint
.jpg" mode=""></image>
</view>
<view class="welcome
-content">
<text class="welcome
-text">欢迎举报</text>
<text class="welcome
-text">诚信是做人做事的根本，同样诚信的企业才能生存和发展。东方希望的任何人，无论职务的高低，都应谨守廉洁并自觉接受各方监督。</text>
<text class="welcome
-text">任何单位和个人都有权向东方希望举报东方希望员工的违法违纪行为。同时，我们将对您提供的信息严格保密，一经查实，将根据
公司制度给予相应奖励。</text>
</view>
<view
class="accept
-box"
:class="{disabled: countdown > 0}"
@tap="handleAccept"
>
<text>我已阅读并理解上述内容</text>
<view class="timer">
{{ countdown }}s
</view>
</view>
</view>
<!
-- 表单页面
-->
<view v
-else class="form
-section">
<view class="section
-title">
<uni
-icons type="compose" size="24" color="#3498db"></uni
-icons>
<text>投诉信息</text>
</view>
<view class="form
-row">
<view class="form
-col">
<view class="form
-group">
<label for="title" class="required">投诉标题</label>
<input
type="text"
id="title"
placeholder="请输入投诉标题"
v
-model="formData
.title"
:class="{error: errors
.title}"
>
<text v
-if="errors
.title" class="error
-text">{{ errors
.title }}</text>
</view>
</view>
<view class="form
-col">
<view class="form
-group">
<label for="category" class="required">类别</label>
<picker
@change="bindPickerChange"
:value="categoryIndex"
:range="categories"
class="picker"
>
<view class="picker
-content" :class="{placeholder: !formData
.category}">
{{ formData
.category || '请选择投诉类别' }}
</view>
</picker>
<text v
-if="errors
.category" class="error
-text">{{ errors
.category }}</text>
</view>
</view>
</view>
<view class="form
-row">
<view class="form
-col">
<view class="form
-group">
<label for="complaineeName" class="required">被投诉人姓名</label>
<input
type="text"
id="complaineeName"
placeholder="请输入被投诉人姓名"
v
-model="formData
.complaineeName"
:class="{error: errors
.complaineeName}"
>
<text v
-if="errors
.complaineeName" class="error
-text">{{ errors
.complaineeName }}</text>
</view>
</view>
<view class="form
-col">
<view class="form
-group">
<label for="company" class="required">被投诉人
公司</label>
<input
type="text"
id="company"
placeholder="请输入
公司名称"
v
-model="formData
.company"
:class="{error: errors
.company}"
>
<text v
-if="errors
.company" class="error
-text">{{ errors
.company }}</text>
</view>
</view>
</view>
<view class="form
-row">
<view class="form
-col">
<view class="form
-group">
<label for="department" class="required">被投诉人部门</label>
<input
type="text"
id="department"
placeholder="请输入部门名称"
v
-model="formData
.department"
:class="{error: errors
.department}"
>
<text v
-if="errors
.department" class="error
-text">{{ errors
.department }}</text>
</view>
</view>
</view>
<view class="form
-group">
<label for="content" class="required">投诉内容</label>
<textarea
id="content"
placeholder="请您如实详细填写投诉内容(时间、地点、事件、经过)"
v
-model="formData
.content"
:class="{error: errors
.content}"
></textarea>
<text v
-if="errors
.content" class="error
-text">{{ errors
.content }}</text>
</view>
<view class="section
-title">
<uni
-icons type="paperclip" size="24" color="#3498db"></uni
-icons>
<text>上传附件</text>
</view>
<view class="upload
-area" @tap="chooseFile">
<view class="upload
-icon">
<uni
-icons type="cloud
-upload" size="48" color="#3498db"></uni
-icons>
</view>
<view class="upload
-text">点击上传或拖拽文件到此处</view>
<view class="file
-types">支持文档、照片、音频、视频等格式</view>
</view>
<view v
-if="files
.length > 0" class="file
-list">
<view v
-for="(file, index) in files" :key="index" class="file
-item">
<uni
-icons type="paperclip" size="18" color="#3498db"></uni
-icons>
<text class="file
-name">{{ file
.name }}</text>
<text class="file
-size">({{ formatFileSize(file
.size) }})</text>
<uni
-icons
type="close"
size="18"
color="#e74c3c"
class="delete
-icon"
@tap="removeFile(index)"
></uni
-icons>
</view>
</view>
<view class="section
-title">
<uni
-icons type="person" size="24" color="#3498db"></uni
-icons>
<text>联系方式</text>
</view>
<view class="form
-row">
<view class="form
-col">
<view class="form
-group">
<label for="name" class="required">姓名</label>
<input
type="text"
id="name"
placeholder="请输入您的姓名"
v
-model="formData
.name"
:class="{error: errors
.name}"
>
<text v
-if="errors
.name" class="error
-text">{{ errors
.name }}</text>
</view>
</view>
<view class="form
-col">
<view class="form
-group">
<label for="phone" class="required">手机号</label>
<input
type="number"
id="phone"
placeholder="请输入您的手机号"
v
-model="formData
.phone"
:class="{error: errors
.phone}"
>
<text v
-if="errors
.phone" class="error
-text">{{ errors
.phone }}</text>
</view>
</view>
</view>
<view class="form
-row">
<view class="form
-col">
<view class="form
-group">
<label for="email">邮箱</label>
<input
type="email"
id="email"
placeholder="请输入您的邮箱（非必填）"
v
-model="formData
.email"
:class="{error: errors
.email}"
>
<text v
-if="errors
.email" class="error
-text">{{ errors
.email }}</text>
</view>
</view>
</view>
<view class="privacy
-note">
为了便于后续跟进调查,请您详细描述投诉内容,如实填写手机号,我们会对你的个人信息及投诉内容进行严格保密。
</view>
<button class="submit
-btn" @tap="submitForm">提交投诉</button>
</view>
</view>
</template>
<style lang="scss">
.container {
display: flex;
flex
-direction: column;
min
-height: 100vh;
background: linear
-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 20rpx;
}
.header {
background: linear
-gradient(135deg, #3498db 0%, #2c3e50 100%);
color: white;
text
-align: center;
padding: 40rpx 20rpx;
border
-radius: 0 0 30rpx 30rpx;
margin
-bottom: 20rpx;
box
-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0
.15);
}
.header
-title {
display: block;
font
-size: 40rpx;
font
-weight: bold;
margin
-bottom: 15rpx;
letter
-spacing: 1rpx;
}
.header
-subtitle {
font
-size: 28rpx;
opacity: 0
.9;
}
.welcome
-section {
padding: 30rpx;
transition: all 0
.5s ease;
}
.welcome
-image {
width: 100%;
height: 300rpx; /* 可以调整高度 */
border
-radius: 20rpx;
overflow: hidden; /* 确保圆角生效 */
box
-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0
.1);
display: flex;
justify
-content: center;
align
-items: center;
}
.welcome
-image image {
width: 100%;
height: 100%;
object
-fit: cover; /* 确保图片覆盖整个容器，并保持比例 */
}
.welcome
-content {
background
-color: #f8f9fa;
border
-radius: 20rpx;
padding: 30rpx;
line
-height: 1
.8;
font
-size: 28rpx;
color: #333;
box
-shadow: inset 0 0 10rpx rgba(0, 0, 0, 0
.05);
margin
-bottom: 30rpx;
}
.welcome
-text {
display: block;
margin
-bottom: 20rpx;
}
.accept
-box {
display: flex;
justify
-content: center;
align
-items: center;
padding: 25rpx;
background
-color: #e3f2fd;
border
-radius: 20rpx;
cursor: pointer;
transition: all 0
.3s ease;
border: 2rpx solid #bbdefb;
box
-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0
.1);
}
.accept
-box
.disabled {
background
-color: #f5f5f5;
cursor: not
-allowed;
opacity: 0
.7;
}
.accept
-box
.timer {
background
-color: #e74c3c;
color: white;
width: 70rpx;
height: 70rpx;
border
-radius: 50%;
display: flex;
justify
-content: center;
align
-items: center;
margin
-left: 20rpx;
font
-weight: bold;
font
-size: 30rpx;
}
.form
-section {
padding: 30rpx;
}
.section
-title {
font
-size: 34rpx;
color: #2c3e50;
margin
-bottom: 30rpx;
padding
-bottom: 15rpx;
border
-bottom: 2rpx solid #3498db;
display: flex;
align
-items: center;
text {
margin
-left: 15rpx;
font
-weight: bold;
}
}
.form
-group {
margin
-bottom: 35rpx;
position: relative;
}
.form
-row {
display: flex;
flex
-wrap: wrap;
margin: 0
-15rpx;
}
.form
-col {
flex: 1;
padding: 0 15rpx;
min
-width: 300rpx;
}
label {
display: block;
margin
-bottom: 15rpx;
font
-weight: 500;
color: #2c3e50;
font
-size: 30rpx;
}
label
.required::after {
content: "*";
color: #e74c3c;
margin
-left: 8rpx;
}
input, select, textarea,
.picker
-content {
width: 100%;
padding: 25rpx;
border: 2rpx solid #e0e0e0;
border
-radius: 15rpx;
font
-size: 28rpx;
transition: all 0
.3s ease;
background
-color: #fff;
}
input:focus, select:focus, textarea:focus,
.picker
-content:active {
border
-color: #3498db;
outline: none;
box
-shadow: 0 0 0 3rpx rgba(52, 152, 219, 0
.2);
}
textarea {
min
-height: 200rpx;
resize: vertical;
}
.picker
-content {
display: flex;
align
-items: center;
height: 80rpx;
&
.placeholder {
color: #999;
}
}
.upload
-area {
border: 2rpx dashed #3498db;
border
-radius: 20rpx;
padding: 40rpx 30rpx;
text
-align: center;
background
-color: #e3f2fd;
cursor: pointer;
transition: all 0
.3s ease;
margin
-bottom: 30rpx;
}
.upload
-area:active {
background
-color: #bbdefb;
transform: scale(0
.98);
}
.upload
-icon {
margin
-bottom: 20rpx;
}
.upload
-text {
color: #2c3e50;
margin
-bottom: 20rpx;
font
-size: 30rpx;
font
-weight: 500;
}
.file
-types {
color: #7f8c8d;
font
-size: 26rpx;
}
.file
-list {
margin
-top: 20rpx;
margin
-bottom: 30rpx;
}
.file
-item {
display: flex;
align
-items: center;
padding: 20rpx;
background
-color: #f8f9fa;
border
-radius: 15rpx;
margin
-bottom: 15rpx;
border
-left: 4rpx solid #3498db;
}
.file
-name {
flex: 1;
margin: 0 15rpx;
font
-size: 28rpx;
color: #2c3e50;
overflow: hidden;
text
-overflow: ellipsis;
white
-space: nowrap;
}
.file
-size {
color: #7f8c8d;
font
-size: 26rpx;
}
.delete
-icon {
margin
-left: auto;
padding: 10rpx;
}
.error
-text {
display: block;
color: #e74c3c;
font
-size: 26rpx;
margin
-top: 10rpx;
}
input
.error, textarea
.error,
.picker
-content
.error {
border
-color: #e74c3c;
}
.privacy
-note {
background
-color: #f8f9fa;
border
-radius: 15rpx;
padding: 25rpx;
margin
-top: 30rpx;
font
-size: 26rpx;
color: #7f8c8d;
text
-align: center;
border: 1rpx solid #e9ecef;
line
-height: 1
.6;
}
.submit
-btn {
background: linear
-gradient(to right, #3498db, #2980b9);
color: white;
border: none;
padding: 25rpx 0;
width: 100%;
border
-radius: 50rpx;
font
-size: 32rpx;
font
-weight: 600;
margin
-top: 30rpx;
box
-shadow: 0 5rpx 20rpx rgba(52, 152, 219, 0
.4);
transition: all 0
.3s ease;
}
.submit
-btn:active {
transform: translateY(
-3rpx);
box
-shadow: 0 8rpx 25rpx rgba(52, 152, 219, 0
.6);
}
/* 响应式设计 */
@media (min
-width: 768px) {
.container {
max
-width: 750px;
margin: 0 auto;
padding: 40rpx;
}
.welcome
-image {
height: 350rpx;
}
}
</style>
我想要表单页面里的投诉输入框高度一致（除了投诉内容）并且单独一行，我浏览器打开的时候，投诉标题和类别就在同一行了
本文介绍了一种在Java中处理过长字符串的方法，通过限制显示长度并使用title属性展示完整内容，确保用户界面整洁的同时提供完整信息。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
