billDetails1.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690
  1. <template>
  2. <view>
  3. <!-- 公共组件-每个页面必须引入 -->
  4. <public-module></public-module>
  5. <view class="fixed">
  6. <view class="white-box">
  7. <view class="tx">
  8. <view class="tx-grid">
  9. <view class="tx-grid-text">
  10. <view class="title">可提现(元)</view>
  11. <view class="money">
  12. <text v-if="handlingFee">{{ handlingFee }}</text>
  13. <text v-else>0.00</text>
  14. </view>
  15. </view>
  16. </view>
  17. <view class="tx-grid-comm-sign dis j-c a-c" @click="toWithdraw">
  18. <image src="/static/image/bindBank/Frame1.png" mode="" style="width: 18px;height: 18px;">
  19. </image>
  20. <text>立即提现</text>
  21. </view>
  22. </view>
  23. <view class="palace dis a-c j-s">
  24. <view class="palace-grid dis f-c">
  25. <text class="">预收金额</text>
  26. <text v-if="willHalding">{{ willHalding}}</text>
  27. <text v-else>0.00</text>
  28. </view>
  29. <view class="palace-grid dis f-c">
  30. <text class="">提现中</text>
  31. <text v-if="withdrawalHalding">{{ withdrawalHalding}}</text>
  32. <text v-else>0.00</text>
  33. </view>
  34. <view class="palace-grid dis f-c">
  35. <text class="">已提现</text>
  36. <text v-if="approvedHalding">{{ approvedHalding}}</text>
  37. <text v-else>0.00</text>
  38. </view>
  39. </view>
  40. </view>
  41. <view class="queryCriteria dis j-s a-c ">
  42. <view class="dis a-c j-c" style="width: 49%;" @click="statusShow=true">
  43. <image src="/static/image/bindBank/time.png" mode="" style="width: 18px;height: 18px;"></image>
  44. <text>{{statusLabel}}</text>
  45. </view>
  46. <view class="" style="width: 1px;height: 90%;background-color: #D4D0D0;"></view>
  47. <view class="dis a-c j-c" style="width: 49%;" @click="timeShow=true">
  48. <image src="/static/image/bindBank/date.png" mode="" style="width: 18px;height:18px;"></image>
  49. <text>{{pageRequest.Date}}</text>
  50. </view>
  51. </view>
  52. </view>
  53. <view class="list-view">
  54. <view v-for="(item,index) in list" :key="index" v-if="active==2 || active==3">
  55. <view class="list-item dis a-c j-s" @tap="toBillInfo(index)">
  56. <view class="content-box">
  57. <view class="des-box" v-if="active==2">
  58. <view class="tit">订单号:{{item.id }}</view>
  59. <view class="time">提现时间:{{ item.createTime }}</view>
  60. </view>
  61. <view class="des-box" v-if="active==3">
  62. <view class="tit">订单号:{{item.id }}</view>
  63. <view class="time">提现时间:{{ item.createTime }}</view>
  64. <view class="time" v-if="item.paytime">到账时间:{{ item.paytime }}</view>
  65. </view>
  66. </view>
  67. <!-- <view class="money dis f-c a-c j-s" v-if="active==1">
  68. <view
  69. style="padding: 0 10px;border: 1px solid #229805;border-radius: 30px;font-size: 12px;color: #229805;">
  70. 预收</view>
  71. <view v-if="item.amount">{{item.amount }}</view>
  72. <view v-else>0.00</view>
  73. </view> -->
  74. <view class="money dis f-c a-c j-s " v-if="active==2">
  75. <view
  76. style="padding: 0 10px;border: 1px solid #FF5600;border-radius: 30px;font-size: 12px;color: #FF5600;">
  77. 提现中</view>
  78. <view v-if="item.amount">{{item.amount }}</view>
  79. <view v-else>0.00</view>
  80. </view>
  81. <view class="money dis f-c a-c j-s" v-if="active==3">
  82. <view
  83. style="padding: 0 10px;border: 1px solid #0052FF;border-radius: 30px;font-size: 12px;color: #0052FF;">
  84. 已提现
  85. </view>
  86. <view v-if="item.amount">{{item.amount }}</view>
  87. <view v-else>0.00</view>
  88. </view>
  89. </view>
  90. </view>
  91. <view v-for="(item,index) in yushouList" :key="index" v-if="active==1">
  92. <view class="list-item dis a-c j-s" @tap="yushouInfo(index)">
  93. <view class="">
  94. <view class="des-box">
  95. <view class="tit">订单号:{{item.id }}</view>
  96. <view class="time">签单时间:{{ item.signingTime }}</view>
  97. <view class="time">车牌号:{{ item.licenseno }}</view>
  98. </view>
  99. </view>
  100. <view class="money dis f-c a-c j-s">
  101. <view
  102. style="padding: 0 10px;border: 1px solid #229805;border-radius: 30px;font-size: 12px;color: #229805;">
  103. 预收</view>
  104. <view v-if="item.willAmount">{{item.willAmount }}</view>
  105. <view v-else>0.00</view>
  106. </view>
  107. </view>
  108. </view>
  109. </view>
  110. <u-popup v-model="statusShow" mode="bottom" height="500">
  111. <view class="term dis f-c j-s">
  112. <view style="padding: 0 16px;">
  113. <view class="title dis j-c a-c">
  114. <text>状态筛选</text>
  115. </view>
  116. <text>订单状态</text>
  117. <view class="dis a-c " style="margin-top: 10px;">
  118. <view class="status-data" :class="item.value==active? 'active':''"
  119. v-for="(item,index) in statusList" @tap.stop.prevent="statusclick(item)" :key="index">
  120. {{item.label}}
  121. </view>
  122. </view>
  123. </view>
  124. <view class="operateBtn dis ">
  125. <view class="cancel dis a-c j-c" @click="statusShow=false">
  126. 取消
  127. </view>
  128. <view class="confirm dis a-c j-c" @click="stausSearch">
  129. 确定
  130. </view>
  131. </view>
  132. </view>
  133. </u-popup>
  134. <u-picker v-model="timeShow" mode="time" :params="params" @confirm="startconfirm"></u-picker>
  135. </view>
  136. </template>
  137. <script>
  138. import {
  139. mapState
  140. } from "vuex"
  141. import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin';
  142. export default {
  143. components: {
  144. ZPagingMixin
  145. },
  146. data() {
  147. return {
  148. statusShow: false, //状态筛选
  149. timeShow: false, //日期筛选
  150. params: {
  151. year: true, //年
  152. month: true, //月
  153. day: false, //日
  154. },
  155. //状态筛选list
  156. statusLabel: "提现中",
  157. statusList: [
  158. // {
  159. // label: '全部',
  160. // value: 0,
  161. // src: "/static/image/car-insure/state1.png"
  162. // },
  163. {
  164. label: '预收',
  165. value: 1,
  166. src: "/static/image/car-insure/state2.png"
  167. },
  168. {
  169. label: '提现中',
  170. value: 2,
  171. src: "/static/image/car-insure/state3.png"
  172. },
  173. {
  174. label: '已提现',
  175. value: 3,
  176. src: "/static/image/car-insure/state4.png"
  177. },
  178. ],
  179. /* 时间筛选相关 */
  180. pageRequest: { //查询的默认条件
  181. Date: "",
  182. pageNum: 1,
  183. pageSize: 20,
  184. },
  185. /* 查询区域Start */
  186. /* 查询区域End */
  187. currentPage: 1, //当前页码
  188. pageSize: 5, //每页展示条数
  189. totalPages: 0, //总页数
  190. totalSize: 0, //总条数
  191. list: [],
  192. loadStatus: 0,
  193. "handlingFee": 0, //可提现手续费金额
  194. willHalding: 0,
  195. withdrawalHalding: 0,
  196. approvedHalding: 0,
  197. yushouIds: '',
  198. yushouList: [],
  199. active: 2,
  200. };
  201. },
  202. onLoad(params) {
  203. this.pageRequest.Date = this.transformTime();
  204. },
  205. computed: {
  206. ...mapState(['userInfo']),
  207. getHeight() {
  208. let height = uni.getSystemInfoSync().windowHeight - uni.upx2px(400);
  209. return `height: ${height}px`;
  210. }
  211. },
  212. onShow() {
  213. this.getCarAdvanceMoney();
  214. this.getOrdersList(1, 20);
  215. },
  216. methods: {
  217. async stausSearch() {
  218. console.log(this.active);
  219. switch (this.active) {
  220. case 1:
  221. let res = await this.$http.post('/sysUserAccount/getInsOrders', {
  222. ids: this.yushouIds,
  223. timeFiltering: this.pageRequest.Date,
  224. amountType: "1",
  225. });
  226. if (res.code == 200 && res.data) {
  227. this.yushouList = res.data.insFeeOrderNewList;
  228. this.statusShow = false;
  229. }
  230. break;
  231. case 2:
  232. case 3:
  233. await this.getOrdersList(1, 20);
  234. this.statusShow = false;
  235. break;
  236. default:
  237. break;
  238. }
  239. },
  240. async startconfirm(e) {
  241. this.pageRequest.Date = e.year + '-' + e.month;
  242. switch (this.active) {
  243. case 1:
  244. let res = await this.$http.post('/sysUserAccount/getInsOrders', {
  245. ids: this.yushouIds,
  246. timeFiltering: this.pageRequest.Date,
  247. amountType: "1",
  248. });
  249. if (res.code == 200 && res.data) {
  250. this.yushouList = res.data.insFeeOrderNewList;
  251. }
  252. break;
  253. case 2:
  254. case 3:
  255. await this.getOrdersList(1, 20);
  256. break;
  257. }
  258. },
  259. //状态筛选
  260. statusclick(e) {
  261. this.active = e.value;
  262. this.statusLabel = e.label;
  263. },
  264. async changeTab(tabIndex) {
  265. this.active = tabIndex;
  266. this.list = [];
  267. await this.getOrdersList(1, 20);
  268. },
  269. // 去提现
  270. async toWithdraw() {
  271. let res = await this.$http.get('/userBank/getUserBankList');
  272. if (res.data.length) {
  273. this.navigate({
  274. url: `/pages/wallet/withdraw?amountStatus=1&amount=${this.handlingFee}`,
  275. }, "navigateTo", true)
  276. } else {
  277. this.navigate({
  278. url: '/pages/wallet/bindBank',
  279. complete: () => {
  280. setTimeout(() => {
  281. uni.showToast({
  282. title: '请先绑定银行卡',
  283. duration: 3000,
  284. icon: "none"
  285. });
  286. }, 500);
  287. }
  288. }, "navigateTo", true)
  289. }
  290. },
  291. // 预收账户金额查询
  292. async getCarAdvanceMoney() {
  293. let res = await this.$http.get('/sysUserAccount/getSysAllAmount');
  294. // 请求失败处理
  295. if (res.code == 200 && res.data) {
  296. this.handlingFee = res.data.handlingFee; //可提现
  297. this.willHalding = res.data.willHalding; //预收
  298. this.withdrawalHalding = res.data.withdrawalHalding; //提现中
  299. this.approvedHalding = res.data.approvedHalding; //已提现
  300. this.yushouIds = res.data.ids;
  301. } else {
  302. this.handlingFee = 0; //手续费
  303. this.documentary = 0; //非跟单
  304. this.promotion = 0; //佣金
  305. }
  306. },
  307. toBillInfo(index) {
  308. this.navigate({
  309. url: '/pages/wallet/billInfo',
  310. success: (res) => {
  311. res.eventChannel.emit("acceptData", {
  312. item: this.list[index],
  313. active: this.active,
  314. })
  315. }
  316. }, "navigateTo", true)
  317. },
  318. yushouInfo(index) {
  319. this.navigate({
  320. url: '/pages/wallet/billInfo',
  321. success: (res) => {
  322. res.eventChannel.emit("acceptData", {
  323. item: this.yushouList[index],
  324. active: this.active,
  325. })
  326. }
  327. }, "navigateTo", true)
  328. },
  329. //获取订单数据Start
  330. async getOrdersList(pageNo, pageSize) {
  331. console.log(this.active);
  332. var data = {
  333. "pageNum": pageNo,
  334. "pageSize": pageSize,
  335. "amountStatus": '1',
  336. [this.active == 2 ? "withdrawalTime" : "timeFiltering"]: this.pageRequest.Date,
  337. "auditingStatus": this.active,
  338. };
  339. let res = await this.$http.post('/sysAmountAuditing/queryAppPage', data);
  340. if (res.code == 200) {
  341. if (res.data.content.length > 0) {
  342. this.list = res.data.content;
  343. }
  344. }
  345. },
  346. //获取订单数据End
  347. //当前时间
  348. transformTime(day) {
  349. var date = new Date();
  350. date.setFullYear(date.getFullYear());
  351. date.setTime(date.getTime());
  352. var strYear = date.getFullYear();
  353. var strDay = day ? date.getDate() - day : date.getDate();
  354. var strMonth = date.getMonth() + 1;
  355. if (strMonth < 10) {
  356. strMonth = "0" + strMonth;
  357. }
  358. if (strDay < 10) {
  359. strDay = "0" + strDay;
  360. }
  361. var datastr = strYear + "-" + strMonth;
  362. return datastr;
  363. },
  364. transformTime1(month) {
  365. var date = new Date();
  366. date.setFullYear(date.getFullYear());
  367. date.setTime(date.getTime());
  368. var strYear = date.getFullYear();
  369. var strDay = date.getDate();
  370. var strMonth = month ? (date.getMonth() + 1) - month : date.getMonth() + 1;
  371. if (strMonth < 10) {
  372. strMonth = "0" + strMonth;
  373. }
  374. var datastr = strYear + "-" + strMonth;
  375. console.log(datastr);
  376. return datastr;
  377. },
  378. },
  379. };
  380. </script>
  381. <style lang="scss" scoped>
  382. @import '@/style/mixin.scss';
  383. page {
  384. padding: 12px 16px;
  385. background-color: #fff;
  386. }
  387. .term {
  388. height: 100%;
  389. .title {
  390. font-size: 14px;
  391. font-weight: bold;
  392. color: #232832;
  393. padding: 10px 0;
  394. border-bottom: 1px solid #f2f2f2;
  395. }
  396. >text {
  397. font-size: 13px;
  398. font-weight: bold;
  399. color: #232832;
  400. margin-bottom: 10px;
  401. }
  402. .status-data {
  403. padding: 4px 10px;
  404. box-sizing: border-box;
  405. margin-right: 10px;
  406. font-size: 12px;
  407. border: 1px solid #eee;
  408. cursor: pointer;
  409. }
  410. .operateBtn {
  411. font-weight: bold;
  412. font-size: 16px;
  413. .cancel {
  414. width: 50%;
  415. height: 46px;
  416. color: #0052FF;
  417. background-color: #EAEAEA;
  418. }
  419. .confirm {
  420. width: 50%;
  421. height: 46px;
  422. color: #fff;
  423. background-color: #0052FF;
  424. }
  425. }
  426. }
  427. .active {
  428. position: relative;
  429. background: rgba(0, 82, 255, 0.1);
  430. color: #0052FF;
  431. border: 1px solid #0052FF;
  432. font-weight: 700;
  433. }
  434. .queryCriteria {
  435. width: 100%;
  436. height: 32px;
  437. background: #FFFBF2;
  438. border-radius: 6px;
  439. margin-top: 26px;
  440. font-size: 14px;
  441. color: rgba(51, 51, 51, 0.8);
  442. text {
  443. margin-left: 5px;
  444. }
  445. }
  446. .white-box {
  447. width: 100%;
  448. height: 155px;
  449. background: linear-gradient(270deg, #F9D27B 0%, #E5B25F 100%);
  450. box-shadow: 0px 10px 20px 0px rgba(224, 179, 106, 0.4);
  451. border-radius: 6px;
  452. padding: 34rpx 40rpx;
  453. position: relative;
  454. }
  455. .palace {
  456. color: #fff;
  457. margin-top: 8px;
  458. .palace-grid {
  459. font-size: 12px;
  460. text:last-child {
  461. font-size: 14px;
  462. font-family: DIN, DIN;
  463. font-weight: bold;
  464. }
  465. }
  466. }
  467. .white-box .tx {
  468. overflow: hidden;
  469. display: flex;
  470. justify-content: space-between;
  471. align-content: center;
  472. border-bottom: 1px solid #f2f2f2;
  473. }
  474. .white-box .tx .tx-grid {
  475. box-sizing: border-box;
  476. }
  477. .tx-grid-comm-sign {
  478. width: 90px;
  479. height: 30px;
  480. background: rgba(255, 255, 255, 0.6);
  481. box-shadow: -1px 4px 4px 0px rgba(204, 149, 57, 0.2);
  482. border-radius: 14px 0px 0px 14px;
  483. font-weight: bold;
  484. position: absolute;
  485. right: 0;
  486. top: 44px;
  487. text {
  488. font-size: 14px;
  489. color: #CC9539;
  490. margin-left: 2px;
  491. }
  492. }
  493. .white-box .tx .tx-grid .tx-grid-text {
  494. display: block;
  495. color: #333;
  496. font-size: 26rpx;
  497. white-space: nowrap;
  498. text-overflow: ellipsis;
  499. overflow: hidden;
  500. }
  501. .white-box .tx .tx-grid .tx-grid-text .title {
  502. font-size: 26rpx;
  503. font-weight: normal;
  504. color: #fff;
  505. }
  506. .white-box .tx .tx-grid .tx-grid-text .money {
  507. font-size: 24px;
  508. color: #fff;
  509. }
  510. .white-box .tx .tx-grid .tx-grid-text .money-b {
  511. font-size: 28rpx;
  512. }
  513. .list-view {
  514. height: 100vh;
  515. overflow-y: auto;
  516. padding-top: 225px;
  517. }
  518. .list-item {
  519. width: 100%;
  520. padding: 30rpx 28rpx;
  521. box-sizing: border-box;
  522. background: #fff;
  523. border-bottom: 1rpx solid #eaeef1;
  524. }
  525. .item-last::after {
  526. left: 0 !important;
  527. }
  528. .des-box {
  529. min-height: 80rpx;
  530. box-sizing: border-box;
  531. vertical-align: top;
  532. color: #333;
  533. font-size: 24rpx;
  534. display: flex;
  535. flex-direction: column;
  536. justify-content: space-between;
  537. }
  538. .tit {
  539. font-size: 30rpx;
  540. max-width: 500rpx;
  541. white-space: nowrap;
  542. overflow: hidden;
  543. text-overflow: ellipsis;
  544. }
  545. .source {
  546. margin: 12rpx 0;
  547. }
  548. .time {
  549. color: #888;
  550. }
  551. .money {
  552. font-size: 38rpx;
  553. font-weight: 500;
  554. color: #333;
  555. white-space: nowrap;
  556. overflow: hidden;
  557. text-overflow: ellipsis;
  558. }
  559. .less {
  560. color: #4caf50 !important;
  561. }
  562. .tip {
  563. margin-top: 50rpx;
  564. display: flex;
  565. justify-content: center;
  566. align-content: center;
  567. font-size: 24rpx;
  568. color: #888;
  569. }
  570. .nothing {
  571. position: absolute;
  572. top: 320upx;
  573. left: 0;
  574. right: 0;
  575. bottom: 0;
  576. }
  577. .nothing>view {
  578. line-height: 1;
  579. }
  580. .nothing>view.icon {
  581. /* color: #66A3FF; */
  582. color: #989898;
  583. font-size: 260upx;
  584. }
  585. .nothing>view.text {
  586. font-size: 28upx;
  587. color: #989898;
  588. }
  589. /* 查询区域Start */
  590. .queryView {
  591. justify-content: space-around;
  592. height: 82upx;
  593. line-height: 80upx;
  594. }
  595. .queryView>view {
  596. border-top: 1px solid #FFC38F;
  597. border-bottom: 1px solid #FFC38F;
  598. border-left: 1px solid #FFC38F;
  599. box-sizing: border-box;
  600. color: #FFC38F;
  601. }
  602. .queryView>view:nth-child(1) {
  603. flex: 3;
  604. }
  605. .queryView>view:nth-child(2) {
  606. flex: 4;
  607. }
  608. .queryView>view:nth-child(3) {
  609. flex: 3;
  610. }
  611. .queryView>view:nth-child(4) {
  612. border-right: 1px solid #FFC38F;
  613. flex: 3;
  614. }
  615. .fixed {
  616. position: fixed;
  617. top: 0;
  618. left: 0;
  619. right: 0;
  620. margin: auto;
  621. z-index: 999;
  622. padding: 12px 16px 0 16px;
  623. background-color: #ffffff;
  624. }
  625. /* 查询区域End */
  626. </style>