Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

rescind-carId-select.vue 22KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855
  1. <template>
  2. <!-- <view class="content-wrap">
  3. <view @click="tabChange(true)">
  4. <view :class="state.isMyPeopple ? 'big' : 'nomal'"> 本人车辆 </view>
  5. <view :class="state.isMyPeopple ? 'tip' : ''"> </view>
  6. </view>
  7. <view @click="tabChange(false)" style="margin-left: 60rpx" class="">
  8. <view :class="state.isMyPeopple ? 'nomal' : 'big'"> 他人车辆 </view>
  9. <view :class="state.isMyPeopple ? '' : 'tip'"> </view>
  10. </view>
  11. </view> -->
  12. <!-- <view v-if="state.isMyPeopple" class="content">
  13. <view class="item" v-for="(item, i) in list" :key="i">
  14. <view class="iten-left">
  15. <image :src="`${$imgUrl}che.png`" mode=""></image>
  16. <text>{{ item.name }}</text>
  17. </view>
  18. <view class="choose-item" @click="choose(i, item)">
  19. <view class="active" v-if="flag == i"> </view>
  20. </view>
  21. </view>
  22. </view> -->
  23. <view class="content">
  24. <view class="title"> 车主信息 </view>
  25. <view class="item-tips">
  26. <view class="title"> 上传后请核对识别信息 </view>
  27. <view class="tip"> 如有错误请及时手动修改 </view>
  28. </view>
  29. <view class="picture-wrapper" @click="takePhotoMode('1')">
  30. <view class="bg">
  31. <view class="">
  32. <view class="name"> 人像面 </view>
  33. <view class="value"> 上传身份证的人像面 </view>
  34. <view class="tip">
  35. <view class="tip-value"> 拍摄规范 </view>
  36. </view>
  37. </view>
  38. <image v-if="!state.form.userPosImgUrl" class="icon" :src="`${$imgUrl}applyCard/renxiang.png`">
  39. </image>
  40. <image v-else class="icon" :src="strReplace(state.form.userPosImgUrl)"></image>
  41. </view>
  42. </view>
  43. <view class="picture-wrapper" @click="takePhotoMode('2')">
  44. <view class="bg">
  45. <view class="">
  46. <view class="name"> 国徽面 </view>
  47. <view class="value"> 上传身份证的国徽面 </view>
  48. <view class="tip">
  49. <view class="tip-value"> 拍摄规范 </view>
  50. </view>
  51. </view>
  52. <image v-if="!state.form.userNegImgUrl" class="icon" :src="`${$imgUrl}applyCard/guohui.png`">
  53. </image>
  54. <image v-else class="icon" :src="strReplace(state.form.userNegImgUrl)"></image>
  55. </view>
  56. </view>
  57. <view class="shibie-wrapper">
  58. <!-- <view class="title"> 识别内容如下 </view>
  59. <u-form label-width="200" :model="state.form" ref="uForm">
  60. <u-form-item label="姓名">
  61. <u-input v-model="state.form.userName" />
  62. </u-form-item>
  63. <u-form-item label="性别">
  64. <u-input v-model="state.form.gender" type="select" />
  65. </u-form-item>
  66. <u-form-item label="身份证号">
  67. <u-input v-model="state.form.userIdNum" />
  68. </u-form-item>
  69. <u-form-item label="证件有效期">
  70. <u-input v-model="state.form.tmerValidity" type="select" />
  71. </u-form-item>
  72. <u-form-item label="地址">
  73. <u-input v-model="state.form.address" />
  74. </u-form-item>
  75. </u-form> -->
  76. </view>
  77. <view style="margin-top: 30rpx" class="title"> 行驶证信息 </view>
  78. <view class="item-tips">
  79. <view class="title"> 上传后请核对识别信息 </view>
  80. <view class="tip"> 如有错误请及时手动修改 </view>
  81. </view>
  82. <view class="picture-wrapper" @click="takePhotoMode('3')">
  83. <view class="bg">
  84. <view class="">
  85. <view class="name"> 行驶证正页 </view>
  86. <view class="value"> 上传 行驶证正页 </view>
  87. <view class="tip">
  88. <view class="tip-value"> 拍摄规范 </view>
  89. </view>
  90. </view>
  91. <image v-if="!state.form.vehPosImgUrl" class="icon" :src="`${$imgUrl}applyCard/car-zhu.png`">
  92. </image>
  93. <image v-else class="icon" :src="strReplace(state.form.vehPosImgUrl)"></image>
  94. </view>
  95. </view>
  96. <view class="picture-wrapper" @click="takePhotoMode('4')">
  97. <view class="bg">
  98. <view class="">
  99. <view class="name"> 行驶证副页 </view>
  100. <view class="value"> 上传行驶证副页 </view>
  101. <view class="tip">
  102. <view class="tip-value"> 拍摄规范 </view>
  103. </view>
  104. </view>
  105. <image v-if="!state.form.vehNegImgUrl" class="icon" :src="`${$imgUrl}applyCard/car-fu.png`">
  106. </image>
  107. <image v-else class="icon" :src="strReplace(state.form.vehNegImgUrl)"></image>
  108. </view>
  109. </view>
  110. <view class="picture-wrapper" @click="cardFileImageUpdate(1)">
  111. <view class="bg">
  112. <view class="">
  113. <view class="name"> 人车合影 </view>
  114. <view class="value"> 上传人车合影照片 </view>
  115. <view class="tip">
  116. <view class="tip-value"> 拍摄规范 </view>
  117. </view>
  118. </view>
  119. <image v-if="!state.FormData.peopleVehicleImgUrl" class="icon" :src="`${$imgUrl}applyCard/chetou.png`">
  120. </image>
  121. <image v-else class="icon" :src="strReplace(state.FormData.peopleVehicleImgUrl)"></image>
  122. </view>
  123. </view>
  124. <view class="picture-wrapper" @click="cardFileImageUpdate(2)">
  125. <view class="bg">
  126. <view class="">
  127. <view class="name"> 承诺书 </view>
  128. <view class="value"> 上传承诺书照片 </view>
  129. <view class="tip">
  130. <view class="tip-value"> 拍摄规范 </view>
  131. </view>
  132. </view>
  133. <image v-if="!state.FormData.commitmentUrl" class="icon" :src="`${$imgUrl}applyCard/weituoshu.png`">
  134. </image>
  135. <image v-else class="icon" :src="strReplace(state.FormData.commitmentUrl)"></image>
  136. </view>
  137. </view>
  138. <view class="picture-wrapper" @click="cardFileImageUpdate(3)">
  139. <view class="bg">
  140. <view class="">
  141. <view class="name"> 委托书 </view>
  142. <view class="value"> 上传文字清晰的委托书 </view>
  143. <view class="tip">
  144. <view class="tip-value"> 拍摄规范 </view>
  145. </view>
  146. </view>
  147. <image v-if="!state.FormData.proxyUrl" class="icon" :src="`${$imgUrl}applyCard/weituoshu.png`">
  148. </image>
  149. <image v-else class="icon" :src="strReplace(state.FormData.proxyUrl)"></image>
  150. </view>
  151. </view>
  152. <view class="shibie-wrapper">
  153. <view class="title"> 识别内容如下 </view>
  154. <u-form label-width="200" :model="state.form" ref="uForm">
  155. <u-form-item label="车牌号">
  156. <u-input v-model="state.form.vehicleId" />
  157. </u-form-item>
  158. <u-form-item label="车牌颜色">
  159. <u-input v-model="state.form.caridCorlor" type="select" @click="show1 = true" />
  160. </u-form-item>
  161. <!-- <u-form-item label="所有人">
  162. <u-input v-model="state.form.man" />
  163. </u-form-item>
  164. <u-form-item label="车辆类型">
  165. <u-input v-model="state.form.vehicleType" />
  166. </u-form-item>
  167. <u-form-item label="使用性质">
  168. <u-input v-model="state.form.character" />
  169. </u-form-item>
  170. <u-form-item label="车辆识别代码">
  171. <u-input v-model="state.form.vin" />
  172. </u-form-item>
  173. <u-form-item label="发动机号码">
  174. <u-input v-model="state.form.engineNum" />
  175. </u-form-item>
  176. <u-form-item label="注册日期">
  177. <u-input v-model="state.form.register" />
  178. </u-form-item>
  179. <u-form-item label="发证日期">
  180. <u-input v-model="state.form.issueDate" />
  181. </u-form-item>
  182. <u-form-item label="核定载人数">
  183. <u-input v-model="state.form.approvedCount" />
  184. </u-form-item>
  185. <u-form-item label="整备质量">
  186. <u-input v-model="state.form.maintenaceMass" />
  187. </u-form-item>
  188. <u-form-item label="外廓尺寸">
  189. <u-input v-model="state.form.vehicleDimensions" />
  190. </u-form-item>
  191. <u-form-item label="总质量">
  192. <u-input v-model="state.form.totalMass" />
  193. </u-form-item> -->
  194. </u-form>
  195. </view>
  196. <view class="green-tip">
  197. 如识别信息有误,请手动修改,确认无误后,点击下一步!
  198. </view>
  199. <view class="action">
  200. <button type="default" class="button" @click="savaHandle()">
  201. 下一步
  202. </button>
  203. </view>
  204. <!-- 选择车牌颜色 -->
  205. <u-select v-model="show1" :list="state.actionSheetList" @confirm="selectConfirm"></u-select>
  206. </view>
  207. <view class="choice-takePhoto-wrap" v-if="state.isTakePhotoModeShow" @click="cancle">
  208. <view class="choice-takePhoto">
  209. <view @click.stop="takePhoto(state.choiceIndex)" style="border-radius: 20rpx 20rpx 0 0;">拍照</view>
  210. <view @click.stop="xiangce(state.choiceIndex)">从手机相册选择</view>
  211. <view @click.stop="cancle">取消</view>
  212. </view>
  213. </view>
  214. <viewfinder v-if="state.phoneType" :phoneType="state.phoneType" :images="state.images"
  215. :showStartPhoto="state.showImg" @confirmReturn="confirmReturn" @camera="camera"></viewfinder>
  216. </template>
  217. <script setup lang="ts">
  218. import selectCar from "./select-car.vue";
  219. import {
  220. reactive,
  221. ref
  222. } from "vue";
  223. import {
  224. onLoad,
  225. onShow
  226. } from "@dcloudio/uni-app";
  227. import {
  228. etcOcrCard,
  229. etcUserCardInfoSubmit,
  230. fileUpload,
  231. etcCarOcrCard,
  232. relieveCarId,
  233. envs,
  234. } from "@/utils/network/api.js";
  235. import {
  236. request
  237. } from "@/utils/network/request.js";
  238. import {
  239. getItem
  240. } from "@/utils/storage.ts"
  241. import {
  242. stringToJson
  243. } from "@/utils/network/encryption";
  244. import navBar from "@/components/nav-bar/nav-bar2.vue";
  245. import viewfinder from "@/components/viewfinder.vue"
  246. import {
  247. navTo, strReplace, uploadFile
  248. } from "@/utils/utils";
  249. // ########
  250. const show1 = ref(false)
  251. const state = reactive({
  252. showImg: true,
  253. isMy: "",//自己办理 他人办理
  254. phoneType: 0, // 1 身份证正面 2 身份证反面 3行驶证正面 4行驶证反面
  255. choiceIndex: 1, // 1 身份证正面 2 身份证反面
  256. isTakePhotoModeShow: false, //选择拍照方式是否出来
  257. images: '',
  258. ocrData: {
  259. name: "",
  260. gender: "",
  261. idno: "",
  262. address: "",
  263. begindate: "",
  264. enddate: "",
  265. tel: "",
  266. tmerValidity: "",
  267. },
  268. form: {
  269. caridCorlor: "", //车牌颜色
  270. userName: "", //开户人姓名
  271. userIdNum: "", //用户证件号码
  272. userPosImgUrl: "", //身份证正面
  273. userNegImgUrl: "", //身份证反面
  274. address: "", //开户人地址
  275. gender: "",
  276. tmerValidity: "",
  277. man: "", //所有人
  278. character: "", //使用性质
  279. register: "", //注册日期
  280. vehBodyUrl: '', //人车合照
  281. customerId: "", //用户编号
  282. vehicleId: "", //车牌编号
  283. issueDate: "", //发证日期
  284. vehPosImgUrl: "", //行驶证正面
  285. vehNegImgUrl: "", //行驶证证反面
  286. type: "0", //0,客车 1.货车
  287. useUserType: 0, //车辆用户类型
  288. useUserTypeName: "普通车",
  289. vehicleSign: 2, //前/后装标识
  290. vin: "", //车辆识别代号
  291. engineNum: "", //发动机号码
  292. vehicleType: "", //车辆类型
  293. vehicleModel: "", //行驶证品牌型号
  294. approvedCount: undefined, //核定人数
  295. totalMass: undefined, //总质量
  296. maintenaceMass: undefined, //整备质量
  297. permittedWeight: "", //核定载质量
  298. vehicleDimensions: "", //车辆尺寸
  299. permittedTowWeight: "", //准牵引总质量
  300. axleCount: "", //车轴数
  301. ownerName: "", //车主姓名
  302. ownerIdType: "", //车主证件类型
  303. ownerIdNum: "", //车主证件号码
  304. ownPosImgUrl: "", //车主证件正面图片
  305. ownNegImgUrl: "", //车主证件反面图片
  306. agreementId: "", //签约编号
  307. channelId: "5201018892300000001",
  308. proxyUrl: "", //委托书
  309. },
  310. orderId: "",
  311. isMyPeopple: true,
  312. buchongData: {
  313. conmpany: "李某一",
  314. type: "居民身份证",
  315. card: "23728347626342332",
  316. phone: "",
  317. },
  318. actionSheetList: [{
  319. label: "蓝色",
  320. value: '0',
  321. }, {
  322. label: "黄色",
  323. value: 1,
  324. },
  325. {
  326. label: "黑色",
  327. value: 2,
  328. },
  329. {
  330. label: "白色",
  331. value: 3,
  332. },
  333. {
  334. label: "渐变绿色",
  335. value: 4,
  336. },
  337. {
  338. label: "黄绿双拼色",
  339. value: 5,
  340. },
  341. {
  342. label: "蓝白渐变色",
  343. value: 6,
  344. },
  345. {
  346. label: "未确定",
  347. value: 9,
  348. },
  349. {
  350. label: "绿色",
  351. value: 11,
  352. },
  353. {
  354. label: "红色",
  355. value: 12,
  356. },
  357. ],
  358. FormData: {
  359. vehiclePlate: '',
  360. vehiclePlatecolor: '',
  361. openid: getItem('openId'),
  362. idcardFrontImgUrl: '',
  363. idcardBacktImgUrl: '',
  364. vehPosImgUrl: '',
  365. vehNegImgUrl: '',
  366. peopleVehicleImgUrl: '',
  367. commitmentUrl: '',
  368. mobile: '',
  369. code: '',
  370. proxyUrl: "", //委托书
  371. }
  372. });
  373. const savaHandle = () => {
  374. if (state.FormData.idcardFrontImgUrl && state.FormData.idcardBacktImgUrl) {
  375. if (state.FormData.vehPosImgUrl && state.FormData.vehNegImgUrl) {
  376. if (state.FormData.peopleVehicleImgUrl) {
  377. if (state.FormData.vehiclePlate && state.FormData.vehiclePlatecolor) {
  378. state.FormData.vehiclePlatecolor = Number(state.FormData.vehiclePlatecolor)
  379. let data = JSON.stringify(state.FormData)
  380. navTo(`/subpackage/after-sale/rescind-carId/verification?fromData=${data}`);
  381. } else {
  382. uni.showToast({
  383. title: "请填写车牌号和车牌颜色",
  384. icon: "none"
  385. })
  386. }
  387. } else {
  388. uni.showToast({
  389. title: "请上传人车合影",
  390. icon: "none"
  391. })
  392. }
  393. } else {
  394. uni.showToast({
  395. title: "请上传行驶证正反图片",
  396. icon: "none"
  397. })
  398. }
  399. } else {
  400. uni.showToast({
  401. title: "请上传身份证正反图片",
  402. icon: "none"
  403. })
  404. }
  405. console.log(JSON.stringify(state.FormData));
  406. // var data = state.form
  407. // const options = {
  408. // type: 2,
  409. // data: data,
  410. // method: 'POST',
  411. // showLoading: true,
  412. // }
  413. // request(relieveCarId, options).then((res) => {
  414. // const data = stringToJson(res.bizContent);
  415. // })
  416. };
  417. const selectConfirm = (item : any) => {
  418. console.log(item);
  419. state.FormData.vehiclePlatecolor = item[0].value
  420. state.form.caridCorlor = item[0].label
  421. };
  422. const cardFileImageUpdate = (val) => {
  423. uni.chooseImage({
  424. count: 1, //只能选取一张照片
  425. sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有
  426. sourceType: ["camera", "album"], //从相册选择
  427. success: function (res) {
  428. uploadFile(res.tempFilePaths[0], "", "").then((data) => {
  429. if (val == 1) {
  430. state.FormData.peopleVehicleImgUrl = data;
  431. } else if (val == 2) {
  432. state.FormData.commitmentUrl = data;
  433. } else if (val == 3) {
  434. state.FormData.proxyUrl = data;
  435. }
  436. })
  437. },
  438. });
  439. };
  440. // //tab切换
  441. // const tabChange = (val: any) => {
  442. // if (val) {
  443. // state.isMyPeopple = true;
  444. // } else {
  445. // state.isMyPeopple = false;
  446. // }
  447. // state.form = {
  448. // orderId: state.orderId, //订单ID
  449. // userName: "", //开户人姓名
  450. // userIdType: "101", //用户证件类型 101//身份证
  451. // userIdNum: "", //用户证件号码
  452. // userPosImgUrl: "", //身份证正面
  453. // userNegImgUrl: "", //身份证反面
  454. // tel: "", //开户人手机号
  455. // address: "", //开户人地址
  456. // sceneType: "", //用户协议支撑服务场景(发行服务机构和用户签订的协议)
  457. // channelId: "", //渠道id
  458. // gender: "",
  459. // customerIdVld: "",
  460. // agentName: "",
  461. // agentgender: "",
  462. // agentIdType: "101",
  463. // agentIdNum: "",
  464. // agentPosImgUrl: "",
  465. // agentNegImgUrl: "",
  466. // proxyUrl: "",
  467. // agentAddress: "",
  468. // tmerValidity: "",
  469. // };
  470. // };
  471. onLoad((option : any) => {
  472. state.form.orderId = option.orderId;
  473. state.orderId = option.orderId;
  474. });
  475. const xiangce = (val) => {
  476. console.log("val", val)
  477. var imageType = val;
  478. uni.chooseImage({
  479. count: 1, //只能选取一张照片
  480. sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有
  481. sourceType: ["album"], //从相册选择
  482. success: function (res) {
  483. state.showImg = false
  484. state.images = res.tempFilePaths[0]
  485. state.phoneType = state.choiceIndex
  486. state.isTakePhotoModeShow = false
  487. console.log("tempFilePaths[0].startsWith('file://')", res.tempFilePaths[0], res.tempFilePaths[0].startsWith('file://'))
  488. },
  489. })
  490. }
  491. const takePhoto = (val) => {
  492. state.showImg = true
  493. console.log("拍照", val)
  494. state.phoneType = val;
  495. }
  496. const confirmReturn = (val) => {
  497. state.phoneType = 0
  498. state.isTakePhotoModeShow = false
  499. var imageType = 1;
  500. if (state.choiceIndex == 1) {
  501. imageType = 1
  502. var isEtcOcrCard = etcOcrCard
  503. } else if (state.choiceIndex == 2) {
  504. imageType = 2
  505. var isEtcOcrCard = etcOcrCard
  506. } else if (state.choiceIndex == 3) {
  507. imageType = 1
  508. var isEtcOcrCard = etcCarOcrCard
  509. } else if (state.choiceIndex == 4) {
  510. imageType = 2
  511. var isEtcOcrCard = etcCarOcrCard
  512. } else
  513. console.log("图片地址val", val.tempImagePath)
  514. uploadFile(val.tempImagePath, imageType, isEtcOcrCard).then((data) => {
  515. console.log("身份证上传", data)
  516. if (state.choiceIndex === "1") {
  517. state.form.userName = data.name;
  518. state.form.gender = data.gender;
  519. state.form.userIdNum = data.idno;
  520. state.form.userPosImgUrl = data.imageUrl;
  521. state.form.address = data.address;
  522. state.FormData.idcardFrontImgUrl = data.imageUrl
  523. } else if (state.choiceIndex === "2") {
  524. state.form.tmerValidity = data.begindate + "-" + data.enddate;
  525. state.form.userNegImgUrl = data.imageUrl;
  526. state.FormData.idcardBacktImgUrl = data.imageUrl
  527. } else if (state.choiceIndex === "3") {
  528. state.form.vehicleId = data.plate_a;
  529. state.form.man = data.man;
  530. state.form.vehicleType = data.vehicle;
  531. state.form.character = data.character;
  532. state.form.vin = data.vin;
  533. state.form.engineNum = data.engine;
  534. state.form.register = data.register;
  535. state.form.issueDate = data.issue;
  536. state.form.vehPosImgUrl = data.imageUrl;
  537. state.form.vehicleModel = data.model;
  538. state.FormData.vehiclePlate = data.plate_a
  539. state.FormData.vehPosImgUrl = data.imageUrl
  540. state.FormData.idcardBacktImgUrl = data.imageUrl
  541. } else if (state.choiceIndex === "4") {
  542. state.form.approvedCount = parseFloat(data.apc);
  543. state.form.maintenaceMass = parseFloat(data.unladen);
  544. state.form.vehicleDimensions = data.overall;
  545. state.form.totalMass = parseFloat(data.gross);
  546. state.form.vehNegImgUrl = data.imageUrl;
  547. state.FormData.vehNegImgUrl = data.imageUrl
  548. }
  549. state.isTakePhotoModeShow = false
  550. })
  551. }
  552. const takePhotoMode = (index) => {
  553. console.log("index", index)
  554. state.isTakePhotoModeShow = true
  555. state.choiceIndex = index
  556. }
  557. const cancle = () => {
  558. state.isTakePhotoModeShow = false
  559. }
  560. const camera = () => {
  561. state.phoneType = 0
  562. }
  563. </script>
  564. <style lang="scss" scoped>
  565. .title {
  566. font-size: 35rpx;
  567. font-family: Microsoft YaHei;
  568. font-weight: 400;
  569. color: #000000;
  570. line-height: 80rpx;
  571. margin-bottom: 10rpx;
  572. }
  573. .content-wrap {
  574. position: relative;
  575. margin-top: 50rpx;
  576. padding: 0rpx 30rpx;
  577. display: flex;
  578. .big {
  579. font-size: 30rpx;
  580. font-family: Microsoft YaHei;
  581. font-weight: 400;
  582. color: #333333;
  583. line-height: 24rpx;
  584. }
  585. .nomal {
  586. font-size: 26rpx;
  587. font-family: Microsoft YaHei;
  588. font-weight: 400;
  589. color: #666666;
  590. line-height: 24rpx;
  591. }
  592. .tip {
  593. margin-top: -5px;
  594. width: 117rpx;
  595. height: 16rpx;
  596. background: #00b38b;
  597. opacity: 0.3;
  598. }
  599. }
  600. .content {
  601. padding: 0rpx 30rpx 50rpx 30rpx;
  602. .item {
  603. padding: 20rpx;
  604. display: flex;
  605. justify-content: space-between;
  606. align-items: center;
  607. height: 130rpx;
  608. background: #ffffff;
  609. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  610. border-radius: 20rpx;
  611. margin-bottom: 30rpx;
  612. .iten-left {
  613. display: flex;
  614. align-items: center;
  615. image {
  616. width: 150rpx;
  617. height: 90rpx;
  618. }
  619. text {
  620. margin-left: 20rpx;
  621. font-size: 32rpx;
  622. font-family: Noto Sans S Chinese;
  623. font-weight: 400;
  624. color: #333333;
  625. }
  626. }
  627. .choose-item {
  628. width: 44rpx;
  629. height: 44rpx;
  630. background: #ffffff;
  631. border: 2rpx solid #00b38b;
  632. border-radius: 50%;
  633. margin-right: 20rpx;
  634. display: flex;
  635. justify-content: center;
  636. align-items: center;
  637. box-sizing: content-box;
  638. }
  639. .active {
  640. width: 34rpx;
  641. height: 34rpx;
  642. background: #00b38b;
  643. border-radius: 50%;
  644. }
  645. }
  646. .action {
  647. padding-left: 20rpx;
  648. padding-right: 20rpx;
  649. padding-bottom: 30rpx;
  650. .button {
  651. height: 80rpx;
  652. background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
  653. border-radius: 40rpx;
  654. font-size: 32rpx;
  655. font-weight: 400;
  656. color: #ffffff;
  657. line-height: 80rpx;
  658. }
  659. }
  660. .item-tips {
  661. .title {
  662. font-size: 30rpx;
  663. font-family: Microsoft YaHei;
  664. font-weight: 400;
  665. color: #000000;
  666. line-height: 24rpx;
  667. }
  668. .tip {
  669. margin-top: 16rpx;
  670. font-size: 24rpx;
  671. font-family: Microsoft YaHei;
  672. font-weight: 400;
  673. color: #999999;
  674. line-height: 24rpx;
  675. }
  676. }
  677. .picture-wrapper {
  678. margin-top: 40rpx;
  679. .bg {
  680. background: #ffffff;
  681. box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
  682. border-radius: 20rpx;
  683. padding: 40rpx;
  684. display: flex;
  685. // align-items: center;
  686. justify-content: space-between;
  687. .name {
  688. font-size: 34rpx;
  689. font-family: Microsoft YaHei;
  690. font-weight: 400;
  691. color: #000000;
  692. line-height: 34rpx;
  693. }
  694. .value {
  695. margin-top: 20rpx;
  696. font-size: 24rpx;
  697. font-family: Microsoft YaHei;
  698. font-weight: 400;
  699. color: #999999;
  700. line-height: 24rpx;
  701. }
  702. .tip {
  703. margin-top: 20rpx;
  704. text-align: center;
  705. width: 110rpx;
  706. height: 40rpx;
  707. background: rgba(33, 190, 177, 0.2);
  708. border-radius: 6rpx;
  709. .tip-value {
  710. font-size: 20rpx;
  711. font-family: Microsoft YaHei;
  712. font-weight: 400;
  713. color: #0a8f8a;
  714. line-height: 40rpx;
  715. opacity: 1;
  716. }
  717. }
  718. }
  719. .icon {
  720. width: 294rpx;
  721. height: 188rpx;
  722. }
  723. }
  724. .shibie-wrapper {
  725. margin-top: 60rpx;
  726. .title {
  727. font-size: 30rpx;
  728. font-family: Microsoft YaHei;
  729. font-weight: 400;
  730. color: #000000;
  731. line-height: 30rpx;
  732. }
  733. ::v-deep .u-form-item {
  734. border-bottom: 1rpx solid #DCDCDC;
  735. padding: 10rpx 0;
  736. }
  737. }
  738. .buchong-wrapper {
  739. margin-top: 60rpx;
  740. .title {
  741. font-size: 30rpx;
  742. font-family: Microsoft YaHei;
  743. font-weight: 400;
  744. color: #000000;
  745. line-height: 30rpx;
  746. }
  747. }
  748. .green-tip {
  749. margin-top: 50rpx;
  750. font-size: 24rpx;
  751. font-family: Microsoft YaHei;
  752. font-weight: 400;
  753. color: #00b38b;
  754. line-height: 24rpx;
  755. margin-bottom: 60rpx;
  756. }
  757. }
  758. .choice-takePhoto {
  759. position: absolute;
  760. bottom: 0;
  761. background-color: white;
  762. width: 100%;
  763. border-radius: 20rpx 20rpx 0 0;
  764. }
  765. .choice-takePhoto>view:first-child {
  766. text-align: center;
  767. height: 80rpx;
  768. line-height: 80rpx;
  769. border-bottom: 1rpx solid rgba(127, 127, 127, 0.3);
  770. background-color: white;
  771. }
  772. .choice-takePhoto>view:last-child {
  773. text-align: center;
  774. height: 80rpx;
  775. line-height: 80rpx;
  776. border-top: 6rpx solid rgba(127, 127, 127, 0.1);
  777. background-color: white;
  778. }
  779. .choice-takePhoto>view {
  780. text-align: center;
  781. height: 80rpx;
  782. line-height: 80rpx;
  783. background-color: white;
  784. }
  785. .choice-takePhoto-wrap {
  786. width: 100%;
  787. height: 100vh;
  788. background-color: rgba(127, 127, 127, 0.2);
  789. position: fixed;
  790. left: 0;
  791. top: 0;
  792. z-index: 11111;
  793. }
  794. </style>