huxuejian/ykt-team-wxapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 页面调整

Browse Source
This commit is contained in:
huxuejian 2026-04-02 18:37:45 +08:00
parent f29dd85faf
commit e5047efff8
3 changed files with 525 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

492
components/zh-readMore/zh-readMore.vue Normal file
View File

@ -0,0 +1,492 @@
<template>
<view class="zh-readMore">
<view class="zh-readMore-wrapper" :style="[textStyle]">
<view
class="zh-text"
:class="textClass"
:style="[textStyleObject, { '--unfold_packup_line': `${unfold_packup_line}px` }, { '--duration': `${duration}s` }]"
>
<view class="zh-open" :style="[unfoldTextStyle]" v-if="!showall && is_open" @click.stop="open">
<text class="zh-ellipsis">...</text>
<text class="zh-open-text">{{ unfoldText }}</text>
</view>
<text class="" :style="[lineBreakStyles]">
<text v-if="title" :style="[titleStyle]">{{ title }}</text>
{{ text }}
</text>
<text class="zh-fewer" v-if="is_open && showall" @click.stop="open">
<text class="zh-fewer-text" :style="[packupTextStyle]">{{ packupText }}</text>
</text>
</view>
</view>
<view class="zh-overflowcont" id="zh-overflowcont" :style="[textStyle, lineStyle]">
<text class="zh-overflowcont-text" :style="[lineBreakStyle]">
<text v-if="title" :style="[titleStyle]">{{ title }}</text>
{{ text }}
</text>
</view>
<view class="zh-overflowcont" id="zh-overflowcontline" :style="[textStyle]">
<text class="" :style="[lineBreakStyle]">{{ text }}</text>
</view>
<view class="zh-overflowcont">
<view class="" :style="[unfoldTextStyle]" id="zh-open">
<text class="zh-ellipsis">...</text>
<text class="zh-overflowcont-open">{{ unfoldText }}</text>
</view>
</view>
</view>
</template>
<!-- #ifdef VUE3 -->
<!-- vue3 -->
<script lang="ts" setup>
/*
* @param {text,String} 需要展示的文本
* @param {textStyle,Object} 需要展示的文本样式
* @param {rows,Number} 文本容器中超出多行后显示省略号
* @param {lineBreak,Boolean} 保留空白字符序列，同时允许正常换行
* @param {packupLineBreak,Boolean} 只在收起时，忽略空白字符；展开时，保留空白字符序列，同时允许正常换行
* @param {unfoldText,String} 展开操作的文案
* @param {unfoldTextStyle,Object} 展开操作的样式
* @param {packupText,String} 收起操作的文案
* @param {packupTextStyle,Object} 收起操作的样式
* @param {duration,Number || String} 展示动画过度时间(单位s)
*/
import { computed, nextTick, ref, watch, getCurrentInstance } from 'vue'
const props = defineProps({
title: {
type: String,
default: () => '',
},
titleStyle: {
type: Object,
default: () => ({
'font-weight': '600',
'margin-right': '10rpx',
}),
},
text: {
type: String,
default: () => '',
},
textStyle: {
type: Object,
default: () => ({
color: '#000',
'font-size': '28rpx',
'font-weight': '400',
}),
},
rows: {
type: Number,
default: 3,
},
lineBreak: {
type: Boolean,
default: true,
},
packupLineBreak: {
type: Boolean,
default: false,
},
unfoldText: {
type: String,
default: () => '展开',
},
unfoldTextStyle: {
type: Object,
default: () => ({
color: '#206ef7',
'font-size': '28rpx',
'font-weight': '400',
}),
},
packupText: {
type: String,
default: () => '收起',
},
packupTextStyle: {
type: Object,
default: () => ({
color: '#206ef7',
'font-size': '28rpx',
'font-weight': '400',
}),
},
duration: {
type: [Number, String],
default: () => 0,
},
})
const box_h = ref(0) //展开后的高度
const showall = ref(false) //是否展开
const is_open = ref(false) //是否显示展开/收起按钮
const unfold_packup_line = ref(22) //展开收起宽度
const settime = ref(null) //定时器标识
const instance = getCurrentInstance()
const selectQuery = uni.createSelectorQuery().in(instance.proxy)
//导出自定义事件
const emit = defineEmits(['click'])
//事件
//展开收起事件
const open = () => {
showall.value = !showall.value
emit('click', showall.value) //展开true 关闭false
}
//计算属性
const textStyleObject = computed(() => {
const { rows } = props
return {
'max-height': showall.value ? `${1.5 * box_h.value}em` : `${1.5 * rows}em`,
}
})
const textClass = computed(() => {
return showall.value ? 'showall' : ''
})
const lineStyle = computed(() => {
const { rows } = props
return {
display: '-webkit-box',
'-webkit-box-orient': 'vertical',
'-webkit-line-clamp': rows,
overflow: 'hidden',
'word-break': 'break-all',
}
})
const lineBreakStyles = computed(() => {
const { lineBreak, packupLineBreak } = props
if (!lineBreak) {
return {
'white-space': 'normal',
}
} else {
if (packupLineBreak) {
return {
'white-space': showall.value ? 'pre-wrap' : 'normal',
}
} else {
return {
'white-space': 'pre-wrap',
}
}
}
})
const lineBreakStyle = computed(() => {
const { lineBreak } = props
return {
'white-space': lineBreak ? 'pre-wrap' : 'normal',
}
})
// 监听
watch(
() => props.text,
(newValue, oldValue) => {
const { rows } = props
nextTick(() => {
clearTimeout(settime.value)
settime.value = setTimeout(() => {
selectQuery.select(`#zh-overflowcont`).boundingClientRect()
selectQuery.select('#zh-overflowcontline').boundingClientRect()
selectQuery.select('#zh-open').boundingClientRect()
selectQuery.exec(res => {
if (res && res[0] && res[1]) {
const h1 = res[0].height // 收起时高度
const h2 = res[1].height // 展开时高度
const lineCount = rows
const lineHeight = h1 / lineCount
// 计算实际行数（考虑空行）
const actualLines = Math.ceil(h2 / lineHeight)
// 如果实际行数超过限制行数，或者高度差超过0.1行，才显示展开/收起按钮
if (actualLines > lineCount || h2 > h1 + lineHeight * 0.1) {
is_open.value = true
} else {
is_open.value = false
}
box_h.value = Math.ceil(h2 / lineHeight) + 1
showall.value = false
}
if (res && res[2]) {
let unfold_packup_width = res[2].height - 1.5 || 22
unfold_packup_line.value = unfold_packup_width
}
})
}, 100)
})
},
{
deep: true,
immediate: true,
}
)
</script>
<!-- #endif -->
<!-- #ifdef VUE2 -->
<!-- vue2 -->
<script>
/*
* @param {text,String} 需要展示的文本
* @param {textStyle,Object} 需要展示的文本样式
* @param {rows,Number} 文本容器中超出多行后显示省略号
* @param {lineBreak,Boolean} 保留空白字符序列，同时允许正常换行
* @param {packupLineBreak,Boolean} 只在收起时，忽略空白字符；展开时，保留空白字符序列，同时允许正常换行
* @param {unfoldText,String} 展开操作的文案
* @param {unfoldTextStyle,Object} 展开操作的样式
* @param {packupText,String} 收起操作的文案
* @param {packupTextStyle,Object} 收起操作的样式
* @param {duration,Number || String} 展示动画过度时间(单位s)
*/
export default {
name: 'zh-readMore',
props: {
title: {
type: String,
default: () => '',
},
titleStyle: {
type: Object,
default: () => ({
'font-weight': '600',
'margin-right': '10rpx',
}),
},
text: {
type: String,
default: () => '',
},
textStyle: {
type: Object,
default: () => ({
color: '#000',
'font-size': '28rpx',
'font-weight': '400',
}),
},
rows: {
type: Number,
default: 3,
},
lineBreak: {
type: Boolean,
default: true,
},
packupLineBreak: {
type: Boolean,
default: false,
},
unfoldText: {
type: String,
default: () => '展开',
},
unfoldTextStyle: {
type: Object,
default: () => ({
color: '#206ef7',
'font-size': '28rpx',
'font-weight': '400',
}),
},
packupText: {
type: String,
default: () => '收起',
},
packupTextStyle: {
type: Object,
default: () => ({
color: '#206ef7',
'font-size': '28rpx',
'font-weight': '400',
}),
},
duration: {
type: Number || String,
default: () => 0,
},
},
data() {
return {
box_h: 0, //展开后的高度
showall: false, //是否展开
is_open: false, //是否显示展开/收起按钮
unfold_packup_line: 22, //展开收起宽度
settime: null, //定时器标识
}
},
methods: {
//展开收起事件
open() {
this.showall = !this.showall
this.$emit('click', this.showall) //展开true 关闭false
},
},
mounted() {},
computed: {
textStyleObject() {
return {
'max-height': this.showall ? `${1.5 * this.box_h}em` : `${1.5 * this.rows}em`,
}
},
textClass() {
return this.showall ? 'showall' : ''
},
lineStyle() {
return {
display: '-webkit-box',
'-webkit-box-orient': 'vertical',
'-webkit-line-clamp': this.rows,
overflow: 'hidden',
'word-break': 'break-all',
}
},
lineBreakStyles() {
if (!this.lineBreak) {
return {
'white-space': 'normal',
}
} else {
if (this.packupLineBreak) {
return {
'white-space': this.showall ? 'pre-wrap' : 'normal',
}
} else {
return {
'white-space': 'pre-wrap',
}
}
}
},
lineBreakStyle() {
return {
'white-space': this.lineBreak ? 'pre-wrap' : 'normal',
}
},
},
watch: {
text: {
handler(newValue, oldValue) {
this.$nextTick(() => {
clearTimeout(this.settime)
this.settime = setTimeout(() => {
const selectQuery = uni.createSelectorQuery().in(this)
selectQuery.select(`#zh-overflowcont`).boundingClientRect()
selectQuery.select('#zh-overflowcontline').boundingClientRect()
selectQuery.select('#zh-open').boundingClientRect()
selectQuery.exec(res => {
if (res && res[0] && res[1]) {
const h1 = res[0].height // 收起时高度
const h2 = res[1].height // 展开时高度
const lineCount = this.rows
const lineHeight = h1 / lineCount
// 计算实际行数（考虑空行）
const actualLines = Math.ceil(h2 / lineHeight)
// 如果实际行数超过限制行数，或者高度差超过0.1行，才显示展开/收起按钮
if (actualLines > lineCount || h2 > h1 + lineHeight * 0.1) {
this.is_open = true
} else {
this.is_open = false
}
this.box_h = Math.ceil(h2 / lineHeight) + 1
this.showall = false
}
if (res && res[2]) {
let unfold_packup_width = res[2].height - 1.5 || 22
this.unfold_packup_line = unfold_packup_width
}
})
}, 100)
})
},
deep: true,
immediate: true,
},
},
}
</script>
<!-- #endif -->
<style lang="scss">
.zh-readMore {
position: relative;
.zh-readMore-wrapper {
overflow: hidden;
display: flex;
.zh-text {
position: relative;
line-height: 1.5;
text-align: justify;
text-overflow: ellipsis;
word-break: break-all;
transition: var(--duration) max-height linear;
}
.zh-text::before {
float: right;
height: calc(100% - var(--unfold_packup_line));
content: '';
}
.zh-open {
position: relative;
float: right;
clear: both;
line-height: 1.5;
z-index: 2;
.zh-open-text {
margin-left: 6rpx;
}
}
.zh-fewer {
display: inline-block;
.zh-fewer-text {
margin-left: 6rpx;
}
}
}
}
.zh-ellipsis {
font-size: 30rpx;
color: #434343;
}
.zh-overflowcont {
position: absolute;
top: -10000px;
left: -10000px;
width: 100%;
line-height: 1.5;
text-align: justify;
text-overflow: ellipsis;
word-break: break-all;
.zh-overflowcont-text {
display: block;
}
.zh-overflowcont-open {
margin-left: 6rpx;
}
}
</style>

