fangliaoxiaochengxv/pages/activity/activity.vue

<template>
  <view style="height: 100%; background: #F8F9FA;">
    <van-nav-bar
      title="活动"
      left-arrow
      @click-left="leftClick()"
    />
    <van-tabs :active="active" color="#C29556" title-active-color="#C29556" :duration="0.2" :ellipsis="false"  @change="onTabChange" >
      <van-tab v-for="(item, index) in activityTypeList" :key="index" :title="item">
        <view class="common-page"    >
          <view class="huodong-ccontent" v-for="(item2, index2) in activityList" :key="index2"   @click="toDetail(item2)" v-if="active==index" >
            <view :class="[getClass(item2)]" >{{item2.status_text}}</view>
            <view class="huodong-ccontent-img">
              <van-image
                  class="huodongText2-img"
                  height="264rpx"
                  :src="item2.cover"
                  width="650rpx"
              />
            </view>
            <view class="activity-content">
              <view class="activity-title">{{item2.name}}</view>
              <view class="activity-date">
                <van-image
                    class="huodongText2-img"
                    height="28rpx"
                    src="/static/huodong-a.png"
                    width="28rpx"
                    style="display: flex;align-items: center;"
                />
                <span style="padding-left: 20rpx">{{item2.start_time}}</span>
              </view>
              <view class="activity-price">
                <van-image
                    class="huodongText2-img"
                    height="28rpx"
                    src="/static/huodong-b.png"
                    width="28rpx"
                    style="display: flex;align-items: center;"
                />
                <span style="padding-left: 20rpx">报名费：<span style="font-size: 32rpx;color: #C29556">￥{{item2.fee}}</span></span>
              </view>
              <!-- 替换为水平分割线 -->
              <div class="horizontal-line"></div>
              <view class="activity-stats-and-button">
                <view class="activity-stats" v-if="item2.entry_max==0">
                  已报名 {{item2.entry_num}} 名额 / 无限制
                </view>
                <view class="activity-stats" v-if="item2.entry_max!=0">
                  已报名 {{item2.entry_num}} 名额 / 共 {{item2.entry_max}} 个名额
                </view>
                <button  class="activity-button" @click.stop="handleRegister(item2)" >立即报名</button>
              </view>
            </view>
          </view>
        </view>
      </van-tab>
    </van-tabs>
    <tabbarCom current="2"></tabbarCom>
    <van-toast id="van-toast"/>
  </view>
</template>

<script>
import tabbarCom from "@/components/tabbar/tabbar.vue";
import { getConfigData } from '@/common/api/common.js';
import {getActivityList} from "@/common/api/activity";


export default {
  components: {
    tabbarCom,
  },
  data() {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      search: "",
      sort: "",
      cateid: "",
      subCateId: '',
      sortType: "",
      data: [],
      active: 0,
      activityTypeList: [],
      activityList: [],
      progressPercentage: 24.01,
      progressText: '24.01%',
      enrolledCount: 23,
      totalSlots: 100,
    };
  },

  onLoad: function(option) {
    const type = option.type || 0;
    this.active = type * 1;

    this.getConfigDatalist();
    this.getActivityList();
    console.log(this.activityTypeList);
  },
  onShow() {
    this.$nextTick(() => {});
  },

  onReachBottom() {},
  onShareAppMessage(res) {
    let configs = uni.getStorageSync('configs') || {};
    return {
      title: configs.shop_share_title,
      imageUrl: configs.shop_share_img,
      path: `/pages/activity/activity`
    };
  },
  onShareTimeline(res) {

    let configs = uni.getStorageSync('configs') || {};
    return {
      title: configs.shop_share_title,
      imageUrl: configs.shop_share_img,
      path: `/pages/activity/activity`
    };
  },
  computed: {},
  watch: {},
  methods: {
    getConfigDatalist() {
      getConfigData({ dict_id: 36 }).then(({ data }) => {
        this.activityTypeList = data.reverse();
        console.log(data);
      });
    },
    toDetail(item) {
      console.log("跳转到详情页");
      uni.navigateTo({url: `/subPages/activityDetail/activityDetail?activityId=${item.id}`,})

    },
    getActivityList() {
      getActivityList({ page: 1, pageSize: 9999, type: this.active +1}).then(({ data }) => {
        this.activityList =data.list
        console.log(data);
      });
    },
    leftClick() {
      uni.switchTab({
        url: '/pages/home/index'
      });
    },
    getClass(row) {
      if (row.status == 1||row.status == 4){
        return "status-tag-start"
      }
      return "status-tag"
    },
    handleRegister(item2) {
      uni.navigateTo({url: `/subPages/activityDetail/activitySave?activityId=${ item2.id}`,})
    },

    onTabChange(event) {
      console.log('Tab changed to:', event.detail.index);
      this.active = event.detail.index; // 更新 active 的值
      this.getActivityList();
    }
  },
};
</script>

