Initial commit
This commit is contained in:
jackyu66git
@@ -0,0 +1,235 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="banner"></view>
|
||||
<view class="page">
|
||||
<myNav title="我的测评" bgColor="nonoe" titleColor="#614D49" :backIcon="true" :backHome="false" :flex="false">
|
||||
</myNav>
|
||||
<scroll-view :scroll-y="enableScroll" v-if="testList.length>0" @scrolltolower="scrolltolower" class="scroll-style" :style="{ height: `${showHight}rpx` }"
|
||||
>
|
||||
<view ref="contentRef" id="contentContainer"
|
||||
style="display: flex;align-items: center;flex-direction: column;margin-top: 30rpx">
|
||||
|
||||
<view v-for="(item,index) in testList" :key="index"
|
||||
style="width: 670rpx;margin-top: 20rpx;display: flex;height: 180rpx;
|
||||
align-items: center;justify-content: space-between;background:#FFFFFF;border-radius: 10rpx;padding-left: 20rpx;padding-right: 20rpx;">
|
||||
<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: #303044;
|
||||
font-family: SourceHanSansBold;ont-variation-settings: 'opsz' auto;
|
||||
font-size: 28rpx;
|
||||
line-height: normal;
|
||||
letter-spacing: 0px;">
|
||||
{{item.testName}}
|
||||
</text>
|
||||
<view style="margin-top: 2rpx;display: flex;align-items: center;">
|
||||
|
||||
|
||||
<rich-text style="color: #606271;
|
||||
font-family: SourceHanSans;ont-variation-settings: 'opsz' auto;
|
||||
font-size: 20rpx;
|
||||
font-weight: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: 0px;" class="test-desc" :nodes="item.subTitle"></rich-text>
|
||||
</view>
|
||||
|
||||
<text style="color: #EA4E2D;margin-top: 26rpx;
|
||||
font-family: SourceHanSans;ont-variation-settings: 'opsz' auto;
|
||||
font-size: 20rpx;
|
||||
font-weight: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: 0px;">
|
||||
测试于{{ item.startTime }}
|
||||
</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, #E84B2A 0%, #FF846A 100%);" @click="toTestResult(item)">
|
||||
<text style="color: #FFFFFF;
|
||||
font-family: SourceHanSansBold;ont-variation-settings: 'opsz' auto;
|
||||
font-size: 28rpx;
|
||||
line-height: normal;
|
||||
letter-spacing: 0px;">
|
||||
查看
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
<view v-if="testList.length==0" style="margin-top: 50%; width: 100%; text-align: center;">
|
||||
<text style="color: #614D49;
|
||||
font-family: SourceHanSansBold;ont-variation-settings: 'opsz' auto;
|
||||
font-size: 28rpx;
|
||||
line-height: normal;
|
||||
letter-spacing: 0px;">暂无测评信息</text>
|
||||
</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([])
|
||||
|
||||
const params = ref({
|
||||
pageNo: 1,
|
||||
pageSize: 20
|
||||
})
|
||||
onMounted(() => {
|
||||
testList.value = []
|
||||
getMyTest()
|
||||
})
|
||||
const getMyTest = () => {
|
||||
dohttp.post(urls.myTest, params.value).then((result) => {
|
||||
if (result.list) {
|
||||
testList.value.push(...result.list)
|
||||
// 数据更新后检查高度
|
||||
nextTick(() => {
|
||||
checkContentHeight()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const toTestResult = (item) => {
|
||||
|
||||
uni.navigateTo({
|
||||
url: "/pages/test-result/test-result?resultId=" + item.testResultId,
|
||||
animationType: "pop-in"
|
||||
})
|
||||
|
||||
}
|
||||
const scrolltolower = () => {
|
||||
|
||||
params.value.pageNo += 1
|
||||
getMyTest()
|
||||
|
||||
}
|
||||
const showHight = ref(0)
|
||||
onLoad(() => {
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
// 更精准的高度计算
|
||||
showHight.value = (systemInfo.windowHeight * (750 / systemInfo.screenWidth)) - 200
|
||||
})
|
||||
|
||||
// 新增代码
|
||||
import { ref, onMounted, nextTick, getCurrentInstance } from 'vue'
|
||||
|
||||
const instance = getCurrentInstance()
|
||||
const enableScroll = ref(false) // 新增动态滚动控制
|
||||
// 新增高度检查方法
|
||||
const checkContentHeight = () => {
|
||||
const query = uni.createSelectorQuery().in(instance.proxy)
|
||||
query.select('#contentContainer').boundingClientRect(rect => {
|
||||
if (rect) {
|
||||
// 转换为rpx比较
|
||||
const contentHeightRpx = rect.height * (750 / uni.getSystemInfoSync().screenWidth)
|
||||
enableScroll.value = contentHeightRpx > showHight.value
|
||||
console.log('内容高度:', contentHeightRpx, '容器高度:', showHight.value)
|
||||
}
|
||||
}).exec()
|
||||
}
|
||||
|
||||
// 初始加载检查
|
||||
onMounted(() => {
|
||||
nextTick(checkContentHeight)
|
||||
})
|
||||
|
||||
|
||||
const onShareAppMessage = () => {
|
||||
return {
|
||||
title: '快来体验一下吧~',
|
||||
path: '/pages/index/index', // 分享的路径
|
||||
};
|
||||
};
|
||||
|
||||
const onShareTimeline = () => {
|
||||
return {
|
||||
title: '快来体验一下吧~',
|
||||
query: 'id=6', // 分享路径的参数
|
||||
};
|
||||
};
|
||||
</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;
|
||||
}
|
||||
/* 新增关键样式 */
|
||||
#contentContainer {
|
||||
width: 100%;
|
||||
min-height: 100%; /* 确保内容容器撑开 */
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.test-desc {
|
||||
font-size: 24rpx;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* .scroll-style {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
} */
|
||||
|
||||
.scroll-style {
|
||||
box-sizing: border-box;
|
||||
padding: 0 !important; /* 清除可能的内边距 */
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user