product_wx/pages/index/components/activity.vue

<template>
  <div class="activity">
    <div v-for="(item, index) in activityList" class="activityItem" @tap="toDetail(item)">
      <img :src="item.annexArray[0]" class="itemBg" />
      <div class="activityItemRight">
        <div class="activityItemRightTop">
          <span class="activityItemRightName">{{ item.activityName }}</span>
<!--          <span class="activityItemRightType">{{ item.releaseStatus==='1'?'已发布':item.releaseStatus==='2'?'已下架':'未发布' }}</span>-->
        </div>
        <div class="canyu">{{item.registrationNumbers}}人参与</div>
        <div class="activityItemRightBottom">
          <div class="shoucang" @tap.stop="clickColl(index)">
            <img :src="item.collectorsStatus==='2' ? heartSel : heart" class="scImg" /> 收藏
          </div>
          <div
            :class="item.statusName === '报名中' ? 'baoming' : 'baoming2'"
            @tap.stop="baoming(item)"
          >
            {{ item.statusName === '报名中'? "去报名" : "报名结束" }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserPower, getUserLocalStorageInfo, activityList, homeActivityClickCollect,getByCodes} from "@/js_sdk/http";
export default {
  name: "activity",
  props: {
    faMsg: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      heartSel: "https://www.idea-co-sf.com/gardenProduct/image/heartSel.png",
      heart: "https://www.idea-co-sf.com/gardenProduct/image/heart.png",
      activityList: [
        // {
        //   name: "互联网私募如何入门？",
        //   type: "培训活动",
        //   img: "https://www.idea-co-sf.com/gardenProduct/image/img1.png",
        //   isColl: true,
        //   isSign: true,
        // },
        // {
        //   name: "公募基金中的大数据啊啊啊？",
        //   type: "活动",
        //   img: "https://www.idea-co-sf.com/gardenProduct/image/img2.png",
        //   isColl: false,
        //   isSign: true,
        // },
        // {
        //   name: "年度小艾杯篮球赛开...？",
        //   type: "体育",
        //   img: "https://www.idea-co-sf.com/gardenProduct/image/img3.png",
        //   isColl: false,
        //   isSign: false,
        // },
      ],
      search: {
        // createdBy: getUserLocalStorageInfo().userId,
        pageNum: 1,
        pageSize: 10
      },
    };
  },
  onShow(){
  },
  mounted(){
    this.getList()
  },
  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){
            this.activityList = res.data.rows
          }
          // console.log(res)
        })
      },
      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 + '&url=' + item.annexArray[0]
            })
          }
        }
      },
      toDetail(item){
        console.log(this.faMsg)
        if (this.faMsg === 'home'){
          uni.navigateTo({
            url:'/pages/subPackages/parkActivity/index'
          })
        }
      }
  },
};
</script>

<style lang="scss">
.activity {
  margin: 0 auto;
  .activityItem {
    width: 686rpx;
    height: 216rpx;
    background: #f5f7fa;
    padding: 0 24rpx;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border-radius: 16rpx;
    margin: 12rpx 0;
    .itemBg {
      width: 220rpx;
      height: 160rpx;
    }
    .activityItemRight {
      display: flex;
      flex-direction: column;
      margin-left: 24rpx;
      .activityItemRightTop {
        width: 420rpx;
        display: flex;
        justify-content: space-between;
        .activityItemRightName {
          width: 280rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #18172a;
          font-size: 28rpx;
        }
        .activityItemRightType {
          padding: 2rpx 12rpx;
          background: rgba(3, 101, 249, 0.2);
          color: rgba(3, 101, 249, 1);
          border-radius: 4rpx;
          font-size: 24rpx;
        }
      }
      .canyu {
        font-size: 28rpx;
        color: rgba(102, 102, 102, 1);
        margin: 14rpx 0;
      }
      .activityItemRightBottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .shoucang {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          color: rgba(141, 146, 155, 1);
          .scImg {
            width: 32rpx;
            height: 28rpx;
            margin-right: 8rpx;
          }
        }
        .baoming {
          width: 160rpx;
          height: 60rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;
          background: linear-gradient(316deg, #84aaff 0%, #0365f9 100%);
          border-radius: 32rpx;
          font-size: 28rpx;
          color: white;
        }
        .baoming2 {
          width: 160rpx;
          height: 60rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;
          background: rgba(226, 232, 239, 1);
          border-radius: 32rpx;
          font-size: 28rpx;
          color: rgba(141, 146, 155, 1);
        }
      }
    }
  }
}
</style>