增加喜喜 概念框架

pages-subpackage/xixi/components/xixi-diagnosis.vue

@@ -0,0 +1,111 @@
+<template>
+  <scroll-view class="panel-scroll" scroll-y>
+    <view v-if="!items.length" class="empty-wrap">
+      <text class="empty-title">暂无诊断结果</text>
+      <text class="empty-desc">请在「幸福相遇」中完成录音，并点击「分析录音」</text>
+    </view>
+    <view v-for="(row, idx) in items" :key="row.id" class="diag-card">
+      <view class="diag-head">
+        <text class="diag-label">诊断 {{ items.length - idx }}</text>
+        <text class="diag-time">{{ formatDate(row.createdAt) }}</text>
+      </view>
+      <text class="diag-body">{{ row.analysisText }}</text>
+    </view>
+  </scroll-view>
+</template>
+
+<script>
+const KEY = 'xixi_recordings';
+
+export default {
+  name: 'XixiDiagnosis',
+  props: {
+    refreshTick: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      items: [],
+    };
+  },
+  watch: {
+    refreshTick() {
+      this.load();
+    },
+  },
+  mounted() {
+    this.load();
+  },
+  methods: {
+    load() {
+      try {
+        const list = uni.getStorageSync(KEY);
+        const arr = Array.isArray(list) ? list : [];
+        this.items = arr.filter((r) => r && r.analysisText);
+      } catch (e) {
+        this.items = [];
+      }
+    },
+    formatDate(ts) {
+      const d = new Date(ts);
+      const p = (n) => (n < 10 ? '0' + n : '' + n);
+      return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.panel-scroll {
+  height: 100%;
+  box-sizing: border-box;
+  padding: 24rpx 28rpx 32rpx;
+}
+.empty-wrap {
+  padding: 80rpx 32rpx;
+  text-align: center;
+}
+.empty-title {
+  display: block;
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 16rpx;
+}
+.empty-desc {
+  font-size: 26rpx;
+  color: #888;
+  line-height: 1.6;
+}
+.diag-card {
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 28rpx;
+  margin-bottom: 24rpx;
+  box-shadow: 0 4rpx 24rpx rgba(233, 30, 140, 0.08);
+  border-left: 8rpx solid #ff6b9d;
+}
+.diag-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20rpx;
+}
+.diag-label {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #e91e8c;
+}
+.diag-time {
+  font-size: 24rpx;
+  color: #999;
+}
+.diag-body {
+  font-size: 28rpx;
+  color: #444;
+  line-height: 1.65;
+  white-space: pre-wrap;
+}
+</style>