<script setup> import { ref } from "vue" import { onLoad, onUnload, onPullDownRefresh, onReachBottom, onPageScroll } from "@dcloudio/uni-app" import { goToPage } from "@/utils/common.js" import { getQuestionTraceList, openQuestionTrace, closeQuestionTrace, } from "@/api/work/questionInputAndTrace.js" let scrollTop = ref(0) let loading = ref(true) // 参数 let searchInfo = ref({ pageNo: 1, pageSize: 10, status: 0 }) // 获取列表 function getList() { if (searchInfo.value.pageNo == 1) { loading.value = true } getQuestionTraceList(searchInfo.value).then(res => { loading.value = false questionProjectList.value = questionProjectList.value.concat(res.data.list); listTotal.value = res.data.total; if (res.data.total == searchInfo.value.pageNo * searchInfo.value.pageSize - (10 - res.data.list.length)) moreListFlag = false; }).catch(() => { loading.value = false }) } let listTotal = ref(0) let questionProjectList = ref([]) // 触底加载flag let moreListFlag = true // 去项目查看 function goToDetail(id, subName) { goToPage(`/pages/projectInfo/detail/index?id=${id}&subName=${subName}`) } // 去问题跟踪 function goToInput(id) { goToPage(`/pages/questionTrace/input/index?id=${id}`) } // 去搜索页 function searchClick() { goToPage('/pages/questionTrace/search/index') } // 开关问题 function changeQuestionStatu(status, id) { let statusList = ["已关闭", "处理中"] if (!statusList.includes(status)) { return uni.showToast({ title: "当前问题状态异常。", icon: "error", duration: 2000 }) } if (status === "已关闭") { openQuestionTrace({ id }).then(res => { changeQuestionStatuLocal(res, id) }) } if (status === "处理中") { closeQuestionTrace({ id }).then(res => { changeQuestionStatuLocal(res, id) }) } } // 改变本地状态 function changeQuestionStatuLocal(res, id) { if (res.code !== 200) { return uni.showToast({ title: "问题状态切换失败。", icon: "error", duration: 2000 }) } let changeItem = questionProjectList.value.find(item => item.id === id); changeItem.stu = changeItem.stu === "处理中" ? "已关闭" : "处理中"; uni.showToast({ title: "问题状态切换成功。", icon: "success", duration: 2000 }) } onLoad(() => { uni.$on('questionTraceSearch', resolve => { searchInfo.value = Object.assign(searchInfo.value, resolve); searchInfo.value.pageNo = 1; questionProjectList.value = []; listTotal.value = 0; moreListFlag = true; getList(); }) getList(); }) onUnload(() => { uni.$off('questionTraceSearch'); }); onPageScroll((e) => { scrollTop.value = e.scrollTop }) onPullDownRefresh(() => { searchInfo.value.pageNo = 1; questionProjectList.value = []; moreListFlag = true; try { getList(); } finally { uni.stopPullDownRefresh() } }) onReachBottom(() => { if (!moreListFlag) { return uni.showToast({ title: "已经到底了。", icon: "none", duration: 2000 }) } searchInfo.value.pageNo++; getList(); }) </script> <template> <view class="container"> <page-title @searchClick='searchClick' showSearch>问题跟踪</page-title> <view class="cards-list"> <view class="card" v-for="(item,index) in questionProjectList" :key="index"> <view v-if="item.usersub == 1"> <view style="height:20rpx"></view> <view class="special-item"> <card-title :numerator="index+1" :denominator="listTotal" isSpecial></card-title> <view class="card-name"> <view class="card-name-title"> <text class="card-name-description">项目名称</text> </view> <text class="card-name-text">{{item.sub_name || "--"}}</text> </view> </view> </view> <view v-else> <card-title :numerator="index+1" :denominator="listTotal"></card-title> <view class="card-name"> <view class="card-name-title"> <text class="card-name-description">项目名称</text> </view> <text class="card-name-text">{{item.sub_name || "--"}}</text> </view> </view> <view class="card-item"> <view class="card-item-name">问题描述</view> <view class="card-item-content">{{item.title || "--"}}</view> </view> <view class="card-item"> <view class="card-btn" @click="goToDetail(item.sub_id,item.sub_name)">项目查看</view> <view class="card-btn empty-btn" @click="goToInput(item.id)">问题跟踪</view> </view> <view class="card-bottom-btn" :class="item.stu === '已关闭' ?'open' :''" @click="changeQuestionStatu(item.stu,item.id)"> {{item.stu === "已关闭"?"问题打开":"问题关闭"}} </view> </view> <empty-show v-if="questionProjectList.length===0"></empty-show> </view> <u-back-top :scroll-top="scrollTop"></u-back-top> <u-loading-page :loading="loading"></u-loading-page> </view> </template> <style lang="scss"> .card { position: relative; padding: 0 40rpx 110rpx; overflow: hidden; } .card-bottom-btn { position: absolute; bottom: 0; left: 0; width: 100%; height: 70rpx; text-align: center; line-height: 70rpx; font-size: 32rpx; color: #FF813E; background-color: #FFECE2; } .open { color: #00B893; background-color: #DFFFF9; } </style>