<style>
.activityList {
  background-color: #f3f5f7;
  padding: 15px;
}

.activityList .activeList {
  background-color: #fff;
  margin-bottom: 15px;
  padding: 15px;
}

.activityList .activeTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activityList .activeLeftTitle {
  color: #111111;
  font-size: 14px;
  font-weight: bold;
}

.activityList .activeBtm {
  display: flex;
  margin-top: 10px;
  justify-content: space-between;
}

.activityList .activeLeftImg {
  width: 111px;
  height: 70px;
  flex-shrink: 0;
}

.activityList .activeRight {
  margin-left: 15px;
  color: #b9b9b9;
  font-size: 12px;
  width: 100%;
}
.seebtn {
  width: 200rpx;
  height: 60rpx;
  background: #f70027;
  border-radius: 20rpx;
  font-size: 20rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  line-height: 60rpx;
  margin-top: 30rpx;
}
</style>
<template>
  <view class="activityList" style="height: 100vh">
    <u-empty v-if="dataList.length == 0" text="暂无数据" mode="data"></u-empty>
    <scroll-view
      v-else
      :scroll-y="true"
      :enable-back-to-top="true"
      :enable-flex="true"
      @scrolltolower="lower"
      :style="{ height: `calc(100%)` }"
    >
      <view>
        <view
          class="activeList"
          v-for="(item, index) in dataList"
          :key="index"
          @click="goActiveDetail(item)"
        >
          <view class="activeTop">
            <view class="activeLeftTitle">{{ item.ActivityName }}</view>
            <view>
              <image
                style="width: 20px; height: 20px"
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/arrow_right.png"
                mode=""
              ></image>
            </view>
          </view>
          <view class="activeBtm">
            <view class="activeLeftImg">
              <image
                style="width: 100%; height: 100%"
                :src="item.CoverImg"
              ></image>
            </view>
            <view class="activeRight">
              <view>活动类型：{{ item.ActivityTypeName }}</view>
              <view style="margin: 10px 0"
                >开始时间：{{ item.StartTimeStr }}</view
              >
              <view>结束时间：{{ item.EndTimeStr }}</view>
            </view>
          </view>
          <view style="display: flex; justify-content: flex-end">
            <view
              class="seebtn"
              :style="{ backgroundColor: mainColor ? mainColor : '#1F1F1F' }"
              @click.stop="goSignList(item)"
              >查看报名信息</view
            >
          </view>
        </view>
      </view>
      <view style="padding: 10px 0">
        <u-loadmore
          :status="status"
          :load-text="loadText"
          bg-color="#F3F5F7"
          :font-size="24"
          :margin-top="0"
          :margin-bottom="0"
        />
      </view>
    </scroll-view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      pageTitle: "我的活动",
      qmsg: {
        pageIndex: 1,
        pageSize: 10,
      },
      pageCount: 1,
      dataList: [],
      loadText: {
        loadmore: "轻轻上拉，加载更多",
        loading: "努力加载中",
        nomore: "没有更多了",
      },
      status: "",
      mainColor: "",
    };
  },
  created() {},
  mounted() {
    this.mainColor = this.$uiConfig.mainColor;
    uni.setNavigationBarTitle({
      title: this.pageTitle,
    });
  },
  onLoad(option) {
    this.getList(1);
  },
  methods: {
    goSignList(item) {
      uni.navigateTo({
        url: "/pages/kotra/signList?Id=" + item.Id,
      });
    },
    getList(num) {
      if (num == 1) {
        this.dataList = [];
      }
      this.request2(
        {
          url: "/api/AppletTrade/GetUserActivityPage",
          data: this.qmsg,
        },
        (res) => {
          if (res.resultCode == 1) {
            this.dataList = res.data.pageData;
            this.pageCount = res.data.pageCount;
          }
        }
      );
    },
    //滚动加载
    lower(e) {
      if (this.msg.pageIndex < this.pageCount) {
        this.msg.pageIndex++;
        this.status = "loading";
        this.getList();
      } else {
        this.status = "nomore";
      }
    },
    //跳转至活动详情
    goActiveDetail(item) {
      uni.navigateTo({
        url:
          "/pages/kotra/activeInnerDetail?Id=" +
          item.Id +
          "&isFromActive=" +
          "1",
      });
    },
  },
};
</script>
