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.

rescind-carId-select.vue 22KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848
  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" @input="getVehiclePlate" />
  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. actionSheetList: [{
  313. label: "蓝色",
  314. value: '0',
  315. }, {
  316. label: "黄色",
  317. value: 1,
  318. },
  319. {
  320. label: "黑色",
  321. value: 2,
  322. },
  323. {
  324. label: "白色",
  325. value: 3,
  326. },
  327. {
  328. label: "渐变绿色",
  329. value: 4,
  330. },
  331. {
  332. label: "黄绿双拼色",
  333. value: 5,
  334. },
  335. {
  336. label: "蓝白渐变色",
  337. value: 6,
  338. },
  339. {
  340. label: "未确定",
  341. value: 9,
  342. },
  343. {
  344. label: "绿色",
  345. value: 11,
  346. },
  347. {
  348. label: "红色",
  349. value: 12,
  350. },
  351. ],
  352. FormData: {
  353. vehiclePlate: '',
  354. vehiclePlatecolor: '',
  355. openid: getItem('openId'),
  356. idcardFrontImgUrl: '',
  357. idcardBacktImgUrl: '',
  358. vehPosImgUrl: '',
  359. vehNegImgUrl: '',
  360. peopleVehicleImgUrl: '',
  361. commitmentUrl: '',
  362. mobile: '',
  363. code: '',
  364. proxyUrl: "", //委托书
  365. }
  366. });
  367. const getVehiclePlate = (e) => {
  368. console.log("车牌号", e)
  369. state.FormData.vehiclePlate = e
  370. };
  371. const savaHandle = () => {
  372. if (state.FormData.idcardFrontImgUrl && state.FormData.idcardBacktImgUrl) {
  373. if (state.FormData.vehPosImgUrl && state.FormData.vehNegImgUrl) {
  374. if (state.FormData.peopleVehicleImgUrl) {
  375. if (state.FormData.vehiclePlate && state.FormData.vehiclePlatecolor.toString()) {
  376. state.FormData.vehiclePlatecolor = Number(state.FormData.vehiclePlatecolor)
  377. let data = JSON.stringify(state.FormData)
  378. navTo(`/subpackage/after-sale/rescind-carId/verification?fromData=${data}`);
  379. } else {
  380. uni.showToast({
  381. title: "请填写车牌号和车牌颜色",
  382. icon: "none"
  383. })
  384. }
  385. } else {
  386. uni.showToast({
  387. title: "请上传人车合影",
  388. icon: "none"
  389. })
  390. }
  391. } else {
  392. uni.showToast({
  393. title: "请上传行驶证正反图片",
  394. icon: "none"
  395. })
  396. }
  397. } else {
  398. uni.showToast({
  399. title: "请上传身份证正反图片",
  400. icon: "none"
  401. })
  402. }
  403. console.log(JSON.stringify(state.FormData));
  404. // var data = state.form
  405. // const options = {
  406. // type: 2,
  407. // data: data,
  408. // method: 'POST',
  409. // showLoading: true,
  410. // }
  411. // request(relieveCarId, options).then((res) => {
  412. // const data = stringToJson(res.bizContent);
  413. // })
  414. };
  415. const selectConfirm = (item : any) => {
  416. console.log(item);
  417. state.FormData.vehiclePlatecolor = item[0].value
  418. state.form.caridCorlor = item[0].label
  419. };
  420. const cardFileImageUpdate = (val) => {
  421. uni.chooseImage({
  422. count: 1, //只能选取一张照片
  423. sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有
  424. sourceType: ["camera", "album"], //从相册选择
  425. success: function (res) {
  426. uploadFile(res.tempFilePaths[0], "", "").then((data) => {
  427. if (val == 1) {
  428. state.FormData.peopleVehicleImgUrl = data;
  429. } else if (val == 2) {
  430. state.FormData.commitmentUrl = data;
  431. } else if (val == 3) {
  432. state.FormData.proxyUrl = data;
  433. }
  434. })
  435. },
  436. });
  437. };
  438. // //tab切换
  439. // const tabChange = (val: any) => {
  440. // if (val) {
  441. // state.isMyPeopple = true;
  442. // } else {
  443. // state.isMyPeopple = false;
  444. // }
  445. // state.form = {
  446. // orderId: state.orderId, //订单ID
  447. // userName: "", //开户人姓名
  448. // userIdType: "101", //用户证件类型 101//身份证
  449. // userIdNum: "", //用户证件号码
  450. // userPosImgUrl: "", //身份证正面
  451. // userNegImgUrl: "", //身份证反面
  452. // tel: "", //开户人手机号
  453. // address: "", //开户人地址
  454. // sceneType: "", //用户协议支撑服务场景(发行服务机构和用户签订的协议)
  455. // channelId: "", //渠道id
  456. // gender: "",
  457. // customerIdVld: "",
  458. // agentName: "",
  459. // agentgender: "",
  460. // agentIdType: "101",
  461. // agentIdNum: "",
  462. // agentPosImgUrl: "",
  463. // agentNegImgUrl: "",
  464. // proxyUrl: "",
  465. // agentAddress: "",
  466. // tmerValidity: "",
  467. // };
  468. // };
  469. onLoad((option : any) => {
  470. state.form.orderId = option.orderId;
  471. state.orderId = option.orderId;
  472. });
  473. const xiangce = (val) => {
  474. console.log("val", val)
  475. var imageType = val;
  476. uni.chooseImage({
  477. count: 1, //只能选取一张照片
  478. sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有
  479. sourceType: ["album"], //从相册选择
  480. success: function (res) {
  481. state.showImg = false
  482. state.images = res.tempFilePaths[0]
  483. state.phoneType = state.choiceIndex
  484. state.isTakePhotoModeShow = false
  485. console.log("tempFilePaths[0].startsWith('file://')", res.tempFilePaths[0], res.tempFilePaths[0].startsWith('file://'))
  486. },
  487. })
  488. }
  489. const takePhoto = (val) => {
  490. state.showImg = true
  491. console.log("拍照", val)
  492. state.phoneType = val;
  493. }
  494. const confirmReturn = (val) => {
  495. state.phoneType = 0
  496. state.isTakePhotoModeShow = false
  497. var imageType = 1;
  498. if (state.choiceIndex == 1) {
  499. imageType = 1
  500. var isEtcOcrCard = etcOcrCard
  501. } else if (state.choiceIndex == 2) {
  502. imageType = 2
  503. var isEtcOcrCard = etcOcrCard
  504. } else if (state.choiceIndex == 3) {
  505. imageType = 1
  506. var isEtcOcrCard = etcCarOcrCard
  507. } else if (state.choiceIndex == 4) {
  508. imageType = 2
  509. var isEtcOcrCard = etcCarOcrCard
  510. } else
  511. console.log("图片地址val", val.tempImagePath)
  512. uploadFile(val.tempImagePath, imageType, isEtcOcrCard).then((data) => {
  513. console.log("身份证上传", data)
  514. if (state.choiceIndex === "1") {
  515. state.form.userName = data.name;
  516. state.form.gender = data.gender;
  517. state.form.userIdNum = data.idno;
  518. state.form.userPosImgUrl = data.imageUrl;
  519. state.form.address = data.address;
  520. state.FormData.idcardFrontImgUrl = data.imageUrl
  521. } else if (state.choiceIndex === "2") {
  522. state.form.tmerValidity = data.begindate + "-" + data.enddate;
  523. state.form.userNegImgUrl = data.imageUrl;
  524. state.FormData.idcardBacktImgUrl = data.imageUrl
  525. } else if (state.choiceIndex === "3") {
  526. state.form.vehicleId = data.plate_a;
  527. state.form.man = data.man;
  528. state.form.vehicleType = data.vehicle;
  529. state.form.character = data.character;
  530. state.form.vin = data.vin;
  531. state.form.engineNum = data.engine;
  532. state.form.register = data.register;
  533. state.form.issueDate = data.issue;
  534. state.form.vehPosImgUrl = data.imageUrl;
  535. state.form.vehicleModel = data.model;
  536. state.FormData.vehiclePlate = data.plate_a
  537. state.FormData.vehPosImgUrl = data.imageUrl
  538. state.FormData.idcardBacktImgUrl = data.imageUrl
  539. } else if (state.choiceIndex === "4") {
  540. state.form.approvedCount = parseFloat(data.apc);
  541. state.form.maintenaceMass = parseFloat(data.unladen);
  542. state.form.vehicleDimensions = data.overall;
  543. state.form.totalMass = parseFloat(data.gross);
  544. state.form.vehNegImgUrl = data.imageUrl;
  545. state.FormData.vehNegImgUrl = data.imageUrl
  546. }
  547. state.isTakePhotoModeShow = false
  548. })
  549. }
  550. const takePhotoMode = (index) => {
  551. console.log("index", index)
  552. state.isTakePhotoModeShow = true
  553. state.choiceIndex = index
  554. }
  555. const cancle = () => {
  556. state.isTakePhotoModeShow = false
  557. }
  558. const camera = () => {
  559. state.phoneType = 0
  560. }
  561. </script>
  562. <style lang="scss" scoped>
  563. .title {
  564. font-size: 35rpx;
  565. font-family: Microsoft YaHei;
  566. font-weight: 400;
  567. color: #000000;
  568. line-height: 80rpx;
  569. margin-bottom: 10rpx;
  570. }
  571. .content-wrap {
  572. position: relative;
  573. margin-top: 50rpx;
  574. padding: 0rpx 30rpx;
  575. display: flex;
  576. .big {
  577. font-size: 30rpx;
  578. font-family: Microsoft YaHei;
  579. font-weight: 400;
  580. color: #333333;
  581. line-height: 24rpx;
  582. }
  583. .nomal {
  584. font-size: 26rpx;
  585. font-family: Microsoft YaHei;
  586. font-weight: 400;
  587. color: #666666;
  588. line-height: 24rpx;
  589. }
  590. .tip {
  591. margin-top: -5px;
  592. width: 117rpx;
  593. height: 16rpx;
  594. background: #00b38b;
  595. opacity: 0.3;
  596. }
  597. }
  598. .content {
  599. padding: 0rpx 30rpx 50rpx 30rpx;
  600. .item {
  601. padding: 20rpx;
  602. display: flex;
  603. justify-content: space-between;
  604. align-items: center;
  605. height: 130rpx;
  606. background: #ffffff;
  607. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  608. border-radius: 20rpx;
  609. margin-bottom: 30rpx;
  610. .iten-left {
  611. display: flex;
  612. align-items: center;
  613. image {
  614. width: 150rpx;
  615. height: 90rpx;
  616. }
  617. text {
  618. margin-left: 20rpx;
  619. font-size: 32rpx;
  620. font-family: Noto Sans S Chinese;
  621. font-weight: 400;
  622. color: #333333;
  623. }
  624. }
  625. .choose-item {
  626. width: 44rpx;
  627. height: 44rpx;
  628. background: #ffffff;
  629. border: 2rpx solid #00b38b;
  630. border-radius: 50%;
  631. margin-right: 20rpx;
  632. display: flex;
  633. justify-content: center;
  634. align-items: center;
  635. box-sizing: content-box;
  636. }
  637. .active {
  638. width: 34rpx;
  639. height: 34rpx;
  640. background: #00b38b;
  641. border-radius: 50%;
  642. }
  643. }
  644. .action {
  645. padding-left: 20rpx;
  646. padding-right: 20rpx;
  647. padding-bottom: 30rpx;
  648. .button {
  649. height: 80rpx;
  650. background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
  651. border-radius: 40rpx;
  652. font-size: 32rpx;
  653. font-weight: 400;
  654. color: #ffffff;
  655. line-height: 80rpx;
  656. }
  657. }
  658. .item-tips {
  659. .title {
  660. font-size: 30rpx;
  661. font-family: Microsoft YaHei;
  662. font-weight: 400;
  663. color: #000000;
  664. line-height: 24rpx;
  665. }
  666. .tip {
  667. margin-top: 16rpx;
  668. font-size: 24rpx;
  669. font-family: Microsoft YaHei;
  670. font-weight: 400;
  671. color: #999999;
  672. line-height: 24rpx;
  673. }
  674. }
  675. .picture-wrapper {
  676. margin-top: 40rpx;
  677. .bg {
  678. background: #ffffff;
  679. box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
  680. border-radius: 20rpx;
  681. padding: 40rpx;
  682. display: flex;
  683. // align-items: center;
  684. justify-content: space-between;
  685. .name {
  686. font-size: 34rpx;
  687. font-family: Microsoft YaHei;
  688. font-weight: 400;
  689. color: #000000;
  690. line-height: 34rpx;
  691. }
  692. .value {
  693. margin-top: 20rpx;
  694. font-size: 24rpx;
  695. font-family: Microsoft YaHei;
  696. font-weight: 400;
  697. color: #999999;
  698. line-height: 24rpx;
  699. }
  700. .tip {
  701. margin-top: 20rpx;
  702. text-align: center;
  703. width: 110rpx;
  704. height: 40rpx;
  705. background: rgba(33, 190, 177, 0.2);
  706. border-radius: 6rpx;
  707. .tip-value {
  708. font-size: 20rpx;
  709. font-family: Microsoft YaHei;
  710. font-weight: 400;
  711. color: #0a8f8a;
  712. line-height: 40rpx;
  713. opacity: 1;
  714. }
  715. }
  716. }
  717. .icon {
  718. width: 294rpx;
  719. height: 188rpx;
  720. }
  721. }
  722. .shibie-wrapper {
  723. margin-top: 60rpx;
  724. .title {
  725. font-size: 30rpx;
  726. font-family: Microsoft YaHei;
  727. font-weight: 400;
  728. color: #000000;
  729. line-height: 30rpx;
  730. }
  731. ::v-deep .u-form-item {
  732. border-bottom: 1rpx solid #DCDCDC;
  733. padding: 10rpx 0;
  734. }
  735. }
  736. .buchong-wrapper {
  737. margin-top: 60rpx;
  738. .title {
  739. font-size: 30rpx;
  740. font-family: Microsoft YaHei;
  741. font-weight: 400;
  742. color: #000000;
  743. line-height: 30rpx;
  744. }
  745. }
  746. .green-tip {
  747. margin-top: 50rpx;
  748. font-size: 24rpx;
  749. font-family: Microsoft YaHei;
  750. font-weight: 400;
  751. color: #00b38b;
  752. line-height: 24rpx;
  753. margin-bottom: 60rpx;
  754. }
  755. }
  756. .choice-takePhoto {
  757. position: absolute;
  758. bottom: 0;
  759. background-color: white;
  760. width: 100%;
  761. border-radius: 20rpx 20rpx 0 0;
  762. }
  763. .choice-takePhoto>view:first-child {
  764. text-align: center;
  765. height: 80rpx;
  766. line-height: 80rpx;
  767. border-bottom: 1rpx solid rgba(127, 127, 127, 0.3);
  768. background-color: white;
  769. }
  770. .choice-takePhoto>view:last-child {
  771. text-align: center;
  772. height: 80rpx;
  773. line-height: 80rpx;
  774. border-top: 6rpx solid rgba(127, 127, 127, 0.1);
  775. background-color: white;
  776. }
  777. .choice-takePhoto>view {
  778. text-align: center;
  779. height: 80rpx;
  780. line-height: 80rpx;
  781. background-color: white;
  782. }
  783. .choice-takePhoto-wrap {
  784. width: 100%;
  785. height: 100vh;
  786. background-color: rgba(127, 127, 127, 0.2);
  787. position: fixed;
  788. left: 0;
  789. top: 0;
  790. z-index: 11111;
  791. }
  792. </style>