Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.

rescind-carId-select.vue 21KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716
  1. <template>
  2. <view class="bg">
  3. <view class="title"> 身份证信息 </view>
  4. <view class="picture-wrapper">
  5. <view class="bg">
  6. <view class="">
  7. <view class="name"> 人像面 </view>
  8. <view class="value"> 上传身份证的人像面 </view>
  9. <view class="tip">
  10. <view class="tip-value"> 拍摄规范 </view>
  11. </view>
  12. </view>
  13. <image v-if="!state.form.userPosImagesUrl" class="icon" :src="`${$imgUrl}issuance/sfz.png`"
  14. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
  15. </image>
  16. <image v-else class="icon" :src="getFullImageUrl(state.form.userPosImagesUrl)"
  17. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
  18. </view>
  19. </view>
  20. <view class="picture-wrapper">
  21. <view class="bg">
  22. <view class="">
  23. <view class="name"> 国徽面 </view>
  24. <view class="value"> 上传身份证的国徽面 </view>
  25. <view class="tip">
  26. <view class="tip-value"> 拍摄规范 </view>
  27. </view>
  28. </view>
  29. <image v-if="!state.form.userNegImagesUrl" class="icon" :src="`${$imgUrl}issuance/sff.png`"
  30. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
  31. </image>
  32. <image v-else class="icon" :src="getFullImageUrl(state.form.userNegImagesUrl)"
  33. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
  34. </view>
  35. </view>
  36. <u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
  37. <u-form-item label="申请人姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
  38. <text class="disabled-text">{{state.form.name}}</text>
  39. <!-- <u-input v-model="" placeholder='请输入姓名' maxlength="20" @blur="replaceInput($event,1)" inputAlign="right"/> -->
  40. </u-form-item>
  41. <u-form-item label="证号号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
  42. <!-- <u-input placeholder='请输入证件号码' type="idcard" v-model="state.form.customerIdNum" maxlength="18" inputAlign="right"/> -->
  43. <text class="disabled-text">{{state.form.userIdNum}}</text>
  44. </u-form-item>
  45. <u-form-item label="手机号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
  46. <!-- <u-input placeholder='请输入手机号' type="number" v-model="state.form.mobile" maxlength="11" inputAlign="right"/> -->
  47. <text class="disabled-text">{{state.form.mobile}}</text>
  48. </u-form-item>
  49. </u-form>
  50. </view>
  51. <view class="bg">
  52. <view class="title"> 行驶证信息 </view>
  53. <view class="picture-wrapper" @click="takePhotoMode(3)">
  54. <view class="bg">
  55. <view class="">
  56. <view class="name"> 行驶证主页 </view>
  57. <view class="value"> 上传行驶证的主页 </view>
  58. <view class="tip">
  59. <view class="tip-value"> 拍摄规范 </view>
  60. </view>
  61. </view>
  62. <image v-if="!state.form.vehPosImgUrl" class="icon" :src="`${$imgUrl}issuance/xz.png`"
  63. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
  64. </image>
  65. <image v-else class="icon" :src="getFullImageUrl(state.form.vehPosImgUrl)"
  66. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
  67. </view>
  68. </view>
  69. <view class="picture-wrapper" @click="takePhotoMode(4)">
  70. <view class="bg">
  71. <view class="">
  72. <view class="name"> 行驶证副页 </view>
  73. <view class="value"> 上传行驶证的副页 </view>
  74. <view class="tip">
  75. <view class="tip-value"> 拍摄规范 </view>
  76. </view>
  77. </view>
  78. <image v-if="!state.form.vehNegImgUrl" class="icon" :src="`${$imgUrl}issuance/xf.png`"
  79. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
  80. </image>
  81. <image v-else class="icon" :src="getFullImageUrl(state.form.vehNegImgUrl)"
  82. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
  83. </view>
  84. </view>
  85. <u-form label-width="200" :model="state.form" ref="uForm" :label-style='labelStyle'>
  86. <u-form-item label="车主姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
  87. <u-input v-model="state.form.vehicleOwnerName" placeholder="请输入车主姓名" input-align='right'/>
  88. </u-form-item>
  89. <u-form-item label="车牌号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
  90. <car-number-input @numberInputResult="carNumber" :defaultStr="state.form.vehiclePlate"></car-number-input>
  91. </u-form-item>
  92. <u-form-item label="车牌颜色" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
  93. <!-- <uni-data-select v-model="state.form.vehiclePlateColor" :localdata="state.colorRange" @change="changeColor"
  94. :clear="false"></uni-data-select> -->
  95. <u-input v-model="state.vehiclePlateColorStr" type="select" @click="show1 = true" input-align='right'/>
  96. </u-form-item>
  97. </u-form>
  98. </view>
  99. <template v-if="state.isNeedSubmitCarOwnerInfo">
  100. <view class="car-type" id="inputCarOnerInfo">
  101. <view
  102. class="car-type-item"
  103. v-for="(item, index) in carOwnerList"
  104. :key="index"
  105. :class="{active: state.form.ownerIdType == item.value}" @click="toggleApplyType(item)">
  106. {{item.name}}
  107. </view>
  108. </view>
  109. <view class="bg">
  110. <view class="title"> {{ labelName.title }} </view>
  111. <template v-if="state.form.ownerIdType === '101'">
  112. <view class="picture-wrapper" @click="takePhotoMode(1)">
  113. <view class="bg">
  114. <view class="">
  115. <view class="name"> 人像面 </view>
  116. <view class="value"> 上传身份证的人像面 </view>
  117. <view class="tip">
  118. <view class="tip-value"> 拍摄规范 </view>
  119. </view>
  120. </view>
  121. <image v-if="!state.form.ownerPosImgUrl" class="icon" :src="`${$imgUrl}issuance/sfz.png`"
  122. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
  123. </image>
  124. <image v-else class="icon" :src="getFullImageUrl(state.form.ownerPosImgUrl)"
  125. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
  126. </view>
  127. </view>
  128. <view class="picture-wrapper" @click="takePhotoMode(2)">
  129. <view class="bg">
  130. <view class="">
  131. <view class="name"> 国徽面 </view>
  132. <view class="value"> 上传身份证的国徽面 </view>
  133. <view class="tip">
  134. <view class="tip-value"> 拍摄规范 </view>
  135. </view>
  136. </view>
  137. <image v-if="!state.form.ownerNegImgUrl" class="icon" :src="`${$imgUrl}issuance/sff.png`"
  138. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
  139. </image>
  140. <image v-else class="icon" :src="getFullImageUrl(state.form.ownerNegImgUrl)"
  141. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
  142. </view>
  143. </view>
  144. </template>
  145. <template v-else-if="state.form.ownerIdType === '203'">
  146. <view class="picture-wrapper" @click="takePhotoMode(5)">
  147. <view class="bg">
  148. <view class="">
  149. <view class="name"> 营业执照 </view>
  150. <view class="value"> 上传营业执照 </view>
  151. <view class="tip">
  152. <view class="tip-value"> 拍摄规范 </view>
  153. </view>
  154. </view>
  155. <image v-if="!state.form.ownerPosImgUrl" class="icon" :src="`${$imgUrl}issuance/sfz.png`"
  156. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
  157. </image>
  158. <image v-else class="icon" :src="getFullImageUrl(state.form.ownerPosImgUrl)"
  159. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
  160. </view>
  161. </view>
  162. </template>
  163. <view class="picture-wrapper" @click="uploadOtherFile">
  164. <view class="bg">
  165. <view class="">
  166. <view class="name"> 授权书 </view>
  167. <view class="value"> 上传授权书 </view>
  168. <view class="tip">
  169. <view class="tip-value"> 拍摄规范 </view>
  170. </view>
  171. </view>
  172. <image v-if="!state.form.proxyUrl" class="icon" :src="`${$imgUrl}issuance/weituo.png`"
  173. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
  174. </image>
  175. <image v-else class="icon" :src="getFullImageUrl(state.form.proxyUrl)"
  176. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
  177. </view>
  178. </view>
  179. <u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
  180. <u-form-item :label="labelName.ownerName" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
  181. <u-input v-model="state.form.ownerName" placeholder='请输入' maxlength="20" @blur="replaceInput($event,1)" inputAlign="right"/>
  182. </u-form-item>
  183. <u-form-item :label="labelName.ownerIdNum" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
  184. <u-input placeholder='请输入' v-model="state.form.ownerIdNum" maxlength="18" inputAlign="right"/>
  185. </u-form-item>
  186. <u-form-item :label="labelName.ownerIdAddress" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
  187. <u-input placeholder='请输入' v-model="state.form.ownerIdAddress" maxlength="18" inputAlign="right"/>
  188. </u-form-item>
  189. <u-form-item label="车主手机号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
  190. <u-input placeholder='请输入手机号' type="number" v-model="state.form.ownerTel" maxlength="11" inputAlign="right"/>
  191. </u-form-item>
  192. </u-form>
  193. </view>
  194. </template>
  195. <view class="action">
  196. <button type="default" class="ui-btn" @click="savaHandle()">
  197. 提交
  198. </button>
  199. </view>
  200. <!--证件照上传 start-->
  201. <uploadOcr
  202. :isTakePhotoModeShow="state.isTakePhotoModeShow"
  203. :phoneType="state.choiceIndex"
  204. @close="close"
  205. @ocrResult="ocrResult">
  206. </uploadOcr>
  207. <!--证件照上传 end-->
  208. <!-- 选择车牌颜色 -->
  209. <u-select v-model="show1" :list="state.colorRange" @confirm="changeColor"></u-select>
  210. </template>
  211. <script setup lang="ts">
  212. import { reactive, ref, computed } from "vue";
  213. import {
  214. onLoad
  215. } from "@dcloudio/uni-app";
  216. import { idCardOcr, vehicleLicenseOcr, releasePlateaApply, ocrAllQuery, getUserMsg, vehicleUpload } from "@/utils/network/api.js";
  217. import {requestNew} from "@/utils/network/request.js";
  218. import { getItem } from "@/utils/storage.ts"
  219. import carNumberInput from "@/components/car-number-input/car-number-input.vue";
  220. import { navTo, uploadFile,msg, getFullImageUrl, replaceBaseImageUrl } from "@/utils/utils";
  221. import uploadOcr from '@/components/uploadOcr';
  222. interface OCRData {
  223. imageUrl: string,
  224. bizContent: string,
  225. screditCode: string,
  226. enddate: string
  227. }
  228. // ########
  229. const labelStyle = {
  230. color: "#004576",
  231. fontSize: "28rpx",
  232. }
  233. const leftIcon = {
  234. height: '100%',
  235. width: '8rpx',
  236. display: 'flex',
  237. 'align-items': 'center',
  238. 'margin-right': '4rpx',
  239. }
  240. const ownerCurrent = ref(0);
  241. const carOwnerList = ref([
  242. { name: "个人", value: "101" },
  243. { name: "企业", value: "203" },
  244. ])
  245. const show1 = ref(false)
  246. const isSelfSelect = ref(false)
  247. const state = reactive({
  248. isSelfRange:[
  249. {
  250. value: "1",
  251. label: "是"
  252. }, {
  253. value: "2",
  254. label: "否"
  255. }
  256. ],
  257. showImg: true,
  258. phoneType: 0, // 1 身份证正面 2 身份证反面 3行驶证正面 4行驶证反面
  259. choiceIndex: 1, // 1 身份证正面 2 身份证反面
  260. isTakePhotoModeShow: false, //选择拍照方式是否出来
  261. images: '',
  262. form: {
  263. name: "", // 开户人姓名
  264. userPosImagesUrl: '',
  265. userNegImagesUrl: '',
  266. userIdNum: '',
  267. mobile:"",
  268. vehPosImgUrl: "", //行驶证正面
  269. vehNegImgUrl: "", //行驶证证反面
  270. vehiclePlate: "",
  271. vehiclePlateColor: "",
  272. vehicleOwnerName: "", //车主姓名,ocr识别行驶证
  273. ownerName: "",
  274. ownerPosImgUrl: "",
  275. ownerNegImgUrl: "",
  276. ownerIdNum:"",//车主证件号
  277. ownerIdAddress: "",
  278. ownerIdType: "",
  279. ownerTel: "",
  280. proxyUrl:"",//授权书图片地址
  281. },
  282. vehiclePlateColorStr: "",
  283. colorRange: [],
  284. isNeedSubmitCarOwnerInfo: false, // 是否需要上传车主信息
  285. });
  286. const labelName = computed(() => {
  287. if (state.form.ownerIdType === '101') {
  288. return {
  289. title: "车主身份证信息",
  290. ownerName: '车主姓名',
  291. ownerIdNum: "车主证件号码",
  292. ownerIdAddress: '证件地址',
  293. }
  294. } else if (state.form.ownerIdType === '203') {
  295. return {
  296. title: "单位证件相关信息",
  297. ownerName: '单位名称',
  298. ownerIdNum: "单位识别码",
  299. ownerIdAddress: '单位地址',
  300. }
  301. } else {
  302. return {
  303. ownerName: '',
  304. ownerIdNum: "",
  305. ownerIdAddress: '',
  306. }
  307. }
  308. })
  309. const changeColor = (item: any) => {
  310. state.form.vehiclePlateColor = item[0].value
  311. state.vehiclePlateColorStr = item[0].label
  312. }
  313. //车牌号输入
  314. const carNumber = (val : any) => {
  315. state.form.vehiclePlate = val.trim();
  316. };
  317. const savaHandle = () => {
  318. if (!paramsVerify()) return;
  319. let params = state.form
  320. const options = {
  321. type: 2,
  322. data: params,
  323. method: "POST",
  324. showLoading: true,
  325. };
  326. requestNew(releasePlateaApply, options).then((res) => {
  327. // 需不需要上传车主信息,1: 需要 2:不需要
  328. if (res.flag === 2) {
  329. uni.reLaunch({
  330. url: `/subpackage/after-sale/rescind-carId/result`
  331. })
  332. } else {
  333. msg('请上传车主相关信息')
  334. state.form.ownerIdType = carOwnerList.value[0].value
  335. console.log(state.form.ownerIdType)
  336. console.log(carOwnerList.value)
  337. state.isNeedSubmitCarOwnerInfo = true
  338. setTimeout(() => {
  339. scrollToElement()
  340. }, 500)
  341. }
  342. });
  343. };
  344. // 必填字段校验
  345. const paramsVerify = () => {
  346. let isVerify = true;
  347. if(!state.form.vehPosImgUrl){
  348. msg('请上传行驶证主页');
  349. isVerify = false;
  350. } else if(!state.form.vehNegImgUrl){
  351. msg('请上传行驶证副页');
  352. isVerify = false;
  353. } else if(!state.form.vehiclePlate){
  354. msg('请输入车牌号');
  355. isVerify = false;
  356. } else if(!state.form.vehiclePlateColor){
  357. msg('请选择车牌颜色');
  358. isVerify = false
  359. } else if (state.isNeedSubmitCarOwnerInfo) {
  360. if(state.form.ownerIdType === '101' && !state.form.ownerPosImgUrl){
  361. msg('请上传车主身份证人像面照片');
  362. isVerify = false
  363. } else if(state.form.ownerIdType === '203' && !state.form.ownerPosImgUrl){
  364. msg('请上传公司营业执照');
  365. isVerify = false
  366. } else if(state.form.ownerIdType === '101' && !state.form.ownerNegImgUrl){
  367. msg('请上传车主身份证国徽面照片');
  368. isVerify = false
  369. } else if(!state.form.ownerName){
  370. msg(`请填写${labelName.value.ownerName}`);
  371. isVerify = false
  372. } else if(!state.form.ownerIdNum){
  373. msg(`请填写${labelName.value.ownerIdNum}`);
  374. isVerify = false
  375. } else if(!state.form.ownerIdAddress){
  376. msg(`请填写${labelName.value.ownerIdAddress}`);
  377. isVerify = false
  378. } else if(!state.form.ownerTel){
  379. msg('请填写车主手机号');
  380. isVerify = false
  381. } else if(!state.form.proxyUrl){
  382. msg('请上传授权书');
  383. isVerify = false
  384. }
  385. }
  386. return isVerify;
  387. }
  388. onLoad((option : any) => {
  389. // navTo(`/subpackage/after-sale/rescind-carId/result`);
  390. let getColor = getItem('key')['VEHICLE_COLOR_TYPE'];
  391. for (var k = 0; k < getColor.length; k++) {
  392. let obj = {};
  393. obj['value'] = getColor[k]['code']
  394. obj['label'] = getColor[k]['name']
  395. state.colorRange.push(obj)
  396. }
  397. getUserInfo()
  398. });
  399. const cancle = () => {
  400. state.isTakePhotoModeShow = false
  401. }
  402. const camera = () => {
  403. state.phoneType = 0
  404. }
  405. const close = (e) => {
  406. state.isTakePhotoModeShow = e
  407. }
  408. const takePhotoMode = (index: number) => {
  409. state.isTakePhotoModeShow = true
  410. state.choiceIndex = index
  411. }
  412. const ocrResult = (data: OCRData) => {
  413. let bizContent = data.bizContent = data.bizContent ? JSON.parse(data.bizContent) : {}
  414. // 1: 身份证正面 2:身份证反面 3: 行车本正页 4:行车本副业 5:营业执照
  415. if (state.choiceIndex === 1) {
  416. state.form.ownerName = bizContent.name
  417. state.form.ownerIdNum = bizContent.idno
  418. state.form.ownerIdAddress = bizContent.address
  419. state.form.ownerPosImgUrl = bizContent.imageUrl
  420. } else if (state.choiceIndex === 5) {
  421. state.form.ownerName = bizContent.unitName
  422. state.form.ownerIdNum = bizContent.screditCode
  423. state.form.ownerIdAddress = bizContent.address
  424. state.form.ownerPosImgUrl = bizContent.imageUrl
  425. } else if (state.choiceIndex === 2) {
  426. state.form.ownerNegImgUrl = bizContent.imageUrl
  427. } else if (state.choiceIndex === 3) {
  428. state.form.vehicleOwnerName = bizContent.man
  429. state.form.vehPosImgUrl = bizContent.imageUrl
  430. if (bizContent.plate_a.length > 8) {
  431. state.form.vehiclePlate = bizContent.plate_a.substring(0, 8);
  432. } else {
  433. state.form.vehiclePlate = bizContent.plate_a;
  434. }
  435. } else if (state.choiceIndex === 4) {
  436. state.form.vehNegImgUrl = bizContent.imageUrl
  437. }
  438. }
  439. interface uploadFileParams{
  440. imageUrl: string
  441. }
  442. // 授权证书上传
  443. const uploadOtherFile = () => {
  444. uni.chooseImage({
  445. count: 1, // 只能选取一张照片
  446. sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有
  447. sourceType: ["camera", "album"], //从相册选择
  448. success: (res) => {
  449. uploadFile(res.tempFilePaths[0]).then((data: uploadFileParams) => {
  450. state.form.proxyUrl = data.imageUrl
  451. })
  452. },
  453. });
  454. }
  455. // 获取当前用户信息详情
  456. const getUserInfo = () => {
  457. let option = {
  458. type: 2,
  459. data: {},
  460. method: "POST",
  461. showLoading: true,
  462. }
  463. requestNew(getUserMsg, option).then(res => {
  464. state.form.name = res.userName
  465. state.form.userPosImagesUrl = replaceBaseImageUrl(res.userPosImgUrl)
  466. state.form.userNegImagesUrl = replaceBaseImageUrl(res.userNegImgUrl)
  467. state.form.userIdNum = res.userIdNum
  468. state.form.mobile = res.mobile
  469. })
  470. }
  471. const toggleApplyType = (item) => {
  472. state.form.ownerIdType = item.value;
  473. state.form.ownerName = "";
  474. state.form.ownerPosImgUrl = "";
  475. state.form.ownerNegImgUrl = "";
  476. state.form.ownerIdNum = "";
  477. state.form.ownerIdAddress = "";
  478. state.form.proxyUrl = "";
  479. state.form.ownerTel = "";
  480. }
  481. // 跳转原原色
  482. const scrollToElement = () => {
  483. uni.createSelectorQuery()
  484. .select('#inputCarOnerInfo') // 选择目标元素
  485. .boundingClientRect((rect) => { // 获取元素的位置信息
  486. console.log(rect)
  487. if (rect) {
  488. // rect 对象包含了元素的位置信息,如 top, left, width, height 等
  489. console.log('Element position:', rect);
  490. // 使用 uni.pageScrollTo 跳转到该元素位置
  491. uni.pageScrollTo({
  492. scrollTop: rect.top, // 滚动到目标元素的顶部位置
  493. duration: 300, // 滚动动画的持续时间(毫秒)
  494. });
  495. }
  496. })
  497. .exec(); // 执行查询
  498. };
  499. </script>
  500. <style lang="scss" scoped>
  501. .bg{
  502. background-color: white;
  503. width: 88%;
  504. margin:0 auto;
  505. margin-top: 20rpx;
  506. border-radius: 12rpx;
  507. border: 1px solid #FFFFFF;
  508. padding: 20rpx;
  509. }
  510. .card {
  511. display: flex;
  512. margin: 0 20rpx;
  513. align-items: center;
  514. }
  515. .picture-wrapper {
  516. margin-top: 30rpx;
  517. .bg {
  518. background: #F5F9FB;
  519. border-radius: 10rpx;
  520. padding: 40rpx 30rpx;
  521. display: flex;
  522. // align-items: center;
  523. justify-content: space-between;
  524. .name {
  525. padding-top: 30rpx;
  526. font-size: 32rpx;
  527. font-family: SourceHanSansSC, SourceHanSansSC;
  528. font-weight: 500;
  529. color: #111;
  530. line-height: 34rpx;
  531. }
  532. .value {
  533. margin-top: 20rpx;
  534. font-size: 22rpx;
  535. font-family: SourceHanSansSC, SourceHanSansSC;
  536. font-weight: 400;
  537. color: #999999;
  538. line-height: 24rpx;
  539. }
  540. .tip {
  541. margin-top: 20rpx;
  542. text-align: center;
  543. width: 100rpx;
  544. height: 30rpx;
  545. border-radius: 6rpx;
  546. border: 1rpx solid #CCB375;
  547. .tip-value {
  548. font-size: 20rpx;
  549. font-family: Microsoft YaHei;
  550. font-weight: 400;
  551. color: #CCB375;
  552. line-height: 30rpx;
  553. opacity: 1;
  554. }
  555. }
  556. }
  557. .icon {
  558. width: 304rpx;
  559. height: 190rpx;
  560. background-image: var(--bgimg);
  561. background-size: 100% 100%;
  562. background-repeat: no-repeat;
  563. }
  564. }
  565. .action {
  566. position: absolute;
  567. left: 0;
  568. height: 188rpx;
  569. background-color: #fff;
  570. border-radius: 30rpx 30rpx 0 0;
  571. width: 100vw;
  572. display: flex;
  573. align-items: center;
  574. justify-content: center;
  575. flex-direction: column;
  576. margin-top: 20rpx;
  577. }
  578. ::deep.uni-select {
  579. font-size: 13px;
  580. height: 30px;
  581. line-height: 30px;
  582. }
  583. .choice-takePhoto-wrap {
  584. width: 100%;
  585. height: 100vh;
  586. background-color: rgba(127, 127, 127, 0.2);
  587. position: fixed;
  588. left: 0;
  589. top: 0;
  590. z-index: 11111;
  591. }
  592. .choice-takePhoto {
  593. position: absolute;
  594. bottom: 0;
  595. background-color: white;
  596. width: 100%;
  597. border-radius: 20rpx 20rpx 0 0;
  598. }
  599. .choice-takePhoto>view:first-child {
  600. text-align: center;
  601. height: 80rpx;
  602. line-height: 80rpx;
  603. border-bottom: 1rpx solid rgba(127, 127, 127, 0.3);
  604. background-color: white;
  605. }
  606. .choice-takePhoto>view:last-child {
  607. text-align: center;
  608. height: 80rpx;
  609. line-height: 80rpx;
  610. border-top: 6rpx solid rgba(127, 127, 127, 0.1);
  611. background-color: white;
  612. }
  613. .choice-takePhoto>view {
  614. text-align: center;
  615. height: 80rpx;
  616. line-height: 80rpx;
  617. background-color: white;
  618. }
  619. .choice-takePhoto-wrap {
  620. width: 100%;
  621. height: 100vh;
  622. background-color: rgba(127, 127, 127, 0.2);
  623. position: fixed;
  624. left: 0;
  625. top: 0;
  626. z-index: 11111;
  627. }
  628. .car-type{
  629. width: 400rpx;
  630. height: 68rpx;
  631. margin: 50rpx auto;
  632. border-radius: 68rpx;
  633. border: 1px #CCB375 solid;
  634. font-size: 28rpx;
  635. overflow: hidden;
  636. display: flex;
  637. .car-type-item{
  638. width: 50%;
  639. height: 100%;
  640. line-height: 68rpx;
  641. text-align: center;
  642. color: #CCB375;
  643. flex-shrink: 0;
  644. flex-grow: 0;
  645. }
  646. .active{
  647. color: #FFFFFF;
  648. background-color: #CCB375;
  649. }
  650. }
  651. .disabled-text{
  652. color: #999999;
  653. }
  654. .uni-list{
  655. width: 88%;
  656. margin: 24rpx auto;
  657. .left-owner-radio{
  658. margin-right: 12rpx;
  659. }
  660. }
  661. </style>