horzi_rai_wxa/pages-purchaser/purchaserActivity/purchaserActivity.vue

<template>
  <view class="purchaser-activity-container">
    <view class="search-bar">
      <view>
        <text v-for="item in activityTimeList" :key="item.Id" :class="item.IsChoose ? 'active' : ''" @click="isActivityDate(item.Id)">
          {{ item.StatusName }}
        </text>
      </view>
      <view class="type-box">
        <text v-for="item in activityTypeList" :key="item.ActivityTypeId" :class="item.IsChoose ? 'active' : ''" @click="isActivityType(item)">
          {{ item.ActivityTypeName }}
        </text>
      </view>
    </view>
    <view class="purchaser-activity-list">
      <purchaserActivityList style="width: 682rpx" ref="purchaserActivityListRef" :whichDay="whichDay" :typeName="typeName">
        <view class="no-data-box">
          <view class="no-data">
            <image src="https://hzstatic.hzinsights.com/cygx/icon/activity-no-data.png"></image>
            <text>暂无对应活动</text>
          </view>
        </view>
      </purchaserActivityList>
    </view>
    <Loading />
  </view>
</template>

<script>
import purchaserActivityList from "@/components/activity/purchaserActivityList.vue";
import { Throttle } from "@/config/util.js";
import { activity, purchaserApi } from "@/config/api";

export default {
  components: { purchaserActivityList },
  data() {
    return {
      activityTimeList: [
        { Id: 1, IsChoose: false, StatusName: "今日活动" },
        { Id: 2, IsChoose: false, StatusName: "明日活动" },
      ],
      activityTypeList: [],
      whichDay: "",
      typeName: "",
    };
  },
  methods: {
    // 今日明日的点击事件
    isActivityDate(id) {
      this.activityTimeList.forEach((item) => {
        if (item.Id == id) item.IsChoose = !item.IsChoose;
      });
      const arr = [];
      this.activityTimeList.forEach((item) => item.IsChoose && arr.push(item.Id));
      this.whichDay = arr.join(",");
      // this.activityTypeList.map((item) => {
      //   item.IsChoose = false;
      // });
      this.$nextTick(() => {
        this.$refs.purchaserActivityListRef.reloadActivityList();
      });
    },
    isActivityType(_item) {
      _item.IsChoose = !_item.IsChoose;
      const arr = [];
      this.activityTypeList.forEach((item) => item.IsChoose && arr.push(item.ActivityTypeId));
      this.typeName = arr.join(",");
      // this.activityTimeList.map((item) => {
      //   item.IsChoose = false;
      // });
      this.$nextTick(() => {
        this.$refs.purchaserActivityListRef.reloadActivityList();
      });
    },
    loadShare(option) {
      // if(!option) return
      this.whichDay = option.whichDay || "";
      let whichDayArr = this.whichDay.split(",");
      this.typeName = option.typeName || "";
      let typeNameArr = this.typeName.split(",");
      this.activityTimeList.map((item) => {
        item.IsChoose = whichDayArr.includes(item.Id + "");
      });
      this.activityTypeList.forEach((item) => {
        item.IsChoose = typeNameArr.includes(item.Id + "");
      });
      this.$nextTick(() => {
        this.$refs.purchaserActivityListRef.reloadActivityList();
      });
    },
    async getActivityTypelist() {
      const res = await purchaserApi.getActivityTypelist({ IsResearch: true });
      if (res.Ret === 200) {
        this.activityTypeList = res.Data.List || [];
      }
      console.log(res);
    },
  },
  /** 用户点击分享 */
  onShareAppMessage: function (res) {
    return {
      title: this.isHorzMobile ? "好友向您推荐此内容，上传名片享查研观向免费月卡！" : "近期所有研选活动预告",
      path: "/pages-purchaser/purchaserActivity/purchaserActivity?whichDay=" + this.whichDay + "&typeName=" + this.typeName,
    };
  },
  onLoad(option) {
    this.loadShare(option);
    this.getActivityTypelist();
  },
  onReachBottom: Throttle(function () {
    if (this.$refs.purchaserActivityListRef.page_no >= this.$refs.purchaserActivityListRef.pages) return;
    this.$refs.purchaserActivityListRef.loadActivityMore();
  }),
};
</script>

<style lang="scss" scoped>
.purchaser-activity-container {
  background-color: $uni-bg-color;
  min-height: 100vh;
  .search-bar {
    width: 100vw;
    view {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
    }
    .type-box {
      overflow: hidden;
      overflow-x: auto;
    }
    padding: 0 34rpx 5rpx;
    background-color: white;
    position: sticky;
    top: 0;
    text {
      padding: 4rpx 20rpx;
      height: 42rpx;
      text-align: center;
      line-height: 34rpx;
      background-color: #f8f8fa;
      box-sizing: border-box;
      border-radius: 44rpx;
      margin-right: 20rpx;
      font-size: 24rpx;
      white-space: nowrap;
    }
    .active {
      background-color: #376cbb;
      color: #fff;
    }
  }
  .purchaser-activity-list {
    padding: 20rpx 34rpx 36rpx;
    .no-data-box {
      width: 682rpx;
      // height: 100%;
      border-radius: 16rpx;
      background-color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .no-data {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: calc(100vh - 138rpx);
        image {
          width: 412rpx;
          height: 380rpx;
          margin-bottom: 40rpx;
        }
        text {
          font-size: 24rpx;
          line-height: 34rpx;
          color: #999999;
        }
      }
    }
  }
}
</style>