HSW_WX/pages/subPackages/parkActivities/index.vue

<template>
  <div class="announcement">
    <div class="tap-part">
      <div class="tips-list">
        <div :class="[
          'tip-item',
          search.activityType == item.value ? 'active' : '',
        ]" v-for="(item, index) in tipList" :key="index" @click="selectChange(item.value)">
          {{ item.label }}
        </div>
      </div>

      <div class="card-news-list">
        <div class="detail-card shadow-radius news-card" v-for="(item, index) in activityList" :key="index">
          <div class="image" v-if="item.annexArray">
            <img @click="getDetail(item)" style="height: 8rem" :src="item.annexArray[0]" alt="" />
          </div>
          <div class="info-part">
            <p class="tit" @click="getDetail(item)">{{ item.activityName }}</p>
            <div class="bottom">
              <div class="left">
                <span class="normal-tip by y-bg" v-if="item.registrationStatus === '1'">报名中</span>
                <span class="normal-tip by h-bg" v-else>报名已结束</span>
                <!-- <span
                  class="normal-tip yd d-bg"
                  @click.stop="noThing"
                  v-if="item.registrationStatus === '1'"
                  >活动风采</span
                > -->
                <span class="normal-tip yd z-bg" @click.stop="getStyle(item)" v-if="
                  item.registrationStatus === '2' && item.styleStatus === '1'
                ">活动风采</span>
              </div>

              <div class="right">
                <div class="num">{{ item.partakeNumber ? item.partakeNumber : 0 }}人参与</div>
                <div class="icon-collect" @click.stop="changeCollectorsStatus(item)">
                  <i class="iconfont icon-wujiaoxingxingxingshoucangdianji blue"
                    v-if="item.collectorsStatus === '2'"></i>
                  <i class="iconfont icon-wujiaoxingxingxingshoucangdianji" v-else></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserLocalStorageInfo, getByCodes } from "@/js_sdk/http";
// import { ImagePreview, Toast } from "vant";

