您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

select-car.vue 7.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275
  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,interceptND} 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. interceptND(item.vehicleId).then(()=>{
  146. flag.value = i
  147. // 判断9901
  148. // 月结单查询 etc通行流水记录 黑名单查询 目前不用跳转到插件
  149. if (state.type == "34") {
  150. navTo(`/subpackage/after-sale/month-statement/month-statement-query-list?vehicleId=${item.vehicleId}`)
  151. }else if (state.type == "35") {
  152. navTo(`/subpackage/personal-center/search/select-card?vehicleId=${item.vehicleId}`)
  153. }else if (state.type == "36") {
  154. uni.navigateTo({
  155. url: `/subpackage/after-sale/blacklist-query/list?vehiclePlate=${item.vehiclePlate}&vehiclePlateColor=${item.vehiclePlateColor}&cardId=${item.cardId}`
  156. })
  157. }else{
  158. if (item.deviceType == deviceType) {
  159. // OBU重新激活跳转
  160. const params = encodeURIComponent(JSON.stringify(item))
  161. jump(state.type, params)
  162. } else {
  163. if (state.type == "1") {
  164. // #ifdef MP-WEIXIN
  165. navTo(
  166. `/subpackage/after-sale/activation-once-again/activation-once-again?id=${item.id}`
  167. );
  168. // #endif
  169. // #ifdef MP-ALIPAY
  170. navTo(
  171. `/subpackage/after-sale/activation-once-again/activation-once-again-ali?id=${item.id}`
  172. );
  173. // #endif
  174. } else if (state.type == "2") {
  175. navTo(`/subpackage/after-sale/ETC-log-off/log-off-confirm?id=${item.id}`)
  176. } else if (state.type == "3") {
  177. navTo(`/subpackage/after-sale/replace-equipment/replace-equipment-confirm?id=${item.id}`)
  178. } else if (state.type == "4") {
  179. navTo(`/subpackage/after-sale/card-Renewal/renewal-confirm?id=${item.id}&orderId=${item.orderId}`)
  180. } else if (state.type == "5") {
  181. navTo(`/subpackage/after-sale/card-loss-reporting/cardloss-confirm?id=${item.id}`)
  182. }else if (state.type == "6") {
  183. navTo(`/subpackage/after-sale/additional-equipment/additional-equipment-confirm?id=${item.id}`)
  184. }else if (state.type == "30") {
  185. navTo(`/subpackage/after-sale/to-bookkeeping-card/confirm?id=${item.id}`)
  186. }else if (state.type == "31") {
  187. navTo(`/subpackage/after-sale/pin-code-deblocking/pin-code-confirm?id=${item.id}`);
  188. }else if (state.type == "32") {
  189. navTo(`/subpackage/after-sale/transfer-ownership/transfer-confirm?id=${item.id}`)
  190. }else if (state.type == "33") {
  191. navTo(`/subpackage/after-sale/card-deactivation-activation/deactivation-activation-confirm?id=${item.id}`)
  192. }
  193. }
  194. }
  195. })
  196. }
  197. </script>
  198. <style>
  199. page {
  200. width: 100%;
  201. height: 100%;
  202. background-color: #eef7f7;
  203. }
  204. </style>
  205. <style lang="scss" scoped>
  206. .flex {
  207. display: flex;
  208. justify-content: center;
  209. }
  210. .selectCar-box {
  211. height: 100%;
  212. padding: 30rpx;
  213. .item {
  214. padding: 20rpx;
  215. display: flex;
  216. justify-content: space-between;
  217. align-items: center;
  218. // height: 130rpx;
  219. background: #ffffff;
  220. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  221. border-radius: 20rpx;
  222. margin-bottom: 30rpx;
  223. .iten-left {
  224. display: flex;
  225. align-items: center;
  226. image {
  227. width: 150rpx;
  228. height: 90rpx;
  229. }
  230. text {
  231. margin-left: 20rpx;
  232. font-size: 32rpx;
  233. font-family: Noto Sans S Chinese;
  234. font-weight: 400;
  235. color: #333333;
  236. }
  237. }
  238. .choose-item {
  239. width: 44rpx;
  240. height: 44rpx;
  241. background: #ffffff;
  242. border: 2rpx solid #00b38b;
  243. border-radius: 50%;
  244. margin-right: 20rpx;
  245. display: flex;
  246. justify-content: center;
  247. align-items: center;
  248. box-sizing: content-box;
  249. }
  250. .active {
  251. width: 34rpx;
  252. height: 34rpx;
  253. background: #00b38b;
  254. border-radius: 50%;
  255. }
  256. }
  257. }
  258. .message{
  259. font-size: 26rpx;
  260. margin-left: 6rpx;
  261. }
  262. </style>