gubersail-wechat/pages/home/story/detail.vue

<template>
  <view class="story-detail-container">
    <image :src="detail.titleImg" class="detail-img" mode="widthFix"/>
    <view class="detail-content">
      <view class="detail-title">{{ detail.title }}</view>
      <view class="detail-user">
        <image :src="detail.userAvatar" class="avatar"/>
        <text class="username">{{ detail.userName }}</text>
        <view class="likes" @click="toggleLike">
          <text class="icon-heart">{{ detail.liked ? '❤️' : '♡' }}</text>
          <text class="like-number">{{ detail.likes }}</text>
        </view>
      </view>
      <view class="detail-desc">{{ detail.content }}</view>
    </view>
  </view>
</template>

<script>
import {getStoryDetail, likeStory} from '@/api/home/index.js'

export default {
  data() {
    return {
      detail: {
        title: '',
        content: '',
        titleImg: '',
        userAvatar: '',
        userName: '',
        likes: 0,
        liked: false
      }
    }
  },
  onLoad(options) {
    const {id} = options;
    if (id) {
      this.fetchDetail(decodeURIComponent(id));
    }
  },
  methods: {
    toggleLike() {
      this.detail.liked = !this.detail.liked
      likeStory(this.detail.id, (this.detail.liked ? 1 : 0));
    },
    async fetchDetail(id) {
      try {
        const res = await getStoryDetail(id);
        this.detail = res.data || {};
      } catch (err) {
        uni.showToast({title: '加载失败', icon: 'none'});
        setTimeout(() => uni.navigateBack(), 1500);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.story-detail-container {
  padding: 20rpx;
  background-color: #fff;
}

.detail-img {
  width: 100%;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.detail-content {
  padding: 0 10rpx;
}

.detail-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #03803B;
  margin-bottom: 20rpx;
}

.detail-user {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

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

.username {
  font-size: 28rpx;
  color: #666;
}

.likes {
  display: flex;
  align-items: center;
  gap: 6rpx;
  font-size: 28rpx;
  color: #999;
  margin-left: auto;
}

.icon-heart {
  font-size: 36rpx;
  color: #ff4c4c;
  line-height: 1;
}

.like-number {
  font-size: 28rpx;
  color: #999;
}

.detail-desc {
  font-size: 28rpx;
  line-height: 1.6;
  color: #333;
  white-space: pre-wrap; /* 保留换行 */
}
</style>