index.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. <template>
  2. <view class="record" :style="colorStyle">
  3. <timeSlot @changeTime="changeTime"></timeSlot>
  4. <view class="list" v-if="list.length">
  5. <view class="item acea-row row-between row-top" v-for="(item,index) in list" :key="index">
  6. <view class="acea-row row-top">
  7. <text class="icon iconfont icon-xiaofeijilu1" v-if="item.type==1"></text>
  8. <text class="icon iconfont icon-fufeihuiyuan1" v-else-if="item.type==7"></text>
  9. <text class="icon iconfont icon-xiaofeijilu-rongcuo" v-else></text>
  10. <view class="txt">
  11. <view class="line1">{{item.title}}</view>
  12. <view class="exp record">{{item.type_name}}</view>
  13. <view class="time">{{item.day}}</view>
  14. </view>
  15. </view>
  16. <view class="num">-{{item.price}}</view>
  17. </view>
  18. </view>
  19. <view class="list" v-else>
  20. <emptyPage title="暂无消费记录~"></emptyPage>
  21. </view>
  22. <view class='loadingicon acea-row row-center-wrapper' v-if="list.length">
  23. <text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
  24. </view>
  25. <!-- #ifdef MP -->
  26. <authorize v-if="isShowAuth" @authColse="authColse" @onLoadFun="onLoadFun"></authorize>
  27. <!-- #endif -->
  28. </view>
  29. </template>
  30. <script>
  31. import {
  32. toLogin
  33. } from '@/libs/login.js';
  34. import {
  35. mapGetters
  36. } from "vuex";
  37. import {
  38. moneyList
  39. } from '@/api/user.js';
  40. import emptyPage from '@/components/emptyPage.vue'
  41. import timeSlot from '@/components/timeSlot/index.vue';
  42. import colors from '@/mixins/color.js';
  43. export default {
  44. components: {
  45. timeSlot,
  46. emptyPage
  47. },
  48. mixins: [colors],
  49. computed: mapGetters(['isLogin']),
  50. data(){
  51. return {
  52. page: 1,
  53. limit: 15,
  54. start: 0,
  55. stop: 0,
  56. loading: false,
  57. loadend: false,
  58. loadTitle: '加载更多',
  59. list:[],
  60. isShowAuth: false
  61. }
  62. },
  63. onLoad(){
  64. if (this.isLogin) {
  65. this.getUserBillList();
  66. }
  67. },
  68. onShow(){
  69. if(!this.isLogin){
  70. // #ifndef MP
  71. toLogin()
  72. // #endif
  73. // #ifdef MP
  74. this.isShowAuth = true;
  75. // #endif
  76. }
  77. },
  78. methods:{
  79. onLoadFun(){
  80. this.getUserBillList();
  81. this.isShowAuth = false;
  82. },
  83. authColse: function(e) {
  84. this.isShowAuth = e
  85. },
  86. changeTime(time) {
  87. this.start = time.start
  88. this.stop = time.stop
  89. this.page = 1;
  90. this.loadend = false;
  91. this.list = [];
  92. this.getUserBillList()
  93. },
  94. getUserBillList(){
  95. let that = this;
  96. if (that.loading) return;
  97. if (that.loadend) return;
  98. that.loading = true;
  99. that.loadTitle = '';
  100. moneyList({
  101. page: this.page,
  102. limit: this.limit,
  103. start: this.start,
  104. stop: this.stop
  105. },9).then(res=>{
  106. let list = res.data.list;
  107. let loadend = list.length < that.limit;
  108. that.list = that.$util.SplitArray(list, that.list);
  109. that.$set(that, 'list', that.list);
  110. that.loadend = loadend;
  111. that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
  112. that.page = that.page + 1;
  113. that.loading = false;
  114. }).catch(err=>{
  115. that.loading = false;
  116. that.loadTitle = '加载更多';
  117. })
  118. }
  119. },
  120. onReachBottom: function() {
  121. this.getUserBillList();
  122. }
  123. }
  124. </script>
  125. <style lang="scss">
  126. .record{
  127. .list{
  128. width: 690rpx;
  129. background-color: #fff;
  130. border-radius: 14rpx;
  131. margin: 20rpx auto 0 auto;
  132. padding-top: 42rpx;
  133. .item{
  134. padding: 0 24rpx 26rpx 24rpx;
  135. position: relative;
  136. margin-bottom: 34rpx;
  137. .icon{
  138. font-size: 72rpx;
  139. color: #E7C993;
  140. }
  141. .num{
  142. color: #282828;
  143. font-size: 32rpx;
  144. font-weight: 600;
  145. }
  146. .pictrue{
  147. width: 76rpx;
  148. height: 76rpx;
  149. background-color: #FDF8EE;
  150. border-radius: 50%;
  151. .iconfont{
  152. color: #F7B942;
  153. }
  154. }
  155. .txt{
  156. font-weight: 400;
  157. color: #282828;
  158. font-size: 28rpx;
  159. margin-left: 24rpx;
  160. .line1{
  161. width: 320rpx;
  162. }
  163. .exp{
  164. color: #999999;
  165. font-size: 22rpx;
  166. margin-top: 2rpx;
  167. &.record{
  168. margin-top: 8rpx;
  169. }
  170. image{
  171. color: #999999;
  172. margin-right: 10rpx;
  173. width: 22rpx;
  174. height: 22rpx;
  175. }
  176. }
  177. .time{
  178. color: #999999;
  179. font-size: 22rpx;
  180. margin-top: 8rpx;
  181. }
  182. }
  183. .bnt{
  184. width: 112rpx;
  185. height: 44rpx;
  186. background: #F4DBAB;
  187. border-radius: 26rpx;
  188. color: #755214;
  189. font-size: 24rpx;
  190. }
  191. &::before{
  192. position: absolute;
  193. content: '';
  194. width: 542rpx;
  195. height: 1px;
  196. background: #EEEEEE;
  197. bottom: 0rpx;
  198. right: 24rpx;
  199. }
  200. }
  201. }
  202. }
  203. </style>