首页加下拉刷新,公告显示问题;报修优化
This commit is contained in:
@@ -2,7 +2,9 @@
|
|||||||
<view class="form-container">
|
<view class="form-container">
|
||||||
<!-- 维修项目展示 -->
|
<!-- 维修项目展示 -->
|
||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
<text class="label">维修项目</text>
|
<view class="label">
|
||||||
|
<text class="required">*</text>维修项目
|
||||||
|
</view>
|
||||||
<view class="value" @click="goBackSelect">
|
<view class="value" @click="goBackSelect">
|
||||||
<view>
|
<view>
|
||||||
<text v-if="!repairProject">请选择项目</text>
|
<text v-if="!repairProject">请选择项目</text>
|
||||||
@@ -14,34 +16,43 @@
|
|||||||
|
|
||||||
<!-- 标题输入 -->
|
<!-- 标题输入 -->
|
||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
<text class="label">标题</text>
|
<text class="label">标题</text>
|
||||||
<!-- <input type="text" placeholder="请输入问题标题" v-model="form.title" /> -->
|
|
||||||
<uni-easyinput
|
<uni-easyinput
|
||||||
v-model="form.title"
|
v-model="form.title"
|
||||||
placeholder="请输入内容"
|
placeholder="请输入标题(最多30字符)"
|
||||||
:inputBorder="false"
|
:inputBorder="false"
|
||||||
|
maxlength="30"
|
||||||
></uni-easyinput>
|
></uni-easyinput>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 问题描述 -->
|
<!-- 问题描述 -->
|
||||||
<view class="form-item-wenti">
|
<view class="form-item-wenti">
|
||||||
<text class="label">问题描述</text>
|
<!-- <text class="label">问题描述</text> -->
|
||||||
<!-- <textarea placeholder="请输入问题内容" v-model="form.desc" rows="5" ></textarea> -->
|
<view class="label">
|
||||||
<uni-easyinput
|
<text class="required">*</text>问题描述
|
||||||
|
</view>
|
||||||
|
<view class="textarea-wrap">
|
||||||
|
<textarea v-model="form.desc" placeholder="请描述你的问题(最多200字)" maxlength="200" class="desc-textarea" />
|
||||||
|
<text class="char-count">{{ form.desc.length }}/200</text>
|
||||||
|
</view>
|
||||||
|
<!-- <uni-easyinput
|
||||||
v-model="form.desc"
|
v-model="form.desc"
|
||||||
placeholder="请描述你的问题"
|
placeholder="请描述你的问题"
|
||||||
type="textarea"
|
type="textarea"
|
||||||
></uni-easyinput>
|
></uni-easyinput> -->
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 手机号 -->
|
<!-- 手机号 -->
|
||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
<text class="label">手机号</text>
|
<view class="label">
|
||||||
|
<text class="required">*</text>手机号
|
||||||
|
</view>
|
||||||
<uni-easyinput
|
<uni-easyinput
|
||||||
type="number"
|
type="number"
|
||||||
v-model="form.phone"
|
v-model="form.phone"
|
||||||
placeholder="请输入手机号"
|
placeholder="请输入手机号"
|
||||||
:inputBorder="false"
|
:inputBorder="false"
|
||||||
|
maxlength="11"
|
||||||
></uni-easyinput>
|
></uni-easyinput>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -60,7 +71,7 @@
|
|||||||
<!-- <uni-icons type="close" size="16" @click="deleteImage(index)"></uni-icons> -->
|
<!-- <uni-icons type="close" size="16" @click="deleteImage(index)"></uni-icons> -->
|
||||||
</view>
|
</view>
|
||||||
<!-- 上传按钮 -->
|
<!-- 上传按钮 -->
|
||||||
<view class="upload-btn" @click="chooseImage" v-if="form.images.length < 3">
|
<view class="upload-btn" @click="chooseImage" v-if="form.images.length < 9">
|
||||||
<uni-icons type="plusempty" size="24"></uni-icons>
|
<uni-icons type="plusempty" size="24"></uni-icons>
|
||||||
<!-- <text>上传照片</text> -->
|
<!-- <text>上传照片</text> -->
|
||||||
</view>
|
</view>
|
||||||
@@ -69,6 +80,9 @@
|
|||||||
|
|
||||||
<!-- 提交按钮 -->
|
<!-- 提交按钮 -->
|
||||||
<button class="submit-btn" @click="submitForm">提交</button>
|
<button class="submit-btn" @click="submitForm">提交</button>
|
||||||
|
|
||||||
|
<!-- 提交时遮罩,禁止页面点击 -->
|
||||||
|
<view class="submit-mask" v-if="submitting"></view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -90,6 +104,9 @@ const form = ref({
|
|||||||
images: [] // 图片列表
|
images: [] // 图片列表
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 防止重复点击
|
||||||
|
const submitting = ref(false)
|
||||||
|
|
||||||
|
|
||||||
// ==========方法========
|
// ==========方法========
|
||||||
// 页面加载
|
// 页面加载
|
||||||
@@ -122,10 +139,10 @@ const goBackSelect = () => {
|
|||||||
// 选择图片
|
// 选择图片
|
||||||
const chooseImage = () => {
|
const chooseImage = () => {
|
||||||
// 计算还能选几张
|
// 计算还能选几张
|
||||||
const remainCount = 3 - form.value.images.length
|
const remainCount = 9 - form.value.images.length
|
||||||
if (remainCount <= 0) {
|
if (remainCount <= 0) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '最多只能上传3张图片',
|
title: '最多只能上传9张图片',
|
||||||
icon: 'none'
|
icon: 'none'
|
||||||
})
|
})
|
||||||
return
|
return
|
||||||
@@ -171,15 +188,13 @@ const deleteImage = index => {
|
|||||||
|
|
||||||
// 表单提交
|
// 表单提交
|
||||||
const submitForm = async () => {
|
const submitForm = async () => {
|
||||||
|
// 防止重复提交
|
||||||
|
if (submitting.value) return
|
||||||
// 表单校验
|
// 表单校验
|
||||||
if (!repairProject.value) {
|
if (!repairProject.value) {
|
||||||
uni.showToast({ title: '请选择维修项目', icon: 'none' })
|
uni.showToast({ title: '请选择维修项目', icon: 'none' })
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (!form.value.title) {
|
|
||||||
uni.showToast({ title: '请输入问题标题', icon: 'none' })
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (!form.value.desc) {
|
if (!form.value.desc) {
|
||||||
uni.showToast({ title: '请输入问题描述', icon: 'none' })
|
uni.showToast({ title: '请输入问题描述', icon: 'none' })
|
||||||
return
|
return
|
||||||
@@ -189,6 +204,7 @@ const submitForm = async () => {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
// 提交数据
|
// 提交数据
|
||||||
|
submitting.value = true
|
||||||
uni.showLoading({ title: '提交中...' ,mask:true})
|
uni.showLoading({ title: '提交中...' ,mask:true})
|
||||||
try {
|
try {
|
||||||
// 先上传图片
|
// 先上传图片
|
||||||
@@ -219,6 +235,7 @@ const submitForm = async () => {
|
|||||||
} catch (e) {
|
} catch (e) {
|
||||||
uni.showToast({ title: e.msg || '网络异常', icon: 'none' })
|
uni.showToast({ title: e.msg || '网络异常', icon: 'none' })
|
||||||
} finally {
|
} finally {
|
||||||
|
submitting.value = false
|
||||||
uni.hideLoading()
|
uni.hideLoading()
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -244,11 +261,15 @@ const submitForm = async () => {
|
|||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #eee;
|
||||||
}
|
}
|
||||||
.label {
|
.label {
|
||||||
width: 140rpx;
|
width: 180rpx;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #333;
|
color: #333;
|
||||||
line-height: 80rpx;
|
line-height: 80rpx;
|
||||||
}
|
}
|
||||||
|
.required {
|
||||||
|
color: red;
|
||||||
|
margin-right: 4rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.value {
|
.value {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -259,6 +280,27 @@ const submitForm = async () => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
.textarea-wrap {
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.desc-textarea {
|
||||||
|
width: 100%;
|
||||||
|
height: 160rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
padding: 10rpx 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
.char-count {
|
||||||
|
position: absolute;
|
||||||
|
right: 10rpx;
|
||||||
|
bottom: 10rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
.input,
|
.input,
|
||||||
.textarea {
|
.textarea {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@@ -318,4 +360,12 @@ const submitForm = async () => {
|
|||||||
line-height: 44px;
|
line-height: 44px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
.submit-mask {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="news-content">
|
<view class="news-content">
|
||||||
<text class="content-text">{{ item.notice || item.problem }}</text>
|
<text class="content-text">{{ item.problem || item.notice}}</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="detail-btn" @click="goToDetail(item)">
|
<view class="detail-btn" @click="goToDetail(item)">
|
||||||
|
|||||||
@@ -3,7 +3,9 @@
|
|||||||
"path": "pages/index/index",
|
"path": "pages/index/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "工作台",
|
"navigationBarTitleText": "工作台",
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom",
|
||||||
|
"enablePullDownRefresh": true,
|
||||||
|
"backgroundTextStyle": "dark"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -125,7 +125,7 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { onLoad, onUnload, onShow, onReady } from '@dcloudio/uni-app'
|
import { onLoad, onUnload, onShow, onReady, onPullDownRefresh } from '@dcloudio/uni-app'
|
||||||
import {
|
import {
|
||||||
getCurrentVillage,
|
getCurrentVillage,
|
||||||
getTodayInspection,
|
getTodayInspection,
|
||||||
@@ -308,7 +308,7 @@ const handleFunctionClick = item => {
|
|||||||
// 获取当前小区
|
// 获取当前小区
|
||||||
const currentVillageData = () => {
|
const currentVillageData = () => {
|
||||||
currentCommunity.value = '请先绑定房屋'
|
currentCommunity.value = '请先绑定房屋'
|
||||||
getCurrentVillage()
|
return getCurrentVillage()
|
||||||
.then(res => {
|
.then(res => {
|
||||||
const data = res.data
|
const data = res.data
|
||||||
if (data) {
|
if (data) {
|
||||||
@@ -323,7 +323,7 @@ const currentVillageData = () => {
|
|||||||
}
|
}
|
||||||
// 获取今日巡检数据
|
// 获取今日巡检数据
|
||||||
const getInspectionData = () => {
|
const getInspectionData = () => {
|
||||||
getTodayInspection()
|
return getTodayInspection()
|
||||||
.then(res => {
|
.then(res => {
|
||||||
if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
if (res.data) {
|
if (res.data) {
|
||||||
@@ -346,7 +346,7 @@ const getInspectionData = () => {
|
|||||||
// 获取消息通知
|
// 获取消息通知
|
||||||
const getNoticeData = () => {
|
const getNoticeData = () => {
|
||||||
getNewNoticeData().then(res => {
|
getNewNoticeData().then(res => {
|
||||||
const notice = res.code === 200 && res.data ? (res.data.notice || '') : '暂无公告'
|
const notice = res.code === 200 && res.data ? (res.data.problem || res.data.notice) : '暂无公告'
|
||||||
// 仅在内容真正变化时才更新
|
// 仅在内容真正变化时才更新
|
||||||
if (noticeText.value !== notice) {
|
if (noticeText.value !== notice) {
|
||||||
noticeText.value = notice
|
noticeText.value = notice
|
||||||
@@ -369,7 +369,7 @@ function getbannarData(forceRefresh = false) {
|
|||||||
}
|
}
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
}
|
}
|
||||||
getBannarList()
|
return getBannarList()
|
||||||
.then(res => {
|
.then(res => {
|
||||||
if (res.code === 200 && res.data) {
|
if (res.code === 200 && res.data) {
|
||||||
const newData = res.data
|
const newData = res.data
|
||||||
@@ -397,7 +397,7 @@ function getbannarData(forceRefresh = false) {
|
|||||||
const MyOrderNum = ref(0)
|
const MyOrderNum = ref(0)
|
||||||
// 查询我的工单-待办数量
|
// 查询我的工单-待办数量
|
||||||
function getMyOrderNum() {
|
function getMyOrderNum() {
|
||||||
myOrderCount()
|
return myOrderCount()
|
||||||
.then(res => {
|
.then(res => {
|
||||||
if (res.code === 200 && res.data) {
|
if (res.code === 200 && res.data) {
|
||||||
MyOrderNum.value = res.data
|
MyOrderNum.value = res.data
|
||||||
@@ -432,6 +432,7 @@ onShow(() => {
|
|||||||
// 从其他页面返回 / 从后台恢复:只刷新可能变化的数据
|
// 从其他页面返回 / 从后台恢复:只刷新可能变化的数据
|
||||||
getbannarData()
|
getbannarData()
|
||||||
getMyOrderNum()
|
getMyOrderNum()
|
||||||
|
getNoticeData()
|
||||||
// 换账号登录后 currentVillage 缓存已被清除,需要重新获取小区
|
// 换账号登录后 currentVillage 缓存已被清除,需要重新获取小区
|
||||||
if (!uni.getStorageSync('currentVillage')) {
|
if (!uni.getStorageSync('currentVillage')) {
|
||||||
currentVillageData()
|
currentVillageData()
|
||||||
@@ -470,6 +471,24 @@ onReady(() => {
|
|||||||
onUnload(() => {
|
onUnload(() => {
|
||||||
uni.$off('confirm', slelctHomeData)
|
uni.$off('confirm', slelctHomeData)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 下拉刷新
|
||||||
|
onPullDownRefresh(async () => {
|
||||||
|
if (!isLoggedIn.value) {
|
||||||
|
uni.stopPullDownRefresh()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
await Promise.allSettled([
|
||||||
|
currentVillageData(),
|
||||||
|
getInspectionData(),
|
||||||
|
getbannarData(true),
|
||||||
|
getMyOrderNum()
|
||||||
|
])
|
||||||
|
} finally {
|
||||||
|
uni.stopPullDownRefresh()
|
||||||
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
Reference in New Issue
Block a user