503 lines
13 KiB
Vue
503 lines
13 KiB
Vue
<template>
|
||
<view class="page">
|
||
<!-- #ifdef APP -->
|
||
<statusBar></statusBar>
|
||
<!-- #endif -->
|
||
|
||
<uni-nav-bar
|
||
:fixed="true"
|
||
:statusBar="true"
|
||
:border="false"
|
||
:title="navTitle"
|
||
:leftIcon="viewMode === 'detail' ? 'left' : ''"
|
||
@clickLeft="onNavLeftClick"
|
||
color="#333"
|
||
backgroundColor="#FFFFFF"
|
||
/>
|
||
|
||
<view class="content">
|
||
<!-- 首页：与 AI 分析一致的功能分区 + 卡片网格 -->
|
||
<scroll-view
|
||
v-show="viewMode === 'home'"
|
||
class="content-scroll"
|
||
scroll-y="true"
|
||
:style="{ top: computedContentTop || contentTop, bottom: contentBottom || '96rpx' }"
|
||
>
|
||
<view class="category-section two-column">
|
||
<view class="category-header">
|
||
<text class="category-icon">💕</text>
|
||
<text class="category-title">恋爱自画像</text>
|
||
</view>
|
||
<view class="function-grid">
|
||
<view class="function-item" @click="openDetail('who')">
|
||
<view class="function-icon">🪞</view>
|
||
<text class="function-name">我是谁</text>
|
||
<text class="function-desc">自我描述与对另一半的期待</text>
|
||
</view>
|
||
<view class="function-item" @click="openDetail('meet')">
|
||
<view class="function-icon">🌷</view>
|
||
<text class="function-name">约会准备</text>
|
||
<text class="function-desc">关系阶段与本次见面目标</text>
|
||
</view>
|
||
</view>
|
||
<view class="advice-full" @click="openDetail('advice')">
|
||
<view class="advice-full-inner">
|
||
<view class="function-icon advice-full-icon">💡</view>
|
||
<view class="advice-full-texts">
|
||
<text class="function-name">约会建议</text>
|
||
<text class="function-desc">根据「我是谁」与「约会准备」生成今日参考</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="category-section two-column">
|
||
<view class="category-header">
|
||
<text class="category-icon">💬</text>
|
||
<text class="category-title">相处与复盘</text>
|
||
</view>
|
||
<view class="function-grid">
|
||
<view class="function-item" @click="openDetail('record')">
|
||
<view class="function-icon">🎉</view>
|
||
<text class="function-name">幸福相遇</text>
|
||
<text class="function-desc">录音记录与智能分析</text>
|
||
</view>
|
||
<view class="function-item" @click="openDetail('diag')">
|
||
<view class="function-icon">📋</view>
|
||
<text class="function-name">诊断结果</text>
|
||
<text class="function-desc">查看历史诊断与建议</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 详情：固定区域 + 子组件自带 scroll-view，避免双层 scroll 嵌套 -->
|
||
<view
|
||
v-show="viewMode === 'detail'"
|
||
class="detail-wrap"
|
||
:style="{ top: computedContentTop || contentTop, bottom: contentBottom || '96rpx' }"
|
||
>
|
||
<view v-show="detailKey === 'who'" class="detail-panel">
|
||
<XixiWhoAmI @saved="onFormSaved" />
|
||
</view>
|
||
<view v-show="detailKey === 'meet'" class="detail-panel">
|
||
<XixiFirstMeeting @saved="onFormSaved" />
|
||
</view>
|
||
<view v-show="detailKey === 'record'" class="detail-panel">
|
||
<XixiRecord @recordings-changed="onRecordingsChanged" />
|
||
</view>
|
||
<view v-show="detailKey === 'diag'" class="detail-panel">
|
||
<XixiDiagnosis :refresh-tick="diagTick" />
|
||
</view>
|
||
<view v-show="detailKey === 'advice'" class="detail-panel">
|
||
<XixiDatingAdvice :refresh-tick="adviceRefreshTick" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// #ifdef APP
|
||
import statusBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar';
|
||
// #endif
|
||
|
||
// 微信小程序：由 pages.json 的 componentPlaceholder 注册分包组件（分包异步化）
|
||
// H5 / App 等：须显式 import
|
||
// #ifndef MP-WEIXIN
|
||
import XixiWhoAmI from '@/pages-subpackage/xixi/components/xixi-who-am-i.vue';
|
||
import XixiFirstMeeting from '@/pages-subpackage/xixi/components/xixi-first-meeting.vue';
|
||
import XixiRecord from '@/pages-subpackage/xixi/components/xixi-record.vue';
|
||
import XixiDiagnosis from '@/pages-subpackage/xixi/components/xixi-diagnosis.vue';
|
||
import XixiDatingAdvice from '@/pages-subpackage/xixi/components/xixi-dating-advice.vue';
|
||
// #endif
|
||
|
||
function getSystemInfo() {
|
||
// #ifdef MP-WEIXIN
|
||
if (typeof wx !== 'undefined' && wx.getWindowInfo) {
|
||
try {
|
||
const windowInfo = wx.getWindowInfo();
|
||
return {
|
||
statusBarHeight: windowInfo.statusBarHeight || 20,
|
||
windowWidth: windowInfo.windowWidth,
|
||
windowHeight: windowInfo.windowHeight,
|
||
};
|
||
} catch (e) {
|
||
console.warn('[Xixi] wx.getWindowInfo failed:', e);
|
||
}
|
||
}
|
||
// #endif
|
||
try {
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
return {
|
||
statusBarHeight: systemInfo.statusBarHeight || 20,
|
||
windowWidth: systemInfo.windowWidth,
|
||
windowHeight: systemInfo.windowHeight,
|
||
};
|
||
} catch (e) {
|
||
return {
|
||
statusBarHeight: 20,
|
||
windowWidth: 375,
|
||
windowHeight: 667,
|
||
};
|
||
}
|
||
}
|
||
|
||
const DETAIL_LABELS = {
|
||
who: '我是谁',
|
||
meet: '约会准备',
|
||
record: '幸福相遇',
|
||
diag: '诊断结果',
|
||
advice: '约会建议',
|
||
};
|
||
|
||
export default {
|
||
components: {
|
||
// #ifdef APP
|
||
statusBar,
|
||
// #endif
|
||
// #ifndef MP-WEIXIN
|
||
XixiWhoAmI,
|
||
XixiFirstMeeting,
|
||
XixiRecord,
|
||
XixiDiagnosis,
|
||
XixiDatingAdvice,
|
||
// #endif
|
||
},
|
||
data() {
|
||
const systemInfo = getSystemInfo();
|
||
const statusBarHeightRpx = systemInfo.statusBarHeight * 2;
|
||
const navbarHeightRpx = 44 * 2;
|
||
const totalNavbarHeight = statusBarHeightRpx + navbarHeightRpx;
|
||
|
||
return {
|
||
viewMode: 'home',
|
||
detailKey: null,
|
||
contentTop: totalNavbarHeight + 'rpx',
|
||
contentBottom: '96rpx',
|
||
diagTick: 0,
|
||
adviceRefreshTick: 0,
|
||
};
|
||
},
|
||
computed: {
|
||
computedContentTop() {
|
||
const systemInfo = getSystemInfo();
|
||
const statusBarHeightRpx = systemInfo.statusBarHeight * 2;
|
||
const navbarHeightRpx = 44 * 2;
|
||
return statusBarHeightRpx + navbarHeightRpx + 'rpx';
|
||
},
|
||
navTitle() {
|
||
if (this.viewMode === 'detail' && this.detailKey && DETAIL_LABELS[this.detailKey]) {
|
||
return DETAIL_LABELS[this.detailKey];
|
||
}
|
||
return '喜喜';
|
||
},
|
||
},
|
||
onLoad() {
|
||
this.updateNavbarPosition();
|
||
// #ifdef MP-WEIXIN
|
||
setTimeout(() => this.preloadSubpackage(), 100);
|
||
// #endif
|
||
},
|
||
onShow() {
|
||
this.diagTick += 1;
|
||
this.adviceRefreshTick += 1;
|
||
this.$nextTick(() => {
|
||
this.updateNavbarPosition();
|
||
setTimeout(() => this.updateNavbarPosition(), 50);
|
||
});
|
||
},
|
||
onReady() {
|
||
this.$nextTick(() => {
|
||
const query = uni.createSelectorQuery().in(this);
|
||
query
|
||
.select('.uni-navbar__content')
|
||
.boundingClientRect((data) => {
|
||
if (data && data.height) {
|
||
const adjustedHeight = Math.max(data.height * 2 - 4, 0);
|
||
this.$set(this, 'contentTop', adjustedHeight + 'rpx');
|
||
} else {
|
||
const systemInfo = getSystemInfo();
|
||
const total =
|
||
systemInfo.statusBarHeight * 2 + 44 * 2;
|
||
this.$set(this, 'contentTop', Math.max(total - 4, 0) + 'rpx');
|
||
}
|
||
})
|
||
.exec();
|
||
|
||
const queryTabbar = uni.createSelectorQuery().in(this);
|
||
queryTabbar
|
||
.select('.tabbar')
|
||
.boundingClientRect((tabbarData) => {
|
||
if (tabbarData && tabbarData.height) {
|
||
const adjustedBottom = Math.max(tabbarData.height * 2 - 4, 0);
|
||
this.$set(this, 'contentBottom', adjustedBottom + 'rpx');
|
||
} else {
|
||
this.$set(this, 'contentBottom', '96rpx');
|
||
}
|
||
})
|
||
.exec();
|
||
|
||
setTimeout(() => {
|
||
const q2 = uni.createSelectorQuery().in(this);
|
||
q2
|
||
.select('.uni-navbar__content')
|
||
.boundingClientRect((data) => {
|
||
if (data && data.height) {
|
||
const adjustedHeight = Math.max(data.height * 2 - 4, 0);
|
||
this.$set(this, 'contentTop', adjustedHeight + 'rpx');
|
||
}
|
||
})
|
||
.exec();
|
||
const qTab2 = uni.createSelectorQuery().in(this);
|
||
qTab2
|
||
.select('.tabbar')
|
||
.boundingClientRect((tabbarData) => {
|
||
if (tabbarData && tabbarData.height) {
|
||
const adjustedBottom = Math.max(tabbarData.height * 2 - 4, 0);
|
||
this.$set(this, 'contentBottom', adjustedBottom + 'rpx');
|
||
}
|
||
})
|
||
.exec();
|
||
}, 200);
|
||
});
|
||
},
|
||
methods: {
|
||
// #ifdef MP-WEIXIN
|
||
preloadSubpackage() {
|
||
if (typeof wx !== 'undefined' && wx.loadSubpackage) {
|
||
wx.loadSubpackage({
|
||
name: 'pages-subpackage',
|
||
success: () => console.log('[Xixi] subpackage loaded'),
|
||
fail: (err) => console.warn('[Xixi] subpackage preload:', err),
|
||
});
|
||
}
|
||
},
|
||
// #endif
|
||
updateNavbarPosition() {
|
||
const systemInfo = getSystemInfo();
|
||
const totalNavbarHeight = systemInfo.statusBarHeight * 2 + 44 * 2;
|
||
this.$set(this, 'contentTop', totalNavbarHeight + 'rpx');
|
||
// #ifdef MP-WEIXIN
|
||
this.$forceUpdate();
|
||
// #endif
|
||
},
|
||
onNavLeftClick() {
|
||
if (this.viewMode === 'detail') {
|
||
this.backHome();
|
||
return;
|
||
}
|
||
const pages = getCurrentPages();
|
||
if (pages.length <= 1) {
|
||
return;
|
||
}
|
||
uni.navigateBack({
|
||
fail: (err) => console.error('[Xixi] navigateBack:', err),
|
||
});
|
||
},
|
||
openDetail(key) {
|
||
this.detailKey = key;
|
||
this.viewMode = 'detail';
|
||
if (key === 'diag' || key === 'record') {
|
||
this.diagTick += 1;
|
||
}
|
||
if (key === 'advice') {
|
||
this.adviceRefreshTick += 1;
|
||
}
|
||
},
|
||
backHome() {
|
||
this.viewMode = 'home';
|
||
this.detailKey = null;
|
||
},
|
||
onFormSaved() {},
|
||
onRecordingsChanged() {
|
||
this.diagTick += 1;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
page {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.page {
|
||
min-height: 100vh;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.content {
|
||
padding-top: 0 !important;
|
||
margin-top: 0 !important;
|
||
position: relative;
|
||
min-height: 100vh;
|
||
top: 0;
|
||
}
|
||
|
||
::v-deep .uni-navbar__placeholder {
|
||
display: none !important;
|
||
height: 0 !important;
|
||
}
|
||
|
||
::v-deep .uni-navbar__placeholder-view {
|
||
display: none !important;
|
||
height: 0 !important;
|
||
}
|
||
|
||
::v-deep [class*='tabbar'][class*='placeholder'] {
|
||
display: none !important;
|
||
height: 0 !important;
|
||
}
|
||
|
||
::v-deep [class*='safe-area'][class*='bottom'],
|
||
::v-deep [class*='bottom'][class*='safe'] {
|
||
display: none !important;
|
||
height: 0 !important;
|
||
}
|
||
|
||
.content-scroll {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
padding: 0 !important;
|
||
padding-bottom: 0 !important;
|
||
margin: 0 !important;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.detail-wrap {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.detail-panel {
|
||
height: 100%;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.category-section {
|
||
margin: 20rpx 30rpx;
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.category-section:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.category-section:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.category-header {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
background: #ffffff;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
.category-icon {
|
||
font-size: 32rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.category-title {
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
|
||
.function-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 10rpx;
|
||
}
|
||
|
||
.two-column .function-item {
|
||
flex: 1;
|
||
background: #ffffff;
|
||
border-radius: 12rpx;
|
||
padding: 24rpx 16rpx;
|
||
margin: 0 5rpx;
|
||
text-align: center;
|
||
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.04);
|
||
transition: all 0.3s ease;
|
||
border: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
.function-item:active {
|
||
transform: scale(0.95);
|
||
box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.function-icon {
|
||
font-size: 48rpx;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.function-name {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: #333;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.function-desc {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.advice-full {
|
||
padding: 0 15rpx 18rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.advice-full-inner {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
background: linear-gradient(135deg, #fff8fa 0%, #ffffff 100%);
|
||
border-radius: 12rpx;
|
||
padding: 24rpx 20rpx;
|
||
margin: 0 5rpx;
|
||
border: 1rpx solid #f5d0e0;
|
||
box-shadow: 0 2rpx 8rpx rgba(233, 30, 140, 0.08);
|
||
}
|
||
|
||
.advice-full:active .advice-full-inner {
|
||
transform: scale(0.98);
|
||
opacity: 0.96;
|
||
}
|
||
|
||
.advice-full-icon {
|
||
margin-bottom: 0;
|
||
margin-right: 20rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.advice-full-texts {
|
||
flex: 1;
|
||
min-width: 0;
|
||
text-align: left;
|
||
}
|
||
|
||
.advice-full-texts .function-name,
|
||
.advice-full-texts .function-desc {
|
||
text-align: left;
|
||
}
|
||
</style>
|