index.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
  1. <template>
  2. <view>
  3. <view class="top-nav">
  4. <view class="l">
  5. <block v-if="isLogin">
  6. <image class="user-img" src="../../static/user.png"></image>
  7. <view class="l-r">
  8. <text class="u-name">{{userName}}</text>
  9. <text class="c-name" v-if="customerId!=='1'">{{companyName}}</text>
  10. </view>
  11. </block>
  12. <block v-else>
  13. <view class="login-btn" @click="toLogin">登录</view>
  14. </block>
  15. </view>
  16. <view class="r" v-if="isLogin">
  17. <view class="l-out" @click="exitFn">
  18. 退出登录
  19. </view>
  20. </view>
  21. </view>
  22. <view class="top-bg"></view>
  23. <view class="top">
  24. <text class="title">场站管理系统</text>
  25. </view>
  26. <view class="item-box">
  27. <view class="item" hover-class="hover-class"
  28. v-for="(indexItem,index) in indexItemList" :key="index"
  29. @click="navTo(indexItem)" v-show="indexItem.show">
  30. <image class="icon" :src="indexItem.icon"></image>
  31. <view class="text">
  32. <text v-if="indexItem.text=='企业管理'&&customerId!='1'">信息管理</text>
  33. <text v-else>{{indexItem.text}}</text>
  34. </view>
  35. </view>
  36. </view>
  37. <view class="qrcode">
  38. <image class="qrcode" :src="qrcoderlc"></image>
  39. <text class="text">长按二维码保存分享</text>
  40. </view>
  41. <view style="text-align: center;font-size: 23rpx;">
  42. <a href="https://beian.miit.gov.cn/" target="_blank">桂ICP备12007573号-1</a>
  43. </view>
  44. </view>
  45. </template>
  46. <script>
  47. export default {
  48. data() {
  49. return {
  50. isLogin: false, //是否登录状态
  51. userName: '',
  52. companyName: '',
  53. customerId:'',
  54. qrcoderlc: '../../static/qrcode.png',
  55. indexItemList: []
  56. }
  57. },
  58. onShow() {
  59. this.getStoreInfo();
  60. this.setList();
  61. },
  62. onBackPress() {
  63. return true;
  64. },
  65. methods: {
  66. setList(){
  67. this.indexItemList=[
  68. {
  69. auth: false,
  70. icon: '../../static/home-icon-01.png',
  71. text: '企业注册',
  72. url: '/pages/enterprise-reg/enterprise-reg',
  73. show:uni.getStorageSync('info')?false:true
  74. },
  75. // {
  76. // auth: true,
  77. // icon: '../../static/home-icon-02.png',
  78. // text: '业务录入',
  79. // url: '/pages/business-entering/business-entering',
  80. // show: uni.getStorageSync('perList').indexOf('tb-business-add')!==-1
  81. // },
  82. {
  83. auth: true,
  84. icon: '../../static/home-icon-03.png',
  85. text: '业务订单',
  86. url: '/pages/business-order/business-order',
  87. show:true
  88. },
  89. {
  90. auth: true,
  91. icon: '../../static/home-icon-04.png',
  92. text: '企业管理',
  93. url: '/pages/customer-management/customer-list',
  94. show:true
  95. },
  96. {
  97. auth: true,
  98. icon: '../../static/home-icon-05.png',
  99. text: '出入记录',
  100. url: '/pages/inout-record/inout-record',
  101. show:true
  102. },
  103. {
  104. auth: true,
  105. icon: '../../static/home-icon-07.jpg',
  106. text: '申报信息录入',
  107. url: '/pages/declare/add',
  108. show:true
  109. },
  110. {
  111. auth: true,
  112. icon: '../../static/home-icon-06.jpg',
  113. text: '消杀申报',
  114. url: '/pages/disinfect/addDisinfect',
  115. show:true
  116. },
  117. {
  118. auth: true,
  119. icon: '../../static/home-icon-06.jpg',
  120. text: '账户充值',
  121. url: '/pages/account/index',
  122. show:true
  123. },
  124. ]
  125. },
  126. getStoreInfo() {
  127. let info = uni.getStorageSync('info');
  128. if(info){
  129. this.isLogin=true;
  130. this.userName=info.name;
  131. this.customerId=info.customerId;
  132. }
  133. },
  134. toLogin(){
  135. this.$common.to('/pages/login/login')
  136. },
  137. exitFn(){
  138. uni.removeStorageSync('token')
  139. uni.removeStorageSync('info')
  140. this.isLogin=false;
  141. this.setList();
  142. },
  143. navTo(item) {
  144. let auth = item.auth;
  145. let token = uni.getStorageSync('token');
  146. if (!auth||token) {
  147. this.$common.to(item.url)
  148. } else {
  149. this.$common.to('/pages/login/login')
  150. }
  151. }
  152. }
  153. }
  154. </script>
  155. <style lang="scss">
  156. page {
  157. background-color: #fff;
  158. }
  159. .top-nav {
  160. position: fixed;
  161. top: 0;
  162. left: 0;
  163. right: 0;
  164. z-index: 999;
  165. display: flex;
  166. align-items: center;
  167. justify-content: space-between;
  168. padding: 20rpx 0;
  169. background-color: #0080ff;
  170. .l {
  171. display: flex;
  172. align-items: center;
  173. .login-btn {
  174. border: 1rpx solid #359aff;
  175. border-radius: 8rpx;
  176. color: #fff;
  177. padding: 10rpx 20rpx;
  178. font-size: 28rpx;
  179. margin-left: 30rpx;
  180. }
  181. .user-img {
  182. width: 80rpx;
  183. height: 80rpx;
  184. border-radius: 50%;
  185. margin-left: 30rpx;
  186. margin: 20rpx;
  187. }
  188. .l-r {
  189. display: flex;
  190. flex-direction: column;
  191. .u-name {
  192. font-size: 30rpx;
  193. color: #fff;
  194. font-weight: bold;
  195. }
  196. .c-name {
  197. font-size: 24rpx;
  198. color: #fff;
  199. }
  200. }
  201. }
  202. .r {
  203. display: flex;
  204. align-items: center;
  205. .l-out {
  206. border: 1rpx solid #359aff;
  207. border-radius: 8rpx;
  208. color: #c8e4ff;
  209. padding: 10rpx 20rpx;
  210. font-size: 28rpx;
  211. margin-right: 30rpx;
  212. }
  213. }
  214. }
  215. .top-bg {
  216. position: relative;
  217. top: 0;
  218. left: 0;
  219. right: 0;
  220. height: 400rpx;
  221. background-color: #0080ff;
  222. border-radius: 0 0 20rpx 20rpx;
  223. }
  224. .top {
  225. display: flex;
  226. width: 100%;
  227. align-items: center;
  228. justify-content: center;
  229. margin: 60rpx 0;
  230. margin-top: -400rpx;
  231. position: relative;
  232. z-index: 2;
  233. .title {
  234. font-size: 50rpx;
  235. font-weight: bold;
  236. color: #fff;
  237. }
  238. }
  239. .item-box {
  240. display: flex;
  241. flex-wrap: wrap;
  242. align-content: flex-start;
  243. padding: 40rpx;
  244. box-sizing: border-box;
  245. background-color: #fff;
  246. margin: 0 30rpx;
  247. border-radius: 20rpx;
  248. position: relative;
  249. z-index: 2;
  250. //height: calc(100vh - 170rpx - 500rpx);
  251. box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.03);
  252. .item {
  253. width: 33.333%;
  254. display: flex;
  255. flex-direction: column;
  256. align-items: center;
  257. justify-content: center;
  258. padding: 40rpx 0;
  259. .icon {
  260. width: 90rpx;
  261. height: 90rpx;
  262. }
  263. .text {
  264. font-size: 28rpx;
  265. color: #191919;
  266. margin-top: 20rpx;
  267. }
  268. }
  269. }
  270. .qrcode {
  271. display: flex;
  272. width: 100%;
  273. flex-direction: column;
  274. align-items: center;
  275. justify-content: center;
  276. margin: 30rpx 0;
  277. .qrcode {
  278. width: 350rpx;
  279. height: 350rpx;
  280. border: 1px solid #191919;
  281. }
  282. .text {
  283. color: #191919;
  284. font-size: 28rpx;
  285. margin-top: 5rpx;
  286. }
  287. }
  288. </style>