carOrders.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533
  1. <template>
  2. <view class="arr">
  3. <!-- 公共组件-每个页面必须引入 -->
  4. <public-module></public-module>
  5. <block v-for="(order,orderIndex) in ordersList" :key="orderIndex">
  6. <!-- 报价中 -->
  7. <template v-if="order.orderstatus == '0'">
  8. <view class="orderItemPane animated fadeIn fast">
  9. <view class="paneTitle d-flex a-center j-sb">
  10. <view class="carNumber d-flex a-center">
  11. <view class="icon iconfont icon-tree-round-car"></view>{{order.licenseNo}}
  12. </view>
  13. <view class="carPeople">被保人:{{order.insuredname}}</view>
  14. </view>
  15. <view class="paneBody">
  16. <view class="line d-flex a-center">
  17. 订单号: {{order.orderno}}
  18. </view>
  19. <view class="line d-flex a-center">
  20. 投保险种: {{order.product}}
  21. </view>
  22. <view class="line d-flex a-center j-sb">
  23. <view>报价时间: {{order.createtime}}</view>
  24. <view class="sign">待继续</view>
  25. </view>
  26. <view class="companyList">
  27. <view style="d-flex j-sb">
  28. <text>投保公司:{{order.inscompany}}
  29. <!-- {{config.insCompanyList[order.inscompany].name}} -->
  30. <text style="margin-left:20px;color: red;">{{order.sumpremium}}</text></text>
  31. <text style="margin-right: 30upx;"></text>
  32. </view>
  33. </view>
  34. </view>
  35. <view class="paneBottom d-flex a-center j-end">
  36. <text class="btn1 d-flex a-center j-center" :data-orderno="order.orderno"
  37. @tap="closeQuoteTask(order)">关闭订单</text>
  38. <text class="btn2 d-flex a-center j-center" :data-orderno="order.orderno"
  39. @click="openQuoteDetail(order)">待继续</text>
  40. <text class="btn2 d-flex a-center j-center">备忘录</text>
  41. </view>
  42. </view>
  43. </template>
  44. <!-- 待核保 -->
  45. <template v-if="order.orderstatus == '1'">
  46. <view class="orderItemPane animated fadeIn fast">
  47. <view class="paneTitle d-flex a-center j-sb">
  48. <view class="carNumber d-flex a-center">
  49. <view class="icon iconfont icon-tree-round-car"></view>{{order.licenseNo}}
  50. </view>
  51. <view class="carPeople">被保人:{{order.insuredname}}</view>
  52. </view>
  53. <view class="paneBody">
  54. <view class="line d-flex a-center">
  55. 订单号: {{order.orderno}}
  56. </view>
  57. <view class="line d-flex a-center">
  58. 投保险种: {{order.product}}
  59. </view>
  60. <view class="line d-flex a-center j-sb">
  61. <view>报价时间: {{order.createtime}}</view>
  62. <view class="sign">核保中</view>
  63. </view>
  64. <view class="companyList">
  65. <view style="d-flex j-sb">
  66. <text>投保公司:{{order.inscompany}} <text
  67. style="margin-left:20px;color: red;">{{order.sumpremium}}</text></text>
  68. <text style="margin-right: 30upx;"></text>
  69. </view>
  70. </view>
  71. </view>
  72. <view class="paneBottom d-flex a-center j-end">
  73. <text class="btn1 d-flex a-center j-center" :data-orderno="order.orderno"
  74. @tap="closeQuoteTask(order)">关闭订单</text>
  75. <text class="btn2 d-flex a-center j-center" :data-orderno="order.orderno"
  76. @tap="openQuoteDetail(order)">价格明细</text>
  77. <text class="btn2 d-flex a-center j-center">备忘录</text>
  78. </view>
  79. </view>
  80. </template>
  81. <!-- 已核保 -->
  82. <template v-if="order.orderstatus == '2'">
  83. <view class="orderItemPane animated fadeIn fast">
  84. <view class="paneTitle d-flex a-center j-sb">
  85. <view class="carNumber d-flex a-center">
  86. <view class="icon iconfont icon-tree-round-car"></view>{{order.licenseNo}}
  87. </view>
  88. <view class="carPeople">被保人:{{order.insuredname}}</view>
  89. </view>
  90. <view class="paneBody">
  91. <view class="line d-flex a-center">
  92. 订单号: {{order.orderno}}
  93. </view>
  94. <view class="line d-flex a-center">
  95. 投保险种: {{order.product}}
  96. </view>
  97. <view class="line d-flex a-center j-sb">
  98. <view>报价时间: {{order.createtime}}</view>
  99. <view class="sign">已核保</view>
  100. </view>
  101. <view class="companyList">
  102. <view style="d-flex j-sb">
  103. <text>投保公司:{{order.inscompany}} <text
  104. style="margin-left:20px;color: red;">{{order.sumpremium}}</text></text>
  105. <text style="margin-right: 30upx;"></text>
  106. </view>
  107. </view>
  108. </view>
  109. <view class="paneBottom d-flex a-center j-end">
  110. <text class="btn1 d-flex a-center j-center" :data-orderno="order.orderno"
  111. @tap="closeQuoteTask(order)">关闭订单</text>
  112. <text class="btn2 d-flex a-center j-center" :data-orderno="order.orderno"
  113. @tap="openQuoteDetail(order)">价格明细</text>
  114. <text class="btn2 d-flex a-center j-center" :data-orderno="order.orderno"
  115. @tap="openPayWay(order)">去支付</text>
  116. <text class="btn2 d-flex a-center j-center">备忘录</text>
  117. </view>
  118. </view>
  119. </template>
  120. <!-- 待修改 -->
  121. <template v-if="order.orderstatus=='3'">
  122. <view class="orderItemPane animated fadeIn fast">
  123. <view class="paneTitle d-flex a-center j-sb">
  124. <view class="carNumber d-flex a-center">
  125. <view class="icon iconfont icon-tree-round-car"></view>{{order.licenseNo}}
  126. </view>
  127. <view class="carPeople">被保人:{{order.insuredname}}</view>
  128. </view>
  129. <view class="paneBody">
  130. <view class="line d-flex a-center">
  131. 订单号: {{order.orderno}}
  132. </view>
  133. <view class="line d-flex a-center">
  134. 投保险种: {{order.product}}
  135. </view>
  136. <view class="line d-flex a-center j-sb">
  137. <view>报价时间: {{order.createtime}}</view>
  138. <view class="sign">待修改</view>
  139. </view>
  140. <view class="companyList">
  141. <view style="d-flex j-sb">
  142. <text>投保公司:{{order.inscompany}} <text
  143. style="margin-left:20px;color: red;">{{order.sumpremium}}</text></text>
  144. <text style="margin-right: 30upx;"></text>
  145. </view>
  146. </view>
  147. </view>
  148. <view class="paneBottom d-flex a-center j-end">
  149. <text class="btn1 d-flex a-center j-center" :data-orderno="order.orderno"
  150. @tap="closeQuoteTask(order)">关闭订单</text>
  151. <text class="btn1 d-flex a-center j-center" :data-orderno="order.orderno"
  152. @tap="goBackReason(order.auditopinion)">退回原因</text>
  153. <text class="btn2 d-flex a-center j-center" :data-orderno="order.orderno"
  154. @tap="openQuoteDetail(order)">修改订单</text>
  155. <text class="btn2 d-flex a-center j-center">备忘录</text>
  156. </view>
  157. </view>
  158. </template>
  159. <!-- 已核保待缴费 -->
  160. <template v-if="order.orderstatus == '5'">
  161. <view class="orderItemPane animated fadeIn fast">
  162. <view class="paneTitle d-flex a-center j-sb">
  163. <view class="carNumber d-flex a-center">
  164. <view class="icon iconfont icon-tree-round-car"></view>{{order.licenseNo}}
  165. </view>
  166. <view class="carPeople">被保人:{{order.insuredname}}</view>
  167. </view>
  168. <view class="paneBody">
  169. <view class="line d-flex a-center">
  170. 订单号: {{order.orderno}}
  171. </view>
  172. <view class="line d-flex a-center">
  173. 投保险种: {{order.product}}
  174. </view>
  175. <view class="line d-flex a-center j-sb">
  176. <view>报价时间: {{order.createtime}}</view>
  177. <view class="sign">已核保待缴费</view>
  178. </view>
  179. <view class="companyList">
  180. <view style="d-flex j-sb">
  181. <text>投保公司:{{order.inscompany}} <text
  182. style="margin-left:20px;color: red;">{{order.sumpremium}}</text></text>
  183. <text style="margin-right: 30upx;"></text>
  184. </view>
  185. </view>
  186. </view>
  187. <view class="paneBottom d-flex a-center j-end">
  188. <text class="btn1 d-flex a-center j-center" :data-orderno="order.orderno"
  189. @tap="closeQuoteTask(order)">关闭订单</text>
  190. <text class="btn2 d-flex a-center j-center" :data-orderno="order.orderno"
  191. @tap="openQuoteDetail(order)">查看</text>
  192. <text class="btn2 d-flex a-center j-center" :data-orderno="order.orderno"
  193. @tap="openPayCode(order)">二维码</text>
  194. <template v-if="order.inscompany != '永安财险'">
  195. <text class="btn2 d-flex a-center j-center" :data-orderno="order.orderno"
  196. @tap="confirmPay(order)">缴费确认</text>
  197. </template>
  198. <text class="btn2 d-flex a-center j-center">备忘录</text>
  199. </view>
  200. </view>
  201. </template>
  202. <!-- 已缴费 -->
  203. <template v-if="order.orderstatus == '6'">
  204. <view class="orderItemPane animated fadeIn fast">
  205. <view class="paneTitle d-flex a-center j-sb">
  206. <view class="carNumber d-flex a-center">
  207. <view class="icon iconfont icon-tree-round-car"></view>{{order.licenseNo}}
  208. </view>
  209. <view class="carPeople">被保人:{{order.insuredname}}</view>
  210. </view>
  211. <view class="paneBody">
  212. <view class="line d-flex a-center">
  213. 订单号: {{order.orderno}}
  214. </view>
  215. <view class="line d-flex a-center">
  216. 投保险种: {{order.product}}
  217. </view>
  218. <view class="line d-flex a-center j-sb">
  219. <view>报价时间: {{order.createtime}}</view>
  220. <view class="sign">已缴费</view>
  221. </view>
  222. <view class="companyList">
  223. <view style="d-flex j-sb">
  224. <text>投保公司:{{order.inscompany}} <text
  225. style="margin-left:20px;color: red;">{{order.sumpremium}}</text></text>
  226. <text style="margin-right: 30upx;"></text>
  227. </view>
  228. </view>
  229. </view>
  230. <view class="paneBottom d-flex a-center j-end">
  231. <text class="btn2 d-flex a-center j-center" :data-orderno="order.orderno"
  232. @tap="openQuoteDetail(order)">查看</text>
  233. <text class="btn2 d-flex a-center j-center">备忘录</text>
  234. </view>
  235. </view>
  236. </template>
  237. <!-- 已承保 -->
  238. <template v-if="order.orderstatus == '7'">
  239. <view class="orderItemPane animated fadeIn fast">
  240. <view class="paneTitle d-flex a-center j-sb">
  241. <view class="carNumber d-flex a-center">
  242. <view class="icon iconfont icon-tree-round-car"></view>{{order.licenseNo}}
  243. </view>
  244. <view class="carPeople">被保人:{{order.insuredname}}</view>
  245. </view>
  246. <view class="paneBody">
  247. <view class="line d-flex a-center">
  248. 订单号: {{order.orderno}}
  249. </view>
  250. <view class="line d-flex a-center">
  251. 投保险种: {{order.product}}
  252. </view>
  253. <view class="line d-flex a-center j-sb">
  254. <view>报价时间: {{order.createtime}}</view>
  255. <view class="sign">已承保</view>
  256. </view>
  257. <view class="companyList">
  258. <view style="d-flex j-sb">
  259. <text>投保公司:{{order.inscompany}} <text
  260. style="margin-left:20px;color: red;">{{order.sumpremium}}</text></text>
  261. <text style="margin-right: 30upx;"></text>
  262. </view>
  263. </view>
  264. </view>
  265. <view class="paneBottom d-flex a-center j-end">
  266. <text class="btn2 d-flex a-center j-center" :data-orderno="order.orderno"
  267. @tap="openQuoteDetail(order)">查看</text>
  268. <text class="btn2 d-flex a-center j-center">备忘录</text>
  269. </view>
  270. </view>
  271. </template>
  272. <!-- 已关闭 -->
  273. <template v-if="order.orderstatus == '99'">
  274. <view class="orderItemPane animated fadeIn fast">
  275. <view class="paneTitle d-flex a-center j-sb">
  276. <view class="carNumber d-flex a-center">
  277. <view class="icon iconfont icon-tree-round-car"></view>{{order.licenseNo}}
  278. </view>
  279. <view class="carPeople">被保人:{{order.insuredname}}</view>
  280. </view>
  281. <view class="paneBody">
  282. <view class="line d-flex a-center">
  283. 订单号: {{order.orderno}}
  284. </view>
  285. <view class="line d-flex a-center">
  286. 投保险种: {{order.product}}
  287. </view>
  288. <view class="line d-flex a-center j-sb">
  289. <view>报价时间: {{order.createtime}}</view>
  290. <view class="sign">已关闭</view>
  291. </view>
  292. <view class="companyList">
  293. <view style="d-flex j-sb">
  294. <text>投保公司:{{order.inscompany}} <text
  295. style="margin-left:20px;color: red;">{{order.sumpremium}}</text></text>
  296. <text style="margin-right: 30upx;"></text>
  297. </view>
  298. </view>
  299. </view>
  300. <view class="paneBottom d-flex a-center j-end">
  301. <text class="btn2 d-flex a-center j-center" :data-orderno="order.orderno"
  302. @tap="openQuoteDetail(order)">查看</text>
  303. <text class="btn2 d-flex a-center j-center">备忘录</text>
  304. </view>
  305. </view>
  306. </template>
  307. </block>
  308. <template v-if="ordersList.length>0">
  309. <loadMore :loadStatus="loadStatus"></loadMore>
  310. </template>
  311. <wyb-popup ref="popupReason" :scrollY="true" type="center" mode="size-fixed" height="400" width="600"
  312. radius="6">
  313. <view class="popupBody">
  314. <view class="popHeader d-flex a-center j-center">
  315. 退回原因
  316. </view>
  317. <view class="popupContent">
  318. <view class="reason" v-for="(reasonItem,reasonIndex) in reasonList" :key="reasonIndex">
  319. {{reasonIndex+1}}、{{reasonItem}}
  320. </view>
  321. </view>
  322. </view>
  323. </wyb-popup>
  324. </view>
  325. </template>
  326. <script>
  327. import loadMore from "@/components/modules/orders/load-more.vue";
  328. import wybPopup from "@/components/common/wyb-popup/wyb-popup.vue"
  329. export default {
  330. components: {
  331. loadMore,
  332. wybPopup
  333. },
  334. data() {
  335. return {
  336. reasonList: []
  337. }
  338. },
  339. props: {
  340. loadStatus: Number,
  341. ordersList: Array,
  342. stageIndex: Number
  343. },
  344. methods: {
  345. //跳转订单详情页面Start(公用)
  346. openQuoteDetail(e) {
  347. this.navigate({
  348. url: "/pages/carInsure1/quoteDetail1?orderno=" + e.orderno
  349. }, 'navigateTo', true)
  350. },
  351. //跳转订单详情页面End(公用)
  352. openPayWay(e) {
  353. this.navigate({
  354. url: "/pages/carInsure/payWay?orderno=" + e.orderno
  355. }, 'navigateTo', false)
  356. },
  357. openPayCode(e) {
  358. this.navigate({
  359. url: "/pages/carInsure1/payCode1?orderno=" + e.orderno
  360. }, 'reLaunch', false)
  361. },
  362. async confirmPay(e) {
  363. let paymentParam = {
  364. orderno: e.orderno
  365. }
  366. let res1 = await this.$http.post('/insZhongmei/verifyPayment', paymentParam);
  367. return uni.showToast({
  368. icon: "none",
  369. title: "缴费成功",
  370. duration: 1500
  371. })
  372. },
  373. //报价中Start
  374. closeQuoteTask(e) {
  375. // 关闭报价任务
  376. var orderno = e.orderno;
  377. uni.showModal({
  378. title: '提示',
  379. content: '是否确认关闭该订单?',
  380. success: async (resResult) => {
  381. if (resResult.confirm) {
  382. let res = await this.$http.post('/insOrder/closeOrder?quoteno=' + orderno);
  383. if (res.code == 200) {
  384. this.$emit('searchOrder')
  385. return uni.showToast({
  386. icon: "none",
  387. title: "关闭订单成功",
  388. duration: 1500
  389. })
  390. } else {
  391. return uni.showToast({
  392. icon: "none",
  393. title: "关闭订单失败",
  394. duration: 1500
  395. })
  396. }
  397. } else if (resResult.cancel) {
  398. console.log('用户取消了该操作');
  399. }
  400. }
  401. });
  402. },
  403. //报价中Start
  404. // 退回修改Start
  405. goBackReason(reason) {
  406. // 退回原因
  407. this.reasonList = [];
  408. this.reasonList = reason.split(',');
  409. console.log(this.reasonList)
  410. this.$refs.popupReason.show() // 显示
  411. },
  412. // 退回修改End
  413. }
  414. }
  415. </script>
  416. <style>
  417. /* 订单区域列表Start */
  418. .orderItemPane {
  419. background: #fdfdfd;
  420. }
  421. .paneTitle {
  422. height: 70upx;
  423. padding: 0px 30upx 0 20upx;
  424. font-size: 30upx;
  425. border-bottom: 1upx solid #eee;
  426. }
  427. .paneTitle .carNumber>view.icon {
  428. font-size: 50upx;
  429. color: #A0A7AF;
  430. margin-right: 20upx;
  431. }
  432. .paneBody {
  433. padding: 0px 30upx;
  434. background: #fff;
  435. font-size: 28upx;
  436. }
  437. .paneBody .line {
  438. height: 60upx;
  439. line-height: 60upx;
  440. }
  441. .paneBody .sign {
  442. background: #007AFF;
  443. color: #fff;
  444. font-size: 26upx;
  445. border-radius: 5px;
  446. padding: 0px 10upx;
  447. height: 50upx;
  448. line-height: 50upx;
  449. }
  450. .companyList {
  451. /* margin: 0 2%; */
  452. border-top: 1px solid #F1F0F5;
  453. font-size: 28upx;
  454. padding: 10upx 0px;
  455. }
  456. .companyList view {
  457. height: 50upx;
  458. line-height: 50upx;
  459. }
  460. /* 订单区域列表End */
  461. /* 底部区域Start */
  462. .paneBottom {
  463. height: 80upx;
  464. background: #F0EFF4;
  465. font-size: 28upx;
  466. }
  467. .paneBottom .btn1,
  468. .paneBottom .btn2 {
  469. height: 40upx;
  470. margin: 0 15upx;
  471. padding: 2upx 10upx;
  472. border-radius: 5upx;
  473. background: #fff;
  474. }
  475. .paneBottom .btn1 {
  476. color: #777777;
  477. border: 1upx solid #777777;
  478. }
  479. .paneBottom .btn2 {
  480. color: #E18C8F;
  481. border: 1upx solid #E18C8F;
  482. }
  483. /* 底部区域End */
  484. .popupBody {
  485. padding: 0upx 30upx;
  486. }
  487. .popHeader {
  488. height: 100upx;
  489. font-size: 34upx;
  490. font-weight: bold;
  491. border-bottom: 1px solid #FAFAFA;
  492. }
  493. .popupContent {
  494. padding: 20upx 0;
  495. }
  496. .popupContent .reason {
  497. font-size: 28upx;
  498. }
  499. </style>