251 lines
6.6 KiB
Vue
251 lines
6.6 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="banner"></view>
|
|
<view class="page">
|
|
<myNav title="心理测评" bgColor="nonoe" titleColor="#614D49" :backIcon="false" :backHome="false" :flex="false">
|
|
</myNav>
|
|
<scroll-view :scroll-y="enableScroll" @scrolltolower="scrolltolower" class="scroll-style">
|
|
<view ref="contentRef" id="contentContainer" style="display:flex;align-items:center;flex-direction:column;margin-top: 10rpx;">
|
|
<view v-for="(item,index) in testList" :key="index" style="width: 630rpx;display: flex;
|
|
align-items: center;justify-content: space-between;background:#FFFFFF;padding: 20rpx;border-radius: 10rpx;">
|
|
<view style="display: flex;">
|
|
<image :src="item.testPic" style="width: 140rpx;height: 140rpx;border-radius: 10rpx;">
|
|
</image>
|
|
<view style="display: flex;flex-direction: column;margin-left: 20rpx;">
|
|
<text style="color: #614D49;
|
|
font-family: SourceHanSansBold;ont-variation-settings: 'opsz' auto;
|
|
font-size: 28rpx;
|
|
line-height: normal;
|
|
letter-spacing: 0px;">
|
|
{{item.testName}}
|
|
</text>
|
|
<view style="margin-top: 8rpx;display: flex;align-items: center;">
|
|
<!-- <image src="/static/n-main/fire-icon.png" style="width:19.04rpx ;height:26.28rpx ;"> -->
|
|
<!-- </image> -->
|
|
<view style="width: fit-content;margin-left: 10rpx;
|
|
border-radius: 32rpx;
|
|
display: flex;
|
|
text-align: center;
|
|
justify-content: center;
|
|
padding-top: 4rpx;
|
|
padding-bottom: 4rpx;
|
|
padding-left: 10rpx;
|
|
padding-right: 10rpx;
|
|
border: 1px solid #EA8D7A;">
|
|
<text style="color: #F37155;
|
|
font-family: SourceHanSans;ont-variation-settings: 'opsz' auto;
|
|
font-size: 20rpx;
|
|
font-weight: normal;
|
|
letter-spacing: 0px;">
|
|
{{item.showNum}}人已测
|
|
</text>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<text style="color: #9B918C;margin-top: 26rpx;
|
|
font-family: SourceHanSans;ont-variation-settings: 'opsz' auto;
|
|
font-size: 20rpx;
|
|
font-weight: normal;
|
|
line-height: normal;
|
|
letter-spacing: 0px;">
|
|
{{item.subTitle}}
|
|
</text>
|
|
|
|
</view>
|
|
</view>
|
|
<view style="width:fit-content;
|
|
height: fit-content;
|
|
border-radius: 2002rpx;
|
|
opacity: 1;
|
|
display: flex;
|
|
padding: 8rpx 40rpx;justify-content: center;align-items: center;
|
|
background: linear-gradient(180deg, #FF9079 0%, #F37155 100%);" @click="goTest(item)">
|
|
<text style="color: #FFFFFF;
|
|
font-family: SourceHanSans;ont-variation-settings: 'opsz' auto;
|
|
font-size: 28rpx;
|
|
font-weight: normal;
|
|
line-height: normal;
|
|
letter-spacing: 0px;">
|
|
测评
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view v-if="testList.length==0" style="margin-top: 50%;">
|
|
<text style="color: #303044;
|
|
font-family: SourceHanSansBold;ont-variation-settings: 'opsz' auto;
|
|
font-size: 28rpx;
|
|
line-height: normal;
|
|
letter-spacing: 0px;">
|
|
暂无测评信息
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
</scroll-view>
|
|
|
|
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import myNav from '@/components/my-nav.vue'
|
|
import {
|
|
urls
|
|
} from '@/util/apiUrl.js'
|
|
import dohttp from '@/util/requestConfig.js'
|
|
|
|
const testList = ref([])
|
|
|
|
|
|
onMounted(() => {
|
|
getPsychicTest()
|
|
})
|
|
const getPsychicTest = () => {
|
|
dohttp.post(urls.getPsychicListTest).then((result) => {
|
|
console.log("getPsychicTestgetPsychicTestgetPsychicTest", result)
|
|
if (result) {
|
|
result.forEach((ele) => {
|
|
if (ele.totalNum && Number(ele.totalNum) >= 10000) {
|
|
|
|
ele.showNum = (Number(ele.totalNum) / 10000).toFixed(1) + "W"
|
|
|
|
} else {
|
|
ele.showNum = ele.totalNum
|
|
}
|
|
})
|
|
}
|
|
testList.value = result
|
|
// 确保图片加载完成
|
|
nextTick(() => {
|
|
setTimeout(() => {
|
|
checkContentHeight()
|
|
// 添加重试机制
|
|
if (!enableScroll.value) setTimeout(checkContentHeight, 500)
|
|
}, 300)
|
|
})
|
|
})
|
|
}
|
|
|
|
|
|
const goTest = (item) => {
|
|
|
|
dohttp.navigateTo("/pages/test-detail/test-detail?id=" + item.id)
|
|
|
|
}
|
|
|
|
// 新增代码
|
|
import {
|
|
ref,
|
|
onMounted,
|
|
nextTick,
|
|
getCurrentInstance
|
|
} from 'vue'
|
|
const showHight = ref(0)
|
|
const instance = getCurrentInstance()
|
|
const enableScroll = ref(false) // 新增动态滚动控制
|
|
onLoad(() => {
|
|
const systemInfo = uni.getSystemInfoSync()
|
|
// 更精准的高度计算
|
|
showHight.value = (systemInfo.windowHeight * (750 / systemInfo.screenWidth)) - 180
|
|
})
|
|
|
|
|
|
// 新增高度检查方法
|
|
const checkContentHeight = () => {
|
|
const query = uni.createSelectorQuery().in(instance.proxy)
|
|
query.select('#contentContainer').boundingClientRect(rect => {
|
|
if (rect) {
|
|
const systemInfo = uni.getSystemInfoSync()
|
|
|
|
// 转换为rpx比较
|
|
// 计算容器实际像素高度
|
|
const containerHeightPx = (showHight.value * systemInfo.screenWidth) / 750
|
|
const threshold = 5 // 容错阈值
|
|
|
|
enableScroll.value = rect.height > (containerHeightPx + threshold)
|
|
console.log('[Layout Debug]', {
|
|
contentHeight: rect.height,
|
|
containerPx: containerHeightPx,
|
|
containerRpx: showHight.value,
|
|
shouldScroll: enableScroll.value
|
|
})
|
|
}
|
|
}).exec()
|
|
}
|
|
|
|
const onShareAppMessage = () => {
|
|
return {
|
|
title: '快来体验一下吧~',
|
|
path: '/pages/index/index', // 分享的路径
|
|
};
|
|
};
|
|
|
|
const onShareTimeline = () => {
|
|
return {
|
|
title: '快来体验一下吧~',
|
|
query: 'id=3', // 分享路径的参数
|
|
};
|
|
};
|
|
|
|
// 初始加载检查
|
|
onMounted(() => {
|
|
nextTick(checkContentHeight)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.content {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-image: url('https://miniapp.yuxingu.com.cn/yxg-mp/pic/test-list-bg.png');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
|
|
.page {
|
|
position: absolute;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.banner {
|
|
background-image: url('https://miniapp.yuxingu.com.cn/yxg-mp/pic/botton.png');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
width: 750rpx;
|
|
height: 660rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* 修改 #contentContainer 样式 */
|
|
#contentContainer {
|
|
width: 100%;
|
|
min-height: 100%;
|
|
/* 新增关键属性 */
|
|
flex-shrink: 0;
|
|
/* 禁止收缩 */
|
|
overflow: visible;
|
|
/* 确保子元素不被裁剪 */
|
|
}
|
|
|
|
.scroll-style {
|
|
box-sizing: border-box;
|
|
padding: 0 !important;
|
|
/* 清除可能的内边距 */
|
|
}
|
|
</style> |