Home.vue 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
  1. <template>
  2. <div>
  3. <common ref="common" @asynCallBack="asynCallBack"></common>
  4. <top-header :pageTitle="pageTitle" headerClass="vongi-bar" :leftShow="false"></top-header>
  5. <div class="mui-content margin49">
  6. <div class="vongi-index">
  7. <div class="vongi-index-top">
  8. <div class="mui-media-object mui-pull-left">
  9. <img :src="person_data?person_data.faceImageUrl:''">
  10. </div>
  11. <div class="mui-media-body">
  12. <h3 v-text="person_data?person_data.name:''"></h3>
  13. <p class='mui-ellipsis' v-text="person_popedom?(person_popedom.job?person_popedom.job:person_popedom.personRoleName):''"></p>
  14. </div>
  15. <a class="mui-pull-right" @click="selectRole">切换身份<span class="mui-icon iconfont icon-jiaohuan"></span></a>
  16. </div>
  17. </div>
  18. <div class="vongi-icons">
  19. <div class="vongi-index">
  20. <ul class="mui-table-view mui-grid-view mui-grid-9 vongi-grid-head">
  21. <li v-for="(item,index) in common_menu_list" :class="'mui-table-view-cell mui-media mui-col-xs-3 '+(item.iconRoute?'':'kfz')">
  22. <router-link :to="{name:item.iconRoute,query:item.iconParam}">
  23. <img :src="requirePic(item.iconCommonPic)" />
  24. <div class="mui-media-body" v-text="item.iconName"></div>
  25. </router-link>
  26. </li>
  27. </ul>
  28. </div>
  29. <ul class="mui-table-view mui-grid-view mui-grid-9">
  30. <li v-for="(item,index) in menu_list" :class="'mui-table-view-cell mui-media mui-col-xs-3 '+(item.iconRoute?'':'kfz')">
  31. <router-link :to="{name:item.iconRoute,query:item.iconParam}">
  32. <img :src="requirePic(item.iconPic)" />
  33. <div class="mui-media-body" v-text="item.iconName"></div>
  34. </router-link>
  35. </li>
  36. <li class="mui-table-view-cell mui-media mui-col-xs-3">
  37. <router-link :to="{name:'MasterAllFun'}">
  38. <img src="~$project/assets/img/cicon30.png" />
  39. <div class="mui-media-body">全部</div>
  40. </router-link>
  41. </li>
  42. </ul>
  43. </div>
  44. <div class="vongi-index-floor">
  45. <h4 class="vongi-floor-title">功能推荐区</h4>
  46. <div class="vongi-index-inter flew-sp">
  47. <div class="mui-col-xs-6">
  48. <router-link :to="{name:'MasterMineEditInfo'}" class="vongi-floor-padded">
  49. <div class="mui-media-body">
  50. <h4 class="mui-ellipsis">关联健康码</h4>
  51. <p class="mui-ellipsis">出行更便捷</p>
  52. </div>
  53. <img class="mui-media-object mui-pull-right" src="~$project/assets/img/cicon15.png" width="54" />
  54. </router-link>
  55. </div>
  56. <div class="mui-col-xs-6">
  57. <router-link :to="{name:'MasterMineEditInfo'}" class="vongi-floor-padded">
  58. <div class="mui-media-body">
  59. <h4 class="mui-ellipsis">问题反馈</h4>
  60. <p class="mui-ellipsis">感谢您的发声</p>
  61. </div>
  62. <img class="mui-media-object mui-pull-right" src="~$project/assets/img/cicon18.png" width="54" />
  63. </router-link>
  64. </div>
  65. <div v-if="noticeList.length" class="mui-col-xs-12">
  66. <div class="vongi-floor-padded">
  67. <router-link :to="{name:'CommonNotice',query:{type:1}}" v-for="(item,index) in noticeList" :key="index" :class="'text-list '+(item.readStatus?'':'red-after')">
  68. <h5 class="mui-ellipsis" v-text="item.title"></h5><span v-text="item.date"></span>
  69. </router-link>
  70. </div>
  71. <router-link :to="{name:'CommonNotice',query:{type:1}}" class="vongi-link"><span class="mui-icon mui-icon-forward"></span></router-link>
  72. </div>
  73. <div class="mui-col-xs-12">
  74. <div id="slider" class="mui-slider">
  75. <div class="mui-slider-group">
  76. <!-- 第一张 -->
  77. <div class="mui-slider-item">
  78. <a href="javascript:void(0)">
  79. <img src="~$project/assets/img/02.jpg">
  80. </a>
  81. </div>
  82. <!-- 第二张 -->
  83. <div class="mui-slider-item">
  84. <a href="javascript:void(0)">
  85. <img src="~$project/assets/img/02.jpg">
  86. </a>
  87. </div>
  88. </div>
  89. <div class="mui-slider-indicator">
  90. <div class="mui-indicator mui-active"></div>
  91. <div class="mui-indicator"></div>
  92. </div>
  93. </div>
  94. </div>
  95. </div>
  96. </div>
  97. <div class="vongi-index-floor kfz">
  98. <h4 class="vongi-floor-title">优品推荐</h4>
  99. <div class="vongi-index-inter flew-sp">
  100. <div class="mui-col-xs-12">
  101. <ul class="mui-table-view mui-grid-view mui-grid-9 vongi-floor-padded">
  102. <li class="mui-table-view-cell mui-media mui-col-xs-4">
  103. <a href="javascript:void(0)">
  104. <div class="vongi-shop-img"><img src="~$project/assets/img/01.png" width="100%" /></div>
  105. <div class="mui-media-body">老人防丢手环</div>
  106. <div class="mui-media-body color-yellow">¥299.0</div>
  107. </a>
  108. </li>
  109. <li class="mui-table-view-cell mui-media mui-col-xs-4">
  110. <a href="javascript:void(0)">
  111. <div class="vongi-shop-img"><img src="~$project/assets/img/01.png" width="100%" /></div>
  112. <div class="mui-media-body">老人防丢手环</div>
  113. <div class="mui-media-body color-yellow">¥299.0</div>
  114. </a>
  115. </li>
  116. <li class="mui-table-view-cell mui-media mui-col-xs-4">
  117. <a href="javascript:void(0)">
  118. <div class="vongi-shop-img"><img src="~$project/assets/img/01.png" width="100%" /></div>
  119. <div class="mui-media-body">老人防丢手环</div>
  120. <div class="mui-media-body color-yellow">¥299.0</div>
  121. </a>
  122. </li>
  123. </ul>
  124. </div>
  125. </div>
  126. </div>
  127. </div>
  128. <nav-menu :router="[{name:'Master'},{name:'MasterMineMessage'},{name:'MasterMineCenter'}]"></nav-menu>
  129. <loading :visible="isLoading"></loading>
  130. </div>
  131. </template>
  132. <script>
  133. require('$project/assets/js/mui.picker.min.js');
  134. import * as API_Notice from '@/apis/Common/notice'
  135. import * as API_User from '$project/apis/user'
  136. import Common from '$project/components/Common.vue'
  137. import Loading from '$project/components/Loading.vue'
  138. import TopHeader from '$project/components/TopHeader.vue'
  139. import NavMenu from '@/components/NavMenu.vue'
  140. import {
  141. mapGetters,
  142. mapMutations
  143. } from 'vuex'
  144. export default {
  145. name: 'Master',
  146. components: {
  147. Common,
  148. Loading,
  149. TopHeader,
  150. NavMenu
  151. },
  152. data() {
  153. return {
  154. isLoading: false,
  155. roleList: [],
  156. noticeList: [],
  157. }
  158. },
  159. created() {},
  160. methods: {
  161. //获取用户角色列表
  162. getRoleList() {
  163. this.isLoading = true;
  164. API_User.getRoleList().then(response => {
  165. this.isLoading = false;
  166. this.roleList = response.list;
  167. }).catch(error => {
  168. this.isLoading = false;
  169. mui.toast(error);
  170. })
  171. },
  172. //选择角色
  173. selectRole() {
  174. var roleList = [];
  175. for (var i = 0; i < this.roleList.length; i++) {
  176. var preName = this.person_popedom.personRoleName == this.roleList[i]['personRoleName'] ? '(当前)' : '';
  177. roleList.push({
  178. value: this.roleList[i]['id'],
  179. text: preName + this.roleList[i]['companyName'] + ' ' + this.roleList[i]['personRoleName'],
  180. })
  181. }
  182. var _this = this;
  183. var picker = new mui.PopPicker();
  184. picker.setData(roleList);
  185. picker.show(function(selectItems) {
  186. _this.switchRole(selectItems[0].value);
  187. })
  188. },
  189. //切换角色
  190. switchRole(id) {
  191. this.isLoading = true;
  192. API_User.exchangePopedom({
  193. id: id
  194. }).then(response => {
  195. this.isLoading = false;
  196. this.$refs.common.getDataByOpenId();
  197. }).catch(error => {
  198. this.isLoading = false;
  199. mui.toast(error);
  200. })
  201. },
  202. //预读取通知消息
  203. prefetchNotice() {
  204. this.isLoading = true;
  205. API_Notice.prefetch().then(response => {
  206. this.isLoading = false;
  207. this.getLastNotice();
  208. }).catch(error => {
  209. this.isLoading = false;
  210. mui.toast(error);
  211. })
  212. },
  213. //获取最新二条通知消息
  214. getLastNotice() {
  215. this.isLoading = true;
  216. API_Notice.getTopList({
  217. type: 1,
  218. limit: 2,
  219. excludeMessageId: ''
  220. }).then(response => {
  221. this.noticeList = response;
  222. this.isLoading = false;
  223. }).catch(error => {
  224. this.isLoading = false;
  225. mui.toast(error);
  226. })
  227. },
  228. //引入图片
  229. requirePic(file) {
  230. if (file) {
  231. return require('$project/assets/img/' + file);
  232. }
  233. },
  234. asynCallBack() {
  235. //获取用户角色列表
  236. this.getRoleList();
  237. //获取最新二条通知消息
  238. this.prefetchNotice();
  239. },
  240. },
  241. mounted() {
  242. var gallery = mui('.mui-slider');
  243. var slider = gallery.slider({
  244. interval: 2000, //自动轮播周期,若为0则不自动播放,默认为0;
  245. bounce: true //是否启用回弹
  246. });
  247. },
  248. destroyed() {
  249. },
  250. computed: {
  251. pageTitle: {
  252. // getter
  253. get: function() {
  254. return this.person_data ? this.person_data.companyName : '小鹏管家';
  255. },
  256. // setter
  257. set: function(newValue) {
  258. console.log(newValue)
  259. }
  260. },
  261. ...mapGetters({
  262. openId: 'wx_openid',
  263. token: 'token',
  264. person_data: 'person_data',
  265. person_popedom: 'person_popedom',
  266. menu_list: 'menu_list',
  267. common_menu_list: 'common_menu_list',
  268. })
  269. }
  270. }
  271. </script>
  272. <style scoped src="$project/assets/css/xpgj.css"></style>
  273. <style src="$project/assets/css/iconfont.css"></style>
  274. <style src="$project/assets/css/mui.picker.min.css"></style>
  275. <style scoped>
  276. .red-after:after {
  277. background: red;
  278. }
  279. </style>