teaching-uniapp/components/teaching-case/teaching-case.vue

<template>
  <view class="teaching_case" @click="gotoTeDetail">
    <view class="img cell-img">
      <!-- <slot name="img"></slot> -->
      <image :src="classList.img" v-if="!item.btn" mode="aspectFill"></image>
      <image :src="activeList.img" v-else mode="aspectFill"></image>
    </view>

    <view class="right">
      <view class="">
        <view class="title">
          <view v-if="!item.btn" class="tag bqZ-font">类型</view>
          <view v-else class="tag bqZ-font">类型</view>

          <text class="btn-font" v-if="!item.btn" style="">{{
            classList.className
          }}</text>
          <text class="three-font" v-else>{{ activeList.className }}</text>
        </view>

        <view v-if="!item.btn" class="introduce fwb-font">
          {{ classList.intro }}
        </view>
        <view v-else class="introduce fwb-font">
          {{ activeList.intro }}
        </view>
      </view>

      <view class="operate" v-if="!item.btn">
        <view class="left">
          <view class="opr" style="padding-right: 25rpx">
            <view class="icon">
              <image
                src="http://43.139.158.220:5007/img/static/yym/Star 1 (Stroke).png"
                style="width: 28rpx; height: 26rpx"
                mode="aspectFill"
              ></image>
            </view>
            <text class="fz-font">收藏</text>
          </view>
          <view class="opr">
            <view class="icon">
              <image
                src="http://43.139.158.220:5007/img/static/yym/Vector (Stroke).png"
                style="width: 22rpx; height: 26rpx"
                mode="aspectFill"
              ></image>
            </view>
            <text class="fz-font">订阅</text>
          </view>
        </view>
        <view class="">
          <button
            class="btn sBtn-font"
            disableEventPropagation="true"
            @click.stop="join"
          >
            立即参与
          </button>
        </view>
      </view>
      <view class="operate" v-else>
        <view class="left">
          <view class="price num-font"
            ><text class="three-font">￥</text> 188</view
          >
          <view class="pernum fz-font">已报名{{ activeList.count }}人</view>
        </view>
        <view class="">
          <button class="btn sBtn-font" @click.stop="actApply">立即报名</button>
        </view>
      </view>
    </view>
    <!-- <view class="" style="height: 50rpx;width: 100%;background-color: #ffffff;"></view> -->
  </view>
</template>
<script>
export default {
  name: "teaching-case",
  props: {
    item: {
      type: Object,
      default() {
        return {
          btn: 0, //0教研列表 1活动列表
        };
      },
    },
    classList: {
      type: Object,
      default() {
        return [];
      },
    },
    activeList: {
      type: Object,
      default() {
        return [];
      },
    },
    indexId: {
      type: Number,
    },
  },
  data() {
    return {};
  },
  methods: {
    gotoTeDetail() {
      if (this.item.btn) {
        const value = uni.getStorageSync("login");
        if (value == 0) {
          uni.navigateTo({
            url: "/pages/login/login",
          });
        } else {
          const urls = [
            "https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1183",
            "https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1211",
            "https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1210",
            "https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1209",
          ];
          let index = this.indexId;
          if (index >= 0 && index < urls.length) {
            const url = urls[index];
            uni.navigateTo({
              url: "/pages/skipone/skipone?url=" + encodeURIComponent(url),
            });
          }
        }
      } else {
        const value = uni.getStorageSync("login");
        if (value == 0) {
          uni.navigateTo({
            url: "/pages/login/login",
          });
        } else {
          const urls = [
            "https://szptxnjys.yuketang.cn/pro/portal/about/szpt-99Q00351166273N",
            "https://szptxnjys.yuketang.cn/pro/portal/about/szpt-99Q00330324841N",
            "https://szptxnjys.yuketang.cn/pro/portal/about/szpt-99Q00231455802N",
            "https://szptxnjys.yuketang.cn/pro/portal/about/szpt-99Q00406339964N",
          ];
          let index = this.indexId;
          if (index >= 0 && index < urls.length) {
            const url = urls[index];
            uni.navigateTo({
              url: "/pages/skipone/skipone?url=" + encodeURIComponent(url),
            });
          }
        }
      }
    },
    join() {
      const value = uni.getStorageSync("login");
      if (value == 0) {
        uni.navigateTo({
          url: "/pages/login/login",
        });
        return 1;
      } else {
        const urls = [
          "https://szptxnjys.yuketang.cn/pro/portal/about/szpt-99Q00351166273N",
          "https://szptxnjys.yuketang.cn/pro/portal/about/szpt-99Q00330324841N",
          "https://szptxnjys.yuketang.cn/pro/portal/about/szpt-99Q00231455802N",
          "https://szptxnjys.yuketang.cn/pro/portal/about/szpt-99Q00406339964N",
        ];
        let index = this.indexId;
        if (index >= 0 && index < urls.length) {
          const url = urls[index];
          uni.navigateTo({
            url: "/pages/skipone/skipone?url=" + encodeURIComponent(url),
          });
        }
      }
    },
    actApply() {
      const value = uni.getStorageSync("login");
      if (value == 0) {
        uni.navigateTo({
          url: "/pages/login/login",
        });
        return 1;
      } else {
        const urls = [
          "https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1183",
          "https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1211",
          "https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1210",
          "https://szptxnjys.yuketang.cn/pro/portal/announcementdetail/1209",
        ];
        let index = this.indexId;
        if (index >= 0 && index < urls.length) {
          const url = urls[index];
          uni.navigateTo({
            url: "/pages/skipone/skipone?url=" + encodeURIComponent(url),
          });
        }
      }
    },
  },
};
</script>

