NN2023021801/addons/dbapp/pagesUser/collect/collectList.vue

<script>
import api from '@/api'

export default {
  data() {
    return {
      lists: []
    }
  },
  methods: {
    reload() {
      this.$refs.mescrollItem.reload()
    },
    async getList(page) {
      let res = await api.goodsAttList(page)
      this.lists = page.page === 1 ? res : [...this.lists, ...res]
      return res.length
    },
    async cancelAtt(id) {
      await api.cancelAtt(id)
      this.reload()
    }
  },
  provide() {
    return {
      getList: this.getList
    }
  }
}
</script>

<template>
  <scroll ref="mescrollItem">
    <view class="list w">
      <view class="item bg-white radius flex" v-for="item in lists" :key="item.id">
        <image :src="item.goods_img" class="img"></image>
        <view class="info flex1">
          <u-text :text="item.goods_name" size="30rpx" bold></u-text>
          <u-text
            :text="`${item.attension_count}人收藏`"
            color="#959595"
            margin="20rpx 0"
            size="24rpx"
          ></u-text>

          <view class="flex">
            <u-text :text="item.price" mode="price" size="32rpx" bold></u-text>
            <u-text
              :text="`赠送${item.rebate_score}积分`"
              color="#F76363"
              bold
              align="right"
              size="30rpx"
            ></u-text>
          </view>

          <view class="btns flex flex-end">
            <u-button
              text="取消收藏"
              shape="circle"
              plain
              customStyle="width:150rpx;height:55rpx;margin:0 10rpx"
              @click="cancelAtt(item.goods_id)"
            ></u-button>
            <u-button
              text="去购买"
              shape="circle"
              color="var(--theme)"
              customStyle="width:150rpx;height:55rpx;margin:0"
              @click="$jump({ url: '/pagesGoods/goodsDetail/goodsDetail' }, { sn: item.goods_sn })"
            ></u-button>
          </view>
        </view>
      </view>
    </view>
  </scroll>
</template>

<style lang="scss" scoped>
.item {
  padding: 30rpx 25rpx 25rpx;
  margin-top: 20rpx;
  .img {
    width: 226rpx;
    height: 226rpx;
    border-radius: 10rpx;
  }
  .info {
    margin-left: 25rpx;
  }
  .btns {
    margin-top: 38rpx;
  }
}
</style>