yicangzongtai_app_240321/pages/research/community/collection.vue

 <template>
  <view class="container">
    <view class="navbar">
      <navbar ref="navbar" :config="config" backColor="#666"></navbar>
      <view class="goodsProduct">
        <view class="u-flex-center-sb u-mt15 u-flex-warp">
          <view
            class="item-productsBottom u-mt20"
            @click="goProductDetails(item.id, item.point_goods)"
            v-for="item in goodsList"
            :key="item.id"
          >
            <image class="u-goods336" :src="item.cover" mode=""></image>
            <view class="botbox u-flex-column-start">
              <view class="u-text2 u-font24 u-1A1A1A" style="height: 64rpx;">{{ item.title }}</view>
              <!-- <view class="u-font20 u-999 u-mt5">已售<text class="u-FF0000">{{item.result_sale_num}}</text>件</view> -->
              <view
                class="u-font32 u-FF0000 u-bold u-flex-center-sb u-flex1 u-mt10"
                v-if="!item.point_goods"
              >
                <rich-text
                  :nodes="$mUtil.priceBigSmall(item.min_sale_price)"
                ></rich-text>
              </view>
              <view
                class="u-font32 u-FF0000 u-bold u-flex-center-sb u-flex1 u-mt10"
                v-else
              >
                {{ item.min_exchange_point }}积分
              </view>
              <view
                class="u-font22 u-flex-center-sb u-flex1 u-mt10 u-999"
                style="width: 100%"
              >
                <text>已有{{item.collect_sum}}人收藏</text>
								<view class="iconfont2 u-font40" style="color: #FA6138;">&#xe616;</view>
              </view>
            </view>
          </view>
        </view>
        <loadMore
          v-if="goodsList && goodsList.length > 0"
          :status="status"
        ></loadMore>
        <nodata v-else :config="{ top: 15, content: '暂无商品~' }"></nodata>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      config: {
        back: true, //false是tolbar页面 是则不写
        title: "我的收藏",
        color: "#1A1A1A",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, "#fff"],
        statusBarFontColor: "#1A1A1A",
      },
      goodsList: [],
      params: {
        page: 1,
        limit: 10,
      },
	  imgUrl: this.$mConfig.staticUrl
    };
  },
  onShow() {
    this.params.page = 1;
    this.goodsList = [];
    this.getList();
  },
  onReachBottom() {
    this.status = "loading";
    this.params.page++;
    this.getList();
  },

  onPullDownRefresh() {
    this.params.page = 1;
    this.goodsList = [];
    this.getList();
    uni.stopPullDownRefresh();
  },
  methods: {
    getList() {
      this.$http.get(`/collect/goods/list`, this.params).then((res) => {
        if (res && res.code == 200) {
          this.goodsList = this.goodsList.concat(res.page.list);
          if (res.page.totalPage <= res.page.currPage) {
            this.status = "noMore";
          } else {
            this.status = "more";
          }
        }
      });
    },
    goProductDetails(id, type) {
      if (type) {
        uni.navigateTo({
          url: "/pages/product/goods/IntegralGood?id=" + id,
        });
      } else {
        uni.navigateTo({
          url: "/pages/product/goods/goods?id=" + id,
        });
      }
    },
  },
};
</script>
<style>
	page{
		background-color: #F4F4F4;
	}
	</style>

<style lang="scss" scoped>

	.love-color{
		width: 40rpx;
		height: 40rpx;
	}
.goodsProduct {
  padding:0 30rpx 30rpx 30rpx ;
}
.item-productsBottom {
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  width: 336rpx;

  margin-bottom: 20rpx;
  .botbox {
    padding: 15rpx 20rpx;
  }
}
.u-goods336{
	height: 267rpx;
}
</style>