xlTask.vue 40 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543
  1. <template>
  2. <view class="container">
  3. <!-- 搜索+筛选栏 -->
  4. <view class="top-box">
  5. <view class="input-item">
  6. <image class="icon search-icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/search.png" mode="widthFix"></image>
  7. <input
  8. v-model="searchKeyword"
  9. :placeholder="searchPlaceholder"
  10. placeholder-class="placeholder"
  11. confirm-type="search"
  12. @confirm="onSearch"
  13. />
  14. </view>
  15. <view class="filter-item" @click="showFilter = true">
  16. <image class="filter-icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_select.png" mode="widthFix"></image>
  17. <text>筛选</text>
  18. </view>
  19. </view>
  20. <!-- 顶部选项卡:任务列表/审核列表 -->
  21. <view class="top-tabs">
  22. <view class="top-tab-item" :class="{ active: currentTopTab === 'task' }" @click="switchTopTab('task')">
  23. 任务列表
  24. </view>
  25. <!-- <view class="top-tab-item" :class="{ active: currentTopTab === 'audit' }" @click="switchTopTab('audit')">
  26. 审核列表
  27. </view> -->
  28. </view>
  29. <!-- 动态子标签 -->
  30. <view class="sub-tabs">
  31. <view class="sub-tab-item" :class="{ active: currentSubTab === item.value }"
  32. @click="selectSubTab(item.value)" v-for="(item, index) in currentSubTabsList" :key="index">
  33. {{ item.label }}
  34. </view>
  35. </view>
  36. <!-- 列表内容 -->
  37. <scroll-view class="content" scroll-y @scrolltolower="loadMore" @refresherrefresh="refresh" refresher-enabled="true" refresher-threshold="80" refresher-default-style="black">
  38. <!-- 任务列表 -->
  39. <view v-if="currentTopTab === 'task'">
  40. <view class="task-card" v-for="(item, index) in currentList" :key="index" @click="goDetails(item)">
  41. <!-- 任务标题+状态 -->
  42. <view class="card-top">
  43. <text class="card-task-title">{{ item.taskName }}</text>
  44. <view class="status-tag" :class="item.statusClass">{{ item.statusText }}</view>
  45. </view>
  46. <view class="card-content">
  47. <!-- 讲者信息 -->
  48. <view class="speaker-info">
  49. <text class="speaker-name">{{ item.doctorName||'未命名' }}</text>
  50. <view class="level-tag" v-if="item.level">{{ item.level }}</view>
  51. </view>
  52. <!-- 医院+科室 -->
  53. <view class="org-info">
  54. <image class="org-icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_hospital.png" mode="widthFix"></image>
  55. <text>{{ item.deptName ||'-' }}</text>
  56. <view class="line"></view>
  57. <text>{{ item.deptName||'-' }}</text>
  58. </view>
  59. <!-- 标签组 -->
  60. <view class="card-tags">
  61. <view class="tag-left-group">
  62. <view class="tag-item video-tag" v-if="item.taskTypeName">
  63. <image class="video-tag-icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_longvideo.png" mode="widthFix">
  64. </image>
  65. <text>{{ item.taskTypeName ||'-'}}</text>
  66. </view>
  67. <view class="tag-item category-tag" v-if="item.taskTypeName">
  68. {{ item.taskTypeName }}
  69. </view>
  70. </view>
  71. <view class="tag-right-group">
  72. <view class="tag-item points-tag">{{ item.taskIntegral||'0' }}积分</view>
  73. <view class="tag-item count-tag">{{ item.taskCount ||'0' }}个</view>
  74. <view class="tag-item count-tag">院内</view>
  75. </view>
  76. </view>
  77. <!-- 时间信息 -->
  78. <view class="time-info">
  79. <view class="time-item">
  80. <text>申请时间:</text>
  81. <text>{{ item.createTime ||'-'}}</text>
  82. </view>
  83. <view class="time-item">
  84. <text>完成时间:</text>
  85. <text>{{ item.finishAuditTime || '-' }}</text>
  86. </view>
  87. <view class="time-item">
  88. <text>完成审核:</text>
  89. <text>{{ item.auditStatus || '-' }}</text>
  90. </view>
  91. </view>
  92. <!-- 操作按钮 -->
  93. <view class="operate-btn-group">
  94. <view class="share-btn" @click="handleShare(item)">
  95. <image class="share-icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_share.png" mode="widthFix"></image>
  96. <text>分享</text>
  97. </view>
  98. <view class="btn-group">
  99. <view class="btn" v-if="item.showDelete" @click.stop="handleTaskDelete(item, index)">删除</view>
  100. <!-- <view class="btn" @click.stop="copyTask(item.id)" >复制创建</view> -->
  101. </view>
  102. </view>
  103. <!-- 状态印章 -->
  104. <image class="status-seal" :src="item.sealImg" mode="widthFix">
  105. </image>
  106. </view>
  107. </view>
  108. </view>
  109. <!-- 审核列表 -->
  110. <!-- <view v-else>
  111. <view class="task-card" v-for="(item, index) in currentList" :key="index" @click="goDetails(item)">
  112. <view class="card-top">
  113. <text class="card-task-title">{{ item.auditName || '未设置' }}</text>
  114. <view class="status-tag" :class="item.statusClass">{{ item.statusText }}</view>
  115. </view>
  116. <view class="card-content">
  117. <view class="speaker-info">
  118. <text class="speaker-name">{{ item.businessData.taskInfo.doctorVO.doctorName||'未命名' }}</text>
  119. <view class="level-tag" v-if="item.businessData.taskInfo.doctorVO.jobTitle">{{ item.businessData.taskInfo.doctorVO.jobTitle }}</view>
  120. </view>
  121. <view class="org-info">
  122. <image class="org-icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_hospital.png" mode="widthFix"></image>
  123. <text>{{ item.businessData.taskInfo.doctorVO.institution ||'-' }}</text>
  124. <view class="line"></view>
  125. <text>{{ item.businessData.taskInfo.doctorVO.department||'-' }}</text>
  126. </view>
  127. <view class="card-tags">
  128. <view class="tag-left-group">
  129. <view class="tag-item video-tag" v-if="item.businessData.taskInfo.taskTypeName">
  130. <image class="video-tag-icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_longvideo.png" mode="widthFix">
  131. </image>
  132. <text>{{ item.businessData.taskInfo.taskTypeName ||'-'}}</text>
  133. </view>
  134. <view class="tag-item category-tag" v-if="item.businessData.taskInfo.taskTypeName">
  135. {{ item.businessData.taskInfo.taskTypeName }}
  136. </view>
  137. </view>
  138. <view class="tag-right-group">
  139. <view class="tag-item points-tag">{{ item.businessData.taskInfo.taskIntegral||'0' }}积分</view>
  140. <view class="tag-item count-tag">{{ item.businessData.taskInfo.taskCount ||'0' }}个</view>
  141. <view class="tag-item count-tag">院内</view>
  142. </view>
  143. </view>
  144. <view class="time-info">
  145. <view class="time-item">
  146. <text>申请时间:</text>
  147. <text>{{ item.businessData.taskInfo.createTime ||'-'}}</text>
  148. </view>
  149. </view>
  150. <view class="operate-btn-group">
  151. <view class="share-btn" @click="handleShare(item)">
  152. <image class="share-icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_user.png" mode="widthFix"></image>
  153. <text>{{ item.initiatorName || '未命名' }}</text>
  154. </view>
  155. <view class="btn-group">
  156. <view class="btn" @click.stop="handleTaskDelete(item, index)">删除</view>
  157. </view>
  158. </view>
  159. <image class="status-seal" :src="item.sealImg" mode="widthFix">
  160. </image>
  161. </view>
  162. </view>
  163. </view> -->
  164. </scroll-view>
  165. <view class="side">
  166. <view class="side-item" >
  167. <image class="icon" @click="goCreate" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/btn_add.png"></image>
  168. </view>
  169. <view class="side-item" >
  170. <image class="icon" @click="goData" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/btn_data.png"></image>
  171. </view>
  172. </view>
  173. <!-- 筛选弹窗 -->
  174. <view class="filter-popup" v-if="showFilter" @click="closeFilter">
  175. <view class="filter-content" @click.stop>
  176. <view class="filter-header">
  177. <view class="filter-title">筛选</view>
  178. <image class="filter-close-btn" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_close.png" @click="closeFilter"
  179. mode="widthFix"></image>
  180. </view>
  181. <view class="filter-form">
  182. <!-- 任务申请时间 -->
  183. <view class="filter-section">
  184. <view class="section-label">任务申请时间</view>
  185. <view class="time-range">
  186. <view class="time-input" @click="openDatePicker('applyStartTime')">{{ filters.applyStartTime || '开始时间' }}</view>
  187. <view class="time-separator">-</view>
  188. <view class="time-input" @click="openDatePicker('applyEndTime')">{{ filters.applyEndTime || '结束时间' }}</view>
  189. </view>
  190. </view>
  191. <!-- 任务完成时间 -->
  192. <view class="filter-section" v-if="currentTopTab === 'audit'">
  193. <view class="section-label">任务完成时间</view>
  194. <view class="time-range">
  195. <view class="time-input" @click="openDatePicker('finishTimeStart')">{{ filters.finishTimeStart || '开始时间' }}</view>
  196. <view class="time-separator">-</view>
  197. <view class="time-input" @click="openDatePicker('finishTimeEnd')">{{ filters.finishTimeEnd || '结束时间' }}</view>
  198. </view>
  199. </view>
  200. <!-- 完成审核时间 -->
  201. <view class="filter-section" v-if="currentTopTab === 'audit'">
  202. <view class="section-label">完成审核时间</view>
  203. <view class="time-range">
  204. <view class="time-input" @click="openDatePicker('auditTimeStart')">{{ filters.auditTimeStart || '开始时间' }}</view>
  205. <view class="time-separator">-</view>
  206. <view class="time-input" @click="openDatePicker('auditTimeEnd')">{{ filters.auditTimeEnd || '结束时间' }}</view>
  207. </view>
  208. </view>
  209. <!-- 任务归属 -->
  210. <view class="filter-section">
  211. <view class="section-label">任务归属</view>
  212. <view class="btn-group">
  213. <view class="filter-btn" :class="{ active: filters.taskBelong === '' }"
  214. @click="filters.taskBelong = ''">我的任务</view>
  215. </view>
  216. </view>
  217. <!-- 完结状态 -->
  218. <view class="filter-section" v-if="currentTopTab === 'audit'">
  219. <view class="section-label">完结状态</view>
  220. <view class="btn-group">
  221. <view class="filter-btn" :class="{ active: filters.finishStatus === 'unfinished' }"
  222. @click="filters.finishStatus = 'unfinished'">未完结</view>
  223. <view class="filter-btn" :class="{ active: filters.finishStatus === 'finished' }"
  224. @click="filters.finishStatus = 'finished'">已完结</view>
  225. </view>
  226. </view>
  227. <!-- 归属类型 -->
  228. <view class="filter-section">
  229. <view class="section-label">归属类型</view>
  230. <view class="btn-group">
  231. <view v-for="item in taskBelong" :key="item.dictValue"
  232. class="filter-btn" :class="{ active: filters.belongType === item.dictValue }"
  233. @click="filters.belongType = item.dictValue">{{ item.dictLabel }}</view>
  234. </view>
  235. </view>
  236. </view>
  237. <view class="filter-actions">
  238. <view class="reset-btn" @click="resetFilters">重置</view>
  239. <view class="confirm-btn" @click="confirmFilters">确定</view>
  240. </view>
  241. </view>
  242. </view>
  243. <!-- 日期选择器 -->
  244. <u-datetime-picker
  245. :show="showDatePicker"
  246. :value="datePickerValue"
  247. mode="date"
  248. @confirm="datePickerConfirm"
  249. @cancel="datePickerCancel"
  250. ></u-datetime-picker>
  251. </view>
  252. </template>
  253. <script>
  254. import { dicts } from '@/api/common.js';
  255. import utils from '@/utils/common.js'
  256. // auditList
  257. import { pendingtaskAudtList } from '@/api/task.js';
  258. import { list, deleted, company ,auditList,copy} from '@/api/task.js';
  259. import { getPendingAuditList } from '@/api/audit.js';
  260. export default {
  261. data() {
  262. return {
  263. searchKeyword: '',
  264. showFilter: false,
  265. showDatePicker: false,
  266. currentDateField: '',
  267. datePickerValue: new Date().getTime(),
  268. processTemplate: null,
  269. companySettingsLoaded: false,
  270. isLoading: false,
  271. filters: {
  272. applyStartTime: '',
  273. applyEndTime: '',
  274. finishTimeStart: '',
  275. finishTimeEnd: '',
  276. auditTimeStart: '',
  277. auditTimeEnd: '',
  278. taskBelong: '',
  279. finishStatus: '',
  280. belongType: ''
  281. },
  282. currentTopTab: 'task',
  283. currentSubTab: '',
  284. taskSubTabs: [
  285. { label: '全部任务', value: '' }
  286. ],
  287. auditSubTabs: [{
  288. label: '全部',
  289. value: ''
  290. }
  291. ],
  292. taskList: [],
  293. auditList: [],
  294. userInfo: {
  295. companyId: ''
  296. },taskStatus:{
  297. },
  298. taskBelong: [],
  299. taskType: [],
  300. taskAuditStatus: [],
  301. auditStatus: [],
  302. // 分页参数
  303. page: 1,
  304. pageSize: 20,
  305. hasMore: true,
  306. auditPage: 1,
  307. auditPageSize: 20,
  308. auditHasMore: true,
  309. // 加载状态
  310. isLoadingMore: false
  311. }
  312. },
  313. onLoad: async function(options) {
  314. // 先获取用户信息
  315. this.userInfo =uni.getStorageSync('userInfo') || '{}';
  316. // this.userInfo = JSON.parse(uni.getStorageSync('userInfo') || '{}');
  317. try {
  318. // 并行获取所有字典数据,提高性能
  319. const [taskBelongRes, taskTypeRes, processTemplateRes, taskAuditStatusRes] = await Promise.all([
  320. utils.getDicts("task_belong_type"),//任务归属
  321. utils.getDicts("task_type"),//任务类型
  322. utils.getDicts("FLOW_TEMPLATE"),//流程模板
  323. utils.getDicts("task_audit_status")//任务审核状态
  324. ]);
  325. this.taskBelong = taskBelongRes;
  326. this.taskType = taskTypeRes;
  327. this.processTemplate = processTemplateRes;
  328. this.taskAuditStatus = taskAuditStatusRes;
  329. console.log("task_audit_status", this.taskAuditStatus);
  330. // 构建审核子标签
  331. this.auditSubTabs = [{
  332. label: '全部',
  333. value: ''
  334. }];
  335. this.taskAuditStatus.forEach(item => {
  336. this.auditSubTabs.push({
  337. label: item.dictLabel,
  338. value: item.dictValue
  339. });
  340. });
  341. console.log('任务归属字典:', this.taskBelong);
  342. } catch (e) {
  343. console.log('获取字典数据失败:', e);
  344. }
  345. // 获取任务状态字典
  346. this.dicts();
  347. },
  348. computed: {
  349. currentSubTabsList() {
  350. return this.currentTopTab === 'task' ? this.taskSubTabs : this.auditSubTabs;
  351. },
  352. currentList() {
  353. return this.currentTopTab === 'task' ? this.taskList : this.auditList;
  354. },
  355. searchPlaceholder() {
  356. return this.currentTopTab === 'task' ? '请输入客户姓名/机构名称' : '请输入客户姓名/电话号码'
  357. }
  358. },
  359. mounted() {
  360. this.loadData();
  361. },
  362. methods: {
  363. // //查询公司下的待审核任务列表
  364. // pendingtaskAudtList() {
  365. // const params = {
  366. // companyId: this.userInfo.companyId || 0
  367. // }
  368. // pendingtaskAudtList(params).then(res => {
  369. // if (res.code === 200 && res.data) {
  370. // this.auditList = res.data || [];
  371. // } else {
  372. // uni.showToast({
  373. // title: res.msg || '查询失败',
  374. // icon: 'none'
  375. // });
  376. // }
  377. // });
  378. // },
  379. //复制任务
  380. copyTask(id){
  381. console.log("复制",id);
  382. copy(id).then(res => {
  383. if (res.code === 200) {
  384. uni.showToast({
  385. title: '复制成功',
  386. icon: 'success'
  387. });
  388. this.loadData();
  389. } else {
  390. uni.showToast({
  391. title: res.msg || '复制失败',
  392. icon: 'none'
  393. });}})},
  394. //审批列表
  395. getAuditList() {
  396. // 构建请求参数
  397. const params = {
  398. tempCode: ['ADUIT_CJRW', 'ADUIT_WCRWSH'],
  399. userId: this.userInfo.userId,
  400. taskStatus: this.currentSubTab || '',
  401. status:'',
  402. companyId:this.userInfo.companyId,
  403. templateCode: this.templateCode||'',
  404. pageNum: this.auditPage,
  405. pageSize: this.auditPageSize,
  406. keyWord: this.searchKeyword || '',
  407. // 任务申请时间
  408. applyStartTime: this.filters.applyStartTime || '',
  409. applyEndTime: this.filters.applyEndTime || '',
  410. // 任务完成时间
  411. taskFinishTimeStart: this.filters.finishTimeStart || '',
  412. taskFinishTimeEnd: this.filters.finishTimeEnd || '',
  413. // 任务完成审核时间
  414. finishAuditTimeStart: this.filters.auditTimeStart || '',
  415. finishAuditTimeEnd: this.filters.auditTimeEnd || '',
  416. // 完结状态
  417. finishStatus: this.filters.finishStatus === 'unfinished' ? 0 : this.filters.finishStatus === 'finished' ? 1 : ''
  418. };
  419. // 避免重复请求
  420. if (this.isLoading) return;
  421. this.isLoading = true;
  422. if (!this.isLoadingMore) {
  423. uni.showLoading({
  424. title: '加载中...'
  425. });
  426. }
  427. pendingtaskAudtList(params).then(res => {
  428. this.isLoading = false;
  429. this.isLoadingMore = false;
  430. uni.hideLoading();
  431. if (res.code === 200 ) {
  432. console.log("审批列表数据",res);
  433. // 处理审核列表数据
  434. const newAuditList = res.data.map(item => {
  435. // 从businessData.taskInfo中获取任务信息
  436. const taskInfo = item.businessData?.taskInfo || {};
  437. return {
  438. id: item.id,
  439. auditName: item.auditName,
  440. initiatorName: taskInfo.doctorName || item.initiatorName || '未知',
  441. createTime: item.createTime,
  442. statusText: this.getAuditStatusText(item.businessData.taskInfo.taskStatus),
  443. statusClass: this.getAuditStatusClass(item.status),
  444. doctorName: taskInfo.doctorName || item.initiatorName || '未知',
  445. initiatorId: item.initiatorId || '',
  446. sealImg: item.businessData.taskInfo.taskStatus === 1 ? 'https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/img_finished.png' : 'https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/img_unfinish.png',
  447. businessData: item.businessData || {},
  448. // 从taskInfo中获取其他需要的字段
  449. taskTitle: taskInfo.taskName || item.auditName,
  450. hospital: taskInfo.deptName || '-',
  451. department: taskInfo.deptName || '-',
  452. videoType: taskInfo.taskTypeName || '-',
  453. category: taskInfo.taskTypeName || '-',
  454. points: taskInfo.taskIntegral || 0,
  455. count: taskInfo.taskCount || 0,
  456. applyTime: item.createTime
  457. };
  458. });
  459. // 如果是加载更多,则追加数据
  460. if (this.isLoadingMore) {
  461. this.auditList = [...this.auditList, ...newAuditList];
  462. } else {
  463. // 否则替换数据
  464. this.auditList = newAuditList;
  465. }
  466. // 判断是否还有更多数据
  467. this.auditHasMore = res.data.length === this.auditPageSize;
  468. console.log("审核列表数据",this.auditList);
  469. } else {
  470. // 如果是加载更多,则保持原有数据
  471. if (!this.isLoadingMore) {
  472. uni.showToast({
  473. title: '获取数据失败',
  474. icon: 'none'
  475. });
  476. }
  477. this.auditHasMore = false;
  478. }
  479. }).catch(err => {
  480. this.isLoading = false;
  481. this.isLoadingMore = false;
  482. uni.hideLoading();
  483. });
  484. },
  485. dicts() {
  486. dicts('task_status').then(res => {
  487. if (res.code === 200 ) {
  488. console.log(res.data)
  489. this.taskStatus = res.data;
  490. this.taskSubTabs = [
  491. { label: '全部任务', value: '' }
  492. ];
  493. res.data.forEach(item => {
  494. this.taskSubTabs.push({
  495. label: item.dictLabel,
  496. value: item.dictValue
  497. });
  498. });
  499. console.log('更新后的taskSubTabs:', this.taskSubTabs);
  500. }
  501. });
  502. },
  503. loadData() {
  504. // 根据当前标签加载对应数据
  505. if (this.currentTopTab === 'task') {
  506. this.getTaskList();
  507. } else if (this.currentTopTab === 'audit') {
  508. this.getAuditList();
  509. }
  510. // 只在首次加载时获取公司项目设置
  511. if (!this.companySettingsLoaded) {
  512. this.getCompanySettings();
  513. this.companySettingsLoaded = true;
  514. }
  515. },
  516. // 下拉刷新
  517. refresh() {
  518. // 重置分页参数
  519. if (this.currentTopTab === 'task') {
  520. this.page = 1;
  521. this.hasMore = true;
  522. this.taskList = [];
  523. } else if (this.currentTopTab === 'audit') {
  524. this.auditPage = 1;
  525. this.auditHasMore = true;
  526. this.auditList = [];
  527. }
  528. // 重新加载数据
  529. this.loadData();
  530. },
  531. // 加载更多
  532. loadMore() {
  533. // 检查是否正在加载或没有更多数据
  534. if (this.isLoading || this.isLoadingMore) return;
  535. if (this.currentTopTab === 'task') {
  536. if (!this.hasMore) return;
  537. // 增加页码并加载更多
  538. this.page++;
  539. this.isLoadingMore = true;
  540. this.getTaskList();
  541. } else if (this.currentTopTab === 'audit') {
  542. if (!this.auditHasMore) return;
  543. // 增加页码并加载更多
  544. this.auditPage++;
  545. this.isLoadingMore = true;
  546. this.getAuditList();
  547. }
  548. },
  549. //任务列表
  550. getTaskList() {
  551. // 构建请求参数
  552. const params = {
  553. ...this.filters,
  554. type: this.currentTopTab,
  555. taskStatus: this.currentSubTab,
  556. page: this.page,
  557. pageSize: this.pageSize,
  558. companyId: this.userInfo.companyId || 0,
  559. keyWord: this.searchKeyword || ''
  560. };
  561. // 避免重复请求
  562. if (this.isLoading) return;
  563. this.isLoading = true;
  564. if (!this.isLoadingMore) {
  565. uni.showLoading({
  566. title: '加载中...'
  567. });
  568. }
  569. list(params).then(res => {
  570. this.isLoading = false;
  571. this.isLoadingMore = false;
  572. uni.hideLoading();
  573. if (res.code === 200 && res.rows) {
  574. // 处理任务列表数据
  575. const newTaskList = res.rows.map(item => ({
  576. id: item.id,
  577. doctorName: item.doctorName,
  578. taskName: item.taskName,
  579. statusText: this.getStatusText(item.taskStatus),
  580. statusClass: this.getStatusClass(item.taskStatus),
  581. level: '', // 接口返回数据中没有level字段
  582. deptName: item.deptName, // 使用deptName作为deptName
  583. taskTypeName: item.taskTypeName,
  584. taskIntegral: item.taskIntegral,
  585. taskCount: item.taskCount,
  586. createTime: item.createTime,
  587. finishAuditTime: item.finishAuditTime || '-',
  588. auditStatus: this.getAuditStatusText(item.finishAuditStatus),
  589. showDelete: true,
  590. sealImg: item.taskStatus === 1 ? 'https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/img_finished.png' : 'https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/img_unfinish.png',
  591. finishAuditInstanceId: item.finishAuditInstanceId || '-',
  592. createAuditInstanceId: item.createAuditInstanceId || '-',
  593. }));
  594. // 如果是加载更多,则追加数据
  595. if (this.isLoadingMore) {
  596. this.taskList = [...this.taskList, ...newTaskList];
  597. } else {
  598. // 否则替换数据
  599. this.taskList = newTaskList;
  600. }
  601. // 判断是否还有更多数据
  602. this.hasMore = res.rows.length === this.pageSize;
  603. } else {
  604. // 如果是加载更多,则保持原有数据
  605. if (!this.isLoadingMore) {
  606. uni.showToast({
  607. title: '获取数据失败',
  608. icon: 'none'
  609. });
  610. }
  611. this.hasMore = false;
  612. }
  613. }).catch(err => {
  614. this.isLoading = false;
  615. this.isLoadingMore = false;
  616. uni.hideLoading();
  617. uni.showToast({
  618. icon: 'none',
  619. title: '网络错误'
  620. });
  621. });
  622. },
  623. onSearch() {
  624. if (this.currentTopTab === 'task') {
  625. this.page = 1
  626. this.hasMore = true
  627. this.taskList = []
  628. this.getTaskList()
  629. } else {
  630. this.auditPage = 1
  631. this.auditHasMore = true
  632. this.auditList = []
  633. this.getAuditList()
  634. }
  635. },
  636. getCompanySettings() {
  637. // 获取公司项目设置
  638. if (this.userInfo.companyId) {
  639. company(this.userInfo.companyId).then(res => {
  640. if (res.code === 200) {
  641. console.log('公司项目设置:', res.data);
  642. // 处理公司项目设置数据
  643. }
  644. }).catch(err => {
  645. console.error('获取公司项目设置失败:', err);
  646. });
  647. }
  648. },
  649. getStatusText(status) {
  650. // 根据状态获取状态文本
  651. const statusMap = {
  652. 0: '未完成',
  653. 1: '已完成'
  654. };
  655. return statusMap[status] || '未知状态';
  656. },
  657. getStatusClass(status) {
  658. // 根据状态获取状态样式类
  659. const statusMap = {
  660. 0: 'status-wait',
  661. 1: 'status-finish'
  662. };
  663. return statusMap[status] || 'status-wait';
  664. },
  665. getAuditStatusText(status) {
  666. // 根据审核状态获取状态文本
  667. const statusMap = {
  668. 0: '待审核',
  669. 1: '已通过',
  670. 2: '已驳回',
  671. 3: '未完成'
  672. };
  673. return statusMap[status] || '-';
  674. },
  675. getAuditStatusClass(status) {
  676. // 根据审核状态获取状态样式类
  677. const statusMap = {
  678. 0: 'status-wait',
  679. 1: 'status-finish',
  680. 2: 'status-rejected',
  681. 3: 'status-wait',
  682. };
  683. return statusMap[status] || 'status-wait';
  684. },
  685. getBusinessTypeLabel(businessType) {
  686. // 根据业务类型获取标签文本
  687. if (!businessType || !this.processTemplate) {
  688. return '未设置';
  689. }
  690. const dictItem = this.processTemplate.find(item => item.dictValue === businessType);
  691. return dictItem ? dictItem.dictLabel : businessType;
  692. },
  693. formatTime(time) {
  694. // 格式化时间
  695. if (!time) return '-';
  696. const date = new Date(time);
  697. const year = date.getFullYear();
  698. const month = String(date.getMonth() + 1).padStart(2, '0');
  699. const day = String(date.getDate()).padStart(2, '0');
  700. return `${year}-${month}-${day}`;
  701. },
  702. goCreate(){
  703. console.log('创建任务');
  704. uni.navigateTo({
  705. url: '/pages_task/createTask'
  706. })
  707. },
  708. goData(){
  709. console.log("跳转到数据页");
  710. uni.navigateTo({
  711. url: '/pages_task/statistics'
  712. })
  713. },
  714. goDetails(item) {
  715. console.log("跳转到任务详情页",item);
  716. // 直接跳转到任务详情页,传递id作为taskId参数
  717. let id = ''
  718. if(this.currentTopTab === 'task'){
  719. id = item.id
  720. }else if(this.currentTopTab === 'audit'){
  721. id = item.businessData.taskInfo.id
  722. }
  723. uni.navigateTo({
  724. url: `/pages_task/taskDetail?taskId=${item.createAuditInstanceId||item.businessData.taskInfo.createAuditInstanceId||''}&taskId2=${item.finishAuditInstanceId||item.businessData.taskInfo.finishAuditInstanceId||''}&id=${id||''}&type=${this.currentTopTab}`
  725. });
  726. },
  727. selectSubTab(value) {
  728. this.currentSubTab = value;
  729. // 重置分页参数
  730. if (this.currentTopTab === 'task') {
  731. this.page = 1;
  732. this.hasMore = true;
  733. this.taskList = [];
  734. this.getTaskList();
  735. } else if (this.currentTopTab === 'audit') {
  736. this.auditPage = 1;
  737. this.auditHasMore = true;
  738. this.auditList = [];
  739. this.getAuditList();
  740. }
  741. },
  742. switchTopTab(type) {
  743. this.currentTopTab = type;
  744. this.currentSubTab = '';
  745. // 重置分页参数
  746. if (type === 'task') {
  747. this.page = 1;
  748. this.hasMore = true;
  749. this.taskList = [];
  750. this.getTaskList();
  751. } else if (type === 'audit') {
  752. this.auditPage = 1;
  753. this.auditHasMore = true;
  754. this.auditList = [];
  755. this.getAuditList();
  756. }
  757. },
  758. closeFilter() {
  759. this.showFilter = false
  760. },
  761. resetFilters() {
  762. this.filters = {
  763. applyStartTime: '',
  764. applyEndTime: '',
  765. finishTimeStart: '',
  766. finishTimeEnd: '',
  767. auditTimeStart: '',
  768. auditTimeEnd: '',
  769. taskBelong: '',
  770. finishStatus: '',
  771. belongType: ''
  772. }
  773. },
  774. confirmFilters() {
  775. this.showFilter = false
  776. // 根据筛选条件重新加载数据
  777. this.loadData();
  778. },
  779. // 打开日期选择器
  780. openDatePicker(field) {
  781. console.log('openDatePicker called with field:', field);
  782. this.currentDateField = field;
  783. const currentValue = this.filters[field];
  784. if (currentValue) {
  785. this.datePickerValue = new Date(currentValue).getTime();
  786. } else {
  787. this.datePickerValue = new Date().getTime();
  788. }
  789. this.showDatePicker = true;
  790. },
  791. // 日期选择器确认
  792. datePickerConfirm(e) {
  793. console.log('datePickerConfirm:', e);
  794. const date = new Date(e.value);
  795. const year = date.getFullYear();
  796. const month = String(date.getMonth() + 1).padStart(2, '0');
  797. const day = String(date.getDate()).padStart(2, '0');
  798. const formattedDate = `${year}-${month}-${day}`;
  799. this.filters[this.currentDateField] = formattedDate;
  800. this.showDatePicker = false;
  801. },
  802. // 日期选择器取消
  803. datePickerCancel() {
  804. this.showDatePicker = false;
  805. },
  806. handleShare(item) {
  807. uni.showToast({
  808. title: '分享功能待实现',
  809. icon: 'none'
  810. })
  811. },
  812. handleTaskDelete(item, index) {
  813. uni.showModal({
  814. title: '提示',
  815. content: '确定要删除这条任务吗?',
  816. cancelText: '取消',
  817. confirmText: '删除',
  818. confirmColor: '#FF0000',
  819. success: (res) => {
  820. if (res.confirm) {
  821. uni.showLoading({
  822. title: '删除中...'
  823. });
  824. deleted(item.id).then(res => {
  825. uni.hideLoading();
  826. if (res.code === 200) {
  827. this.taskList.splice(index, 1);
  828. uni.showToast({
  829. title: '任务已删除',
  830. icon: 'success',
  831. duration: 1500
  832. });
  833. this.loadData();
  834. } else {
  835. uni.showToast({
  836. title: '删除失败',
  837. icon: 'none'
  838. });
  839. }
  840. }).catch(err => {
  841. uni.hideLoading();
  842. uni.showToast({
  843. title: '网络错误',
  844. icon: 'none'
  845. });
  846. });
  847. }
  848. }
  849. });
  850. },
  851. handleCopy(item) {
  852. console.log('去编辑', item);
  853. uni.navigateTo({
  854. url: `/pages_task/fillTask?id=${item.id}&doctorId=${item.initiatorId}&copy=true`
  855. })
  856. },
  857. handleAuditDelete(item, index) {
  858. uni.showModal({
  859. title: '提示',
  860. content: '确定要删除这条审核项吗?',
  861. cancelText: '取消',
  862. confirmText: '删除',
  863. confirmColor: '#FF0000',
  864. success: (res) => {
  865. if (res.confirm) {
  866. uni.showLoading({
  867. title: '删除中...'
  868. });
  869. deleted(item.id).then(res => {
  870. uni.hideLoading();
  871. if (res.code === 200) {
  872. this.auditList.splice(index, 1);
  873. uni.showToast({
  874. title: '审核项已删除',
  875. icon: 'success',
  876. duration: 1500
  877. });
  878. } else {
  879. uni.showToast({
  880. title: '删除失败',
  881. icon: 'none'
  882. });
  883. }
  884. }).catch(err => {
  885. uni.hideLoading();
  886. uni.showToast({
  887. title: '网络错误',
  888. icon: 'none'
  889. });
  890. });
  891. }
  892. }
  893. });
  894. },
  895. handleEdit(item) {
  896. uni.navigateTo({
  897. url: `/pages_task/createTask?id=${item.id}&edit=true`
  898. })
  899. }
  900. }
  901. }
  902. </script>
  903. <style lang="scss" scoped>
  904. .container {
  905. min-height: 100vh;
  906. background: #f5f5f5;
  907. .top-box {
  908. padding: 20rpx 32rpx;
  909. display: flex;
  910. align-items: center;
  911. background: #fff;
  912. .input-item {
  913. display: flex;
  914. align-items: center;
  915. flex: 1;
  916. height: 72rpx;
  917. background: #F7F8FA;
  918. border-radius: 38rpx;
  919. .search-icon {
  920. width: 26rpx;
  921. height: 26rpx;
  922. margin: 0 10rpx 0 28rpx;
  923. }
  924. input {
  925. flex: 1;
  926. font-size: 28rpx;
  927. color: #333;
  928. }
  929. }
  930. .filter-item {
  931. margin-left: 24rpx;
  932. display: flex;
  933. align-items: center;
  934. font-size: 28rpx;
  935. color: #999;
  936. .filter-icon {
  937. width: 28rpx;
  938. height: 28rpx;
  939. margin-right: 10rpx;
  940. }
  941. }
  942. }
  943. .top-tabs {
  944. display: flex;
  945. background: #fff;
  946. .top-tab-item {
  947. flex: 1;
  948. text-align: center;
  949. padding: 24rpx 0;
  950. font-size: 28rpx;
  951. color: #999;
  952. transition: all 0.2s;
  953. &.active {
  954. color: #333;
  955. font-weight: 500;
  956. position: relative;
  957. &::after {
  958. content: '';
  959. position: absolute;
  960. bottom: 0;
  961. left: 50%;
  962. transform: translateX(-50%);
  963. border-radius: 3rpx;
  964. width: 80rpx;
  965. height: 6rpx;
  966. background: #388BFF;
  967. }
  968. }
  969. }
  970. }
  971. .sub-tabs {
  972. display: flex;
  973. justify-content: space-between;
  974. background: #fff;
  975. padding: 16rpx 32rpx;
  976. gap: 24rpx;
  977. .sub-tab-item {
  978. padding: 12rpx 24rpx;
  979. border-radius: 30rpx;
  980. font-size: 28rpx;
  981. color: #666;
  982. transition: all 0.2s;
  983. &.active {
  984. background: #EBF3FF;
  985. color: #388BFF;
  986. }
  987. }
  988. }
  989. .content {
  990. padding: 24rpx;
  991. box-sizing: border-box;
  992. min-height: calc(100vh - 300rpx);
  993. .task-card {
  994. background: #fff;
  995. border-radius: 24rpx;
  996. margin-bottom: 20rpx;
  997. border: 2rpx solid #E9F2FF;
  998. position: relative;
  999. padding-bottom: 24rpx;
  1000. .card-top {
  1001. display: flex;
  1002. justify-content: space-between;
  1003. align-items: center;
  1004. background: linear-gradient(90deg, #E8F1FF 0%, #FFFFFF 100%);
  1005. border-radius: 24rpx 24rpx 0 0;
  1006. padding: 26rpx 24rpx;
  1007. margin-bottom: 16rpx;
  1008. .card-task-title {
  1009. font-size: 32rpx;
  1010. font-weight: 600;
  1011. color: #333;
  1012. }
  1013. .status-tag {
  1014. padding: 8rpx 16rpx;
  1015. border-radius: 20rpx;
  1016. font-size: 24rpx;
  1017. &.status-wait {
  1018. background: #E3F2FD;
  1019. color: #2196F3;
  1020. }
  1021. &.status-finish {
  1022. background: #E6FAEF;
  1023. color: #07C160;
  1024. }
  1025. &.status-rejected {
  1026. background: #FFF4F5;
  1027. color: #CF3546;
  1028. }
  1029. &.status-createPending {
  1030. background: #FFF8E6;
  1031. color: #FF9500;
  1032. }
  1033. }
  1034. }
  1035. .card-content {
  1036. padding: 0 24rpx;
  1037. .speaker-info {
  1038. display: flex;
  1039. align-items: center;
  1040. margin-bottom: 16rpx;
  1041. .speaker-name {
  1042. font-weight: 600;
  1043. font-size: 32rpx;
  1044. color: #333;
  1045. }
  1046. .level-tag {
  1047. margin-left: 16rpx;
  1048. padding: 2rpx 12rpx;
  1049. font-size: 22rpx;
  1050. color: #C89743;
  1051. background: #FFF6E5;
  1052. border-radius: 8rpx;
  1053. }
  1054. }
  1055. .org-info {
  1056. display: flex;
  1057. align-items: center;
  1058. margin-bottom: 16rpx;
  1059. font-size: 28rpx;
  1060. color: #666;
  1061. .org-icon {
  1062. width: 32rpx;
  1063. height: 32rpx;
  1064. margin-right: 16rpx;
  1065. }
  1066. .line {
  1067. width: 2rpx;
  1068. height: 28rpx;
  1069. background: #EAEBEE;
  1070. margin: 0 24rpx;
  1071. }
  1072. }
  1073. .card-tags {
  1074. display: flex;
  1075. align-items: center;
  1076. flex-wrap: wrap;
  1077. gap: 12rpx;
  1078. margin-bottom: 16rpx;
  1079. .tag-left-group {
  1080. display: flex;
  1081. gap: 0;
  1082. .video-tag {
  1083. background: linear-gradient(90deg, #FFE9C7 0%, #F3D091 100%);
  1084. border-radius: 8rpx 0 0 8rpx;
  1085. color: #5D410F;
  1086. display: flex;
  1087. align-items: center;
  1088. padding: 8rpx;
  1089. font-size: 24rpx;
  1090. .video-tag-icon {
  1091. width: 28rpx;
  1092. height: 28rpx;
  1093. margin-right: 10rpx;
  1094. }
  1095. }
  1096. .category-tag {
  1097. border-radius: 0 8rpx 8rpx 0;
  1098. border: 2rpx solid #F3D191;
  1099. background: #FFFAF4;
  1100. color: #5D410F;
  1101. padding: 8rpx;
  1102. font-size: 24rpx;
  1103. }
  1104. }
  1105. .tag-right-group {
  1106. display: flex;
  1107. gap: 12rpx;
  1108. .points-tag {
  1109. border: 1rpx solid #388BFF;
  1110. color: #388BFF;
  1111. background: transparent;
  1112. border-radius: 8rpx;
  1113. padding: 8rpx;
  1114. font-size: 24rpx;
  1115. }
  1116. .count-tag {
  1117. border: 2rpx solid #E8E8E8;
  1118. border-radius: 8rpx;
  1119. padding: 8rpx;
  1120. font-size: 24rpx;
  1121. color: #666;
  1122. }
  1123. }
  1124. }
  1125. .time-info {
  1126. font-size: 28rpx;
  1127. color: #666;
  1128. display: flex;
  1129. flex-direction: column;
  1130. gap: 8rpx;
  1131. margin-bottom: 24rpx;
  1132. .time-item {
  1133. display: flex;
  1134. &:first-child {
  1135. color: #333;
  1136. }
  1137. }
  1138. }
  1139. .operate-btn-group {
  1140. display: flex;
  1141. align-items: center;
  1142. justify-content: space-between;
  1143. &.flex-end {
  1144. justify-content: flex-end;
  1145. }
  1146. .share-btn {
  1147. display: flex;
  1148. align-items: center;
  1149. font-size: 28rpx;
  1150. color: #666;
  1151. .share-icon {
  1152. width: 36rpx;
  1153. height: 36rpx;
  1154. margin-right: 8rpx;
  1155. }
  1156. }
  1157. .btn-group {
  1158. display: flex;
  1159. align-items: center;
  1160. .btn {
  1161. padding: 12rpx 32rpx;
  1162. font-size: 28rpx;
  1163. color: #388BFF;
  1164. border: 2rpx solid #388BFF;
  1165. margin-left: 16rpx;
  1166. border-radius: 34rpx;
  1167. transition: all 0.2s;
  1168. &:active {
  1169. background: #EBF3FF;
  1170. }
  1171. }
  1172. }
  1173. }
  1174. .status-seal {
  1175. position: absolute;
  1176. right: 24rpx;
  1177. bottom: 156rpx;
  1178. width: 152rpx;
  1179. height: 142rpx;
  1180. opacity: 0.8;
  1181. }
  1182. }
  1183. }
  1184. .audit-card {
  1185. background: #f9f9f9;
  1186. border-radius: 24rpx;
  1187. margin-bottom: 20rpx;
  1188. border: 2rpx solid #E9F2FF;
  1189. position: relative;
  1190. padding-bottom: 24rpx;
  1191. .card-top {
  1192. display: flex;
  1193. justify-content: space-between;
  1194. align-items: center;
  1195. background: linear-gradient(90deg, #E8F1FF 0%, #FFFFFF 100%);
  1196. border-radius: 24rpx 24rpx 0 0;
  1197. padding: 26rpx 24rpx;
  1198. margin-bottom: 16rpx;
  1199. .card-task-title {
  1200. font-size: 32rpx;
  1201. font-weight: 600;
  1202. color: #333;
  1203. }
  1204. .status-tag {
  1205. padding: 8rpx 16rpx;
  1206. border-radius: 20rpx;
  1207. font-size: 24rpx;
  1208. &.status-wait {
  1209. background: #E3F2FD;
  1210. color: #2196F3;
  1211. }
  1212. &.status-finish {
  1213. background: #E6FAEF;
  1214. color: #07C160;
  1215. }
  1216. &.status-rejected {
  1217. background: #FFF4F5;
  1218. color: #CF3546;
  1219. }
  1220. &.status-createPending {
  1221. background: #FFF8E6;
  1222. color: #FF9500;
  1223. }
  1224. }
  1225. }
  1226. .card-content {
  1227. padding: 0 24rpx;
  1228. .time-info {
  1229. margin-bottom: 16rpx;
  1230. .time-item {
  1231. margin-bottom: 8rpx;
  1232. display: flex;
  1233. align-items: flex-start;
  1234. text {
  1235. font-size: 24rpx;
  1236. color: #999;
  1237. &.title {
  1238. color: #666;
  1239. margin-right: 8rpx;
  1240. white-space: nowrap;
  1241. }
  1242. &:not(.title) {
  1243. flex: 1;
  1244. word-break: break-word;
  1245. overflow-wrap: break-word;
  1246. }
  1247. }
  1248. }
  1249. }
  1250. .operate-btn-group {
  1251. display: flex;
  1252. justify-content: space-between;
  1253. align-items: center;
  1254. margin-top: 16rpx;
  1255. .share-btn {
  1256. display: flex;
  1257. align-items: center;
  1258. font-size: 24rpx;
  1259. color: #999;
  1260. .share-icon {
  1261. width: 36rpx;
  1262. height: 36rpx;
  1263. margin-right: 8rpx;
  1264. }
  1265. }
  1266. .date {
  1267. font-size: 24rpx;
  1268. color: #999;
  1269. }
  1270. }
  1271. }
  1272. }
  1273. }
  1274. .side {
  1275. position: fixed;
  1276. top: 60%;
  1277. right: 36rpx;
  1278. display: flex;
  1279. flex-direction: column;
  1280. align-items: center;
  1281. z-index: 9;
  1282. .side-item {
  1283. width: 96rpx;
  1284. height: 96rpx;
  1285. margin-bottom: 28rpx;
  1286. .icon {
  1287. width: 100%;
  1288. height: 100%;
  1289. }
  1290. &:active {
  1291. opacity: 0.6;
  1292. }
  1293. }
  1294. }
  1295. .filter-popup {
  1296. position: fixed;
  1297. top: 0;
  1298. left: 0;
  1299. right: 0;
  1300. bottom: 0;
  1301. background: rgba(0, 0, 0, 0.5);
  1302. z-index: 999;
  1303. display: flex;
  1304. align-items: flex-end;
  1305. .filter-content {
  1306. width: 100%;
  1307. background: #fff;
  1308. border-radius: 24rpx 24rpx 0 0;
  1309. padding: 32rpx;
  1310. .filter-header {
  1311. display: flex;
  1312. align-items: center;
  1313. justify-content: center;
  1314. margin-bottom: 32rpx;
  1315. position: relative;
  1316. .filter-title {
  1317. font-size: 32rpx;
  1318. font-weight: bold;
  1319. color: #333;
  1320. }
  1321. .filter-close-btn {
  1322. position: absolute;
  1323. right: 0;
  1324. width: 44rpx;
  1325. height: 44rpx;
  1326. }
  1327. }
  1328. .filter-form {
  1329. padding: 0 0 24rpx 0;
  1330. .filter-section {
  1331. margin-bottom: 32rpx;
  1332. .section-label {
  1333. font-weight: 500;
  1334. font-size: 28rpx;
  1335. color: #333;
  1336. margin-bottom: 24rpx;
  1337. }
  1338. .time-range {
  1339. display: flex;
  1340. align-items: center;
  1341. gap: 16rpx;
  1342. .time-input {
  1343. flex: 1;
  1344. line-height: 72rpx;
  1345. height: 72rpx;
  1346. text-align: center;
  1347. background: #F7F8FA;
  1348. border-radius: 8rpx;
  1349. padding: 0 16rpx;
  1350. font-size: 26rpx;
  1351. color: #333;
  1352. }
  1353. .time-separator {
  1354. font-size: 24rpx;
  1355. color: #999;
  1356. }
  1357. }
  1358. .btn-group {
  1359. display: flex;
  1360. gap: 16rpx;
  1361. .filter-btn {
  1362. width: 214rpx;
  1363. height: 72rpx;
  1364. background: #F7F8FA;
  1365. border-radius: 70rpx 70rpx 70rpx 70rpx;
  1366. line-height: 72rpx;
  1367. text-align: center;
  1368. font-size: 28rpx;
  1369. transition: all 0.2s;
  1370. color: #333333;
  1371. &.active {
  1372. background: rgba(56, 139, 255, 0.15);
  1373. color: #388BFF;
  1374. }
  1375. }
  1376. }
  1377. }
  1378. }
  1379. .filter-actions {
  1380. display: flex;
  1381. gap: 24rpx;
  1382. margin-top: 40rpx;
  1383. .reset-btn,
  1384. .confirm-btn {
  1385. flex: 1;
  1386. height: 80rpx;
  1387. line-height: 80rpx;
  1388. text-align: center;
  1389. border-radius: 200rpx;
  1390. font-size: 28rpx;
  1391. transition: all 0.2s;
  1392. }
  1393. .reset-btn {
  1394. background: #fff;
  1395. color: #388BFF;
  1396. border: 2rpx solid #388BFF;
  1397. &:active {
  1398. background: #EBF3FF;
  1399. }
  1400. }
  1401. .confirm-btn {
  1402. background: #388BFF;
  1403. color: #fff;
  1404. &:active {
  1405. background: #2A78E5;
  1406. }
  1407. }
  1408. }
  1409. }
  1410. }
  1411. }
  1412. </style>