MoeNovaClient/components/card/card.vue

<template>
  <view class="waterfall-item" :style="{ width, ...customStyle }">
    <view
      class="waterfall-item__image"
      @click="goWork(item)"
      :style="{ width, backgroundColor: item.backgroundColor }"
    >
      <image
        :src="item.image"
        mode="widthFix"
        style="border-radius: 20rpx"
      ></image>
    </view>
    <view class="waterfall-item__ft">
      <view class="waterfall-item__ft__title">
        <text class="value" :style="{ color: textColor }">{{
          item.title
        }}</text>
      </view>
      <view class="waterfall-item__ft__desc" @click="goAuthor(item)">
        <view class="user">
          <image :src="item.avator" mode="aspectFill" class="avater"> </image>
          <text class="name" :style="{ color: textColor }">{{
            item.nickname
          }}</text>
        </view>
        <view class="like" @click="changeLike">
          <image
            class="like-icon"
            :src="
              isLike ? '/static/icon/icon-18.png' : '/static/icon/icon-19.png'
            "
            mode=""
          >
          </image>
          <text class="value" :style="{ color: textColor }">{{
            item.num_like
          }}</text>
        </view>
      </view>
      <view class="waterfall-item__ft__btn" v-if="false">
        <image
          class="waterfall-item__ft__btn__icon"
          src="@/static/zhHans-text-icon/text-10.png"
          mode=""
        >
        </image>
      </view>
    </view>
    <view class="waterfall-item__tips" v-if="findType != 'search'">
      <view class="item">
        <image
          class="look-icon"
          src="@/static/icon/icon-17.png"
          mode=""
        ></image>
        <text class="value" style="color: #fff">{{ item.num_view }}</text>
      </view>
      <view class="item" style="background-color: #1f1f1f">
        <text class="value" style="color: #acf934">精选</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "card",
  props: {
    width: {
      type: String,
      default: "",
    },
    item: {
      type: Object,
      default: () => ({}),
    },
    textColor: {
      type: String,
      default: "#ff0000",
    },
    customStyle: {
      type: Object,
      default: () => ({
        background: "#3F4141",
      }),
    },
    goLink: {
      type: String,
      default: "",
    },
    findType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isLike: false,
      isLiking: false,
      localLikeCount: 0,
    };
  },
  created() {
    this.isLike = this.item.is_like || false;
    this.localLikeCount = this.item.num_like || 0;
  },
  methods: {
    changeLike(e) {
      return;
      e && e.stopPropagation();

      if (this.isLiking) return;
      this.isLiking = true;

      const prevLikeState = this.isLike;
      const prevLikeCount = this.localLikeCount;

      this.isLike = !this.isLike;
      this.localLikeCount = this.isLike ? prevLikeCount + 1 : prevLikeCount - 1;
      this.item.num_like = this.localLikeCount;

      if (!getApp().globalData.uuid) {
        uni.showToast({
          title: "请先登录",
          icon: "none",
        });
        this.isLike = prevLikeState;
        this.localLikeCount = prevLikeCount;
        this.item.num_like = prevLikeCount;
        this.isLiking = false;
        return;
      }

      uni.request({
        url: this.$apiHost + "/Work/zanTA",
        data: {
          uuid: getApp().globalData.uuid,
          id: this.item.id,
        },
        header: {
          "content-type": "application/json",
          sign: getApp().globalData.headerSign,
        },
        success: (res) => {
          if (res.data.success === "yes") {
            uni.showToast({
              title: this.isLike ? "点赞成功" : "取消点赞",
              icon: "none",
            });
          } else {
            this.isLike = prevLikeState;
            this.localLikeCount = prevLikeCount;
            this.item.num_like = prevLikeCount;

            uni.showToast({
              title: res.data.str || "操作失败",
              icon: "none",
            });
          }
        },
        fail: (e) => {
          console.error("点赞失败:", e);
          this.isLike = prevLikeState;
          this.localLikeCount = prevLikeCount;
          this.item.num_like = prevLikeCount;

          uni.showToast({
            title: "网络请求失败",
            icon: "none",
          });
        },
        complete: () => {
          setTimeout(() => {
            this.isLiking = false;
          }, 500);
        },
      });
    },
    goWork(item) {
      var url = "/pages/index/workDetail?id=";
      if (this.goLink) {
        url = this.goLink;
      }
      console.log("goWork", this.goLink);

      // uni.$emit('check_login', () => {
      uni.navigateTo({
        url: url + item.id,
      });
      // })
    },
    goAuthor(item) {
      console.log("goAuthor", item);
      uni.$emit("check_login", () => {
        if (!item.userID) {
          return;
        }
        uni.navigateTo({
          url: "/pages/my/userHomepage?id=" + item.userID,
        });
      });
    },
  },
};
</script>

<style lang="scss">
.waterfall-item {
  margin-bottom: 20rpx;
  border-radius: 30rpx;
  position: relative;
  border-radius: 16rpx;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  // box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  
  &:active {
    transform: scale(0.98);
    box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.05);
  }

  // #ifndef APP-NVUE
  .waterfall-item__image {
    border-radius: 16rpx;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 28rpx 20rpx;
    transition: all 0.3s ease;

    &:active {
      opacity: 0.9;
    }

    image {
      width: 100%;
      height: 100%;
      transition: all 0.3s ease;
    }
  }

  // #endif
  .waterfall-item__tips {
    position: absolute;
    top: 10rpx;
    padding: 0rpx 10rpx;
    // #ifndef APP-NVUE
    box-sizing: border-box;
    // #endif
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    .item {
      // #ifndef APP-NVUE
      // #endif
      display: flex;
      flex-direction: row;
      align-items: center;
      background: rgba(0, 0, 0, 0.2);
      padding: 8rpx 14rpx;
      border-radius: 12rpx;

      .look-icon {
        width: 26rpx;
        height: 26rpx;
        margin-right: 10rpx;
      }

      .value {
        font-size: 20rpx;
      }
    }
  }

  .waterfall-item__ft {
    padding: 10rpx 20rpx;

    &__title {
      line-height: 48rpx;
      font-weight: 700;

      .value {
        font-size: 30rpx;
      }
    }

    &__desc {
      width: 100%;
      // #ifndef APP-NVUE
      display: flex;
      // #endif
      // #ifdef APP-NVUE
      // #endif
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin: 20rpx 0;

      .user {
        // #ifndef APP-NVUE
        display: flex;
        // #endif
        // #ifdef APP-NVUE
        flex-direction: row;
        // #endif
        align-items: center;

        .avater {
          width: 36rpx;
          height: 36rpx;
          border-radius: 18rpx;
          margin-right: 10rpx;
        }

        .name {
          font-size: 24rpx;
        }
      }

      .like {
        // #ifndef APP-NVUE
        display: flex;
        // #endif
        // #ifdef APP-NVUE
        flex-direction: row;
        // #endif
        align-items: center;

        .like-icon {
          width: 30rpx;
          height: 30rpx;
          margin-right: 10rpx;
        }

        .value {
          font-size: 24rpx;
        }
      }
    }

    &__btn {
      height: 65rpx;
      border-radius: 18px;
      background-image: linear-gradient(to bottom, #bffe9c, #aee75d);
      // #ifndef APP-NVUE
      background: linear-gradient(
        180deg,
        #bffe9c 0%,
        #aee75d 62%,
        #aee75d 100%
      );
      display: flex;
      // #endif
      justify-content: center;
      align-items: center;

      &__icon {
        width: 155rpx;
        height: 32rpx;
      }
    }
  }
}
</style>