<template>
<view class="container">
<!-- 登录区域 -->
<view v-if="!isLoggedIn" class="login-box">
<view class="login-title">投诉后台管理登录</view>
<input v-model="loginForm.username" placeholder="请输入账号" class="login-input" />
<input v-model="loginForm.password" placeholder="请输入密码" type="password" class="login-input" />
<button @click="login" class="login-button">登录</button>
<button @click="goToHome" class="home-button">返回首页</button>
<text v-if="loginError" class="login-error">{{ loginError }}</text>
</view>
<!-- 投诉列表区域 -->
<view v-else class="complaint-container">
<view class="back-home" @click="goToHome">
<text class="icon">←</text>
<text>返回首页</text>
</view>
<view class="search-bar">
<input v-model="searchForm.category" placeholder="请输入投诉类别" />
<input v-model="searchForm.keyword" placeholder="请输入关键词" />
<view class="dropdown">
<picker mode="selector"
:range="statusOptions" range-key="
label"
:value="searchForm.statusIndex" @change="handleStatusPickerChange">
<view class="dropdown-trigger">
<text>{{ statusOptions[searchForm.statusIndex].
label }}</text>
<text class="arrow">▼</text>
</view>
</picker>
</view>
<button @click="searchComplaints">搜索</button>
</view>
<view class="complaint-list">
<view class="complaint-item" v-for="item in complaints"
:key="item.id">
<view class="title">{{ item.title }}</view>
<view class="category">类别：{{ item.category }}</view>
<view class="status-container">
<text class="status-
label">状态：</text>
<picker mode="selector"
:range="statusOptions" range-key="
label"
:value="item.statusIndex" @change="changeStatus($event, item)">
<view
:class="['picker-button', getStatusClass(item.status
Label)]">
<text>{{ item.status
Label }}</text>
</view>
</picker>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
// 登录相关
const isLoggedIn = ref(false);
const loginForm = ref({
username
: '',
password
: ''
});
const loginError = ref('');
// 返回首页
const goToHome = () => {
uni.switchTab({
url
: '/pages/index/index'
});
};
// 搜索相关
const searchForm = ref({
category
: '',
keyword
: '',
statusIndex
: 0 // 默认选中“待处理”
});
// 投诉列表
const complaints = ref([]);
// 状态选择器事件
const handleStatusPickerChange = (event) => {
const index = event.detail.value;
searchForm.value.statusIndex = index;
};
// 状态选项
const statusOptions = ref([
{
label: '待处理', value
: 0 },
{
label: '处理中', value
: 1 },
{
label: '已完成', value
: 2 }
]);
//状态颜色
const getStatusClass = (status
Label) => {
if (status
Label === '待处理') return 'status-pending';
if (status
Label === '处理中') return 'status-processing';
if (status
Label === '已完成') return 'status-completed';
return '';
};
// 模拟登录接口
const login = async () => {
uni.showLoading({ title
: '登录中' });
// 模拟请求接口
setTimeout(() => {
if (loginForm.value.username === '' && loginForm.value.password === '') {
isLoggedIn.value = true;
loginError.value = '';
fetchComplaints(); // 登录成功后加载投诉列表
} else {
loginError.value = '账号或密码错误';
}
uni.hideLoading();
}, 500);
};
// 获取投诉列表（模拟）
const fetchComplaints = async () => {
uni.showLoading({ title
: '加载中' });
// 模拟从后台获取数据
setTimeout(() => {
complaints.value = [
{
id
: 1,
title
: '关于食堂卫生问题的投诉',
category
: '后勤管理',
content
: '食堂卫生不达标，影响员工健康',
status
: 0,
status
Label: '待处理',
statusIndex
: 0
},
{
id
: 2,
title
: '关于办公室空调噪音大',
category
: '设备问题',
content
: '空调运行噪音大，影响办公',
status
: 1,
status
Label: '处理中',
statusIndex
: 1
}
];
uni.hideLoading();
}, 500);
};
// 搜索投诉
const searchComplaints = async () => {
uni.showLoading({ title
: '搜索中' });
setTimeout(() => {
let filtered = complaints.value;
// 按类别过滤
if (searchForm.value.category) {
filtered = filtered.filter(item => item.category.includes(searchForm.value.category));
}
// 按关键词过滤
if (searchForm.value.keyword) {
filtered = filtered.filter(item => item.content.includes(searchForm.value.keyword));
}
// 按状态过滤
const selectedStatusValue = statusOptions.value[searchForm.value.statusIndex].value;
if (selectedStatusValue !== '') {
filtered = filtered.filter(item => item.status === selectedStatusValue);
}
complaints.value = filtered;
uni.hideLoading();
}, 300);
};
// 状态变更
const changeStatus = async (event, item) => {
const index = event.detail.value;
const newStatus = statusOptions.value[index].value;
item.status = newStatus;
item.status
Label = statusOptions.value[index].
label;
item.statusIndex = index;
// 模拟提交到后台
await updateStatusToServer(item);
uni.showToast({ title
: '状态已更新' });
};
// 模拟提交到后台
const updateStatusToServer = async (item) => {
return new Promise(resolve => {
setTimeout(() => {
resolve();
}, 300);
});
};
</script>
<style scoped>
.container {
padding
: 30rpx;
background-color
: #f9f9f9;
}
.home-button {
background-color
: #f0f0f0;
color
: #333;
margin-top
: 20rpx;
}
.top-bar {
display
: flex;
align-items
: center;
padding
: 20rpx 0;
border-bottom
: 1rpx solid #eee;
margin-bottom
: 30rpx;
}
.back-home {
display
: flex;
align-items
: center;
font-size
: 30rpx;
color
: #007AFF;
padding
: 10rpx 20rpx;
border-radius
: 8rpx;
background-color
: #f5f5f5;
}
.back-home .icon {
margin-right
: 10rpx;
font-weight
: bold;
}
.title {
flex: 1;
/* text-align
: center; */
font-size
: 34rpx;
font-weight
: bold;
}
.login-box {
background-color
: #fff;
padding
: 40rpx;
border-radius
: 16rpx;
box-shadow
: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
.login-title {
font-size
: 36rpx;
font-weight
: bold;
text-align
: center;
margin-bottom
: 40rpx;
color
: #333;
}
.login-input {
border
: 1rpx solid #ccc;
padding
: 20rpx;
margin-bottom
: 30rpx;
border-radius
: 8rpx;
width
: 100%;
}
.login-button {
background-color
: #007AFF;
color
: white;
}
.login-error {
color
: red;
font-size
: 24rpx;
margin-top
: 10rpx;
display
: block;
}
.search-bar input {
border
: 1rpx solid #ccc;
padding
: 20rpx;
margin-bottom
: 20rpx;
border-radius
: 8rpx;
}
.complaint-list {
margin-top
: 30rpx;
}
.complaint-item {
background-color
: #fff;
padding
: 30rpx;
margin-bottom
: 30rpx;
border-radius
: 12rpx;
box-shadow
: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}
.title {
font-size
: 32rpx;
font-weight
: bold;
color
: #333;
margin-bottom
: 20rpx;
}
.category {
font-size
: 28rpx;
color
: #666;
margin-bottom
: 20rpx;
}
.status {
font-size
: 28rpx;
color
: #999;
}
.status-container {
display
: flex;
align-items
: center;
}
.status-
label {
font-size
: 28rpx;
color
: #999;
}
.picker-button {
padding
: 10rpx 20rpx;
border-radius
: 8rpx;
font-size
: 28rpx;
color
: white;
}
.status-pending {
background-color
: #ff9900; /* 橙色 */
}
.status-processing {
background-color
: #007AFF; /* 蓝色 */
}
.status-completed {
background-color
: #00cc66; /* 绿色 */
}
/* 下拉选择器样式 */
.dropdown {
position
: relative;
width
: 100%;
margin-bottom
: 20rpx;
}
.dropdown-trigger {
background-color
: #f0f0f0;
padding
: 20rpx;
border-radius
: 8rpx;
display
: flex;
justify-content
: space-between;
align-items
: center;
font-size
: 28rpx;
color
: #333;
}
.dropdown-trigger .arrow {
font-size
: 24rpx;
color
: #999;
}
</style>
点击返回登录报错
:Uncaught (in promise) {errMsg
: 'switchTab
:fail can not switch to no-tabBar page'}
参照其他页面返回上一页的代码：const goBack = () => {
// 尝试使用正常的返回方法
try {
const canBack = getCurrentPages().length > 1;
if (canBack) {
uni.navigateBack();
} else {
// 没有页面历史时跳转到
指定页面
uni.reLaunch({
url
: '/pages/ComplaintRecord/ComplaintRecord'
});
}
} catch (error) {
// 异常时使用直接跳转
uni.reLaunch({
url
: '/pages/ComplaintRecord/ComplaintRecord'
});
}
};返回首页本质就是返回上一页如果不能正常返回就跳转页面到首页：pages/index/index
本文介绍如何在Flex中为Label元素设置手型光标效果，通过三步操作即可实现：设置useHandCursor属性为true，mouseChildren属性为false，buttonMode属性为true。
扫一扫
779
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
