myPro.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <style lang="scss">
  2. .order-item{
  3. background: #fff;
  4. margin-top: 10px;
  5. padding: 20px;
  6. .info{
  7. width: 100%;
  8. .img{
  9. image{width: 83px;height: 83px;border-radius: 20rpx;}
  10. }
  11. .inner{
  12. width: calc(100% - 93px);
  13. margin-left: 10px;
  14. .title{
  15. font-size: 14px;
  16. color: #4f4f4f;
  17. }
  18. .auction{
  19. margin-top: 5px;
  20. font-size: 14px;
  21. color: #9d9d9d;
  22. }
  23. .price{
  24. margin-top: 15px;
  25. display: inline;
  26. font-size: 18px;
  27. color: #fd3938;
  28. }
  29. }
  30. }
  31. .info2{
  32. padding: 5px 11px;
  33. background-color: #fff;
  34. .l1{
  35. margin-top: 10px;
  36. font-size: 14px;
  37. }
  38. }
  39. }
  40. </style>
  41. <template>
  42. <view class="app">
  43. <view class="order-item fx-r" v-for="item in data">
  44. <view class="info fx-r">
  45. <view class="img">
  46. <image :src="item.image" mode="aspectFill"></image>
  47. </view>
  48. <view class="inner">
  49. <view class="title">{{ item.name }}</view>
  50. <view class="auction">所属场次:{{ item.nickname }}</view>
  51. <view class="price">{{ item.price }}</view>
  52. </view>
  53. </view>
  54. <view class="info2">
  55. <view class="l1">挂售价格:{{ item.hanging_price }}</view>
  56. <view class="l1">挂售时间:{{ item.update_time }}</view>
  57. </view>
  58. </view>
  59. <view class="loading fx-r fx-ac fx-bc" v-if="!page.isFoot">
  60. <image src="/static/img/xloading.png"></image>
  61. <text>正在载入更多...</text>
  62. </view>
  63. <view class="loading complete" :hidden="!page.isFoot">已加载全部</view>
  64. </view>
  65. </template>
  66. <script>
  67. import {mapState,mapMutations } from 'vuex'
  68. var cateId = 0;
  69. var brandId = 0;
  70. var activeId = "";//限时抢购rush,秒杀专场seckill
  71. var is_rush = 0;//
  72. var type = "";
  73. export default {
  74. data() {
  75. return {
  76. data : [],
  77. page:{
  78. page:1,
  79. isLoad:false,
  80. isFoot:false
  81. }
  82. }
  83. },
  84. /**
  85. * 跳转的值
  86. * @param {Object} option
  87. */
  88. onLoad(option){
  89. this.getData(true);
  90. },
  91. onReachBottom() {
  92. if(this.page.isFoot || this.page.isLoad) {
  93. return;
  94. }
  95. this.page.page ++;
  96. this.getData();
  97. },
  98. methods: {
  99. /**
  100. * 获取get数据
  101. */
  102. getData:function(isPull = false){
  103. if (this.page.isLoad) return;
  104. this.page.isLoad = true;
  105. if (isPull) {
  106. uni.showLoading({ title: '获取数据中..'});
  107. }
  108. var post = {};
  109. post.page = this.page.page;
  110. this
  111. .request
  112. .post("auctionMyPro",post)
  113. .then(res => {
  114. uni.hideLoading();
  115. uni.hideLoading();
  116. if (isPull) {
  117. this.data = res.data.list;
  118. uni.stopPullDownRefresh();
  119. } else {
  120. this.data = this.data.concat(res.data.list);
  121. }
  122. this.page.isLoad = false;
  123. //是否到底
  124. if (res.data.list.length != res.data.pageSize) {
  125. this.page.isFoot = true;
  126. }
  127. })
  128. .catch(res=>{
  129. console.log(res);
  130. uni.hideLoading();
  131. uni.showModal({title: '系统提示',content: '加载失败,重新点击尝试!',showCancel: false});
  132. });
  133. }
  134. }
  135. }
  136. </script>