Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.

upgrade-confirm.vue 20KB

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