fillTask.vue 43 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430
  1. <template>
  2. <view class="container">
  3. <Step :step="currentStep" :stepsData="currentText" />
  4. <scroll-view class="content" scroll-y>
  5. <!-- 驳回意见提示 -->
  6. <view class="rejection-banner" v-if="rejectionInfo">
  7. <view class="rejection-icon">✕</view>
  8. <view class="rejection-text">驳回意见: {{ rejectionInfo }}</view>
  9. </view>
  10. <!-- 基本信息 -->
  11. <view class="form-section">
  12. <view class="form-item">
  13. <view class="form-label">
  14. <text class="required">*</text>
  15. <text>任务归属</text>
  16. </view>
  17. <view class="form-input picker-input" :class="{ placeholder: !formData.deptId }"
  18. @click="showPicker('任务归属',companyData)">
  19. {{ institutionDisplayText || '请选择任务归属' }}
  20. <image class="icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_more.png"></image>
  21. </view>
  22. </view>
  23. <view class="form-item">
  24. <view class="form-label">
  25. <text class="required">*</text>
  26. <text>归属项目</text>
  27. </view>
  28. <view class="form-input picker-input" :class="{ placeholder: !formData.projectId }"
  29. @click="showPicker('归属项目',companyList)">
  30. {{ belongingProjectDisplayText || '请选择归属项目' }}
  31. <image class="icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_more.png"></image>
  32. </view>
  33. </view>
  34. <view class="form-item">
  35. <view class="form-label">
  36. <text class="required">*</text>
  37. <text>产品代码</text>
  38. </view>
  39. <view class="form-input picker-input" :class="{ placeholder: !formData.productId }"
  40. @click="showPicker('产品代码',productList)">
  41. {{ productNameDisplayText || '请选择产品代码' }}
  42. <image class="icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_more.png"></image>
  43. </view>
  44. </view>
  45. <view class="form-item">
  46. <view class="form-label">
  47. <text class="required">*</text>
  48. <text>费用分摊</text>
  49. </view>
  50. <view class="form-input picker-input" :class="{ placeholder: !formData.costShareId }"
  51. @click="showPicker('费用分摊',companyData)">
  52. {{ costAllocationDisplayText || '请选择费用分摊主体' }}
  53. <image class="icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_more.png"></image>
  54. </view>
  55. </view>
  56. <view class="form-item">
  57. <view class="form-label">
  58. <text>添加任务备注</text>
  59. </view>
  60. <EvanSwitch v-model="formData.addRemark"></EvanSwitch>
  61. </view>
  62. <view class="form-item" v-if="formData.addRemark">
  63. <textarea class="form-textarea" v-model="formData.remark" placeholder="请输入任务备注" rows="4"></textarea>
  64. </view>
  65. <view class="form-item">
  66. <view class="form-label">
  67. <text class="required">*</text>
  68. <text>归属类型</text>
  69. </view>
  70. <view class="form-input picker-input" :class="{ placeholder: !formData.belongType }"
  71. @click="showPicker('归属类型',dictTypeColumns)">
  72. {{ belongTypeDisplayText || '请选择归属类型' }}
  73. <image class="icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_more.png"></image>
  74. </view>
  75. </view>
  76. <view class="form-item">
  77. <view class="form-label">
  78. <text class="required">*</text>
  79. <text>任务类型</text>
  80. </view>
  81. <view class="form-input picker-input" :class="{ placeholder: !formData.taskType }"
  82. @click="showPicker('任务类型',taskTypeColumns)">
  83. {{ taskTypeDisplayText || '请选择任务类型' }}
  84. <image class="icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_more.png"></image>
  85. </view>
  86. </view>
  87. <view class="form-item">
  88. <view class="form-label">
  89. <text class="required">*</text>
  90. <text>计划开始时间</text>
  91. </view>
  92. <view class="form-input picker-input" :class="{ placeholder: !formData.planStartTime }"
  93. @click="showStartTimePicker = true">
  94. {{ formData.planStartTime || '请选择计划开始时间' }}
  95. <image class="icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_more.png"></image>
  96. </view>
  97. </view>
  98. <view class="form-item">
  99. <view class="form-label">
  100. <text class="required">*</text>
  101. <text>计划结束时间</text>
  102. </view>
  103. <view class="form-input picker-input" :class="{ placeholder: !formData.planEndTime }"
  104. @click="showEndTimePicker = true">
  105. {{ formData.planEndTime || '请选择计划结束时间' }}
  106. <image class="icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_more.png"></image>
  107. </view>
  108. </view>
  109. <!-- 观看方式 -->
  110. <!-- <view class="form-item">
  111. <view class="form-label">
  112. <text class="required">*</text>
  113. <text>观看方式</text>
  114. </view>
  115. <view class="radio-group">
  116. <label class="radio-item" :class="{ active: formData.viewMode === '公开' }"
  117. @click="formData.viewMode = '公开'">
  118. <image class="radio-circle" v-if="formData.viewMode === '公开'"
  119. src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_circle_sel.png"></image>
  120. <image class="radio-circle" v-else src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_circle.png"></image>
  121. <text>公开</text>
  122. </label>
  123. <label class="radio-item" :class="{ active: formData.viewMode === '加密' }"
  124. @click="formData.viewMode = '加密'">
  125. <image class="radio-circle" v-if="formData.viewMode === '加密'"
  126. src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_circle_sel.png"></image>
  127. <image class="radio-circle" v-else src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_circle.png"></image>
  128. <text>加密</text>
  129. </label>
  130. </view>
  131. </view> -->
  132. <!-- 观看要求 -->
  133. <!-- <view class="form-item">
  134. <view class="form-label">
  135. <text class="required">*</text>
  136. <text>观看要求</text>
  137. </view>
  138. <view class="radio-group">
  139. <label class="radio-item" :class="{ active: formData.viewRequire === '登录账户' }"
  140. @click="formData.viewRequire = '登录账户'">
  141. <image class="radio-circle" v-if="formData.viewRequire === '登录账户'"
  142. src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_circle_sel.png"></image>
  143. <image class="radio-circle" v-else src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_circle.png"></image>
  144. <text>登录账户</text>
  145. </label>
  146. <label class="radio-item" :class="{ active: formData.viewRequire === '认证客户' }"
  147. @click="formData.viewRequire = '认证客户'">
  148. <image class="radio-circle" v-if="formData.viewRequire === '认证客户'"
  149. src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_circle_sel.png"></image>
  150. <image class="radio-circle" v-else src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_circle.png"></image>
  151. <text>认证客户</text>
  152. </label>
  153. </view>
  154. </view> -->
  155. </view>
  156. <!-- <view class="form-section">
  157. <view class="form-item">
  158. <view class="form-label">
  159. <text class="required">*</text>
  160. <text>直播间标题</text>
  161. </view>
  162. <view class="form-input">
  163. <input v-model="formData.roomTitle" placeholder="请输入直播间标题" />
  164. </view>
  165. </view>
  166. <view class="form-item column baseline">
  167. <view class="form-label">
  168. <text class="required">*</text>
  169. <text>封面图</text>
  170. </view>
  171. <view class="upload-area" @click="chooseCoverImage">
  172. <image v-if="formData.coverImage" :src="formData.coverImage" class="cover-image" />
  173. <view v-else class="upload-placeholder">
  174. <text>点击上传封面图</text>
  175. </view>
  176. <image v-if="formData.coverImage" class="delete-icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_cross.png"
  177. @click.stop="deleteCoverImage" />
  178. </view>
  179. </view>
  180. </view> -->
  181. <!-- 申请补充讲者任务 -->
  182. <!-- <view class="form-section">
  183. <view class="form-item">
  184. <view class="form-label">
  185. <text class="required">*</text>
  186. <text>申请补充讲者任务</text>
  187. </view>
  188. <EvanSwitch v-model="formData.applySpeaker"></EvanSwitch>
  189. </view>
  190. </view> -->
  191. </scroll-view>
  192. <view class="next-button" @click="toNext">下一步</view>
  193. <u-picker :title='pickerTitle' :show="showPickerVisible" confirmColor='#576B95' ref="uPicker"
  194. :columns="pickerData" @confirm="confirm" @cancel="cancel">
  195. </u-picker>
  196. <u-datetime-picker :show="showStartTimePicker" v-model="startTimeValue" mode="date"
  197. confirmColor='#576B95' @confirm="onStartTimeConfirm" @cancel="showStartTimePicker = false">
  198. </u-datetime-picker>
  199. <u-datetime-picker :show="showEndTimePicker" v-model="endTimeValue" mode="date"
  200. confirmColor='#576B95' @confirm="onEndTimeConfirm" @cancel="showEndTimePicker = false">
  201. </u-datetime-picker>
  202. <u-popup :show="showBelongingPopup" mode="bottom" round="20" @close="closePopup" closeable>
  203. <view class="popup-content p32">
  204. <view class="popup-header">
  205. <text class="title">归属项目</text>
  206. </view>
  207. <view class="search-box">
  208. <image class="icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/search.png"></image>
  209. <u-input v-model="searchKeyword" placeholder="请输入归属项目" border="none" clearable />
  210. </view>
  211. <scroll-view scroll-y class="project-list">
  212. <view v-for="(project, index) in filteredProjects" :key="index" class="project-item"
  213. :class="{ active: selectedIndex === index }" @tap="selectProject(project, index)">
  214. <text class="project-name">{{ project.name }}</text>
  215. <image class="icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_right.png"></image>
  216. </view>
  217. </scroll-view>
  218. </view>
  219. </u-popup>
  220. <u-popup :show="showTaskPopup" mode="bottom" round="16" @close="showTaskPopup = false" safeAreaInsetBottom>
  221. <view class="popup-content">
  222. <view class="popup-header">
  223. <text class="popup-title">任务归属</text>
  224. <image class="close-icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_cross.png" @click="showTaskPopup=false"></image>
  225. </view>
  226. <view class="two-level-container">
  227. <scroll-view class="primary-list" scroll-y>
  228. <view v-for="(item, index) in primaryOptions" :key="index" class="primary-item"
  229. :class="{ 'primary-active': activePrimaryIndex === index }"
  230. @click="handlePrimarySelect(index)">
  231. <text class="primary-text">{{ item.name }}</text>
  232. </view>
  233. </scroll-view>
  234. <scroll-view class="secondary-list" scroll-y>
  235. <view v-for="(subItem, subIndex) in currentSecondaryOptions" :key="subIndex"
  236. class="secondary-item" :class="{ 'secondary-active': selectedSecondaryItem === subItem }"
  237. @click="handleSecondarySelect(subItem)">
  238. <text class="secondary-text">{{ subItem }}</text>
  239. <u-icon v-if="selectedSecondaryItem === subItem" name="checkbox-mark" color="#2979ff"
  240. size="20" />
  241. </view>
  242. </scroll-view>
  243. </view>
  244. <view class="popup-footer">
  245. <button class="confirm-btn" @click="handleConfirm">确定</button>
  246. </view>
  247. </view>
  248. </u-popup>
  249. <!-- 通用选择器 -->
  250. <u-picker :title='pickerTitle' :show="showPickerVisible" confirmColor='#576B95' ref="uPicker"
  251. :columns="pickerData" @confirm="confirm" @cancel="cancel">
  252. </u-picker>
  253. <!-- 归属项目弹窗 -->
  254. <u-popup :show="showBelongingPopup" mode="bottom" round="20" @close="closePopup" closeable>
  255. <view class="popup-content p32">
  256. <view class="popup-header">
  257. <text class="title">归属项目</text>
  258. </view>
  259. <view class="search-box">
  260. <image class="icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/search.png"></image>
  261. <u-input v-model="searchKeyword" placeholder="请输入归属项目" border="none" clearable />
  262. </view>
  263. <scroll-view scroll-y class="project-list">
  264. <view v-for="(project, index) in filteredProjects" :key="index" class="project-item"
  265. :class="{ active: selectedIndex === index }" @tap="selectProject(project, index)">
  266. <text class="project-name">{{ project.name }}</text>
  267. <image class="icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_right.png"></image>
  268. </view>
  269. </scroll-view>
  270. </view>
  271. </u-popup>
  272. <!-- 任务归属弹窗 -->
  273. <u-popup :show="showTaskPopup" mode="bottom" round="16" @close="showTaskPopup = false" safeAreaInsetBottom>
  274. <view class="popup-content">
  275. <view class="popup-header">
  276. <text class="popup-title">任务归属</text>
  277. <image class="close-icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_cross.png" @click="showTaskPopup=false"></image>
  278. </view>
  279. <view class="two-level-container">
  280. <scroll-view class="primary-list" scroll-y>
  281. <view v-for="(item, index) in primaryOptions" :key="index" class="primary-item"
  282. :class="{ 'primary-active': activePrimaryIndex === index }"
  283. @click="handlePrimarySelect(index)">
  284. <text class="primary-text">{{ item.name }}</text>
  285. </view>
  286. </scroll-view>
  287. <scroll-view class="secondary-list" scroll-y>
  288. <view v-for="(subItem, subIndex) in currentSecondaryOptions" :key="subIndex"
  289. class="secondary-item" :class="{ 'secondary-active': selectedSecondaryItem === subItem }"
  290. @click="handleSecondarySelect(subItem)">
  291. <text class="secondary-text">{{ subItem }}</text>
  292. <u-icon v-if="selectedSecondaryItem === subItem" name="checkbox-mark" color="#2979ff"
  293. size="20" />
  294. </view>
  295. </scroll-view>
  296. </view>
  297. <view class="popup-footer">
  298. <button class="confirm-btn" @click="handleConfirm">确定</button>
  299. </view>
  300. </view>
  301. </u-popup>
  302. </view>
  303. </template>
  304. <script>
  305. import { info, queryAllData, queryAllProduct, getAllData, company } from '@/api/task'
  306. import Step from '@/pages_task/components/step.vue'
  307. import EvanSwitch from '@/components/evan-switch.vue'
  308. import utils from '@/utils/common.js'
  309. export default {
  310. components: {
  311. Step,
  312. EvanSwitch
  313. },
  314. data() {
  315. return {
  316. showTaskPopup: false,
  317. primaryOptions: [],
  318. activePrimaryIndex: 0,
  319. currentSecondaryOptions: [],
  320. selectedSecondaryItem: '',
  321. selectedPrimaryItem: null,
  322. selectedIndex: -1,
  323. selectedProject: null,
  324. belongingprojects: [],
  325. searchKeyword: '',
  326. showBelongingPopup: false,
  327. showPickerVisible: false,
  328. currentStep: 1,
  329. currentText: [{
  330. id: 1,
  331. stepNumber: 1,
  332. title: '填写任务'
  333. },
  334. {
  335. id: 2,
  336. stepNumber: 2,
  337. title: '积分设置'
  338. }
  339. ],
  340. rejectionInfo: '',
  341. // 核心修复:所有表单字段统一放在formData里
  342. formData: {
  343. id:'',
  344. costShareId: '',
  345. planStartTime: '',
  346. planEndTime: '',
  347. deptId: '',
  348. projectId: '',
  349. productId: '',
  350. taskType: '',
  351. belongType: '',
  352. addRemark: false,
  353. remark: '',
  354. viewMode: '公开', // 观看方式默认值
  355. viewRequire: '登录账户', // 观看要求默认值
  356. roomTitle: '', // 直播间标题
  357. coverImage: '', // 封面图
  358. applySpeaker: true // 申请补充讲者任务
  359. },
  360. pickerTitle: '默认标题',
  361. pickerData: [],
  362. companyId:'',
  363. showStartTimePicker: false,
  364. showEndTimePicker: false,
  365. startTimeValue: new Date(),
  366. endTimeValue: new Date(),
  367. originalCompanyData: null,
  368. companyData: [],
  369. companyList: [],
  370. productList: [],
  371. taskTypeOriginalData: [],
  372. taskTypeDict: [],
  373. belongTypeList: [],
  374. projectData: [],
  375. userInfo: {},
  376. // 页面显示数据
  377. deptName: '',
  378. costShareName: '',
  379. productName: '',
  380. projectName: '',
  381. id:'',
  382. doctorId:''
  383. }
  384. },
  385. onLoad: async function(options) {
  386. console.log("编辑任务接受数据",options);
  387. try {
  388. this.taskTypeDict = await utils.getDicts("task_type");//任务类型
  389. this.belongTypeList = await utils.getDicts("task_belong_type");//任务类型
  390. } catch (e) {
  391. console.log('获取字典数据失败:', e)
  392. }
  393. if(options.id){
  394. console.log('有id',options.id);
  395. this.id=options.id
  396. this.formData.id=options.id
  397. }
  398. if(options.doctorId){
  399. this.doctorId=options.doctorId
  400. }
  401. this.userInfo=JSON.parse(uni.getStorageSync("userInfo"))||''
  402. if (options.rejectionInfo) {
  403. this.rejectionInfo = decodeURIComponent(options.rejectionInfo)
  404. }
  405. // 初始化二级选项
  406. this.currentSecondaryOptions = this.primaryOptions[0]?.children || []
  407. // 获取用户信息
  408. const userInfoStr = uni.getStorageSync('userInfo')
  409. this.userInfo = userInfoStr ? JSON.parse(userInfoStr) : {}
  410. console.log(this.userInfo);
  411. // 加载信息
  412. this.companyId = this.userInfo.companyId || 1
  413. // 设置默认日期为当天
  414. this.formData.planStartTime = this.formatDateTime(new Date());
  415. this.formData.planEndTime = this.formatDateTime(new Date());
  416. this.info();
  417. },
  418. computed: {
  419. filteredProjects() {
  420. if (!this.searchKeyword.trim()) {
  421. return this.belongingprojects;
  422. }
  423. return this.belongingprojects.filter(project =>
  424. project.name.includes(this.searchKeyword)
  425. );
  426. },
  427. taskTypeDisplayText() {
  428. console.log('计算taskTypeDisplayText, formData.taskType:', this.formData.taskType);
  429. console.log('计算taskTypeDisplayText, taskTypeOriginalData:', this.taskTypeOriginalData);
  430. if (!this.formData.taskType || !this.taskTypeOriginalData) {
  431. return '';
  432. }
  433. const selectedType = this.taskTypeOriginalData.find(item => item.dictValue === this.formData.taskType);
  434. console.log('找到的selectedType:', selectedType);
  435. return selectedType ? selectedType.dictLabel : '';
  436. },
  437. institutionDisplayText() {
  438. if (!this.formData.deptId || !this.companyData) {
  439. return '';
  440. }
  441. const selectedItem = this.companyData.find(item => item.deptId === this.formData.deptId);
  442. return selectedItem ? selectedItem.deptName : '';
  443. },
  444. costAllocationDisplayText() {
  445. if (!this.formData.costShareId || !this.companyData) {
  446. return '';
  447. }
  448. const selectedItem = this.companyData.find(item => item.deptId === this.formData.costShareId);
  449. return selectedItem ? selectedItem.deptName : '';
  450. },
  451. belongingProjectDisplayText() {
  452. console.log('计算belongingProjectDisplayText:', this.formData.projectId, this.projectData);
  453. if (!this.formData.projectId || !this.projectData) {
  454. console.log('formData.projectId或projectData为空');
  455. return '';
  456. }
  457. const selectedItem = this.projectData.find(item => item.id === this.formData.projectId);
  458. console.log('找到的项目:', selectedItem);
  459. return selectedItem ? selectedItem.projectName : '';
  460. },
  461. productNameDisplayText() {
  462. if (!this.formData.productId || !this.productList) {
  463. return '';
  464. }
  465. const selectedItem = this.productList.find(item => item.id === this.formData.productId);
  466. return selectedItem ? selectedItem.productName : '';
  467. },
  468. belongTypeDisplayText() {
  469. if (!this.formData.belongType || !this.belongTypeList) {
  470. return '';
  471. }
  472. const selectedItem = this.belongTypeList.find(item => item.dictValue === this.formData.belongType);
  473. return selectedItem ? selectedItem.dictLabel : '';
  474. }
  475. },
  476. methods: {
  477. // 任务详情查询
  478. info() {
  479. info(this.id).then(res => {
  480. if (res.code === 200) {
  481. const data = res.data;
  482. // 直接将接口返回的数据赋值给 formData
  483. this.formData = {
  484. // 基本信息
  485. id: this.id || '',
  486. deptId: data.deptId || '',
  487. deptName: data.deptName || '',
  488. projectId: data.projectId || '',
  489. productId: data.productId || '',
  490. costShareId: data.costShareId || '',
  491. belongType: data.belongType || '',
  492. taskType: data.taskType || '',
  493. addRemark: false,
  494. // 时间信息
  495. planStartTime: data.planStartTime || '',
  496. planEndTime: data.planEndTime || '',
  497. // 直播信息
  498. viewMode: '公开', // 观看方式默认值
  499. viewRequire: '登录账户', // 观看要求默认值
  500. roomTitle: '', // 直播间标题
  501. coverImage: '', // 封面图
  502. applySpeaker: true // 申请补充讲者任务
  503. };
  504. // 保存其他需要的数据
  505. this.deptName = data.deptName || '';
  506. this.costShareName = data.costShareName || '';
  507. this.productName = data.productName || '';
  508. this.projectName = data.projectName || '';
  509. } else {
  510. uni.showToast({
  511. title: '查询任务详情失败',
  512. icon: 'none'
  513. });
  514. }
  515. })
  516. },
  517. // 封面图上传
  518. chooseCoverImage() {
  519. uni.chooseImage({
  520. count: 1,
  521. sizeType: ['compressed'],
  522. sourceType: ['album', 'camera'],
  523. success: (res) => {
  524. this.formData.coverImage = res.tempFilePaths[0]
  525. }
  526. })
  527. },
  528. // 删除封面图
  529. deleteCoverImage() {
  530. this.formData.coverImage = ''
  531. },
  532. // 一级分类选择
  533. handlePrimarySelect(index) {
  534. this.activePrimaryIndex = index;
  535. this.currentSecondaryOptions = this.primaryOptions[index].children || [];
  536. this.selectedSecondaryItem = '';
  537. },
  538. // 二级分类选择
  539. handleSecondarySelect(item) {
  540. this.selectedSecondaryItem = item;
  541. this.selectedPrimaryItem = this.primaryOptions[this.activePrimaryIndex];
  542. },
  543. // 任务归属确认
  544. handleConfirm() {
  545. if (this.selectedSecondaryItem) {
  546. const displayText = `${this.selectedPrimaryItem.name} > ${this.selectedSecondaryItem}`;
  547. this.formData.institution = displayText;
  548. this.showTaskPopup = false;
  549. } else {
  550. uni.showToast({
  551. title: '请选择二级部门',
  552. icon: 'none'
  553. });
  554. }
  555. },
  556. // 关闭归属项目弹窗
  557. closePopup() {
  558. this.showBelongingPopup = false;
  559. this.searchKeyword = '';
  560. this.selectedIndex = -1;
  561. },
  562. // 选择归属项目
  563. selectProject(project, index) {
  564. this.selectedIndex = index;
  565. this.selectedProject = project;
  566. this.formData.belongingProject = project.name;
  567. setTimeout(() => {
  568. this.showBelongingPopup = false;
  569. this.searchKeyword = '';
  570. this.selectedIndex = -1;
  571. }, 300);
  572. },
  573. //任务类型
  574. queryAllData(){
  575. return new Promise((resolve, reject) => {
  576. if(!this.formData.productId){
  577. uni.showToast({
  578. title: '请先选择产品',
  579. icon: 'none'
  580. })
  581. resolve();
  582. return
  583. }
  584. let data={
  585. companyId:this.userInfo.companyId||'',
  586. deptId:this.formData.deptId||'',
  587. productId:this.formData.productId||'',
  588. }
  589. queryAllData(data).then(res => {
  590. if (res.code === 200) {
  591. // 处理任务类型
  592. this.taskType = res.data || []
  593. console.log('company接口返回数据:', res)
  594. // 处理taskTypeIds,获取对应的字典数据
  595. if (res.data && res.data.length > 0) {
  596. const firstData = res.data[0];
  597. if (firstData.taskTypeIds) {
  598. // 分割taskTypeIds为数组
  599. const taskTypeIdsArray = firstData.taskTypeIds.split(',');
  600. // 从字典表中筛选出对应的项
  601. const filteredTaskTypes = this.taskTypeDict.filter(item =>
  602. taskTypeIdsArray.includes(item.dictValue)
  603. );
  604. // 保存原始数据(包含dictLabel和dictValue)
  605. this.taskTypeOriginalData = filteredTaskTypes;
  606. // 提取dictLabel并放到taskTypeColumns中
  607. const taskTypeLabels = filteredTaskTypes.map(item => item.dictLabel);
  608. this.taskTypeColumns = [taskTypeLabels];
  609. console.log('处理后的taskTypeColumns:', this.taskTypeColumns);
  610. console.log('任务类型原始数据:', this.taskTypeOriginalData);
  611. }
  612. }
  613. }
  614. resolve(res);
  615. }).catch(err => {
  616. console.error('获取任务类型失败:', err);
  617. reject(err);
  618. });
  619. });
  620. },
  621. //获取公司所有产品
  622. async queryAllProduct(){
  623. return new Promise((resolve, reject) => {
  624. let data={
  625. companyId:this.userInfo.companyId||'',
  626. }
  627. queryAllProduct(data).then(res => {
  628. if (res.code === 200) {
  629. // 处理公司所有产品数据
  630. this.productList = res.data || []
  631. console.log('company接口返回数据:', res)
  632. }
  633. resolve(res);
  634. }).catch(err => {
  635. console.error('获取公司所有产品失败:', err);
  636. reject(err);
  637. });
  638. });
  639. },
  640. // 归属项目
  641. async getAllData(){
  642. return new Promise((resolve, reject) => {
  643. let data={
  644. companyId:this.userInfo.companyId||'',
  645. deptId:this.userInfo.deptId||'',
  646. productCode:this.userInfo.productCode||''
  647. }
  648. getAllData(data).then(res => {
  649. if (res.code === 200) {
  650. // 处理公司项目设置列表数据
  651. this.companyList = res.data || []
  652. // 保存项目数据用于显示
  653. this.projectData = res.data || []
  654. console.log('company接口返回数据:', res)
  655. console.log('companyList数据结构:', this.companyList)
  656. }
  657. resolve(res);
  658. }).catch(err => {
  659. console.error('获取公司项目设置失败:', err);
  660. reject(err);
  661. });
  662. });
  663. },
  664. async company() {
  665. return new Promise((resolve, reject) => {
  666. try {
  667. uni.showLoading({
  668. title: '加载中...'
  669. })
  670. // 调用company接口获取公司项目设置列表
  671. company(this.companyId).then(companyRes => {
  672. uni.hideLoading()
  673. if (companyRes.code === 200) {
  674. // 处理公司项目设置列表数据
  675. this.companyData = companyRes.data || []
  676. console.log('company接口返回数据:', companyRes)
  677. // 这里可以根据接口返回的数据进行页面初始化,比如填充项目列表
  678. }
  679. resolve(companyRes);
  680. }).catch(e => {
  681. uni.hideLoading()
  682. console.error('加载信息失败', e)
  683. uni.showToast({
  684. title: '网络错误',
  685. icon: 'none'
  686. })
  687. reject(e);
  688. });
  689. } catch (e) {
  690. uni.hideLoading()
  691. console.error('加载信息失败', e)
  692. uni.showToast({
  693. title: '网络错误',
  694. icon: 'none'
  695. })
  696. reject(e);
  697. }
  698. });
  699. },
  700. // 打开通用选择器
  701. async showPicker(title, data) {
  702. // 根据不同的title调用对应的请求方法
  703. if (title === '任务归属' || title === '费用分摊') {
  704. // 调用company()获取任务归属和费用分摊数据
  705. await this.company();
  706. data = this.companyData;
  707. } else if (title === '归属项目') {
  708. // 调用getAllData()获取归属项目数据
  709. await this.getAllData();
  710. data = this.companyList;
  711. console.log('归属项目数据:', data);
  712. } else if (title === '产品代码') {
  713. // 调用queryAllProduct()获取产品代码数据
  714. await this.queryAllProduct();
  715. data = this.productList;
  716. } else if (title === '任务类型') {
  717. // queryAllData()获取任务类型数据
  718. await this.queryAllData();
  719. // 使用处理后的taskTypeColumns作为数据
  720. data = this.taskTypeColumns;
  721. console.log('任务类型数据:', data);
  722. } else if (title === '归属类型') {
  723. // 归属类型数据已经在onLoad中获取
  724. data = this.belongTypeList;
  725. console.log('归属类型数据:', data);
  726. }
  727. // 处理任务归属和费用分摊数据,将deptName作为显示文本
  728. if ((title === '任务归属' || title === '费用分摊') && data && data.length > 0) {
  729. // 转换为picker需要的格式
  730. this.pickerData = [data.map(item => item.deptName)]
  731. // 保存原始数据,用于后续获取deptId
  732. this.originalCompanyData = data
  733. } else if (title === '归属项目' && data && data.length > 0) {
  734. // 处理归属项目数据,将projectName作为显示文本
  735. this.pickerData = [data.map(item => item.projectName)]
  736. // 保存原始数据,用于后续获取productId
  737. this.originalCompanyData = data
  738. } else if (title === '产品代码' && data && data.length > 0) {
  739. // 处理产品代码数据,将productName作为显示文本
  740. this.pickerData = [data.map(item => item.productName)]
  741. // 保存原始数据,用于后续获取productCode
  742. this.originalCompanyData = data
  743. } else if (title === '归属类型' && data && data.length > 0) {
  744. // 处理归属类型数据,将dictLabel作为显示文本
  745. this.pickerData = [data.map(item => item.dictLabel)]
  746. // 保存原始数据,用于后续获取dictType
  747. this.originalCompanyData = data
  748. } else {
  749. this.pickerData = data
  750. this.originalCompanyData = null
  751. }
  752. this.pickerTitle = title
  753. console.log('打开picker, pickerTitle:', this.pickerTitle);
  754. console.log('pickerData:', this.pickerData);
  755. this.showPickerVisible = true
  756. },
  757. // 通用选择器确认
  758. confirm(e) {
  759. console.log('confirm事件返回值:', e);
  760. console.log('pickerTitle:', this.pickerTitle);
  761. console.log('e.value:', e.value);
  762. if (e.value && e.value.length > 0) {
  763. if (this.pickerTitle === '费用分摊') {
  764. // e.value[0]是选中的文本值(deptName)
  765. const selectedDeptStr = e.value[0];
  766. console.log('选中的费用分摊文本:', selectedDeptStr);
  767. console.log('originalCompanyData:', this.originalCompanyData);
  768. // 从originalCompanyData中找到对应的项
  769. const selectedItem = this.originalCompanyData.find(item => item.deptName === selectedDeptStr);
  770. if (selectedItem) {
  771. // 保存deptId到表单(存储id值)
  772. this.formData.costShareId = selectedItem.deptId;
  773. console.log('设置formData.costShareId为:', selectedItem.deptId);
  774. } else {
  775. this.formData.costShareId = '';
  776. console.log('未找到对应的费用分摊');
  777. }
  778. } else if (this.pickerTitle === '任务类型') {
  779. // e.value[0]是选中的文本值(dictLabel)
  780. const selectedLabel = e.value[0];
  781. console.log('选中的任务类型文本:', selectedLabel);
  782. console.log('taskTypeOriginalData:', this.taskTypeOriginalData);
  783. // 从taskTypeOriginalData中找到对应的项
  784. const selectedType = this.taskTypeOriginalData.find(item => item.dictLabel === selectedLabel);
  785. if (selectedType) {
  786. this.formData.taskType = selectedType.dictValue;
  787. console.log('设置formData.taskType为:', selectedType.dictValue);
  788. } else {
  789. }
  790. } else if (this.pickerTitle === '任务归属' && this.originalCompanyData) {
  791. // e.value[0]是选中的文本值(deptName)
  792. const selectedDeptStr = e.value[0];
  793. console.log('选中的任务归属文本:', selectedDeptStr);
  794. console.log('originalCompanyData:', this.originalCompanyData);
  795. // 从originalCompanyData中找到对应的项
  796. const selectedItem = this.originalCompanyData.find(item => item.deptName === selectedDeptStr);
  797. if (selectedItem) {
  798. // 保存deptId到表单(存储id值)
  799. this.formData.deptId = selectedItem.deptId;
  800. console.log('设置formData.deptId为:', selectedItem.deptId);
  801. } else {
  802. }
  803. } else if (this.pickerTitle === '归属项目' && this.originalCompanyData) {
  804. // e.value[0]是选中的文本值(projectName)
  805. const selectedProjectName = e.value[0];
  806. console.log('选中的归属项目文本:', selectedProjectName);
  807. console.log('originalCompanyData:', this.originalCompanyData);
  808. // 从originalCompanyData中找到对应的项
  809. const selectedItem = this.originalCompanyData.find(item => item.projectName === selectedProjectName);
  810. if (selectedItem) {
  811. // 保存id到表单(存储id值)
  812. this.formData.projectId = selectedItem.id;
  813. // 保存productId到表单
  814. this.formData.productId = selectedItem.productId;
  815. console.log('设置formData.projectId为:', selectedItem.id);
  816. } else {
  817. }
  818. } else if (this.pickerTitle === '产品代码' && this.originalCompanyData) {
  819. // e.value[0]是选中的文本值(productName)
  820. const selectedProductName = e.value[0];
  821. console.log('选中的产品代码文本:', selectedProductName);
  822. console.log('originalCompanyData:', this.originalCompanyData);
  823. // 从originalCompanyData中找到对应的项
  824. const selectedItem = this.originalCompanyData.find(item => item.productName === selectedProductName);
  825. if (selectedItem) {
  826. // 保存id到表单
  827. this.formData.productId = selectedItem.id;
  828. // 保存id用于获取任务类型
  829. console.log('设置formData.productId为:', selectedItem.id);
  830. } else {
  831. }
  832. } else if (this.pickerTitle === '归属类型' && this.originalCompanyData) {
  833. // e.value[0]是选中的文本值(dictLabel)
  834. const selectedLabel = e.value[0];
  835. console.log('选中的归属类型文本:', selectedLabel);
  836. console.log('originalCompanyData:', this.originalCompanyData);
  837. // 从originalCompanyData中找到对应的项
  838. const selectedItem = this.originalCompanyData.find(item => item.dictLabel === selectedLabel);
  839. if (selectedItem) {
  840. // 保存dictValue到表单的belongType字段
  841. this.formData.belongType = selectedItem.dictValue;
  842. console.log('设置formData.belongType为:', selectedItem.dictValue);
  843. } else {
  844. console.log('未找到对应的归属类型');
  845. }
  846. }
  847. }
  848. this.showPickerVisible = false
  849. },
  850. // 通用选择器取消
  851. cancel() {
  852. this.showPickerVisible = false
  853. },
  854. // 下一步
  855. toNext() {
  856. // 表单验证
  857. if (!this.formData.deptId) {
  858. uni.showToast({
  859. title: '请选择任务归属',
  860. icon: 'none'
  861. })
  862. return
  863. }
  864. if (!this.formData.projectId) {
  865. uni.showToast({
  866. title: '请选择归属项目',
  867. icon: 'none'
  868. })
  869. return
  870. }
  871. if (!this.formData.productId) {
  872. uni.showToast({
  873. title: '请选择产品代码',
  874. icon: 'none'
  875. })
  876. return
  877. }
  878. if (!this.formData.costShareId) {
  879. uni.showToast({
  880. title: '请选择费用分摊',
  881. icon: 'none'
  882. })
  883. return
  884. }
  885. if (!this.formData.belongType) {
  886. uni.showToast({
  887. title: '请选择归属类型',
  888. icon: 'none'
  889. })
  890. return
  891. }
  892. if (!this.formData.taskType) {
  893. uni.showToast({
  894. title: '请选择任务类型',
  895. icon: 'none'
  896. })
  897. return
  898. }
  899. if (!this.formData.planStartTime) {
  900. uni.showToast({
  901. title: '请选择计划开始时间',
  902. icon: 'none'
  903. })
  904. return
  905. }
  906. if (!this.formData.planEndTime) {
  907. uni.showToast({
  908. title: '请选择计划结束时间',
  909. icon: 'none'
  910. })
  911. return
  912. }
  913. // 如果开启了任务备注,则备注为必填
  914. if (this.formData.addRemark && !this.formData.remark) {
  915. uni.showToast({
  916. title: '请输入任务备注',
  917. icon: 'none'
  918. })
  919. return
  920. }
  921. console.log('去编辑积分:', this.doctorId);
  922. console.log('去编辑积分formData:', this.formData);
  923. // 保存表单数据到本地存储,以便 editSelectCustomer.vue 页面使用
  924. uni.setStorageSync('fillTaskFormData', JSON.stringify(this.formData));
  925. uni.navigateTo({
  926. url: `/pages_task/editSelectCustomer?doctorId=${this.doctorId}`
  927. })
  928. },
  929. // 提交表单
  930. submit() {
  931. console.log('提交表单数据:', this.formData);
  932. // 这里可以添加表单验证逻辑
  933. // 然后调用接口提交数据
  934. uni.showToast({
  935. title: '提交成功',
  936. icon: 'success'
  937. });
  938. },
  939. // 开始时间选择确认
  940. onStartTimeConfirm(e) {
  941. this.formData.planStartTime = this.formatDateTime(e.value);
  942. this.showStartTimePicker = false;
  943. },
  944. // 结束时间选择确认
  945. onEndTimeConfirm(e) {
  946. this.formData.planEndTime = this.formatDateTime(e.value);
  947. this.showEndTimePicker = false;
  948. },
  949. // 格式化日期时间
  950. formatDateTime(timestamp) {
  951. const date = new Date(timestamp);
  952. const year = date.getFullYear();
  953. const month = String(date.getMonth() + 1).padStart(2, '0');
  954. const day = String(date.getDate()).padStart(2, '0');
  955. // const hours = String(date.getHours()).padStart(2, '0');
  956. // const minutes = String(date.getMinutes()).padStart(2, '0');
  957. // const seconds = String(date.getSeconds()).padStart(2, '0');
  958. // ${hours}:${minutes}:${seconds}
  959. return `${year}-${month}-${day}`;
  960. }
  961. }
  962. }
  963. </script>
  964. <style lang="scss" scoped>
  965. .column {
  966. flex-direction: column;
  967. }
  968. .baseline {
  969. align-items: baseline !important;
  970. }
  971. // 页面容器样式
  972. .container {
  973. min-height: 100vh;
  974. background: #F7F8FA;
  975. display: flex;
  976. flex-direction: column;
  977. position: relative;
  978. // 顶部渐变背景
  979. &::before {
  980. content: '';
  981. position: absolute;
  982. top: 0;
  983. left: 0;
  984. right: 0;
  985. width: 100%;
  986. height: 544rpx;
  987. background: linear-gradient(180deg, #E4EFFE 0%, rgba(228, 239, 254, 0) 100%);
  988. }
  989. // 滚动内容区
  990. .content {
  991. flex: 1;
  992. box-sizing: border-box;
  993. // 驳回提示
  994. .rejection-banner {
  995. display: flex;
  996. align-items: center;
  997. padding: 24rpx;
  998. background: #FF5030;
  999. color: #fff;
  1000. margin: 24rpx;
  1001. border-radius: 8rpx;
  1002. .rejection-icon {
  1003. width: 40rpx;
  1004. height: 40rpx;
  1005. border-radius: 50%;
  1006. background: rgba(255, 255, 255, 0.3);
  1007. display: flex;
  1008. align-items: center;
  1009. justify-content: center;
  1010. font-size: 24rpx;
  1011. margin-right: 16rpx;
  1012. }
  1013. .rejection-text {
  1014. flex: 1;
  1015. font-size: 28rpx;
  1016. line-height: 1.5;
  1017. }
  1018. }
  1019. // 表单区域
  1020. .form-section {
  1021. background: #fff;
  1022. margin: 20rpx;
  1023. border-radius: 24rpx;
  1024. padding: 32rpx;
  1025. // 表单项
  1026. .form-item {
  1027. display: flex;
  1028. justify-content: space-between;
  1029. align-items: center;
  1030. border-bottom: 1px solid #EBEDF0;
  1031. padding: 30rpx 0;
  1032. &:last-child {
  1033. border-bottom: 0;
  1034. }
  1035. // 表单标签
  1036. .form-label {
  1037. display: flex;
  1038. align-items: center;
  1039. font-size: 28rpx;
  1040. color: #333;
  1041. margin-bottom: 16rpx;
  1042. .required {
  1043. color: #CF3546;
  1044. margin-right: 4rpx;
  1045. }
  1046. }
  1047. // 纯文本展示
  1048. .txt {
  1049. font-size: 28rpx;
  1050. color: #333333;
  1051. }
  1052. // 输入框容器
  1053. .form-input {
  1054. flex: 1;
  1055. font-size: 28rpx;
  1056. color: #C8C9CC;
  1057. text-align: end;
  1058. &.placeholder {
  1059. color: #C8C9CC;
  1060. }
  1061. &.picker-input {
  1062. display: flex;
  1063. align-items: center;
  1064. justify-content: flex-end;
  1065. }
  1066. .icon {
  1067. width: 36rpx;
  1068. height: 36rpx;
  1069. }
  1070. }
  1071. // 单选组样式(嵌套到form-item里)
  1072. .radio-group {
  1073. display: flex;
  1074. gap: 40rpx;
  1075. .radio-item {
  1076. display: flex;
  1077. align-items: center;
  1078. font-size: 28rpx;
  1079. .radio-circle {
  1080. width: 36rpx;
  1081. height: 36rpx;
  1082. border-radius: 50%;
  1083. margin-right: 16rpx;
  1084. }
  1085. }
  1086. }
  1087. // 上传区域样式(嵌套到form-item里)
  1088. .upload-area {
  1089. position: relative;
  1090. width: 200rpx;
  1091. height: 120rpx;
  1092. border: 1rpx dashed #C8C9CC;
  1093. border-radius: 8rpx;
  1094. display: flex;
  1095. align-items: center;
  1096. justify-content: center;
  1097. .cover-image {
  1098. width: 100%;
  1099. height: 100%;
  1100. border-radius: 8rpx;
  1101. }
  1102. .upload-placeholder {
  1103. color: #C8C9CC;
  1104. font-size: 24rpx;
  1105. }
  1106. .delete-icon {
  1107. position: absolute;
  1108. top: -12rpx;
  1109. right: -12rpx;
  1110. width: 32rpx;
  1111. height: 32rpx;
  1112. background: #fff;
  1113. border-radius: 50%;
  1114. }
  1115. }
  1116. }
  1117. }
  1118. }
  1119. // 下一步按钮
  1120. .next-button {
  1121. text-align: center;
  1122. font-size: 32rpx;
  1123. color: #FFFFFF;
  1124. height: 88rpx;
  1125. line-height: 88rpx;
  1126. background: #388BFF;
  1127. border-radius: 200rpx;
  1128. margin: 32rpx;
  1129. }
  1130. }
  1131. // 弹窗样式
  1132. ::v-deep .u-popup__content {
  1133. border-radius: 40rpx 40rpx 0 0 !important;
  1134. }
  1135. .popup-content {
  1136. border-radius: 40rpx 40rpx 0rpx 0rpx;
  1137. height: 70vh;
  1138. background-color: #fff;
  1139. .popup-header {
  1140. padding: 40rpx 30rpx 20rpx;
  1141. text-align: center;
  1142. .close-icon {
  1143. width: 44rpx;
  1144. height: 44rpx;
  1145. position: absolute;
  1146. right: 32rpx;
  1147. }
  1148. flex-shrink: 0;
  1149. .title,
  1150. .popup-title {
  1151. font-size: 32rpx;
  1152. font-weight: 600;
  1153. color: #333;
  1154. }
  1155. }
  1156. .search-box {
  1157. display: flex;
  1158. align-items: center;
  1159. background: #F7F8FA;
  1160. border-radius: 38rpx;
  1161. padding: 16rpx 28rpx;
  1162. margin-bottom: 24rpx;
  1163. .icon {
  1164. width: 26rpx;
  1165. height: 26rpx;
  1166. margin-right: 10rpx;
  1167. }
  1168. }
  1169. .project-list {
  1170. height: calc(100% - 200rpx);
  1171. .project-item {
  1172. display: flex;
  1173. justify-content: space-between;
  1174. align-items: center;
  1175. padding: 28rpx 0;
  1176. font-size: 28rpx;
  1177. border-bottom: 1rpx solid #eee;
  1178. &:active {
  1179. background-color: #f9f9f9;
  1180. }
  1181. &.active {
  1182. .project-name {
  1183. font-weight: 500;
  1184. color: #388BFF;
  1185. }
  1186. .icon {
  1187. opacity: 1;
  1188. }
  1189. }
  1190. .project-name {
  1191. color: #333;
  1192. transition: all 0.2s ease;
  1193. }
  1194. .icon {
  1195. width: 36rpx;
  1196. height: 36rpx;
  1197. opacity: 0;
  1198. transition: opacity 0.2s ease;
  1199. }
  1200. }
  1201. }
  1202. .two-level-container {
  1203. display: flex;
  1204. flex: 1;
  1205. border-top: 1rpx solid #f5f5f5;
  1206. .primary-list {
  1207. width: 40%;
  1208. background-color: #f8f9fa;
  1209. .primary-item {
  1210. padding: 28rpx 20rpx;
  1211. background: #F2F3F5;
  1212. &:active {
  1213. background: #FFFFFF;
  1214. }
  1215. &.primary-active {
  1216. position: relative;
  1217. background-color: #fff;
  1218. &::before {
  1219. content: '';
  1220. position: absolute;
  1221. top: 50%;
  1222. left: 0;
  1223. transform: translateY(-50%);
  1224. width: 8rpx;
  1225. height: 32rpx;
  1226. background: #388BFF;
  1227. }
  1228. .primary-text {
  1229. font-weight: 500;
  1230. }
  1231. }
  1232. .primary-text {
  1233. font-size: 28rpx;
  1234. color: #666;
  1235. }
  1236. }
  1237. }
  1238. .secondary-list {
  1239. width: 60%;
  1240. padding: 0 20rpx;
  1241. .secondary-item {
  1242. display: flex;
  1243. justify-content: space-between;
  1244. align-items: center;
  1245. padding: 28rpx 10rpx;
  1246. font-size: 28rpx;
  1247. color: #333;
  1248. &.secondary-active {
  1249. font-weight: 500;
  1250. color: #388BFF;
  1251. }
  1252. }
  1253. }
  1254. }
  1255. .popup-footer {
  1256. padding: 20rpx 30rpx 40rpx;
  1257. background-color: #fff;
  1258. border-top: 1rpx solid #f5f5f5;
  1259. flex-shrink: 0;
  1260. .confirm-btn {
  1261. width: 100%;
  1262. height: 88rpx;
  1263. line-height: 88rpx;
  1264. background-color: #2979ff;
  1265. color: #fff;
  1266. font-size: 32rpx;
  1267. border-radius: 200rpx;
  1268. &:active {
  1269. opacity: 0.8;
  1270. }
  1271. }
  1272. }
  1273. }
  1274. // 暗黑模式适配
  1275. @media (prefers-color-scheme: dark) {
  1276. .popup-content {
  1277. background-color: #1e1e1e;
  1278. .popup-header {
  1279. .title,
  1280. .popup-title {
  1281. color: #fff;
  1282. }
  1283. }
  1284. .two-level-container {
  1285. .primary-list {
  1286. background-color: #2d2d2d;
  1287. border-right-color: #3d3d3d;
  1288. .primary-item {
  1289. border-bottom-color: #3d3d3d;
  1290. &:active {
  1291. background-color: #3d3d3d;
  1292. }
  1293. &.primary-active {
  1294. background-color: #3d3d3d;
  1295. .primary-text {
  1296. color: #2979ff;
  1297. }
  1298. }
  1299. .primary-text {
  1300. color: #ccc;
  1301. }
  1302. }
  1303. }
  1304. .secondary-list {
  1305. .secondary-item {
  1306. border-bottom-color: #3d3d3d;
  1307. &:active {
  1308. background-color: #3d3d3d;
  1309. }
  1310. &.secondary-active {
  1311. background-color: #2d2d2d;
  1312. }
  1313. .secondary-text {
  1314. color: #fff;
  1315. }
  1316. }
  1317. }
  1318. }
  1319. .popup-footer {
  1320. background-color: #1e1e1e;
  1321. border-top-color: #3d3d3d;
  1322. }
  1323. }
  1324. }
  1325. </style>