collection.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <template>
  2. <view class="container">
  3. <view class="navbar">
  4. <navbar ref="navbar" :config="config" backColor="#666"></navbar>
  5. <view class="goodsProduct">
  6. <view class="u-flex-center-sb u-mt15 u-flex-warp">
  7. <view
  8. class="item-productsBottom u-mt20"
  9. @click="goProductDetails(item.id, item.point_goods)"
  10. v-for="item in goodsList"
  11. :key="item.id"
  12. >
  13. <image class="u-goods336" :src="item.cover" mode=""></image>
  14. <view class="botbox u-flex-column-start">
  15. <view class="u-text2 u-font24 u-1A1A1A" style="height: 64rpx;">{{ item.title }}</view>
  16. <!-- <view class="u-font20 u-999 u-mt5">已售<text class="u-FF0000">{{item.result_sale_num}}</text>件</view> -->
  17. <view
  18. class="u-font32 u-FF0000 u-bold u-flex-center-sb u-flex1 u-mt10"
  19. v-if="!item.point_goods"
  20. >
  21. <rich-text
  22. :nodes="$mUtil.priceBigSmall(item.min_sale_price)"
  23. ></rich-text>
  24. </view>
  25. <view
  26. class="u-font32 u-FF0000 u-bold u-flex-center-sb u-flex1 u-mt10"
  27. v-else
  28. >
  29. {{ item.min_exchange_point }}积分
  30. </view>
  31. <view
  32. class="u-font22 u-flex-center-sb u-flex1 u-mt10 u-999"
  33. style="width: 100%"
  34. >
  35. <text>已有{{item.collect_sum}}人收藏</text>
  36. <view class="iconfont2 u-font40" style="color: #FA6138;">&#xe616;</view>
  37. </view>
  38. </view>
  39. </view>
  40. </view>
  41. <loadMore
  42. v-if="goodsList && goodsList.length > 0"
  43. :status="status"
  44. ></loadMore>
  45. <nodata v-else :config="{ top: 15, content: '暂无商品~' }"></nodata>
  46. </view>
  47. </view>
  48. </view>
  49. </template>
  50. <script>
  51. export default {
  52. data() {
  53. return {
  54. config: {
  55. back: true, //false是tolbar页面 是则不写
  56. title: "我的收藏",
  57. color: "#1A1A1A",
  58. //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
  59. backgroundColor: [1, "#fff"],
  60. statusBarFontColor: "#1A1A1A",
  61. },
  62. goodsList: [],
  63. params: {
  64. page: 1,
  65. limit: 10,
  66. },
  67. imgUrl: this.$mConfig.staticUrl
  68. };
  69. },
  70. onShow() {
  71. this.params.page = 1;
  72. this.goodsList = [];
  73. this.getList();
  74. },
  75. onReachBottom() {
  76. this.status = "loading";
  77. this.params.page++;
  78. this.getList();
  79. },
  80. onPullDownRefresh() {
  81. this.params.page = 1;
  82. this.goodsList = [];
  83. this.getList();
  84. uni.stopPullDownRefresh();
  85. },
  86. methods: {
  87. getList() {
  88. this.$http.get(`/collect/goods/list`, this.params).then((res) => {
  89. if (res && res.code == 200) {
  90. this.goodsList = this.goodsList.concat(res.page.list);
  91. if (res.page.totalPage <= res.page.currPage) {
  92. this.status = "noMore";
  93. } else {
  94. this.status = "more";
  95. }
  96. }
  97. });
  98. },
  99. goProductDetails(id, type) {
  100. if (type) {
  101. uni.navigateTo({
  102. url: "/pages/product/goods/IntegralGood?id=" + id,
  103. });
  104. } else {
  105. uni.navigateTo({
  106. url: "/pages/product/goods/goods?id=" + id,
  107. });
  108. }
  109. },
  110. },
  111. };
  112. </script>
  113. <style>
  114. page{
  115. background-color: #F4F4F4;
  116. }
  117. </style>
  118. <style lang="scss" scoped>
  119. .love-color{
  120. width: 40rpx;
  121. height: 40rpx;
  122. }
  123. .goodsProduct {
  124. padding:0 30rpx 30rpx 30rpx ;
  125. }
  126. .item-productsBottom {
  127. background-color: #fff;
  128. border-radius: 16rpx;
  129. overflow: hidden;
  130. width: 336rpx;
  131. margin-bottom: 20rpx;
  132. .botbox {
  133. padding: 15rpx 20rpx;
  134. }
  135. }
  136. .u-goods336{
  137. height: 267rpx;
  138. }
  139. </style>