settle_down_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>