discounts-minapp/my/activityManage/index.vue

<template>
  <view class="content">
    <view class="navBarBox">
      <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
      <view class="navBar">
        <view>活动管理</view>
        <image class="logo" mode="scaleToFill"></image>
      </view>
    </view>

    <view class="nvBarBox">
      <!--  -->
      <view @click="onClickStatus(item)" v-for="item in status" :class="[query.state === item.value ? 'active' : '']">{{
        item.name }}</view>
    </view>

    <zs-list mt="0" @load="loadMore" :status="listStatus">
      <uni-card v-for="item in list" :key="item" padding="0" spacing="0">
        <view @click.stop="onClick(item)">
          <view class='img-veiew'>
            <view class="badge">{{ item.status }}</view>
            <image slot="cover" class="cover" :src="item.activityCover">
            </image>
          </view>

          <view class="content-box">
            <view class="title">{{ item.activityName }}</view>
            <view class="sub-title">
              活动时间: {{ item.activityStartTime }} 至 {{ item.activityEndTime }}
            </view>
            <view class="sub-title">
              活动地点：{{ item.address }}
            </view>
            <u-line :customStyle="{ marginTop: '20rpx' }"></u-line>
            <view class="actionBox">
              <view class="actionItem">
                <view>活动介绍</view>
              </view>
              <view class="actionItem">
                <view>报名记录</view>
              </view>
              <view class="actionItem">
                <view>查看订单</view>
              </view>
            </view>
          </view>
        </view>
      </uni-card>
    </zs-list>
    <!-- <zs-tab-bar :value="1"></zs-tab-bar> -->
  </view>
</template>

<script>
import uniCard from "@/uni_modules/uni-card/components/uni-card/uni-card.vue";
import { getActivityList } from "../../api/activity";
export default {
  components: {
    uniCard,
  },
  data() {
    return {
      navBarHeight: 0,
      statusBarHeight: 0,
      list: [],
      triggered: false,
      loading: false,
      status: [
        // wait 未开始  doing 进行中   over 已结束
        { name: "全部", value: null },
        { name: "未开始", value: 'wait' },
        { name: "进行中", value: 'doing' },
        { name: "已结束", value: 'over' },
      ],
      shopId: uni.getStorageSync("gdShopId"),
      query: {
        currentPage: 1,
        pageSize: 10,
        activityEnable: 1,
        state: null,
      },
      listStatus: "more", // more noMore loading

    };
  },
  onShow() {
    this.getList();
    this.query.state = null;
  },
  created() {
    this.navBarHeight = this.$navHight(1);
    this.statusBarHeight = uni.getSystemInfoSync()["statusBarHeight"];
    this.navBarHeight = this.navBarHeight + 10 + "px";
  },
  methods: {
    getList() {
      getActivityList({
        shopId: this.shopId,
        ...this.query,
      }).then(res => {
        this.list = res.content.records || [];
        this.loading = false;
        this.list = res.content.records;
        let total = this.list.length
        if (total >= res.content.total) {
          this.listStatus = "noMore";
        } else {
          this.listStatus = "more";
          this.query.currentPage++;
        }
      })
    },
    onClickStatus(item) {
      this.query.state = item.value;
      this.getList();
    },
    onClick(row) {
      uni.navigateTo({
        url: "/pages/activity/detail",
      });
    },
    onRefresh() {
      console.log("下拉刷新了", this.triggered);
      this.triggered = true
      setTimeout(() => {
        this.triggered = false;
      }, 1000)
    },
    loadMore() {
      console.log("加载更多了");
    },

  },
};
</script>
<style>
page {
  background-color: #fafafa;
}
</style>
<style lang="scss" scoped>
.navBarBox .navBar .logo {
  width: 0rpx;
  height: 82rpx;
  // margin-right: 10rpx;
}

.navBarBox .navBar {
  font-size: 35rpx;
  font-weight: bold;
  padding: 3rpx 50rpx;
  padding-bottom: 8rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.content {
  // padding-top: 24%;
}

// .view-content {
//   height: 600px;
//   background-color: red;
// }

.nvBarBox {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  // background-color: #fff;
  padding: 10rpx 0;
  font-size: 30rpx;
  color: #999999;

  .active {
    color: #333333;
    font-weight: bold;
  }
}

.img-veiew {
  position: relative;
  overflow: hidden;

  .badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 120rpx;
    text-align: center;
    background-color: #DBDBDB;
    color: #7A7A7A;
    font-size: 24rpx;
    padding: 5rpx 10rpx;
  }

}

.cover {
  width: 100%;
  height: 320rpx;
}

.content-box {
  padding: 10rpx 20rpx;
  // height: 150rpx;

  .title {
    font-weight: bold;
    color: black;
    font-size: 32rpx;
    // 超出文本使用...
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sub-title {
    font-size: 30rpx;
    margin-top: 20rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .actionBox {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 10rpx;

    .actionItem {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      font-size: 24rpx;
      color: #212222;
    }

    // 前2个后面加线
    .actionItem:nth-child(1),
    .actionItem:nth-child(2) {
      border-right: 1px solid #ccc;
    }
  }

}
</style>