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.

additional-equipment-confirm.vue 6.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
  1. <template>
  2. <view class="selectCar-box">
  3. <view class="details">
  4. <view class="title">
  5. 基础信息
  6. </view>
  7. <view class="details-item">
  8. <view>
  9. 订单编号:
  10. </view>
  11. <text>{{state.data.orderId}}</text>
  12. </view>
  13. <view class="details-item">
  14. <view>
  15. 用户名称:
  16. </view>
  17. <text>{{state.data.customerName}}</text>
  18. </view>
  19. <view class="details-item">
  20. <view>
  21. 用户证件类型:
  22. </view>
  23. <text>{{getCredentialType(state.data.customerIdtype)}}</text>
  24. </view>
  25. <view class="details-item">
  26. <view>
  27. 用户证件号:
  28. </view>
  29. <text>{{state.data.customerIdnum}}</text>
  30. </view>
  31. <view class="details-item">
  32. <view>
  33. 订单车牌号:
  34. </view>
  35. <text style="color: #00B38B;;">{{state.data.vehiclePlate}}</text>
  36. </view>
  37. <view class="details-item">
  38. <view>
  39. 收费车型:
  40. </view>
  41. <text>{{state.data.vehicleType}}</text>
  42. </view>
  43. </view>
  44. <view class="">
  45. <view class="title">
  46. 卡信息
  47. </view>
  48. <view class="card">
  49. <view class="card-left">
  50. <image :src="`${$imgUrl}card2.png`" mode=""></image>
  51. <view class="card-center">
  52. <view class="card-center-head">
  53. {{state.data.cardId}}
  54. </view>
  55. <view class="tips">
  56. <text>储蓄卡</text>
  57. <text class="tips-card">{{getEtcCardStatus(state.data.cardStatus)}}</text>
  58. </view>
  59. </view>
  60. </view>
  61. </view>
  62. </view>
  63. <view v-if="state.data.obuId">
  64. <view class="title">
  65. OBU设备信息
  66. </view>
  67. <view class="card">
  68. <view class="card-left">
  69. <image :src="`${$imgUrl}card1.png`" mode=""></image>
  70. <view class="card-center">
  71. <view class="card-center-head">
  72. {{state.data.obuId}}
  73. </view>
  74. <view class="tips">
  75. <!-- <text>储蓄卡</text> -->
  76. <text class="tips-card">{{getObuStatus(state.data.obuStatus)}}</text>
  77. </view>
  78. </view>
  79. </view>
  80. </view>
  81. </view>
  82. <button class="submit" @click="nextACtion">下一步</button>
  83. </view>
  84. </template>
  85. <script lang="ts" setup>
  86. import {
  87. reactive,
  88. ref
  89. } from "vue"
  90. import {
  91. navTo
  92. } from "@/utils/utils"
  93. import {
  94. onLoad,
  95. onUnload
  96. } from "@dcloudio/uni-app";
  97. import {
  98. request
  99. } from "@/utils/network/request.js";
  100. import {
  101. orderDetail,
  102. CardlossStatus,
  103. cckChangejzCard
  104. } from "@/utils/network/api.js";
  105. import {
  106. msg
  107. } from "@/utils/utils";
  108. import {
  109. getCredentialType
  110. } from "@/datas/credentialType.js";
  111. import {
  112. getEtcCardStatus
  113. } from "@/datas/etcCardStatus.js";
  114. import {
  115. getObuStatus
  116. } from "@/datas/obuStatus.js";
  117. import {
  118. stringToJson
  119. } from "@/utils/network/encryption";
  120. const state = reactive({
  121. data: {
  122. cardStatus: undefined,
  123. obuStatus: undefined,
  124. },
  125. type: undefined
  126. });
  127. /*视图进入后操作*/
  128. onLoad((option) => {
  129. queryOrderDetail(option.id).then((val : any) => {
  130. state.data = val
  131. })
  132. });
  133. onUnload(() => {
  134. });
  135. /*下一步*/
  136. const nextACtion = () => {
  137. if (!state.data.obuId) {
  138. navTo(
  139. `/subpackage/after-sale/additional-equipment/additional-equipment-verification?orderId=${state.data.orderId}&&cardId=${state.data.cardId}&&mobile=${state.data.customerTel}`
  140. )
  141. } else {
  142. msg("已有OBU,无需增补")
  143. }
  144. }
  145. const queryOrderDetail = (id) => {
  146. return new Promise(async (resolve, reject) => {
  147. const res = await request(orderDetail, {
  148. type: 2,
  149. data: {
  150. id: id
  151. },
  152. method: "POST",
  153. showLoading: true,
  154. });
  155. const data = stringToJson(res.bizContent);
  156. resolve(data);
  157. }).catch((error) => {
  158. reject(error);
  159. });
  160. }
  161. </script>
  162. <style>
  163. page {
  164. width: 100%;
  165. height: 100%;
  166. background-color: #fff;
  167. }
  168. </style>
  169. <style lang="scss" scoped>
  170. .selectCar-box {
  171. padding: 30rpx;
  172. .title {
  173. font-size: 30rpx;
  174. font-family: Microsoft YaHei UI;
  175. font-weight: 400;
  176. color: #333333;
  177. margin-bottom: 30rpx;
  178. }
  179. .details {
  180. .title {
  181. font-size: 30rpx;
  182. font-family: Microsoft YaHei UI;
  183. font-weight: 400;
  184. color: #333333;
  185. margin-bottom: 30rpx;
  186. }
  187. .details-item {
  188. display: flex;
  189. font-size: 26rpx;
  190. font-family: Noto Sans S Chinese;
  191. font-weight: 400;
  192. color: #999999;
  193. margin-bottom: 30rpx;
  194. text {
  195. font-size: 26rpx;
  196. font-family: Noto Sans S Chinese;
  197. font-weight: 400;
  198. color: #333333;
  199. }
  200. }
  201. }
  202. .card {
  203. height: 150rpx;
  204. background: #FFFFFF;
  205. box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
  206. border-radius: 20rpx;
  207. padding: 30rpx;
  208. display: flex;
  209. justify-content: space-between;
  210. align-items: center;
  211. margin-bottom: 60rpx;
  212. .card-left {
  213. display: flex;
  214. align-items: center;
  215. image {
  216. width: 100rpx;
  217. height: 90rpx;
  218. }
  219. .card-center {
  220. margin-left: 30rpx;
  221. .card-center-head {
  222. font-size: 32rpx;
  223. font-family: Noto Sans S Chinese;
  224. font-weight: 400;
  225. color: #333333;
  226. }
  227. .tips {
  228. font-size: 26rpx;
  229. font-family: Noto Sans S Chinese;
  230. font-weight: 400;
  231. color: #666666;
  232. .tips-card {
  233. width: 70rpx;
  234. height: 40rpx;
  235. background: #D3F2EF;
  236. border-radius: 6rpx;
  237. font-size: 20rpx;
  238. font-family: Noto Sans S Chinese;
  239. font-weight: 400;
  240. color: #0A8F8A;
  241. padding: 5rpx 10rpx;
  242. margin-left: 20rpx;
  243. }
  244. }
  245. }
  246. }
  247. .choose-item {
  248. margin-right: 20rpx;
  249. width: 50rpx;
  250. height: 50rpx;
  251. border: 1rpx solid #00B38B;
  252. border-radius: 50%;
  253. display: flex;
  254. justify-content: center;
  255. align-items: center;
  256. .active {
  257. width: 38rpx;
  258. height: 38rpx;
  259. background: #00B38B;
  260. border-radius: 50%;
  261. }
  262. }
  263. }
  264. .remark {
  265. font-size: 26rpx;
  266. font-family: Microsoft YaHei UI;
  267. font-weight: 400;
  268. color: #666666;
  269. text-indent: 30rpx;
  270. margin-bottom: 30rpx;
  271. }
  272. .submit {
  273. margin-top: 100rpx;
  274. width: 670rpx;
  275. height: 80rpx;
  276. background: linear-gradient(-90deg, #43A1E0 0%, #13E7C1 100%);
  277. border-radius: 40rpx;
  278. font-size: 32rpx;
  279. font-family: Noto Sans S Chinese;
  280. font-weight: 400;
  281. color: #FFFFFF;
  282. line-height: 80rpx;
  283. }
  284. }
  285. </style>