details.vue 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017
  1. <template>
  2. <view class="">
  3. <uni-section title="基本信息" style="padding: 0 62rpx;" titleColor="5F5F5F" titleFontSize="28rpx">
  4. <template v-slot:right>
  5. <text style="color: #5F5F5F;">
  6. {{form.claimNo}}
  7. </text>
  8. </template>
  9. <uni-forms ref="form1" :modelValue="form" :border="true" label-width="80">
  10. <uni-forms-item name="consumerName" label="联系人">
  11. <uni-easyinput v-model="form.consumerName" class="right-align" placeholder-class="placeholder-right"
  12. placeholder="请输入联系人" :inputBorder="false" :disabled="true"
  13. :clearable="false"></uni-easyinput>
  14. </uni-forms-item>
  15. <uni-forms-item name="consumerPhone" label="电话" required>
  16. <uni-easyinput v-model="form.consumerPhone" class="right-align" type="number"
  17. placeholder-class="placeholder-right" placeholder="请输入电话" :inputBorder="false"
  18. :disabled="true" :clearable="false" maxlength="11"
  19. @change="photoChange"></uni-easyinput>
  20. </uni-forms-item>
  21. <uni-forms-item name="vehicleNumber" label="车牌号">
  22. <view style="display: flex;align-items: center;">
  23. <!-- <uni-easyinput v-model="form.vehicleNumber" class="right-align"
  24. placeholder-class="placeholder-right" placeholder="请输入车牌号" :inputBorder="false"
  25. :disabled="true" :clearable="false" @change="carNoVerify" maxlength="8"
  26. @click="handleInputFocus"></uni-easyinput> -->
  27. <view style="display: flex;align-items: center;height: 36px;width: 100%;">
  28. <view @click="handleInputFocus()" style="width: 100%;text-align: right;padding: 0 20rpx;"
  29. :style="form.vehicleNumber?'color:#000;':'color:#B5B4B4;font-size: 24rpx;'">
  30. {{form.vehicleNumber||'请输入车牌号'}}
  31. </view>
  32. </view>
  33. <uni-icons v-if="!(true)" type="camera" size="24"
  34. color='#03803B' @click="allClick('识别车牌号')"></uni-icons>
  35. </view>
  36. </uni-forms-item>
  37. <uni-forms-item name="tyreNo" label="胎号">
  38. <view style="display: flex;align-items: center;">
  39. <uni-easyinput v-model="form.tyreNo" class="right-align" placeholder-class="placeholder-right"
  40. placeholder="请输入胎号" :inputBorder="false"
  41. :disabled="true" :clearable="false"
  42. @change="getMaterialDetail"></uni-easyinput>
  43. <uni-icons v-if="!(true)" type="scan" size="24"
  44. color='#03803B' @click="allClick('识别胎号')"></uni-icons>
  45. </view>
  46. </uni-forms-item>
  47. <uni-forms-item name="tyreSpecs" label="规格型号">
  48. <uni-easyinput v-model="form.tyreSpecs" class="right-align" placeholder-class="placeholder-right"
  49. placeholder="" :inputBorder="false"
  50. :disabled="true" :clearable="false"></uni-easyinput>
  51. </uni-forms-item>
  52. <uni-forms-item name="brandItem" label="花纹">
  53. <uni-easyinput v-model="form.brandItem" class="right-align" placeholder-class="placeholder-right"
  54. placeholder="" :inputBorder="false" :disabled="true" :clearable="false"></uni-easyinput>
  55. </uni-forms-item>
  56. <uni-forms-item name="brandName" label="品牌">
  57. <uni-easyinput v-model="form.brandName" class="right-align" placeholder-class="placeholder-right"
  58. placeholder="" :inputBorder="false" :disabled="true" :clearable="false"></uni-easyinput>
  59. </uni-forms-item>
  60. <uni-forms-item name="tireQuantity" label="轮胎数量">
  61. <uni-easyinput v-model="form.tireQuantity" class="right-align" placeholder-class="placeholder-right"
  62. placeholder="请输入数量" :inputBorder="false" :disabled="true" type="number"
  63. @blur="intBlur('tireQuantity',form.tireQuantity)" :clearable="false"></uni-easyinput>
  64. </uni-forms-item>
  65. <uni-forms-item name="claimAmount" label="索赔金额">
  66. <uni-easyinput v-model="form.claimAmount" class="right-align" placeholder-class="placeholder-right"
  67. placeholder="" :inputBorder="false" :disabled="true" type="number"
  68. @blur="handleBlur(form.claimAmount)" :clearable="false"></uni-easyinput>
  69. </uni-forms-item>
  70. <uni-forms-item name="claimReason" label="理赔原因">
  71. <uni-easyinput v-model="form.claimReason" class="right-align" type="textarea"
  72. placeholder-class="placeholder-right" placeholder="请输入内容" :inputBorder="false"
  73. :del-icon="!(true)"
  74. :disabled="true"></uni-easyinput>
  75. </uni-forms-item>
  76. </uni-forms>
  77. </uni-section>
  78. <uni-section title="相应图片信息" style="padding: 0 62rpx 60rpx 62rpx;margin-top: 30rpx;" titleColor="5F5F5F"
  79. titleFontSize="28rpx">
  80. <view class="photo-upload">
  81. <view>
  82. <view class="photo-upload-text">示例照片</view>
  83. <view>
  84. <image class="photo-upload-img" src="@/static/images/home/claim/em4.png" />
  85. </view>
  86. </view>
  87. <view>
  88. <view class="photo-upload-text" style="color: #03803B;">病象</view>
  89. <view class="photo-upload-upload">
  90. <uni-file-picker v-model="form.file1" return-type="object" limit="1" :imageStyles="imageStyles"
  91. file-mediatype="image" @select="fileSelect1" @delete="fileDelete"
  92. :del-icon="!(true)" :sourceType="['camera']">
  93. <image class="photo-upload-img2" src="@/static/images/home/claim/upload.png" />
  94. </uni-file-picker>
  95. </view>
  96. </view>
  97. </view>
  98. <view class="photo-upload">
  99. <view>
  100. <view class="photo-upload-text">示例照片</view>
  101. <view>
  102. <image class="photo-upload-img" src="@/static/images/home/claim/em2.png" />
  103. </view>
  104. </view>
  105. <view>
  106. <view class="photo-upload-text" style="color: #03803B;">轮胎DOT</view>
  107. <view class="photo-upload-upload">
  108. <uni-file-picker v-model="form.file2" return-type="object" limit="1" :imageStyles="imageStyles"
  109. file-mediatype="image" @select="fileSelect2" @delete="fileDelete"
  110. :del-icon="!(true)" :sourceType="['camera']">
  111. <image class="photo-upload-img2" src="@/static/images/home/claim/upload.png" />
  112. </uni-file-picker>
  113. </view>
  114. </view>
  115. </view>
  116. <view class="photo-upload">
  117. <view>
  118. <view class="photo-upload-text">示例照片</view>
  119. <view>
  120. <image class="photo-upload-img" src="@/static/images/home/claim/em3.png" />
  121. </view>
  122. </view>
  123. <view>
  124. <view class="photo-upload-text" style="color: #03803B;">花纹深度</view>
  125. <view class="photo-upload-upload">
  126. <uni-file-picker v-model="form.file3" return-type="object" limit="1" :imageStyles="imageStyles"
  127. file-mediatype="image" @select="fileSelect3" @delete="fileDelete"
  128. :del-icon="!(true)" :sourceType="['camera']">
  129. <image class="photo-upload-img2" src="@/static/images/home/claim/upload.png" />
  130. </uni-file-picker>
  131. </view>
  132. </view>
  133. </view>
  134. </uni-section>
  135. <u-keyboard ref="uKeyboard" mode="car" :show="carShow" @change="carChange" @backspace="backspace"
  136. :showCancel="false" :showConfirm="false" @close="carShow=false" :safeAreaInsetBottom="true"
  137. :autoChange="true"></u-keyboard>
  138. </view>
  139. </template>
  140. <script>
  141. import http from '@/http/api.js'
  142. import {
  143. clientId,
  144. clientSecret
  145. } from '@/common/setting'
  146. import {
  147. submit,
  148. getDetail,
  149. fileRemove,
  150. submitApproval,
  151. revokeApproval,
  152. getMaterialDetail
  153. } from '@/api/home/claim.js'
  154. export default {
  155. data() {
  156. return {
  157. carShow: false,
  158. form: {
  159. file1: null,
  160. file2: null,
  161. file3: null,
  162. file4: null,
  163. vehicleNumber: '',
  164. tyreNo: null,
  165. tyreSpecs: null,
  166. claimSourceType: 1,
  167. tireQuantity: 1,
  168. claimAmount: null,
  169. claimAttachmentList: [],
  170. },
  171. imageStyles: {
  172. width: 145,
  173. height: 145,
  174. border: false,
  175. },
  176. mapObject: {
  177. text: 'name',
  178. value: 'code',
  179. children: 'children'
  180. },
  181. addressData: [],
  182. labelList: [],
  183. corpsTypeList: [],
  184. storeAttributesList: [],
  185. chainAttributeList: [],
  186. signingLevelList: [],
  187. }
  188. },
  189. onLoad(option) {
  190. this.addressData = JSON.parse(uni.getStorageSync("addressData"))
  191. if (option && option.id) {
  192. this.getDetail(option.id)
  193. }
  194. },
  195. methods: {
  196. // 处理输入框聚焦事件
  197. handleInputFocus() {
  198. if (this.form.auditStatus > 0 || this.form.claimSourceType > 1) return
  199. this.carShow = true;
  200. },
  201. // 按键被点击(点击退格键不会触发此事件)
  202. carChange(val) {
  203. // 将每次按键的值拼接到value变量中,注意+=写法
  204. if (this.form.vehicleNumber.length < 8) {
  205. this.form.vehicleNumber += val;
  206. }
  207. },
  208. // 退格键被点击
  209. backspace() {
  210. if (this.form.vehicleNumber.length) this.form.vehicleNumber = this.form.vehicleNumber.substr(0, this.form
  211. .vehicleNumber.length - 1);
  212. },
  213. photoChange(val) {
  214. if (val) {
  215. if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(val)) {
  216. uni.showToast({
  217. title: '请输入正确电话',
  218. icon: 'none'
  219. });
  220. return;
  221. }
  222. }
  223. },
  224. carNoVerify(plateNumber) {
  225. if (plateNumber) {
  226. const PROVINCES = [
  227. '京', '津', '冀', '晋', '蒙', '辽', '吉', '黑',
  228. '沪', '苏', '浙', '皖', '闽', '赣', '鲁', '豫',
  229. '鄂', '湘', '粤', '桂', '琼', '川', '贵', '云',
  230. '渝', '藏', '陕', '甘', '青', '宁', '新', '台',
  231. '港', '澳'
  232. ]
  233. const AGENCY_PATTERN = /^[A-HJ-NP-Z]$/
  234. const BLUE_PLATE_PATTERN = /^[0-9A-HJ-NP-Z]{5}$/
  235. // 绿牌能源类型标识
  236. const ENERGY_TYPES = {
  237. 'D': '纯电动',
  238. 'F': '非纯电动'
  239. }
  240. const GREEN_PLATE_PATTERN = /^[0-9A-HJ-NP-Z]{6}$/
  241. const plate = plateNumber.toUpperCase().trim()
  242. // 长度检查
  243. if (plate.length !== 7 && plate.length !== 8) {
  244. uni.showToast({
  245. title: '请输入有效的车牌号!',
  246. icon: 'none'
  247. });
  248. return false
  249. }
  250. // 省份简称检查
  251. if (!PROVINCES.includes(plate.charAt(0))) {
  252. uni.showToast({
  253. title: '请输入有效的车牌号!',
  254. icon: 'none'
  255. });
  256. return false
  257. }
  258. // 发牌机关代号检查
  259. if (!AGENCY_PATTERN.test(plate.charAt(1))) {
  260. return uni.showToast({
  261. title: '请输入有效的车牌号!',
  262. icon: 'none'
  263. });
  264. }
  265. // 蓝牌检查
  266. if (plate.length === 7) {
  267. const serial = plate.substring(2)
  268. if (!(BLUE_PLATE_PATTERN.test(serial) && !/[IO]/.test(serial))) {
  269. uni.showToast({
  270. title: '请输入有效的车牌号!',
  271. icon: 'none'
  272. });
  273. return false
  274. }
  275. }
  276. // 绿牌检查
  277. if (plate.length === 8) {
  278. const energyType = plate.charAt(2)
  279. const serial = plate.substring(2)
  280. if (!((energyType === 'D' || energyType === 'F'))) {
  281. uni.showToast({
  282. title: '请输入有效的车牌号!',
  283. icon: 'none'
  284. });
  285. return false
  286. }
  287. if (!(GREEN_PLATE_PATTERN.test(serial) && !/[IO]/.test(serial))) {
  288. uni.showToast({
  289. title: '请输入有效的车牌号!',
  290. icon: 'none'
  291. });
  292. return false
  293. }
  294. }
  295. }
  296. return true
  297. },
  298. allClick(name) {
  299. if (!(this.form.auditStatus > 0 || this.form.claimSourceType > 1)) {
  300. if (name == '识别车牌号') {
  301. let _this = this
  302. uni.chooseImage({
  303. count: 1, //默认9
  304. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  305. sourceType:['camera'],
  306. success: function(file) {
  307. uni.showLoading({
  308. title: '加载中',
  309. mask: true
  310. });
  311. uni.uploadFile({
  312. url: http.config.baseURL +
  313. '/gubersail-app/appClaim/recognizeLicensePlateNumber', // 仅为示例,非真实的接口地址
  314. filePath: file.tempFilePaths[0],
  315. header: {
  316. // 客户端认证参数
  317. 'Authorization': 'Basic ' + Base64.encode(clientId + ':' +
  318. clientSecret),
  319. 'Blade-Auth': 'bearer ' + uni.getStorageSync('accessToken')
  320. },
  321. name: 'file',
  322. success: (res) => {
  323. const data = JSON.parse(res.data)
  324. console.log(data)
  325. _this.form.vehicleNumber = data.data
  326. uni.showToast({
  327. title: data.msg,
  328. icon: 'none',
  329. duration: 2000
  330. });
  331. },
  332. fail: (err) => {
  333. uni.showToast({
  334. title: err,
  335. icon: 'none',
  336. duration: 2000
  337. });
  338. },
  339. complete: () => {
  340. uni.hideLoading()
  341. }
  342. })
  343. }
  344. });
  345. }
  346. if (name == '识别胎号') {
  347. let _this = this
  348. uni.scanCode({
  349. scanType: ['barCode'],
  350. onlyFromCamera:true,
  351. success: function(res) {
  352. _this.form.tyreNo = res.result
  353. _this.getMaterialDetail(res.result)
  354. }
  355. });
  356. }
  357. }
  358. },
  359. getMaterialDetail(val) {
  360. if (val) {
  361. let obj = {
  362. tireNumber: val
  363. }
  364. getMaterialDetail(obj).then(res => {
  365. console.log(res.data)
  366. if (res.data) {
  367. this.form.tyreSpecs = res.data.sizeId
  368. this.form.brandItem = res.data.pattern
  369. this.form.brandName = res.data.brand
  370. } else {
  371. uni.showToast({
  372. title: res.msg,
  373. icon: 'none'
  374. });
  375. this.form.tyreSpecs = null
  376. this.form.brandItem = null
  377. this.form.brandName = null
  378. }
  379. })
  380. } else {
  381. this.form.tyreSpecs = null
  382. this.form.brandItem = null
  383. this.form.brandName = null
  384. }
  385. },
  386. removeByIdFilter(arr, id) {
  387. return arr.filter(item => item.id !== id);
  388. },
  389. // handleInput(value) {
  390. // const decimalRegex = /^-?\d+\.\d+$/ // 小数正则
  391. // if (decimalRegex.test(value)) {
  392. // uni.showToast({
  393. // title: '请输入整数',
  394. // icon: 'none'
  395. // });
  396. // }
  397. // },
  398. intBlur(name, value) {
  399. if (!this.form[name]) return
  400. // 使用toFixed处理小数位
  401. try {
  402. const num = parseFloat(this.form[name])
  403. if (!isNaN(num)) {
  404. this.form[name] = Math.floor(num)
  405. }
  406. } catch (e) {
  407. console.error('格式化错误', e)
  408. }
  409. },
  410. handleBlur(value) {
  411. if (!this.form.claimAmount) return
  412. // 使用toFixed处理小数位
  413. try {
  414. const num = parseFloat(this.form.claimAmount)
  415. if (!isNaN(num)) {
  416. this.form.claimAmount = num.toFixed(4)
  417. }
  418. } catch (e) {
  419. console.error('格式化错误', e)
  420. }
  421. },
  422. fileDelete(row) {
  423. if (row.tempFile.id) {
  424. uni.showLoading({
  425. title: '加载中',
  426. mask: true
  427. });
  428. fileRemove(row.tempFile.id).then(res => {
  429. uni.showToast({
  430. title: '删除成功',
  431. icon: 'none'
  432. });
  433. this.form.claimAttachmentList = this.removeByIdFilter(this.form.claimAttachmentList, row
  434. .tempFile.id);
  435. }).finally(() => {
  436. uni.hideLoading()
  437. });
  438. }
  439. },
  440. getFileExtension(filename) {
  441. return filename.slice(((filename.lastIndexOf(".") - 1) >>> 0) + 2);
  442. },
  443. fileSelect1(files) {
  444. files.tempFiles.forEach(file => {
  445. uni.showLoading({
  446. title: '加载中',
  447. mask: true
  448. });
  449. uni.uploadFile({
  450. url: http.config.baseURL +
  451. '/blade-resource/oss/endpoint/put-file', // 仅为示例,非真实的接口地址
  452. filePath: file.path,
  453. header: {
  454. // 客户端认证参数
  455. 'Authorization': 'Basic ' + Base64.encode(clientId + ':' + clientSecret),
  456. 'Blade-Auth': 'bearer ' + uni.getStorageSync('accessToken')
  457. },
  458. name: 'file',
  459. success: (res) => {
  460. const data = JSON.parse(res.data).data
  461. this.form.file1 = {
  462. ...this.form.file1,
  463. url: data.link,
  464. name: data.originalName,
  465. extname: this.getFileExtension(data.originalName),
  466. size: file.size,
  467. }
  468. uni.showToast({
  469. title: '上传成功',
  470. icon: 'none'
  471. });
  472. },
  473. fail: (err) => {
  474. uni.showToast({
  475. title: '上传失败',
  476. icon: 'none'
  477. });
  478. },
  479. complete: () => {
  480. uni.hideLoading()
  481. }
  482. })
  483. })
  484. },
  485. fileSelect2(files) {
  486. files.tempFiles.forEach(file => {
  487. uni.showLoading({
  488. title: '加载中',
  489. mask: true
  490. });
  491. uni.uploadFile({
  492. url: http.config.baseURL +
  493. '/blade-resource/oss/endpoint/put-file', // 仅为示例,非真实的接口地址
  494. filePath: file.path,
  495. header: {
  496. // 客户端认证参数
  497. 'Authorization': 'Basic ' + Base64.encode(clientId + ':' + clientSecret),
  498. 'Blade-Auth': 'bearer ' + uni.getStorageSync('accessToken')
  499. },
  500. name: 'file',
  501. success: (res) => {
  502. const data = JSON.parse(res.data).data
  503. this.form.file2 = {
  504. ...this.form.file2,
  505. url: data.link,
  506. name: data.originalName,
  507. extname: this.getFileExtension(data.originalName),
  508. size: file.size,
  509. }
  510. uni.showToast({
  511. title: '上传成功',
  512. icon: 'none'
  513. });
  514. },
  515. fail: (err) => {
  516. uni.showToast({
  517. title: '上传失败',
  518. icon: 'none'
  519. });
  520. },
  521. complete: () => {
  522. uni.hideLoading()
  523. }
  524. })
  525. })
  526. },
  527. fileSelect3(files) {
  528. files.tempFiles.forEach(file => {
  529. uni.showLoading({
  530. title: '加载中',
  531. mask: true
  532. });
  533. uni.uploadFile({
  534. url: http.config.baseURL +
  535. '/blade-resource/oss/endpoint/put-file', // 仅为示例,非真实的接口地址
  536. filePath: file.path,
  537. header: {
  538. // 客户端认证参数
  539. 'Authorization': 'Basic ' + Base64.encode(clientId + ':' + clientSecret),
  540. 'Blade-Auth': 'bearer ' + uni.getStorageSync('accessToken')
  541. },
  542. name: 'file',
  543. success: (res) => {
  544. const data = JSON.parse(res.data).data
  545. this.form.file3 = {
  546. ...this.form.file3,
  547. url: data.link,
  548. name: data.originalName,
  549. extname: this.getFileExtension(data.originalName),
  550. size: file.size,
  551. }
  552. uni.showToast({
  553. title: '上传成功',
  554. icon: 'none'
  555. });
  556. },
  557. fail: (err) => {
  558. uni.showToast({
  559. title: '上传失败',
  560. icon: 'none'
  561. });
  562. },
  563. complete: () => {
  564. uni.hideLoading()
  565. }
  566. })
  567. })
  568. },
  569. fileSelect4(files) {
  570. files.tempFiles.forEach(file => {
  571. uni.showLoading({
  572. title: '加载中',
  573. mask: true
  574. });
  575. uni.uploadFile({
  576. url: http.config.baseURL +
  577. '/blade-resource/oss/endpoint/put-file', // 仅为示例,非真实的接口地址
  578. filePath: file.path,
  579. header: {
  580. // 客户端认证参数
  581. 'Authorization': 'Basic ' + Base64.encode(clientId + ':' + clientSecret),
  582. 'Blade-Auth': 'bearer ' + uni.getStorageSync('accessToken')
  583. },
  584. name: 'file',
  585. success: (res) => {
  586. const data = JSON.parse(res.data).data
  587. this.form.file4 = {
  588. ...this.form.file4,
  589. url: data.link,
  590. name: data.originalName,
  591. extname: this.getFileExtension(data.originalName),
  592. size: file.size,
  593. }
  594. uni.showToast({
  595. title: '上传成功',
  596. icon: 'none'
  597. });
  598. },
  599. fail: (err) => {
  600. uni.showToast({
  601. title: '上传失败',
  602. icon: 'none'
  603. });
  604. },
  605. complete: () => {
  606. uni.hideLoading()
  607. }
  608. })
  609. })
  610. },
  611. async submit() {
  612. if (!this.form.consumerPhone) {
  613. uni.showToast({
  614. title: '请输入电话',
  615. icon: 'none'
  616. });
  617. return
  618. }
  619. if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.form.consumerPhone)) {
  620. uni.showToast({
  621. title: '请输入正确电话',
  622. icon: 'none'
  623. });
  624. return;
  625. }
  626. if (!this.carNoVerify(this.form.vehicleNumber)) {
  627. return
  628. }
  629. if (!this.form.file1) {
  630. uni.showToast({
  631. title: '请上传病象',
  632. icon: 'none'
  633. });
  634. return
  635. }
  636. if (!this.form.file2) {
  637. uni.showToast({
  638. title: '请上传轮胎DOT',
  639. icon: 'none'
  640. });
  641. return
  642. }
  643. if (!this.form.file3) {
  644. uni.showToast({
  645. title: '请上传花纹深度',
  646. icon: 'none'
  647. });
  648. return
  649. }
  650. // if (!this.form.file4) {
  651. // uni.showToast({
  652. // title: '请上传鼓包处照片',
  653. // icon: 'none'
  654. // });
  655. // return
  656. // }
  657. let obj = await this.convertData(this.$deepClone(this.form))
  658. uni.showLoading({
  659. title: '加载中',
  660. mask: true
  661. });
  662. submit(obj).then(res => {
  663. setTimeout(() => {
  664. uni.showToast({
  665. title: '保存成功',
  666. icon: 'none',
  667. });
  668. }, 10);
  669. uni.setStorageSync('isUpdate', true)
  670. this.getDetail(res.data.id)
  671. })
  672. .catch(() => {
  673. uni.hideLoading()
  674. });
  675. },
  676. async approval() {
  677. if (!this.form.consumerPhone) {
  678. uni.showToast({
  679. title: '请输入电话',
  680. icon: 'none'
  681. });
  682. return
  683. }
  684. if (!this.carNoVerify(this.form.vehicleNumber)) {
  685. return
  686. }
  687. if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.form.consumerPhone)) {
  688. uni.showToast({
  689. title: '请输入正确电话',
  690. icon: 'none'
  691. });
  692. return;
  693. }
  694. if (!this.form.file1) {
  695. uni.showToast({
  696. title: '请上传病象',
  697. icon: 'none'
  698. });
  699. return
  700. }
  701. if (!this.form.file2) {
  702. uni.showToast({
  703. title: '请上传轮胎DOT',
  704. icon: 'none'
  705. });
  706. return
  707. }
  708. if (!this.form.file3) {
  709. uni.showToast({
  710. title: '请上传花纹深度',
  711. icon: 'none'
  712. });
  713. return
  714. }
  715. // if (!this.form.file4) {
  716. // uni.showToast({
  717. // title: '请上传鼓包处照片',
  718. // icon: 'none'
  719. // });
  720. // return
  721. // }
  722. let form = await this.convertData(this.$deepClone(this.form))
  723. let obj = {
  724. id: this.form.id
  725. }
  726. let _this = this
  727. uni.showModal({
  728. title: '提示',
  729. content: '是否提交审核?',
  730. success: function(res) {
  731. if (res.confirm) {
  732. uni.showLoading({
  733. title: '加载中',
  734. mask: true
  735. });
  736. submit(form).then(res => {
  737. submitApproval(obj).then(res => {
  738. setTimeout(() => {
  739. uni.showToast({
  740. title: '操作成功',
  741. icon: 'none',
  742. duration: 2000
  743. });
  744. }, 10);
  745. _this.getDetail(_this.form.id)
  746. })
  747. .catch(() => {
  748. uni.hideLoading()
  749. });
  750. })
  751. .catch(() => {
  752. uni.hideLoading()
  753. });
  754. }
  755. }
  756. });
  757. },
  758. revoke() {
  759. let obj = {
  760. id: this.form.id
  761. }
  762. let _this = this
  763. uni.showModal({
  764. title: '提示',
  765. content: '是否撤销审核?',
  766. success: function(res) {
  767. if (res.confirm) {
  768. uni.showLoading({
  769. title: '加载中',
  770. mask: true
  771. });
  772. revokeApproval(obj).then(res => {
  773. setTimeout(() => {
  774. uni.showToast({
  775. title: '操作成功',
  776. icon: 'none',
  777. duration: 2000
  778. });
  779. }, 10);
  780. _this.getDetail(_this.form.id)
  781. })
  782. .catch(() => {
  783. uni.hideLoading()
  784. });
  785. }
  786. }
  787. });
  788. },
  789. getDetail(id) {
  790. let obj = {
  791. id: id
  792. }
  793. uni.showLoading({
  794. title: '加载中',
  795. mask: true
  796. });
  797. getDetail(obj).then(res => {
  798. res.data.claimAttachmentList.forEach(item => {
  799. if (item.fileProperties == 1) {
  800. res.data.file1 = {
  801. ...item,
  802. url: item.fileUrl,
  803. name: item.fileName,
  804. extname: item.fileType,
  805. size: item.fileSize,
  806. }
  807. }
  808. if (item.fileProperties == 2) {
  809. res.data.file2 = {
  810. ...item,
  811. url: item.fileUrl,
  812. name: item.fileName,
  813. extname: item.fileType,
  814. size: item.fileSize,
  815. }
  816. }
  817. if (item.fileProperties == 3) {
  818. res.data.file3 = {
  819. ...item,
  820. url: item.fileUrl,
  821. name: item.fileName,
  822. extname: item.fileType,
  823. size: item.fileSize,
  824. }
  825. }
  826. // if (item.fileProperties == 4) {
  827. // res.data.file4 = {
  828. // ...item,
  829. // url: item.fileUrl,
  830. // name: item.fileName,
  831. // extname: item.fileType,
  832. // size: item.fileSize,
  833. // }
  834. // }
  835. })
  836. this.form = res.data
  837. })
  838. .finally(() => {
  839. uni.hideLoading()
  840. });
  841. },
  842. async convertData(obj) {
  843. let fileList = []
  844. if (obj.file1 && Object.keys(obj.file1).length) {
  845. fileList.push({
  846. ...obj.file1,
  847. fileProperties: 1,
  848. })
  849. }
  850. if (obj.file2 && Object.keys(obj.file2).length) {
  851. fileList.push({
  852. ...obj.file2,
  853. fileProperties: 2,
  854. })
  855. }
  856. if (obj.file3 && Object.keys(obj.file3).length) {
  857. fileList.push({
  858. ...obj.file3,
  859. fileProperties: 3,
  860. })
  861. }
  862. // if (obj.file4 && Object.keys(obj.file4).length) {
  863. // fileList.push({
  864. // ...obj.file4,
  865. // fileProperties: 4
  866. // })
  867. // }
  868. //附件明细为空时直接赋值
  869. if (obj.claimAttachmentList.length == 0) {
  870. fileList.forEach(item => {
  871. obj.claimAttachmentList.push({
  872. fileProperties: item.fileProperties,
  873. fileUrl: item.url,
  874. fileName: item.name,
  875. fileType: item.extname,
  876. fileSize: item.size,
  877. })
  878. })
  879. } else {
  880. //附件明细有明细区分赋值
  881. fileList.forEach(item => {
  882. if (obj.claimAttachmentList.filter(row => row.fileProperties == item.fileProperties)
  883. .length == 0) {
  884. //原附件明细不存在,直接push新元素
  885. obj.claimAttachmentList.push({
  886. fileProperties: item.fileProperties,
  887. fileUrl: item.url,
  888. fileName: item.name,
  889. fileType: item.extname,
  890. fileSize: item.size,
  891. })
  892. } else {
  893. //原附件存在明细时,对应赋值
  894. obj.claimAttachmentList.forEach(row => {
  895. if (item.fileProperties == row.fileProperties) {
  896. row.fileUrl = item.url
  897. row.fileName = item.name
  898. row.fileType = item.extname
  899. row.fileSize = item.size
  900. }
  901. })
  902. }
  903. })
  904. }
  905. console.log(obj)
  906. return obj
  907. }
  908. }
  909. }
  910. </script>
  911. <style lang="scss" scoped>
  912. .right-align {
  913. text-align: right;
  914. }
  915. .photo {
  916. margin-left: 20rpx;
  917. width: 38rpx;
  918. height: 32rpx;
  919. }
  920. .photo-upload {
  921. display: flex;
  922. justify-content: space-around;
  923. margin-top: 45rpx;
  924. .photo-upload-text {
  925. font-weight: 400;
  926. font-size: 28rpx;
  927. color: #5F5F5F;
  928. line-height: 32rpx;
  929. text-align: center;
  930. margin-bottom: 15rpx;
  931. }
  932. .photo-upload-img {
  933. width: 280rpx;
  934. height: 280rpx;
  935. background: #D13B34;
  936. border-radius: 7rpx;
  937. }
  938. .photo-upload-upload {
  939. width: 280rpx;
  940. height: 280rpx;
  941. background: #F6F6F6;
  942. border-radius: 7rpx;
  943. display: flex;
  944. justify-content: center;
  945. align-items: center;
  946. .photo-upload-img2 {
  947. width: 219rpx;
  948. height: 219rpx;
  949. }
  950. }
  951. }
  952. ::v-deep .uni-file-picker__container {
  953. margin: 0 !important;
  954. }
  955. ::v-deep .file-picker__box-content {
  956. margin: 0 !important;
  957. }
  958. ::v-deep .file-picker__progress {
  959. display: none;
  960. }
  961. ::v-deep .uni-section .uni-section-header {
  962. font-weight: bold !important;
  963. padding: 12px 0px !important;
  964. border-bottom: 2px solid #F6F6F6;
  965. }
  966. ::v-deep .file-picker__box {
  967. width: 280rpx !important;
  968. height: 280rpx !important;
  969. }
  970. .slot-content-item {
  971. border-radius: 13rpx;
  972. border: 2rpx solid #03803B;
  973. padding: 1rpx 5rpx;
  974. color: #03803B;
  975. }
  976. .slot-content-item-placeholder {
  977. font-weight: 400 !important;
  978. font-size: 28rpx !important;
  979. height: 38rpx !important;
  980. color: #B5B4B4 !important;
  981. }
  982. .slot-box {
  983. gap: 5px;
  984. display: flex;
  985. flex-wrap: wrap;
  986. justify-content: flex-end;
  987. }
  988. </style>