改变故障上报路径 修改样式

This commit is contained in:
zhouyanli
2026-04-29 11:02:36 +08:00
parent e0ff09374c
commit 1464fe9d7d
11 changed files with 1146 additions and 738 deletions

View File

@@ -0,0 +1,242 @@
<template>
<view class="form-container">
<!-- 维修项目展示 -->
<view class="form-item">
<text class="label">维修项目</text>
<view class="value" @click="goBackSelect">
<view>
<text v-if="!repairProject">请选择项目</text>
{{ repairProject }}
</view>
<uni-icons type="arrowright" size="16"></uni-icons>
</view>
</view>
<!-- 标题输入 -->
<view class="form-item">
<text class="label">标题</text>
<!-- <input type="text" placeholder="请输入问题标题" v-model="form.title" /> -->
<uni-easyinput v-model="form.title" placeholder="请输入内容" :inputBorder="false"></uni-easyinput>
</view>
<!-- 问题描述 -->
<view class="form-item-wenti">
<text class="label">问题描述</text>
<!-- <textarea placeholder="请输入问题内容" v-model="form.desc" rows="5" ></textarea> -->
<uni-easyinput v-model="form.desc" placeholder="请描述你的问题" type="textarea"></uni-easyinput>
</view>
<!-- 手机号 -->
<view class="form-item">
<text class="label">手机号</text>
<uni-easyinput type="number" v-model="form.phone" placeholder="请输入手机号" :inputBorder="false"></uni-easyinput>
</view>
<!-- 图片上传 -->
<view class="form-item-wenti">
<text class="label">问题照片</text>
<view class="upload-wrap">
<!-- 已上传图片 -->
<view class="upload-item" v-for="(img, index) in form.images" :key="index">
<image :src="img" mode="aspectFill"></image>
<uni-icons type="close" size="16" @click="deleteImage(index)"></uni-icons>
</view>
<!-- 上传按钮 -->
<view class="upload-btn" @click="chooseImage">
<uni-icons type="plus" size="24"></uni-icons>
<text>上传照片</text>
</view>
</view>
</view>
<!-- 提交按钮 -->
<button class="submit-btn" @click="submitForm">提交</button>
</view>
</template>
<script setup>
import { ref } from 'vue'
import{onLoad} from "@dcloudio/uni-app"
// import { onLoad, uniShowToast, uniNavigateBack, uniChooseImage, uniUploadFile } from '@dcloudio/uni-app'
// 接收上个页面传的维修项目
const repairProject = ref('')
// 表单数据
const form = ref({
title: '',
desc: '',
phone: '',
images: [] // 图片列表
})
// 页面加载时获取传参
onLoad((options) => {
if (options.category && options.project) {
repairProject.value = `${options.category}-${options.project}`
}
})
// 选择项目页
const goBackSelect = () => {
uni.navigateTo({
url:"/pageSubPack/fault-reporting/repairSelect"
})
}
// 选择图片
const chooseImage = () => {
uni.chooseImage({
count: 3, // 最多选3张
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
// 临时文件路径
const tempFilePaths = res.tempFilePaths
form.value.images = [...form.value.images, ...tempFilePaths]
// 【可选】如果需要上传到服务器,取消下面注释
// tempFilePaths.forEach(path => {
// uni.uploadFile({
// url: '你的上传接口地址',
// filePath: path,
// name: 'file',
// success: (uploadRes) => {
// console.log('上传成功', uploadRes)
// }
// })
// })
}
})
}
// 删除图片
const deleteImage = (index) => {
form.value.images.splice(index, 1)
}
// 表单提交
const submitForm = () => {
// 表单校验
if (!repairProject.value) {
uni.showToast({ title: '请选择维修项目', icon: 'none' })
return
}
if (!form.value.title) {
uni.showToast({ title: '请输入问题标题', icon: 'none' })
return
}
if (!form.value.desc) {
uni.showToast({ title: '请输入问题描述', icon: 'none' })
return
}
if (!/^1[3-9]\d{9}$/.test(form.value.phone)) {
uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
return
}
// 提交数据(替换成你的接口)
uni.showLoading({ title: '提交中...' })
// 模拟接口请求
setTimeout(() => {
uni.hideLoading()
uni.showToast({ title: '提交成功', icon: 'success' })
// 提交成功后重置表单/返回上一页
form.value = { title: '', desc: '', phone: '', images: [] }
// 或返回上一页
uni.navigateBack({ delta: 3 })
}, 1000)
}
</script>
<style scoped>
.form-container {
padding: 30rpx 40rpx;
background: #fff;
min-height: 100vh;
}
.form-item-wenti {
margin-bottom: 20px;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
.form-item {
display: flex;
margin-bottom: 30rpx;
align-items: flex-start;
border-bottom: 1px solid #eee;
}
.label {
width: 140rpx;
font-size: 28rpx;
color: #333;
line-height: 80rpx;
}
.value {
flex: 1;
font-size: 28rpx;
color: #666;
line-height: 80rpx;
text-align: right;
display: flex;
justify-content: space-between;
}
.input, .textarea {
font-size: 14px;
width: 100%;
padding: 8px 0;
box-sizing: border-box;
}
.textarea {
resize: none;
}
.upload-wrap {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 8px;
}
.upload-item {
position: relative;
width: 80px;
height: 80px;
}
.upload-item image {
width: 100%;
height: 100%;
border-radius: 4px;
}
.upload-item uni-icons {
position: absolute;
top: -5px;
right: -5px;
background: #ff3b30;
color: #fff;
border-radius: 50%;
padding: 2px;
}
.upload-btn {
width: 80px;
height: 80px;
border: 1px dashed #ccc;
border-radius: 4px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #999;
font-size: 12px;
}
.submit-btn {
width: 100%;
background: #4D5DFA;
color: #fff;
border-radius: 6px;
height: 44px;
line-height: 44px;
font-size: 16px;
}
</style>

View File

@@ -10,11 +10,11 @@
<view class="category-wrap"> <view class="category-wrap">
<!-- 左侧分类 --> <!-- 左侧分类 -->
<scroll-view scroll-y class="category-left"> <scroll-view scroll-y class="category-left">
<view <view
class="category-item" class="category-item"
:class="{ active: activeCategory === item.id }" :class="{ active: activeCategory === item.id }"
@click="selectCategory(item)" @click="selectCategory(item)"
v-for="item in categoryList" v-for="item in categoryList"
:key="item.id" :key="item.id"
> >
{{ item.name }} {{ item.name }}
@@ -23,10 +23,10 @@
<!-- 右侧项目 --> <!-- 右侧项目 -->
<scroll-view scroll-y class="category-right"> <scroll-view scroll-y class="category-right">
<view <view
class="project-item" class="project-item"
@click="selectProject(item)" @click="selectProject(item)"
v-for="item in currentProjectList" v-for="item in currentProjectList"
:key="item.id" :key="item.id"
> >
{{ item.name }} {{ item.name }}
@@ -79,7 +79,7 @@ const selectProject = (item) => {
const categoryName = categoryList.value.find(c => c.id === item.categoryId)?.name const categoryName = categoryList.value.find(c => c.id === item.categoryId)?.name
// 跳转并传参 // 跳转并传参
uni.navigateTo({ uni.navigateTo({
url: `/pageSubPack/report-record/report-record?category=${categoryName}&project=${item.name}` url: `/pageSubPack/fault-reporting/fault-reporting?category=${categoryName}&project=${item.name}`
}) })
} }
</script> </script>
@@ -138,4 +138,4 @@ const selectProject = (item) => {
.project-item:active { .project-item:active {
background: #f5f5f5; background: #f5f5f5;
} }
</style> </style>

View File

@@ -14,14 +14,6 @@
<uni-easyinput class="input-content" type="number" v-model="phoneNumber" placeholder="请输入手机号" <uni-easyinput class="input-content" type="number" v-model="phoneNumber" placeholder="请输入手机号"
:inputBorder="false" maxlength="11" :placeholderStyle="placeholderStyle"> :inputBorder="false" maxlength="11" :placeholderStyle="placeholderStyle">
</uni-easyinput> </uni-easyinput>
<!-- <input
class="input-content"
type="number"
placeholder="请输入手机号"
v-model="phoneNumber"
maxlength="11"
@input="checkForm"
/> -->
</view> </view>
<!-- 验证码输入框 + 获取验证码按钮 --> <!-- 验证码输入框 + 获取验证码按钮 -->
@@ -33,14 +25,6 @@
<uni-easyinput class="input-content verify-input" type="number" v-model="verifyCode" placeholder="请输入验证码" <uni-easyinput class="input-content verify-input" type="number" v-model="verifyCode" placeholder="请输入验证码"
:inputBorder="false" maxlength="6" :placeholderStyle="placeholderStyle"> :inputBorder="false" maxlength="6" :placeholderStyle="placeholderStyle">
</uni-easyinput> </uni-easyinput>
<!-- <input
class="input-content verify-input"
type="number"
placeholder="请输入验证码"
v-model="verifyCode"
maxlength="6"
@input="checkForm"
/> -->
<button class="get-verify-btn" :disabled="!canGetVerify || countDown > 0" @click="getVerifyCode"> <button class="get-verify-btn" :disabled="!canGetVerify || countDown > 0" @click="getVerifyCode">
{{ countDown > 0 ? `${countDown}s后重新获取` : '获取验证码' }} {{ countDown > 0 ? `${countDown}s后重新获取` : '获取验证码' }}
</button> </button>
@@ -54,7 +38,7 @@
</view> </view>
<text class="agreement-text" @click.stop="goToPrivacy">我已阅读并同意 <text class="agreement-text" @click.stop="goToPrivacy">我已阅读并同意
<text class="agreePrivacy" :class="{active:isClicked}">《用户隐私政策》</text> <text class="agreePrivacy">《用户隐私政策》</text>
</text> </text>
</view> </view>
@@ -95,7 +79,7 @@
// 定时器 // 定时器
let timer = null; let timer = null;
// 控制点击变色 // 控制点击变色
const isClicked = ref(false) // const isClicked = ref(false)
// ========== 计算属性 ========== // ========== 计算属性 ==========
// 是否可以获取验证码(手机号格式正确) // 是否可以获取验证码(手机号格式正确)
@@ -125,7 +109,7 @@
// 跳转隐私协议 // 跳转隐私协议
const goToPrivacy = () => { const goToPrivacy = () => {
// 点击变色 // 点击变色
isClicked.value = true // isClicked.value = true
uni.navigateTo({ uni.navigateTo({
url:'/pageSubPack/loginSub/privacy', url:'/pageSubPack/loginSub/privacy',
}) })
@@ -344,12 +328,8 @@
margin-left: 10rpx; margin-left: 10rpx;
} }
.agreePrivacy{ .agreePrivacy{
color: #666;
}
.agreePrivacy.active{
color: #4D5DFA; color: #4D5DFA;
} }
/* 登录按钮 */ /* 登录按钮 */
.login-btn { .login-btn {
width: 100%; width: 100%;
@@ -387,4 +367,4 @@
color: #4D5DFA; color: #4D5DFA;
text-decoration: none; text-decoration: none;
} }
</style> </style>

View File

@@ -37,7 +37,7 @@
<uni-icons type="checkbox" size="24" color="#999" v-else></uni-icons> <uni-icons type="checkbox" size="24" color="#999" v-else></uni-icons>
</view> </view>
<text class="agreement-text" @click.stop="goToPrivacy">我已阅读并同意 <text class="agreement-text" @click.stop="goToPrivacy">我已阅读并同意
<text class="agreePrivacy" :class="{active:isClicked}">《用户隐私政策》</text> <text class="agreePrivacy">《用户隐私政策》</text>
</text> </text>
</view> </view>
<navigator class="forget-pwd" url="/pageSubPack/loginSub/forget-pwd">忘记密码?</navigator> <navigator class="forget-pwd" url="/pageSubPack/loginSub/forget-pwd">忘记密码?</navigator>
@@ -74,7 +74,7 @@
const agreeAgreement = ref(false); // 默认勾选 const agreeAgreement = ref(false); // 默认勾选
const placeholderStyle = ref('font-size:24rpx') const placeholderStyle = ref('font-size:24rpx')
// 控制点击变色 // 控制点击变色
const isClicked = ref(false) // const isClicked = ref(false)
// 计算属性:是否可登录(帐号+密码+协议都满足) // 计算属性:是否可登录(帐号+密码+协议都满足)
const canLogin = computed(() => { const canLogin = computed(() => {
@@ -89,8 +89,8 @@
}; };
// 跳转隐私协议 // 跳转隐私协议
const goToPrivacy = () => { const goToPrivacy = () => {
// 点击变色
isClicked.value = true // isClicked.value = true
uni.navigateTo({ uni.navigateTo({
url:'/pageSubPack/loginSub/privacy', url:'/pageSubPack/loginSub/privacy',
}) })
@@ -233,11 +233,11 @@
margin-left: 10rpx; margin-left: 10rpx;
} }
.agreePrivacy{ .agreePrivacy{
color: #666;
}
.agreePrivacy.active{
color: #4D5DFA; color: #4D5DFA;
} }
/* .agreePrivacy.active{
color: #4D5DFA;
} */
.forget-pwd { .forget-pwd {
font-size: 28rpx; font-size: 28rpx;
@@ -279,4 +279,4 @@
color: #4D5DFA; color: #4D5DFA;
text-decoration: none; text-decoration: none;
} }
</style> </style>

View File

@@ -36,7 +36,7 @@ import { ref } from 'vue'
// 跳转到详情页方法 // 跳转到详情页方法
const goToDetail = () => { const goToDetail = () => {
uni.navigateTo({ uni.navigateTo({
url: '/pageSubPack/notice-list/noticeListDetails' url: '/pageSubPack/notice-list/noticeListDetails'
}) })
} }
</script> </script>
@@ -81,9 +81,9 @@ const goToDetail = () => {
// 右上角未读红点 // 右上角未读红点
.unread-dot { .unread-dot {
width: 8rpx; width: 16rpx;
height: 8rpx; height: 16rpx;
background-color: #ff3b30; background-color: #E34D59;
border-radius: 50%; border-radius: 50%;
margin-top: 6rpx; margin-top: 6rpx;
} }
@@ -130,4 +130,4 @@ const goToDetail = () => {
color: #4D5DFA; color: #4D5DFA;
margin-right: 8rpx; margin-right: 8rpx;
} }
</style> </style>

View File

@@ -4,13 +4,8 @@
<view class="search-container"> <view class="search-container">
<view class="search-input-wrapper"> <view class="search-input-wrapper">
<uni-icons class="search-icon" type="search" size="20" color="#999"></uni-icons> <uni-icons class="search-icon" type="search" size="20" color="#999"></uni-icons>
<input <input class="search-input" placeholder="请输入关键字进行搜索" placeholder-class="placeholder" v-model="searchText"
class="search-input" @input="handleSearchInput" />
placeholder="请输入关键字进行搜索"
placeholder-class="placeholder"
v-model="searchText"
@input="handleSearchInput"
/>
<view v-if="searchText" class="clear-icon" @tap="clearSearch"> <view v-if="searchText" class="clear-icon" @tap="clearSearch">
<uni-icons type="clear" size="18" color="#999"></uni-icons> <uni-icons type="clear" size="18" color="#999"></uni-icons>
</view> </view>
@@ -19,35 +14,21 @@
</view> </view>
<!-- 小区列表 --> <!-- 小区列表 -->
<scroll-view <scroll-view class="community-list" scroll-y :scroll-into-view="scrollIntoViewId" @scrolltolower="loadMoreData"
class="community-list" :lower-threshold="100">
scroll-y <view v-for="item in displayedCommunities" :key="item.id" class="community-item" :id="'item-' + item.id"
:scroll-into-view="scrollIntoViewId" @tap="selectCommunity(item)" :class="{active:selectedItem?.id === item.id}">
@scrolltolower="loadMoreData"
:lower-threshold="100"
>
<view
v-for="item in displayedCommunities"
:key="item.id"
class="community-item"
:id="'item-' + item.id"
@tap="selectCommunity(item)"
>
<view class="community-item-left"> <view class="community-item-left">
<image src="/static/imgs/community.png" style="width: 48rpx;height: 48rpx;"></image> <image src="/static/imgs/community.png" style="width: 48rpx;height: 48rpx;"></image>
<!-- <uni-icons class="house-icon" type="home" size="24" color="#666"></uni-icons> -->
<view class="community-info"> <view class="community-info">
<text class="community-name">{{ item.name }}</text> <text class="community-name">{{ item.name }}</text>
<!-- <text class="community-address">{{ item.address }}</text> -->
<!-- <text class="community-id">ID: {{ item.id }}</text> -->
</view> </view>
</view> </view>
<view v-if="selectedItem && selectedItem.id === item.id" class="selected-icon"> <view v-if="selectedItem && selectedItem.id === item.id" class="selected-icon">
<!-- <uni-icons type="checkbox-filled" size="24" color="#007AFF"></uni-icons> --> <image src="/static/imgs/check.png" style="width: 48rpx;height: 48rpx;"></image>
<image src="/static/imgs/check.png" style="width: 48rpx;height: 48rpx;"></image>
</view> </view>
</view> </view>
<!-- 加载更多 --> <!-- 加载更多 -->
<view v-if="hasMoreData" class="load-more-container"> <view v-if="hasMoreData" class="load-more-container">
<view v-if="!isLoading" class="load-more-btn" @tap="loadMoreData"> <view v-if="!isLoading" class="load-more-btn" @tap="loadMoreData">
@@ -60,18 +41,18 @@
</view> </view>
<!-- <text class="page-info">第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</text> --> <!-- <text class="page-info">第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</text> -->
</view> </view>
<!-- 没有更多数据 --> <!-- 没有更多数据 -->
<view v-if="!hasMoreData && displayedCommunities.length > 0" class="no-more-data"> <view v-if="!hasMoreData && displayedCommunities.length > 0" class="no-more-data">
<text>没有更多数据了</text> <text>没有更多数据了</text>
</view> </view>
<!-- 空状态 --> <!-- 空状态 -->
<view v-if="displayedCommunities.length === 0 && !isSearching" class="empty-state"> <view v-if="displayedCommunities.length === 0 && !isSearching" class="empty-state">
<uni-icons type="info" size="60" color="#ccc"></uni-icons> <uni-icons type="info" size="60" color="#ccc"></uni-icons>
<text class="empty-text">暂无小区数据</text> <text class="empty-text">暂无小区数据</text>
</view> </view>
<!-- 搜索无结果 --> <!-- 搜索无结果 -->
<view v-if="displayedCommunities.length === 0 && isSearching" class="empty-state"> <view v-if="displayedCommunities.length === 0 && isSearching" class="empty-state">
<uni-icons type="search" size="60" color="#ccc"></uni-icons> <uni-icons type="search" size="60" color="#ccc"></uni-icons>
@@ -82,12 +63,8 @@
<!-- 确认按钮 --> <!-- 确认按钮 -->
<view class="confirm-area"> <view class="confirm-area">
<button <button class="confirm-btn" :disabled="!selectedItem" :class="{ 'disabled-btn': !selectedItem }"
class="confirm-btn" @tap="handleConfirm">
:disabled="!selectedItem"
:class="{ 'disabled-btn': !selectedItem }"
@tap="handleConfirm"
>
确认选择 确认选择
</button> </button>
</view> </view>
@@ -95,435 +72,490 @@
</template> </template>
<script setup> <script setup>
import { ref, computed, onMounted, watch } from 'vue' import {
ref,
computed,
onMounted,
watch
} from 'vue'
// 响应式数据 // 响应式数据
const searchText = ref('') const searchText = ref('')
const selectedItem = ref(null) const selectedItem = ref(null)
const scrollIntoViewId = ref('') const scrollIntoViewId = ref('')
// 分页相关 // 分页相关
const currentPage = ref(1) const currentPage = ref(1)
const pageSize = 5 const pageSize = 5
const totalCommunities = ref([]) const totalCommunities = ref([])
const displayedCommunities = ref([]) const displayedCommunities = ref([])
const hasMoreData = ref(true) const hasMoreData = ref(true)
const isLoading = ref(false) const isLoading = ref(false)
// 搜索状态 // 搜索状态
const isSearching = ref(false) const isSearching = ref(false)
let searchTimeout = null let searchTimeout = null
// 所有小区数据 // 所有小区数据
const allCommunities = ref([ const allCommunities = ref([{
{ id: 1, name: '北境碧桂园小区', address: '北境市光明区碧桂路1号' }, id: 1,
{ id: 2, name: '南湖花园小区', address: '南湖市滨湖区湖滨路28号' }, name: '北境碧桂园小区',
{ id: 3, name: '东城国际社区', address: '东城市新城区人民路156号' }, address: '北境市光明区碧桂路1号'
{ id: 4, name: '西湖雅苑', address: '西湖市风景区梅灵路88号' }, },
{ id: 5, name: '北境锦绣家园', address: '北境市朝阳区朝阳路56号' }, {
{ id: 6, name: '阳光100小区', address: '阳光市高新区创业路100号' }, id: 2,
{ id: 7, name: '绿城玫瑰园', address: '绿城市西湖区学院路188号' }, name: '南湖花园小区',
{ id: 8, name: '金地自在城', address: '金城市江干区金沙大道200号' }, address: '南湖市滨湖区湖滨路28号'
{ id: 9, name: '万科城市花园', address: '万城市余杭区文一西路299号' }, },
{ id: 10, name: '保利中央公园', address: '保利市拱墅区莫干山路500号' }, {
{ id: 11, name: '龙湖天街小区', address: '龙湖市滨江区江南大道100号' }, id: 3,
]) name: '东城国际社区',
address: '东城市新城区人民路156号'
},
{
id: 4,
name: '西湖雅苑',
address: '西湖市风景区梅灵路88号'
},
{
id: 5,
name: '北境锦绣家园',
address: '北境市朝阳区朝阳路56号'
},
{
id: 6,
name: '阳光100小区',
address: '阳光市高新区创业路100号'
},
{
id: 7,
name: '绿城玫瑰园',
address: '绿城市西湖区学院路188号'
},
{
id: 8,
name: '金地自在城',
address: '金城市江干区金沙大道200号'
},
{
id: 9,
name: '万科城市花园',
address: '万城市余杭区文一西路299号'
},
{
id: 10,
name: '保利中央公园',
address: '保利市拱墅区莫干山路500号'
},
{
id: 11,
name: '龙湖天街小区',
address: '龙湖市滨江区江南大道100号'
},
])
// 计算属性 // 计算属性
const totalPages = computed(() => { const totalPages = computed(() => {
return Math.ceil(totalCommunities.value.length / pageSize) return Math.ceil(totalCommunities.value.length / pageSize)
}) })
// 方法 // 方法
// 加载分页数据 // 加载分页数据
const loadPageData = (pageNum) => { const loadPageData = (pageNum) => {
isLoading.value = true isLoading.value = true
// 模拟网络请求延迟
setTimeout(() => {
const startIndex = (pageNum - 1) * pageSize
const endIndex = startIndex + pageSize
const pageData = totalCommunities.value.slice(startIndex, endIndex)
if (pageNum === 1) {
displayedCommunities.value = pageData
} else {
displayedCommunities.value = [...displayedCommunities.value, ...pageData]
}
currentPage.value = pageNum
hasMoreData.value = displayedCommunities.value.length < totalCommunities.value.length
isLoading.value = false
// 滚动到新加载的内容
if (pageNum > 1 && pageData.length > 0) {
setTimeout(() => {
scrollIntoViewId.value = 'item-' + pageData[0].id
}, 100)
}
}, 500)
}
// 加载更多数据 // 模拟网络请求延迟
const loadMoreData = () => { setTimeout(() => {
if (isLoading.value || !hasMoreData.value) return const startIndex = (pageNum - 1) * pageSize
loadPageData(currentPage.value + 1) const endIndex = startIndex + pageSize
} const pageData = totalCommunities.value.slice(startIndex, endIndex)
// 处理搜索输入 if (pageNum === 1) {
const handleSearchInput = () => { displayedCommunities.value = pageData
// 防抖处理 } else {
if (searchTimeout) { displayedCommunities.value = [...displayedCommunities.value, ...pageData]
clearTimeout(searchTimeout) }
currentPage.value = pageNum
hasMoreData.value = displayedCommunities.value.length < totalCommunities.value.length
isLoading.value = false
// 滚动到新加载的内容
if (pageNum > 1 && pageData.length > 0) {
setTimeout(() => {
scrollIntoViewId.value = 'item-' + pageData[0].id
}, 100)
}
}, 500)
} }
searchTimeout = setTimeout(() => {
handleSearch()
}, 300)
}
// 处理搜索 // 加载更多数据
const handleSearch = () => { const loadMoreData = () => {
const keyword = searchText.value.trim().toLowerCase() if (isLoading.value || !hasMoreData.value) return
loadPageData(currentPage.value + 1)
if (!keyword) { }
// 处理搜索输入
const handleSearchInput = () => {
// 防抖处理
if (searchTimeout) {
clearTimeout(searchTimeout)
}
searchTimeout = setTimeout(() => {
handleSearch()
}, 300)
}
// 处理搜索
const handleSearch = () => {
const keyword = searchText.value.trim().toLowerCase()
if (!keyword) {
isSearching.value = false
totalCommunities.value = [...allCommunities.value]
loadPageData(1)
return
}
isSearching.value = true
totalCommunities.value = allCommunities.value.filter(community =>
community.name.toLowerCase().includes(keyword) ||
community.address.toLowerCase().includes(keyword)
)
loadPageData(1)
}
// 清空搜索
const clearSearch = () => {
searchText.value = ''
isSearching.value = false isSearching.value = false
totalCommunities.value = [...allCommunities.value] totalCommunities.value = [...allCommunities.value]
loadPageData(1) loadPageData(1)
return
} }
isSearching.value = true
totalCommunities.value = allCommunities.value.filter(community =>
community.name.toLowerCase().includes(keyword) ||
community.address.toLowerCase().includes(keyword)
)
loadPageData(1)
}
// 清空搜索 // 选择小区
const clearSearch = () => { const selectCommunity = (item) => {
searchText.value = '' selectedItem.value = item
isSearching.value = false
totalCommunities.value = [...allCommunities.value]
loadPageData(1)
}
// 选择小区
const selectCommunity = (item) => {
selectedItem.value = item
}
// 确认选择
const handleConfirm = () => {
if (!selectedItem.value) {
uni.showToast({
title: '请先选择小区',
icon: 'none',
duration: 2000
})
return
} }
uni.showModal({ // 确认选择
title: '确认选择', const handleConfirm = () => {
content: `您已选择: ${selectedItem.value.name}\n地址: ${selectedItem.value.address}`, if (!selectedItem.value) {
success: (res) => { uni.showToast({
if (res.confirm) { title: '请先选择小区',
uni.showToast({ icon: 'none',
title: '选择成功', duration: 2000
icon: 'success', })
duration: 1500 return
}) }
// 在实际应用中,这里可以触发回调或页面跳转 uni.showModal({
// uni.navigateBack() 或 emit('confirm', selectedItem.value) title: '确认选择',
uni.$emit('confirm', selectedItem.value) content: `您已选择: ${selectedItem.value.name}\n地址: ${selectedItem.value.address}`,
// 模拟2秒后返回上一页 success: (res) => {
setTimeout(() => { if (res.confirm) {
uni.navigateBack() uni.showToast({
}, 1500) title: '选择成功',
icon: 'success',
duration: 1500
})
// 在实际应用中,这里可以触发回调或页面跳转
// uni.navigateBack() 或 emit('confirm', selectedItem.value)
uni.$emit('confirm', selectedItem.value)
// 模拟2秒后返回上一页
setTimeout(() => {
uni.navigateBack()
}, 1500)
}
} }
})
}
// 监听搜索文本变化
watch(searchText, (newVal) => {
if (!newVal.trim()) {
clearSearch()
} }
}) })
}
// 监听搜索文本变化 // 初始化
watch(searchText, (newVal) => { onMounted(() => {
if (!newVal.trim()) { // 初始化数据
clearSearch() totalCommunities.value = [...allCommunities.value]
} loadPageData(1)
})
// 初始化 // 默认选中第一项
onMounted(() => { if (displayedCommunities.value.length > 0) {
// 初始化数据 selectedItem.value = displayedCommunities.value[0]
totalCommunities.value = [...allCommunities.value] }
loadPageData(1) })
// 默认选中第一项
if (displayedCommunities.value.length > 0) {
selectedItem.value = displayedCommunities.value[0]
}
})
</script> </script>
<style scoped> <style scoped>
/* 页面容器 */ /* 页面容器 */
.container {
min-height: 100vh;
background-color: #f5f5f5;
display: flex;
flex-direction: column;
padding: 0rpx 40rpx;
}
/* 搜索区域 */
.search-container {
padding: 20rpx 30rpx;
background-color: #ffffff;
display: flex;
align-items: center;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
z-index: 10;
position: sticky;
top: 0;
}
.search-input-wrapper {
flex: 1;
background-color: #f8f8f8;
border-radius: 10rpx;
padding: 0 20rpx;
display: flex;
align-items: center;
height: 80rpx;
margin-right: 20rpx;
}
.search-icon {
margin-right: 15rpx;
}
.search-input {
flex: 1;
height: 100%;
font-size: 28rpx;
color: #333;
}
.placeholder {
color: #999;
font-size: 28rpx;
}
.clear-icon {
padding: 10rpx;
display: flex;
align-items: center;
justify-content: center;
}
.search-btn {
background-color: #007AFF;
color: #fff;
font-size: 28rpx;
height: 80rpx;
line-height: 80rpx;
border-radius: 10rpx;
padding: 0 30rpx;
margin: 0;
white-space: nowrap;
}
/* 小区列表 */
.community-list {
flex: 1;
/* padding: 0 30rpx; */
margin-top: 20rpx;
margin-bottom: 180rpx;
}
.community-item {
background-color: #fff;
border-radius: 12rpx;
padding: 30rpx;
margin-bottom: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
transition: all 0.2s;
}
.community-item:active {
background-color: #f9f9f9;
transform: translateY(2rpx);
}
.community-item-left {
display: flex;
align-items: center;
flex: 1;
}
.house-icon {
margin-right: 20rpx;
}
.community-info {
display: flex;
flex-direction: column;
flex: 1;
}
.community-name {
font-size: 32rpx;
color: #333;
font-weight: 500;
margin-bottom: 8rpx;
}
.community-address {
font-size: 24rpx;
color: #999;
margin-bottom: 5rpx;
}
.community-id {
font-size: 22rpx;
color: #ccc;
}
.selected-icon {
margin-left: 20rpx;
}
/* 加载更多容器 */
.load-more-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 40rpx 0;
color: #999;
}
.load-more-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 20rpx 40rpx;
background-color: #f8f8f8;
border-radius: 50rpx;
color: #007AFF;
font-size: 28rpx;
margin-bottom: 20rpx;
}
.load-more-btn text {
margin-right: 10rpx;
}
.loading-container {
display: flex;
align-items: center;
justify-content: center;
padding: 20rpx 40rpx;
background-color: #f8f8f8;
border-radius: 50rpx;
color: #007AFF;
font-size: 28rpx;
margin-bottom: 20rpx;
}
.loading-icon {
margin-right: 10rpx;
animation: rotate 1s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.page-info {
font-size: 24rpx;
color: #999;
}
/* 没有更多数据 */
.no-more-data {
text-align: center;
padding: 40rpx 0;
color: #999;
font-size: 28rpx;
}
/* 空状态 */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100rpx 0;
}
.empty-text {
font-size: 32rpx;
color: #999;
margin-top: 20rpx;
margin-bottom: 10rpx;
}
.empty-tip {
font-size: 24rpx;
color: #ccc;
}
/* 确认区域 */
.confirm-area {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20rpx 30rpx 40rpx;
background-color: #fff;
box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.05);
}
.confirm-btn {
background-color: #4D5DFA;
color: #fff;
height: 100rpx;
line-height: 100rpx;
border-radius: 8rpx;
font-size: 34rpx;
width: 100%;
margin: 0;
}
.disabled-btn {
background-color: #ccc;
color: #fff;
}
.selected-info {
text-align: center;
font-size: 24rpx;
color: #666;
margin-top: 20rpx;
padding: 10rpx;
background-color: #f8f8f8;
border-radius: 8rpx;
}
/* 适配不同屏幕 */
@media (min-width: 768px) {
.container { .container {
max-width: 500px; min-height: 100vh;
margin: 0 auto; background-color: #f5f5f5;
display: flex;
flex-direction: column;
padding: 0rpx 40rpx;
}
/* 搜索区域 */
.search-container {
padding: 20rpx 30rpx;
background-color: #ffffff;
display: flex;
align-items: center;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
z-index: 10;
position: sticky;
top: 0;
}
.search-input-wrapper {
flex: 1;
background-color: #f8f8f8;
border-radius: 10rpx;
padding: 0 20rpx;
display: flex;
align-items: center;
height: 80rpx;
margin-right: 20rpx;
}
.search-icon {
margin-right: 15rpx;
}
.search-input {
flex: 1;
height: 100%;
font-size: 28rpx;
color: #333;
}
.placeholder {
color: #999;
font-size: 28rpx;
}
.clear-icon {
padding: 10rpx;
display: flex;
align-items: center;
justify-content: center;
}
.search-btn {
background-color: #007AFF;
color: #fff;
font-size: 28rpx;
height: 80rpx;
line-height: 80rpx;
border-radius: 10rpx;
padding: 0 30rpx;
margin: 0;
white-space: nowrap;
}
/* 小区列表 */
.community-list {
flex: 1;
/* padding: 0 30rpx; */
margin-top: 20rpx;
margin-bottom: 180rpx;
}
.community-item {
background-color: #fff;
border-radius: 12rpx;
padding: 30rpx;
margin-bottom: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
transition: all 0.2s;
}
.community-item.active {
background-color: #F5FAFF;
border: 1px solid #2F77FD;
transform: translateY(2rpx);
}
.community-item-left {
display: flex;
align-items: center;
flex: 1;
}
.house-icon {
margin-right: 20rpx;
}
.community-info {
display: flex;
flex-direction: column;
flex: 1;
}
.community-name {
font-size: 32rpx;
color: #333;
font-weight: 500;
margin-bottom: 8rpx;
}
.community-address {
font-size: 24rpx;
color: #999;
margin-bottom: 5rpx;
}
.community-id {
font-size: 22rpx;
color: #ccc;
}
.selected-icon {
margin-left: 20rpx;
}
/* 加载更多容器 */
.load-more-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 40rpx 0;
color: #999;
}
.load-more-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 20rpx 40rpx;
background-color: #f8f8f8;
border-radius: 50rpx;
color: #007AFF;
font-size: 28rpx;
margin-bottom: 20rpx;
}
.load-more-btn text {
margin-right: 10rpx;
}
.loading-container {
display: flex;
align-items: center;
justify-content: center;
padding: 20rpx 40rpx;
background-color: #f8f8f8;
border-radius: 50rpx;
color: #007AFF;
font-size: 28rpx;
margin-bottom: 20rpx;
}
.loading-icon {
margin-right: 10rpx;
animation: rotate 1s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.page-info {
font-size: 24rpx;
color: #999;
}
/* 没有更多数据 */
.no-more-data {
text-align: center;
padding: 40rpx 0;
color: #999;
font-size: 28rpx;
}
/* 空状态 */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100rpx 0;
}
.empty-text {
font-size: 32rpx;
color: #999;
margin-top: 20rpx;
margin-bottom: 10rpx;
}
.empty-tip {
font-size: 24rpx;
color: #ccc;
}
/* 确认区域 */
.confirm-area {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20rpx 30rpx 40rpx;
background-color: #fff;
box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.05);
}
.confirm-btn {
background-color: #4D5DFA;
color: #fff;
height: 80rpx;
line-height: 80rpx;
border-radius: 8rpx;
font-size: 28rpx;
width: 100%;
margin: 0;
}
.disabled-btn {
background-color: #ccc;
color: #fff;
}
.selected-info {
text-align: center;
font-size: 24rpx;
color: #666;
margin-top: 20rpx;
padding: 10rpx;
background-color: #f8f8f8;
border-radius: 8rpx;
}
/* 适配不同屏幕 */
@media (min-width: 768px) {
.container {
max-width: 500px;
margin: 0 auto;
}
} }
}
</style> </style>

