112 lines
2.3 KiB
Vue
112 lines
2.3 KiB
Vue
<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>
|