yunshengtai-uniapp/pages/activity/index.vue

<template>
<!--pages/activity/index.wxml-->
<view class="activity-page">
  <view class="tab-box">
    <view class="tab-box acea-row row-around" style="position:fixed;">
      <view :class="'tab-item ' + (active == 0 ? 'tab-item-active' : '')" data-i="0" @tap="tabClick">报名中</view>
      <view :class="'tab-item ' + (active == 10 ? 'tab-item-active' : '')" data-i="10" @tap="tabClick">已完成</view>
    </view>
  </view>
  <view class="activity-list-box">
    <view v-for="(item, index) in activityList" :key="index" class="activity-item acea-row row-between" @tap="toDetail" :data-id="item.id"> 
      <view class="activity-img">
        <view class="img-box">
          <!-- <image src="{{item.images}}" mode="widthFix"></image> -->
          <image :src="item.images" mode="widthFix"></image>
        </view>
      </view>
      <view class="activity-info-box">
        <view class="activity-info-title acea-row">
          <view class="line2"><text class="sm-card">{{item.cateName}}</text>{{item.name}}</view>
        </view>
        <view class="activity-info-time acea-row row-middle">
          <text>{{item.activityStartTime}}</text>
          <text class="address line1">{{item.address}}</text>
        </view>
        <view class="signUp-box acea-row row-between">
          <text>已报名人数：{{item.users.length}}</text>
          <view class="status-box" v-if="item.status == 0">筹备中</view>
          <view class="status-box" v-if="item.status == 1">报名中</view>
          <view class="status-box" v-if="item.status == 2">待举办</view>
          <view class="status-box" v-if="item.status == 3">已结束</view>
        </view>
      </view>
    </view>
  </view>
  <view class="under-line">—已显示全部活动—</view>
</view>
</template>

<script>
// pages/activity/index.js
const app = getApp();
import util from '../../utils/util';

export default {
  data() {
    return {
      active: 0,
      activityList: []
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getActivityList();
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    getActivityList() {
      app.http('POST', 'activity/activityList', {
        status: this.active
      }).then(res => {
        if (res.data.success) {
          res.data.data.content.forEach(item => {
            item.activityStartTime = util.getWeek(item.activityStartTime);
            item.activityEndTime = util.getWeek(item.activityEndTime);
          });
          this.setData({
            activityList: res.data.data.content
          });
        } else {
          uni.showToast({
            title: res.data.msg,
            icon: 'none'
          });
        }
      });
    },

    toDetail(e) {
      let id = e.currentTarget.dataset.id;
      uni.navigateTo({
        url: './detail/index?id=' + id
      });
    },

    tabClick(e) {
      var i = Number(e.currentTarget.dataset.i);
      this.setData({
        active: i
      });
      this.getActivityList();
    }

  }
};
</script>
<style>
/* pages/activity/index.wxss */
page{
  height: 100%;
}
.activity-page{
  background: #f2f2f2;
  min-height: 100%;
  padding-top: 150rpx;
}
.tab-box{
  width: 100%; 
  height: 82rpx;
  background: #fff;
  margin-bottom: 50rpx;
}
.tab-item{
  height: 100%;
  line-height: 82rpx;
  font-size: 34rpx;
  color: #A5A5A5;
  padding-bottom: 12rpx;
  box-sizing: border-box;
  font-weight: 600;
  position: relative;
}
.tab-item::after{
  display: block;
  content: '';
  width: 100%;
  height: 6rpx;
  background: #EBB672;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  transform:scaleX(0);
  transition: all .2s ease,opacity .15s ease;
}
.tab-item-active{
  color: #333;
}
.tab-item-active::after{
  opacity: 1;
  transform: scaleX(1);
}

.activity-item{
  margin-bottom: 24rpx;
  background: #fff;
  padding: 16rpx 32rpx;
}
.address{
  width:70%; 
  display:inline-block;
  margin-left:10rpx;
}

</style>