plan-mixin.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. /**
  2. * 方案管理 mixin
  3. * 负责:方案列表加载、子方案选择、模式切换时刷新方案
  4. */
  5. import { getCareList, getCareDetail } from '@/utils/api/care.js'
  6. export default {
  7. data() {
  8. return {
  9. planList: [], // 当前模式下的方案列表
  10. selectedPlan: null, // 当前选中的方案 { id, name, description }
  11. isShowPlanDrawer: false, // 方案选择弹窗
  12. planLoading: false
  13. }
  14. },
  15. methods: {
  16. /**
  17. * 切换模式 - 覆盖原始changeMode,加入方案加载逻辑
  18. */
  19. changeMode(mode) {
  20. this.isShowDrawer2 = false
  21. if (this.modeType === mode) return
  22. this.modeType = mode
  23. // 切换模式时重置方案选择
  24. this.selectedPlan = null
  25. this.planList = []
  26. // 非休闲模式加载对应方案列表
  27. if (mode !== 0) {
  28. this.loadPlanList(mode)
  29. }
  30. // 停止音频(休闲模式专属)
  31. if (mode !== 0 && this._stopAudioOnModeChange) {
  32. this._stopAudioOnModeChange()
  33. }
  34. },
  35. /**
  36. * 加载指定模式的方案列表
  37. * @param {Number} mode - 1专业 2自定义 3专家
  38. */
  39. async loadPlanList(mode) {
  40. this.planLoading = true
  41. try {
  42. // modeType映射为后端模式标识
  43. const modeMap = {
  44. 1: 'PROFESSIONAL',
  45. 2: 'CUSTOM',
  46. 3: 'EXPERT'
  47. }
  48. const res = await getCareList({ modeType: modeMap[mode] || '' })
  49. if (res && res.records) {
  50. this.planList = res.records.map(item => ({
  51. id: item.id,
  52. name: item.title || item.name || '未命名方案',
  53. description: item.description || item.remark || '',
  54. steps: item.stepCount || item.steps || 0,
  55. duration: item.totalDuration || 0
  56. }))
  57. } else {
  58. this.planList = []
  59. }
  60. } catch (e) {
  61. console.error('加载方案列表失败', e)
  62. this.planList = []
  63. }
  64. this.planLoading = false
  65. },
  66. /** 打开方案选择弹窗 */
  67. showPlanDrawer() {
  68. if (this.planList.length === 0 && this.modeType !== 0) {
  69. this.loadPlanList(this.modeType)
  70. }
  71. this.isShowPlanDrawer = true
  72. },
  73. /** 选择方案 */
  74. selectPlan(plan) {
  75. this.selectedPlan = plan
  76. this.isShowPlanDrawer = false
  77. // 选中方案后,可在此触发方案数据加载到curCase
  78. this._applyPlanToCase(plan)
  79. },
  80. /**
  81. * 将方案数据应用到当前穴位配置
  82. * TODO: 后续对接方案详情接口,获取具体步骤和穴位坐标
  83. */
  84. async _applyPlanToCase(plan) {
  85. if (!plan || !plan.id) return
  86. try {
  87. const res = await getCareDetail(plan.id)
  88. if (res && res.steps) {
  89. this.curCase = res.steps.map(step => ({
  90. id: step.acupointId || step.id,
  91. time: step.duration || 15,
  92. _x: step.x || 0,
  93. _y: step.y || 0
  94. }))
  95. this.curCaseIndex = 0
  96. }
  97. } catch (e) {
  98. console.error('加载方案详情失败', e)
  99. }
  100. }
  101. }
  102. }