<style lang="scss" scoped>
.common-page {
  height: 100%;
  padding: 30rpx;
}

.huodong-ccontent {
  position: relative; /* 相对定位 */
  height: 624rpx;
  width: 690rpx;
  padding: 0rpx;
  margin:0 auto;
  margin-bottom: 30rpx;
  background: #FFFFFF;

  border-radius: 16rpx 16rpx 16rpx 16rpx;
  .status-tag{
    position: absolute;
    top: 0px; /* 距离父级元素顶部20px */
    left: 0px; /* 距离父级元素左边20px */
    z-index: 1;
    width: 120rpx;
    height: 40rpx;
    background: #E1E1E1;
    border-radius: 16rpx 0rpx 16rpx 0rpx;
    font-family: 苹方, 苹方;
    font-weight: 400;
    font-size: 20rpx;
    color: #888888;
    line-height: 28rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .status-tag-start{
    position: absolute;
    top: 0px; /* 距离父级元素顶部20px */
    left: 0px; /* 距离父级元素左边20px */
    z-index: 1;
    width: 120rpx;
    height: 40rpx;
    background: #C29556;
    border-radius: 16rpx 0rpx 16rpx 0rpx;
    font-family: 苹方, 苹方;
    font-weight: 400;
    font-size: 20rpx;
    color: #FFFFFF;
    line-height: 28rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .huodong-ccontent-img{
    height: 284rpxrpx;
    width: 690rpx;
    padding-top: 20rpx;
    padding-left: 20rpx;
  }
}

.activity-content {
  margin: 30rpx 0rpx 0rpx 30rpx;

  .activity-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    font-weight: bold;
    margin-bottom: 10rpx;
  }

  .activity-date {
    height: 44rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #666666;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 10rpx;
    display: flex;
    align-items: center;
  }
  .activity-price {
    height: 44rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #666666;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 24rpx;
    display: flex;
    align-items: center;
  }

  .activity-stats-and-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 128rpx;

  }

  .activity-stats {
    width: 330rpx;
    font-size: 24rpx;
    color: #666666;
  }

  .activity-button {
    width: 258rpx;
    height: 68rpx;
    background: linear-gradient( 315deg, #CA9359 0%, #E2B98E 100%);
    border-radius: 292rpx 292rpx 292rpx 292rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #FFFFFF;
    line-height: 36rpx;
    text-align: center;
    font-style: normal;
    text-transform: none;
    // 文字垂直居中
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 水平分割线 */
  .horizontal-line {
    width: 630rpx;
    height: 0rpx;
    border: 1rpx dashed #DDDDDD;
    margin: 20rpx 0 0rpx 0;
  }
}

/* 分割线样式 */
.separator {
  height: 1px;
  background-color: #e0e0e0;
  margin: 20rpx 0;
}

/* 定义 CSS 变量 */
:root {
  --nav-bar-icon-color: black;
  --nav-bar-arrow-size: 16px;
  --tab-font-size: 28rpx;
}

/* 确保 van-nav-bar 内部的内容能够正确适应新的高度 */
/deep/ .van-nav-bar__title {
  font-family: PingFang SC, PingFang SC !important;
  font-weight: 400 !important;
  font-size: 36rpx !important;
  color: #333333 !important;
  text-align: center;
  // 加粗
  // font-weight: bold;
}
/deep/ .van-nav-bar__content {
  text-align: center;
}

/* 添加 van-tab 标题的字体大小样式 */
/deep/ .van-tab__text {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
}
</style>