product_wx/pages/subPackages/minePages/myActivities.vue

<template>
    <div class="myActivities">
      <div class="actItem" v-for="item in activityList" @click="toDetail(item)">
        <div class="actTop">
           <img :src="item.annexArray[0]" class="actImg">
          <div class="actRight">
            <span class="actTitle">{{ item.activityName }}</span>
            <span class="actTime2">报名时间：{{ item.startAndEndTime }}</span>
            <span class="actTime2">报名人数：{{item.registrationNumbers}}</span>
          </div>
        </div>
        <div class="actTime">
          <span class="time">开始时间：<span style="color: #666666">{{item.activityStartTime}}</span></span>
          <span :class="item.statusName==='活动结束'?'yjs':'dks'">{{item.statusName}}</span>
        </div>
      </div>
    </div>
</template>

<script>
import { getUserPower, getUserLocalStorageInfo, activityList, homeActivityClickCollect,getByCodes} from "@/js_sdk/http";

export default {
  name: "myActivities",
  onShow(){
  },
  mounted(){
    this.getList()
  },
  data(){
    return{
      activityList:[
        {name:'互联网私募如何入门?',time:'2021-1-21  13:00',type:'待开始'},
        {name:'公募基金中的大数据挖掘',time:'2021-1-21  13:00',type:'待开始'},
        {name:'年度小艾杯篮球赛开始啦',time:'2021-1-21  13:00',type:'已结束'},
      ],
      search: {
        // companyId: getUserLocalStorageInfo().userId,
        pageNum: 1,
        pageSize: 10

      },
    }

  },
  methods:{
    clickColl(index) {
      if (this.activityList[index].collectorsStatus==='2'){
        this.activityList[index].collectorsStatus='1'
      }else{
        this.activityList[index].collectorsStatus='2'
      }

      homeActivityClickCollect({
        id: this.activityList[index].id,
        createdBy: getUserLocalStorageInfo().userId,
        collectorsStatus: this.activityList[index].collectorsStatus
      }).then(res => {
      });
    },
    getList(){
      this.activityList = []
      activityList(this.search).then(res=>{
        if (res.errno == 0){
          res.data.rows.forEach(item=>{
            const json = this.getItemJson(item)
            this.activityList.push(json)
          })

        }
        // console.log(res)
      })
    },
    getItemJson(item) {
      item.startAndEndTime = item.registrationStartTime + '~' + item.registrationEndTime
      return item
    },
    baoming(item) {
      if (item.statusName === '报名中') {
        if (getUserLocalStorageInfo().userType == 3) {
          uni.showModal({
            title: "提示",
            cancelText: "暂不",
            confirmText: "去切换",
            content: "您还不是企业用户，请切换登录身份后再进行相关操作。",
            success: function (res) {
              if (res.confirm) {
                uni.navigateTo({
                  url: "/pages/login2/login",
                  success: function (e) {
                    // uni.$emit('userType', 'OK')
                  },
                });
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
        }else{
          console.log(2222)
          uni.navigateTo({
            url:'/pages/subPackages/parkActivity/activeApplication?activityId=' + item.id
          })
        }
      }
    },
    toDetail(item){
      uni.navigateTo({
        url:"/pages/subPackages/minePages/registrationDetails?activityId=" + item.id + '&url=' + item.annexArray[0],
      })
    }
  },

}
</script>

<style lang="scss">
    .myActivities{
      padding: 24rpx 32rpx;
      .actItem{
        padding: 32rpx 0 22rpx 0;
        background: white;
        border-radius: 16rpx;
        margin-bottom: 24rpx;
        .actTop{
          display: flex;
          align-items: center;
          padding: 0 24rpx;
          box-sizing: border-box;
          .actImg{
            width: 200rpx;
            height: 144rpx;
          }
        }
        .actRight{
          display: flex;
          flex-direction: column;
          margin-left: 16rpx;
          .actTitle{
            color:#18172A;
            font-size: 32rpx;
            margin-bottom: 20rpx;
            width: 380rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .actTime2{
            font-size: 24rpx;
            color: #888888;
            margin: 4rpx 0;
          }
        }
        .actTime{
          margin-top: 24rpx;
          padding: 24rpx 32rpx 0 32rpx;
          display: flex;
          justify-content: space-between;
          border-top: 1px solid #E8EDF5;
          align-items: center;
          .time{
            color: #222222;
            font-size: 28rpx;
          }
          .yjs{
            background: rgba(163, 169, 177, 0.20);
            color: #888888;
            font-size: 28rpx;
            border-radius: 4rpx;
            width: 112rpx;
            height: 48rpx;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .dks{
            background: rgba(3, 101, 249, 0.20);
            color: rgba(3, 101, 249, 1);
            font-size: 28rpx;
            border-radius: 4rpx;
            width: 112rpx;
            height: 48rpx;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }
</style>