AllFun.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <template>
  2. <div id="app">
  3. <common ref="common" @asynCallBack="asynCallBack"></common>
  4. <top-header :pageTitle="pageTitle"></top-header>
  5. <div class="mui-content vongi-icons">
  6. <div class="vongi-all">
  7. <h2>常用服务</h2>
  8. <ul class="mui-table-view mui-grid-view mui-grid-9">
  9. <li v-for="(item,index) in menu_list" class="mui-table-view-cell mui-media mui-col-xs-3">
  10. <a v-if="item.iconUrl" @click="goto(item.iconUrl)">
  11. <img :src="requirePic(item.iconPic)" />
  12. <div class="mui-media-body" v-text="item.iconName"></div>
  13. </a>
  14. <router-link v-else :to="{name:item.iconRoute,query:item.iconParam}">
  15. <img :src="requirePic(item.iconPic)" />
  16. <div class="mui-media-body" v-text="item.iconName"></div>
  17. </router-link>
  18. </li>
  19. <li class="mui-table-view-cell mui-media mui-col-xs-3">
  20. <router-link :to="{name:'MasterEditFun'}">
  21. <img src="~$project/assets/img/icon_edit.png" />
  22. <div class="mui-media-body">编辑</div>
  23. </router-link>
  24. </li>
  25. </ul>
  26. </div>
  27. <div class="vongi-all">
  28. <h2>全部服务</h2>
  29. <div v-for="(iten,indey) in fun_list">
  30. <h4 v-text="iten.name"></h4>
  31. <ul class="mui-table-view mui-grid-view mui-grid-9">
  32. <li v-for="(item,index) in iten.list" :class="'mui-table-view-cell mui-media mui-col-xs-3 '+(item.iconRoute?'':'kfz')">
  33. <a v-if="item.iconUrl" @click="goto(item.iconUrl)">
  34. <img :src="requirePic(item.iconPic)" />
  35. <div class="mui-media-body" v-text="item.iconName"></div>
  36. </a>
  37. <!-- <router-link v-else :to="{name:item.iconRoute,query:item.iconParam}">
  38. <img :src="requirePic(item.iconPic)" />
  39. <div class="mui-media-body" v-text="item.iconName"></div>
  40. </router-link> -->
  41. <a v-if="!item.iconUrl"
  42. @click="goto2(item)"
  43. :to="{name:item.iconRoute,query:item.iconParam}">
  44. <img :src="requirePic(item.iconPic)" />
  45. <div class="mui-media-body" v-text="item.iconName"></div>
  46. </a>
  47. </li>
  48. </ul>
  49. </div>
  50. </div>
  51. </div>
  52. <loading :visible="isLoading"></loading>
  53. </div>
  54. </template>
  55. <script>
  56. import * as API_User from '$project/apis/user'
  57. import Common from '$project/components/Common.vue'
  58. import Loading from '$project/components/Loading.vue'
  59. import TopHeader from '$project/components/TopHeader.vue'
  60. import NavMenu from '@/components/NavMenu.vue'
  61. import {
  62. mapGetters,
  63. mapMutations
  64. } from 'vuex'
  65. export default {
  66. name: 'MasterAllFun',
  67. components: {
  68. Common,
  69. Loading,
  70. TopHeader,
  71. NavMenu
  72. },
  73. data() {
  74. return {
  75. isLoading: false,
  76. pageTitle: '全部服务',
  77. fun_list: [],
  78. }
  79. },
  80. created() {},
  81. methods: {
  82. goto2(item){
  83. //mui.toast("点击了"+item.iconName);
  84. this.$router.push({
  85. name: item.iconRoute,
  86. query:item.iconParam
  87. })
  88. },
  89. goto(url){
  90. window.location.href=url;
  91. },
  92. //引入图片
  93. requirePic(file) {
  94. if (file) {
  95. if (file.indexOf('http') == 0) {
  96. return file;
  97. } else {
  98. return require('$project/assets/img/' + file);
  99. }
  100. }
  101. },
  102. //获取所有功能列表
  103. getAllFunList() {
  104. this.isLoading = true;
  105. API_User.getAllFunList().then(response => {
  106. this.isLoading = false;
  107. this.fun_list = response.allIcon;
  108. }).catch(error => {
  109. mui.toast(error);
  110. })
  111. },
  112. asynCallBack() {
  113. },
  114. },
  115. mounted() {
  116. this.getAllFunList();
  117. },
  118. destroyed() {
  119. },
  120. computed: {
  121. ...mapGetters({
  122. openId: 'wx_openid',
  123. token: 'token',
  124. person_data: 'person_data',
  125. person_popedom: 'person_popedom',
  126. menu_list: 'menu_list'
  127. })
  128. }
  129. }
  130. </script>
  131. <style src="$project/assets/css/iconfont.css"></style>
  132. <style scoped src="$project/assets/css/xpgj.css"></style>
  133. <style>
  134. </style>