Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

service.vue 5.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  1. <template>
  2. <view class="wrapper">
  3. <navBar title="九州ETC"></navBar>
  4. <view class="search-box">
  5. <image :src="`${$imgUrl}service/icon-search.png`" class="icon"></image>
  6. <input class="search" placeholder="请输入业务名称" />
  7. </view>
  8. <view class="content">
  9. <view class="left">
  10. <view v-for="(item,index) in menu.list" :key="index"
  11. :class="activeTab === item.name ? 'menu active' : 'menu'" @click="tabHandle(item.name,index)">
  12. <view :class="activeTab === item.name ? 'border on' : 'border'"></view>
  13. <view class="menu-text">{{item.name}}</view>
  14. </view>
  15. </view>
  16. <view class="right">
  17. <view class="right-content">
  18. <block v-if="menu.list.length >0">
  19. <view v-for="(item,index) in menu.list[tableSelectIndex].children" :key='index' class="item-box" @click="toNext(item.link)">
  20. <view class="item bg-blue" :style="{ '--background': bgBlue }">
  21. <image :src="`${$imgUrl}${item.iconPath}`" />
  22. <!-- <image :src="`${item.iconPath}`" /> -->
  23. </view>
  24. <view class="text">{{item.name}}</view>
  25. </view>
  26. <!-- <view class="item-box" @click="toNext(`/subpackage/after-sale/account-recharge/login`)">
  27. <view class="item bg-blue" :style="{ '--background': bgBlue }">
  28. </view>
  29. <view class="text">单位账户充值</view>
  30. </view> -->
  31. </block>
  32. </view>
  33. </view>
  34. </view>
  35. </view>
  36. </template>
  37. <script lang="ts" setup>
  38. import navBar from "@/components/nav-bar/nav-bar.vue";
  39. import {
  40. ref,
  41. reactive,
  42. } from "vue";
  43. import {
  44. onLoad
  45. } from "@dcloudio/uni-app";
  46. import {
  47. fileURL
  48. } from "@/datas/fileURL.js";
  49. import {
  50. msg
  51. } from "@/utils/utils";
  52. import {
  53. queryMenuConfig
  54. } from "@/utils/network/api.js";
  55. import {
  56. request
  57. } from "@/utils/network/request.js";
  58. import {
  59. getItem,
  60. StorageKeys,
  61. } from "@/utils/storage";
  62. import {
  63. stringToJson
  64. } from "@/utils/network/encryption";
  65. const bgOrange = `url(${fileURL}image/service/bg-orange.png) center center no-repeat`;
  66. const bgBlue = `url(${fileURL}image/service/bg-blue.png) center center no-repeat`;
  67. const activeTab = ref("业务服务");
  68. const tableSelectIndex = ref(0);
  69. // 切换
  70. function tabHandle(val, index) {
  71. activeTab.value = val;
  72. tableSelectIndex.value = index
  73. console.log(tableSelectIndex.value)
  74. }
  75. const menu = reactive({
  76. list: []
  77. });
  78. onLoad(() => {
  79. queryMenuConfigAction().then((val : any) => {
  80. menu.list = val.menuList??[]
  81. })
  82. });
  83. const queryMenuConfigAction = () => {
  84. var data = {
  85. openId: getItem(StorageKeys.OpenId),
  86. systemType: '6',
  87. loginSource: '69af303ba2eb4608a099163f0d2a5dbd'
  88. };
  89. const options = {
  90. type: 2,
  91. data: data,
  92. method: "POST",
  93. showLoading: true,
  94. };
  95. return new Promise(async (resolve, reject) => {
  96. const res = await request(queryMenuConfig, options);
  97. const data = stringToJson(res.bizContent);
  98. console.log("data",data.menuList)
  99. resolve(data);
  100. }).catch((error) => {
  101. reject(error);
  102. });
  103. }
  104. function toNext(url) {
  105. uni.navigateTo({
  106. url: url,
  107. });
  108. }
  109. </script>
  110. <style>
  111. page {
  112. height: 100%;
  113. }
  114. .wrapper {
  115. display: flex;
  116. background: linear-gradient(to left, #43a1e0 0%, #13e7c1 100%);
  117. flex-direction: column;
  118. height: 100%;
  119. }
  120. .search-box {
  121. margin: 50rpx 40rpx;
  122. height: 72rpx;
  123. border-radius: 36rpx;
  124. background: #f7f7f7;
  125. display: flex;
  126. justify-content: center;
  127. align-items: center;
  128. }
  129. .search-box .icon {
  130. width: 48rpx;
  131. height: 48rpx;
  132. margin: 0 20rpx;
  133. }
  134. .search-box .search {
  135. flex: 1;
  136. margin-right: 20rpx;
  137. height: 100%;
  138. padding: 0 10rpx;
  139. font-size: 28rpx;
  140. color: #00b38b;
  141. }
  142. .content {
  143. display: flex;
  144. flex: 1;
  145. flex-grow: 1;
  146. background: #fff;
  147. border-radius: 30rpx 30rpx 0 0;
  148. padding-top: 40rpx;
  149. }
  150. .left {
  151. width: 180rpx;
  152. border-right: 1px solid #dcdcdc;
  153. margin-right: 29rpx;
  154. }
  155. .left .menu-text {
  156. font-size: 26rpx;
  157. color: #666666;
  158. width: 120rpx;
  159. }
  160. .left .menu {
  161. padding-left: 15rpx;
  162. display: flex;
  163. align-items: center;
  164. margin: 20rpx 0 60rpx 0;
  165. }
  166. .left .active .menu-text {
  167. font-weight: bold;
  168. color: #00b38b;
  169. font-size: 28rpx;
  170. line-height: 32rpx;
  171. }
  172. .left .border {
  173. width: 9rpx;
  174. height: 26rpx;
  175. border-radius: 4rpx;
  176. margin-right: 20rpx;
  177. }
  178. .left .on {
  179. background: linear-gradient(0deg, #43a1e0 0%, #13e7c1 100%);
  180. font-size: 28rpx;
  181. }
  182. .right {
  183. flex: 1;
  184. }
  185. .right-content {
  186. display: flex;
  187. flex-wrap: wrap;
  188. }
  189. .right .item-box {
  190. display: flex;
  191. flex-direction: column;
  192. justify-content: center;
  193. align-items: center;
  194. margin-right: 30rpx;
  195. margin-bottom: 39rpx;
  196. }
  197. .item {
  198. width: 105rpx;
  199. height: 105rpx;
  200. display: flex;
  201. justify-content: center;
  202. align-items: center;
  203. border-radius: 20rpx;
  204. }
  205. .item image {
  206. width: 64rpx;
  207. height: 64rpx;
  208. }
  209. .right .text {
  210. width: 105rpx;
  211. font-size: 22rpx;
  212. text-align: center;
  213. height: 60rpx;
  214. display: flex;
  215. justify-content: center;
  216. align-items: center;
  217. margin-top: 19rpx;
  218. color: #666666;
  219. }
  220. .bg-blue {
  221. background: var(--background);
  222. }
  223. .bg-orange {
  224. background: var(--background);
  225. }
  226. .right .text-orange {
  227. color: #fd8362;
  228. }
  229. </style>