index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644
  1. <template>
  2. <view>
  3. <ujp-navbar :is-back="false">
  4. <view class="navbar">
  5. <view class="navbar-tit" >优惠卷记录</view>
  6. <view class="navbar-screen" @click="popupShow = true"><span>筛选</span>
  7. <u-icon name="filter-2-fill" custom-prefix="custom-icon" color="#b0b8c8" size="32"></u-icon>
  8. </view>
  9. </view>
  10. </ujp-navbar>
  11. <u-popup v-model="popupShow" mode="bottom" height="80%" >
  12. <view class="popup-screen">
  13. <view class="screen">
  14. <view class="screen-item">
  15. <view class="screen-head">查询日期</view>
  16. <view class="screen-main2">
  17. <u-calendar v-model="showdate" mode="date" @change="changedate"></u-calendar>
  18. <view @click="showdate = true" style="
  19. border: 1px solid;
  20. padding: 5px;
  21. " >{{startTime?startTime:'选择时间筛选'}}</view>
  22. <!--
  23. <u-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback"></u-action-sheet>
  24. --></view>
  25. </view>
  26. <view class="screen-item">
  27. <view class="screen-head">站点</view>
  28. <view class="screen-main">
  29. <view class="screen-entry "
  30. :class="{
  31. active:selectstationId==''&&selectstationNo==''
  32. }"
  33. @click="selectstationId='',selectdeviceNo='',selectstationNo=''"
  34. >全部</view>
  35. <template v-for="(item,i) in stationList" >
  36. <view class="screen-entry"
  37. :class="{
  38. active:selectstationNo==item.stationNo.substring(0,1)
  39. }"
  40. @click="selectstationId='',selectdeviceNo='',selectstationNo=item.stationNo.substring(0,1)"
  41. v-if="getStationNo(i)" :key="i" >
  42. {{item.stationNo.substring(0,1)}}类</view>
  43. </template>
  44. <template v-for="(item,i) in stationList" >
  45. <view class="screen-head"
  46. style="width: 100%;"
  47. v-if="getStationNo(i)&&selectstationNo==item.stationNo.substring(0,1)" :key="i" >
  48. <span style="color: red;">*</span>{{item.stationNo.substring(0,1)}}类</view>
  49. <view
  50. :key="i"
  51. v-show="selectstationNo==item.stationNo.substring(0,1)"
  52. :class="{
  53. active:selectstationId==item.id
  54. }"
  55. @click="selectstationId=item.id,selectdeviceNo=''"
  56. class="screen-entry" >{{item.name}}</view>
  57. </template>
  58. </view>
  59. </view>
  60. </view>
  61. <view class="screen-foot">
  62. <view class="screen-btn-l" @click="resetBtn" >重置</view>
  63. <view class="screen-btn-r" @click="okbtn" >确定</view>
  64. </view>
  65. </view>
  66. </u-popup>
  67. <view class="detailed" >
  68. <view style="text-align: center;margin-top: 100px" v-if="!list.length">
  69. <img src="@/assets/img/blankpage.png">
  70. <view>查询为空</view>
  71. </view>
  72. <view class="detailed-list" v-for="(item ,index) in list"
  73. @click="gotoUrl('pagesFinance/coupon/details?id='+item.id)"
  74. :key="index">
  75. <view class="detailed-time" style="background-color:#f3f4f7" v-if="item.show">
  76. <p>{{item.showtime}}</p>
  77. <p v-if="showMap">共收{{showMap.get(item.showtime).num}}笔,{{showMap.get(item.showtime).amount.toFixed(2)}}元</p>
  78. </view>
  79. <view class="detailed-item" style="padding-top: 20rpx;">
  80. <p style=" text-align: end;" >
  81. <u-icon name="clock"></u-icon>
  82. {{item.createTime}}</p>
  83. </view>
  84. <view class="detailed-item">
  85. <view class="detailed-item-name showName" style=" width: 70%; ">
  86. {{item.carNumber?item.carNumber:'未填写'}}
  87. </view>
  88. <view class="detailed-item-name freeMinute">
  89. {{item.freeMinute?minuteConversion(item.freeMinute,1):''}}
  90. </view>
  91. </view>
  92. <view class="detailed-item" style="padding-bottom: 20rpx;">
  93. <view class="detailed-item-name detailed-item-name-list stationName" >
  94. {{item.stationName}}
  95. </view>
  96. <view class="detailed-item-name detailed-item-name-list">
  97. 免费停车时长
  98. </view>
  99. </view>
  100. </view>
  101. <u-divider v-if="list.length&&list.length == recordsTotal" color="#B6BDC3" style="margin-top:20px;" bg-color="#f7f7f7">已经到底了</u-divider>
  102. </view>
  103. <Tabbar :current="1" ref="tabbarMain"></Tabbar>
  104. </view>
  105. </template>
  106. <script>
  107. import Tabbar from '@/components/TabbarFinance.vue'
  108. import * as API from '@/apis/coupon.js'
  109. import {
  110. minuteConversion
  111. } from '@/utils'
  112. export default {
  113. data() {
  114. return {
  115. showdate: false,
  116. startTime: "",
  117. colorList:["#00B962","#1677FF","#eb372a"],
  118. endTime: "",
  119. selecttype:"",
  120. selectstationId:"",
  121. selectstationNo:"",
  122. selectdeviceNo:"",
  123. title:"",
  124. showMonthlyCard:false,
  125. form:{
  126. },
  127. stationNo:'',
  128. // current: 0,
  129. tabList: [{
  130. name: '充电订单'
  131. }, {
  132. name: '折扣卡订单'
  133. }],
  134. pageIndex: 1,
  135. recordsTotal: 0,
  136. list: [],
  137. pageIndex2: 1,
  138. recordsTotal2: 0,
  139. list2: [],
  140. popupShow: false,
  141. tabbarList: [{
  142. iconPath: "bar-chart-box-fill",
  143. selectedIconPath: "bar-chart-box-fill",
  144. text: '统计',
  145. count: 0,
  146. isDot: true,
  147. customIcon: true,
  148. },
  149. {
  150. iconPath: "article-fill",
  151. selectedIconPath: "article-fill",
  152. text: '明细',
  153. midButton: true,
  154. customIcon: true,
  155. },
  156. {
  157. iconPath: "account-pin-box-fill",
  158. selectedIconPath: "account-pin-box-fill",
  159. text: '我的',
  160. count: 0,
  161. isDot: false,
  162. customIcon: true,
  163. },
  164. ],
  165. showMap:null,
  166. showMap2:null,
  167. current: 0,
  168. value: '',
  169. type: 'select',
  170. show: false,
  171. border: true,
  172. stationList:[],
  173. stationListSon:[],
  174. actionSheetList: [
  175. {
  176. text: '男'
  177. },
  178. {
  179. text: '女'
  180. },
  181. {
  182. text: '保密'
  183. }
  184. ],
  185. }
  186. },
  187. components: {
  188. Tabbar
  189. },
  190. onReachBottom() {
  191. this.myLoadmore();
  192. },
  193. onShow() {
  194. if(this.$refs.tabbarMain){
  195. this.$refs.tabbarMain.setcount(1);
  196. }
  197. },
  198. onLoad() {
  199. },
  200. onReady() {
  201. this.info = this.carhelp.getPersonInfo()
  202. this.getList()
  203. this.getStation()
  204. },
  205. methods: {
  206. minuteConversion(a,b){
  207. return minuteConversion(a,b)
  208. },
  209. getStationNo(i){
  210. var no=this.stationList[i].stationNo
  211. if(no){
  212. if(i==0){
  213. return true
  214. }else{
  215. var no2=this.stationList[i-1].stationNo
  216. //console.log(no2,no)
  217. if(no2){
  218. return no2.substring(0,1)!=no.substring(0,1)
  219. }else{
  220. return false
  221. }
  222. }
  223. }else{
  224. return false
  225. }
  226. },
  227. change(index) {
  228. this.current = index;
  229. },
  230. changedate(e) {
  231. // this.queryDate = e.result
  232. this.startTime = e.result
  233. this.endTime = e.result
  234. },
  235. resetBtn(){
  236. this.startTime=""
  237. this.endTime=""
  238. this.selecttype=""
  239. this.selectstationId=""
  240. this.selectdeviceNo=""
  241. this.selectstationNo=""
  242. this.pageIndex = 1;
  243. this.form = {
  244. startDate:"",
  245. endDate:"",
  246. pageIndex: this.pageIndex,
  247. type:this.selecttype,
  248. stationId:this.selectstationId,
  249. deviceNo:this.selectdeviceNo,
  250. };
  251. this.popupShow=false;
  252. this.list = [];
  253. this.getList()
  254. },
  255. okbtn(){
  256. if(this.selectstationNo&&this.selectstationId==''){
  257. uni.showToast({
  258. icon:"none",
  259. title:"请选择站点"
  260. })
  261. return
  262. }
  263. this.popupShow=false;
  264. this.pageIndex = 1;
  265. this.form = {
  266. startDate:this.startTime,
  267. endDate:this.endTime,
  268. pageIndex: this.pageIndex,
  269. // type:this.selecttype,
  270. stationId:this.selectstationId,
  271. // deviceNo:this.selectdeviceNo,
  272. };
  273. this.list = [];
  274. this.getList()
  275. },
  276. getList() {
  277. uni.showLoading({
  278. title: "加载中",
  279. mask: true,
  280. })
  281. this.form.pageIndex=this.pageIndex
  282. this.form.pageSize=20
  283. API.couponList(this.form).then((res) => {
  284. var showMap=new Map()
  285. this.list = [
  286. ...this.list,
  287. ...res.data.data
  288. ];
  289. this.showMap=showMap;
  290. this.recordsTotal = res.data.recordsTotal
  291. uni.hideLoading()
  292. }).catch(error => {
  293. uni.showToast({
  294. title: error
  295. })
  296. })
  297. },
  298. getStation(bl) {
  299. API.stationList().then((res) => {
  300. var list= res.data.stationList
  301. var list2=list.sort(function(item1,item2){
  302. return (item1.stationNo>item2.stationNo)?1:-1
  303. })
  304. for(var i in list2){
  305. //console.log(list2[i].stationNo)
  306. }
  307. this.stationList =list2
  308. this.stationListSon=res.data.deviceList
  309. }).catch(error => {
  310. uni.showToast({
  311. title: error
  312. })
  313. })
  314. },
  315. myLoadmore() {
  316. if (this.list.length < this.recordsTotal) {
  317. this.pageIndex += 1;
  318. this.getList()
  319. }
  320. },
  321. // 点击actionSheet回调
  322. actionSheetCallback(index) {
  323. this.value = this.actionSheetList[index].text;
  324. }
  325. }
  326. }
  327. </script>
  328. <style>
  329. page{
  330. background-color: #F7F7F7;
  331. }
  332. </style>
  333. <style lang="scss" scoped>
  334. .product_tip{
  335. position: absolute;
  336. top: 0;
  337. right: 0;
  338. width: 26px;
  339. height: 26px;
  340. text-align: right;
  341. p{
  342. font-size: 24rpx;
  343. color: #ffffff;
  344. transform: rotate(45deg);
  345. position: relative;
  346. top: 0rpx;
  347. right: 0rpx;
  348. }
  349. .product_tip_bg{
  350. width: 0;
  351. height: 0;
  352. border-bottom: 48rpx solid #FD662A;
  353. border-right: 48rpx solid transparent;
  354. border-left: 48rpx solid transparent;
  355. transform: rotate(45deg);
  356. position: absolute;
  357. top: -7rpx;
  358. right: -29rpx;
  359. }
  360. }
  361. .popup-screen{
  362. padding: 20px;
  363. position: relative;
  364. .screen{
  365. padding-bottom: 30px;
  366. }
  367. .screen-item{
  368. margin-bottom: 20px;
  369. .screen-head{
  370. margin-bottom: 8px;
  371. font-size: 16px;
  372. }
  373. .screen-main{
  374. display: flex;
  375. // display: -webkit-box;
  376. flex-wrap: wrap;
  377. }
  378. .screen-entry{
  379. width: 29%;
  380. padding:6px 0;
  381. display: flex;
  382. align-items: center;
  383. justify-content: center;
  384. background-color: #F2F5FA ;
  385. text-align: center;
  386. margin-bottom: 10px;
  387. border-radius: 3px;
  388. margin-right: 6px;
  389. }
  390. .screen-entry.active{
  391. background-color: #185AC6;
  392. color:#fff;
  393. }
  394. }
  395. .screen-foot{
  396. position: fixed;
  397. left: 0;
  398. right: 0;
  399. bottom: 0;
  400. display: flex;
  401. height:50px;
  402. border-top: 1px solid #ededed;
  403. .screen-btn-l{
  404. background-color: #fff;
  405. flex: 0.2;
  406. text-align: center;
  407. line-height: 50px;
  408. }
  409. .screen-btn-r{
  410. flex: 0.8;
  411. text-align: center;
  412. line-height: 50px;
  413. background-color: #185AC6;
  414. color:#fff;
  415. }
  416. }
  417. }
  418. .navbar{
  419. display: flex;
  420. justify-content: space-between;
  421. flex: 1;
  422. padding: 0 15px;
  423. }
  424. .navbar-tit{
  425. font-size: 20px;
  426. }
  427. .navbar-screen{
  428. display: flex;
  429. align-items: center;
  430. span{
  431. margin-right: 2px;
  432. color:#999;
  433. }
  434. }
  435. .detailed-time{
  436. display: flex;
  437. justify-content: space-between;
  438. align-items: center;
  439. padding: 5px 10px;
  440. font-size: 16px;
  441. p{
  442. color:#666;
  443. }
  444. }
  445. .detailed-list{
  446. border-bottom: 1px solid #ededed;
  447. background-color: #fff;
  448. }
  449. .detailed-item-sp{
  450. background-color: #fff;
  451. display: flex;
  452. justify-content: space-between;
  453. padding: 10px 20px;
  454. border-bottom: 1px solid #ededed;
  455. position: relative;
  456. .sign{
  457. width: 32px;
  458. height: 32px;
  459. position: absolute;
  460. top: 0;
  461. right: 0;
  462. img{
  463. width: 100%;
  464. }
  465. }
  466. .detailed-item-name {
  467. h4 {
  468. font-weight: normal;
  469. }
  470. p {
  471. font-size: 15px;
  472. margin-top: 4px;
  473. color: #A2A9B5;
  474. }
  475. }
  476. .detailed-item-num {
  477. display: flex;
  478. align-items: center;
  479. h2 {
  480. margin-right: 4px;
  481. }
  482. }
  483. }
  484. .detailed-item{
  485. .showName{
  486. font-size: 32rpx;
  487. color:#101010 ;
  488. }
  489. .freeMinute{
  490. color: rgba(16, 16, 16, 1);
  491. font-weight: bold;
  492. font-size: 32rpx;
  493. }
  494. background-color: #fff;
  495. display: flex;
  496. justify-content: space-between;
  497. padding: 2px 15px;
  498. position: relative;
  499. .sign{
  500. width: 32px;
  501. height: 32px;
  502. position: absolute;
  503. top: 0;
  504. right: 0;
  505. img{
  506. width: 100%;
  507. }
  508. }
  509. .detailed-item-name-list{
  510. color:#777777;
  511. }
  512. .stationName{
  513. color:#1677FF ;
  514. }
  515. .detailed-item-name{
  516. h4{
  517. font-weight: normal;
  518. }
  519. p{
  520. font-size: 15px;
  521. margin-top: 4px;
  522. color:#A2A9B5;
  523. }
  524. }
  525. .detailed-item-num{
  526. display: flex;
  527. align-items: center;
  528. h2{
  529. margin-right: 4px;
  530. }
  531. }
  532. }
  533. .showName{
  534. font-weight: unset;
  535. font-weight: unset;
  536. overflow: hidden;
  537. text-overflow: ellipsis;
  538. white-space: nowrap;
  539. }
  540. .u-tabs{
  541. /deep/.uni-scroll-view-content {
  542. width: 56.2% !important;
  543. margin: auto;
  544. }
  545. }
  546. /deep/.u-tab-bar {
  547. background-color: #0076FF !important;
  548. }
  549. </style>