index.uvue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. <template>
  2. <!-- #ifdef APP -->
  3. <scroll-view style="flex:1">
  4. <!-- #endif -->
  5. <view class="my-page">
  6. <!-- 标题栏 -->
  7. <view class=" uni-section">
  8. <view class=" uni-section-header">
  9. <view class=" uni-section-header__decoration line"/>
  10. <view class=" uni-section-header__content">
  11. <text style="font-size:14px;color:#333" class="distraction">用户管理</text>
  12. </view>
  13. </view>
  14. </view>
  15. <view>
  16. <view class = "name-label">
  17. 您好:{{currentName}}
  18. </view>
  19. </view>
  20. <!-- 宫格 -->
  21. <view class="grid-body">
  22. <view class="grid uni-row">
  23. <view class="grid-item" v-for="(item: Item, index: number) in items" :key="index" @click="enterItem(item)" >
  24. <!-- 您的网格项内容 -->
  25. <uni-icons class="my-icon" :type="item.iconType" size="40" :color="item.colorClass" ></uni-icons>
  26. <text class="text">{{ item.text }}</text>
  27. </view>
  28. </view>
  29. </view>
  30. </view>
  31. <!-- #ifdef APP -->
  32. </scroll-view>
  33. <!-- #endif -->
  34. </template>
  35. <script lang="uts">
  36. import {state} from '@/store';
  37. import { getCurrentUserSync } from '@/utils/auth.uts'
  38. type ImageItem={
  39. image:string
  40. }
  41. type Item={
  42. colorClass:string,
  43. iconType:string,
  44. path:string,
  45. text:string
  46. }
  47. export default {
  48. data() {
  49. let basic = [
  50. ,{colorClass: 'green', iconType: "wallet-filled", text: "修改用户信息",path:"/pages/mine/pwd/index" }
  51. ] as Item[];
  52. let isAdmin = state.roles.includes('admin') ? true : false;
  53. let adminItem = [ {colorClass: 'blue', iconType: "personadd-filled", text: "注册用户",path:"/pages/register" },
  54. {colorClass: 'blue', iconType: "staff-filled", text: "用户列表",path:"/pages/mine/person/PersonList" }] as Item [];
  55. let items = isAdmin ? basic.concat(adminItem) : basic;
  56. return {
  57. items: items as Item[],
  58. currentName: getCurrentUserSync(),
  59. }
  60. },
  61. onBackPress() {
  62. // 覆盖系统默认的返回行为,返回到指定页面
  63. uni.reLaunch({
  64. url: `/pages/work/index`,
  65. })
  66. // 返回true表示拦截默认返回行为
  67. return true
  68. },
  69. methods: {
  70. enterItem(e:Item) {
  71. if (e.path != null && e.path != "") {
  72. uni.navigateTo({
  73. url: e.path as string
  74. });
  75. } else {
  76. uni.showToast({
  77. title: '模块建设中~',
  78. icon: 'none'
  79. });
  80. }
  81. }
  82. }
  83. }
  84. </script>
  85. <style lang="scss" scope>
  86. /* #ifndef APP-NVUE */
  87. .my-page {
  88. display: flex;
  89. flex-direction: column;
  90. box-sizing: border-box;
  91. background-color: #fff;
  92. /* #ifndef APP-ANDROID */
  93. min-height: 100%;
  94. /* #endif */
  95. height: 100%;
  96. }
  97. /* #ifndef APP-ANDROID */
  98. view {
  99. font-size: 14px;
  100. line-height: inherit;
  101. }
  102. /* #endif */
  103. /* #endif */
  104. .text {
  105. text-align: center;
  106. font-size: 26rpx;
  107. margin-top: 10rpx;
  108. }
  109. .swiper {
  110. height: 300rpx;
  111. }
  112. .swiper-box {
  113. height: 150px;
  114. }
  115. .swiper-item {
  116. /* #ifndef APP-NVUE */
  117. display: flex;
  118. /* #endif */
  119. flex-direction: column;
  120. justify-content: center;
  121. align-items: center;
  122. color: #fff;
  123. height: 300rpx;
  124. line-height: 300rpx;
  125. }
  126. @media screen and (min-width: 500px) {
  127. .my-image {
  128. width: 100%;
  129. }
  130. }
  131. .grid-body {
  132. /* #ifndef APP-NVUE */
  133. display: flex;
  134. /* #endif */
  135. flex-wrap: wrap;
  136. justify-content: space-between;
  137. margin-top: 40rpx;
  138. }
  139. .grid-item {
  140. width: 32%;
  141. padding: 18px 15px;
  142. margin-bottom: 40rpx;
  143. border-radius: 20rpx;
  144. box-shadow: 0 8rpx 20rpx rgba(24, 144, 255, 0.15);
  145. display: flex;
  146. flex-direction: column;
  147. .my-icon{
  148. text-align: center;
  149. border-radius: 20rpx;
  150. }
  151. }
  152. .purple {color:#6366f1;}
  153. .blue {color:#2563eb; }
  154. .orange {color:#d97706;}
  155. .green {color:#059669;}
  156. .yellow {color:yellow;}
  157. $uni-primary: #2979ff !default;
  158. .uni-section {
  159. background-color: #fff;
  160. .uni-section-header {
  161. position: relative;
  162. /* #ifndef APP-NVUE */
  163. display: flex;
  164. /* #endif */
  165. flex-direction: row;
  166. align-items: center;
  167. padding: 12px 10px;
  168. font-weight: normal;
  169. &__decoration{
  170. margin-right: 6px;
  171. background-color: $uni-primary;
  172. &.line {
  173. width: 4px;
  174. height: 12px;
  175. border-radius: 10px;
  176. }
  177. &.circle {
  178. width: 8px;
  179. height: 8px;
  180. border-top-right-radius: 50px;
  181. border-top-left-radius: 50px;
  182. border-bottom-left-radius: 50px;
  183. border-bottom-right-radius: 50px;
  184. }
  185. &.square {
  186. width: 8px;
  187. height: 8px;
  188. }
  189. }
  190. &__content {
  191. /* #ifndef APP-NVUE */
  192. display: flex;
  193. /* #endif */
  194. flex-direction: column;
  195. flex: 1;
  196. color: #333;
  197. .distraction {
  198. flex-direction: row;
  199. align-items: center;
  200. }
  201. &-sub {
  202. margin-top: 2px;
  203. }
  204. }
  205. }
  206. }
  207. .name-label {
  208. margin-right: 20rpx;
  209. margin-left: auto;
  210. }
  211. </style>