您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

etcFlowingWater.vue 14KB

1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623
  1. <template>
  2. <view class="wrapper">
  3. <!-- 背景颜色充满屏 -->
  4. <view class="bg-color"></view>
  5. <!-- 补卡额订单列表-->
  6. <view class="search-time">
  7. <view class="search-time-box">
  8. <view class="show-info">
  9. <view class="show-text">
  10. <picker class="picker date" mode="date" :value="dataTime.startDate" @change="bindDateStart">
  11. <text class="date-text text-val">{{dataTime.startDate?dataTime.startDate:'开始时间'}}</text>
  12. </picker>
  13. <text class="line"></text>
  14. <picker class="picker date" mode="date" :value="dataTime.endDate" @change="bindDateEnd">
  15. <text class="date-text text-val">{{dataTime.endDate?dataTime.endDate:'结束时间'}}</text>
  16. </picker>
  17. </view>
  18. <u-icon name="calendar" :custom-style="{color:'#999999', size: '28rpx'}"></u-icon>
  19. </view>
  20. </view>
  21. <view class="time-btn" @click="search(1)">查询</view>
  22. </view>
  23. <view class="total-num" v-if="state.list.length > 0">
  24. <text>金额合计:{{state.aggregateAmount/100}}</text>
  25. <text class="total-space">通行次数: {{state.passTotal}}</text>
  26. <view class="btn btn-download" @click="doDownload">下载报表</view>
  27. </view>
  28. <view class="list-wrap" v-if="state.list.length >0">
  29. <view v-for="item in state.list" :key="item.listNo"
  30. :class="item.status === 3 ? ' card-info finished' : 'card-info'">
  31. <view class="info-wrap">
  32. <view class="info-left">
  33. <!-- <view class="info-left-text">
  34. <text class="label">单号:</text>
  35. <text class="val">{{item.listNo}}</text>
  36. </view> -->
  37. <view>
  38. <text class="label">卡号:</text>
  39. <text class="val">{{item.cardId}}</text>
  40. </view>
  41. </view>
  42. <view class="info-right">
  43. <view class="price-label">
  44. 交易金额
  45. </view>
  46. <view class="price-val">
  47. <text>¥</text>
  48. <text class="price-val-text">{{item.fee/100}}</text>
  49. </view>
  50. </view>
  51. </view>
  52. <view class="card-text-wrap">
  53. <view class="text-box">
  54. <text class="name-text">{{item.enStationName}}</text>
  55. <text
  56. class="time-text">{{item.enTime.substring(item.enTime.length -8 ,item.enTime.length-3)}}</text>
  57. <text class="date-text">{{item.enTime.substring(0,10)}}</text>
  58. </view>
  59. <view class="arrow-wrap">
  60. <text class="arrow-text">{{item.vehiclePlate}}</text>
  61. <image class="d-img" :src="`${$imgUrl}order/arrowCard.png`"></image>
  62. </view>
  63. <view class="text-box">
  64. <text class="name-text">{{item.exStationName}}</text>
  65. <text
  66. class="time-text">{{item.exTime.substring(item.exTime.length -8 ,item.exTime.length-3)}}</text>
  67. <text class="date-text">{{item.exTime.substring(0,10)}}</text>
  68. </view>
  69. </view>
  70. <!-- <view class="btn-wrap">
  71. <view>
  72. <text v-if="item.status === 2" class="status-wrap">审核进度:<text
  73. class="status-text">审核中</text></text>
  74. <text v-if="item.status === 3" class="status-wrap">审核进度:<text>已完成</text></text>
  75. </view>
  76. <view class="btn-1 btn" v-if="item.status === 1" @click="toApply(item)">补卡额申请</view>
  77. <view class="btn-1 btn" v-if="item.status === 2" @click="toView(item)">查看进度</view>
  78. <view class="btn-1 btn" v-if="item.status === 3" @click="toEvaluate(item)">去评价</view>
  79. </view> -->
  80. </view>
  81. <view class="bottom-line" v-if="state.flags">我是有底线的~~~</view>
  82. </view>
  83. <view class="blank" v-else>
  84. <view class="text-center">暂无数据</view>
  85. </view>
  86. </view>
  87. </template>
  88. <script setup>
  89. import {
  90. reactive,
  91. ref
  92. } from "vue";
  93. import {
  94. request
  95. } from "@/utils/network/request.js";
  96. import {
  97. stringToJson
  98. } from "@/utils/network/encryption.js";
  99. import {
  100. orderDetail,
  101. passBills,
  102. passBillCount,
  103. downloadBills,
  104. } from "@/utils/network/api.js";
  105. import {
  106. onLoad,
  107. onReachBottom
  108. } from '@dcloudio/uni-app'
  109. import {
  110. downloadFileURL
  111. } from '@/datas/fileURL.js'
  112. import {
  113. msg,
  114. } from "@/utils/utils";
  115. const dataTime = reactive({
  116. startDate: "开始时间",
  117. endDate: "结束时间"
  118. })
  119. const state = reactive({
  120. list: [],
  121. cardId: null,
  122. passTotal: 0,
  123. parkTotal: 0,
  124. aggregateAmount: 0,
  125. pageSize: 10, //每页数据量
  126. pageNo: 1, // 当前页
  127. flags: false,
  128. handleDate: "", //月结单选择时间
  129. vehicleId: ""
  130. })
  131. onLoad((option) => {
  132. state.cardId = option.cardId;
  133. state.handleDate = option.handleDate;
  134. state.vehicleId = option.vehicleId;
  135. console.log("月结单111", state.handleDate)
  136. if (state.handleDate != "undefined") {
  137. // "2024-04-25"
  138. let deadLine = getDaysInMonth(state.handleDate.substring(0, 4), state.handleDate.substring(4, 6))
  139. dataTime.startDate = state.handleDate.substring(0, 4) + "-" + state.handleDate.substring(4, 6) + "-" +
  140. "01"
  141. dataTime.endDate = state.handleDate.substring(0, 4) + "-" + state.handleDate.substring(4, 6) + "-" +
  142. deadLine
  143. console.log("月结单", dataTime.startDate, state.handleDate != "")
  144. search(1)
  145. }
  146. })
  147. function getDaysInMonth(year, month) {
  148. var date = new Date();
  149. date.setFullYear(year);
  150. date.setMonth(month);
  151. date.setDate(0);
  152. return date.getDate();
  153. }
  154. // 触底加载
  155. onReachBottom(() => {
  156. if (state.list.length < state.pageNo * 10) return state.flags = true
  157. console.log("触底了")
  158. state.pageNo++
  159. search(2)
  160. })
  161. const search = (val) => {
  162. // if (dataTime.startDate == "开始时间") {
  163. // msg('请选择开始时间');
  164. // return;
  165. // }
  166. // if (dataTime.endDate == "结束时间") {
  167. // msg('请选择结束时间');
  168. // return;
  169. // }
  170. if (val == 1) {
  171. state.pageNo = 1
  172. }
  173. if (state.pageNo == 1 && state.list.length > 0) {
  174. state.list = []
  175. }
  176. const options = {
  177. type: 2,
  178. data: {
  179. cardId: state.cardId,
  180. beforeDate: dataTime.startDate == "开始时间" ? "" : dataTime.startDate,
  181. afterDate: dataTime.endDate == "结束时间" ? "" : dataTime.endDate,
  182. pageNo: state.pageNo,
  183. pageSize: state.pageSize,
  184. },
  185. method: "POST",
  186. showLoading: true,
  187. };
  188. request(passBills, options).then((res) => {
  189. console.log(res);
  190. let result = stringToJson(res.bizContent)
  191. console.log(result);
  192. state.list = [...state.list, ...stringToJson(res.bizContent).data]
  193. console.log(result.data);
  194. getPpassBillCount()
  195. })
  196. }
  197. const getPpassBillCount = () => {
  198. const options = {
  199. type: 2,
  200. data: {
  201. cardId: state.cardId,
  202. starDate: dataTime.startDate == "开始时间" ? "" : dataTime.startDate,
  203. endDate: dataTime.endDate == "结束时间" ? "" : dataTime.endDate,
  204. },
  205. method: "POST",
  206. showLoading: true,
  207. };
  208. request(passBillCount, options).then((res) => {
  209. let result = stringToJson(res.bizContent)
  210. state.aggregateAmount = result.aggregateAmount ? result.aggregateAmount : 0
  211. state.passTotal = result.passTotal ? result.passTotal : 0
  212. state.parkTotal = result.parkTotal ? result.parkTotal : 0
  213. console.log(result);
  214. })
  215. }
  216. // 展示日历
  217. const bindDateStart = (e) => {
  218. console.log(e);
  219. dataTime.startDate = e.detail.value
  220. }
  221. // 展示日历
  222. const bindDateEnd = (e) => {
  223. console.log(e);
  224. dataTime.endDate = e.detail.value
  225. // show.value = true
  226. }
  227. // 补卡申请
  228. const toApply = (item) => {
  229. uni.navigateTo({
  230. url: ""
  231. });
  232. }
  233. // 去评价
  234. const toEvaluate = (item) => {
  235. uni.navigateTo({
  236. url: ""
  237. });
  238. }
  239. // 查看进度
  240. const toView = (item) => {
  241. uni.navigateTo({
  242. url: ""
  243. });
  244. }
  245. //下载按钮事件
  246. const doDownload = () => {
  247. const options = {
  248. type: 2,
  249. data: {
  250. cardId: state.cardId,
  251. beforeDate: dataTime.startDate == "开始时间" ? "" : dataTime.startDate,
  252. afterDate: dataTime.endDate == "结束时间" ? "" : dataTime.endDate,
  253. vehiclePlate: state.vehicleId.split('_')[0],
  254. vehiclePlateColor: state.vehicleId.split('_')[1]
  255. },
  256. method: "POST",
  257. showLoading: true,
  258. };
  259. request(downloadBills, options).then((res) => {
  260. let result = stringToJson(res.bizContent)
  261. console.log("downloadFileURL", downloadFileURL + result.ossFilePath);
  262. download(downloadFileURL + result.ossFilePath)
  263. })
  264. }
  265. //下载文件
  266. const download = (attachLink) => {
  267. let that = this
  268. uni.downloadFile({
  269. url: attachLink, //下载地址,后端接口获取的链接
  270. success: (data) => {
  271. console.log(data.tempFilePath)
  272. console.log(JSON.stringify(data))
  273. if (data.statusCode === 200) {
  274. uni.saveFile({ //文件保存到本地
  275. tempFilePath: data.tempFilePath, //临时路径
  276. success: function(res) {
  277. console.log("下载成功" + res.savedFilePath)
  278. console.log(JSON.stringify(res))
  279. uni.showToast({
  280. icon: 'none',
  281. mask: true,
  282. title: '文件已保存!',
  283. duration: 3000,
  284. });
  285. uni.openDocument({
  286. //fileType: 'docx',
  287. showMenu: true, //关键点,可以转发到微信
  288. filePath: res.savedFilePath,
  289. success: function(res) {
  290. console.log('打开文档成功');
  291. }
  292. });
  293. }
  294. });
  295. }
  296. },
  297. fail: (err) => {
  298. console.log(err);
  299. uni.showToast({
  300. icon: 'none',
  301. mask: true,
  302. title: '失败请重新下载',
  303. });
  304. },
  305. });
  306. }
  307. </script>
  308. <style lang="scss" scoped>
  309. .u-btn--primary {
  310. background: #00B38B;
  311. }
  312. .blank {
  313. font-size: 30rpx;
  314. text-align: center;
  315. }
  316. .bg-color {
  317. position: fixed;
  318. top: 0;
  319. left: 0;
  320. right: 0;
  321. bottom: 0;
  322. background: #EEF7F7;
  323. z-index: -1;
  324. }
  325. .search-box {
  326. margin: 30rpx 30rpx 20rpx 30rpx;
  327. height: 72rpx;
  328. height: 81rpx;
  329. background: #FFFFFF;
  330. border: 1px solid #DCDCDC;
  331. border-radius: 40rpx;
  332. display: flex;
  333. justify-content: center;
  334. align-items: center;
  335. box-sizing: border-box;
  336. }
  337. .picker {
  338. flex: 1;
  339. }
  340. .search-time-box {
  341. flex: 1;
  342. }
  343. .search-box .icon {
  344. width: 48rpx;
  345. height: 48rpx;
  346. margin: 0 20rpx;
  347. }
  348. .search-box .search {
  349. flex: 1;
  350. margin-right: 20rpx;
  351. height: 100%;
  352. padding: 0 10rpx;
  353. font-size: 28rpx;
  354. color: #00b38b;
  355. }
  356. .scroll-view {
  357. white-space: nowrap;
  358. position: sticky;
  359. top: 0;
  360. background: #ffffff;
  361. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  362. }
  363. .search-time {
  364. display: flex;
  365. margin: 20rpx 30rpx 48rpx 30rpx;
  366. .time-btn {
  367. width: 130rpx;
  368. height: 80rpx;
  369. background: #00B38B;
  370. border-radius: 40rpx;
  371. color: #FFFFFF;
  372. font-size: 32rpx;
  373. line-height: 80rpx;
  374. text-align: center;
  375. margin-left: 19rpx;
  376. }
  377. .show-info {
  378. height: 80rpx;
  379. padding: 0 31rpx;
  380. background: #FFFFFF;
  381. border: 1px solid #DCDCDC;
  382. border-radius: 40rpx;
  383. display: flex;
  384. justify-content: space-between;
  385. align-items: center;
  386. .show-text {
  387. display: flex;
  388. align-items: center;
  389. justify-content: center;
  390. width: 100%;
  391. text-align: center;
  392. }
  393. .date-text {
  394. color: #999999;
  395. font-size: 28rpx;
  396. }
  397. .text-val {
  398. color: #333
  399. }
  400. .line {
  401. width: 25rpx;
  402. height: 1rpx;
  403. background: #999999;
  404. margin: 0 24rpx;
  405. }
  406. }
  407. }
  408. .total-num {
  409. font-size: 30rpx;
  410. color: #999999;
  411. display: flex;
  412. justify-content: space-evenly;
  413. align-items: center;
  414. // .total-space {
  415. // margin-left: 41rpx;
  416. // }
  417. }
  418. .btn-download {
  419. padding: 0 20rpx;
  420. border: 1px solid #00B38B;
  421. height: 60rpx;
  422. line-height: 60rpx;
  423. border-radius: 30rpx;
  424. font-size: 28rpx;
  425. color: #00B38B;
  426. }
  427. .list-wrap {
  428. margin: 30rpx;
  429. padding-bottom: 20rpx;
  430. }
  431. .card-info {
  432. background: #FFFFFF;
  433. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  434. border-radius: 20rpx;
  435. margin-bottom: 30rpx;
  436. padding: 30rpx 20rpx 10rpx 20rpx;
  437. .info-wrap {
  438. display: flex;
  439. justify-content: space-between;
  440. align-items: center;
  441. border-bottom: 1px solid #dcdcdc;
  442. padding-bottom: 30rpx;
  443. .info-left-text {
  444. margin-bottom: 15rpx;
  445. }
  446. .label {
  447. color: #999999;
  448. font-size: 26rpx;
  449. font-weight: 400;
  450. }
  451. .val {
  452. color: #333333;
  453. font-size: 26rpx;
  454. font-weight: 400;
  455. }
  456. .price-label {
  457. color: #999999;
  458. font-size: 24rpx;
  459. font-weight: 400;
  460. margin-bottom: 22rpx;
  461. text-align: center;
  462. }
  463. .price-val-text {
  464. font-size: 32rpx;
  465. font-weight: 700;
  466. color: #333333;
  467. margin-left: 9rpx;
  468. }
  469. .price-val {
  470. font-size: 26rpx;
  471. color: #333333;
  472. }
  473. }
  474. .card-text-wrap {
  475. display: flex;
  476. justify-content: space-between;
  477. align-items: center;
  478. margin: 38rpx 0 46rpx 0;
  479. .text-box {
  480. display: flex;
  481. flex-direction: column;
  482. align-items: center;
  483. .name-text {
  484. font-size: 30rpx;
  485. font-weight: 400;
  486. color: #333333;
  487. }
  488. .time-text {
  489. font-size: 30rpx;
  490. color: #333333;
  491. font-weight: 400;
  492. margin-top: 8rpx;
  493. }
  494. .date-text {
  495. font-size: 24rpx;
  496. color: #999999;
  497. font-weight: 400;
  498. margin-top: 8rpx;
  499. }
  500. }
  501. .arrow-wrap {
  502. display: flex;
  503. flex-direction: column;
  504. align-items: center;
  505. .d-img {
  506. width: 186rpx;
  507. height: 12rpx;
  508. }
  509. .arrow-text {
  510. color: #666666;
  511. font-size: 26rpx;
  512. }
  513. }
  514. }
  515. .btn-wrap {
  516. margin-top: 30rpx;
  517. display: flex;
  518. justify-content: space-between;
  519. align-items: center;
  520. .status-wrap {
  521. color: #999999;
  522. font-size: 26rpx;
  523. margin-right: 23rpx;
  524. }
  525. .status-text {
  526. color: #00B38B;
  527. }
  528. .btn {
  529. background: #FFFFFF;
  530. border: 1px solid #00B38B;
  531. border-radius: 30rpx;
  532. line-height: 61rpx;
  533. text-align: center;
  534. color: #00B38B;
  535. font-size: 26rpx;
  536. }
  537. .btn-1 {
  538. width: 171rpx;
  539. height: 61rpx;
  540. }
  541. .btn-2 {
  542. width: 141rpx;
  543. height: 61rpx;
  544. }
  545. .btn-3 {
  546. width: 121rpx;
  547. height: 61rpx;
  548. }
  549. }
  550. }
  551. .finished .info-wrap,
  552. .finished .card-text-wrap {
  553. .price-val,
  554. .price-val-text,
  555. .val,
  556. .text-box .time-text,
  557. .text-box .name-text,
  558. .arrow-wrap .arrow-text {
  559. color: #999999;
  560. }
  561. }
  562. .bottom-line {
  563. text-align: center;
  564. margin: 30rpx 0;
  565. }
  566. </style>