quoteRecordDetail.vue 43 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490
  1. <template>
  2. <view class="page">
  3. <u-sticky zIndex="999" customNavHeight="0">
  4. <uni-NavBar headerTitle="报价详情" background="#fff" :isSlot="false" :rightSlot="true">
  5. <template #rightSlot>
  6. <!-- #ifndef APP-PLUS -->
  7. <view class="dis f-c a-c mr-3" @click="getWechatCustomer">
  8. <image src="/static/icon/customerService.png" mode="" style="width: 48rpx;height: 48rpx;">
  9. </image>
  10. <text style="font-size: 20rpx;color: #333;">客服</text>
  11. </view>
  12. <view class="dis f-c a-c " @click="share">
  13. <image src="/static/icon/share.png" mode="" style="width: 48rpx;height: 48rpx;"></image>
  14. <text style="font-size: 20rpx;color: #333;">分享</text>
  15. </view>
  16. <!-- #endif -->
  17. </template>
  18. </uni-NavBar>
  19. </u-sticky>
  20. <view class="content">
  21. <view class="transfer dis j-s f-wrap">
  22. <view class="item dis a-c j-s">
  23. <text>是否过户车</text>
  24. <text>{{carInfoVo.transfer?'是':'否'}}</text>
  25. </view>
  26. <view class="item dis a-c j-s">
  27. <text>商业险是否过户</text>
  28. <text>{{carInfoVo.biTransfer?'是':'否'}}</text>
  29. </view>
  30. <view class="item mt-3 dis a-c j-s">
  31. <text>报价车型</text>
  32. <text>{{carInfoVo.engineNo}}/{{carInfoVo.brandName}}/
  33. {{carInfoVo.displacement}}/{{carInfoVo.seatCount}}/{{carInfoVo.purchasePrice}}</text>
  34. </view>
  35. <!-- 额外信息 -->
  36. <view class="Attachment dis a-c j-s mt-3">
  37. <view class="mediaFiles dis f-c " @click="mediaFiles">
  38. <image src="/static/image/car-insure/mediaFiles.png" mode=""></image>
  39. <text class="title">影像资料</text>
  40. <text class="mt-1 smallText ">{{imageVoList.length}}张</text>
  41. </view>
  42. <view class="specialTerms dis f-c " @click="specialTerms">
  43. <image src="/static/image/car-insure/specialTerms.png" mode=""></image>
  44. <text class="title">特别约定</text>
  45. <text class="mt-1 smallText">{{specialTermsText()}}</text>
  46. </view>
  47. </view>
  48. </view>
  49. <!--客户权益 -->
  50. <view class="customerRights" v-if="insFeeOrders && insFeeOrders.availableAmount">
  51. <view class="header dis a-c j-s mb-2">
  52. <text>客户权益</text>
  53. <view class="btn" @click="selectedBenefits">
  54. 选择权益
  55. </view>
  56. </view>
  57. <text class=" customerRights-content">可用{{insFeeOrders.availableAmount}}元购买服务赠送客户</text>
  58. </view>
  59. <view class="view " :class="{ 'collapsed': !isExpanded1 }">
  60. <view class="header-title">基本信息</view>
  61. <view class="items dis f-c " id="basicInfo">
  62. <view class="item dis a-c j-s">
  63. <text>车牌号</text>
  64. <text>{{carInfoVo.licenseNo}}</text>
  65. </view>
  66. <view class="item dis a-c j-s">
  67. <text>车架号</text>
  68. <text>{{carInfoVo.vinNo}}</text>
  69. </view>
  70. <view class="item dis a-c j-s">
  71. <text>品牌型号</text>
  72. <text>{{carInfoVo.brandName}}</text>
  73. </view>
  74. <view class="item dis a-c j-s">
  75. <text>发动机号</text>
  76. <text>{{carInfoVo.engineNo}}</text>
  77. </view>
  78. <view class="item dis a-c j-s">
  79. <text>使用性质</text>
  80. <text>{{carInfoVo.carNatureCode}}</text>
  81. </view>
  82. <view class="item dis a-c j-s">
  83. <text>车辆类型</text>
  84. <text>{{carInfoVo.carTypeCode}} </text>
  85. </view>
  86. <view class="item dis a-c j-s">
  87. <text>车辆用途</text>
  88. <text>{{carInfoVo.vehicleUseCode}} </text>
  89. </view>
  90. <view class="item dis a-c j-s">
  91. <text>车辆种类</text>
  92. <text> {{carInfoVo.carKindCode}}</text>
  93. </view>
  94. <view class="item dis a-c j-s">
  95. <text>能源种类</text>
  96. <text>{{carInfoVo.energyTypeCode}} </text>
  97. </view>
  98. <view class="item dis a-c j-s">
  99. <text>注册日期</text>
  100. <text>{{carInfoVo.registerDate}} </text>
  101. </view>
  102. <view class="item dis a-c j-s">
  103. <text>发证日期</text>
  104. <text> {{carInfoVo.issueDate}}</text>
  105. </view>
  106. <view class="item dis a-c j-s">
  107. <text>是否过户</text>
  108. <text>{{carInfoVo.transfer?'是':'否'}}</text>
  109. </view>
  110. <view class="item dis a-c j-s">
  111. <text>商业险是否过户</text>
  112. <text>{{carInfoVo.biTransfer?'是':'否'}}</text>
  113. </view>
  114. <view class="item dis a-c j-s">
  115. <text>年款</text>
  116. <text> {{carInfoVo.carYear}}</text>
  117. </view>
  118. <view class="item dis a-c j-s">
  119. <text>座位数</text>
  120. <text> {{carInfoVo.seatCount}}座</text>
  121. </view>
  122. <view class="item dis a-c j-s">
  123. <text>整备质量</text>
  124. <text> {{carInfoVo.completeKerbMass}}kg</text>
  125. </view>
  126. <view class="item dis a-c j-s">
  127. <text>排量</text>
  128. <text>{{carInfoVo.displacement}}L</text>
  129. </view>
  130. <view class="item dis a-c j-s">
  131. <text>功率</text>
  132. <text> {{carInfoVo.powerScale}}kw</text>
  133. </view>
  134. <view class="item dis a-c j-s">
  135. <text>新车购置价</text>
  136. <text>{{carInfoVo.purchasePrice}}元 </text>
  137. </view>
  138. <u-gap height="5" bgColor="#F8F8F8"></u-gap>
  139. <!-- 车主信息 -->
  140. <view class="userinfo">
  141. <view class="userinfo-header dis a-c ">
  142. <view class="tag"></view>
  143. <text>车主信息</text>
  144. </view>
  145. <view class="content dis f-c ">
  146. <view class="item dis a-c j-s">
  147. <text>姓名</text>
  148. <text>{{ownersInfo.name}}</text>
  149. </view>
  150. <view class="item dis a-c j-s">
  151. <text>手机号</text>
  152. <text>{{ownersInfo.mobile}}</text>
  153. </view>
  154. <view class="item dis a-c j-s">
  155. <text>证件号</text>
  156. <text>{{ownersInfo.identifyNumber}}</text>
  157. </view>
  158. <view class="item dis a-start j-s">
  159. <text>地址</text>
  160. <text>{{ownersInfo.addr}}</text>
  161. </view>
  162. </view>
  163. </view>
  164. <u-gap height="5" bgColor="#F8F8F8"></u-gap>
  165. <!-- 投保人信息 -->
  166. <view class="userinfo">
  167. <view class="userinfo-header dis a-c ">
  168. <view class="tag"></view>
  169. <text>投保人信息</text>
  170. </view>
  171. <view class="content dis f-c ">
  172. <view class="item dis a-c j-s">
  173. <text>姓名</text>
  174. <text>{{policyHolderInfo.name}}</text>
  175. </view>
  176. <view class="item dis a-c j-s">
  177. <text>手机号</text>
  178. <text>{{policyHolderInfo.mobile}}</text>
  179. </view>
  180. <view class="item dis a-c j-s">
  181. <text>证件号</text>
  182. <text>{{policyHolderInfo.identifyNumber}}</text>
  183. </view>
  184. <view class="item dis a-start j-s">
  185. <text>地址</text>
  186. <text>{{policyHolderInfo.addr}}</text>
  187. </view>
  188. </view>
  189. </view>
  190. <u-gap height="5" bgColor="#F8F8F8"></u-gap>
  191. <!-- 被保人信息 -->
  192. <view class="userinfo">
  193. <view class="userinfo-header dis a-c ">
  194. <view class="tag"></view>
  195. <text>被保人信息</text>
  196. </view>
  197. <view class="content dis f-c ">
  198. <view class="item dis a-c j-s">
  199. <text>姓名</text>
  200. <text>{{insuredPersonInfo.name}}</text>
  201. </view>
  202. <view class="item dis a-c j-s">
  203. <text>手机号</text>
  204. <text>{{insuredPersonInfo.mobile}}</text>
  205. </view>
  206. <view class="item dis a-c j-s">
  207. <text>证件号</text>
  208. <text>{{insuredPersonInfo.identifyNumber}}</text>
  209. </view>
  210. <view class="item dis a-start j-s">
  211. <text>地址</text>
  212. <text>{{insuredPersonInfo.addr}}</text>
  213. </view>
  214. </view>
  215. </view>
  216. </view>
  217. <!-- 查看更多 -->
  218. <view class="loadMore dis a-c j-c" @click="toggleExpand('isExpanded1')"
  219. :style="{position:isExpanded1?'relative':'absolute'}">
  220. <text>查看更多</text>
  221. <image :src="doubleArrowimg" mode="" :style="{transform:`rotate(${isExpanded1?180:0}deg)`}"></image>
  222. </view>
  223. </view>
  224. <!-- 保费因素 -->
  225. <view class="view " :class="{ 'collapsed': !isExpanded2 }">
  226. <view class="header-title"
  227. style="background: linear-gradient( 180deg, #F9F6FF 0%, #FFFFFF 100%);border-color: #E3D5FF;">保费因素
  228. </view>
  229. <view class="items dis f-c " id="premiumFactor">
  230. <view class="item dis a-c j-s" v-if="scoreVo.score">
  231. <text>评分</text>
  232. <text>{{scoreVo.score}}</text>
  233. </view>
  234. <view class="item dis a-c j-s">
  235. <text>交强险系数</text>
  236. <text></text>
  237. </view>
  238. <view class="item dis a-c j-s">
  239. <text class="mr-2">商业险系数</text>
  240. <view class="dis a-c ">
  241. <u--input border="surround"
  242. :customStyle="{background:'rgba(253,233,53,0.05)',borderColor:'#FDE935 !important',padding:'4rpx 18rpx',pointerEvents: 'none',width:'250rpx'}"
  243. v-model="scoreVo.syScore" disabled disabledColor='rgba(253,233,53,0.05)'></u--input>
  244. <view class="colorBlock dis a-c j-c " @tap="updateDiscountShow=true">
  245. <image :src="editimg" mode=""></image>
  246. </view>
  247. </view>
  248. </view>
  249. <view class="item dis a-c j-s" v-if="scoreVo.jqScore">
  250. <text>交强评分</text>
  251. <text>{{scoreVo.jqScore}}</text>
  252. </view>
  253. <view class="item dis a-c j-s" v-if="scoreVo.syScore">
  254. <text>商业评分</text>
  255. <text>{{scoreVo.syScore}}</text>
  256. </view>
  257. <view class="item dis a-start j-s" v-if="scoreVo.ciClaims">
  258. <text>交强出险次数</text>
  259. <text>{{scoreVo.ciClaims}}</text>
  260. </view>
  261. <view class="item dis a-start j-s" v-if="scoreVo.biClaims">
  262. <text>商业出险次数</text>
  263. <text>{{scoreVo.biClaims}}</text>
  264. </view>
  265. <view class="item dis a-start j-s" v-if="scoreVo.lossRation">
  266. <text>总赔付率</text>
  267. <text>{{scoreVo.lossRation}}</text>
  268. </view>
  269. <view class="item dis a-start j-s" v-if="scoreVo.jqLossRation">
  270. <text>交强赔付率</text>
  271. <text>{{scoreVo.jqLossRation}}</text>
  272. </view>
  273. <view class="item dis a-start j-s" v-if="scoreVo.syLossRation">
  274. <text>商业赔付率</text>
  275. <text>{{scoreVo.syLossRation}}</text>
  276. </view>
  277. <view class="item dis a-start j-s">
  278. <text>总折扣率</text>
  279. <text></text>
  280. </view>
  281. <view class="item dis a-start j-s" v-if="costs.ciRatio">
  282. <text>交强折扣</text>
  283. <text>{{costs.ciRatio}}</text>
  284. </view>
  285. <view class="item dis a-start j-s" v-if="costs.biRatio">
  286. <text>商业折扣</text>
  287. <text>{{costs.biRatio}}</text>
  288. </view>
  289. <view class="item dis a-start j-s" v-for="(item,index) in scoreVo.scoreJson" :key="index">
  290. <text>{{item.scoreName}}</text>
  291. <text>{{item.score}}</text>
  292. </view>
  293. </view>
  294. <!-- 查看更多 -->
  295. <view class="loadMore dis a-c j-c" @click="toggleExpand('isExpanded2')"
  296. :style="{position:isExpanded2?'relative':'absolute'}">
  297. <text>查看更多</text>
  298. <image :src="doubleArrowimg" mode="" :style="{transform:`rotate(${isExpanded2?180:0}deg)`}"></image>
  299. </view>
  300. </view>
  301. <!-- 报价方案 -->
  302. <view class="view " :class="{ 'collapsed': !isExpanded3 }">
  303. <view class="header-title"
  304. style="background: linear-gradient( 180deg, #FFF8F8 0%, #FFFFFF 100%);border-color: #FFD9D9;">报价方案
  305. </view>
  306. <view class="items dis f-c " id="quotationScheme">
  307. <view class="item dis a-c j-s">
  308. <text>保费合计</text>
  309. <text class="price">¥{{costs.sumPremium}}</text>
  310. </view>
  311. <view class="item dis a-c j-s" v-if="costs.ciPremium">
  312. <text>交强险</text>
  313. <text>¥{{costs.ciPremium}}</text>
  314. </view>
  315. <view class="item dis a-c j-s" v-if="costs.vvTax">
  316. <view class=" dis a-c ">车船税
  317. <view class="vvTax-Tag ml-1" @click="vvTaxDetailsShow=true">
  318. {{taxRelifFlagName}}
  319. </view>
  320. </view>
  321. <text>¥{{costs.vvTax}}</text>
  322. </view>
  323. <view class="item dis a-start j-s" v-if="costs.biPremium">
  324. <text>商业险</text>
  325. <text>¥{{costs.biPremium}}</text>
  326. </view>
  327. <view class="item dis a-start j-s" v-if="costs.niPremium">
  328. <text>驾意险</text>
  329. <text>¥{{costs.niPremium}}</text>
  330. </view>
  331. <view class="table mb-3" v-if="kindInfoVo.length>0">
  332. <view class="header dis a-c j-s">
  333. <text class="th special">商业险</text>
  334. <text class="th">保额</text>
  335. <text class="th">保费</text>
  336. </view>
  337. <view class="tr dis a-c j-c" v-for="(item,index) in kindInfoVo" :key="index">
  338. <text class="td special">{{item.kindName}}</text>
  339. <text v-if="['A'].includes(item.kindCode)" class="td">{{item.amount}}</text>
  340. <text v-else-if="['D4', 'SY_FJ_YBW2'].includes(item.kindCode)"
  341. class="td">{{convertedValue(item.unitAmount)}}</text>
  342. <text v-else-if="['MJ1', 'MJ2', 'MJ3', 'MJ4'].includes(item.kindCode)"
  343. class="td">{{item.amount}}%</text>
  344. <text v-else-if="['TY1', 'TY2', 'TY3', 'TY4'].includes(item.kindCode)"
  345. class="td">{{item.unitAmount}}次</text>
  346. <text v-else class="td">{{convertedValue(item.amount)}}</text>
  347. <text class="td">{{item.premium?item.premium:'-'}}</text>
  348. </view>
  349. </view>
  350. <view class="table" v-if="accidentalDrivings.length>0">
  351. <view class="header dis a-c j-s">
  352. <text class="th special">驾意险</text>
  353. <text class="th">单价/数量</text>
  354. <text class="th">保费</text>
  355. </view>
  356. <view class="tr dis a-c j-c" v-for="(item,index) in accidentalDrivings" :key="index">
  357. <text class="td special">{{item.productName}}</text>
  358. <text class="td">{{item.quantity}}份</text>
  359. <text class="td">{{item.sumAmount}}</text>
  360. </view>
  361. </view>
  362. </view>
  363. <!-- 查看更多 -->
  364. <view class="loadMore dis a-c j-c" @click="toggleExpand('isExpanded3')"
  365. :style="{position:isExpanded3?'relative':'absolute'}">
  366. <text>查看更多</text>
  367. <image :src="doubleArrowimg" mode="" :style="{transform:`rotate(${isExpanded3?180:0}deg)`}"></image>
  368. </view>
  369. </view>
  370. </view>
  371. <view class="footer">
  372. <!-- 待核保 -->
  373. <view class="orderAction dis a-c j-s ">
  374. <view class=" dis f-c a-c j-c">
  375. <view class=" totalPrice dis a-end ">
  376. <text>¥</text>
  377. <text>{{costs.sumPremium || 0 }}</text>
  378. </view>
  379. <text class="feeEntry" @click="getfeeEntry">费用信息</text>
  380. </view>
  381. <view class="dis a-c j-s" v-if="isFromShare!='share'">
  382. <view class="btn btns dis a-c j-c " @click="home">
  383. 投保其他车辆
  384. </view>
  385. <view class="btn dis a-c j-c " @click=" applyUnderwriting">
  386. 申请核保
  387. </view>
  388. </view>
  389. </view>
  390. </view>
  391. <!-- 系数修改弹窗 -->
  392. <uni-Popup :show="updateDiscountShow" @close="updateDiscountShow=false" :closeable="false"
  393. headerTitle="商业险折扣系数修改" overflow="auto" :headerStyle="{fontSize:'36rpx'}" maxHeight="980rpx" mode="center"
  394. width="90%">
  395. <template #content>
  396. <view class="updateDiscount">
  397. <text class="text ">商业险折扣系数和自主定价系数只能修改一个,修改后系统会重新报价,计算修改后的保费</text>
  398. <u-radio-group v-model="updateDiscountSValue" placement="column" class="mt-3 " activeColor="#FDE935"
  399. iconColor='#333'>
  400. <u-radio label="明月几时有" style="align-items: baseline;">
  401. <view class="dis f-c " style="width: 100%;">
  402. <view class="dis a-start input mb-1">
  403. <text>商业险折扣系数</text>
  404. <text>(0.8521252)</text>
  405. </view>
  406. <u--input placeholder="请输入内容" clearable></u--input>
  407. </view>
  408. </u-radio>
  409. <u-radio label="明月几时有" class="mt-3" style="align-items: baseline;">
  410. <view class="dis f-c " style="width: 100%;">
  411. <view class="dis a-c input mb-1">
  412. <text>自主定价系数</text>
  413. <text>(0.8)</text>
  414. </view>
  415. <u--input disabled placeholder="输入1—100的数字" clearable></u--input>
  416. </view>
  417. </u-radio>
  418. </u-radio-group>
  419. <view class="btn dis mt-3">
  420. <u-button class="mr-2" type="primary" shape="circle" :plain="true" text="关闭" color="#DDDDDD"
  421. @click="updateDiscountShow=false" :customStyle="{color:'#333'}"></u-button>
  422. <u-button type="primary" shape="circle" text="确定" color="#FDE935"
  423. :customStyle="{color:'#1f1f1f'}"></u-button>
  424. </view>
  425. </view>
  426. </template>
  427. </uni-Popup>
  428. <!-- 费用信息展示弹窗 -->
  429. <uni-Popup :show="feeEntryInfoShow" @close="feeEntryInfoShow=false" :closeable="false" headerTitle="费用信息"
  430. overflow="auto" :headerStyle="{fontSize:'36rpx'}" maxHeight="980rpx" mode="center" width="90%">
  431. <template #content>
  432. <view class="feeEntryClass" v-if="insFeeOrders">
  433. <view class="dis a-start j-s data-view">
  434. <text class="title">交强险</text>
  435. <view class="dis f-c discount">
  436. <view class="dis a-c j-s">
  437. <text>保费:</text>
  438. <text class="dis j-end a-c">¥{{insFeeOrders.jqPremium}}</text>
  439. </view>
  440. <view class="dis a-c j-s">
  441. <text>优惠:</text>
  442. <text class="font-weight dis j-end a-c">¥{{insFeeOrders.jqPayablePremium}}</text>
  443. </view>
  444. </view>
  445. </view>
  446. <view class="dis a-start j-s data-view">
  447. <text class="title">商业险</text>
  448. <view class="dis f-c discount">
  449. <view class="dis a-c j-s">
  450. <text>保费:</text>
  451. <text class="dis j-end a-c">¥{{insFeeOrders.syPremium}}</text>
  452. </view>
  453. <view class="dis a-c j-s">
  454. <text>优惠:</text>
  455. <text class="font-weight dis j-end a-c">¥{{insFeeOrders.syPayablePremium}}</text>
  456. </view>
  457. </view>
  458. </view>
  459. <view class="dis a-start j-s data-view">
  460. <text class="title">驾意险</text>
  461. <view class="dis f-c discount">
  462. <view class="dis a-c j-s">
  463. <text>保费:</text>
  464. <text class="dis j-end a-c">¥{{insFeeOrders.jyPremium}}</text>
  465. </view>
  466. <view class="dis a-c j-s">
  467. <text>优惠:</text>
  468. <text class="font-weight dis j-end a-c">¥{{insFeeOrders.jyPayablePremium}}</text>
  469. </view>
  470. </view>
  471. </view>
  472. <view class="discountTotal dis a-c j-s ">
  473. <text class="name">优惠总计</text>
  474. <text class="sum">¥{{insFeeOrders.totalPayablePremium}}</text>
  475. </view>
  476. <view class="footer-btn dis a-c j-c" @click="feeEntryInfoShow=false">
  477. 关闭
  478. </view>
  479. </view>
  480. </template>
  481. </uni-Popup>
  482. <!-- 车船税信息弹窗 -->
  483. <uni-Popup :show="vvTaxDetailsShow" @close='vvTaxDetailsShow=false' headerTitle="车船税" overflow="auto"
  484. maxHeight="580rpx">
  485. <template #content>
  486. <view class="vvTaxDetails-cell dis f-c ">
  487. <view class="cell-item dis a-c j-s">
  488. <text>车船税</text>
  489. <text>{{taxRelifFlagName}}</text>
  490. </view>
  491. <template>
  492. <view class="cell-item dis a-c j-s"
  493. v-if="vehicleAndVesselTaxVo.taxRelifFlag == 2 || vehicleAndVesselTaxVo.taxRelifFlag == 3">
  494. <text>减免税凭证号</text>
  495. <text>{{vehicleAndVesselTaxVo.extendChar2}}</text>
  496. </view>
  497. <view class="cell-item dis a-c j-s" v-if="vehicleAndVesselTaxVo.taxRelifFlag == 4">
  498. <text>完税凭证号</text>
  499. <text>{{vehicleAndVesselTaxVo.paidFreeCertificate}}</text>
  500. </view>
  501. <view class="cell-item dis a-c j-s"
  502. v-if="vehicleAndVesselTaxVo.taxRelifFlag == 2 || vehicleAndVesselTaxVo.taxRelifFlag == 3">
  503. <text>减免税原因</text>
  504. <text>{{vehicleAndVesselTaxVo.relifReason}}</text>
  505. </view>
  506. <view class="cell-item dis a-c j-s" v-if="vehicleAndVesselTaxVo.taxRelifFlag == 3">
  507. <text>减税比例</text>
  508. <text>{{vehicleAndVesselTaxVo.taxRelief}}</text>
  509. </view>
  510. <view class="cell-item dis a-c j-s" v-if="vehicleAndVesselTaxVo.taxRelifFlag !=1">
  511. <text>税务机关代码</text>
  512. <text>{{vehicleAndVesselTaxVo.taxComCode}}</text>
  513. </view>
  514. <view class="cell-item dis a-c j-s" v-if="vehicleAndVesselTaxVo.taxRelifFlag !=1">
  515. <text>税务机关名称</text>
  516. <text>{{vehicleAndVesselTaxVo.taxComName}}</text>
  517. </view>
  518. <view class="cell-item dis a-c j-s" v-if="vehicleAndVesselTaxVo.taxRelifFlag ==4">
  519. <text>完税凭证填发日期</text>
  520. <text>{{vehicleAndVesselTaxVo.taxDocumentDate}}</text>
  521. </view>
  522. <view class="cell-item dis a-c j-s" v-if="vehicleAndVesselTaxVo.taxRelifFlag ==4">
  523. <text>完税凭证地区</text>
  524. <text>{{vehicleAndVesselTaxVo.taxPaidAreaCode}}</text>
  525. </view>
  526. </template>
  527. </view>
  528. </template>
  529. </uni-Popup>
  530. <!-- 优惠方式弹窗 -->
  531. <uni-Popup :show="discountMethodShow" @close='discountMethodShow=false' headerTitle="选择优惠方式" overflow="auto"
  532. maxHeight="580rpx">
  533. <template #content>
  534. <view class="discountMethod-cell dis f-c " v-if="insFeeOrders && insFeeOrders.availableAmount">
  535. <view class="item dis f-c a-start" @click="selectedBenefits">
  536. <text class="title mb-1">客户权益</text>
  537. <text>当前客户出单后,可赠送客户价值 <text class="price"
  538. v-if="insFeeOrders.availableAmount">{{insFeeOrders.availableAmount}}</text> 的权益礼包</text>
  539. </view>
  540. <view class="item dis f-c a-start" @click="discountMethodShow=false,underwritingShow=true">
  541. <text class="title mb-1">现金优惠</text>
  542. <text>选择为当前客户最多优惠<text class="price"
  543. v-if="insFeeOrders.totalExportPremium">{{insFeeOrders.totalExportPremium}}</text>元</text>
  544. </view>
  545. </view>
  546. </template>
  547. </uni-Popup>
  548. <!-- 确认核保提示 -->
  549. <uni-PopupMessage :show="underwritingShow" @close='underwritingShow=false' @cancelEvent='underwritingShow=false'
  550. @confirmEvent="underwritingEvent">
  551. <template #content>
  552. <view class="dis a-c j-c ">
  553. 是否确认提交核保
  554. </view>
  555. </template>
  556. </uni-PopupMessage>
  557. <!-- 右上角分享功能 -->
  558. <uni-share :show="shareShow" @close="shareShow=false" @weixin="weixin" @userSmsShare="userSmsShare"
  559. @copyLink="copyLink" @saveToAlbum="saveToAlbum" @closeModal="shareShow = false">
  560. </uni-share>
  561. <!-- 自定义加载动画 -->
  562. <u-overlay :show="loadingShow" style="background-color: rgba(255, 255, 255, 0.6);">
  563. <view class="dis f-c a-c j-c " style="height: 100%;">
  564. <u-loading-icon></u-loading-icon>
  565. <text style="color: #909399;" class="mt-1">{{loadingText}}</text>
  566. </view>
  567. </u-overlay>
  568. </view>
  569. </template>
  570. <script>
  571. import {
  572. turnBase64Image,
  573. dictionaryMatch····
  574. } from '@/plugins/utils.js';
  575. import Mixin from './Mixin.js';
  576. export default {
  577. mixins: [Mixin], // 注入 Mixin
  578. data() {
  579. return {
  580. discountMethodShow: false, //选择优惠方式弹窗
  581. feeEntryInfoShow: false, //费用信息弹窗
  582. updateDiscountSValue: "",
  583. insCompanyVo: {}, //保险公司信息
  584. updateDiscountShow: false, //折扣系数修改弹窗
  585. underwritingShow: false, //核保弹窗
  586. loadingShow: false, //加载
  587. loadingText: '加载中', //加载提示文字
  588. shareShow: false, //分享弹窗
  589. doubleArrowimg: "", //箭头图片
  590. editimg: "", //编辑
  591. premiumFactorHeight: 0,
  592. basicInfoHeight: 0,
  593. quotationSchemeHeight: 0,
  594. collapsedHeight: 258,
  595. isExpanded1: false, //展开收起
  596. isExpanded2: false, //展开收起
  597. isExpanded3: false, //展开收起
  598. carInfoVo: {}, //车辆信息
  599. ownersInfo: {}, //车主信息
  600. policyHolderInfo: {}, //投保人信息
  601. insuredPersonInfo: {}, //被保人信息
  602. scoreVo: {}, //保费因素
  603. costs: {}, //报价金额信息
  604. salesmanInfo: {}, //业务员信息
  605. kindInfoVo: [], //商业险险别
  606. accidentalDrivings: [], //驾意险列表
  607. imageVoList: [],
  608. vvTaxDetailsShow: false, //车船税展示弹窗
  609. //车船税form
  610. //字典
  611. car_nature_codeoptions: [], //使用性质
  612. vehicle_use_code01options: [], //营业
  613. vehicle_use_code02options: [], //非营业
  614. car_kind_codeoptions: [], //车辆种类
  615. energy_type_codeoptions: [], //能源类型
  616. car_type_codeoptions: [], //车辆类型
  617. car_tax_codeoptions: [], //车船税类型
  618. taxpayerIdentifieroptions: [], //车船税类型
  619. car_tax_reason_codeoptions: [], //减免税原因
  620. // 影像信息
  621. modificationFlag: false, //影像修改标识
  622. specialInfoVo: [], //已选特约
  623. insFeeOrders: {}, //费用信息
  624. insOrderRightsInfoVo: {}, //权益信息
  625. insOrderRightsInfoDto: null, //权益参数
  626. isFromShare: "",
  627. }
  628. },
  629. onShow() {
  630. console.log(this.insOrderRightsInfoDto);
  631. },
  632. async onLoad(options) {
  633. this.loadingShow = true;
  634. try {
  635. this.isFromShare = options.from;
  636. await this.getDicType("car_tax_code"); //车船税类型
  637. await this.getDicType("taxpayerIdentifier"); //纳税人证件类型
  638. await this.getDicType("car_tax_reason_code"); //减免税原因代码
  639. await this.getDicType("car_nature_code"); //使用性质
  640. await this.getDicType("vehicle_use_code", "01"); //营业
  641. await this.getDicType("vehicle_use_code", "02"); //非营业
  642. await this.getDicType("car_kind_code"); //车辆种类
  643. await this.getDicType("energy_type_code"); //能源类型
  644. await this.getDicType("car_type_code"); //车辆类型
  645. await this.details(options.ordersNo); //详情接口
  646. this.loadingShow = false;
  647. const query = uni.createSelectorQuery();
  648. query.select('#basicInfo').boundingClientRect((rect) => {
  649. this.basicInfoHeight = rect.height; // 获取元素高度
  650. }).exec();
  651. query.select('#premiumFactor').boundingClientRect((rect) => {
  652. this.premiumFactorHeight = rect.height; // 获取元素高度
  653. }).exec()
  654. query.select('#quotationScheme').boundingClientRect((rect) => {
  655. this.quotationSchemeHeight = rect.height; // 获取元素高度
  656. }).exec()
  657. } catch (error) {
  658. this.loadingShow = false;
  659. }
  660. },
  661. async mounted() {
  662. this.doubleArrowimg = await turnBase64Image('/static/image/doubleArrow.png');
  663. this.editimg = await turnBase64Image('/static/icon/edit.png')
  664. },
  665. computed: {
  666. //获取车船税类型
  667. taxRelifFlagName() {
  668. let info = this.car_tax_codeoptions.find(ele => ele.value === this.vehicleAndVesselTaxVo.taxRelifFlag)
  669. return info?.description;
  670. },
  671. //报价年份
  672. quoteYear() {
  673. const year = this.order.createTime.slice(0, 4);
  674. return year;
  675. },
  676. },
  677. methods: {
  678. // 查看费用信息
  679. getfeeEntry() {
  680. if (!this.insFeeOrders) {
  681. uni.showToast({
  682. icon: 'none',
  683. title: '没有费用信息'
  684. })
  685. } else {
  686. this.feeEntryInfoShow = true;
  687. }
  688. },
  689. // 选择权益
  690. selectedBenefits() {
  691. this.discountMethodShow = false;
  692. let params = {
  693. ownersInfo: this.ownersInfo, //车主
  694. policyHolderInfo: this.policyHolderInfo, //投保人
  695. insuredPersonInfo: this.insuredPersonInfo, //被保人
  696. insFeeOrders: this.insFeeOrders, //费用信息
  697. ordersNo: this.ordersNo,
  698. insOrderRightsInfoVo: this.insOrderRightsInfoVo, //权益信息
  699. }
  700. uni.navigateTo({
  701. url: '/pages/reward/customerBenefit?info=' + JSON.stringify(params)
  702. })
  703. },
  704. specialTermsText() {
  705. if (['资金财险', '华泰财险', '国任财险'].includes(this.companyName)) {
  706. return '点击选择'
  707. } else {
  708. return "暂不支持"
  709. }
  710. },
  711. // 补传影像
  712. async uploadRetry() {
  713. const mergedArray = [...this.carImageListId, ...this.ownerImageListId, ...this
  714. .policyHolderImageListId, ...this.insuredPersonImageListId
  715. ];
  716. if (mergedArray.length > 0) {
  717. await this.$http.post('/unify/order/imageSave', {
  718. imageList: mergedArray,
  719. quoteNo: this.quoteNo,
  720. })
  721. }
  722. },
  723. applyUnderwriting() {
  724. if (this.insFeeOrders?.availableAmount && !this.insOrderRightsInfoDto) {
  725. this.discountMethodShow = true;
  726. } else {
  727. this.underwritingShow = true
  728. }
  729. },
  730. //调用核保接口
  731. async underwritingEvent() {
  732. if (this.loadingShow) {
  733. return; //防重入:loading期间忽略重复触发
  734. }
  735. this.underwritingShow = false; //关闭弹窗
  736. this.loadingText = "核保中";
  737. this.loadingShow = true; //加载loading
  738. if (this.modificationFlag) {
  739. // 修改影像后,补传影像
  740. await this.uploadRetry();
  741. }
  742. let images = await this.$http.post('/unify/order/imagesUpload', {
  743. order: {
  744. ordersNo: this.order.ordersNo,
  745. quoteNo: this.order.quoteNo
  746. },
  747. imageVoList: [...this.carImageListId, ...this.ownerImageListId, ...this
  748. .policyHolderImageListId, ...this.insuredPersonImageListId
  749. ]
  750. }); //影像提交保险公司
  751. if (images.code == '200') { //核保
  752. // specialAppointmentsVos=[] 特约
  753. let underwriting = await this.$http.post('/unify/order/underwriting', {
  754. order: {
  755. ordersNo: this.ordersNo,
  756. },
  757. insOrderRightsInfoDto: this.insOrderRightsInfoDto,
  758. });
  759. if (underwriting.code == '200') {
  760. let res = await this.$http.get('/supplementOrder/getOrderDetail?ordersNo=' + this.ordersNo);
  761. if (res.code == '200') {
  762. this.orderStatus = res.data.order.orderStatus; //订单状态
  763. // 状态为人工处理跳转页面
  764. if (this.orderStatus == 3) {
  765. uni.navigateTo({
  766. url: '/pages/quote/manualUnderwritingPage?Info=' + JSON.stringify(res
  767. .data),
  768. })
  769. }
  770. }
  771. this.loadingShow = false;
  772. uni.showToast({
  773. icon: 'none',
  774. title: '核保成功'
  775. })
  776. // 核保成功后查询支付码并跳转支付码页面
  777. if (this.orderStatus != 3) { //人工处理已跳转,不再查询支付码
  778. await this.queryPaymentCode();
  779. }
  780. } else {
  781. this.loadingShow = false;
  782. uni.showToast({
  783. icon: 'none',
  784. duration: 10000,
  785. title: underwriting.msg
  786. })
  787. }
  788. } else {
  789. this.loadingShow = false;
  790. uni.showToast({
  791. icon: 'none',
  792. title: images.msg
  793. })
  794. }
  795. },
  796. //查询支付码并跳转(含延时过渡与异常兜底)
  797. async queryPaymentCode() {
  798. this.loadingText = "查询支付码中";
  799. this.loadingShow = true;
  800. try {
  801. const preDelay = 1000; //查询前loading「查询支付码中」展示时长(毫秒)
  802. const navDelay = 1000; //成功后「正在前往支付页面」展示时长(毫秒)
  803. // 查询前:loading「查询支付码中」转1秒再请求接口
  804. await new Promise(resolve => setTimeout(resolve, preDelay));
  805. let qrCode = await this.$http.get('/order/qrCode/getQrCode?orderNo=' + this.ordersNo);
  806. if (qrCode.code == '200') {
  807. // 成功后:loading文字改为"正在前往支付页面",再转1秒后跳转
  808. this.loadingText = "正在前往支付页面";
  809. await new Promise(resolve => setTimeout(resolve, navDelay));
  810. this.loadingShow = false;
  811. uni.navigateTo({
  812. url: '/pages/quote/paymentCode?ordersNo=' + encodeURIComponent(this.ordersNo),
  813. })
  814. } else {
  815. this.loadingShow = false;
  816. uni.showToast({
  817. icon: 'none',
  818. title: qrCode.msg
  819. })
  820. }
  821. } catch (error) {
  822. this.loadingShow = false;
  823. uni.showToast({
  824. icon: 'none',
  825. title: '支付码查询失败'
  826. })
  827. }
  828. },
  829. //影像资料
  830. mediaFiles() {
  831. uni.navigateTo({
  832. url: "/pages/quote/imageGalleryPage?quoteNo=" + this.quoteNo,
  833. })
  834. },
  835. //特别约定
  836. specialTerms() {
  837. uni.navigateTo({
  838. url: "/pages/quote/specialAgreementPage?companyId=" + this.insCompanyVo.id + '&productId=' +
  839. this.order.productId +
  840. '&specialInfoVo=' + JSON.stringify(this.specialInfoVo),
  841. })
  842. },
  843. //分享微信
  844. weixin() {
  845. // #ifdef APP-PLUS
  846. uni.share({
  847. provider: "weixin",
  848. scene: "WXSceneSession",
  849. type: 0,
  850. href: this.$base.h5BaseUrl +
  851. `/#/pages/quote/quoteRecordDetail?ordersNo=${this.ordersNo}&from=share`,
  852. title: `${this.companyName}${this.quoteYear}年的车险报价`,
  853. summary: `${this.companyName}报价完成,保费:${this.costs.sumPremium}元,点击查看详情`,
  854. imageUrl: "/static/image/zgcx.png",
  855. success: function(res) {
  856. console.log("success:" + JSON.stringify(res));
  857. },
  858. fail: function(err) {
  859. console.log("fail:" + JSON.stringify(err));
  860. }
  861. });
  862. // #endif
  863. // #ifdef H5
  864. uni.showToast({
  865. icon: 'none',
  866. title: "请到App中操作"
  867. })
  868. // #endif
  869. },
  870. //短信分享
  871. userSmsShare() {
  872. // #ifdef APP-PLUS
  873. var msg = plus.messaging.createMessage(plus.messaging.TYPE_SMS);
  874. msg.to = [this.policyHolderInfo.name]; //投保人手机号
  875. msg.body =
  876. `【${this.salesmanInfo.systemShortName}】尊敬的【${this.carInfoVo.licenseNo}】车主,${this.companyName}${this.quoteYear}年车险报价:${this.costs.sumPremium}元;联系人:${this.salesmanInfo.name} ${this.salesmanInfo.mobile},点击链接查看详情或电话咨询联系人${this.$base.h5BaseUrl + `/#/pages/quote/quoteRecordDetail?ordersNo=${this.ordersNo}&from=share`}`;
  877. plus.messaging.sendMessage(msg);
  878. // #endif
  879. // #ifdef H5
  880. uni.showToast({
  881. icon: 'none',
  882. title: "请到App中操作"
  883. })
  884. // #endif
  885. },
  886. //复制链接
  887. copyLink() {
  888. uni.setClipboardData({
  889. data: this.$base.h5BaseUrl +
  890. `/#/pages/quote/quoteRecordDetail?ordersNo=${this.ordersNo}&from=share`, //要被复制的内容
  891. success: () => { //复制成功的回调函数
  892. uni.showToast({ //提示
  893. icon: 'none',
  894. title: '链接已复制'
  895. })
  896. }
  897. });
  898. },
  899. //数据字典
  900. async getDicType(type, vehicle) {
  901. if (vehicle) {
  902. let res = await this.$http.get(`/dict/get?dictCode=${type}&parentValue=${vehicle}`);
  903. this[type + vehicle + "options"] = res.data;
  904. } else {
  905. let res = await this.$http.get('/dict/get?dictCode=' + type);
  906. this[type + "options"] = res.data;
  907. }
  908. },
  909. //数字格式化
  910. convertedValue(num) {
  911. if (!num) {
  912. return "-";
  913. }
  914. if (num < 10000) {
  915. return num.toString();
  916. } else if (num < 100000000) {
  917. return (Math.floor(num / 10000 * 10) / 10) + '万';
  918. } else {
  919. return (Math.floor(num / 100000000 * 10) / 10) + '亿';
  920. }
  921. },
  922. async details(orderno) {
  923. let res = await this.$http.get('/supplementOrder/getOrderDetail?ordersNo=' + orderno);
  924. if (res.code == 200) {
  925. this.orderStatus = res.data.order.orderStatus; //订单状态
  926. this.companyName = res.data.order.companyName; //保险公司简称
  927. this.insCompanyVo = res.data.insCompanyVo[0]; //保险公司信息
  928. this.ordersNo = res.data.order.ordersNo; //订单号
  929. this.quoteNo = res.data.order.quoteNo; //报价号
  930. this.ciRiskInfoVo = res.data.ciRiskInfoVo; //交强大类
  931. this.biRiskInfoVo = res.data.biRiskInfoVo; //商业大类
  932. this.costs = res.data.costs; //报价金额信息
  933. this.policy = res.data.policy; //保单号信息
  934. this.kindInfoVo = res.data.kindInfoVo; //商业险险别
  935. this.accidentalDrivings = res.data.accidentalDrivings; //驾意险
  936. this.carInfoVo = res.data.carInfoVo; //车辆信息
  937. this.ownersInfo = res.data.ownersInfo; //车主信息
  938. this.policyHolderInfo = res.data.policyHolderInfo; //投保人信息
  939. this.insuredPersonInfo = res.data.insuredPersonInfo; //被保人信息
  940. this.scoreVo = res.data.scoreVo; //保费因素
  941. this.vehicleAndVesselTaxVo = res.data.vehicleAndVesselTaxVo; //车船税信息
  942. this.salesmanInfo = res.data.salesmanInfo; //业务员信息
  943. this.insFeeOrders = res.data.insFeeOrders; //费用信息
  944. this.insOrderRightsInfoVo = res.data.insOrderRightsInfoVo; //权益详情
  945. this.imageVoList = res.data.imageVoList;
  946. this.order = res.data.order;
  947. this.imageEcho(res.data.imageVoList) // 影像获取完毕
  948. // 去掉this.kindInfoVo中的交强险
  949. this.kindInfoVo = this.kindInfoVo.filter(item => item.kindCode != 'J1')
  950. this.carInfoVo.carNatureCode = dictionaryMatch(this.car_nature_codeoptions, res
  951. .data.carInfoVo
  952. .carNatureCode)
  953. if (res.data.carInfoVo.carNatureCode == '01') {
  954. this.carInfoVo.vehicleUseCode = dictionaryMatch(this
  955. .vehicle_use_code01options,
  956. res.data
  957. .carInfoVo
  958. .vehicleUseCode)
  959. } else {
  960. this.carInfoVo.vehicleUseCode = dictionaryMatch(this
  961. .vehicle_use_code02options,
  962. res.data
  963. .carInfoVo
  964. .vehicleUseCode)
  965. }
  966. this.carInfoVo.carTypeCode = dictionaryMatch(this.car_type_codeoptions, res.data
  967. .carInfoVo
  968. .carTypeCode)
  969. this.carInfoVo.carKindCode = dictionaryMatch(this.car_kind_codeoptions, res.data
  970. .carInfoVo
  971. .carKindCode)
  972. this.carInfoVo.energyTypeCode = dictionaryMatch(this.energy_type_codeoptions, res
  973. .data
  974. .carInfoVo
  975. .energyTypeCode)
  976. }
  977. },
  978. //右上角分享
  979. share() {
  980. this.shareShow = true;
  981. },
  982. toggleExpand(name) {
  983. this[name] = !this[name];
  984. },
  985. }
  986. }
  987. </script>
  988. <style lang="scss" scoped>
  989. .page {
  990. height: 100%;
  991. background-color: #F8F8F8;
  992. box-sizing: border-box;
  993. }
  994. .content {
  995. padding: 20rpx 30rpx 186rpx;
  996. box-sizing: border-box;
  997. //过户信息
  998. .transfer {
  999. padding: 30rpx;
  1000. box-sizing: border-box;
  1001. background: #fff;
  1002. border-radius: 20rpx;
  1003. .item {
  1004. width: 50%;
  1005. text:first-child {
  1006. width: 80%;
  1007. font-size: 28rpx;
  1008. color: #666;
  1009. }
  1010. text:last-child {
  1011. width: 20%;
  1012. font-size: 28rpx;
  1013. color: #333;
  1014. }
  1015. }
  1016. .item:nth-child(3) {
  1017. width: 100%;
  1018. text:first-child {
  1019. width: 25%;
  1020. font-size: 28rpx;
  1021. color: #666;
  1022. }
  1023. text:last-child {
  1024. width: 75%;
  1025. font-size: 28rpx;
  1026. color: #333;
  1027. }
  1028. }
  1029. .Attachment {
  1030. width: 100%;
  1031. >view {
  1032. position: relative;
  1033. width: 50%;
  1034. padding: 16rpx 30rpx;
  1035. box-sizing: border-box;
  1036. background-color: #1F1F1F;
  1037. image {
  1038. width: 108rpx;
  1039. height: 108rpx;
  1040. position: absolute;
  1041. top: 0;
  1042. right: 0;
  1043. }
  1044. .title {
  1045. font-size: 30rpx;
  1046. font-weight: 400;
  1047. color: #333;
  1048. }
  1049. .smallText {
  1050. font-size: 24rpx;
  1051. color: #999;
  1052. }
  1053. }
  1054. >view:first-child {
  1055. background: linear-gradient(180deg, #FFF6EB 0%, #FFFCF3 100%);
  1056. border-radius: 15rpx;
  1057. margin-right: 18rpx;
  1058. }
  1059. >view:last-child {
  1060. background: linear-gradient(180deg, #E7FDF8 0%, #F6FFFD 100%);
  1061. border-radius: 15rpx;
  1062. }
  1063. }
  1064. }
  1065. //内容区域
  1066. .view {
  1067. position: relative;
  1068. background-color: #fff;
  1069. border-radius: 20rpx;
  1070. overflow: hidden;
  1071. margin-top: 20rpx;
  1072. //头部背景
  1073. .header-title {
  1074. padding: 20rpx;
  1075. box-sizing: border-box;
  1076. background: linear-gradient(180deg, #FFFCEA 0%, #FFFFFF 100%);
  1077. border-radius: 20rpx 20rpx 0 0;
  1078. border-top: 1rpx solid #FFE1A4;
  1079. font-size: 32rpx;
  1080. color: #333;
  1081. font-weight: bold;
  1082. }
  1083. .items {
  1084. padding: 0 20rpx 20rpx;
  1085. box-sizing: border-box;
  1086. .item {
  1087. margin-bottom: 30rpx;
  1088. >:first-child {
  1089. font-size: 30rpx;
  1090. color: #666;
  1091. }
  1092. >:last-child {
  1093. font-size: 30rpx;
  1094. color: #333;
  1095. font-weight: bold;
  1096. }
  1097. }
  1098. .table {
  1099. width: 100%;
  1100. border-radius: 4rpx;
  1101. border: 1rpx solid #FFD9D9;
  1102. .header {
  1103. background-color: #FFF8F8;
  1104. border-radius: 4rpx 4rpx 0 0;
  1105. .th {
  1106. padding: 15rpx;
  1107. box-sizing: border-box;
  1108. text-align: center;
  1109. font-size: 28rpx;
  1110. color: #FF5B45;
  1111. flex: 1;
  1112. }
  1113. .th.special {
  1114. flex: 2;
  1115. }
  1116. }
  1117. .tr {
  1118. .td {
  1119. padding: 15rpx;
  1120. box-sizing: border-box;
  1121. text-align: center;
  1122. font-size: 28rpx;
  1123. flex: 1;
  1124. }
  1125. .td.special {
  1126. flex: 2;
  1127. }
  1128. }
  1129. .tr:nth-child(odd) {
  1130. background-color: #FBFBFB;
  1131. }
  1132. }
  1133. }
  1134. }
  1135. }
  1136. .userinfo {
  1137. margin-top: 24rpx;
  1138. .userinfo-header {
  1139. font-weight: bold;
  1140. font-size: 30rpx;
  1141. color: #333;
  1142. .tag {
  1143. width: 6rpx;
  1144. height: 30rpx;
  1145. background: #FDE935;
  1146. border-radius: 0rpx 6rpx 6rpx 0rpx;
  1147. margin-right: 6rpx;
  1148. }
  1149. }
  1150. .content {
  1151. padding: 20rpx 0;
  1152. box-sizing: border-box;
  1153. .item {
  1154. margin-bottom: 30rpx;
  1155. text:first-child {
  1156. font-size: 30rpx;
  1157. color: #666;
  1158. }
  1159. text:last-child {
  1160. font-size: 30rpx;
  1161. color: #333;
  1162. font-weight: bold;
  1163. width: 75%;
  1164. text-align: right;
  1165. }
  1166. }
  1167. }
  1168. }
  1169. //查看更多
  1170. .loadMore {
  1171. position: absolute;
  1172. bottom: 0;
  1173. left: 0;
  1174. right: 0;
  1175. padding: 20rpx;
  1176. box-sizing: border-box;
  1177. background: linear-gradient(0, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  1178. text {
  1179. font-size: 28rpx;
  1180. color: #999;
  1181. }
  1182. image {
  1183. width: 24rpx;
  1184. height: 24rpx;
  1185. margin-left: 4rpx;
  1186. transition: transform 0.5s;
  1187. /* 添加过渡效果 */
  1188. }
  1189. }
  1190. //车船税
  1191. .vvTax-Tag {
  1192. padding: 4rpx 20rpx;
  1193. box-sizing: border-box;
  1194. background: #FF5B45;
  1195. border-radius: 20rpx 20rpx 20rpx 20rpx;
  1196. font-size: 26rpx;
  1197. color: #fff;
  1198. line-height: 1.2;
  1199. }
  1200. //默认高度
  1201. .collapsed {
  1202. max-height: 516rpx;
  1203. /* 露出部分的高度 */
  1204. }
  1205. // 车船税弹窗
  1206. .vvTaxDetails-cell {
  1207. padding: 40rpx;
  1208. box-sizing: border-box;
  1209. .cell-item {
  1210. font-size: 30rpx;
  1211. color: #333;
  1212. margin-bottom: 30rpx;
  1213. text:last-child {
  1214. font-weight: bold;
  1215. }
  1216. }
  1217. .cell-item:last-child {
  1218. margin-bottom: 0;
  1219. }
  1220. }
  1221. //底部样式
  1222. .footer {
  1223. position: fixed;
  1224. bottom: 0;
  1225. left: 0;
  1226. right: 0;
  1227. padding: 25rpx 30rpx 55rpx;
  1228. box-sizing: border-box;
  1229. background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 254, 245, 0.7) 100%);
  1230. border-radius: 0rpx 0rpx 0rpx 0rpx;
  1231. backdrop-filter: blur(12rpx);
  1232. .totalPrice {
  1233. text {
  1234. font-size: 28rpx;
  1235. color: #FF540A;
  1236. font-weight: bold;
  1237. }
  1238. text:last-child {
  1239. font-size: 42rpx;
  1240. font-weight: bold;
  1241. }
  1242. }
  1243. .feeEntry {
  1244. font-size: 24rpx;
  1245. color: #FFAC1D;
  1246. cursor: pointer;
  1247. }
  1248. .btn {
  1249. background: #FDE935;
  1250. padding: 25rpx 30rpx;
  1251. box-sizing: border-box;
  1252. border-radius: 58rpx 58rpx 58rpx 58rpx;
  1253. font-size: 30rpx;
  1254. color: #1F1F1F;
  1255. font-weight: bold;
  1256. margin: 0 10rpx;
  1257. }
  1258. //操作按钮特殊样式
  1259. .btns {
  1260. background: rgba(253, 233, 53, 0.2);
  1261. border: 1rpx solid #FDE935;
  1262. padding: 22rpx 30rpx;
  1263. }
  1264. }
  1265. .colorBlock {
  1266. width: 54rpx;
  1267. height: 54rpx;
  1268. background: #FDE935;
  1269. border-radius: 10rpx 10rpx 10rpx 10rpx;
  1270. margin-left: 12rpx;
  1271. image {
  1272. width: 34rpx;
  1273. height: 34rpx;
  1274. }
  1275. }
  1276. // 商业险折扣系数样式
  1277. .updateDiscount {
  1278. padding: 40rpx;
  1279. box-sizing: border-box;
  1280. .text {
  1281. font-size: 28rpx;
  1282. color: #666;
  1283. }
  1284. .input {
  1285. font-size: 32rpx;
  1286. color: #333;
  1287. text:last-child {
  1288. color: #999;
  1289. margin-left: 10rpx;
  1290. }
  1291. }
  1292. .btn {}
  1293. }
  1294. .feeEntryClass {
  1295. padding: 0 40rpx 40rpx;
  1296. box-sizing: border-box;
  1297. .data-view {
  1298. padding: 20rpx 0;
  1299. box-sizing: border-box;
  1300. border-bottom: 1rpx solid #eee;
  1301. .title {
  1302. font-size: 30rpx;
  1303. color: #666;
  1304. }
  1305. .discount {
  1306. width: 45%;
  1307. >view {
  1308. text:first-child {
  1309. font-size: 28rpx;
  1310. color: #999;
  1311. }
  1312. text:last-child {
  1313. font-size: 30rpx;
  1314. color: #333;
  1315. }
  1316. }
  1317. }
  1318. }
  1319. .discountTotal {
  1320. padding: 20rpx 0;
  1321. box-sizing: border-box;
  1322. .name {
  1323. font-size: 30rpx;
  1324. color: #333;
  1325. }
  1326. .sum {
  1327. font-size: 32rpx;
  1328. color: #FF540A;
  1329. font-weight: bold;
  1330. }
  1331. }
  1332. .footer-btn {
  1333. width: 100%;
  1334. padding: 20rpx;
  1335. box-sizing: border-box;
  1336. background: rgba(253, 233, 53, 0.1);
  1337. border-radius: 45rpx 45rpx 45rpx 45rpx;
  1338. border: 1rpx solid #FDE935;
  1339. margin-top: 20rpx;
  1340. }
  1341. }
  1342. .customerRights {
  1343. padding: 20rpx 30rpx;
  1344. box-sizing: border-box;
  1345. background-color: #fff;
  1346. border-radius: 20rpx;
  1347. margin: 20rpx 0;
  1348. .header {
  1349. text {
  1350. font-size: 34rpx;
  1351. color: #333;
  1352. font-weight: bold;
  1353. }
  1354. .btn {
  1355. padding: 8rpx 20rpx;
  1356. box-sizing: border-box;
  1357. font-size: 28rpx;
  1358. color: #1F1F1F;
  1359. background: #FDE935;
  1360. border-radius: 50rpx 50rpx 50rpx 50rpx;
  1361. }
  1362. }
  1363. .customerRights-content {
  1364. font-size: 28rpx;
  1365. color: #666;
  1366. }
  1367. }
  1368. .discountMethod-cell {
  1369. padding: 14rpx 30rpx 44rpx;
  1370. box-sizing: border-box;
  1371. .item {
  1372. padding: 16rpx 0;
  1373. box-sizing: border-box;
  1374. border-bottom: 1rpx solid #eee;
  1375. .title {
  1376. font-size: 32rpx;
  1377. color: #333;
  1378. font-weight: bold;
  1379. }
  1380. text:last-child {
  1381. font-size: 30rpx;
  1382. color: #666;
  1383. .price {
  1384. font-size: 30rpx;
  1385. color: #FF540A;
  1386. }
  1387. }
  1388. }
  1389. }
  1390. </style>