You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

select-card.vue 2.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <template>
  2. <view class="selectCar-box">
  3. <view v-if="state.cards.length>0" @click="choose(i,item)" class="item" v-for="(item,i) in state.cards" :key="i">
  4. <view class="iten-left">
  5. <image :src="`${$imgUrl}card2.png`" mode=""></image>
  6. <text>{{item.cardId}}</text>
  7. </view>
  8. <view class="choose-item">
  9. <view class="active" v-if="flag==i">
  10. </view>
  11. </view>
  12. </view>
  13. <view v-else class="flex">
  14. 暂无该车辆卡信息
  15. </view>
  16. </view>
  17. </template>
  18. <script setup>
  19. import {
  20. reactive,
  21. ref
  22. } from "vue"
  23. import {
  24. navTo
  25. } from "@/utils/utils"
  26. import {
  27. onLoad,
  28. onShow
  29. } from "@dcloudio/uni-app";
  30. import {
  31. cardList,
  32. } from "@/utils/network/api.js";
  33. import {
  34. request
  35. } from "@/utils/network/request.js";
  36. import {
  37. msg
  38. } from "@/utils/utils";
  39. import {
  40. getItem,
  41. StorageKeys,
  42. setItem
  43. } from "@/utils/storage";
  44. import {
  45. stringToJson
  46. } from "@/utils/network/encryption";
  47. const state = reactive({
  48. cards: [],
  49. });
  50. onLoad((option) => {
  51. getCardList(option.vehicleId)
  52. });
  53. const flag = ref('0')
  54. const choose = (i, item) => {
  55. console.log(item, i)
  56. console.log(item.vehicleId);
  57. // getCardList(item.vehicleId)
  58. navTo(`/subpackage/personal-center/search/etcFlowingWater?cardId=${item.cardId}`)
  59. }
  60. const getCardList = (vehicleId) => {
  61. var data = {
  62. vehicleId: vehicleId
  63. };
  64. const options = {
  65. type: 2,
  66. data: data,
  67. method: "POST",
  68. showLoading: true,
  69. };
  70. request(cardList, options).then((res) => {
  71. console.log("152", stringToJson(res.bizContent))
  72. let result = stringToJson(res.bizContent);
  73. state.cards = result.data ? result.data : null;
  74. console.log(result.data);
  75. })
  76. }
  77. </script>
  78. <style>
  79. page {
  80. width: 100%;
  81. height: 100%;
  82. background-color: #EEF7F7;
  83. }
  84. </style>
  85. <style lang="scss" scoped>
  86. .flex {
  87. display: flex;
  88. justify-content: center;
  89. }
  90. .selectCar-box {
  91. // width: 100%;
  92. height: 100%;
  93. padding: 30rpx;
  94. .item {
  95. padding: 20rpx;
  96. display: flex;
  97. justify-content: space-between;
  98. align-items: center;
  99. height: 130rpx;
  100. background: #FFFFFF;
  101. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  102. border-radius: 20rpx;
  103. margin-bottom: 30rpx;
  104. .iten-left {
  105. display: flex;
  106. align-items: center;
  107. image {
  108. width: 150rpx;
  109. height: 120rpx;
  110. }
  111. text {
  112. margin-left: 20rpx;
  113. font-size: 32rpx;
  114. font-family: Noto Sans S Chinese;
  115. font-weight: 400;
  116. color: #333333;
  117. }
  118. }
  119. .choose-item {
  120. width: 44rpx;
  121. height: 44rpx;
  122. background: #FFFFFF;
  123. border: 2rpx solid #00B38B;
  124. border-radius: 50%;
  125. margin-right: 20rpx;
  126. display: flex;
  127. justify-content: center;
  128. align-items: center;
  129. box-sizing: content-box;
  130. }
  131. .active {
  132. width: 34rpx;
  133. height: 34rpx;
  134. background: #00B38B;
  135. border-radius: 50%;
  136. }
  137. }
  138. }
  139. </style>