index.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  1. <template>
  2. <div class="mianBox">
  3. <van-row class="headerBox">
  4. <van-icon name="arrow-left" @click="$router.go(-1)" />
  5. 交易记录
  6. </van-row>
  7. <van-tabs
  8. v-model="active"
  9. class="type"
  10. color="red"
  11. line-width="60px"
  12. @click="tab"
  13. >
  14. <van-tab title="充值记录">
  15. <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
  16. <van-list
  17. v-model="loading"
  18. :finished="finished"
  19. finished-text="没有更多了"
  20. @load="onLoad"
  21. :style="height"
  22. class="listData"
  23. line-width="60px"
  24. :immediate-check="false"
  25. >
  26. <van-row
  27. class="listBoxCell"
  28. v-for="(item, index) in recharge"
  29. :key="index"
  30. >
  31. <van-col span="18">
  32. <van-row class="jlName">{{ item.shopName }}</van-row>
  33. <van-row class="jlTime">时间:{{ item.createTime }}</van-row>
  34. <van-row class="jlBalance">余额:{{ item.balance }} 元</van-row>
  35. </van-col>
  36. <van-col span="6" class="jlMoney just">+{{ item.amt }}元</van-col>
  37. </van-row>
  38. </van-list>
  39. <!-- </van-pull-refresh> -->
  40. </van-tab>
  41. <van-tab title="消费记录">
  42. <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
  43. <van-list
  44. v-model="loading"
  45. :finished="finished"
  46. finished-text="没有更多了"
  47. @load="onLoad"
  48. class="listData"
  49. :immediate-check="false"
  50. >
  51. <van-row class="listBoxCell" v-for="(item, index) in consumption" :key="index">
  52. <van-col span="18">
  53. <van-row class="jlName">{{ item.shopName }}</van-row>
  54. <van-row class="jlTime">时间:{{ item.createTime }}</van-row>
  55. <van-row class="jlBalance">余额:{{ item.balance }} 元</van-row>
  56. </van-col>
  57. <van-col span="6" class="jlMoney negative"> - {{ item.amt }}元</van-col>
  58. </van-row>
  59. </van-list>
  60. <!-- </van-pull-refresh> -->
  61. </van-tab>
  62. </van-tabs>
  63. <van-cell
  64. title="选择日期区间"
  65. :value="date"
  66. @click="show = true"
  67. class="timeSelect"
  68. />
  69. <van-calendar
  70. v-model="show"
  71. type="range"
  72. @confirm="onConfirm"
  73. :min-date="minDate"
  74. />
  75. </div>
  76. </template>
  77. <script>
  78. import { Toast, } from "vant";
  79. export default {
  80. data() {
  81. return {
  82. recharge: [],//支付记录
  83. consumption: [], //消费记录
  84. loading: false,
  85. finished: false,
  86. refreshing: true,
  87. height: {
  88. height: false,
  89. },
  90. active: 0,
  91. date: "",
  92. show: false,
  93. minDate: new Date(2020, 1, 1),
  94. page1:1,
  95. page2:1,
  96. current:20,
  97. isref:true,
  98. starTime:undefined,
  99. endTime:undefined
  100. };
  101. },
  102. components: {
  103. [Toast.name]: Toast,
  104. },
  105. created() {
  106. this.height.height = document.documentElement.clientHeight - 120 + "px";
  107. if(localStorage.getItem("user")){
  108. this.charge()
  109. }else{
  110. this.finished = true
  111. }
  112. },
  113. methods: {
  114. tab(name, title) {
  115. this.date = "";
  116. this.active = name
  117. if (name == 0) {
  118. if (this.recharge.length == 0) {
  119. this.charge()
  120. }
  121. this.starTime = undefined,
  122. this.endTime = undefined
  123. } else {
  124. if (this.consumption.length == 0) {
  125. this.dish()
  126. }
  127. }
  128. },
  129. formatDate(date) {
  130. return `${date.getMonth() + 1}/${date.getDate()}`;
  131. },
  132. onConfirm(date) {
  133. this.show = false;
  134. var start_ = new Date(date[0]);
  135. this.starTime =start_.getFullYear() +"-" +(start_.getMonth() + 1) +"-" +start_.getDate() + ' ' + '00:00:00'
  136. var end_ = new Date(date[1]);
  137. this.endTime = end_.getFullYear() + "-" + (end_.getMonth() + 1) + "-" + end_.getDate() + ' ' + '23:59:59'
  138. this.date = this.starTime.slice(0,10) + " 至 " + this.endTime.slice(0,10);
  139. this.isref = true
  140. if(this.active == 0){
  141. this.page1 = 1
  142. this.charge()
  143. this.recharge = []
  144. }else{
  145. this.page2 = 1
  146. this.consumption = []
  147. this.dish()
  148. }
  149. },
  150. charge(){//充值
  151. axios.post(`/dxtop/charge/page`,{
  152. "startTime":this.starTime,
  153. "endTime":this.endTime,
  154. "size":this.current,
  155. "current":this.page1,
  156. "userId":"0001T11000000000V6UQ"
  157. }).then(res => {
  158. if (res?.data?.data?.records.length > 0) {
  159. let data = res.data.data.records
  160. for(let i =0;i<data.length;i++){
  161. this.recharge.push(data[i])
  162. }
  163. this.page1 ++
  164. this.isref = true
  165. } else {
  166. this.page1--
  167. this.isref = false
  168. this.finished = true
  169. }
  170. this.loading = false
  171. }).catch(err =>{
  172. console.log(err)
  173. })
  174. },
  175. dish(){//消费
  176. axios.post(`/dxtop/dish/page`,{
  177. "startTime":this.starTime,
  178. "endTime":this.endTime,
  179. "size":this.current,
  180. "current":this.page2,
  181. "id":"0001T11000000000V6UQ"
  182. }).then(res => {
  183. if (res?.data?.data?.records.length > 0) {
  184. let data = res.data.data.records
  185. for(let i =0;i<data.length;i++){
  186. this.consumption.push(data[i])
  187. }
  188. this.page2 ++
  189. this.isref = true
  190. } else {
  191. this.page2--
  192. this.isref = false
  193. this.finished = true
  194. }
  195. this.loading = false
  196. })
  197. },
  198. onLoad() {
  199. if(timeout){
  200. clearTimeout(timeout);
  201. }
  202. let timeout = setTimeout(() => {//节流
  203. if (this.isref) {
  204. this.loading = true;
  205. //防止多次上滑动导致page等于2没加载出来就加载page等于3的内容
  206. this.isref = false;
  207. if(this.active == 0){
  208. this.charge()
  209. }else{
  210. this.dish()
  211. }
  212. this.loading = false;
  213. }
  214. }, 1000);
  215. },
  216. onRefresh() {
  217. // 清空列表数据
  218. // this.finished = false;
  219. // console.log(1111)
  220. // // 重新加载数据
  221. // // 将 loading 设置为 true,表示处于加载状态
  222. // this.loading = false;
  223. // this.onLoad();
  224. },
  225. }
  226. }
  227. </script>
  228. <style lang="scss" scoped>
  229. .mianBox {
  230. width: 100vw;
  231. padding-top: 44px;
  232. height: 100vh;
  233. color: #000;
  234. box-sizing: border-box;
  235. overflow-y: hidden;
  236. }
  237. .listBoxCell {
  238. height: 75px;
  239. width: 100%;
  240. padding: 10px 10px 10px;
  241. box-sizing: border-box;
  242. display: flex;
  243. align-items: center;
  244. border-bottom: 1px solid rgba(237, 237, 237, 1);
  245. .jlName {
  246. font-size: 14px;
  247. color: #000;
  248. }
  249. .jlTime {
  250. margin-top: 5px;
  251. font-size: 12px;
  252. color: #ccc;
  253. }
  254. .jlBalance {
  255. margin-top: 5px;
  256. font-size: 14px;
  257. color: rgba(242, 46, 60, 1);
  258. }
  259. .jlMoney {
  260. text-align: right;
  261. font-size: 16px;
  262. }
  263. .jlMoney.just {
  264. color: rgba(56, 129, 253, 1);
  265. }
  266. .jlMoney.negative {
  267. color: rgba(242, 46, 60, 1);
  268. }
  269. }
  270. .van-list {
  271. overflow-y: auto;
  272. }
  273. .timeSelect{
  274. position: absolute;
  275. top: 92px;
  276. left: 0;
  277. z-index: 10
  278. }
  279. .listData{
  280. margin-top:40px;
  281. height:calc(100vh - 10rem);
  282. overflow-y: scroll;
  283. }
  284. /deep/ .van-list__finished-text{
  285. margin-bottom:30px !important;
  286. }
  287. @media screen and (max-width:374px){
  288. .timeSelect{
  289. position: absolute;
  290. top: 86px;
  291. }
  292. }
  293. @media screen and (max-width:350px){
  294. .timeSelect{
  295. position: absolute;
  296. top: 84px;
  297. }
  298. }
  299. @media screen and (min-width:410px){
  300. .listData{
  301. margin-top:50px
  302. }
  303. }
  304. </style>
  305. <style>
  306. /* .van-cell__title, .van-cell__value{
  307. flex:none
  308. }
  309. .van-cell__value{
  310. margin-left:20px
  311. } */
  312. </style>