Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

upgrade-confirm.vue 20KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770
  1. <template>
  2. <view class="selectCar-box">
  3. <view class="details">
  4. <view class="title"> 基础信息 </view>
  5. <view class="details-item">
  6. <view> 订单编号: </view>
  7. <text>{{ orderInfos.orderId }}</text>
  8. </view>
  9. <view class="details-item">
  10. <view> 用户名称: </view>
  11. <text>{{ orderInfos.ownerName }}</text>
  12. </view>
  13. <view class="details-item">
  14. <view> 用户证件类型: </view>
  15. <text>{{ getCodeName('CERTIFICATE_TYPE',orderInfos.ownerIdtype) }}</text>
  16. </view>
  17. <view class="details-item">
  18. <view> 用户证件号: </view>
  19. <text>{{ orderInfos.ownerIdnum }}</text>
  20. </view>
  21. <view class="details-item">
  22. <view> 订单车牌号: </view>
  23. <text style="color: #00b38b">{{ orderInfos.vehiclePlate }}</text>
  24. </view>
  25. <view class="details-item">
  26. <view> 车牌颜色: </view>
  27. <text style="color: #00b38b">{{
  28. orderInfos.vehiclePlateColorStr
  29. }}</text>
  30. </view>
  31. <view class="details-item">
  32. <view> 收费车型: </view>
  33. <text>{{ orderInfos.vehicleType }}</text>
  34. </view>
  35. </view>
  36. <view class="title"> 卡信息 </view>
  37. <view class="card">
  38. <view class="card-left">
  39. <image :src="`${$imgUrl}card2.png`" mode=""></image>
  40. <view class="card-center">
  41. <view class="card-center-head"> {{orderInfos.cardId}} </view>
  42. <view class="tips">
  43. <text>储蓄卡</text>
  44. <text class="tips-card">{{getCodeName('CARD_STATE_TYPE',orderInfos.cardStatus)}}</text>
  45. </view>
  46. <view class="choose-item"> 有效期:{{orderInfos.cardExpireTime }}</view>
  47. </view>
  48. </view>
  49. </view>
  50. <view class="title"> OBU设备信息 </view>
  51. <view class="card">
  52. <view class="card-left">
  53. <image :src="`${$imgUrl}card1.png`" mode=""></image>
  54. <view class="card-center">
  55. <view class="card-center-head"> {{orderInfos.obuId}} </view>
  56. <view class="tips">
  57. <!-- <text>储蓄卡</text> -->
  58. <text class="tips-card">{{getCodeName('OBU_STATE_TYPE',orderInfos.obuStatus)}}</text>
  59. </view>
  60. <view class="choose-item"> 有效期:{{orderInfos.obuExpireTime }} </view>
  61. </view>
  62. </view>
  63. </view>
  64. <button class="submit" @click="toPage" v-if="!state.flag" :disabled="state.disabled">设备升级</button>
  65. <button class="submit" @click="toBack" v-else>返回服务中心</button>
  66. <view class="mask" v-show="state.showPopup">
  67. <view class="main">
  68. <view class="top">
  69. <image class="icon-close" :src="`${$imgUrl}common/icon-close.png`" @click="cancel"></image>
  70. </view>
  71. <image class="icon-success" :src="`${$imgUrl}bluetooth/card-success.png`"></image>
  72. <view class="title">设备升级成功!</view>
  73. </view>
  74. </view>
  75. </view>
  76. </template>
  77. <script setup>
  78. import {
  79. reactive
  80. } from "vue";
  81. import {
  82. navTo,
  83. getFormatDate
  84. } from "@/utils/utils";
  85. import {
  86. onLoad,
  87. onUnload,
  88. onShow
  89. } from "@dcloudio/uni-app";
  90. import {
  91. request
  92. } from "@/utils/network/request.js";
  93. import {
  94. orderDetail,
  95. deviceUpgrade,
  96. writeCardBack,
  97. cardModifyConfirm,
  98. modifyObuSysInfo,
  99. modifyObuVehicleInfo,
  100. obuActivation,
  101. obuWriteAgain,
  102. changeWorkOrderStatus
  103. } from "@/utils/network/api.js";
  104. import {
  105. getCodeName
  106. } from "@/datas/queryKey.js";
  107. import {
  108. IntegerToHexString,
  109. AsciToHexString,
  110. } from "@/utils/util/fileData.js";
  111. import {
  112. stringToJson
  113. } from "@/utils/network/encryption";
  114. const tools = require("../../../static/etcUtil/tools.js");
  115. const bluetoothUtil = require("../../../static/etcUtil/index.js");
  116. const cmd = require("../../../static/etcUtil/cmdConfig.js");
  117. const state = reactive({
  118. showPopup: false,
  119. flag: false,
  120. disabled: false,
  121. workId: ""
  122. })
  123. const orderInfos = reactive({
  124. orderId: "",
  125. ownerName: "",
  126. ownerIdtype: "",
  127. ownerIdnum: "",
  128. vehiclePlate: "",
  129. vehiclePlateColorStr: "",
  130. vehiclePlateColor: "",
  131. vehicleType: "",
  132. cardId: "",
  133. cardStatus: "",
  134. obuId: "",
  135. obuStatus: "",
  136. cardEnableTime: "",
  137. obuEnableTime: "",
  138. cardExpireTime: '',
  139. obuExpireTime: "",
  140. obuVersion: ""
  141. });
  142. const fileDataStrings = reactive({
  143. approvedCount: 0, //核载人数
  144. cardId: "", //卡号
  145. obuId: "", //obu号
  146. obuId: "", //obu号
  147. packageNum: "", //套餐编号
  148. axleCount: 0, //轴数
  149. axleDistance: "", //轴距
  150. engineNum: "", //发动机
  151. vehicleVin: "",
  152. vehicleEngineNum: "",
  153. cardStatus: "",
  154. obuStatus: "",
  155. type: 0, //类型
  156. userType: 0, //用户类型
  157. vehiclePlate: "", //车牌
  158. vehiclePlateColor: 0, //车牌颜色
  159. vehicleDimensions: "",
  160. outlineL: 0, //外廓 长
  161. outlineW: 0, //外廓 宽
  162. outlineH: 0, //外廓 高
  163. wheelCount: "", //车轮数
  164. vehicleIdNo: "", //车牌号
  165. vehiclePlateColorStr: "",
  166. customerTel: "",
  167. customerId: "",
  168. orderId: ""
  169. });
  170. let cmdRandNum = '';
  171. onLoad((option) => {
  172. console.log("options", option)
  173. //请求订单详情
  174. queryOrderDetail(option.id);
  175. getOrderDetails(option.id)
  176. state.workId = option.workId
  177. });
  178. onShow((option) => {
  179. uni.$on('bluetoothLink', res => {
  180. console.log(res);
  181. if (res.status) {
  182. tools.showLoadingAlert("正在执行指令");
  183. state.disabled = true;
  184. getDeviceUpgrade()
  185. }
  186. })
  187. })
  188. onUnload(() => {
  189. //移除监听
  190. uni.$off('bluetoothLink')
  191. })
  192. //获取订单详情
  193. const queryOrderDetail = (id) => {
  194. const options = {
  195. type: 2,
  196. data: {
  197. id: id,
  198. },
  199. method: "POST",
  200. showLoading: true,
  201. };
  202. request(orderDetail, options).then((res) => {
  203. let orderInfo = JSON.parse(res.bizContent);
  204. console.log(orderInfo);
  205. orderInfos.orderId = orderInfo.orderId;
  206. orderInfos.ownerName = orderInfo.ownerName;
  207. orderInfos.ownerIdtype = orderInfo.ownerIdtype;
  208. orderInfos.ownerIdnum = orderInfo.ownerIdnum;
  209. orderInfos.vehiclePlate = orderInfo.vehiclePlate;
  210. orderInfos.vehiclePlateColorStr = orderInfo.vehiclePlateColorStr;
  211. orderInfos.vehiclePlateColor = orderInfo.vehiclePlateColor;
  212. orderInfos.vehicleType = orderInfo.vehicleType;
  213. orderInfos.cardId = orderInfo.cardId;
  214. orderInfos.cardStatus = orderInfo.cardStatus;
  215. orderInfos.obuId = orderInfo.obuId;
  216. orderInfos.obuStatus = orderInfo.obuStatus;
  217. orderInfos.cardEnableTime = orderInfo.cardEnableTime.substring(0, 10);
  218. orderInfos.obuEnableTime = orderInfo.obuEnableTime.substring(0, 10);
  219. orderInfos.cardExpireTime = orderInfo.cardExpireTime;
  220. orderInfos.obuExpireTime = orderInfo.obuExpireTime;
  221. orderInfos.obuVersion = orderInfo.vehicleVin;
  222. });
  223. };
  224. //设备升级 请求
  225. const getDeviceUpgrade = () => {
  226. const options = {
  227. type: 2,
  228. data: {
  229. cardId: orderInfos.cardId,
  230. orderId: orderInfos.orderId
  231. },
  232. method: "POST",
  233. showLoading: true,
  234. };
  235. request(deviceUpgrade, options).then((res) => {
  236. tools.hideLoadingAlert();
  237. let result = stringToJson(res.bizContent);
  238. console.log("&&&&&&&&&&&&", result);
  239. let cmdArray = result.command ? result.command.split(",") : "";
  240. if (cmdArray.length > 0) {
  241. tools.showLoadingAlert("正在执行指令");
  242. bluetoothUtil.transCmd(cmdArray, "10", function(res) {
  243. tools.hideLoadingAlert();
  244. let status = res[cmdArray.length - 1].substring(res[cmdArray.length - 1].length -
  245. 4, res[cmdArray.length - 1].length);
  246. if (status == "9000") {
  247. getCommandBack(result.command, result.cosRecordId, res.toString());
  248. }
  249. })
  250. }
  251. })
  252. };
  253. /**
  254. * 写卡指令返回 请求
  255. */
  256. const getCommandBack = (command, cosRecordId, response) => {
  257. console.log('======循环写卡指令中======')
  258. tools.showLoadingAlert("加载中");
  259. let options = {
  260. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  261. data: {
  262. cardId: orderInfos.cardId,
  263. orderId: orderInfos.orderId,
  264. command: command,
  265. response: response,
  266. cosRecordId: cosRecordId,
  267. cosType: 2
  268. }, //请求参数
  269. method: "POST", //提交方式(默认POST)
  270. showLoading: true, //是否显示加载中(默认显示)
  271. };
  272. //调用方式
  273. request(writeCardBack, options)
  274. .then((res) => {
  275. tools.hideLoadingAlert();
  276. let result = JSON.parse(res.bizContent);
  277. if (result.orderStatus == 1 || result.orderStatus == "1") {
  278. tools.showLoadingAlert("执行指令中");
  279. bluetoothUtil.transCmd(result.command.split(","), "10", function(res) {
  280. tools.hideLoadingAlert();
  281. let response = res.toString();
  282. getCommandBack(result.command, cosRecordId, response);
  283. });
  284. } else {
  285. getCardModifyConfirm(cosRecordId);
  286. }
  287. })
  288. };
  289. //卡信息变更确认
  290. const getCardModifyConfirm = (cosRecordId) => {
  291. const options = {
  292. type: 2,
  293. data: {
  294. cardId: orderInfos.cardId,
  295. operation: 4,
  296. cosRecordId: cosRecordId
  297. },
  298. method: "POST",
  299. showLoading: true,
  300. };
  301. request(cardModifyConfirm, options).then((res) => {
  302. obuWriteAgainRequest();
  303. })
  304. };
  305. //去连接蓝牙
  306. const toPage = () => {
  307. // getDeviceUpgrade()
  308. navTo("/pages/bluetooth/bluetooth?routeType=5"); //去连接蓝牙
  309. };
  310. //返回列表
  311. const toBack = () => {
  312. uni.navigateBack({
  313. delta: 2
  314. })
  315. }
  316. //关闭弹窗
  317. const cancel = () => {
  318. state.flag = true;
  319. state.showPopup = false;
  320. uni.navigateTo({
  321. url: `/subpackage/after-sale/deviceInfo/deviceInfo`
  322. })
  323. }
  324. /**
  325. * 修改系统信息 请求
  326. */
  327. const obuWriteAgainRequest = () => {
  328. let cmdArray1 = [cmd.HOME_DIRECTORY, cmd.OBU_SYSTEM_FILE, cmd.RANDOM_NUMBER];
  329. tools.showLoadingAlert("正在执行指令");
  330. bluetoothUtil.transCmd(cmdArray1, "20", function(res) {
  331. tools.hideLoadingAlert();
  332. var str = res[2].substring(res[2].length - 4, res[2].length);
  333. if (str == "9000") {
  334. cmdRandNum = res[2].substring(0, res[2].length - 4);
  335. const options = {
  336. type: 2,
  337. data: {
  338. obuId: orderInfos.obuId,
  339. random: cmdRandNum
  340. },
  341. method: "POST",
  342. showLoading: true,
  343. };
  344. request(obuWriteAgain, options).then((res) => {
  345. let datas = stringToJson(res.bizContent);
  346. console.log("899", datas, datas.data.APDU);
  347. if (datas.data.APDU) {
  348. tools.showLoadingAlert("正在执行指令");
  349. bluetoothUtil.transCmd([datas.data.APDU], "20", function(res) {
  350. tools.hideLoadingAlert();
  351. console.log("res=====", res, res[0])
  352. let cmdArr = [cmd.HOME_DIRECTORY, cmd.OBU_DF01, cmd.OBU_EF01, cmd
  353. .RANDOM_NUMBER
  354. ];
  355. bluetoothUtil.transCmd(cmdArr, "20", function(res) {
  356. console.log("chelaing======", res)
  357. var str = res[3].substring(res[3].length - 4, res[3]
  358. .length);
  359. if (str == "9000") {
  360. cmdRandNum = res[3].substring(0, res[3].length -
  361. 4);
  362. console.log("0000000000000000000000000")
  363. getFileData((demos) => {
  364. modifyVehicle(demos);
  365. })
  366. } else {
  367. tools.alertF("RANDOM_NUMBER指令长度不符" + res[1]);
  368. }
  369. })
  370. })
  371. }
  372. })
  373. } else {
  374. tools.alertF("RANDOM_NUMBER指令长度不符" + res[1]);
  375. }
  376. })
  377. };
  378. //获取fileData
  379. const getFileData = (fun) => {
  380. //调用方式
  381. request('6ed853e432fb4811a3c0d7d27034bd39', {
  382. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  383. data: {
  384. fileData: fileDataStrings.vehiclePlate,
  385. nLen: 24
  386. }, //请求参数
  387. method: "POST", //提交方式(默认POST)
  388. showLoading: true, //是否显示加载中(默认显示)
  389. }).then((les) => {
  390. let result = stringToJson(les.bizContent);
  391. console.log(les, '=========123')
  392. let res1 = result.gbkFileData; //车牌号
  393. let res2 = IntegerToHexString(fileDataStrings.vehiclePlateColor, 4); //车牌颜色
  394. let res3 = IntegerToHexString(fileDataStrings.type, 2); //类型
  395. let userTypeNumber = fileDataStrings.userType == 'PERSONAL_USER' ? 1 : 2
  396. let res4 = IntegerToHexString(userTypeNumber, 2); //用户类型
  397. let res5 = IntegerToHexString(fileDataStrings.outlineL, 4); //车辆尺寸 长
  398. let res6 = IntegerToHexString(fileDataStrings.outlineW, 2); //车辆尺寸 宽
  399. let res7 = IntegerToHexString(fileDataStrings.outlineH, 2); //车辆尺寸 高
  400. let res8 = IntegerToHexString(4, 2); //获取轮数
  401. let res9 = IntegerToHexString(fileDataStrings.axleCount, 2); //轴数
  402. let res10 = IntegerToHexString(null, 4); //轴距32
  403. let res11 = IntegerToHexString(fileDataStrings.approvedCount, 6); //核载人数
  404. let res12 = AsciToHexString(fileDataStrings.vehicleVin, 32); //车辆识别代号
  405. // let res12 = JSON.parse(res.bizContent).gbkFileData; //车编号
  406. let res13 = AsciToHexString(fileDataStrings.vehicleEngineNum, 32); //发动机
  407. fun(res1 + res2 + res3 + res4 + res5 + res6 + res7 + res8 + res9 + res10 + res11 + res12 + res13);
  408. })
  409. };
  410. /**
  411. * 修改车辆信息 请求
  412. */
  413. const modifyVehicle = (ites) => {
  414. tools.showLoadingAlert("加载中");
  415. console.log('======修改车辆信息======', ites)
  416. let options = {
  417. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  418. data: {
  419. Status: "0",
  420. random: cmdRandNum,
  421. obuSerailNo: orderInfos.obuId,
  422. fileData: ites,
  423. orderId: orderInfos.orderId,
  424. }, //请求参数
  425. method: "POST", //提交方式(默认POST)
  426. showLoading: true, //是否显示加载中(默认显示)
  427. };
  428. //调用方式
  429. request(modifyObuVehicleInfo, options)
  430. .then((res) => {
  431. tools.hideLoadingAlert();
  432. const datas = stringToJson(res.bizContent);
  433. console.log("modifyObuVehicleInfo", modifyObuVehicleInfo, datas)
  434. tools.showLoadingAlert("正在执行指令");
  435. if (datas.data.APDU) {
  436. bluetoothUtil.transCmd([datas.data.APDU], "20", function(res) {
  437. console.log('执行指令结果', res)
  438. tools.hideLoadingAlert();
  439. if (res[0] == "9000") {
  440. //再次获取随机数
  441. let cmdArr = [cmd.HOME_DIRECTORY, cmd.RANDOM_NUMBER];
  442. bluetoothUtil.transCmd(cmdArr, '20', function(res) {
  443. var str = res[1].substring(res[1].length - 4, res[1].length);
  444. if (str == "9000") {
  445. cmdRandNum = res[1].substring(0, res[1].length - 4);
  446. getObuActivation();
  447. } else {
  448. tools.alertF("RANDOM_NUMBER指令长度不符" + res[1]);
  449. }
  450. })
  451. }
  452. });
  453. }
  454. })
  455. };
  456. /**
  457. * VFJ-OBU在线激活 请求
  458. */
  459. const getObuActivation = () => {
  460. console.log('======VFJ-OBU在线激活======')
  461. tools.showLoadingAlert("加载中");
  462. let options = {
  463. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  464. data: {
  465. random: cmdRandNum,
  466. obuSerailNo: orderInfos.obuId,
  467. orderId: orderInfos.orderId,
  468. }, //请求参数
  469. method: "POST", //提交方式(默认POST)
  470. showLoading: true, //是否显示加载中(默认显示)
  471. };
  472. //调用方式
  473. request(obuActivation, options)
  474. .then((res) => {
  475. tools.hideLoadingAlert();
  476. console.log("在线激活 请求");
  477. console.log(stringToJson(res.bizContent));
  478. const datas = stringToJson(res.bizContent);
  479. tools.showLoadingAlert("执行指令");
  480. console.log("在线激活 请求==========================", datas, datas.data.APDU);
  481. bluetoothUtil.transCmd([datas.data.APDU], "20", function(res) {
  482. tools.hideLoadingAlert();
  483. console.log("在线激活 请求", res);
  484. if (res[0] == "9000") {
  485. changeWorkOrderStatusRequest().then(() => {
  486. state.showPopup = true;
  487. })
  488. }
  489. });
  490. })
  491. .catch((err) => {
  492. console.log(err);
  493. });
  494. };
  495. //获取订单详情
  496. const getOrderDetails = (id) => {
  497. console.log('======获取订单信息======')
  498. const options = {
  499. type: 2,
  500. data: {
  501. id: id,
  502. },
  503. method: "POST",
  504. showLoading: true,
  505. };
  506. request(orderDetail, options).then((res) => {
  507. let orderInfo = JSON.parse(res.bizContent);
  508. console.log("orderInfo", orderInfo);
  509. console.log("orderInfores", res);
  510. if (orderInfo) {
  511. fileDataStrings.userType = orderInfo.userType; //用户类型
  512. fileDataStrings.approvedCount = parseInt(orderInfo.vehicleApprovedCount); //核载人数
  513. fileDataStrings.cardId = orderInfo.cardId;
  514. fileDataStrings.packageNum = orderInfo.packageNum;
  515. fileDataStrings.obuId = orderInfo.obuId;
  516. fileDataStrings.vehicleVin = orderInfo.vehicleVin;
  517. fileDataStrings.vehicleEngineNum = orderInfo.vehicleEngineNum;
  518. fileDataStrings.axleCount = parseInt(orderInfo.vehicleAxleCount); //轴数
  519. fileDataStrings.engineNum = orderInfo.vehicleVin; //发动机
  520. fileDataStrings.type = parseInt(orderInfo.vehicleType); //类型
  521. fileDataStrings.vehiclePlate = orderInfo.vehiclePlate; //车牌
  522. fileDataStrings.vehiclePlateColor = orderInfo.vehiclePlateColor; //车牌颜色
  523. fileDataStrings.vehicleDimensions = orderInfo.vehicleDimensions;
  524. let arr = orderInfo.vehicleDimensions.split("X");
  525. fileDataStrings.outlineL = parseInt(arr[0]); //外廓 长
  526. fileDataStrings.outlineW = parseInt(arr[1]); //外廓 宽
  527. fileDataStrings.outlineH = parseInt(arr[2].substring(0, arr[2].length - 2)); //外廓 高
  528. fileDataStrings.vehicleIdNo = orderInfo.vehicleEngineNum; //车编号
  529. fileDataStrings.vehiclePlateColorStr = orderInfo.vehiclePlateColorStr;
  530. fileDataStrings.customerTel = orderInfo.customerTel;
  531. fileDataStrings.customerId = orderInfo.customerId;
  532. fileDataStrings.orderId = orderInfo.orderId;
  533. }
  534. });
  535. };
  536. const changeWorkOrderStatusRequest = () => {
  537. var data = {
  538. id: state.workId,
  539. };
  540. const options = {
  541. type: 2,
  542. data: data,
  543. method: "POST",
  544. showLoading: true,
  545. };
  546. return new Promise(async (resolve, reject) => {
  547. const res = await request(changeWorkOrderStatus, options);
  548. const data = stringToJson(res.bizContent);
  549. resolve(data);
  550. }).catch((error) => {
  551. reject(error);
  552. });
  553. }
  554. </script>
  555. <style>
  556. page {
  557. width: 100%;
  558. height: 100%;
  559. background-color: #fff;
  560. }
  561. </style>
  562. <style lang="scss" scoped>
  563. .mask {
  564. background: rgba(0, 0, 0, .35);
  565. position: fixed;
  566. left: 0;
  567. top: 0;
  568. bottom: 0;
  569. right: 0;
  570. }
  571. .main {
  572. width: 560rpx;
  573. padding: 25rpx 20rpx 55rpx;
  574. text-align: center;
  575. background: #fff;
  576. position: absolute;
  577. left: 50%;
  578. top: 50%;
  579. transform: translate(-50%, -50%);
  580. border-radius: 20rpx;
  581. .top {
  582. text-align: right;
  583. .icon-close {
  584. width: 48rpx;
  585. height: 48rpx;
  586. }
  587. }
  588. .icon-success {
  589. width: 500rpx;
  590. height: 320rpx;
  591. margin-top: 22rpx;
  592. }
  593. .title {
  594. color: #333333;
  595. font-size: 40rpx;
  596. font-weight: 600;
  597. text-align: center;
  598. margin-top: 55rpx;
  599. }
  600. }
  601. .selectCar-box {
  602. // width: 100%;
  603. // height: 100%;
  604. padding: 30rpx;
  605. .title {
  606. font-size: 30rpx;
  607. font-family: Microsoft YaHei UI;
  608. font-weight: 400;
  609. color: #333333;
  610. margin-bottom: 30rpx;
  611. }
  612. .details {
  613. .title {
  614. font-size: 30rpx;
  615. font-family: Microsoft YaHei UI;
  616. font-weight: 400;
  617. color: #333333;
  618. margin-bottom: 30rpx;
  619. }
  620. .details-item {
  621. display: flex;
  622. font-size: 26rpx;
  623. font-family: Noto Sans S Chinese;
  624. font-weight: 400;
  625. color: #999999;
  626. margin-bottom: 30rpx;
  627. text {
  628. font-size: 26rpx;
  629. font-family: Noto Sans S Chinese;
  630. font-weight: 400;
  631. color: #333333;
  632. }
  633. }
  634. }
  635. .card {
  636. height: 150rpx;
  637. background: #ffffff;
  638. box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
  639. border-radius: 20rpx;
  640. padding: 30rpx;
  641. display: flex;
  642. justify-content: space-between;
  643. align-items: center;
  644. margin-bottom: 60rpx;
  645. .card-left {
  646. display: flex;
  647. align-items: center;
  648. image {
  649. width: 100rpx;
  650. height: 90rpx;
  651. }
  652. .card-center {
  653. margin-left: 30rpx;
  654. .card-center-head {
  655. font-size: 32rpx;
  656. font-family: Noto Sans S Chinese;
  657. font-weight: 400;
  658. color: #333333;
  659. }
  660. .tips {
  661. font-size: 26rpx;
  662. font-family: Noto Sans S Chinese;
  663. font-weight: 400;
  664. color: #666666;
  665. .tips-card {
  666. width: 70rpx;
  667. height: 40rpx;
  668. background: #d3f2ef;
  669. border-radius: 6rpx;
  670. font-size: 20rpx;
  671. font-family: Noto Sans S Chinese;
  672. font-weight: 400;
  673. color: #0a8f8a;
  674. padding: 5rpx 10rpx;
  675. margin-left: 20rpx;
  676. }
  677. }
  678. }
  679. }
  680. .choose-item {
  681. margin-right: 20rpx;
  682. height: 50rpx;
  683. border-radius: 50%;
  684. display: flex;
  685. justify-content: flex-start;
  686. align-items: center;
  687. font-size: 25rpx;
  688. align-self: end;
  689. .active {
  690. width: 38rpx;
  691. height: 38rpx;
  692. background: #00b38b;
  693. border-radius: 50%;
  694. }
  695. }
  696. }
  697. .remark {
  698. font-size: 26rpx;
  699. font-family: Microsoft YaHei UI;
  700. font-weight: 400;
  701. color: #666666;
  702. text-indent: 30rpx;
  703. margin-bottom: 30rpx;
  704. }
  705. .submit {
  706. margin-top: 100rpx;
  707. width: 670rpx;
  708. height: 80rpx;
  709. background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
  710. border-radius: 40rpx;
  711. font-size: 32rpx;
  712. font-family: Noto Sans S Chinese;
  713. font-weight: 400;
  714. color: #ffffff;
  715. line-height: 80rpx;
  716. }
  717. .submit::after {
  718. border: 0;
  719. }
  720. .submit[disabled] {
  721. background: #f0f0f0;
  722. color: #333;
  723. }
  724. }
  725. </style>