jack/yuxingu-Miniprogram-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
jackyu66git
2026-03-23 11:52:05 +08:00
commit c3c9db3151
267 changed files with 24984 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/healing/active-list.vue
+204
View File
@@ -0,0 +1,204 @@
<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" @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: 40rpx">
<view v-for="(item,index) in newActiveList" :key="index"
style="width: 670rpx;height: 300rpx;border-radius: 10rpx; background-color: #fff;margin-top: 20rpx;display: flex;flex-direction: column; align-items: flex-start;justify-content: flex-start;">
<view style="width: 670rpx;display: flex;flex-direction: column; align-items: flex-start;justify-content:center;" @click="toActiveDetail(item)">
<image :src="item.showImage" style="width: 670rpx;height: 220rpx;border-top-left-radius: 10rpx;border-top-right-radius: 10rpx;"></image>
<text style="color: #614D49;
margin-left: 10rpx;
margin-top: 14rpx;
width: 650rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
font-family: SourceHanSansBold;ont-variation-settings: 'opsz' auto;
font-size: 28rpx;
line-height: normal;
letter-spacing: 0px;">
{{item.title}}
</text>
</view>
</view>
<view v-if="newActiveList.length==0" style="margin-top: 50%;">
<text style="color: #614D49;
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 newActiveList = ref([])
onMounted(() => {
getPsychicTest()
})
const getPsychicTest = () => {
const param = ref({
type: 2,
pageNo: 1,
pageSize: 10
})
dohttp.get(urls.newPageUrl, param.value).then((result) => {
newActiveList.value = result.list
// 确保图片加载完成
nextTick(() => {
setTimeout(() => {
checkContentHeight()
// 添加重试机制
if (!enableScroll.value) setTimeout(checkContentHeight, 500)
}, 300)
})
})
}
const toActiveDetail = (item) => {
dohttp.navigateTo("/pages/healing-detail/active-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)) - 200
})
// 新增高度检查方法
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=9', // 分享路径的参数
};
};
// 初始加载检查
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>
pages/healing/healing-list.vue
+201
View File
@@ -0,0 +1,201 @@
<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" @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: 40rpx">
<view v-for="(item,index) in newHealingList" :key="index"
style="width: 670rpx;height: 196rpx;background-color: #fff;margin-top: 14rpx;display: flex;flex-direction: column; align-items: center;justify-content: center;border-radius: 10rpx;">
<view style="width: 630rpx;display: flex;flex-direction: row; align-items: center;justify-content:space-between;" @click="toHealingDetail(item)">
<text style="color: #614D49;
width: 350rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
font-family: SourceHanSansBold;ont-variation-settings: 'opsz' auto;
font-size: 28rpx;
line-height: normal;
letter-spacing: 0px;">
{{item.title}}
</text>
<image :src="item.showImage" style="width: 200rpx;height: 156rpx;border-radius: 10rpx;"></image>
</view>
</view>
<view v-if="newHealingList.length==0" style="">
<text style="color: #614D49;
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 newHealingList = ref([])
onMounted(() => {
getPsychicTest()
})
const getPsychicTest = () => {
const param = ref({
type: 1,
pageNo: 1,
pageSize: 10
})
dohttp.get(urls.newPageUrl, param.value).then((result) => {
newHealingList.value = result.list
// 确保图片加载完成
nextTick(() => {
setTimeout(() => {
checkContentHeight()
// 添加重试机制
if (!enableScroll.value) setTimeout(checkContentHeight, 500)
}, 300)
})
})
}
const toHealingDetail = (item) => {
dohttp.navigateTo("/pages/healing-detail/healing-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)) - 200
})
// 新增高度检查方法
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=10', // 分享路径的参数
};
};
// 初始加载检查
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>