<style>
.activeInner {
  background-color: #f6f6f6;
  font-family: pingfang;
}
.activeList {
  height: 255px;
  margin: 15px;
  background-color: #fff;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  border-radius: 30rpx;
}
.activeInnerTop {
  width: 100%;
  height: 190px;

  overflow: hidden;
}
.activeInnerTitle {
  font-size: 28rpx;
  color: #111;
  font-weight: 600;
  margin: 10px 0 8px 15px;
  width: calc(100vw - 60px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.activeDate {
  color: #999;
  font-size: 24rpx;
  margin-left: 15px;
}
.activeJoin {
  color: #fff;
  background-color: #000450;
  width: 60px;
  height: 22px;
  border-radius: 3px;
  text-align: center;
  line-height: 22px;
  position: absolute;
  right: 12px;
  bottom: 12px;
  font-size: 12px;
}
.activeJieshu {
  background-color: #afafaf;
  color: #fff;
}
.activeInnerTitle-x {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  margin-top: 10px;
  margin-bottom: 8px;
}
.ac-x-l {
  font-size: 14px;
  color: #404040;
  font-weight: bold;
  width: calc(100vw - 60px - 90px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ac-x-r {
  width: 90px;
  font-size: 10px;
  font-family: aa;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.activeInnerB {
  width: 100%;
  padding: 15px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.activeInnerB-l {
  width: calc(100vw - 60px - 90px);
  font-size: 14px;
  color: #404040;
  font-weight: bold;
}
.activeJoin-x {
  color: #fff;
  background-color: #000450;
  width: 60px;
  height: 22px;
  border-radius: 3px;
  text-align: center;
  line-height: 22px;

  font-size: 12px;
}
.activeInnerB-l-title {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
<template>
  <view class="activeInner" style="height: 100vh">
    <u-tabs
      bg-color="#f6f6f6"
      :is-scroll="true"
      name="TypeName"
      :list="typeList"
      :active-color="mainColor"
      :current="active"
      @change="changeHandler2"
      :show-bar="true"
      :activeFontSize="34"
      :bold="true"
      height="100"
      duration="0"
      font-size="28"
    ></u-tabs>
    <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(100vh - 71px)"
      class="active-list"
    >
      <view v-if="IsOpenMiAi == 0">
        <view
          class="activeList"
          v-for="(item, index) in dataList"
          :key="index"
          @click="goActiveDetail(item)"
        >
          <view class="activeInnerTop">
            <img
              :src="item.CoverImg"
              mode="aspectFill"
              style="width: 100%; height: 100%"
              alt=""
            />
          </view>
          <view class="activeInnerTitle" v-if="IsOpenMiAi == 0">{{
            item.ActivityName
          }}</view>
          <view style="margin-top: 12rpx; display: flex">
            <view class="activeDate" style="flex: 1">{{
              item.StartTimeStr
            }}</view>
            <view
              class="activeDate"
              style="flex: 1; text-align: right; margin-right: 12px"
              >{{ item.ActivityTypeName }}</view
            >
          </view>
        </view>
      </view>
      <view v-if="IsOpenMiAi == 1">
        <view
          class="activeList"
          style="border-radius: 8px; height: auto"
          v-for="(item, index) in dataList"
          :key="index"
          @click="goActiveDetail(item)"
        >
          <view class="activeInnerTop">
            <img
              :src="item.CoverImg"
              mode="aspectFill"
              style="
                width: 100%;
                height: 100%;
                border-top-left-radius: 8px;
                border-top-right-radius: 8px;
              "
              alt=""
            />
          </view>

          <view class="activeInnerB">
            <view class="activeInnerB-l">
              <view class="activeInnerB-l-title">
                {{ item.ActivityName }}
              </view>
              <view class="activeDate" style="margin-left: 0; margin-top: 8px"
                >{{ item.StartTimeStr }} 至 {{ item.EndTimeStr }}</view
              >
            </view>
            <view class="ac-x-r" :style="{ color: mainColor }">
              <view style="margin-bottom: 5px">
                {{
                  item.IsFree == 1 || item.Price == 0
                    ? "免费"
                    : "需要星星:" + item.Price
                }}
              </view>
              <view
                class="activeJoin-x"
                :style="{
                  'background-color': IsOpenMiAi == 1 ? mainColor : '#000450',
                }"
                v-if="item.ActivityStatus == 0"
                >未开始</view
              >
              <view
                class="activeJoin-x"
                :style="{
                  'background-color': IsOpenMiAi == 1 ? mainColor : '#000450',
                }"
                v-if="item.ActivityStatus == 1"
                >马上加入</view
              >
              <view
                class="activeJoin-x activeJieshu"
                :style="{
                  'background-color': IsOpenMiAi == 1 ? mainColor : '#000450',
                }"
                v-if="item.ActivityStatus == 2"
                >已结束</view
              >
            </view>
          </view>
        </view>
      </view>

      <view style="padding: 10px 0">
        <u-loadmore
          :status="status"
          bg-color="transparent"
          :load-text="loadText"
          :font-size="24"
          :margin-top="0"
          :margin-bottom="0"
        />
      </view>
    </scroll-view>
    <tabbar v-if="barshow == 0 && IsOpenMiAi == 1"></tabbar>
  </view>
</template>

<script>
import tabbar from "@/components/tabbar/index";
export default {
  components: {
    tabbar,
  },
  data() {
    return {
      pageTitle: "活动列表",
      msg: {
        pageIndex: 1,
        pageSize: 10,
        ActivityType: 0,
      },
      dataList: [],
      pageCount: 1,
      mainColor: "",
      loadText: {
        loadmore: "轻轻上拉，加载更多",
        loading: "努力加载中",
        nomore: "没有更多了",
      },
      IsOpenMiAi: 0, //1开始 0 没开启
      barshow: 0,
      typeList: [],
      active: 0,
    };
  },
  created() {},
  mounted() {
    uni.setNavigationBarTitle({
      title: this.pageTitle,
    });
    this.queryActiityTypeList();
    this.mainColor = this.$uiConfig.mainColor;
  },
  onLoad(option) {
    this.IsOpenMiAi = uni.getStorageSync("basedata")
      ? uni.getStorageSync("basedata").mall.setting.is_show_miai
      : 0; //是否开启相亲模式
    if (option && option.Id) {
      this.msg.ActivityType = option.Id;
      this.barshow = 1;
    }

    this.getData(1);
  },
  methods: {
    changeHandler2(i) {
      this.active = i;
      this.dataList = [];
      this.msg.ActivityType = this.typeList[i].Id;
      this.getData(1);
    },
    getData(num) {
      if (num == 1) {
        this.dataList = [];
      }
      this.request2(
        {
          url: "/api/AppletTrade/GetCommerceActivityPage",
          data: this.msg,
        },
        (res) => {
          if (res.resultCode == 1) {
            this.dataList = this.dataList.concat(res.data.pageData);
            this.pageCount = res.data.pageCount;
          }
        }
      );
    },
    queryActiityTypeList() {
      this.request2(
        {
          url: "/api/AppletTrade/GetCommerceActivityTypeList",
          data: {
            PageIndex: 1,
            PageSize: 100,
          },
        },
        (res) => {
          if (res.resultCode == 1) {
            this.typeList.push({
              Id: 0,
              TypeName: "全部",
            });
            res.data.forEach((x) => {
              this.typeList.push(x);
            });
          }
        }
      );
    },
    //滚动加载
    lower(e) {
      if (this.msg.pageIndex < this.pageCount) {
        this.msg.pageIndex++;
        this.status = "loading";
        this.getData();
      } else {
        this.status = "nomore";
      }
    },
    //跳转至详情
    goActiveDetail(item) {
      uni.navigateTo({
        url: "/pages/kotra/activeInnerDetail?Id=" + item.Id,
      });
    },
  },
};
</script>