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.

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