41
pages/home/team-head.vue
View File

@ -7,7 +7,7 @@
</view>
<view class="w-0 flex-grow">
<view class="flex items-center mb-10">
<view class="team-name flex-shrink-0">{{ team.name }}</view>
<view class="team-name truncate flex-shrink-0" :style="teamStyle">{{ team.name }}</view>
<view v-if="teams.length > 1" class="flex-shrink-0 flex items-center switch-btn ml-10"
@click="showDropDown = true">
<image class="switch-icon" src="/static/home/switch-team.png" mode="aspectFit"></image>
@ -52,11 +52,28 @@
</scroll-view>
</view>
</view>
<view v-if="qrcode && qrcode.guide" class="team-introduce-wrapper">
<view v-if="team && team.teamTroduce" class="team-introduce-wrapper" @click="toTeamDetail">
<view class="team-introduce flex items-center">
<view class="team-introduce-border"></view>
<view class="triangle-wrapper">
<view class="team-triangle"></view>
</view>
<!-- <image class="laba-icon flex-shrink-0" src="/static/home/speaker-intro.png" mode="aspectFit"></image> -->
<!-- <view class="introduce-text flex-grow line-clamp-3">
团队介绍: {{ team.teamTroduce }}
</view> -->
<!-- <expandable-text textStyle="color:#333;font-size:24rpx" expandStyle="font-size:24rpx"
:longText="team.teamTroduce + team.teamTroduce" :line="3" :lineHeight="36" expandText="展开" foldText="收起" /> -->
<!-- <multi-lines-text :line="3" :text="team.teamTroduce + team.teamTroduce" :showButton="true" expandText="展开"
collapseText="收起" buttonTextColor="#333" /> -->
<zh-read-more :text="team.teamTroduce" :textStyle="{ color: '#333', 'font-size': '28rpx' }"
:unfoldTextStyle="{ 'font-size': '28rpx', 'color': '#0074ff' }"
:packupTextStyle="{ 'font-size': '28rpx', 'color': '#0074ff' }" />
</view>
</view>
<!-- <view v-if="qrcode && qrcode.guide" class="team-introduce-wrapper">
<view class="team-introduce flex items-center">
<!-- 边框层 -->
<view class="team-introduce-border"></view>
<!-- 顶部小三角形 -->
<view class="triangle-wrapper">
<view class="team-triangle"></view>
</view>
@ -65,7 +82,7 @@
{{ qrcode.guide }}
</view>
</view>
</view>
</view> -->
</view>
<view v-if="showDropDown" class="mask" @click="showDropDown = false"></view>
</template>
@ -73,7 +90,9 @@
import { computed, ref, onMounted, watch } from "vue";
import groupAvatar from "@/components/group-avatar.vue";
// import ExpandableText from "@/components/expandable-text/expandable-text.vue"
// import MultiLinesText from "@/components/multi-lines-text/multi-lines-text.vue";
import zhReadMore from "@/components/zh-readMore/zh-readMore.vue";
const statusBarHeight = ref("50px");
const menuButtonInfo = ref(null);
const showDropDown = ref(false);
@ -97,6 +116,7 @@ const qrcode = computed(() => {
const qrcodes = props.team && Array.isArray(props.team.qrcodes) ? props.team.qrcodes : [];
return qrcodes[0] || ''
})
const teamStyle = computed(() => `max-width:${props.teams.length ? 'calc(100% - 60rpx)' : '100%'}`)
function select(team) {
emits("changeTeam", team);
@ -173,7 +193,7 @@ onMounted(() => {
.team-introduce-wrapper {
padding: 0 30rpx;
margin-top: 20rpx;
/* margin-top: 12rpx; */
margin-bottom: 30rpx;
position: relative;
z-index: 2;
@ -187,7 +207,7 @@ onMounted(() => {
rgba(255, 255, 255, 0.4) 13.34%,
rgba(255, 255, 255, 0.6) 99.17%);
border-radius: 16rpx;
padding: 20rpx 20rpx 20rpx 0;
padding: 20rpx;
position: relative;
overflow: visible;
}
@ -240,12 +260,11 @@ onMounted(() => {
}
.introduce-text {
max-width: 594rpx;
color: #000000;
color: #333;
font-size: 24rpx;
font-style: normal;
font-weight: 400;
line-height: normal;
line-height: 36rpx;
}
.line-clamp-2 {

9
pages/team/team-detail.vue
View File

@ -11,7 +11,7 @@
<view class="corp-title text-sm text-gray truncate">{{ corpName }}</view>
</view>
</view>
<view v-if="team.teamTroduce" class="px-15 leading-normal text-base text-blue">
<view v-if="team.teamTroduce" class="mt-12 px-15 leading-normal text-base text-blue">
{{ team.teamTroduce }}
</view>
<view class="pt-15"></view>
@ -116,9 +116,6 @@ async function getTeam() {
onLoad(options => {
corpId.value = options.corpId;
teamId.value = options.teamId;
console.clear()
console.log(options.corpName)
console.log(decodeURIComponent(options.corpName || ''))
corpName.value = decodeURIComponent(options.corpName || '');
})
onShow(() => {
@ -152,11 +149,11 @@ page {
}
.detail-wrapper {
transform: translateY(200rpx);
transform: translateY(40rpx);
background: #F5FAFF;
border-top-left-radius: 24rpx;
border-top-right-radius: 24rpx;
min-height: calc(100vh - 200rpx);
min-height: calc(100vh - 40rpx);
padding-bottom: 80rpx;
overflow: hidden;
}