|
|
@@ -0,0 +1,97 @@
|
|
|
+<template>
|
|
|
+ <view class="container" :style="{ '--font-scale': fontScale }">
|
|
|
+ <view v-if="loading && messages.length === 0" class="state-box">
|
|
|
+ <text class="state-text">加载中...</text>
|
|
|
+ </view>
|
|
|
+ <view v-else-if="messages.length === 0" class="state-box">
|
|
|
+ <text class="state-icon">💬</text>
|
|
|
+ <text class="state-text">暂无咨询消息</text>
|
|
|
+ </view>
|
|
|
+ <view v-else class="msg-list">
|
|
|
+ <view class="msg-item" v-for="msg in messages" :key="msg.id">
|
|
|
+ <view class="msg-head">
|
|
|
+ <text class="msg-teacher">{{ msg.teacherName || '规划师' }}</text>
|
|
|
+ <text class="msg-status" :class="msg.status === 'replied' ? 'st-replied' : 'st-pending'">
|
|
|
+ {{ msg.status === 'replied' ? '已回复' : '待回复' }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="msg-body">
|
|
|
+ <text class="msg-label">我的咨询</text>
|
|
|
+ <text class="msg-content">{{ msg.content }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="msg-reply" v-if="msg.replyContent">
|
|
|
+ <text class="msg-label">规划师回复</text>
|
|
|
+ <text class="msg-content reply">{{ msg.replyContent }}</text>
|
|
|
+ </view>
|
|
|
+ <text class="msg-time">{{ formatTime(msg.createdAt) }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getMyGuideMessages } from '../../utils/api.js'
|
|
|
+import { parseDate } from '../../utils/format.js'
|
|
|
+import fontScaleMixin from '@/mixins/font-scale.js'
|
|
|
+
|
|
|
+export default {
|
|
|
+ mixins: [fontScaleMixin],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: true,
|
|
|
+ messages: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.loadMessages()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async loadMessages() {
|
|
|
+ try {
|
|
|
+ var res = await getMyGuideMessages()
|
|
|
+ this.messages = (res && res.code === 200 && res.data instanceof Array) ? res.data : []
|
|
|
+ } catch (e) {
|
|
|
+ this.messages = []
|
|
|
+ } finally {
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ formatTime(dateStr) {
|
|
|
+ if (!dateStr) return ''
|
|
|
+ var d = parseDate(dateStr)
|
|
|
+ if (!d) return ''
|
|
|
+ var now = new Date()
|
|
|
+ var diff = now - d
|
|
|
+ var minutes = Math.floor(diff / 60000)
|
|
|
+ if (minutes < 1) return '刚刚'
|
|
|
+ if (minutes < 60) return minutes + '分钟前'
|
|
|
+ var hours = Math.floor(minutes / 60)
|
|
|
+ if (hours < 24) return hours + '小时前'
|
|
|
+ var days = Math.floor(hours / 24)
|
|
|
+ if (days === 1) return '昨天'
|
|
|
+ if (days < 7) return days + '天前'
|
|
|
+ return (d.getMonth() + 1) + '月' + d.getDate() + '日'
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.container { min-height: 100vh; padding: $uni-space-page; background: $facade-fill-2; }
|
|
|
+.state-box { display: flex; flex-direction: column; align-items: center; padding: 120rpx 0; }
|
|
|
+.state-icon { font-size: calc(80rpx * var(--font-scale, 1)); margin-bottom: 20rpx; }
|
|
|
+.state-text { font-size: calc(26rpx * var(--font-scale, 1)); color: $facade-text-muted; }
|
|
|
+.msg-list { display: flex; flex-direction: column; gap: 20rpx; }
|
|
|
+.msg-item { background: $app-surface; border-radius: 20rpx; padding: 28rpx; }
|
|
|
+.msg-head { display: flex; align-items: center; justify-content: space-between; }
|
|
|
+.msg-teacher { font-size: calc(30rpx * var(--font-scale, 1)); font-weight: bold; color: $facade-text-strong; }
|
|
|
+.msg-status { font-size: calc(22rpx * var(--font-scale, 1)); padding: 4rpx 16rpx; border-radius: 20rpx; }
|
|
|
+.st-replied { color: $status-success; background: rgba(16,185,129,0.12); }
|
|
|
+.st-pending { color: $status-warning; background: rgba(251,191,36,0.14); }
|
|
|
+.msg-body { margin-top: 16rpx; }
|
|
|
+.msg-label { font-size: calc(22rpx * var(--font-scale, 1)); color: $facade-text-muted; display: block; margin-bottom: 6rpx; }
|
|
|
+.msg-content { font-size: calc(28rpx * var(--font-scale, 1)); color: $facade-text-body; display: block; line-height: 1.6; }
|
|
|
+.msg-reply { margin-top: 16rpx; padding: 16rpx; background: $facade-fill-ghost; border-radius: 12rpx; }
|
|
|
+.msg-content.reply { color: $facade-text-strong; }
|
|
|
+.msg-time { font-size: calc(22rpx * var(--font-scale, 1)); color: $facade-text-muted; display: block; margin-top: 12rpx; }
|
|
|
+</style>
|