import { clickCollect, list, listRegisSignInfo } from "@/js_sdk/api_activity";
// import auth from "../../service/auth";
export default {
  name: "ParkActivities",
  //   mixins: [Base],
  data() {
    return {
      dic_key: ["activityType"],
      active: 0,
      userId: "",
      tipList: [],
      search: {
        activityType: "产业",
        userId: "",
        publishStatus: "2",
      },
      activityList: [],
      regisSignList: [],
    };
  },
  onLoad() {
    // this.userId = getUserLocalStorageInfo().user.id;
    this.userId = "";
    this.getByCodes();
  },

  methods: {
    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dic_key));
      let dic = this.$common.handleDicList(data);

      this.tipList = dic.activityType;
      console.log("this.tipList", this.tipList);
      this.getData();
      // this.getRegisSignInfo();
    },
    // showImg(imgs) {
    //   ImagePreview(imgs);
    // },
    onTabsClick(val) {
      if (val == 0) {
        this.getData();
      } else {
        this.getRegisSignInfo();
      }
    },

    getData() {
      const _this = this;
      this.search.userId = this.userId;
      _this.activityList = [];
      list(this.search)
        .then((res) => {
          res.forEach((i) => {
            _this.activityList.push(i);
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    getRegisSignInfo() {
      const _this = this;
      listRegisSignInfo({ userId: this.userId, referenceType: "1" })
        .then((res) => {
          _this.regisSignList = res;
          _this.regisSignList.forEach((item) => {
            if (item.annexArray && item.annexArray.length) {
              const obj = item.annexArray[0];
              item.codeUrl =
                this.$constant.BASE_URI +
                "/wx/fileController/download/" +
                obj.substring(obj.lastIndexOf("/"), obj.length);
            }
            item.activityStartTime = this.$common.transBaseDateTime(
              item.activityStartTime
            );
          });
          console.log(_this.regisSignList);
        })
        .catch(() => { });
    },
    selectChange(value) {
      let tel = true;
      this.tipList.forEach((i) => {
        if (i.value === value) {
          if (i.active) {
            tel = false;
          } else {
            i.active = true;
          }
        } else {
          i.active = false;
        }
      });
      if (tel) {
        this.search.activityType = value;
        this.getData();
      }
    },
    getDetail(val) {
      console.log(val.id);
      uni.navigateTo({
        url: "/pages/subPackages/parkActivities/detail?id=" + val.id,
      });
      // this.$router.push({
      //   path: "/parkActivities/detail",
      //   query: {
      //     // 这里面是写需要传送的值
      //     id: val.id,
      //   },
      // });
    },
    getStyle(val) {
      console.log(val.id);
      uni.navigateTo({
        url: "/pages/subPackages/parkActivities/style?id=" + val.id,
      });
    },
    noThing() {
      // Toast('活动处于报名中')
      console.log("无效点击");
    },
    changeCollectorsStatus(val) {
      if (val.collectorsStatus === "2") {
        const _this = this;
        clickCollect({
          id: val.id,
          userId: auth.currUser().id,
          collectorsStatus: "1",
        }).then((res) => {
          _this.getData();
          _this.getRegisSignInfo();
        });
      } else {
        const _this = this;
        clickCollect({
          id: val.id,
          userId: auth.currUser().id,
          collectorsStatus: "2",
        }).then((res) => {
          _this.getData();
          _this.getRegisSignInfo();
        });
      }
    },
  },
};
</script>

<style lang="scss" type="text/scss" scoped>
.news-card {
  background: white;
  padding: 10rpx 30rpx;
  border-radius: 20px;

  .image {
    font-size: 0;

    img {
      width: 100%;
    }
  }

  .info-part {
    .tit {
      font-size: 24rpx;
      color: #666666;
      margin: 25rpx 0;
    }

    .top {
      @include flex;
      height: 75rpx;

      .text {
        font-size: 24rpx;
        color: #666666;
      }

      .tip-grid-bg {
        padding: 0 35rpx;
        font-size: 20rpx;
        line-height: 42rpx;
      }
    }

    .bottom {
      @include flex;

      .left {
        @include flex;

        span {
          margin-right: 10rpx;
        }

        i {
          font-size: 24rpx;
          color: rgba(102, 0, 255, 1);
        }
      }

      .right {
        @include flex;

        .num {
          font-size: 24rpx;
          color: #333333;
          margin-right: 15rpx;
        }
      }
    }
  }
}

.announcement {
  box-sizing: border-box;

  .tap-part {
    margin-top: 10rpx;
    height: calc(100vh - 10rpx);

    .van-tabs {
      height: 100%;
    }

    .info-list {
      height: calc(100vh - 92rpx);
      background-color: #fff;
      padding: 0 20rpx;
      overflow-y: auto;
    }
  }
}

//头部标签
.tips-list {
  margin-top: 20rpx;
  @include flex;
  flex-wrap: wrap;

  .tip-item {
    width: 120rpx;
    margin: 0 15rpx 20rpx;
    text-align: center;
    line-height: 40rpx;
    font-size: 24rpx;
    color: #fff;

    border-radius: 4rpx;
    background-color: rgba(215, 215, 215, 1);
  }

  .active {
    background-color: rgba(102, 0, 255, 1);
  }
}

.card-news-list {
  padding: 20rpx 20rpx;

  .news-card {
    margin-bottom: 20rpx;
  }

  .record-card {
    margin-bottom: 10rpx;
    height: 346rpx;
    background-color: #fff;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    @include flex;

    .left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;

      img {
        width: 244rpx;
      }

      .text {
        margin-bottom: 10rpx;
        text-align: center;
        font-size: 16rpx;
        color: #666666;
      }
    }

    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-align: center;
      font-size: 24rpx;
      height: 100%;
      color: #666666;
      padding-left: 100rpx;

      .title {
        font-weight: 700;
        margin-top: 20rpx;
      }

      .time {}

      .add {
        p {
          word-break: break-word;
        }
      }

      .bottom {
        display: flex;
        justify-content: flex-end;

        p {
          width: 80rpx;
          text-align: center;
        }
      }
    }
  }
}
</style>