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 20KB

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