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.

activation-once-again.vue 21KB

1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
2 년 전
1 년 전
2 년 전
2 년 전
2 년 전
2 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
2 년 전
1 년 전
2 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
1 년 전
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848
  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 class="details-item">
  36. <view> 重新激活次数: </view>
  37. <text>{{ state.activationNum }}次</text>
  38. <text class="record" style="color:#00b38b" @click="goActivationRecord">OBU重新激活记录</text>
  39. </view>
  40. </view>
  41. <view class="title"> 卡信息 </view>
  42. <view class="card">
  43. <view class="card-left">
  44. <image :src="`${$imgUrl}card2.png`" mode=""></image>
  45. <view class="card-center">
  46. <view class="card-center-head"> {{orderInfos.cardId}} </view>
  47. <view class="tips">
  48. <text>储蓄卡</text>
  49. <text class="tips-card">{{getCodeName('CARD_STATE_TYPE',orderInfos.cardStatus)}}</text>
  50. </view>
  51. <!-- <view class="choose-item"> 有效期:xxxx-xx-xx </view> -->
  52. </view>
  53. </view>
  54. </view>
  55. <view class="title"> OBU设备信息 </view>
  56. <view class="card">
  57. <view class="card-left">
  58. <image :src="`${$imgUrl}card1.png`" mode=""></image>
  59. <view class="card-center">
  60. <view class="card-center-head"> {{orderInfos.obuId}} </view>
  61. <view class="tips">
  62. <!-- <text>储蓄卡</text> -->
  63. <text class="tips-card">{{getCodeName('OBU_STATE_TYPE',orderInfos.obuStatus)}}</text>
  64. </view>
  65. <!-- <view class="choose-item"> 有效期:xxxx-xx-xx </view> -->
  66. </view>
  67. </view>
  68. </view>
  69. <view class="picture-wrapper" @click="takePhotoMode('3')">
  70. <view class="bg">
  71. <view class="">
  72. <view class="name"> 行驶证主页 </view>
  73. <view class="value"> 上传行驶证的主页 </view>
  74. <view class="tip">
  75. <view class="tip-value"> 拍摄规范 </view>
  76. </view>
  77. </view>
  78. <image v-if="!state.form.vehPosImgUrl" class="icon" :src="`${$imgUrl}applyCard/car-zhu.png`">
  79. </image>
  80. <image v-else class="icon" :src="strReplace(state.form.vehPosImgUrl)"></image>
  81. </view>
  82. </view>
  83. <view class="picture-wrapper" @click="takePhotoMode('4')">
  84. <view class="bg">
  85. <view class="">
  86. <view class="name"> 行驶证副页 </view>
  87. <view class="value"> 上传行驶证的副页 </view>
  88. <view class="tip">
  89. <view class="tip-value"> 拍摄规范 </view>
  90. </view>
  91. </view>
  92. <image v-if="!state.form.vehNegImgUrl" class="icon" :src="`${$imgUrl}applyCard/car-fu.png`">
  93. </image>
  94. <image v-else class="icon" :src="strReplace(state.form.vehNegImgUrl)"></image>
  95. </view>
  96. </view>
  97. <button class="submit" @click="toPage">再次激活</button>
  98. <view class="mask" v-show="state.showPopup">
  99. <view class="main">
  100. <view class="top">
  101. <image class="icon-close" :src="`${$imgUrl}common/icon-close.png`" @click="cancel"></image>
  102. </view>
  103. <image class="icon-success" :src="`${$imgUrl}bluetooth/device-active-success.png`"></image>
  104. <view class="title">设备激活成功!</view>
  105. </view>
  106. </view>
  107. </view>
  108. <view class="choice-takePhoto-wrap" v-if="state.isTakePhotoModeShow" @click="cancle">
  109. <view class="choice-takePhoto">
  110. <view @click.stop="takePhoto(state.choiceIndex)" style="border-radius: 20rpx 20rpx 0 0;">拍照</view>
  111. <view @click.stop="xiangce(state.choiceIndex)">从手机相册选择</view>
  112. <view @click.stop="cancle">取消</view>
  113. </view>
  114. </view>
  115. <viewfinder v-if="state.phoneType" :phoneType="state.phoneType" :images="state.images"
  116. :showStartPhoto="state.showImg" @confirmReturn="confirmReturn" @camera="camera"></viewfinder>
  117. </template>
  118. <script lang="ts" setup>
  119. import viewfinder from "@/components/viewfinder.vue"
  120. import {
  121. reactive,
  122. ref
  123. } from "vue";
  124. import {
  125. formatTime,
  126. expireDate,
  127. expireDate2,
  128. getFormatDate,
  129. msg,
  130. navTo,
  131. strReplace,
  132. uploadFile
  133. } from "@/utils/utils";
  134. import {
  135. onLoad, onShow
  136. } from '@dcloudio/uni-app'
  137. import {
  138. request
  139. } from "@/utils/network/request.js";
  140. import {
  141. stringToJson
  142. } from "@/utils/network/encryption.js";
  143. import activeSuccess from "./components/popup-device-active-success";
  144. import * as IFCODE from "@/utils/network/api.js";
  145. import {
  146. channelId
  147. } from "@/utils/network/difference";
  148. const cmd = require("../../../static/etcUtil/cmdConfig.js");
  149. const tools = require("../../../static/etcUtil/tools.js");
  150. const bluetoothUtil = require("../../../static/etcUtil/index.js");
  151. import {
  152. getCodeName
  153. } from "@/datas/queryKey.js";
  154. import { agentId } from "@/utils/network/difference";
  155. const state = reactive({
  156. phoneType: 0, // 1 身份证正面 2 身份证反面 3行驶证正面 4行驶证反面
  157. choiceIndex: 1, // 1 身份证正面 2 身份证反面
  158. isTakePhotoModeShow: false, //选择拍照方式是否出来
  159. changeColor: false,
  160. showImg: true,
  161. images: '',
  162. showPopup: false,
  163. form: {
  164. vehPosImgUrl: "",
  165. vehNegImgUrl: "",
  166. vehicleIdNum: ""
  167. },
  168. activationNum: "",//激活次数
  169. })
  170. //订单
  171. const orderInfos = reactive({
  172. orderId: "",
  173. ownerName: "",
  174. ownerIdtype: "",
  175. ownerIdnum: "",
  176. vehiclePlate: "",
  177. vehiclePlateColorStr: "",
  178. vehiclePlateColor: "",
  179. vehicleType: "",
  180. cardId: "",
  181. cardStatus: "",
  182. obuId: "",
  183. obuStatus: "",
  184. outlineL: 0,
  185. outlineW: 0,
  186. outlineH: 0,
  187. type: 0,
  188. axleCount: 0,
  189. approvedCount: 0,
  190. vehicleVin: "",
  191. vehicleEngineNum: "",
  192. });
  193. //OBU
  194. const obu = reactive({
  195. obuId: "",
  196. startTime: "",
  197. endTime: "",
  198. version: "",
  199. approvedCount: "",
  200. axleCount: "",
  201. axleDistance: "",
  202. engineNum: "",
  203. type: "",
  204. userType: "",
  205. contractNo: "",
  206. vehiclePlate: "",
  207. vehiclePlateColor: "",
  208. vin: "",
  209. wheelCount: "",
  210. isJH: ""
  211. });
  212. let cmdRandNum = '';
  213. let ids = '';
  214. onLoad((option) => {
  215. console.log('======重新激活开始======', option);
  216. ids = option.id;
  217. //请求订单详情
  218. queryOrderDetail(option.id);
  219. // uni.$on('bluetoothLink', res => {
  220. // console.log(res,'===========123');
  221. // if (res.status) {
  222. // // getCardRenewal()
  223. // setTimeout(()=>{
  224. // getObuId()
  225. // })
  226. // }
  227. // //移除监听
  228. // console.log('======移除监听======', res)
  229. // // uni.$off('bluetoothLink')
  230. // })
  231. if(option.state){
  232. setTimeout(()=>{
  233. getObuId()
  234. })
  235. }
  236. });
  237. onShow((option) => {
  238. })
  239. const cancel = () => {
  240. state.showPopup = false;
  241. uni.navigateBack({
  242. delta: 2
  243. })
  244. };
  245. const toPage = () => {
  246. if (!state.form.vehPosImgUrl) {
  247. msg("请上传行驶证主页")
  248. return;
  249. }
  250. if (!state.form.vehNegImgUrl) {
  251. msg("请上传行驶证副页")
  252. return;
  253. }
  254. console.log("state.form.vehicleIdNum", state.form.vehicleIdNum, orderInfos.vehiclePlate)
  255. if (state.form.vehicleIdNum == orderInfos.vehiclePlate) {
  256. activationRecordQuery().then((val) => {
  257. console.log("激活次数", val)
  258. if (val.limit) {
  259. navTo("/pages/bluetooth/bluetooth?routeType=5");
  260. } else {
  261. msg("一年内到达激活次数上限5次")
  262. }
  263. });
  264. } else {
  265. msg("请上传正确行驶证")
  266. }
  267. // navTo("/pages/bluetooth/bluetooth?routeType=6&id=" + ids);
  268. };
  269. //获取订单详情
  270. const queryOrderDetail = (id : string) => {
  271. const options = {
  272. type: 2,
  273. data: {
  274. id: id,
  275. },
  276. method: "POST",
  277. showLoading: true,
  278. };
  279. request(IFCODE.orderDetail, options).then((res) => {
  280. let orderInfo = JSON.parse(res.bizContent);
  281. console.log(orderInfo);
  282. orderInfos.orderId = orderInfo.orderId;
  283. orderInfos.ownerName = orderInfo.ownerName;
  284. orderInfos.ownerIdtype = orderInfo.ownerIdtype;
  285. orderInfos.ownerIdnum = orderInfo.ownerIdnum;
  286. orderInfos.vehiclePlate = orderInfo.vehiclePlate;
  287. orderInfos.vehiclePlateColorStr = orderInfo.vehiclePlateColorStr;
  288. orderInfos.vehiclePlateColor = orderInfo.vehiclePlateColor;
  289. orderInfos.vehicleType = orderInfo.vehicleType;
  290. orderInfos.cardId = orderInfo.cardId;
  291. orderInfos.cardStatus = orderInfo.cardStatus;
  292. orderInfos.obuId = orderInfo.obuId;
  293. orderInfos.obuStatus = orderInfo.obuStatus;
  294. let arr = orderInfo.vehicleDimensions.split("X");
  295. orderInfos.outlineL = parseInt(arr[0]); //外廓 长
  296. orderInfos.outlineW = parseInt(arr[1]); //外廓 宽
  297. orderInfos.outlineH = parseInt(arr[2].substring(0, arr[2].length - 2)); //外廓 高
  298. orderInfos.type = orderInfo.type;
  299. orderInfos.axleCount = orderInfo.vehicleAxleCount;
  300. orderInfos.approvedCount = orderInfo.vehicleApprovedCount;
  301. orderInfos.vehicleVin = orderInfo.vehicleVin;
  302. orderInfos.vehicleEngineNum = orderInfo.vehicleEngineNum;
  303. activationRecordQuery().then((val) => {
  304. console.log("jihuo", val)
  305. state.activationNum = val.num
  306. // getObuId()
  307. });
  308. });
  309. };
  310. /**
  311. * 获取OBU号 读OBU
  312. */
  313. const getObuId = () => {
  314. console.log('======获取OBU号======')
  315. let cmdArray = [cmd.HOME_DIRECTORY, cmd.OBU_SYSTEM_FILE, cmd.RANDOM_NUMBER];
  316. tools.showLoadingAlert("正在执行指令");
  317. bluetoothUtil.transCmd(cmdArray, "20", function (res) {
  318. tools.hideLoadingAlert();
  319. var status = res[1].substring(res[1].length - 4, res[1].length);
  320. console.log('获取OBU号执行结果' + status)
  321. //第一次获取随机数
  322. if (status == "9000") {
  323. obu.obuId = res[1].substring(20, 36);
  324. obu.vin = res[1].substring(18, 20);
  325. obu.version = res[1].substring(18, 19) >= 4 ? "4x" : "2x";
  326. cmdRandNum = res[2].substring(0, res[2].length - 4);
  327. console.log("obu.obuId===========", obu.obuId, res[1].substring(20, 36), cmdRandNum)
  328. getInstallApply()
  329. }
  330. });
  331. // getInstallApply()
  332. };
  333. /**
  334. * BDS-安装申请 请求
  335. */
  336. const getInstallApply = () => {
  337. console.log('======安装申请======')
  338. tools.showLoadingAlert("加载中");
  339. let options = {
  340. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  341. data: {
  342. obuId: obu.obuId,
  343. vehicleId: orderInfos.vehiclePlate + "_" + orderInfos.vehiclePlateColor,
  344. orderId: orderInfos.orderId,
  345. agentId: agentId,
  346. channelId: channelId,
  347. channelType: "1",
  348. staffId: "opId",
  349. terminalId: "999999999",
  350. }, //请求参数
  351. method: "POST", //提交方式(默认POST)
  352. showLoading: true, //是否显示加载中(默认显示)
  353. };
  354. //调用方式
  355. request(IFCODE.installApply, options)
  356. .then(() => {
  357. tools.hideLoadingAlert();
  358. //再次获取随机数
  359. getObuActivation(cmdRandNum);
  360. })
  361. };
  362. /**
  363. * VFJ-OBU在线激活 请求
  364. */
  365. const getObuActivation = (cmdRandNum : string) => {
  366. console.log('======VFJ-OBU在线激活======')
  367. tools.showLoadingAlert("加载中");
  368. let options = {
  369. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  370. data: {
  371. random: cmdRandNum,
  372. obuSerailNo: obu.obuId,
  373. orderId: orderInfos.orderId,
  374. }, //请求参数
  375. method: "POST", //提交方式(默认POST)
  376. showLoading: true, //是否显示加载中(默认显示)
  377. };
  378. //调用方式
  379. request(IFCODE.obuActivation, options)
  380. .then((res) => {
  381. tools.hideLoadingAlert();
  382. console.log("在线激活 请求");
  383. console.log(stringToJson(res.bizContent));
  384. const datas = stringToJson(res.bizContent);
  385. tools.showLoadingAlert("执行指令");
  386. bluetoothUtil.transCmd([datas.data.APDU], "20", function (res) {
  387. tools.hideLoadingAlert();
  388. console.log(res);
  389. if (res[0] == "9000") {
  390. console.log("在线激活执行指令88888 请求", res);
  391. getObuInstall(0, ""); //status 0 - 安装成功 || 1 - 安装失败
  392. }
  393. });
  394. })
  395. .catch((err) => {
  396. console.log(err);
  397. });
  398. };
  399. /**
  400. * BDS-安装确认 请求
  401. */
  402. const getObuInstall = (status : number, reason : string) => {
  403. console.log('======OBU安装确认======')
  404. tools.showLoadingAlert("加载中");
  405. let options = {
  406. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  407. data: {
  408. installStatus: status,
  409. failReason: reason,
  410. installType: "1",
  411. installChannelId: channelId,
  412. obuId: obu.obuId,
  413. orderId: orderInfos.orderId
  414. }, //请求参数
  415. method: "POST", //提交方式(默认POST)
  416. showLoading: true, //是否显示加载中(默认显示)
  417. };
  418. //调用方式
  419. request(IFCODE.obuInstall, options)
  420. .then(() => {
  421. tools.hideLoadingAlert();
  422. state.showPopup = true;
  423. submitVehicleQuery()
  424. });
  425. };
  426. const xiangce = (val) => {
  427. console.log("val", val)
  428. if (state.choiceIndex == 3) {
  429. var imageType = 1;
  430. } else {
  431. var imageType = 2;
  432. }
  433. state.changeColor = true;
  434. uni.chooseImage({
  435. count: 1, //只能选取一张照片
  436. sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有
  437. sourceType: ["album"], //从相册选择
  438. success: function (res) {
  439. console.log("tempFilePaths[0].startsWith('file://')", res.tempFilePaths[0], res.tempFilePaths[0].startsWith('file://'))
  440. if (state.choiceIndex == 3 || state.choiceIndex == 4) {
  441. state.showImg = false
  442. state.images = res.tempFilePaths[0]
  443. state.phoneType = state.choiceIndex
  444. state.isTakePhotoModeShow = false
  445. return
  446. }
  447. },
  448. })
  449. }
  450. const takePhoto = (val) => {
  451. console.log("拍照", val)
  452. state.phoneType = val;
  453. state.showImg = true;
  454. }
  455. const confirmReturn = (val) => {
  456. if (state.choiceIndex == 3) {
  457. var imageType = 1;
  458. } else {
  459. var imageType = 2;
  460. }
  461. state.changeColor = true;
  462. state.phoneType = 0
  463. state.isTakePhotoModeShow = false
  464. uploadFile(val.tempImagePath, imageType, IFCODE.etcCarOcrCard).then((data : any) => {
  465. // uploadFile(val.tempImagePath, state.choiceIndex, ocrAllQuery).then((data) => {
  466. console.log('输出内容=====================', state.choiceIndex)
  467. if (state.choiceIndex == "3") {
  468. if (data.plate_a.length > 8) {
  469. state.form.vehicleIdNum = data.plate_a.substring(0, 8);
  470. } else {
  471. state.form.vehicleIdNum = data.plate_a;
  472. }
  473. state.form.vehPosImgUrl = data.imageUrl;
  474. } else {
  475. state.form.vehNegImgUrl = data.imageUrl;
  476. console.log('=====================', state.form.vehNegImgUrl, state)
  477. }
  478. state.isTakePhotoModeShow = false
  479. })
  480. console.log("图片地址val", val.tempImagePath)
  481. }
  482. const takePhotoMode = (index) => {
  483. console.log("index", index)
  484. state.isTakePhotoModeShow = true
  485. state.choiceIndex = index
  486. }
  487. const cancle = () => {
  488. state.isTakePhotoModeShow = false
  489. }
  490. const camera = () => {
  491. state.phoneType = 0
  492. }
  493. // 查询重新激活记录
  494. const activationRecordQuery = () => {
  495. const options = {
  496. type: 2,
  497. data: {
  498. cardId: orderInfos.cardId,
  499. obuId: orderInfos.obuId,
  500. },
  501. method: "POST",
  502. showLoading: true,
  503. };
  504. return new Promise(async (resolve, reject) => {
  505. const res = await request(IFCODE.activationRecordApi, options);
  506. const data = stringToJson(res.bizContent);
  507. resolve(data);
  508. }).catch((error) => {
  509. reject(error);
  510. });
  511. }
  512. // 提交车辆信息
  513. const submitVehicleQuery = () => {
  514. const options = {
  515. type: 2,
  516. data: {
  517. cardId: orderInfos.cardId,
  518. obuId: orderInfos.obuId,
  519. vehPosImgUrl: state.form.vehPosImgUrl,
  520. vehNegImgUrl: state.form.vehNegImgUrl,
  521. vehiclePlate: orderInfos.vehiclePlate
  522. },
  523. method: "POST",
  524. };
  525. console.log("提交车辆信息成功", options)
  526. request(IFCODE.submitVehicleApi, options).then(() => {
  527. console.log("提交车辆信息成功")
  528. });
  529. }
  530. const goActivationRecord = () => {
  531. uni.navigateTo({
  532. url: `/subpackage/after-sale/activation-once-again/activation-once-again-record?obuId=${orderInfos.obuId}&&cardId=${orderInfos.cardId}`
  533. })
  534. }
  535. </script>
  536. <style>
  537. page {
  538. width: 100%;
  539. height: 100%;
  540. background-color: #fff;
  541. }
  542. </style>
  543. <style lang="scss" scoped>
  544. .mask {
  545. background: rgba(0, 0, 0, .35);
  546. position: fixed;
  547. left: 0;
  548. top: 0;
  549. bottom: 0;
  550. right: 0;
  551. }
  552. .main {
  553. width: 560rpx;
  554. padding: 25rpx 20rpx 55rpx;
  555. text-align: center;
  556. background: #fff;
  557. position: absolute;
  558. left: 50%;
  559. top: 50%;
  560. transform: translate(-50%, -50%);
  561. border-radius: 20rpx;
  562. .top {
  563. text-align: right;
  564. .icon-close {
  565. width: 48rpx;
  566. height: 48rpx;
  567. }
  568. }
  569. .icon-success {
  570. width: 500rpx;
  571. height: 320rpx;
  572. margin-top: 22rpx;
  573. }
  574. .title {
  575. color: #333333;
  576. font-size: 40rpx;
  577. font-weight: 600;
  578. text-align: center;
  579. margin-top: 55rpx;
  580. }
  581. }
  582. .selectCar-box {
  583. // width: 100%;
  584. // height: 100%;
  585. padding: 30rpx;
  586. .title {
  587. font-size: 30rpx;
  588. font-family: Microsoft YaHei UI;
  589. font-weight: 400;
  590. color: #333333;
  591. margin-bottom: 30rpx;
  592. }
  593. .details {
  594. .title {
  595. font-size: 30rpx;
  596. font-family: Microsoft YaHei UI;
  597. font-weight: 400;
  598. color: #333333;
  599. margin-bottom: 30rpx;
  600. }
  601. .details-item {
  602. display: flex;
  603. font-size: 26rpx;
  604. font-family: Noto Sans S Chinese;
  605. font-weight: 400;
  606. color: #999999;
  607. margin-bottom: 30rpx;
  608. text {
  609. font-size: 26rpx;
  610. font-family: Noto Sans S Chinese;
  611. font-weight: 400;
  612. color: #333333;
  613. }
  614. }
  615. }
  616. .card {
  617. height: 150rpx;
  618. background: #ffffff;
  619. box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
  620. border-radius: 20rpx;
  621. padding: 30rpx;
  622. display: flex;
  623. justify-content: space-between;
  624. align-items: center;
  625. margin-bottom: 60rpx;
  626. .card-left {
  627. display: flex;
  628. align-items: center;
  629. image {
  630. width: 100rpx;
  631. height: 90rpx;
  632. }
  633. .card-center {
  634. margin-left: 30rpx;
  635. .card-center-head {
  636. font-size: 32rpx;
  637. font-family: Noto Sans S Chinese;
  638. font-weight: 400;
  639. color: #333333;
  640. }
  641. .tips {
  642. font-size: 26rpx;
  643. font-family: Noto Sans S Chinese;
  644. font-weight: 400;
  645. color: #666666;
  646. .tips-card {
  647. width: 70rpx;
  648. height: 40rpx;
  649. background: #d3f2ef;
  650. border-radius: 6rpx;
  651. font-size: 20rpx;
  652. font-family: Noto Sans S Chinese;
  653. font-weight: 400;
  654. color: #0a8f8a;
  655. padding: 5rpx 10rpx;
  656. margin-left: 20rpx;
  657. }
  658. }
  659. }
  660. }
  661. .choose-item {
  662. margin-right: 20rpx;
  663. border-radius: 50%;
  664. font-size: 25rpx;
  665. .active {
  666. width: 38rpx;
  667. height: 38rpx;
  668. background: #00b38b;
  669. border-radius: 50%;
  670. }
  671. }
  672. }
  673. .remark {
  674. font-size: 26rpx;
  675. font-family: Microsoft YaHei UI;
  676. font-weight: 400;
  677. color: #666666;
  678. text-indent: 30rpx;
  679. margin-bottom: 30rpx;
  680. }
  681. .submit {
  682. margin-top: 100rpx;
  683. margin-bottom: 30rpx;
  684. width: 670rpx;
  685. height: 80rpx;
  686. background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
  687. border-radius: 40rpx;
  688. font-size: 32rpx;
  689. font-family: Noto Sans S Chinese;
  690. font-weight: 400;
  691. color: #ffffff;
  692. line-height: 80rpx;
  693. }
  694. }
  695. .picture-wrapper {
  696. margin-top: 40rpx;
  697. .bg {
  698. background: #ffffff;
  699. box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
  700. border-radius: 20rpx;
  701. padding: 40rpx;
  702. display: flex;
  703. // align-items: center;
  704. justify-content: space-between;
  705. .name {
  706. font-size: 34rpx;
  707. font-family: Microsoft YaHei;
  708. font-weight: 400;
  709. color: #000000;
  710. line-height: 34rpx;
  711. }
  712. .value {
  713. margin-top: 20rpx;
  714. font-size: 24rpx;
  715. font-family: Microsoft YaHei;
  716. font-weight: 400;
  717. color: #999999;
  718. line-height: 24rpx;
  719. }
  720. .tip {
  721. margin-top: 20rpx;
  722. text-align: center;
  723. width: 110rpx;
  724. height: 40rpx;
  725. background: rgba(33, 190, 177, 0.2);
  726. border-radius: 6rpx;
  727. .tip-value {
  728. font-size: 20rpx;
  729. font-family: Microsoft YaHei;
  730. font-weight: 400;
  731. color: #0a8f8a;
  732. line-height: 40rpx;
  733. opacity: 1;
  734. }
  735. }
  736. }
  737. .icon {
  738. width: 294rpx;
  739. height: 188rpx;
  740. }
  741. }
  742. .choice-takePhoto {
  743. position: absolute;
  744. bottom: 0;
  745. background-color: white;
  746. width: 100%;
  747. border-radius: 20rpx 20rpx 0 0;
  748. }
  749. .choice-takePhoto>view:first-child {
  750. text-align: center;
  751. height: 80rpx;
  752. line-height: 80rpx;
  753. border-bottom: 1rpx solid rgba(127, 127, 127, 0.3);
  754. background-color: white;
  755. }
  756. .choice-takePhoto>view:last-child {
  757. text-align: center;
  758. height: 80rpx;
  759. line-height: 80rpx;
  760. border-top: 6rpx solid rgba(127, 127, 127, 0.1);
  761. background-color: white;
  762. }
  763. .choice-takePhoto>view {
  764. text-align: center;
  765. height: 80rpx;
  766. line-height: 80rpx;
  767. background-color: white;
  768. }
  769. .choice-takePhoto-wrap {
  770. width: 100%;
  771. height: 100vh;
  772. background-color: rgba(127, 127, 127, 0.2);
  773. position: fixed;
  774. left: 0;
  775. top: 0;
  776. z-index: 11111;
  777. }
  778. .record {
  779. height: 40rpx;
  780. background: #d3f2ef;
  781. border-radius: 6rpx;
  782. font-size: 20rpx;
  783. font-family: Noto Sans S Chinese;
  784. font-weight: 400;
  785. color: #0a8f8a;
  786. padding: 5rpx 10rpx;
  787. margin-left: 60rpx;
  788. }
  789. </style>