zhishifufei_uniapp/pages/spread/special.vue

<template>
  
  <BaseContainer class="thematic-promotion">
    <NavBar title="专题推广" />
    <view class="goodsClass">
      <view class="header" style="height: 100rpx; padding-top: 0;">
        <view class="wrapper" id="wrapper">
          <view class="scroller">
            <scroll-view scroll-x>
              <view class="grade-cate-list flex" @click="handleSetGrade">
                <view
                  class="grade-item"
                  v-for="item in gradeList"
                  :key="item.id"
                  :data-id="item.id"
                  :class="{ cur: item.id == where.grade_id }"
                >
                  <text :data-id="item.id">{{ item.name }}</text>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
    </view>
    <view
      class="swiper-details"
      v-for="item in specialList"
      :key="item.id"
      ref="list"
      v-if="item.list.length"
    >
      <view class="title line1 acea-row row-middle" v-text="item.name"></view>
      <view class="video-listn">
        <view class="item acea-row" v-for="(val, idx) of item.list" :key="idx">
          <view class="pictrue">
            <image mode="aspectFill" :src="val.image" />
          </view>
          <view class="text acea-row row-between row-column">
            <view class="name line1" v-text="val.title"></view>
            <view class="num acea-row row-middle">
              <view class="money">
                ¥<text>{{ val.money }}</text>
              </view>
              <view class="earn" v-if="val.spread_money > 0">
                赚¥{{ val.spread_money }}
              </view>
            </view>
            <!-- #ifndef MP-KUAISHOU  -->
            <navigator
              class="toPromote acea-row row-center-wrapper"
              :url="`/pages/spread/poster_special?special_id=${val.id}&is_light=${val.is_light}`"
              >去推广</navigator
            >
            <!-- #endif -->
            <!-- #ifdef MP-KUAISHOU  -->
            <navigator
              class="toPromote acea-row row-center-wrapper"
              :url="`/pages/special/details?id=${val.id}`"
              >去推广</navigator
            >
            <!-- #endif -->
          </view>
        </view>
      </view>
    </view>
    <view v-if="loadend && where.page > 2" class="loaded">已全部加载</view>
    <view v-if="!specialList.length && !loading">
      <image
        mode="aspectFill"
        class="nothing"
        :src="getImgPath('/wap/first/zsff/images/no_data_available.png')"
      />
    </view>
  </BaseContainer>
</template>

<script>
import { getSpecialSpread, getSpreadGradeList } from "@/api/spread";
export default {
  data() {
    return {
      gradeList: [{ name: "全部", id: 0 }],
      where: {
        grade_id: 0,
        page: 1,
        limit: 10,
      },
      specialList: [],
      loadend: false,
      loading: false,
    };
  },
  watch: {
    "where.grade_id"(n) {
      this.loadend = false;
      this.where.page = 1;
      this.$set(this, "specialList", []);
      this.getSpecialSpread();
    },
  },
  onLoad() {
    this.get_grade_list();
    this.getSpecialSpread();
  },
  onReactBottom() {
    this.getSpecialSpread();
  },
  methods: {
    handleSetGrade(e) {
      const { id } = e.target.dataset;
      if (id === undefined) return;
      this.where.grade_id = Number(id);
    },
    get_grade_list() {
      getSpreadGradeList().then(({ data: list }) => {
        let gradeList = this.$util.SplitArray(list, this.gradeList);
        this.$set(this, "gradeList", gradeList);
      });
    },
    async getSpecialSpread() {
      if (this.loading || this.loaded) return;
      this.loading = true;

      uni.showLoading({ mask: true });

      try {
        const { data } = await getSpecialSpread(this.where);
        uni.hideLoading();
        let list = data.data;
        let specialList = this.$util.SplitArray(list, this.specialList);
        this.loadend = list.length < this.where.limit;
        this.where.page = data.page;
        this.$set(this, "specialList", specialList);
      } catch (err) {
        uni.hideLoading();
        this.$util.showMsg(err);
      }

      this.loading = false;
    },
  },
};
</script>

<style lang="scss">
@import "@/static/style/good.scss";

</style>

<style scoped lang="scss">


.loading {
  font-size: 40rpx;
  text-align: center;
  color: #999999;
}

.loaded {
  font-size: 28rpx;
  line-height: 72rpx;
  text-align: center;
  color: #999999;
}

.nothing {
  position: absolute;
  top: 30%;
  left: 50%;
  width: 414rpx;
  height: 336rpx;
  transform: translate(-50%, -50%);
}

.thematic-promotion nav {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  height: 97rpx;
  justify-content: space-around;
}

.thematic-promotion nav .item {
  height: 100%;
  line-height: 92rpx;
}

.thematic-promotion nav .item.ont {
  color: #509efb;
}

.thematic-promotion nav .on {
  width: 30rpx;
  height: 5rpx;
  background-color: #157dfa;
  border-radius: 15rpx;
  margin: 0 auto;
}

.thematic-promotion .swiper-details {
  background-color: #ffffff;
}

.thematic-promotion .swiper-details + .swiper-details {
  margin-top: 14rpx;
}

.thematic-promotion .swiper-details .title {
  height: 98rpx;
  padding-right: 20rpx;
  padding-left: 20rpx;
  font-size: 32rpx;
}

.thematic-promotion .swiper-details .video-listn {
  border-top: 1px solid #f5f5f5;
  padding: 26rpx 20rpx;
}

.thematic-promotion .swiper-details .video-listn .item {
  position: relative;
  padding-left: 0;
}

.thematic-promotion .swiper-details .video-listn .item ~.item {
  margin-top: 26rpx;
}

.thematic-promotion .swiper-details .video-listn .item .text {
  position: relative;

  flex: 1;
  min-width: 0;
  margin-left: 20rpx;
}

.thematic-promotion .swiper-details .video-listn .item .text .name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 28rpx;
  line-height: 40rpx;
}

.thematic-promotion .swiper-details .video-listn .item .text .num {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 24rpx;
  color: #ff6b00;
  font-weight: 500;
}

.thematic-promotion .swiper-details .video-listn .item .text .num .money text {
  font-size: 32rpx;
  line-height: 45rpx;
}

.thematic-promotion .swiper-details .video-listn .item .text .num .earn {
  font-size: 48rpx;
  color: #ff6b00;
  height: 64rpx;
  padding: 0 22rpx;
  border: 1px solid #ff6b00;
  border-radius: 100rpx;
  margin-left: 14rpx;

  transform: scale(0.5);
  line-height: 64rpx;

  transform-origin: 0 50%;
  font-weight: normal;
}

.thematic-promotion .swiper-details .video-listn .item .toPromote {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 140rpx;
  height: 50rpx;
  border-radius: 25rpx;
  background-color: #2c8eff;
  font-size: 24rpx;
  line-height: 50rpx;
  text-align: center;
  color: #ffffff;
}
</style>