351 lines
8.9 KiB
Vue
351 lines
8.9 KiB
Vue
<template>
|
|
<view class="content">
|
|
<image src="/static/n-main/overlap-bg.png" style="width: 750rpx;height: 660rpx;position: absolute;z-index: 1;">
|
|
</image>
|
|
<view
|
|
style="display: flex;justify-content: center;flex-direction: column;position: absolute;z-index: 2;width: 750rpx;">
|
|
<myNav title="心理咨询" bgColor="nonoe" titleColor="#614D49" :backIcon="false" :backHome="false" :flex="false">
|
|
</myNav>
|
|
|
|
<scroll-view v-if="list.length>0" :scroll-y="enableScroll" @scrolltolower="scrolltolower" class="scroll-style"
|
|
:style="{ height: `${showHight}rpx` }">
|
|
<view id="contentContainer"
|
|
style="display: flex;flex-direction: column;align-items: center;margin-top: 10rpx;">
|
|
<view class="show-card" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
|
|
<view style="position: relative;156rpx;height: 204rpx;">
|
|
<image :src="item.avatar" style="width: 156rpx;height: 204rpx;border-radius: 10rpx;"></image>
|
|
</view>
|
|
<view style="position: relative; display: flex;flex-direction: column;margin-left: 20rpx;width: 452rpx;
|
|
justify-content: space-between">
|
|
<view style="display: flex;flex-direction: column; gap: 4rpx;">
|
|
<text class="show-name">
|
|
{{item.name}}
|
|
</text>
|
|
<view style="display: flex;height: 28rpx;" v-if="item.tags&&item.tags.length==1">
|
|
<view class="tag">
|
|
<text class="tag-text">{{item.tags[0]}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view style="display: flex;height: 28rpx;" v-if="item.tags&&item.tags.length==2">
|
|
<view class="tag">
|
|
<text class="tag-text">{{item.tags[0]}}</text>
|
|
</view>
|
|
<view class="tag" style="margin-left:20rpx;">
|
|
<text class="tag-text">{{item.tags[1]}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view style="display: flex;height: 28rpx;" v-if="item.tags&&item.tags.length==3">
|
|
<view class="tag">
|
|
<text class="tag-text">{{item.tags[0]}}</text>
|
|
</view>
|
|
<view class="tag" style="margin-left:20rpx;">
|
|
<text class="tag-text">{{item.tags[1]}}</text>
|
|
</view>
|
|
<view class="tag" style="margin-left:20rpx;">
|
|
<text class="tag-text">{{item.tags[2]}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view style="display: flex;height: 28rpx;" v-if="item.tags&&item.tags.length>=4">
|
|
<view class="tag">
|
|
<text class="tag-text">{{item.tags[0]}}</text>
|
|
</view>
|
|
<view class="tag" style="margin-left:20rpx;">
|
|
<text class="tag-text">{{item.tags[1]}}</text>
|
|
</view>
|
|
<view class="tag" style="margin-left:20rpx;">
|
|
<text class="tag-text">{{item.tags[2]}}</text>
|
|
</view>
|
|
<view class="tag" style="margin-left:20rpx;">
|
|
<text class="tag-text">{{item.tags[3]}}</text>
|
|
</view>
|
|
</view>
|
|
<text class="show-introduce" >
|
|
{{item.introduction}}
|
|
</text>
|
|
<!-- <text class="show-introduce">
|
|
擅长:婚姻家庭/情绪管理/个人成长从业15年·咨询经验3300+小小时
|
|
</text> -->
|
|
</view>
|
|
<view style="position: absolute; right: 10rpx; bottom: -10rpx; display: flex;justify-content: flex-end;align-items: baseline;">
|
|
<view>
|
|
<text class="momey-text">
|
|
¥ {{item.price/100}}
|
|
</text>
|
|
<text class="unit-text">
|
|
/次
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view v-else style="width: 750rpx;height: 60vh;display: flex;justify-content: center;align-items: center;">
|
|
|
|
<text style="font-size: 30rpx;font-family: SourceHanSansBold;color: #EA4E2D">暂无咨询师数据</text>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref
|
|
} from 'vue'
|
|
import myNav from '@/components/my-nav.vue'
|
|
import {
|
|
urls
|
|
} from '@/util/apiUrl.js'
|
|
import dohttp from '@/util/requestConfig.js'
|
|
const choiceTypeCode = ref()
|
|
|
|
const types = ref([])
|
|
|
|
const choice = (item) => {
|
|
if (item) {
|
|
choiceTypeCode.value = item.code
|
|
} else {
|
|
choiceTypeCode.value = ""
|
|
}
|
|
param.value.businessScope = choiceTypeCode.value
|
|
param.value.pageNo = 1
|
|
list.value=[]
|
|
getPage()
|
|
}
|
|
onMounted(() => {
|
|
|
|
getType()
|
|
getPage()
|
|
|
|
const systemInfo = uni.getSystemInfoSync()
|
|
showHight.value = (systemInfo.windowHeight * (750 / systemInfo.screenWidth)) - 180
|
|
|
|
})
|
|
const getType = () => {
|
|
dohttp.get(urls.businessScopeList).then((result) => {
|
|
types.value = result
|
|
|
|
|
|
let zxcode = uni.getStorageSync("zxcode")
|
|
if(zxcode){
|
|
choiceTypeCode.value = zxcode
|
|
uni.removeStorageSync("zxcode")
|
|
}
|
|
|
|
|
|
})
|
|
}
|
|
|
|
const param = ref({
|
|
businessScope: "",
|
|
pageNo: 1,
|
|
pageSize: 10
|
|
})
|
|
const totalNum = ref(0)
|
|
const list = ref([])
|
|
const getPage = () => {
|
|
dohttp.get(urls.doctorInfopage, param.value).then((result) => {
|
|
for (let i = 0; i < result.list.length; i++) {
|
|
if (result.list[i].consultationMethod) {
|
|
result.list[i].tags = result.list[i].tags.split(",")
|
|
}
|
|
}
|
|
|
|
|
|
list.value = result.list
|
|
totalNum.value = result.total
|
|
// 数据更新后检查高度
|
|
nextTick(() => {
|
|
checkContentHeight()
|
|
})
|
|
})
|
|
}
|
|
|
|
const onShareAppMessage = () => {
|
|
return {
|
|
title: '快来体验一下吧~',
|
|
path: '/pages/index/index', // 分享的路径
|
|
};
|
|
};
|
|
|
|
const onShareTimeline = () => {
|
|
return {
|
|
title: '快来体验一下吧~',
|
|
query: 'id=2', // 分享路径的参数
|
|
};
|
|
};
|
|
|
|
const showHight = ref(0)
|
|
// 新增代码
|
|
import {
|
|
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()
|
|
}
|
|
|
|
|
|
const toDetail=(item)=>{
|
|
dohttp.navigateTo("/pages/consult-detail/consult-detail?id=" + item.id)
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 新增关键样式 */
|
|
#contentContainer {
|
|
width: 100%;
|
|
min-height: 100%;
|
|
/* 确保内容容器撑开 */
|
|
}
|
|
|
|
.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;
|
|
|
|
}
|
|
|
|
.no-choice-text {
|
|
/* 按钮/按钮文本中号 */
|
|
font-family: SourceHanSans;
|
|
font-size: 32rpx;
|
|
font-weight: normal;
|
|
line-height: normal;
|
|
letter-spacing: 0px;
|
|
|
|
font-variation-settings: "opsz" auto;
|
|
/* 背景色/浅色背景2 */
|
|
color: #303044;
|
|
}
|
|
|
|
.choice-text {
|
|
/* 样式描述：常规大按钮 */
|
|
font-family: SourceHanSansBold;
|
|
font-size: 36rpx;
|
|
line-height: normal;
|
|
letter-spacing: 0px;
|
|
/* 背景色/深色大背景 */
|
|
color: #0F141B;
|
|
z-index: 0;
|
|
}
|
|
|
|
.choice-icon {
|
|
width: 80%;
|
|
height: 10rpx;
|
|
border-radius: 424rpx;
|
|
background: #EA4E2D;
|
|
}
|
|
|
|
.show-card {
|
|
margin-bottom: 20rpx;
|
|
width: 670rpx;
|
|
height: 244rpx;
|
|
border-radius: 10rpx;
|
|
background: #FFFFFF;
|
|
display: flex;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
justify-content: center;
|
|
}
|
|
|
|
.show-name {
|
|
/* 标题/标题三加粗 */
|
|
/* 样式描述：正文标题 */
|
|
font-family: SourceHanSansBold;
|
|
font-size: 28rpx;
|
|
line-height: normal;
|
|
letter-spacing: 0px;
|
|
font-variation-settings: "opsz" auto;
|
|
/* 背景色/浅色背景2 */
|
|
color: #614D49;
|
|
}
|
|
|
|
.show-introduce {
|
|
font-family: SourceHanSans;
|
|
font-size: 20rpx;
|
|
font-weight: normal;
|
|
line-height: normal;
|
|
letter-spacing: 0px;
|
|
font-variation-settings: "opsz" auto;
|
|
/* 正文色/正文辅助4 */
|
|
color: #9B918C;
|
|
display: -webkit-box; /* 使用 flex 布局 */
|
|
-webkit-box-orient: vertical; /* 垂直排列 */
|
|
-webkit-line-clamp: 3; /* 限制显示行数 */
|
|
overflow: hidden; /* 超出部分隐藏 */
|
|
text-overflow: ellipsis; /* 超出部分显示省略号 */
|
|
}
|
|
|
|
|
|
.tag {
|
|
border-radius: 60rpx;
|
|
opacity: 1;
|
|
|
|
/* 自动布局 */
|
|
display: flex;
|
|
padding: 2rpx 10rpx;
|
|
box-sizing: border-box;
|
|
border: 2rpx solid #EA8D7A;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.tag-text {
|
|
|
|
/* 样式描述：辅助信息 */
|
|
font-family: SourceHanSans;
|
|
font-size: 16rpx;
|
|
font-weight: normal;
|
|
line-height: normal;
|
|
letter-spacing: 0rpx;
|
|
/* 正文色/正文色辅助3 */
|
|
color: #F37155;
|
|
}
|
|
|
|
.momey-text {
|
|
color: #F37155;
|
|
/* 标题/标题二加粗 */
|
|
font-family: SourceHanSansBold;
|
|
font-size: 36rpx;
|
|
font-variation-settings: "opsz" auto;
|
|
}
|
|
|
|
.unit-text {
|
|
|
|
|
|
/* 正文/正文文本小号加粗 */
|
|
font-family: SourceHanSans;
|
|
font-weight: 700;
|
|
font-size: 20rpx;
|
|
font-variation-settings: "opsz" auto;
|
|
color: #F37155;
|
|
|
|
}
|
|
</style> |