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

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