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.

unsuspend-confirm.vue 21KB

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