View File

@@ -1,245 +1,376 @@
<template> <template>
<view class="form-container"> <view class="report-record-page">
<!-- 维修项目展示 --> <view class="status-bar"></view>
<view class="form-item"> <!-- 顶部导航栏 -->
<text class="label">维修项目</text> <uni-nav-bar
<view class="value" @click="goBackSelect"> left-icon="back"
<view> title="上报记录"
<text v-if="!repairProject">请选择项目</text> backgroundColor="transparent"
{{ repairProject }} :border= "false"
</view> @clickLeft="navBack"/>
<uni-icons type="arrowright" size="16"></uni-icons>
<!-- 状态筛选标签 -->
<view class="status-tabs">
<view
v-for="item in statusTabs"
:key="item.value"
class="status-tab-item"
:class="{ active: activeStatus === item.value }"
@tap="switchStatus(item.value)"
>
{{ item.label }}
</view> </view>
</view> </view>
<!-- 标题输入 --> <!-- 类型筛选标签 -->
<view class="form-item"> <view class="type-tabs">
<text class="label">标题</text> <view
<!-- <input type="text" placeholder="请输入问题标题" v-model="form.title" /> --> v-for="item in typeTabs"
<uni-easyinput v-model="form.title" placeholder="请输入内容" :inputBorder="false"></uni-easyinput> :key="item.value"
</view> class="type-tab-item"
:class="{ active: activeType === item.value }"
<!-- 问题描述 --> @tap="switchType(item.value)"
<view class="form-item-wenti"> >
<text class="label">问题描述</text> {{ item.label }}
<!-- <textarea placeholder="请输入问题内容" v-model="form.desc" rows="5" ></textarea> -->
<uni-easyinput v-model="form.desc" placeholder="请描述你的问题" type="textarea"></uni-easyinput>
</view>
<!-- 手机号 -->
<view class="form-item">
<text class="label">手机号</text>
<uni-easyinput type="number" v-model="form.phone" placeholder="请输入手机号" :inputBorder="false"></uni-easyinput>
</view>
<!-- 图片上传 -->
<view class="form-item-wenti">
<text class="label">问题照片</text>
<view class="upload-wrap">
<!-- 已上传图片 -->
<view class="upload-item" v-for="(img, index) in form.images" :key="index">
<image :src="img" mode="aspectFill"></image>
<uni-icons type="close" size="16" @click="deleteImage(index)"></uni-icons>
</view>
<!-- 上传按钮 -->
<view class="upload-btn" @click="chooseImage">
<uni-icons type="plus" size="24"></uni-icons>
<text>上传照片</text>
</view>
</view> </view>
</view> </view>
<!-- 提交按钮 --> <!-- 上报记录列表 -->
<button class="submit-btn" @click="submitForm">提交</button> <scroll-view
class="record-list"
scroll-y
:style="{ height: `calc(100vh - ${navHeight + statusTabHeight + typeTabHeight}px)` }"
>
<!-- 空状态 -->
<view v-if="filteredRecords.length === 0" class="empty-state">
<uni-icons type="empty" size="60" color="#ccc"></uni-icons>
<text class="empty-text">暂无上报记录</text>
</view>
<!-- 记录卡片 -->
<view
v-for="record in filteredRecords"
:key="record.id"
class="record-card"
>
<!-- 标题 + 状态标签 -->
<view class="card-header">
<text class="card-title">{{ record.title }}</text>
<view class="status-tag" :class="record.status">
{{ getStatusText(record.status) }}
</view>
</view>
<!-- 类型标签 -->
<view class="tag-group">
<view class="tag-item">{{ record.reportType }}</view>
<view class="tag-item">{{ record.category }}</view>
</view>
<!-- 内容 -->
<view class="card-content">
{{ record.content }}
</view>
<!-- 底部信息 -->
<view class="card-footer">
<text class="create-time">{{ record.createTime }}</text>
<text v-if="record.repairman" class="repairman">维修师傅:{{ record.repairman }}</text>
</view>
</view>
</scroll-view>
</view> </view>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref, computed } from 'vue'
import{onLoad} from "@dcloudio/uni-app" import {onReady} from "@dcloudio/uni-app"
// import { onLoad, uniShowToast, uniNavigateBack, uniChooseImage, uniUploadFile } from '@dcloudio/uni-app'
// 接收上个页面传的维修项目 // 导航栏/标签高度(适配不同设备)
const repairProject = ref('') const navHeight = ref(44)
const statusTabHeight = ref(88)
const typeTabHeight = ref(88)
// 表单数据 // 筛选状态
const form = ref({ const activeStatus = ref('all') // 全部/待分配/待解决/已完成
title: '', const activeType = ref('all') // 全部/公共报修/个人报修
desc: '',
phone: '',
images: [] // 图片列表
})
// 页面加载时获取传参 // 状态筛选选项
onLoad((options) => { const statusTabs = ref([
if (options.category && options.project) { { label: '全部', value: 'all' },
repairProject.value = `${options.category}-${options.project}` { label: '待分配', value: 'pending' },
{ label: '待解决', value: 'processing' },
{ label: '已完成', value: 'completed' }
])
// 类型筛选选项
const typeTabs = ref([
{ label: '全部', value: 'all' },
{ label: '公共报修', value: 'public' },
{ label: '个人报修', value: 'private' }
])
// 模拟上报记录数据(实际项目替换为接口请求)
const reportRecords = ref([
{
id: 1,
title: '标题巴拉巴拉巴拉',
status: 'pending', // pending/processing/completed
reportType: '公共报修',
category: '路灯',
content: '1栋楼下道路路灯不亮,并且有的亮度不够,请物业公司及时更换,防止发生意外事故。',
createTime: '2026-08-01 10:05:46',
repairman: ''
},
{
id: 2,
title: '标题巴拉巴拉巴拉',
status: 'processing',
reportType: '公共报修',
category: '路灯',
content: '1栋楼下道路路灯不亮,并且有的亮度不够,请物业公司及时更换,防止发生意外事故。',
createTime: '2026-08-01 10:05:46',
repairman: '张三'
},
{
id: 3,
title: '标题巴拉巴拉巴拉',
status: 'completed',
reportType: '公共报修',
category: '路灯',
content: '1栋楼下道路路灯不亮,并且有的亮度不够,请物业公司及时更换,防止发生意外事故。',
createTime: '2026-08-01 10:05:46',
repairman: '张三'
} }
])
// 筛选后的记录
const filteredRecords = computed(() => {
return reportRecords.value.filter(record => {
// 状态筛选
const statusMatch = activeStatus.value === 'all' || record.status === activeStatus.value
// 类型筛选
const typeMatch = activeType.value === 'all' || record.reportType === typeTabs.value.find(item => item.value === activeType.value)?.label
return statusMatch && typeMatch
})
}) })
// 返回选择项目页 // 切换状态(全部/待分配/待解决/已完成)筛选
const goBackSelect = () => { const switchStatus = (value) => {
uni.navigateTo({ activeStatus.value = value
url:"/pageSubPack/report-record/repairSelect"
})
// uni.navigateBack({
// delta: 1
// })
} }
// 选择图片 // 切换类型(公共/个人)筛选
const chooseImage = () => { const switchType = (value) => {
uni.chooseImage({ activeType.value = value
count: 3, // 最多选3张 }
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'], // 返回上一页
success: (res) => { const navBack = () => {
// 临时文件路径 uni.switchTab({
const tempFilePaths = res.tempFilePaths url:"/pages/my/my"
form.value.images = [...form.value.images, ...tempFilePaths]
// 【可选】如果需要上传到服务器,取消下面注释
// tempFilePaths.forEach(path => {
// uni.uploadFile({
// url: '你的上传接口地址',
// filePath: path,
// name: 'file',
// success: (uploadRes) => {
// console.log('上传成功', uploadRes)
// }
// })
// })
}
}) })
} }
// 删除图片 // 获取状态文本
const deleteImage = (index) => { const getStatusText = (status) => {
form.value.images.splice(index, 1) const statusMap = {
pending: '待分配',
processing: '待解决',
completed: '已完成'
}
return statusMap[status] || ''
} }
// 表单提交 // 页面渲染完成后适配高度
const submitForm = () => { onReady(() => {
// 表单校验 // 可根据实际设备调整高度
if (!repairProject.value) { uni.getSystemInfo({
uni.showToast({ title: '请选择维修项目', icon: 'none' }) success: (res) => {
return if (res.platform === 'ios') {
} navHeight.value = 44
if (!form.value.title) { } else {
uni.showToast({ title: '请输入问题标题', icon: 'none' }) navHeight.value = 48
return }
} }
if (!form.value.desc) { })
uni.showToast({ title: '请输入问题描述', icon: 'none' }) })
return
}
if (!/^1[3-9]\d{9}$/.test(form.value.phone)) {
uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
return
}
// 提交数据(替换成你的接口)
uni.showLoading({ title: '提交中...' })
// 模拟接口请求
setTimeout(() => {
uni.hideLoading()
uni.showToast({ title: '提交成功', icon: 'success' })
// 提交成功后重置表单/返回上一页
form.value = { title: '', desc: '', phone: '', images: [] }
// 或返回上一页
uni.navigateBack({ delta: 3 })
}, 1000)
}
</script> </script>
<style scoped> <style scoped>
.form-container { .report-record-page {
padding: 30rpx 40rpx; width: 100%;
background: #fff; height: 100vh;
min-height: 100vh; background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%)
} }
.form-item-wenti { .status-bar{
margin-bottom: 20px; width: 100%;
border-bottom: 1px solid #eee; height: 46px;
padding-bottom: 10px;
} }
.form-item { /* 状态筛选标签 */
.status-tabs {
display: flex; display: flex;
margin-bottom: 30rpx; /* background-color: #fff; */
align-items: flex-start; padding: 0 40rpx;
border-bottom: 1px solid #eee; height: 88rpx;
} align-items: center;
.label {
width: 140rpx;
font-size: 28rpx;
color: #333;
line-height: 80rpx;
} }
.value { .status-tab-item {
flex: 1; /* flex: 1; */
font-size: 28rpx;
color: #666;
line-height: 80rpx;
text-align: right;
display: flex; display: flex;
justify-content: space-between; justify-content: flex-start;
margin-right: 60rpx;
text-align: left;
font-size: 32rpx;
color: #666;
height: 100%;
line-height: 88rpx;
position: relative;
} }
.input, .textarea {
font-size: 14px; .status-tab-item.active {
width: 100%; color: #4D5DFA;
padding: 8px 0; font-weight: 500;
}
.status-tab-item.active::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80rpx;
height: 8rpx;
background: linear-gradient(to bottom, #4D5DFA, #BAC0FA);
border-radius: 6rpx;
}
/* 类型筛选标签 */
.type-tabs {
display: flex;
/* background-color: #fff; */
padding: 20rpx 0rpx;
margin-top: 10rpx;
justify-content: flex-start;
gap: 20rpx;
margin: 0rpx 40rpx;
}
.type-tab-item {
padding: 12rpx 30rpx;
font-size: 28rpx;
color: #999;
border: 2rpx solid #999;
border-radius: 198rpx;
}
.type-tab-item.active {
color: #4D5DFA;
border: 2rpx solid #4D5DFA;
border-radius: 198rpx;
/* background-color: #007AFF; */
}
/* 记录列表 */
.record-list {
padding: 20rpx 40rpx;
box-sizing: border-box; box-sizing: border-box;
} }
.textarea {
resize: none; /* 空状态 */
} .empty-state {
.upload-wrap {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 8px;
}
.upload-item {
position: relative;
width: 80px;
height: 80px;
}
.upload-item image {
width: 100%;
height: 100%;
border-radius: 4px;
}
.upload-item uni-icons {
position: absolute;
top: -5px;
right: -5px;
background: #ff3b30;
color: #fff;
border-radius: 50%;
padding: 2px;
}
.upload-btn {
width: 80px;
height: 80px;
border: 1px dashed #ccc;
border-radius: 4px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
align-items: center; align-items: center;
justify-content: center;
padding: 100rpx 0;
color: #ccc;
}
.empty-text {
font-size: 32rpx;
color: #999; color: #999;
font-size: 12px; margin-top: 20rpx;
} }
.submit-btn {
width: 100%; /* 记录卡片 */
background: #4D5DFA; .record-card {
background-color: #fff;
border-radius: 16rpx;
padding: 30rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.card-header {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 20rpx;
}
.card-title {
font-size: 32rpx;
font-weight: 500;
color: #333;
margin-right: 20rpx;
}
/* 状态标签 */
.status-tag {
padding: 6rpx 16rpx;
font-size: 20rpx;
border-radius: 12rpx;
color: #fff; color: #fff;
border-radius: 6px; border-radius: 198rpx;
height: 44px;
line-height: 44px;
font-size: 16px;
} }
</style>
.status-tag.pending {
background-color: #E34D59; /* 待分配-红色 */
}
.status-tag.processing {
background-color: #09C2BD; /* 待解决-绿色 */
}
.status-tag.completed {
background-color: #4D5DFA; /* 已完成-蓝色 */
}
/* 类型标签组 */
.tag-group {
display: flex;
gap: 15rpx;
margin-bottom: 20rpx;
}
.tag-item {
padding: 6rpx 20rpx;
font-size: 24rpx;
color: #666;
border: 1rpx solid #999;
border-radius: 8rpx;
}
/* 内容 */
.card-content {
font-size: 28rpx;
color: #666;
line-height: 1.6;
margin-bottom: 20rpx;
}
/* 底部信息 */
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
color: #999;
}
.repairman {
color: #999;
}
</style>

