wish/wishing-tree-h5/src/views/WishDetailView.vue

<template>
  <div class="wish-detail-page">
    <van-nav-bar title="愿望详情" left-text="返回" left-arrow @click-left="$router.back()" />

    <div v-if="wish" class="wish-detail">
      <div class="wish-content-box">
        <p class="wish-text">{{ wish.content }}</p>
      </div>

      <div class="wish-images-box" v-if="wish.images?.length">
        <van-image
          v-for="(img, i) in wish.images"
          :key="i"
          :src="img"
          width="100%"
          fit="contain"
          radius="8"
          style="margin-bottom: 8px"
        />
      </div>

      <div class="wish-tags-box" v-if="wish.tags?.length">
        <van-tag v-for="t in wish.tags" :key="t" plain type="primary" size="medium">
          {{ t }}
        </van-tag>
      </div>

      <div class="wish-meta-box">
        <div class="meta-item">
          <span class="meta-label">许愿树</span>
          <span class="meta-value">{{ wish.treeName }}</span>
        </div>
        <div class="meta-item">
          <span class="meta-label">地点</span>
          <span class="meta-value">{{ wish.address }}</span>
        </div>
        <div class="meta-item">
          <span class="meta-label">时间</span>
          <span class="meta-value">{{ wish.createdAt }}</span>
        </div>
        <div class="meta-item">
          <span class="meta-label">可见性</span>
          <span class="meta-value">{{ wish.isPublic ? '公开' : '仅自己可见' }}</span>
        </div>
      </div>

      <div class="wish-actions">
        <van-button icon="good-job-o" type="default" round @click="handleLike">
          祝福 {{ wish.likes }}
        </van-button>
        <van-button
          v-if="isOwner"
          icon="delete-o"
          type="danger"
          round
          plain
          @click="handleDelete"
        >
          删除
        </van-button>
      </div>
    </div>

    <van-loading v-else class="loading" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showConfirmDialog, showSuccessToast } from 'vant'
import { useUserStore } from '@/stores/user'
import { fetchWishDetail, removeWish, toggleLikeWish } from '@/api/wish'
import type { Wish } from '@/mock/data'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const wish = ref<Wish | null>(null)

const isOwner = computed(() => wish.value?.userId === userStore.phone)

async function handleLike() {
  if (!wish.value) return
  const likes = await toggleLikeWish(wish.value.id)
  wish.value.likes = likes
  showSuccessToast('已送上祝福 ❤')
}

async function handleDelete() {
  if (!wish.value) return
  await showConfirmDialog({ title: '确定删除这个愿望吗？', message: '删除后不可恢复' })
  await removeWish(wish.value.id, userStore.phone)
  showSuccessToast('愿望已删除')
  router.replace('/my-wishes')
}

onMounted(async () => {
  const id = Number(route.params.id)
  wish.value = await fetchWishDetail(id)
})
</script>

<style scoped>
.wish-detail-page {
  min-height: 100vh;
  background: #f7f8fa;
}
.wish-detail {
  padding: 12px;
}
.wish-content-box {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 12px;
}
.wish-text {
  font-size: 17px;
  line-height: 1.8;
  white-space: pre-wrap;
}
.wish-images-box {
  margin-bottom: 12px;
}
.wish-tags-box {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 4px;
  margin-bottom: 12px;
}
.wish-meta-box {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}
.meta-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
}
.meta-label {
  color: #999;
}
.meta-value {
  color: #333;
}
.wish-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 20px 0;
}
.loading {
  margin: 100px auto;
}
</style>