<style lang="scss">
.teaching_case {
  display: flex;
  justify-content: space-between;
  // margin-bottom: 10px;
  background-color: #ffffff;
  padding: 20rpx 30rpx;

  // padding-bottom: 50rpx;
  .img {
    width: 160rpx;
    height: 160rpx;

    image {
      width: 100%;
      height: 100%;
      border-radius: 10rpx;
    }
  }

  .right {
    padding-left: 20rpx;
    flex: 1;
    // height: 300px;
    width: 100rpx;
    display: flex;
    flex-direction: column;
    // align-content: flex-end ;
    justify-content: space-between;
    // align-content: space-between;

    .title {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 15rpx;

      // margin-bottom: 10rpx;
      .tag {
        border: 1px #00b2b6 solid;
        flex-shrink: 0;
        letter-spacing: 2rpx;
        width: 64rpx;
        height: 32rpx;
        display: flex;
        white-space: nowrap;
        justify-content: center;
        align-items: center;
        border-radius: 4rpx;
        margin-right: 10rpx;
        color: #00b2b6;
        line-height: 32rpx;
        // border: 1px #00b2b6 solid;
        // font-size: 20rpx;
        // width: 94rpx;
        // display: flex;
        // height: 36rpx;
        // white-space: nowrap;
        // justify-content: center;
        // align-items: center;
        // // padding: 4px 12px 4px 12px;
        // border-radius: 5rpx;
        // margin-right: 10rpx;
        // color: #00b2b6;
      }

      text {
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .introduce {
      // font-size: 28rpx;
      color: #a7a7a7;
      // padding: 20rpx 0;
      // width: 560rpx;
      height: 40rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .operate {
      display: flex;
      justify-content: space-between;
      // align-items: baseline;
      align-items: flex-end;

      .left {
        display: flex;
        // justify-content: space-between;
        // align-items: center;
        align-items: baseline;

        // width: 200rpx;
        .opr {
          display: flex;
          align-items: center;

          .icon {
            width: 32rpx;
            height: 32rpx;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          text {
            padding-left: 3rpx;
            color: #666666;
          }
        }

        .pernum {
          color: #666666;

          // font-size: 30rpx;
        }

        .price {
          // font-size: 40rpx;
          font-weight: bold;
          color: #f8a551;
          padding-right: 10rpx;
        }
      }

      .btn {
        z-index: 5;
        border: none;
        padding: 0;
        text-align: center;
        // padding: 8px, 24px, 8px, 24px;
        background-color: rgba(48, 129, 232, 1);
        color: #fff;
        border-radius: 100rpx;
        float: right;
        width: 144rpx;
        height: 48rpx;
        line-height: 48rpx;
        letter-spacing: 1px;
      }
    }
  }
}
</style>