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-car.vue 7.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. <template>
  2. <view class="selectCar-box">
  3. <view v-if="state.list.length > 0" @click="choose(i, item)" class="item" v-for="(item, i) in state.list"
  4. :key="i">
  5. <view class="iten-left">
  6. <image :src="`${$imgUrl}che.png`" mode="aspectFill"></image>
  7. <view class="message">
  8. <view>车牌号:{{ item.vehiclePlate }}</view>
  9. <view>车牌颜色:{{ getVehiclePlateColor(item.vehiclePlateColor) }}</view>
  10. <view v-if="item.cardId">卡号:{{ item.cardId }}</view>
  11. <view v-if="item.cardStatus">卡状态:{{getCodeName('CARD_STATE_TYPE',item.cardStatus)}}</view>
  12. <view v-if="item.obuId">签号:{{ item.obuId }}</view>
  13. <view v-if="item.obuStatus">签状态:{{ getCodeName('OBU_STATE_TYPE',item.obuStatus) }}</view>
  14. </view>
  15. </view>
  16. <view class="choose-item">
  17. <view class="active" v-if="flag == i"> </view>
  18. </view>
  19. </view>
  20. <view v-else class="flex"> 暂无车辆订单信息 </view>
  21. </view>
  22. </template>
  23. <script lang="ts" setup>
  24. import { reactive, ref } from "vue";
  25. import { navTo } from "@/utils/utils";
  26. import { onLoad, onShow } from "@dcloudio/uni-app";
  27. import { orderList } from "@/utils/network/api.js";
  28. import { request } from "@/utils/network/request.js";
  29. import { getItem, StorageKeys} from "@/utils/storage";
  30. import { stringToJson } from "@/utils/network/encryption";
  31. import { jump } from "@/datas/9901Jump.js";
  32. import { deviceType } from "@/utils/network/difference";
  33. import {
  34. getCodeName
  35. } from "@/datas/queryKey.js";
  36. import {
  37. getVehiclePlateColor
  38. } from "@/datas/vehiclePlateColor";
  39. const state = reactive({
  40. list: [],
  41. type: "",//1 OBU重新激活 2 卡签注销 3 更换设备 4卡签续期 5挂失解挂 6增补设备
  42. // 30 储值卡转记账卡 31卡pin码解锁 32ETC车牌过户 33 卡签停用/卡签启用
  43. // 34月结单查询 35ETC通行流水记录 36 黑名单查询
  44. });
  45. onLoad((options) => {
  46. console.log("options", options)
  47. state.type = options.type
  48. if (options.type == "2") {
  49. uni.setNavigationBarTitle({
  50. title: 'ETC注销-选择车辆'
  51. });
  52. } else if (options.type == "3") {
  53. uni.setNavigationBarTitle({
  54. title: '更换ETC设备-选择车辆'
  55. });
  56. } else if (options.type == "4") {
  57. uni.setNavigationBarTitle({
  58. title: '卡签续期-选择车辆'
  59. });
  60. }else if (options.type == "5") {
  61. uni.setNavigationBarTitle({
  62. title: '卡签挂失/解除挂失-选择车辆'
  63. });
  64. }else if (options.type == "6") {
  65. uni.setNavigationBarTitle({
  66. title: '增补设备-选择车辆'
  67. });
  68. }else if (options.type == "30") {
  69. uni.setNavigationBarTitle({
  70. title: '储值卡转记账卡-选择车辆'
  71. });
  72. }else if (options.type == "31") {
  73. uni.setNavigationBarTitle({
  74. title: '卡pin码解锁-选择车辆'
  75. });
  76. }else if (options.type == "32") {
  77. uni.setNavigationBarTitle({
  78. title: 'ETC车牌过户-选择车辆'
  79. });
  80. }else if (options.type == "33") {
  81. uni.setNavigationBarTitle({
  82. title: '卡签停用/卡签启用-选择车辆'
  83. });
  84. }else if (options.type == "34") {
  85. uni.setNavigationBarTitle({
  86. title: '月结单查询-选择车辆'
  87. });
  88. }else if (options.type == "35") {
  89. uni.setNavigationBarTitle({
  90. title: 'ETC通行流水-选择车辆'
  91. });
  92. }else if (options.type == "36") {
  93. uni.setNavigationBarTitle({
  94. title: '黑名单查询-选择车辆'
  95. });
  96. }
  97. quanCheckActionTrue().then((item : any) => {
  98. if (options.type == "32") {
  99. let data = item.data
  100. for (var k = 0; k < data.length; k++) {
  101. if (data[k]['orderStatus'] != "99999") {
  102. state.list.push(data[k])
  103. }
  104. }
  105. }else{
  106. state.list = item.data;
  107. }
  108. console.log(item);
  109. });
  110. });
  111. const quanCheckActionTrue = () => {
  112. let source = ""
  113. // #ifdef MP-ALIPAY
  114. source = "ALI"
  115. // #endif
  116. // #ifdef MP-WEIXIN
  117. source = "WECHAT"
  118. // #endif
  119. var data = {
  120. opId: getItem(StorageKeys.OpenId),
  121. source: source,
  122. tabIndex: "0",
  123. orderStep: "11",
  124. isValueCard: "",
  125. orderStatus: "1",
  126. isAfter: true,
  127. };
  128. const options = {
  129. type: 2,
  130. data: data,
  131. method: "POST",
  132. showLoading: true,
  133. };
  134. return new Promise(async (resolve, reject) => {
  135. const res = await request(orderList, options);
  136. const data = stringToJson(res.bizContent);
  137. resolve(data);
  138. }).catch((error) => {
  139. reject(error);
  140. });
  141. };
  142. const flag = ref("0");
  143. const choose = (i, item) => {
  144. console.log(item.cardId);
  145. flag.value = i
  146. // 判断9901
  147. // 月结单查询 etc通行流水记录 黑名单查询 目前不用跳转到插件
  148. if (state.type == "34") {
  149. navTo(`/subpackage/after-sale/month-statement/month-statement-query-list?vehicleId=${item.vehicleId}`)
  150. }else if (state.type == "35") {
  151. navTo(`/subpackage/personal-center/search/select-card?vehicleId=${item.vehicleId}`)
  152. }else if (state.type == "36") {
  153. uni.navigateTo({
  154. url: `/subpackage/after-sale/blacklist-query/list?vehiclePlate=${item.vehiclePlate}&vehiclePlateColor=${item.vehiclePlateColor}`
  155. })
  156. }else{
  157. if (item.deviceType == deviceType) {
  158. // OBU重新激活跳转
  159. const params = encodeURIComponent(JSON.stringify(item))
  160. jump(state.type, params)
  161. } else {
  162. if (state.type == "1") {
  163. // #ifdef MP-WEIXIN
  164. navTo(
  165. `/subpackage/after-sale/activation-once-again/activation-once-again?id=${item.id}`
  166. );
  167. // #endif
  168. // #ifdef MP-ALIPAY
  169. navTo(
  170. `/subpackage/after-sale/activation-once-again/activation-once-again-ali?id=${item.id}`
  171. );
  172. // #endif
  173. } else if (state.type == "2") {
  174. navTo(`/subpackage/after-sale/ETC-log-off/log-off-confirm?id=${item.id}`)
  175. } else if (state.type == "3") {
  176. navTo(`/subpackage/after-sale/replace-equipment/replace-equipment-confirm?id=${item.id}`)
  177. } else if (state.type == "4") {
  178. navTo(`/subpackage/after-sale/card-Renewal/renewal-confirm?id=${item.id}&orderId=${item.orderId}`)
  179. } else if (state.type == "5") {
  180. navTo(`/subpackage/after-sale/card-loss-reporting/cardloss-confirm?id=${item.id}`)
  181. }else if (state.type == "6") {
  182. navTo(`/subpackage/after-sale/additional-equipment/additional-equipment-confirm?id=${item.id}`)
  183. }else if (state.type == "30") {
  184. navTo(`/subpackage/after-sale/to-bookkeeping-card/confirm?id=${item.id}`)
  185. }else if (state.type == "31") {
  186. navTo(`/subpackage/after-sale/pin-code-deblocking/pin-code-confirm?id=${item.id}`);
  187. }else if (state.type == "32") {
  188. navTo(`/subpackage/after-sale/transfer-ownership/transfer-confirm?id=${item.id}`)
  189. }else if (state.type == "33") {
  190. navTo(`/subpackage/after-sale/card-deactivation-activation/deactivation-activation-confirm?id=${item.id}`)
  191. }
  192. }
  193. }
  194. }
  195. </script>
  196. <style>
  197. page {
  198. width: 100%;
  199. height: 100%;
  200. background-color: #eef7f7;
  201. }
  202. </style>
  203. <style lang="scss" scoped>
  204. .flex {
  205. display: flex;
  206. justify-content: center;
  207. }
  208. .selectCar-box {
  209. height: 100%;
  210. padding: 30rpx;
  211. .item {
  212. padding: 20rpx;
  213. display: flex;
  214. justify-content: space-between;
  215. align-items: center;
  216. // height: 130rpx;
  217. background: #ffffff;
  218. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  219. border-radius: 20rpx;
  220. margin-bottom: 30rpx;
  221. .iten-left {
  222. display: flex;
  223. align-items: center;
  224. image {
  225. width: 150rpx;
  226. height: 90rpx;
  227. }
  228. text {
  229. margin-left: 20rpx;
  230. font-size: 32rpx;
  231. font-family: Noto Sans S Chinese;
  232. font-weight: 400;
  233. color: #333333;
  234. }
  235. }
  236. .choose-item {
  237. width: 44rpx;
  238. height: 44rpx;
  239. background: #ffffff;
  240. border: 2rpx solid #00b38b;
  241. border-radius: 50%;
  242. margin-right: 20rpx;
  243. display: flex;
  244. justify-content: center;
  245. align-items: center;
  246. box-sizing: content-box;
  247. }
  248. .active {
  249. width: 34rpx;
  250. height: 34rpx;
  251. background: #00b38b;
  252. border-radius: 50%;
  253. }
  254. }
  255. }
  256. .message{
  257. font-size: 26rpx;
  258. margin-left: 6rpx;
  259. }
  260. </style>