saas_manager/pages/actlist/index.vue

<template>
  <view class="act-ward">
    <view
      v-for="item in actList"
      :key="item.distributionId"
      class="act-ward-box"
      @click="toDetail(item.distributionId)"
    >
      <view class="act-ward-box-top fl_b">
        <view class="title">{{ item.name }}</view>
        <view class="act-status" v-if="item.status == 1">进行中</view>
        <view class="act-status grey" v-else>已结束</view>
      </view>
      <view class="act-ward-box-time">
        <view>
          <text>开始时间</text>
          <view>{{ item.startTime | formate("yyyy-mm-dd hh:mm") }}</view>
        </view>
        <view>
          <text>结束时间</text>
          <view>{{ item.endTime | formate("yyyy-mm-dd hh:mm") }}</view>
        </view>
      </view>
      <view class="line"></view>
      <view class="act-ward-box-btn">
        <text></text>
        <view @click.stop="makePoster(item.distributionId)">生成海报</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getActList, getLinkCode } from "@/utils/act";
export default {
  data() {
    return {
      actList: [],
      param: {},
      total: 0,
    };
  },
  methods: {
    getActList() {
      getActList(this.param).then((res) => {
        this.actList.push(...res.rows);
        this.total = res.total;
      });
    },
    reset() {
      this.actList = [];
      this.param = {
        pageNum: 1,
        pageSize: 10,
      };
    },
    makePoster(distributionId) {
      getLinkCode({ distributionId }).then((res) => {
        uni.navigateTo({
          url:
            "/pages/bill/index?distributionId=" +
            distributionId +
            "&linkCode=" +
            res +
            "&shareCode=" +
            this.$store.state.userInfo.shareCode,
        });
      });
    },
    toDetail(distributionId) {
      uni.navigateTo({
        url: "/pages/actdetail/index?id=" + distributionId,
      });
    },
  },
  onLoad(option) {},
  onShow() {
    this.reset();
    this.getActList();
  },
  onReachBottom() {
    if (this.actList.length >= this.total) {
      return;
    }
    this.param.pageNum++;
    this.getActList();
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #f6f7fb;
}
.act-ward {
  padding: 24rpx;
  .act-ward-box {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 32rpx;
    margin-bottom: 24rpx;
    & > view {
      display: flex;
      justify-content: space-between;
    }
    .act-ward-box-top {
      align-items: flex-start;
      .title {
        width: 80%;
        font-weight: bold;
        color: #24263d;
        font-size: 32rpx;
        line-height: 46rpx;
      }
      .act-status {
        background: #44ca7d;
        padding: 6rpx 12rpx;
        border-radius: 20rpx 20rpx 0 20rpx;
        font-weight: bold;
        color: #ffffff;
        font-size: 24rpx;
      }
      .grey {
        background: #c0cad9;
      }
    }
    .act-ward-box-time {
      margin-top: 24rpx;
      text {
        font-size: 26rpx;
        font-weight: 500;
        color: #999999;
      }
      view {
        font-weight: 500;
        color: #24263d;
        font-size: 28rpx;
        margin-top: 8rpx;
      }
    }
    .line {
      height: 2rpx;
      background: #e5e5e5;
      margin: 32rpx 0;
    }
    .act-ward-box-btn {
      view {
        border: 1px solid #3f8dfd;
        padding: 10rpx 20rpx;
        border-radius: 72rpx;
        color: #3f8dfd;
        font-size: 26rpx;
      }
    }
  }
}
</style>