MoeNovaClient/pages/crowdFunding/projectUpdateDetails.vue

<template>
  <view class="project-update-details">
    <view class="custom-navbar" :style="navBgStyle">
      <view class="navbar-left scale-tap" @click="goBack">
        <image src="@/static/crowdFunding/back.png" mode="widthFix"></image>
      </view>
      <view class="navbar-center one-omit" style="max-width: 70vw" :style="{ opacity: navBgOpacity }">
        {{ datails.title }}
      </view>
      <view class="navbar-right scale-tap" @click="showShare = true">
        <image src="@/static/crowdFunding/share.png" mode="widthFix"></image>
      </view>
    </view>
    <image class="top-img" :src="datails.image" mode="widthFix"></image>
    <view class="update-info">
      <view class="update-title-row">
        <text class="update-title">· 第{{ datails.numb }}次更新</text>
        <text class="update-time">{{ datails.create_time }}</text>
      </view>
      <view class="update-user-row">
        <image class="user-avatar" :src="author.avator"></image>
        <text class="user-nickname">{{ author.nickname }}</text>
      </view>
    </view>
    <view class="content">
      <uv-parse :content="datails.content" :selectable="true"></uv-parse>
    </view>

    <!-- 分享弹窗 -->
    <SharePopup :visible="showShare" :userId="0" :share-title="shareTitle" :share-desc="shareDesc" :share-img="shareImg"
      view="crowdfundingDetails" @close="showShare = false" :isReportContent="true" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      navBgOpacity: 0, 
      content: ` `,
      datails: {},
      author: {},
      showShare: false,
      shareTitle: '【Woh】灯塔 塔罗牌 治愈风泛传特系',
      shareDesc: '快来支持这个有趣的众筹项目吧！',
      shareImg: require('@/static/crowdFunding/top-img.png'),
    };
  },
  computed: {
    navBgStyle() {
      return {
        id: 0,
        background: `rgba(255,255,255,${this.navBgOpacity})`,
        transition: "background 0.3s",
      };
    },
  },
  onLoad(options) {
    this.id = options.id
    this.getDetails()
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    getDetails() {
      uni.request({
        url: this.$apiHost + '/crowdfund/article/detail',
        method: 'GET',
        data: {
          id: this.id,
          uuid: getApp().globalData.uuid,
          skey: getApp().globalData.skey

        },
        success: (res) => {
          console.log('获取到详情数据', res.data.data);

          if (res.data && res.data.success === 'yes' && res.data.data) {
            this.datails = res.data.data

          }
        }
      });
      uni.request({
        url: this.$apiHost + '/crowdfund/detail',
        method: 'GET',
        data: {
          id: this.projectId,
          uuid: getApp().globalData.uuid,
          skey: getApp().globalData.skey

        },
        success: (res) => {
          if (res.data && res.data.success === 'yes' && res.data.data) {
            this.author = {
              "id": res.data.data.creator_id,
              "nickname": res.data.data.creator_nickname,
              "avator": res.data.data.creator_avatar,
            }
            // 可根据接口返回字段设置isFavorite等
          }
        }
      });
    }
  },
  onPageScroll(e) {
    const threshold = this.swiperHeight || uni.upx2px(400); // 优先用实际高度
    let opacity = 0;
    if (e.scrollTop > 0) {
      opacity = Math.min(e.scrollTop / threshold, 1);
    }
    this.navBgOpacity = opacity;
  },
};
</script>

<style scoped lang="scss">
.project-update-details {
  min-height: 100vh;
  padding-bottom: 20vh;

  /* 自定义导航栏样式 */
  .custom-navbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: calc(90rpx + var(--status-bar-height));
    padding: 0 20rpx;
    position: fixed;
    top: 0;
    z-index: 100;
    padding: 12rpx 24rpx;
    padding-top: calc(var(--status-bar-height) + 12rpx);
    background: transparent;
    transition: background 0.3s;

    image {
      width: 64rpx;
      height: 64rpx;
    }
  }

  .top-img {
    width: 100%;
  }

  .update-info {
    background: #fff;
    padding: 32rpx 32rpx 0 32rpx;

    .update-title-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24rpx;

      .update-title {
        font-size: 26rpx;
        color: #222;
      }

      .update-time {
        font-size: 24rpx;
        color: #bdbdbd;
      }
    }

    .update-user-row {
      display: flex;
      align-items: center;

      .user-avatar {
        width: 48rpx;
        height: 48rpx;
        border-radius: 50%;
        margin-right: 16rpx;
      }

      .user-nickname {
        font-size: 26rpx;
        color: #222;
        font-weight: 500;
      }
    }
  }

  .content {
    padding: 42rpx 28rpx;
  }
}
</style>