View File

@@ -9,26 +9,26 @@
<!-- 旧密码输入框 --> <!-- 旧密码输入框 -->
<view class="input-item"> <view class="input-item">
<uni-easyinput <uni-easyinput
class="input-content" class="input-content"
type="password" type="password"
v-model="oldPassword" v-model="oldPassword"
placeholder="请输入旧密码" placeholder="请输入旧密码"
:inputBorder="false" :inputBorder="false"
:placeholderStyle="placeholderStyle" :placeholderStyle="placeholderStyle"
@input="checkForm" @input="checkForm"
> >
</uni-easyinput> </uni-easyinput>
</view> </view>
<!-- 新密码输入框 --> <!-- 新密码输入框 -->
<view class="input-item"> <view class="input-item">
<uni-easyinput <uni-easyinput
class="input-content" class="input-content"
type="password" type="password"
v-model="newPassword" v-model="newPassword"
placeholder="请输入新密码(6-16位,含字母+数字)" placeholder="请输入新密码(6-16位,含字母+数字)"
:inputBorder="false" :inputBorder="false"
:placeholderStyle="placeholderStyle" :placeholderStyle="placeholderStyle"
@input="checkForm" @input="checkForm"
> >
@@ -37,12 +37,12 @@
<!-- 确认密码输入框 --> <!-- 确认密码输入框 -->
<view class="input-item"> <view class="input-item">
<uni-easyinput <uni-easyinput
class="input-content" class="input-content"
type="password" type="password"
v-model="confirmPassword" v-model="confirmPassword"
placeholder="请再次输入新密码" placeholder="请再次输入新密码"
:inputBorder="false" :inputBorder="false"
:placeholderStyle="placeholderStyle" :placeholderStyle="placeholderStyle"
@input="checkForm" @input="checkForm"
> >
@@ -55,8 +55,8 @@
</view> </view>
<!-- 确定按钮 --> <!-- 确定按钮 -->
<button <button
class="confirm-btn" class="confirm-btn"
:disabled="!canConfirm" :disabled="!canConfirm"
@click="handleConfirm" @click="handleConfirm"
> >
@@ -88,15 +88,15 @@ const smsCode = ref('');
const canConfirm = computed(() => { const canConfirm = computed(() => {
// 密码格式规则:6-16位,必须包含字母+数字 // 密码格式规则:6-16位,必须包含字母+数字
const pwdReg = /^(?=.*[a-zA-Z])(?=.*\d).{6,16}$/; const pwdReg = /^(?=.*[a-zA-Z])(?=.*\d).{6,16}$/;
// 校验条件: // 校验条件:
// 1. 旧密码不为空 // 1. 旧密码不为空
// 2. 新密码符合格式 // 2. 新密码符合格式
// 3. 确认密码和新密码一致 // 3. 确认密码和新密码一致
// 4. 所有密码输入框不为空 // 4. 所有密码输入框不为空
return oldPassword.value.trim() return oldPassword.value.trim()
&& pwdReg.test(newPassword.value) && pwdReg.test(newPassword.value)
&& newPassword.value === confirmPassword.value && newPassword.value === confirmPassword.value
&& newPassword.value && confirmPassword.value; && newPassword.value && confirmPassword.value;
}); });
@@ -109,11 +109,11 @@ const goBack = () => {
// 页面显示时读取缓存参数 // 页面显示时读取缓存参数
onShow(() => { onShow(() => {
// 从缓存读取参数 // 从缓存读取参数
const params = uni.getStorageSync('tempChangePwdParams') || {}; const params = uni.getStorageSync('tempChangePwdParams') || {};
// 赋值 // 赋值
phone.value = params.phoneNumber || '' phone.value = params.phoneNumber || ''
smsCode.value = params.verifyCode || '' smsCode.value = params.verifyCode || ''
// 校验参数是否完整 // 校验参数是否完整
// if (!phone.value || !smsCode.value) { // if (!phone.value || !smsCode.value) {
// uni.showToast({ // uni.showToast({
@@ -124,7 +124,7 @@ onShow(() => {
// goBack() // goBack()
// }, 1500) // }, 1500)
// } // }
// 用完删除缓存(避免下次跳转读取旧值) // 用完删除缓存(避免下次跳转读取旧值)
uni.removeStorageSync('tempChangePwdParams'); uni.removeStorageSync('tempChangePwdParams');
}); });
@@ -266,7 +266,7 @@ const handleConfirm = () => {
background-color: #4D5DFA; background-color: #4D5DFA;
color: #fff; color: #fff;
border-radius: 44rpx; border-radius: 44rpx;
font-size: 32rpx; font-size: 28rpx;
margin-top: 20rpx; margin-top: 20rpx;
border: none; border: none;
} }
@@ -282,4 +282,4 @@ button:after {
border: none; border: none;
border-radius: 44rpx; border-radius: 44rpx;
} }
</style> </style>

View File

@@ -23,8 +23,8 @@
<uni-easyinput class="input-content verify-input" type="number" v-model="verifyCode" trim="all" <uni-easyinput class="input-content verify-input" type="number" v-model="verifyCode" trim="all"
placeholder="请输入验证码" :inputBorder="false" maxlength="6" :placeholderStyle="placeholderStyle"> placeholder="请输入验证码" :inputBorder="false" maxlength="6" :placeholderStyle="placeholderStyle">
</uni-easyinput> </uni-easyinput>
<button <button
class="get-verify-btn" class="get-verify-btn"
:disabled="!canGetVerify || countDown > 0" :disabled="!canGetVerify || countDown > 0"
@click="getVerifyCode" @click="getVerifyCode"
> >
@@ -32,18 +32,18 @@
</button> </button>
</view> </view>
<!-- 确定 --> <!-- 确定 -->
<button <button
class="forget-btn" class="forget-btn"
:disabled="!canRegister" :disabled="!canRegister"
@click="handleConfirm" @click="handleConfirm"
> >
确定 确定
</button> </button>
</view> </view>
</template> </template>
<script setup> <script setup>
import { ref, computed, onUnmounted } from 'vue'; import { ref, computed, onUnmounted } from 'vue';
import {getSendCode} from '../api/api.js' import {getSendCode} from '../api/api.js'
// ====响应式数据====== // ====响应式数据======
@@ -73,7 +73,7 @@ const getVerifyCode = () => {
uni.showToast({ uni.showToast({
title: '验证码已发送', title: '验证码已发送',
icon: 'success' icon: 'success'
}); });
// 开始60秒倒计时 // 开始60秒倒计时
countDown.value = 60; countDown.value = 60;
timer = setInterval(() => { timer = setInterval(() => {
@@ -82,25 +82,25 @@ const getVerifyCode = () => {
clearInterval(timer); clearInterval(timer);
timer = null; timer = null;
} }
}, 1000); }, 1000);
}else{ }else{
uni.showToast({ uni.showToast({
title: '验证码发送失败', title: '验证码发送失败',
icon: 'error' icon: 'error'
}); });
} }
}) })
}; };
// 是否确认 // 是否确认
const canRegister = computed(() => { const canRegister = computed(() => {
const phoneReg = /^1[3-9]\d{9}$/; // 手机号11位 const phoneReg = /^1[3-9]\d{9}$/; // 手机号11位
const verifyReg = /^\d{6}$/; // 验证码6位 const verifyReg = /^\d{6}$/; // 验证码6位
return phoneReg.test(phoneNumber.value) return phoneReg.test(phoneNumber.value)
&& verifyReg.test(verifyCode.value) && verifyReg.test(verifyCode.value)
}); });
// 确认 // 确认
const handleConfirm = () =>{ const handleConfirm = () =>{
@@ -118,7 +118,7 @@ const handleConfirm = () =>{
const goBack = () => { const goBack = () => {
uni.navigateBack(); uni.navigateBack();
}; };
</script> </script>
<style scoped> <style scoped>
.forget-page{ .forget-page{
@@ -126,7 +126,7 @@ const goBack = () => {
min-height: 100vh; min-height: 100vh;
background-color: #f9f9f9; background-color: #f9f9f9;
/* background: repeating-linear-gradient(180deg, #E2F0FF, #F6FAFF ); */ /* background: repeating-linear-gradient(180deg, #E2F0FF, #F6FAFF ); */
} }
.status_bar{ .status_bar{
width: 100%; width: 100%;
height: 46px; height: 46px;
@@ -211,7 +211,7 @@ const goBack = () => {
background-color: #4D5DFA; background-color: #4D5DFA;
color: #fff; color: #fff;
border-radius: 8rpx; border-radius: 8rpx;
font-size: 32rpx; font-size: 28rpx;
margin-bottom: 40rpx; margin-bottom: 40rpx;
} }
.forget-btn:disabled{ .forget-btn:disabled{
@@ -223,5 +223,5 @@ button:after{
border-radius: 8px; border-radius: 8px;
} }
</style> </style>

View File

@@ -37,6 +37,12 @@
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}, },
{
"path": "privacy",
"style": {
"navigationBarTitleText": "用户隐私协议"
}
},
{ {
"path": "register-new-user", "path": "register-new-user",
"style": { "style": {
@@ -117,6 +123,22 @@
} }
}] }]
}, },
{
"root": "pageSubPack/fault-reporting",
"pages": [{
"path": "fault-reporting",
"style": {
"navigationBarTitleText": "填写维修信息"
}
},
{
"path": "repairSelect",
"style": {
"navigationBarTitleText": "选择维修项目"
}
}
]
},
{ {
"root": "pageSubPack/report-record", "root": "pageSubPack/report-record",
"pages": [{ "pages": [{
@@ -125,7 +147,8 @@
"navigationBarTitleText": "上报记录", "navigationBarTitleText": "上报记录",
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}] }
]
}, },
{ {
"root": "pageSubPack/setting", "root": "pageSubPack/setting",

View File

@@ -77,7 +77,7 @@
<view class="function-container"> <view class="function-container">
<!-- 第一行功能:故障上报、一键开门、工单大厅、我的工单 --> <!-- 第一行功能:故障上报、一键开门、工单大厅、我的工单 -->
<view class="function-row"> <view class="function-row">
<view class="function-item"> <view class="function-item" @click="goToReport">
<image class="item-icon" src="/static/imgs/fault-report.png" mode="aspectFit"></image> <image class="item-icon" src="/static/imgs/fault-report.png" mode="aspectFit"></image>
<text class="item-text">故障上报</text> <text class="item-text">故障上报</text>
</view> </view>
@@ -151,7 +151,7 @@ const goToInspectionRecord = () => {
// 故障上报 // 故障上报
const goToReport = () => { const goToReport = () => {
uni.navigateTo({ uni.navigateTo({
url: "/pageSubPack/report-record/report-record" url: "/pageSubPack/fault-reporting/fault-reporting"
}) })
} }
// 接收选择小区返回的参数 // 接收选择小区返回的参数