您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

car-release.vue 23KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846
  1. <template>
  2. <navBar title="行驶证信息上传" :scrollTop="scrollTop"></navBar>
  3. <navBgCar></navBgCar>
  4. <view class="content">
  5. <view class="item-tips">
  6. <view class="title"> 上传后请核对识别信息 </view>
  7. <view class="tip"> 如有错误请及时手动修改 </view>
  8. </view>
  9. <view class="picture-wrapper" @click="cardImageOcr('1')">
  10. <view class="bg">
  11. <view class="">
  12. <view class="name"> 行驶证主页 </view>
  13. <view class="value"> 上传行驶证的主页 </view>
  14. <view class="tip">
  15. <view class="tip-value"> 拍摄规范 </view>
  16. </view>
  17. </view>
  18. <image v-if="!state.form.vehPosImgUrl" class="icon" :src="`${$imgUrl}applyCard/car-zhu.png`">
  19. </image>
  20. <image v-else class="icon" :src="strReplace(state.form.vehPosImgUrl)"></image>
  21. </view>
  22. </view>
  23. <view class="picture-wrapper" @click="cardImageOcr('2')">
  24. <view class="bg">
  25. <view class="">
  26. <view class="name"> 行驶证副页 </view>
  27. <view class="value"> 上传行驶证的副页 </view>
  28. <view class="tip">
  29. <view class="tip-value"> 拍摄规范 </view>
  30. </view>
  31. </view>
  32. <image v-if="!state.form.vehNegImgUrl" class="icon" :src="`${$imgUrl}applyCard/car-fu.png`">
  33. </image>
  34. <image v-else class="icon" :src="strReplace(state.form.vehNegImgUrl)"></image>
  35. </view>
  36. </view>
  37. <view class="picture-wrapper" @click="cardFileImageUpdate()">
  38. <view class="bg">
  39. <view class="">
  40. <view class="name"> 车头照 </view>
  41. <view class="value"> 上传汽车的车头照片 </view>
  42. <view class="tip">
  43. <view class="tip-value"> 拍摄规范 </view>
  44. </view>
  45. </view>
  46. <image v-if="!state.form.vehBodyUrl" class="icon" :src="`${$imgUrl}applyCard/chetou.png`">
  47. </image>
  48. <image v-else class="icon" :src="strReplace(state.form.vehBodyUrl)"></image>
  49. </view>
  50. </view>
  51. <view class="shibie-wrapper">
  52. <view class="title"> 识别内容如下 </view>
  53. <view class="">
  54. <u-form label-width="200" :model="state.form" ref="uForm">
  55. <u-form-item label="车牌号" >
  56. <!-- <u-input inputAlign="right" placeholder='请输入车牌号' v-model="state.form.vehicleIdNum" /> -->
  57. <car-number-input @numberInputResult="carNumber"
  58. :defaultStr="state.form.vehicleIdNum" ></car-number-input>
  59. </u-form-item>
  60. <u-form-item label="所有人">
  61. <u-input inputAlign="right" placeholder="请输入所有人" v-model="state.form.man" :disabled="state.isEnableChangeOCRCarInfo"/>
  62. </u-form-item>
  63. <u-form-item label="车辆类型">
  64. <u-input inputAlign="right" placeholder="请输入车辆类型" v-model="state.form.vehicleType" :disabled="state.isEnableChangeOCRCarInfo"/>
  65. </u-form-item>
  66. <u-form-item label="使用性质">
  67. <u-input inputAlign="right" placeholder="请输入使用性质" v-model="state.form.character" :disabled="state.isEnableChangeOCRCarInfo"/>
  68. </u-form-item>
  69. <u-form-item label="车辆识别代号">
  70. <u-input inputAlign="right" placeholder="请输入车辆识别代号" v-model="state.form.vin" :disabled="state.isEnableChangeOCRCarInfo"/>
  71. </u-form-item>
  72. <u-form-item label="发动机号码">
  73. <u-input inputAlign="right" placeholder="请输入发动机号码" v-model="state.form.engineNum" :disabled="state.isEnableChangeOCRCarInfo"/>
  74. </u-form-item>
  75. <u-form-item label="注册日期">
  76. <picker mode="date" :value="state.form.register" @change="bindDateChange1" :disabled="state.isEnableChangeOCRCarInfo">
  77. <view class="uni-input" style="text-align: right;" :class="state.changeColor?'hei':'hui'">{{state.form.register}}</view>
  78. </picker>
  79. <!-- <u-input inputAlign="right" placeholder="请输入注册日期" v-model="state.form.register" :disabled="state.isEnableChangeOCRCarInfo" /> -->
  80. </u-form-item>
  81. <u-form-item label="发证日期">
  82. <picker mode="date" :value="state.form.issueDate" @change="bindDateChange2" :disabled="state.isEnableChangeOCRCarInfo">
  83. <view class="uni-input" style="text-align: right;" :class="state.changeColor?'hei':'hui'">{{state.form.issueDate}}</view>
  84. </picker>
  85. <!-- <u-input inputAlign="right" placeholder="请输入发证日期" v-model="state.form.issueDate" :disabled="state.isEnableChangeOCRCarInfo"/> -->
  86. </u-form-item>
  87. <u-form-item label="核定载人数">
  88. <u-input inputAlign="right" placeholder="请输入核定载人数" v-model="state.form.approvedCount" :disabled="state.isEnableChangeOCRCarInfo"/>
  89. </u-form-item>
  90. <u-form-item label="整备质量">
  91. <u-input inputAlign="right" placeholder="请输入整备质量" v-model="state.form.maintenaceMass" :disabled="state.isEnableChangeOCRCarInfo"/>
  92. </u-form-item>
  93. <!-- <u-form-item label="外廊尺寸">
  94. <u-input inputAlign="right" placeholder='请输入外廊尺寸' v-model="state.form.vehicleDimensions" />
  95. </u-form-item> -->
  96. <view class="form-item">
  97. <label>外廊尺寸</label>
  98. <view class="input-box">
  99. <text class="sub-label">长</text>
  100. <input v-model="state.outlineL" @input="outlineInput" :disabled="state.isEnableChangeOCRCarInfo"/>
  101. <text class="sub-text">X</text>
  102. <text class="sub-label">宽</text>
  103. <input v-model="state.outlineW" @input="outlineInput" :disabled="state.isEnableChangeOCRCarInfo"/>
  104. <text class="sub-text">X</text>
  105. <text class="sub-label">高</text>
  106. <input v-model="state.outlineH" @input="outlineInput" :disabled="state.isEnableChangeOCRCarInfo"/>
  107. <text class="sub-text">mm</text>
  108. </view>
  109. </view>
  110. <u-form-item label="总质量">
  111. <u-input inputAlign="right" placeholder="请输入总质量" v-model="state.form.totalMass" :disabled="state.isEnableChangeOCRCarInfo"/>
  112. </u-form-item>
  113. <view class="form-item">
  114. <label>车辆用户类型</label>
  115. <view class="select" @click="state.actionSheetShow = true">{{state.form.useUserTypeName}}</view>
  116. <image :src="`${$imgUrl}common/arror-down.png`" class="icon"
  117. @click="state.actionSheetShow = true"></image>
  118. </view>
  119. <!-- <u-form-item label="车辆用户类型">
  120. <u-input @click="state.actionSheetShow = true" placeholder="请输入车辆用户类型" inputAlign="right"
  121. v-model="state.form.useUserTypeName" height="38" type="textarea" :autoHeight="true" />
  122. </u-form-item> -->
  123. </u-form>
  124. </view>
  125. </view>
  126. <view class="green-tip">
  127. 如识别信息有误,请手动修改,确认无误后,点击下一步!
  128. </view>
  129. <view class="action">
  130. <button type="default" class="button" @click="savaHandle()">
  131. 下一步
  132. </button>
  133. </view>
  134. <!-- <u-select v-model="state.actionSheetShow" :list="state.actionSheetList" @confirm="selectConfirm"></u-select>
  135. <u-action-sheet @click="selectConfirm" :list="state.actionSheetList" v-model="state.actionSheetShow">
  136. </u-action-sheet> -->
  137. <!-- 车辆类型弹窗 -->
  138. <u-popup mode="bottom" v-model="state.actionSheetShow">
  139. <view class="window">
  140. <view class="window-item" v-for="item in state.actionSheetList" :key="item.value"
  141. @click="userType(item)">{{item.text}}</view>
  142. </view>
  143. </u-popup>
  144. <u-popup mode="bottom" v-model="state.show">
  145. <view v-if="state.data.transferLogs && state.data.transferLogs.length" class="">
  146. <view class="bettwen-center">
  147. <view style="padding: 20rpx" class="title"> 选择卡签 </view>
  148. <view class="goto" > 直接跳过,不使用此套卡签 </view>
  149. </view>
  150. <view @click="guohuAction(item)" class="card" v-for="(item, index) in state.data.transferLogs"
  151. :key="index" style="margin-top: 30rpx; margin-bottom: 30rpx">
  152. <view v-if="item.status === 'WAITING'" class="card-left">
  153. <image :src="`${$imgUrl}card2.png`" mode=""></image>
  154. <view class="card-center">
  155. <view class="flex">
  156. <view class=""> 卡号: </view>
  157. <view class="card-center-head">
  158. {{ item.cardId }}
  159. </view>
  160. </view>
  161. <view style="margin-top: 10rpx" class="flex">
  162. <view class=""> OBU编号: </view>
  163. <view class="card-center-head">
  164. {{ item.obuId }}
  165. </view>
  166. </view>
  167. </view>
  168. </view>
  169. </view>
  170. </view>
  171. </u-popup>
  172. </view>
  173. </template>
  174. <script setup lang="ts">
  175. import { reactive, ref } from "vue";
  176. import navBgCar from "./components/nav-bg-car4";
  177. import navBar from "@/components/nav-bar/nav-bar2.vue";
  178. import carNumberInput from "@/components/car-number-input/car-number-input.vue";
  179. import { pathToBase64 } from "@/utils/util/imageTool.js";
  180. import {
  181. etcCarCardInfoSubmit,
  182. etcCarOcrCard,
  183. fileUpload,
  184. envs,
  185. queryGuoHuJianCe,
  186. queryGuoHuCaoZuo,
  187. } from "@/utils/network/api.js";
  188. import { request } from "@/utils/network/request.js";
  189. import { stringToJson } from "@/utils/network/encryption";
  190. import { onLoad, onPageScroll } from "@dcloudio/uni-app";
  191. import { getObuStatus } from "@/datas/obuStatus.js";
  192. import { getEtcCardStatus } from "@/datas/etcCardStatus.js";
  193. import { getItem } from "@/utils/storage";
  194. import {hasLogin} from "@/utils/utils.ts"
  195. import {
  196. getCodeName
  197. } from "@/datas/queryKey.js";
  198. const scrollTop = ref(0);
  199. //监听页面滚动
  200. onPageScroll((e) => {
  201. scrollTop.value = e.scrollTop;
  202. });
  203. //车牌号输入
  204. const carNumber = (val : any) => {
  205. state.form.vehicleIdNum = val.trim();
  206. };
  207. //提交车辆信息
  208. const savaHandle = () => {
  209. state.form.vehicleId =
  210. state.form.vehicleIdNum + "_" + state.vehiclePlateColor;
  211. const options = {
  212. type: 2,
  213. data: state.form,
  214. method: "POST",
  215. showLoading: true,
  216. };
  217. request(etcCarCardInfoSubmit, options)
  218. .then((res) => {
  219. const data = stringToJson(res.bizContent);
  220. queryGuoHuJianCeAction().then((value) => {
  221. if (value.transferLogs && value.transferLogs.length > 0) {
  222. state.data.transferLogs = value.transferLogs;
  223. state.show = true;
  224. } else {
  225. // 签约
  226. if(state.isSign == 1 || state.isSign == 3){
  227. if (!hasLogin()) {
  228. uni.redirectTo({
  229. url: `/subpackage/orders/addAddress?orderId=${state.form.orderId
  230. }&clientFee=${getItem("clientFee")}&&id=${getItem("productId")}`,
  231. });
  232. } else {
  233. uni.redirectTo({
  234. // url: `/subpackage/orders/choice-product?orderId=${state.form.orderId}`,
  235. url: `/subpackage/orders/release-products?orderId=${state.form.orderId
  236. }&clientFee=${getItem("clientFee")}&&id=${getItem("productId")}`,
  237. });
  238. }
  239. }else{
  240. // 不签约
  241. uni.redirectTo({
  242. url: `/subpackage/orders/sign-up?orderId=${state.form.orderId}&&clientFee=${getItem("clientFee")}&&id=${getItem("productId")}`,
  243. });
  244. }
  245. }
  246. });
  247. })
  248. .catch((res) => {
  249. console.log(res);
  250. });
  251. };
  252. const selectConfirm = (index : any) => {
  253. console.log(index);
  254. state.form.useUserType = state.actionSheetList[index].value;
  255. state.form.useUserTypeName = state.actionSheetList[index].text;
  256. };
  257. //选择车辆用户类型
  258. const userType = (item : any) => {
  259. state.form.useUserType = item.value;
  260. state.form.useUserTypeName = item.text;
  261. state.actionSheetShow = false;
  262. }
  263. //车头照图片上传
  264. const cardFileImageUpdate = () => {
  265. uni.chooseImage({
  266. count: 1, //只能选取一张照片
  267. sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有
  268. sourceType: ["camera", "album"], //从相册选择
  269. success: function (res) {
  270. pathToBase64(res.tempFilePaths[0])
  271. .then((path) => {
  272. var data = {
  273. fileBase64: path,
  274. };
  275. const options = {
  276. type: 2,
  277. data: data,
  278. method: "POST",
  279. showLoading: true,
  280. };
  281. request(fileUpload, options).then((res) => {
  282. const data = stringToJson(res.bizContent);
  283. console.log(data);
  284. state.form.vehBodyUrl = data.data.url;
  285. });
  286. })
  287. .catch((error) => { });
  288. },
  289. });
  290. };
  291. const state = reactive({
  292. changeColor:false,
  293. data: {
  294. transferLogs: [],
  295. },
  296. actionSheetShow: false,
  297. actionSheetList: [],
  298. form: {
  299. orderId: "", //订单ID
  300. man: "", //所有人
  301. character: "", //使用性质
  302. register: "请输入注册日期", //注册日期
  303. customerId: "", //用户编号
  304. vehicleId: "",
  305. vehicleIdNum: "", //车牌编号
  306. issueDate: "请输入发证日期", //发证日期
  307. vehPosImgUrl: "", //行驶证正面
  308. vehNegImgUrl: "", //行驶证证反面
  309. type: "0", //0,客车 1.货车
  310. useUserType: 0, //车辆用户类型
  311. useUserTypeName: "普通车",
  312. vehicleSign: 2, //前/后装标识
  313. vin: "", //车辆识别代号
  314. engineNum: "", //发动机号码
  315. vehicleType: "", //车辆类型
  316. vehicleModel: "", //行驶证品牌型号
  317. approvedCount: undefined, //核定人数
  318. totalMass: undefined, //总质量
  319. maintenaceMass: undefined, //整备质量
  320. permittedWeight: "", //核定载质量
  321. vehicleDimensions: "", //车辆尺寸
  322. permittedTowWeight: "", //准牵引总质量
  323. axleCount: "", //车轴数
  324. ownerName: "", //车主姓名
  325. ownerIdType: "", //车主证件类型
  326. ownerIdNum: "", //车主证件号码
  327. ownPosImgUrl: "", //车主证件正面图片
  328. ownNegImgUrl: "", //车主证件反面图片
  329. agreementId: "", //签约编号
  330. channelId: "5201018892300000001", //编号渠道
  331. scenePayType: "", //
  332. transportIdNum: "", //道路运输证编号
  333. licenseIdNum: "", //经营许可证编号
  334. vehBodyUrl: "", //车身照片
  335. proxyUrl: "", //委托书地址
  336. },
  337. vehiclePlateColor: undefined,
  338. orderId: "",
  339. // type: undefined, //标记来源是否登录 1为未登录数据 - 需要新增地址
  340. show: false,
  341. isMyPeopple: true,
  342. outlineL: "",
  343. outlineW: "",
  344. outlineH: "",
  345. isSign:'',
  346. isEnableChangeOCRCarInfo:true, //申办时是否允许修改OCR识别出来的车辆信息数据
  347. });
  348. onLoad((option : any) => {
  349. state.form.orderId = option.orderId;
  350. // state.type = option.type;
  351. state.form.type = option.type;
  352. state.vehiclePlateColor = option.vehiclePlateColor;
  353. state.isSign=option.isSign
  354. console.log("option",option)
  355. getGlobalParam();
  356. if(option.type==1){
  357. state.actionSheetList=[{
  358. text: "普通车",
  359. value: 0,
  360. }]
  361. }else{
  362. state.actionSheetList=[{
  363. text: "普通车",
  364. value: 0,
  365. },
  366. {
  367. text: "道路运输证经营范围仅有“货物专用运输(集装箱) ”的牵引车办理J类型集装箱",
  368. value: 24,
  369. },
  370. {
  371. text: "道路运输证经营范围不含“货物专用运输(集装箱)”的牵引车",
  372. value: 27,
  373. },
  374. {
  375. text: '道路运输证经营范围除“货物专用运输 (集装 箱)"外,还有“普通货运”等其他项目的牵引车办理J2类型集装箱',
  376. value: 28,
  377. }]
  378. }
  379. });
  380. //外廓尺寸输入框
  381. const outlineInput = (e) => {
  382. state.form.vehicleDimensions =
  383. state.outlineL + "X" + state.outlineW + "X" + state.outlineH + "mm";
  384. };
  385. //orc接口调用
  386. const cardImageOcr = (val : any) => {
  387. state.changeColor=true;
  388. var imageType = val;
  389. uni.chooseImage({
  390. count: 1, //只能选取一张照片
  391. sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有
  392. sourceType: ["camera", "album"], //从相册选择
  393. success: function (res) {
  394. pathToBase64(res.tempFilePaths[0])
  395. .then((path) => {
  396. console.log("Base64返回",path)
  397. var data = {
  398. source: "1",
  399. agencyId: "52010106004",
  400. imageType: imageType,
  401. fileName: res.tempFilePaths[0],
  402. imageBase64: path,
  403. };
  404. const options = {
  405. type: 2,
  406. data: data,
  407. method: "POST",
  408. showLoading: true,
  409. };
  410. request(etcCarOcrCard, options).then((res) => {
  411. const data = stringToJson(res.bizContent);
  412. console.log(data);
  413. if (val === "1") {
  414. state.form.vehicleIdNum = data.plate_a;
  415. state.form.man = data.man;
  416. state.form.vehicleType = data.vehicle;
  417. state.form.character = data.character;
  418. state.form.vin = data.vin;
  419. state.form.engineNum = data.engine;
  420. state.form.register = data.register;
  421. state.form.issueDate = data.issue;
  422. state.form.vehPosImgUrl = data.imageUrl;
  423. state.form.vehicleModel = data.model;
  424. } else {
  425. state.form.approvedCount = parseFloat(data.apc);
  426. state.form.maintenaceMass = parseFloat(data.unladen);
  427. state.form.vehicleDimensions = data.overall.replaceAll("x", "X");
  428. let arr = data.overall.split("x");
  429. state.outlineL = arr[0]; //外廓 长
  430. state.outlineW = arr[1]; //外廓 宽
  431. state.outlineH = arr[2].substring(0, arr[2].length - 2); //外廓 高
  432. state.form.totalMass = parseFloat(data.gross);
  433. state.form.vehNegImgUrl = data.imageUrl;
  434. }
  435. });
  436. })
  437. .catch((error) => { console.log("Base64异常",error)});
  438. },
  439. });
  440. };
  441. //过户检测
  442. const queryGuoHuJianCeAction = () => {
  443. var data = {
  444. orderId: state.form.orderId,
  445. };
  446. const options = {
  447. type: 2,
  448. data: data,
  449. method: "POST",
  450. showLoading: true,
  451. };
  452. return new Promise(async (resolve, reject) => {
  453. const res = await request(queryGuoHuJianCe, options);
  454. const data = stringToJson(res.bizContent);
  455. resolve(data);
  456. }).catch((error) => {
  457. reject(error);
  458. });
  459. };
  460. //过户操作
  461. const guohuAction = (val) => {
  462. var data = {
  463. orderId: state.form.orderId,
  464. serviceType: "USE",
  465. obuId: val.obuId,
  466. cardId: val.cardId,
  467. };
  468. const options = {
  469. type: 2,
  470. data: data,
  471. method: "POST",
  472. showLoading: true,
  473. };
  474. return new Promise(async (resolve, reject) => {
  475. const res = await request(queryGuoHuCaoZuo, options);
  476. const data = stringToJson(res.bizContent);
  477. state.show = false;
  478. uni.navigateTo({
  479. url: `/subpackage/orders/choice-product?orderId=${state.form.orderId}`,
  480. });
  481. }).catch((error) => {
  482. reject(error);
  483. });
  484. };
  485. //替换图片地址
  486. const strReplace = (str : string) => {
  487. return str.replace("http://192.168.101.145:9000", envs[process.env.NODE_ENV].baseUrl);
  488. };
  489. const getGlobalParam=()=>{
  490. const data=getItem('globalParam')
  491. console.log("全局配置数据",getCodeName('IS_ENABLE',data.applyChangeOCRCarInfo))
  492. // 申办时是否允许修改OCR识别出来的车辆信息数据
  493. if(getCodeName('IS_ENABLE',data.applyChangeOCRCarInfo)=='启用'){
  494. state.isEnableChangeOCRCarInfo=true;
  495. }else{
  496. state.isEnableChangeOCRCarInfo=false;
  497. }
  498. }
  499. const bindDateChange1=(e)=> {
  500. state.form.register = e.detail.value
  501. state.changeColor=true;
  502. }
  503. const bindDateChange2=(e)=> {
  504. state.form.issueDate = e.detail.value
  505. state.changeColor=true;
  506. }
  507. </script>
  508. <style lang="scss" scoped>
  509. .hui{
  510. color: #ccc;
  511. }
  512. .hei{
  513. color: black;
  514. }
  515. .goto {
  516. margin-right: 20rpx;
  517. padding: 10rpx;
  518. color: #00b38b;
  519. border: 1rpx solid #00b38b;
  520. border-radius: 20rpx;
  521. }
  522. .flex {
  523. display: flex;
  524. align-items: center;
  525. }
  526. .bettwen-center {
  527. display: flex;
  528. align-items: center;
  529. justify-content: space-between;
  530. }
  531. .card {
  532. margin: 20rpx;
  533. height: 150rpx;
  534. background: #ffffff;
  535. box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
  536. border-radius: 20rpx;
  537. padding: 20rpx;
  538. display: flex;
  539. justify-content: space-between;
  540. align-items: center;
  541. margin-bottom: 30rpx;
  542. .card-left {
  543. display: flex;
  544. align-items: center;
  545. image {
  546. width: 100rpx;
  547. height: 90rpx;
  548. }
  549. .card-center {
  550. margin-left: 30rpx;
  551. .card-center-head {
  552. font-size: 32rpx;
  553. font-family: Noto Sans S Chinese;
  554. font-weight: 400;
  555. color: #333333;
  556. }
  557. .tips {
  558. font-size: 26rpx;
  559. font-family: Noto Sans S Chinese;
  560. font-weight: 400;
  561. color: #666666;
  562. .tips-card {
  563. width: 70rpx;
  564. height: 40rpx;
  565. background: #d3f2ef;
  566. border-radius: 6rpx;
  567. font-size: 20rpx;
  568. font-family: Noto Sans S Chinese;
  569. font-weight: 400;
  570. color: #0a8f8a;
  571. padding: 5rpx 10rpx;
  572. margin-left: 20rpx;
  573. }
  574. }
  575. }
  576. }
  577. .choose-item {
  578. margin-right: 20rpx;
  579. width: 50rpx;
  580. height: 50rpx;
  581. border: 1rpx solid #00b38b;
  582. border-radius: 50%;
  583. display: flex;
  584. justify-content: center;
  585. align-items: center;
  586. .active {
  587. width: 38rpx;
  588. height: 38rpx;
  589. background: #00b38b;
  590. border-radius: 50%;
  591. }
  592. }
  593. }
  594. .content {
  595. position: relative;
  596. margin-top: -50rpx;
  597. padding: 0rpx 30rpx;
  598. position: relative;
  599. .img-pos {
  600. position: absolute;
  601. left: 270rpx;
  602. top: -38rpx;
  603. right: 50rpx;
  604. .img-flex {
  605. display: flex;
  606. justify-content: space-between;
  607. align-items: center;
  608. .car-img {
  609. width: 86rpx;
  610. height: 42rpx;
  611. }
  612. .flag-img {
  613. width: 30rpx;
  614. height: 35rpx;
  615. }
  616. }
  617. }
  618. .action {
  619. padding-left: 20rpx;
  620. padding-right: 20rpx;
  621. padding-bottom: 30rpx;
  622. .button {
  623. height: 80rpx;
  624. background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
  625. border-radius: 40rpx;
  626. font-size: 32rpx;
  627. font-weight: 400;
  628. color: #ffffff;
  629. line-height: 80rpx;
  630. }
  631. }
  632. .item-tips {
  633. .title {
  634. font-size: 30rpx;
  635. font-family: Microsoft YaHei;
  636. font-weight: 400;
  637. color: #000000;
  638. line-height: 24rpx;
  639. }
  640. .tip {
  641. margin-top: 16rpx;
  642. font-size: 24rpx;
  643. font-family: Microsoft YaHei;
  644. font-weight: 400;
  645. color: #999999;
  646. line-height: 24rpx;
  647. }
  648. }
  649. .picture-wrapper {
  650. margin-top: 40rpx;
  651. .bg {
  652. background: #ffffff;
  653. box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
  654. border-radius: 20rpx;
  655. padding: 40rpx;
  656. display: flex;
  657. // align-items: center;
  658. justify-content: space-between;
  659. .name {
  660. font-size: 34rpx;
  661. font-family: Microsoft YaHei;
  662. font-weight: 400;
  663. color: #000000;
  664. line-height: 34rpx;
  665. }
  666. .value {
  667. margin-top: 20rpx;
  668. font-size: 24rpx;
  669. font-family: Microsoft YaHei;
  670. font-weight: 400;
  671. color: #999999;
  672. line-height: 24rpx;
  673. }
  674. .tip {
  675. margin-top: 20rpx;
  676. text-align: center;
  677. width: 110rpx;
  678. height: 40rpx;
  679. background: rgba(33, 190, 177, 0.2);
  680. border-radius: 6rpx;
  681. .tip-value {
  682. font-size: 20rpx;
  683. font-family: Microsoft YaHei;
  684. font-weight: 400;
  685. color: #0a8f8a;
  686. line-height: 40rpx;
  687. opacity: 1;
  688. }
  689. }
  690. }
  691. .icon {
  692. width: 294rpx;
  693. height: 188rpx;
  694. }
  695. }
  696. .shibie-wrapper {
  697. margin-top: 60rpx;
  698. .title {
  699. font-size: 30rpx;
  700. font-family: Microsoft YaHei;
  701. font-weight: 400;
  702. color: #000000;
  703. line-height: 30rpx;
  704. }
  705. }
  706. .buchong-wrapper {
  707. margin-top: 60rpx;
  708. .title {
  709. font-size: 30rpx;
  710. font-family: Microsoft YaHei;
  711. font-weight: 400;
  712. color: #000000;
  713. line-height: 30rpx;
  714. }
  715. }
  716. .green-tip {
  717. margin-top: 50rpx;
  718. font-size: 24rpx;
  719. font-family: Microsoft YaHei;
  720. font-weight: 400;
  721. color: #00b38b;
  722. line-height: 24rpx;
  723. margin-bottom: 60rpx;
  724. }
  725. }
  726. .form-item {
  727. display: flex;
  728. font-size: 28rpx;
  729. justify-content: space-between;
  730. align-items: center;
  731. }
  732. .form-item label {}
  733. .form-item .input-box {
  734. display: flex;
  735. align-items: center;
  736. }
  737. .form-item .select {
  738. flex: 1;
  739. background: #f1f1f1;
  740. padding: 6rpx 20rpx;
  741. margin: 0 10rpx;
  742. min-height: 48rpx;
  743. line-height: 48rpx;
  744. border-radius: 8rpx;
  745. }
  746. .form-item .icon {
  747. width: 28rpx;
  748. height: 32rpx;
  749. }
  750. .form-item .input-box input {
  751. width: 90rpx;
  752. background: #f1f1f1;
  753. border-radius: 8rpx;
  754. padding: 0 5rpx;
  755. }
  756. .form-item .sub-text {
  757. color: #808080;
  758. padding-left: 10rpx;
  759. }
  760. .form-item .sub-label {
  761. padding: 0 10rpx;
  762. }
  763. .window {
  764. padding: 60rpx 30rpx;
  765. }
  766. .window .window-item {
  767. border: 1px solid #00b38b;
  768. background: rgba(0, 179, 139, .1);
  769. border-radius: 10rpx;
  770. padding: 16rpx 30rpx;
  771. font-size: 30rpx;
  772. margin-bottom: 10rpx;
  773. }
  774. ::v-deep .u-input__input{
  775. background: transparent;
  776. }
  777. </style>