medical-mall/pages/mall/consumer/message-detail.uvue

<template>
  <scroll-view class="message-detail-page" scroll-y>
    <view class="message-header">
      <text class="message-title">{{ message.title }}</text>
      <text class="message-time">{{ formatTime(message.created_at) }}</text>
    </view>

    <view class="message-content">
      <text class="content-text">{{ message.content }}</text>
    </view>

    <view v-if="message.link_url" class="message-action" @click="goToLink">
      <text class="action-text">查看详情</text>
      <text class="action-arrow">›</text>
    </view>

    <view v-if="message.icon_url" class="message-image">
      <image :src="message.icon_url" mode="widthFix" class="icon-image" />
    </view>

    <view v-if="extraInfo.length > 0" class="extra-info">
      <view v-for="(item, index) in extraInfo" :key="index" class="extra-item">
        <text class="extra-label">{{ item.label }}</text>
        <text class="extra-value">{{ item.value }}</text>
      </view>
    </view>
  </scroll-view>
</template>

<script setup lang="uts">
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { supabaseService } from '@/utils/supabaseService.uts'

type MessageType = {
  id: string
  type: string
  title: string
  content: string
  icon_url: string | null
  link_url: string | null
  extra_data: any | null
  created_at: string
}

type ExtraInfoItem = {
  label: string
  value: string
}

const message = ref<MessageType>({
  id: '',
  type: '',
  title: '',
  content: '',
  icon_url: null,
  link_url: null,
  extra_data: null,
  created_at: ''
})

const extraInfo = ref<ExtraInfoItem[]>([])

const formatLabel = (key: string): string => {
  if (key === 'share_code') return '分享码'
  if (key === 'product_name') return '商品名称'
  if (key === 'reward_amount') return '奖励金额'
  if (key === 'order_no') return '订单号'
  if (key === 'buyer_name') return '购买者'
  if (key === 'quantity') return '数量'
  return key
}

const parseExtraData = (data: any) => {
  extraInfo.value = []
  
  if (data == null) return
  
  try {
    let dataObj: UTSJSONObject | null = null
    if (typeof data === 'string') {
      const parsed = JSON.parse(data as string)
      if (parsed != null) {
        dataObj = parsed as UTSJSONObject
      }
    } else if (data instanceof UTSJSONObject) {
      dataObj = data
    } else {
      dataObj = JSON.parse(JSON.stringify(data)) as UTSJSONObject
    }
    
    if (dataObj != null) {
      const keys = UTSJSONObject.keys(dataObj)
      for (let i = 0; i < keys.length; i++) {
        const key = keys[i] as string
        const value = dataObj.get(key)
        if (value != null) {
          const item: ExtraInfoItem = {
            label: formatLabel(key),
            value: `${value}`
          }
          extraInfo.value.push(item)
        }
      }
    }
  } catch (e) {
    console.error('解析extra_data失败:', e)
  }
}

const loadMessage = async (id: string) => {
  try {
    const notifications = await supabaseService.getUserNotifications(null)
    const found = notifications.find(n => n.id === id)
    
    if (found != null) {
      const extraData = found.extra_data
      const msg: MessageType = {
        id: found.id,
        type: found.type,
        title: found.title,
        content: found.content,
        icon_url: found.icon_url,
        link_url: found.link_url,
        extra_data: extraData,
        created_at: found.created_at ?? ''
      }
      message.value = msg

      if (extraData != null) {
        parseExtraData(extraData)
      }
    }
  } catch (e) {
    console.error('加载消息失败:', e)
  }
}

const formatTime = (timeStr: string): string => {
  if (timeStr == null || timeStr === '') return ''
  const date = new Date(timeStr)
  const y = date.getFullYear()
  const m = (date.getMonth() + 1).toString().padStart(2, '0')
  const d = date.getDate().toString().padStart(2, '0')
  const hh = date.getHours().toString().padStart(2, '0')
  const mm = date.getMinutes().toString().padStart(2, '0')
  return `${y}-${m}-${d} ${hh}:${mm}`
}

const goToLink = () => {
  const url = message.value.link_url
  if (url != null && url !== '') {
    if (url.startsWith('/pages/')) {
      uni.navigateTo({ url: url })
    } else {
      uni.setClipboardData({
        data: url,
        success: () => {
          uni.showToast({ title: '链接已复制', icon: 'success' })
        }
      })
    }
  }
}

onLoad((options) => {
  if (options != null) {
    const idVal = options['id']
    if (idVal != null) {
      loadMessage(idVal as string)
    }
  }
})
</script>

<style>
.message-detail-page {
  flex: 1;
  height: 100%;
  background-color: #f5f5f5;
}

.message-header {
  background-color: white;
  padding: 20px 16px;
  margin-bottom: 8px;
}

.message-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  display: flex;
  margin-bottom: 10px;
}

.message-time {
  font-size: 13px;
  color: #999;
}

.message-content {
  background-color: white;
  padding: 16px;
  margin-bottom: 8px;
}

.content-text {
  font-size: 15px;
  color: #333;
  line-height: 1.8;
}

.message-action {
  background-color: white;
  padding: 16px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.action-text {
  font-size: 15px;
  color: #ff6b35;
}

.action-arrow {
  font-size: 18px;
  color: #ccc;
}

.message-image {
  background-color: white;
  padding: 16px;
  margin-bottom: 8px;
}

.icon-image {
  width: 100%;
  border-radius: 8px;
}

.extra-info {
  background-color: white;
  padding: 16px;
}

.extra-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
}

.extra-item:last-child {
  border-bottom: none;
}

.extra-label {
  font-size: 14px;
  color: #666;
}

.extra-value {
  font-size: 14px;
  color: #333;
}
</style>