zhishifufei_uniapp/pages/special/group_list.vue

<template>
  
  <BaseContainer class="favorite">
    <NavBar title="拼团列表" />
    <view
      :style="{ backgroundImage: 'url(' + bg + ')' }"
      class="group-list-page"
    >
      <view class="ul" v-if="groupList.length">
        <view class="li" v-for="item in groupList" :key="item.id">
          <navigator
            :url="
              (item.is_light
                ? '/pages/special/single_details'
                : `/pages/special/details`) +
              '?id=' +
              item.id
            "
          >
            <image mode="aspectFill" :src="item.image" />
            <view class="text">
              <view class="name">{{ item.title }}</view>
              <view class="info">
                <view class="people">
                  <text class="iconfont iconpintuan"></text
                  >{{ item.pink_number }}人团
                </view>
                已拼{{ item.count }}件
              </view>
              <view class="wrap">
                <view class="money">
                  ￥<text>{{ item.pink_money }}</text>
                </view>
                <view class="button">去拼团</view>
              </view>
            </view>
          </navigator>
        </view>
      </view>
      <image
        v-else-if="!loading && page === 2"
        class="empty"
        :src="getImgPath('/wap/first/zsff/images/no_data_available.png')"
      />
    </view>
  </BaseContainer>
</template>

<script>
import { getGroupListInfo, getGroupProjectList } from "@/api/special";

export default {
  data() {
    return {
      bg: "",
      groupList: [],
      page: 1,
      limit: 15,
      loading: false,
      finished: false,
    };
  },
  onLoad() {
    this.getBg();
    this.getGroupList();
  },
  onReachBottom() {
    this.getGroupList();
  },
  methods: {
    getBg() {
      getGroupListInfo().then((res) => {
        this.bg = res.data.group_background;
      });
    },
    async getGroupList() {
      if (this.loading || this.finished) return;
      this.loading = true;
      uni.showLoading({ mask: true });

      try {
        const { data } = await getGroupProjectList({
          page: this.page++,
          limit: this.limit,
        });

        uni.hideLoading();
        this.loading = false;
        this.groupList = this.groupList.concat(data);
        this.finished = this.limit > data.length;
      } catch (err) {
        uni.hideLoading();
        this.$util.showMsg(err.msg);
      }
    },
  },
};
</script>

<style>
page {
  background-color: #f5f5f5;
}
</style>

<style scoped lang="scss">
/* 拼团列表 */
.group-list-page {
  min-height: 480rpx;
  padding-top: 382rpx;
  background-position: center top;
  background-size: 100%;
  background-repeat: no-repeat;
}

.group-list-page .ul {
  padding-right: 30rpx;
  padding-bottom: 60rpx;
  padding-left: 30rpx;
}

.group-list-page .li + .li {
  margin-top: 20rpx;
}

.group-list-page .li navigator {
  display: flex;

  align-items: center;
  padding: 20rpx;
  border-radius: 10rpx;
  background-color: #ffffff;
}

.group-list-page .li image {
  width: 280rpx;
  height: 157rpx;
  border-radius: 10rpx;

  object-fit: cover;
  pointer-events: none;
  -webkit-touch-callout: none;
}

.group-list-page .text {
  flex: 1;
  min-width: 0;
  margin-left: 20rpx;
}

.group-list-page .name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 30rpx;
  line-height: 42rpx;
  color: #282828;
}

.group-list-page .info {
  display: inline-block;
  height: 30rpx;
  padding-right: 15rpx;
  padding-left: 11rpx;
  border-radius: 15rpx;
  margin-top: 10rpx;
  background-color: #fff0e5;
  vertical-align: middle;
  font-size: 20rpx;
  line-height: 30rpx;
  color: #ff6b00;
}

.group-list-page .people {
  position: relative;
  display: inline-block;
  padding-right: 7rpx;
}

.group-list-page .people::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 12rpx;
  background-color: rgba(255, 107, 0, 0.5);

  transform: translateY(-50%);
}

.group-list-page .people .iconfont {
  margin-right: 5rpx;
  font-size: 18rpx;
}

.group-list-page .wrap {
  display: flex;

  justify-content: space-between;

  align-items: center;
  margin-top: 26rpx;
}

.group-list-page .money {
  font-weight: bold;
  font-size: 24rpx;
  color: #ff6b00;
}

.group-list-page .money text {
  font-size: 36rpx;
  line-height: 50rpx;
}

.group-list-page .button {
  width: 126rpx;
  height: 44rpx;
  border-radius: 22rpx;
  background: linear-gradient(90deg, #409dff 0%, #1e85fb 100%);
  font-size: 24rpx;
  line-height: 44rpx;
  text-align: center;
  color: #ffffff;
}

.group-list-page .empty {
  position: absolute;
  top: calc(50% + 240rpx);
  left: 50%;
  width: 414rpx;
  height: 336rpx;
  transform: translate(-50%, -50%);
}
</style>