product_wx/pages/index/components/activity.vue

<template>
  <div class="activity">
    <div v-for="(item, index) in activityList" class="activityItem">
      <img :src="item.img" class="itemBg" />
      <div class="activityItemRight">
        <div class="activityItemRightTop">
          <span class="activityItemRightName">{{ item.name }}</span>
          <span class="activityItemRightType">{{ item.type }}</span>
        </div>
        <div class="canyu">36人参与</div>
        <div class="activityItemRightBottom">
          <div class="shoucang" @click="clickColl(index)">
            <img :src="item.isColl ? heartSel : heart" class="scImg" /> 收藏
          </div>
          <div
            :class="item.isSign ? 'baoming' : 'baoming2'"
            @click="baoming(item)"
          >
            {{ item.isSign ? "去报名" : "报名结束" }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserPower, getUserLocalStorageInfo } from "@/js_sdk/http";
export default {
  name: "activity",
  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,
        },
      ],
    };
  },
  methods: {
    clickColl(index) {
      // console.log(index)
      this.activityList[index].isColl = !this.activityList[index].isColl;
      // item.isColl = !item.isColl
    },
    baoming(item) {
      if (item.isSign) {
        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("用户点击取消");
              }
            },
          });
        }
      }
    },
  },
};
</script>

<style lang="scss">
.activity {
  .activityItem {
    width: 702rpx;
    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>