myCollect.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <template>
  2. <view>
  3. <van-tabs :active="active" @change="onChange">
  4. <van-tab :name="1" title="酒店">
  5. </van-tab>
  6. <van-tab :name="2" title="商品">
  7. </van-tab>
  8. </van-tabs>
  9. <scroll-view style="height: 95vh;" class="floor-list"
  10. :scroll-top="scrollTop" scroll-y="true" @scroll="scroll" @scrolltoupper="upper" @scrolltolower="lower"
  11. refresher-enabled="true">
  12. <view v-if="active == 1" v-for="(item,index) in store_list" :key="index">
  13. <van-cell :title="item.store_name" title-class="titlepadding">
  14. <template slot="icon">
  15. <image :src="pictureUrl+'/uploads/home/store/'+item.store_id+'/'+item.store_logo" style="border-radius: 50%;
  16. width: 50upx;height: 50upx;vertical-align: middle;"></image>
  17. </template>
  18. </van-cell>
  19. <view class="hotelcontent">
  20. <view class="contentleft">
  21. <image :src="pictureUrl+'/uploads/home/store/'+item.store_id+'/'+item.store_avatar"
  22. style="width: 100%;height: 100%;vertical-align: middle;"></image>
  23. </view>
  24. <view class="contentitle">
  25. <view>{{item.store_name}}</view>
  26. <view class="contentip">{{item.store_summary}}</view>
  27. </view>
  28. </view>
  29. </view>
  30. <view v-if="active == 2" v-for="(item,index) in goods_list" :key="index">
  31. <van-cell :title="item.store_name" title-class ="titlepadding">
  32. <template slot="icon">
  33. <image :src="pictureUrl+'/uploads/home/store/'+item.store_id+'/'+item.store_avatar" style="border-radius: 50%;
  34. width: 50upx;height: 50upx;vertical-align: middle;"></image>
  35. </template>
  36. </van-cell>
  37. <view style="border-bottom: 20upx solid #F5F5F5;">
  38. <van-card
  39. title-class="priceClass"
  40. desc-class="desclass"
  41. price-class ="priceClass"
  42. price="10.00"
  43. desc="描述信息"
  44. title="商品标题"
  45. thumb="https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg"
  46. >
  47. </van-card>
  48. </view>
  49. </view>
  50. </scroll-view>
  51. </view>
  52. </template>
  53. <script>
  54. export default {
  55. data() {
  56. return {
  57. pictureUrl: this.pictureUrl,
  58. active: 1,
  59. type: 'store',
  60. page: 1,
  61. page_size: 10,
  62. scrollTop:0,
  63. old: {
  64. scrollTop: 0
  65. },
  66. store_list:[],
  67. goods_list:[]
  68. }
  69. },
  70. onLoad() {
  71. this.getlist();
  72. },
  73. methods: {
  74. upper(e) {
  75. console.log(e)
  76. console.log("顶部")
  77. },
  78. // 滚到底部
  79. lower(e) {
  80. console.log("底部")
  81. },
  82. // 滚动时触发
  83. scroll(e) {
  84. this.old.scrollTop = e.detail.scrollTop
  85. },
  86. onChange(e) {
  87. console.log(e);
  88. this.active = e.detail.name;
  89. if(e.detail.name == 1) {
  90. this.type = 'store';
  91. }else {
  92. this.type = 'goods';
  93. }
  94. this.getlist();
  95. },
  96. getlist() {
  97. this.request({
  98. url: '/v1/favorites/get',
  99. method: 'post',
  100. scrollTop: 0,
  101. data: {
  102. type: this.type,
  103. page: this.page,
  104. page_size: this.page_size
  105. },
  106. success: (res) => {
  107. this.store_list = res.data.data.store_list;
  108. this.goods_list = res.data.data.goods_list;
  109. console.log(this.store_list );
  110. console.log(this.goods_list );
  111. }
  112. })
  113. },
  114. }
  115. }
  116. </script>
  117. <style lang="scss">
  118. .titlepadding {
  119. padding-left: 10upx;
  120. }
  121. .hotelcontent {
  122. display: flex;
  123. flex-direction: row;
  124. padding: 18upx 32upx;
  125. border-bottom: 20upx solid #F5F5F5;
  126. .contentleft {
  127. width: 200upx;
  128. height: 180upx;
  129. background-color: red;
  130. }
  131. .contentitle {
  132. padding-left: 35upx;
  133. .contentip {
  134. float: left;
  135. color: #909399;
  136. padding-top: 15upx;
  137. font-size: 24upx;
  138. }
  139. }
  140. }
  141. .van-card {
  142. background-color: #fff!important;
  143. }
  144. .priceClass {
  145. color: #303133!important;
  146. font-size: 28upx!important;
  147. font-weight: normal!important;
  148. }
  149. .desclass {
  150. color: #909399!important;
  151. font-size: 24upx;
  152. }
  153. </style>