orders.vue 30 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115
  1. <template>
  2. <view class="parent">
  3. <!-- 查询区域Start -->
  4. <view>
  5. <view class=" flexd " style="z-index: 99;">
  6. <view class="search dis a-c j-s"
  7. style="background: linear-gradient( 90deg, #0052FF 0%, #6697FF 100%);padding-top:55px;">
  8. <u-search v-model="pageRequest.licenseNo" @custom="custom" @search="search" :shape="shape"
  9. :height='68' bg-color="rgba(255,255,255,0.5)" color="#fff"
  10. :input-style="{background:'transparent'}" placeholder-color="#fff" :clearabled="clearabled"
  11. :show-action="showAction" :input-align="inputAlign" @clear="clear"
  12. :action-style="{background:'#fff'}" placeholder="请输入车牌号"></u-search>
  13. <image src="/static/image/car-insure/dropdown.png" mode="" @tap="searchPopup"></image>
  14. </view>
  15. <view :class="['dropdown-content', { 'show': showDropdown }]" @tap="searchPopup">
  16. <view :class="['dropdown-content1','dis','f-c','j-s','', { 'scolcentent': showDropdown }]"
  17. @tap.stop.prevent>
  18. <scroll-view scroll-y="true" class="scolcentent ">
  19. <view style="padding: 0px 20px;">
  20. <view class="term">
  21. <text>订单状态</text>
  22. <view class="dis a-c f-wrap j-s" style="margin-top: 10px;">
  23. <view class="status-data"
  24. :class="item.value===pageRequest.orderStatus? 'active':''"
  25. v-for="(item,index) in statusList"
  26. @tap.stop.prevent="statusclick(item.value)" :key="index">
  27. {{item.label}}
  28. </view>
  29. </view>
  30. </view>
  31. <view class="term">
  32. <text>投保险种</text>
  33. <view class="dis a-c f-wrap j-s" style="margin-top: 10px;">
  34. <view class="status-data"
  35. :class="item.dictValue==pageRequest.productid? 'active':''"
  36. v-for="(item,index) in productsTypeoptions"
  37. @tap="productstatusclick(item.dictValue)" :key="index">
  38. {{item.dictTag}}
  39. </view>
  40. </view>
  41. </view>
  42. <view class="term">
  43. <text>保险公司</text>
  44. <view class="dis a-c f-wrap j-start" style="margin-top: 10px;">
  45. <view class="status-data" :class="item.id==pageRequest.companyId? 'active':''"
  46. v-for="(item,index) in esmInsCompanyList" @tap="companystatusclick(item.id)"
  47. :key="index">
  48. {{item.namesimple}}
  49. </view>
  50. </view>
  51. </view>
  52. <view class="term">
  53. <text>车牌号</text>
  54. <view class="dis a-c f-wrap j-start" style="margin-top: 10px;">
  55. <view class="status-data" :class="item==pageRequest.licenseNo? 'active':''"
  56. v-for="(item,index) in vehiclePlateList" @tap="licenseNoclick(item)"
  57. :key="index">
  58. {{item}}
  59. </view>
  60. </view>
  61. </view>
  62. <view class="term">
  63. <text>被保人</text>
  64. <view class="dis a-c f-wrap j-start" style="margin-top: 10px;">
  65. <view class="status-data" :class="item==pageRequest.insuredName? 'active':''"
  66. v-for="(item,index) in insuranceList" @tap="insuranceclick(item)"
  67. :key="index">
  68. {{item}}
  69. </view>
  70. </view>
  71. </view>
  72. <view class="term">
  73. <text>订单日期</text>
  74. <view class="dis a-c f-wrap j-s" style="margin-top: 10px;">
  75. <view class="status-data" :class="item.value==timespecifications? 'active':''"
  76. v-for="(item,index) in dateList" @tap="dateclick(item.value)" :key="index">
  77. {{item.label}}
  78. </view>
  79. <view class="dis a-c">
  80. <view class="status-data" :class="startShow? 'active' :''"
  81. @tap="startShowmethod()">
  82. <text v-if="pageRequest.startDate!=''">{{pageRequest.startDate}}</text>
  83. <text v-else>{{transformTime()}}</text>
  84. </view>
  85. <text style="margin: 0 8px;font-size: 12px;">至</text>
  86. <view class="status-data" :class="endShow? 'active' :''"
  87. @tap="endShowmethod()">
  88. <text v-if="pageRequest.endDate!=''">{{pageRequest.endDate}}</text>
  89. <text v-else>{{transformTime()}}</text>
  90. </view>
  91. </view>
  92. </view>
  93. </view>
  94. </view>
  95. </scroll-view>
  96. <view class="operateBtn dis ">
  97. <view class="cancel dis a-c j-c" @click="showDropdown=false">
  98. 取消
  99. </view>
  100. <view class="confirm dis a-c j-c" @click="querysearch">
  101. 确定
  102. </view>
  103. </view>
  104. </view>
  105. </view>
  106. </view>
  107. </view>
  108. <view style="padding: 110px 16px 50px 16px;">
  109. <view v-for="(item,index) in pageResult" :key="index">
  110. <view class="orderItemPane" v-for="(statusitem, statusindex) in statusList" :key="statusindex"
  111. v-if="item.orderstatus == statusitem.value" :style="{background:statusitem.itemback}">
  112. <view class="orderItemPane-upper dis j-s a-c ">
  113. <view class="dis a-c j-start">
  114. <image :src="statusitem.src" mode="" style="width: 22px;height: 22px;margin-right: 5px;">
  115. </image>
  116. <text class=" licenseno">{{item.licenseno}}</text>
  117. </view>
  118. <view class="colorBlock">
  119. {{item.product}}
  120. </view>
  121. </view>
  122. <view class="orderItemPane-centre ">
  123. <view class="dis f-c">
  124. <text>订单号:{{item.orderno}}</text>
  125. <view class="dis a-c j-s mt-2">
  126. <view class="dis a-end ">
  127. <view class="dis f-c a-c">
  128. <text style="font-size: 24rpx;color: #333">车主</text>
  129. <text style="font-size: 24rpx;color: #333">{{item.ownerinfo.name}}</text>
  130. </view>
  131. <image src="../../static/image/car-insure/phone.png" mode=""
  132. style="width: 16px;height: 16px;margin: 0 0 5px 10px;"
  133. @click="phone(item.ownerinfo.mobile)"></image>
  134. </view>
  135. <view class="dis a-end ">
  136. <view class="dis f-c a-c">
  137. <text style="font-size: 24rpx;color: #333">投保人</text>
  138. <text style="font-size: 24rpx;color: #333">{{item.applyinfo.name}}</text>
  139. </view>
  140. <image src="../../static/image/car-insure/phone.png" mode=""
  141. style="width: 16px;height: 16px;margin: 0 0 5px 10px;"
  142. @click="phone(item.applyinfo.mobile)"></image>
  143. </view>
  144. <view class="dis a-end ">
  145. <view class="dis f-c a-c">
  146. <text style="font-size: 24rpx;color: #333">被保人</text>
  147. <text style="font-size: 24rpx;color: #333">{{item.insureinfo.name}}</text>
  148. </view>
  149. <image src="../../static/image/car-insure/phone.png" mode=""
  150. style="width: 16px;height: 16px;margin: 0 0 5px 10px;"
  151. @click="phone(item.insureinfo.mobile)"></image>
  152. </view>
  153. </view>
  154. <view class="dis f-c mt-2">
  155. <view v-for="(riskitem,riskindex) in item.risk" :key="riskindex">
  156. <template v-if="riskitem.expirationDay && riskitem.expirationDay !='0'">
  157. <view v-if="riskitem.riskCode=='0507'" class="time dis j-s a-c">
  158. <text>交强险到期时间</text>
  159. <view class="dis a-c j-c">还差
  160. <text class="downstyle dis j-c a-c ">{{riskitem.expirationDay}}</text>
  161. 天到期
  162. </view>
  163. </view>
  164. <view v-if="riskitem.riskCode=='0510'" class="time dis j-s a-c">
  165. <text>商业险到期时间</text>
  166. <view class="dis a-c j-c">还差
  167. <text class="downstyle dis j-c a-c ">{{riskitem.expirationDay}}</text>
  168. 天到期
  169. </view>
  170. </view>
  171. </template>
  172. <template v-else-if="riskitem.expirationDay=='0'">
  173. <view v-if="riskitem.riskCode=='0507'" class="time dis j-s a-c">
  174. <text>交强险到期时间</text>
  175. <text>今天到期</text>
  176. </view>
  177. <view v-if="riskitem.riskCode=='0510'" class="time dis j-s a-c">
  178. <text>商业险到期时间</text>
  179. <text>今天到期</text>
  180. </view>
  181. </template>
  182. <template v-else>
  183. <view v-if="riskitem.riskCode=='0507'" class="time dis j-s a-c">
  184. <template v-if="item.orderstatus!=3">
  185. <text>交强险投保时间</text>
  186. <text>{{item.jqstartdate}}</text>
  187. </template>
  188. <template v-else>
  189. <text>交强险保险期间</text>
  190. <text>{{item.jqstartdate}}-{{item.jqenddate}}</text>
  191. </template>
  192. </view>
  193. <view v-if="riskitem.riskCode=='0510'" class="time dis j-s a-c">
  194. <template v-if="item.orderstatus!=3">
  195. <text>商业险投保时间</text>
  196. <text>{{item.systartdate}}</text>
  197. </template>
  198. <template v-else>
  199. <text>商业险保险期间</text>
  200. <text>{{item.systartdate}}-{{item.syenddate}}</text>
  201. </template>
  202. </view>
  203. </template>
  204. </view>
  205. </view>
  206. </view>
  207. </view>
  208. <view class="orderItemPane-below dis a-c j-end f-wrap">
  209. <u-button v-if="item.orderstatus!='3'"
  210. :custom-style="{fontSize:'12px',background:'rgba(34,152,5,0.05)',color:'#229805',borderColor:'#229805'}"
  211. shape="circle" size="mini" :hair-line="false" :plain="true"
  212. @click="CloseEdit(item.orderno)">进行中 <u-badge type="error" bgColor="#FF0F00"
  213. v-if="item.orderStatus0" :count="item.orderStatus0"
  214. :offset="[-8, -8]"></u-badge></u-button>
  215. <u-button v-if="item.orderstatus!='3'"
  216. :custom-style="{fontSize:'12px',background:'rgba(255,86,0,0.05)',color:'#FF5600',borderColor:'#FF5600'}"
  217. shape="circle" size="mini" :hair-line="false" :plain="true"
  218. @click="quotehistory(item,'1')">核保中 <u-badge type="error" bgColor="#FF0F00"
  219. v-if="item.orderStatus1" :count="item.orderStatus1"
  220. :offset="[-8, -8]"></u-badge></u-button>
  221. <u-button v-if="item.orderstatus!='3'"
  222. :custom-style="{fontSize:'12px',background:'rgba(255,15,0,0.05)',color:'#FF0F00',borderColor:'#FF0F00'}"
  223. shape="circle" size="mini" :hair-line="false" :plain="true"
  224. @click="quotehistory(item,'2')">待缴费 <u-badge type="error" bgColor="#FF0F00"
  225. v-if="item.orderStatus2" :count="item.orderStatus2"
  226. :offset="[-8, -8]"></u-badge></u-button>
  227. <u-button
  228. :custom-style="{fontSize:'12px',background:'rgba(0,82,255,0.05)',color:'#0052FF',borderColor:'#0052FF'}"
  229. shape="circle" size="mini" :hair-line="false" :plain="true"
  230. @click="quotehistory(item,'3')">已承保 <u-badge type="error" bgColor="#FF0F00"
  231. v-if="item.orderStatus3" :count="item.orderStatus3"
  232. :offset="[-8, -8]"></u-badge></u-button>
  233. <u-button v-if="item.orderstatus!='3'"
  234. :custom-style="{fontSize:'12px',background:'rgba(158,0,255,0.05)',color:'#9E00FF',borderColor:'#9E00FF'}"
  235. shape="circle" size="mini" :hair-line="false" :plain="true"
  236. @click="quotehistory(item,'4')">核保退回 <u-badge type="error" bgColor="#FF0F00"
  237. v-if="item.orderStatus4" :count="item.orderStatus4"
  238. :offset="[-8, -8]"></u-badge></u-button>
  239. <u-button v-if="item.orderstatus!='3'"
  240. :custom-style="{fontSize:'12px',background:'rgba(159,159,159,0.05)',color:'#666666',borderColor:'#D2D2D2'}"
  241. shape="circle" size="mini" :hair-line="false" :plain="true"
  242. @click="closeOrder(item.orderno)">关闭订单 </u-button>
  243. </view>
  244. </view>
  245. </view>
  246. <u-loadmore v-if="pageResult.length!=0" :status="status" />
  247. </view>
  248. <o-empty v-if="pageResult.length==0" />
  249. <!-- 回到顶部 -->
  250. <u-picker v-model="startShow" mode="time" :params="params" @confirm="startconfirm"></u-picker>
  251. <u-picker v-model="endShow" mode="time" :params="params" @confirm="endconfirm"></u-picker>
  252. <u-mask :show="stepShow" @click="stepShow = false">
  253. <view class="warp">
  254. <view class="rect" @tap.stop>
  255. <u-steps :list="numList" :current="4" direction="column" mode="number" :viewType="'order'">
  256. <template v-slot:header>
  257. <view>这是父组件传递给子组件的头部插槽内容</view>
  258. </template>
  259. </u-steps>
  260. </view>
  261. </view>
  262. </u-mask>
  263. <u-modal v-model="closeOrderShow" title="提示"
  264. :title-style="{fontWeight: 'bold',borderBottom:'1px solid #f2f2f2',padding:'10px'}"
  265. :show-cancel-button="true"
  266. :confirm-style="{background:'#E6EEFF',color:'#0052FF',height:'40px',lineHeight:'40px'}"
  267. :cancel-style="{height:'40px',lineHeight:'40px'}" @confirm="closeOrderconfirm" confirm-text="确定">
  268. <view class="slot-content dis a-c j-c p-2">
  269. 确认关闭订单?
  270. </view>
  271. </u-modal>
  272. <service-widget @btnClick="btn_click"></service-widget>
  273. </view>
  274. </template>
  275. <script>
  276. import {
  277. mapState,
  278. mapMutations
  279. } from "vuex"
  280. // import carOrders from "@/components/modules/orders/carOrders.vue";
  281. import {
  282. watch
  283. } from "vue";
  284. export default {
  285. components: {},
  286. watch: {
  287. stageIndex(newVal, oldVal) {
  288. if (newVal !== oldVal) {
  289. this.pageRequest.orderStatus = newVal;
  290. }
  291. }
  292. },
  293. data() {
  294. return {
  295. closeOrderShow: false,
  296. productsTypeoptions: [],
  297. show: true,
  298. showDropdown: false,
  299. /* 时间筛选相关 */
  300. startShow: false,
  301. endShow: false,
  302. params: {
  303. year: true, //年
  304. month: true, //月
  305. day: true, //日
  306. },
  307. /* 时间筛选相关 */
  308. pageRequest: { //查询的默认条件
  309. companyId: "",
  310. orderNo: "",
  311. frameNo: "",
  312. insuredName: "",
  313. licenseNo: "",
  314. orderStatus: "",
  315. userId: "",
  316. deptId: "",
  317. endDate: "",
  318. startDate: "",
  319. productid: "",
  320. pageNum: 1,
  321. pageSize: 20,
  322. },
  323. timespecifications: null,
  324. pageResult: [], //列表数据
  325. /* 搜索框配置 */
  326. shape: 'square',
  327. clearabled: true,
  328. showAction: false,
  329. inputAlign: 'left',
  330. /* 搜索框配置 */
  331. //状态筛选list
  332. statusList: [{
  333. label: '全部',
  334. value: " ",
  335. }, {
  336. label: '进行中',
  337. value: 0,
  338. btnColor: "#229805",
  339. btnbackground: "rgba(34,152,5,0.05)",
  340. itemback: "linear-gradient( 180deg, #EEFFE4 0%, #CDFFB6 100%)",
  341. src: "/static/image/car-insure/state.png"
  342. },
  343. {
  344. label: '核保中',
  345. value: 1,
  346. btnColor: "#FF5600",
  347. btnbackground: "rgba(255,86,0,0.05)",
  348. itemback: "linear-gradient( 180deg, #FFEDE3 0%, #FFC7AB 100%)",
  349. src: "/static/image/car-insure/state.png"
  350. },
  351. {
  352. label: '待缴费',
  353. value: 2,
  354. btnColor: "#FF0F00",
  355. btnbackground: "rgba(255,15,0,0.05)",
  356. itemback: "linear-gradient( 180deg, #FFEEEC 0%, #FFA8A2 100%)",
  357. src: "/static/image/car-insure/state.png"
  358. },
  359. {
  360. label: '已承保',
  361. value: 3,
  362. btnColor: "#0052FF",
  363. btnbackground: "rgba(0,82,255,0.05)",
  364. itemback: "linear-gradient( 180deg, #ECFFFE 0%, #CCF9FF 100%)",
  365. src: "/static/image/car-insure/state.png"
  366. },
  367. {
  368. label: '核保退回',
  369. value: 4,
  370. btnColor: "#9E00FF",
  371. btnbackground: "rgba(158,0,255,0.05)",
  372. itemback: "linear-gradient( 180deg, #FDECFF 0%, #F5CCFF 100%)",
  373. src: "/static/image/car-insure/state.png"
  374. }
  375. ],
  376. //日期筛选list
  377. dateList: [{
  378. label: '全部',
  379. value: 0,
  380. },
  381. {
  382. label: '近1天',
  383. value: 1,
  384. },
  385. {
  386. label: '近2天',
  387. value: 2,
  388. },
  389. {
  390. label: '近3天',
  391. value: 3,
  392. },
  393. {
  394. label: '近4天',
  395. value: 4,
  396. },
  397. {
  398. label: '近5天',
  399. value: 5,
  400. },
  401. {
  402. label: '近6天',
  403. value: 6,
  404. },
  405. {
  406. label: '近7天',
  407. value: 7,
  408. },
  409. {
  410. label: '一个月内',
  411. value: '一个月内',
  412. },
  413. {
  414. label: '三个月内',
  415. value: '三个月内',
  416. },
  417. {
  418. label: '六个月内',
  419. value: '六个月内',
  420. },
  421. ],
  422. typeArray: [{
  423. label: '车险',
  424. value: 0,
  425. },
  426. {
  427. label: '意外险',
  428. value: 1,
  429. },
  430. {
  431. label: '寿险',
  432. value: 2,
  433. }
  434. ], //订单的类型
  435. vehiclePlateList: [], //车牌
  436. insuranceList: [], //被保人
  437. toTopFlag: false, //显示回到顶部按钮
  438. queryLicenseNo: "",
  439. queryFrameNo: "",
  440. insureMore: false,
  441. insureMoreIndex: null,
  442. esmInsCompanyList: [],
  443. status: 'loadmore',
  444. totalPages: 0, //订单总页数
  445. stepShow: false, //步骤条弹框
  446. numList: [{
  447. "processingStatus": "1",
  448. "processingStatusFlag": true,
  449. "name": "提现申请",
  450. "date": "2024-07-31 19:25:12"
  451. },
  452. {
  453. "processingStatus": "2",
  454. "processingStatusFlag": true,
  455. "name": "处理中",
  456. "date": "2024-07-31 19:25:12"
  457. },
  458. {
  459. "processingStatus": "4",
  460. "processingStatusFlag": true,
  461. "name": "提现成功",
  462. "date": "2024-08-01 08:49:12"
  463. }
  464. ],
  465. }
  466. },
  467. onReachBottom() {
  468. if (this.pageRequest.pageNum >= this.totalPages) return;
  469. this.status = 'loading';
  470. this.pageRequest.pageNum = ++this.pageRequest.pageNum;
  471. setTimeout(async () => {
  472. let res = await this.$http.post('/insurance/order/queryPageOrder', this.pageRequest);
  473. if (res.code == '200') {
  474. this.pageResult = [...this.pageResult, ...res.data.content];
  475. }
  476. if (this.pageRequest.pageNum >= this.totalPages) this.status = 'nomore';
  477. else this.status = 'loading';
  478. }, 1000)
  479. },
  480. computed: {
  481. ...mapState(['userInfo', 'typeIndex', 'stageIndex'])
  482. },
  483. // 页面滚动触发
  484. onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
  485. if (e.scrollTop > 600) { //当距离大于600时显示回到顶部按钮
  486. this.toTopFlag = true
  487. } else { //当距离小于600时显示回到顶部按钮
  488. this.toTopFlag = false
  489. }
  490. },
  491. onShow() {
  492. const arr = uni.getStorageSync('historyInfo');
  493. if (arr) {
  494. uni.removeStorageSync('historyInfo');
  495. }
  496. this.getOrdersList(1, 20)
  497. this.esmInsCompany()
  498. },
  499. onPullDownRefresh() {
  500. this.getOrdersList(1, 20)
  501. setTimeout(function() {
  502. uni.stopPullDownRefresh();
  503. }, 1000);
  504. },
  505. async onLoad(e) {
  506. this.pageRequest.userId = this.userInfo.sysUser.id;
  507. this.pageRequest.deptId = this.userInfo.sysUser.deptId;
  508. this.getOrdersList(1, 20)
  509. this.getDicType("productsType"); //车船税类型
  510. },
  511. methods: {
  512. ...mapMutations(['setOrderType', 'setOrderStage']),
  513. phone(phone) {
  514. uni.makePhoneCall({
  515. phoneNumber: phone, //仅为示例
  516. });
  517. },
  518. async closeOrderconfirm() {
  519. let res = await this.$http.get('/insurance/order/shutDown/' + orderno);
  520. if (res.code == '200') {
  521. uni.showToast({
  522. title: "关闭成功",
  523. icon: 'none',
  524. });
  525. this.getOrdersList(1, 20);
  526. }
  527. },
  528. //关闭订单
  529. closeOrder(orderno) {
  530. this.closeOrderShow = true;
  531. },
  532. btn_click() {
  533. uni.navigateTo({
  534. url: '/pages/chat/chat'
  535. })
  536. },
  537. async getOrdersList(page, size) {
  538. this.pageRequest.pageNum = page;
  539. this.pageRequest.pageSize = size;
  540. let res = await this.$http.post('/insurance/order/queryPageOrder', this.pageRequest);
  541. if (res.code == '200') {
  542. this.pageResult = res.data.content;
  543. this.totalPages = res.data.totalPages;
  544. }
  545. },
  546. async getDicType(type) {
  547. let res = await this.$http.get('/sysDict/dictDetails/' + type);
  548. if (res.code == 200) {
  549. this[type + 'options'] = [{
  550. dictTag: "全部",
  551. dictValue: " ",
  552. }, ...res.data.ddList];
  553. }
  554. },
  555. async esmInsCompany() {
  556. let commpanykad = await this.$http.get('/insurance/order/getAgreementInsCompany');
  557. if (commpanykad.code == '200') {
  558. this.esmInsCompanyList = commpanykad.data;
  559. }
  560. },
  561. searchPopup() {
  562. this.showDropdown = !this.showDropdown;
  563. },
  564. //展开
  565. selectMore(val) {
  566. this.insureMore = true;
  567. this.insureMoreIndex = val;
  568. },
  569. packup(val) {
  570. this.insureMore = false;
  571. this.insureMoreIndex = val;
  572. },
  573. //查询事件
  574. querysearch() {
  575. this.getOrdersList(1, 20);
  576. this.showDropdown = false;
  577. },
  578. insuranceclick(e) {
  579. if (e === this.pageRequest.insuredName) {
  580. this.pageRequest.insuredName = ''
  581. } else {
  582. this.pageRequest.insuredName = e;
  583. }
  584. },
  585. licenseNoclick(e) {
  586. if (e === this.pageRequest.licenseNo) {
  587. this.pageRequest.licenseNo = ''
  588. } else {
  589. this.pageRequest.licenseNo = e;
  590. }
  591. },
  592. //状态筛选
  593. statusclick(e) {
  594. if (e === this.pageRequest.orderStatus) {
  595. this.pageRequest.orderStatus = ''
  596. } else {
  597. this.pageRequest.orderStatus = e;
  598. }
  599. // console.log(this.pageRequest.orderStatus)
  600. },
  601. //保险公司筛选
  602. companystatusclick(e) {
  603. // this.pageRequest.companyId = e;
  604. if (e == this.pageRequest.companyId) {
  605. this.pageRequest.companyId = ''
  606. } else {
  607. this.pageRequest.companyId = e;
  608. }
  609. },
  610. //投保险种筛选
  611. productstatusclick(e) {
  612. if (e == this.pageRequest.productid) {
  613. this.pageRequest.productid = ''
  614. } else {
  615. this.pageRequest.productid = e;
  616. }
  617. },
  618. startShowmethod() {
  619. this.startShow = true;
  620. this.timespecifications = null;
  621. },
  622. endShowmethod() {
  623. this.endShow = true;
  624. this.timespecifications = null;
  625. },
  626. //日期筛选
  627. dateclick(e) {
  628. console.log(e);
  629. /* 0:全部 1:一周内 2:一个月内 3:三个月内 4:六个月内*/
  630. switch (e) {
  631. case 0:
  632. this.pageRequest.startDate = "";
  633. this.pageRequest.endDate = "";
  634. break;
  635. case 1:
  636. case 2:
  637. case 3:
  638. case 4:
  639. case 5:
  640. case 6:
  641. case 7:
  642. this.pageRequest.startDate = this.transformTime(e);
  643. this.pageRequest.endDate = this.transformTime();
  644. this.vehiclePlateform(this.pageRequest.startDate, this.pageRequest.endDate);
  645. this.insuranceform(this.pageRequest.startDate, this.pageRequest.endDate);
  646. break;
  647. case '一个月内':
  648. this.pageRequest.startDate = this.transformTime1(1);
  649. this.pageRequest.endDate = this.transformTime();
  650. break;
  651. case '三个月内':
  652. this.pageRequest.startDate = this.transformTime1(3);
  653. this.pageRequest.endDate = this.transformTime();
  654. break;
  655. case '六个月内':
  656. this.pageRequest.startDate = this.transformTime1(6);
  657. this.pageRequest.endDate = this.transformTime();
  658. break;
  659. default:
  660. }
  661. this.timespecifications = e;
  662. },
  663. async vehiclePlateform(start, end) {
  664. let res = await this.$http.post('/insurance/order/queryLicenseInOrder', {
  665. startDate: start,
  666. endDate: end,
  667. });
  668. if (res.code == 200) {
  669. this.vehiclePlateList = res.data;
  670. }
  671. },
  672. async insuranceform(start, end) {
  673. let res = await this.$http.post('/insurance/order/queryInsuredInOrder', {
  674. startDate: start,
  675. endDate: end,
  676. });
  677. if (res.code == 200) {
  678. this.insuranceList = res.data;
  679. }
  680. },
  681. startconfirm(e) {
  682. this.pageRequest.startDate = e.year + '-' + e.month + '-' + e.day;
  683. },
  684. endconfirm(e) {
  685. this.pageRequest.endDate = e.year + '-' + e.month + '-' + e.day;
  686. },
  687. //验证车架号
  688. isFrameno(str) {
  689. let mPattern = /^([0-9A-Z]){17}$/;
  690. return mPattern.test(str);
  691. },
  692. isCarBrand(str) {
  693. let mPattern = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼A-Z]{1}[A-Z]{1}[A-Z0-9]{4,5}([A-Z0-9挂学警港澳使领]{1}|应急)$/ ||
  694. /^沪[0-9A-Z]{5}$/ || /^陆丰[0-9A-Z]{4}临$/;
  695. return mPattern.test(str.trim())
  696. // return /^陆丰[0-9A-Z]{4}临$/.test(str.trim())
  697. },
  698. //查看子订单
  699. // async querydetail(val) {
  700. // let params = {
  701. // orderno: val.orderno,
  702. // insuredname: val.insuredname,
  703. // licenseno: val.licenseno,
  704. // modelcname: val.carinfo.modelcname,
  705. // }
  706. // uni.navigateTo({
  707. // url: `/pages/orders/subOrders?orderno=${JSON.stringify(params)}`
  708. // })
  709. // },
  710. //报价历史
  711. quotehistory(val, Status) {
  712. let params = {
  713. orderno: val.orderno,
  714. insuredname: val.insuredname,
  715. licenseno: val.licenseno,
  716. modelcname: val.carinfo.modelcname,
  717. orderStatus: Status,
  718. product: val.product,
  719. ownername: val.ownerinfo.name,
  720. applyname: val.applyinfo.name,
  721. insurename: val.insureinfo.name,
  722. }
  723. uni.navigateTo({
  724. url: `/pages/orders/quoteHistory?orderno=${JSON.stringify(params)}`
  725. })
  726. },
  727. //编辑
  728. CloseEdit(val) {
  729. uni.navigateTo({
  730. url: "/pages/carInsure/premiumCalc?orderno=" + val
  731. })
  732. // this.navigate({
  733. // url: '/pages/carInsure1/quote1',
  734. // success: (res) => {
  735. // res.eventChannel.emit("acceptData", {
  736. // carInfo: val.carinfo, //车辆信息
  737. // ownerInfo: val.ownerinfo, //车主信息
  738. // policyHolderInfo: val.applyinfo, //
  739. // insuredPersonInfo: val.insureinfo,
  740. // riskList: val.risk,
  741. // kindList: val.king,
  742. // orderno: val.orderno, //车辆
  743. // quoteno: val.quoteno, //车主
  744. // vehicleAndVesselTaxForm: val.vehicleAndVesselTax, //车船税
  745. // })
  746. // }
  747. // }, "navigateTo", true);
  748. },
  749. //回车搜索事件
  750. search(val) {
  751. this.getOrdersList(1, 20);
  752. },
  753. //搜索按钮事件
  754. custom(val) {
  755. this.getOrdersList(1, 20);
  756. },
  757. //搜索框清除事件
  758. clear(val) {
  759. },
  760. //关闭订单后查询
  761. closeOrders() {
  762. this.totalSize = 0;
  763. this.ordersList = []; //获取到的订单列表
  764. this.currentPage = 1; //当前的页数
  765. this.totalPages = 1; //总共的页数
  766. },
  767. //当前时间
  768. transformTime(day) {
  769. var date = new Date();
  770. date.setFullYear(date.getFullYear());
  771. date.setTime(date.getTime());
  772. var strYear = date.getFullYear();
  773. var strDay = day ? date.getDate() - day : date.getDate();
  774. var strMonth = date.getMonth() + 1;
  775. if (strMonth < 10) {
  776. strMonth = "0" + strMonth;
  777. }
  778. if (strDay < 10) {
  779. strDay = "0" + strDay;
  780. }
  781. var datastr = strYear + "-" + strMonth + "-" + strDay;
  782. return datastr;
  783. },
  784. transformTime1(month) {
  785. var date = new Date();
  786. date.setFullYear(date.getFullYear());
  787. date.setTime(date.getTime());
  788. var strYear = date.getFullYear();
  789. var strDay = date.getDate();
  790. var strMonth = month ? (date.getMonth() + 1) - month : date.getMonth() + 1;
  791. if (strMonth < 10) {
  792. strMonth = "0" + strMonth;
  793. }
  794. if (strDay < 10) {
  795. strDay = "0" + strDay;
  796. }
  797. var datastr = strYear + "-" + strMonth + "-" + strDay;
  798. return datastr;
  799. },
  800. }
  801. }
  802. </script>
  803. <style>
  804. page {
  805. background-color: #F8FAFE;
  806. }
  807. .warp {
  808. display: flex;
  809. align-items: center;
  810. justify-content: center;
  811. height: 100%;
  812. }
  813. .rect {
  814. width: 90%;
  815. height: 80%;
  816. background-color: #fff;
  817. }
  818. </style>
  819. <style lang="scss" scoped>
  820. @import '@/style/mixin.scss';
  821. /deep/ uni-tabbar .uni-tabbar-bottom {
  822. position: fixed;
  823. left: 0;
  824. right: 0;
  825. bottom: 0;
  826. }
  827. /deep/ .u-action[data-v-1a326067] {
  828. color: #FFFFFF;
  829. }
  830. /deep/ .u-dropdown__menu__item__arrow[data-v-01c0c507] uni-text {
  831. color: #FFFFFF !important;
  832. }
  833. .dropdown-content {
  834. background-color: rgba(0, 0, 0, 0.6);
  835. height: 0px;
  836. opacity: 0;
  837. transition: opacity 0.3s ease;
  838. .title {
  839. font-size: 14px;
  840. color: #232832;
  841. font-weight: bold;
  842. border-bottom: 1px solid #E1E1E1;
  843. }
  844. .term {
  845. padding-top: 10px;
  846. >text {
  847. color: #232832;
  848. font-weight: bold;
  849. font-size: 13px;
  850. }
  851. }
  852. .operateBtn {
  853. font-weight: bold;
  854. font-size: 16px;
  855. .cancel {
  856. width: 50%;
  857. height: 46px;
  858. color: #0052FF;
  859. background-color: #EAEAEA;
  860. }
  861. .confirm {
  862. width: 50%;
  863. height: 46px;
  864. color: #fff;
  865. background-color: #0052FF;
  866. }
  867. }
  868. }
  869. .dropdown-content1 {
  870. background-color: #fff;
  871. height: 0px;
  872. overflow: hidden;
  873. transition: height 0.4s ease;
  874. }
  875. .show {
  876. height: 100vh;
  877. opacity: 1;
  878. /* 下拉菜单内容的最大高度 */
  879. }
  880. .scolcentent {
  881. height: 450px;
  882. margin-bottom: 10px;
  883. overflow-y: auto;
  884. /* 下拉菜单遮罩最大高度 */
  885. }
  886. .headers {
  887. background-color: rgba(199, 198, 202, 0.4);
  888. width: 100%;
  889. height: 0;
  890. position: absolute;
  891. z-index: 999;
  892. }
  893. .parent {
  894. position: relative;
  895. }
  896. .search-condition {
  897. padding: 0 16px;
  898. .title {
  899. font-size: 14px;
  900. color: #232832;
  901. font-weight: bold;
  902. border-bottom: 1px solid #E1E1E1;
  903. }
  904. .term {
  905. padding-top: 10px;
  906. >text {
  907. color: #232832;
  908. font-weight: bold;
  909. font-size: 13px;
  910. }
  911. }
  912. }
  913. .search {
  914. padding: 13px 16px;
  915. image {
  916. width: 22px;
  917. height: 22px;
  918. margin-left: 20px;
  919. }
  920. }
  921. .slot-content1 {
  922. background-color: #FFFFFF;
  923. padding: 24rpx;
  924. }
  925. .title {
  926. font-weight: bold;
  927. color: #333;
  928. }
  929. .status-data {
  930. padding: 4px 10px;
  931. box-sizing: border-box;
  932. margin: 0 4px 4px 0;
  933. font-size: 12px;
  934. border: 1px solid #eee;
  935. cursor: pointer;
  936. }
  937. .active {
  938. position: relative;
  939. background: rgba(0, 82, 255, 0.1);
  940. color: #0052FF;
  941. border: 1px solid #0052FF;
  942. font-weight: 700;
  943. }
  944. .active::before {
  945. content: "";
  946. position: absolute;
  947. top: 0;
  948. left: 0;
  949. width: 10px;
  950. height: 10px;
  951. background-image: url("/static/image/car-insure/before.png");
  952. background-size: cover;
  953. }
  954. .orderItemPane {
  955. width: 100%;
  956. height: auto;
  957. margin: 10px 0;
  958. border-radius: 10px;
  959. background: #FFFFFF;
  960. box-shadow: 0px 4px 10px 0px #DAE3F4;
  961. border-radius: 6px;
  962. cursor: pointer;
  963. }
  964. .orderItemPane-upper {
  965. background: rgba(255, 255, 255, 0.5);
  966. border-radius: 6px 6px 0px 0px;
  967. padding: 13rpx 16rpx;
  968. .licenseno {
  969. font-family: Source Han Sans SC, Source Han Sans SC;
  970. font-weight: bold;
  971. font-size: 14px;
  972. color: #181818;
  973. }
  974. .colorBlock {
  975. background: #FF7F00;
  976. box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
  977. border-radius: 4px;
  978. border: 1px solid #FEEDDF;
  979. color: #fff;
  980. font-size: 26rpx;
  981. font-weight: bold;
  982. padding: 0 10px;
  983. }
  984. }
  985. .orderItemPane-centre {
  986. padding: 7px 14px;
  987. >view>text {
  988. font-weight: bold;
  989. color: #232832;
  990. }
  991. .time {
  992. >text {
  993. color: rgba(51, 51, 51, 0.8);
  994. font-size: 12px;
  995. }
  996. .downstyle {
  997. background: rgba(255, 255, 255, 0.6);
  998. border-radius: 2px;
  999. padding: 2px 8px;
  1000. margin: 0 4px;
  1001. color: #333333;
  1002. font-size: 12px;
  1003. }
  1004. }
  1005. }
  1006. .orderItemPane .orderItemPane-centre,
  1007. .inscommny-sum>text {
  1008. color: rgba(51, 51, 51, 0.8);
  1009. font-weight: 400;
  1010. }
  1011. .orderItemPane-below {
  1012. height: auto;
  1013. padding: 10px;
  1014. background: #ffff;
  1015. border-radius: 0 0 6px 6px;
  1016. &>button {
  1017. margin-left: 10px;
  1018. margin-bottom: 5px;
  1019. }
  1020. }
  1021. .orderItemPane-extend .extend-button>text {
  1022. color: #ff9000;
  1023. font-size: 12px;
  1024. }
  1025. .orderItemPane-extend {
  1026. border-bottom-right-radius: 10px;
  1027. border-bottom-left-radius: 10px;
  1028. }
  1029. .classes::before {
  1030. content: "·";
  1031. color: #ff9000;
  1032. margin-right: 10px;
  1033. }
  1034. .flexd {
  1035. position: fixed;
  1036. left: 0;
  1037. right: 0;
  1038. }
  1039. .moosize {
  1040. font-size: 12px;
  1041. color: rgba(51, 51, 51, 0.6);
  1042. font-weight: 400;
  1043. }
  1044. .color {
  1045. color: #ff9000;
  1046. }
  1047. /* 查询区域End */
  1048. </style>