康复游戏入口界面

配置相关

训练部位

export const TRAIN_SITE_LIST = [
  { id: '1', name: 'UpperLimb', text: '上肢训练', order: 1 },
  { id: '2', name: 'Hand', text: '手部训练', order: 2 },
  { id: '3', name: 'LowerLimb', text: '下肢训练', order: 3 },
];

游戏列表

// 游戏列表
export const GAME_LIST = [
  { id: '1', name: 'balloon', text: '踩气球', order: 1, site: 'LowerLimb' },
  { id: '2', name: 'tomato', text: '番茄炒蛋', order: 2, site: 'Hand' },
  { id: '3', name: 'hurdle', text: '跨栏', order: 3, site: 'LowerLimb' },
  { id: '4', name: 'basketball', text: '投篮', order: 4, site: 'UpperLimb' },
  { id: '5', name: 'bird', text: '鸟妈妈回家', order: 5, site: 'UpperLimb' },
  { id: '6', name: 'bomb', text: '太空战机', order: 6, site: 'Hand' },
  { id: '7', name: 'football', text: '踢足球', order: 7, site: 'LowerLimb' },
  { id: '8', name: 'apple', text: '摘苹果', order: 8, site: 'Hand' },
  { id: '9', name: 'orange-juice', text: '挤橙汁', order: 9, site: 'Hand' },
  { id: '10', name: 'golf', text: '高尔夫', order: 10, site: 'UpperLimb' },
  { id: '11', name: 'fish', text: '大鱼吃小鱼', order: 11, site: 'Hand' },
  { id: '12', name: 'radish', text: '拔萝卜', order: 12, site: 'UpperLimb' },
];

使用方法

store里记录了selectedSite 当前训练部位的name值 getters里根据selectedSite的值计算返回当前训练部位对应的游戏列表 点击训练部位 更新selectedSite的值

export default createStore({
  state: { selectedSite: '' },
  getters: {
    /**
     * 当前选中的训练部位下的 游戏列表
     * @param {string} selectedSite
     * @returns {{site: string, name: string, id: string, text: string, order: number}[]|*[]}
     */
    selectedGames({ selectedSite }) {
      return getGamesBySite(selectedSite) || [];
    },
  },
  mutations: {
    /**
     * 设置选中的训练部位
     * @param state
     * @param {string} site
     */
    setSelectedSite(state, site) {
      state.selectedSite = site;
    },
  },
  actions: {},
});