Compare commits
No commits in common. "13fb1b878736d216d2d65e422e6ac65c908be9be" and "9e16db7f0238d8390230a0fea28674dbc06991fb" have entirely different histories.
13fb1b8787
...
9e16db7f02
11
App.vue
11
App.vue
@ -91,10 +91,6 @@ page {
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.block {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex {
|
.flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
@ -402,13 +398,6 @@ page {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line-clamp-3 {
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-line-clamp: 3;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-full {
|
.h-full {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="flex flex-col items-center justify-center overflow-hidden bg-gray border"
|
<view :class="['flex', 'flex-col', 'items-center', 'justify-center', 'overflow-hidden', 'bg-gray', 'border', { 'rounded-circle': classType === 'circle' }]"
|
||||||
:class="classType === 'circle' ? 'rounded-circle' : 'rounded-square'"
|
:style="`width:${size.lg}rpx; height: ${size.lg}rpx;`" @click="reGenerate()">
|
||||||
:style="`width:${size.lg}rpx; height: ${size.lg}rpx;`">
|
|
||||||
<view v-for="(item, index) in groups.list" :key="index" class="flex justify-center">
|
<view v-for="(item, index) in groups.list" :key="index" class="flex justify-center">
|
||||||
<image v-for="(url, idx) in item" :key="idx" :src="url" :style="groups.style"></image>
|
<image v-for="(url, idx) in item" :key="idx" :src="url" :style="groups.style"></image>
|
||||||
</view>
|
</view>
|
||||||
@ -61,13 +60,18 @@ const groups = computed(() => {
|
|||||||
return { list: [list.value.slice(0, 1)], style: `width: ${size.value.lg}rpx; height: ${size.value.lg}rpx;` }
|
return { list: [list.value.slice(0, 1)], style: `width: ${size.value.lg}rpx; height: ${size.value.lg}rpx;` }
|
||||||
})
|
})
|
||||||
|
|
||||||
|
function reGenerate() {
|
||||||
|
console.log(list.value)
|
||||||
|
console.log(groups.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
function getList(size = 9) {
|
||||||
|
return new Array(size).fill(1).map((_, idx) => `https://picsum.photos/100/100?${Date.now()}_${idx}`)
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.rounded-circle {
|
.rounded-circle {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rounded-square {
|
|
||||||
border-radius: 16rpx;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,492 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,10 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="consult-container">
|
<view class="consult-container">
|
||||||
<view class="consult-title">团队服务</view>
|
<view class="consult-title">咨询互动</view>
|
||||||
|
|
||||||
<view class="consult-grid">
|
<view class="consult-grid">
|
||||||
<view class="consult-item" v-for="item in consultItems" :class="hideMenus[item.id] ? 'consult-item--hiden' : ''"
|
<view class="consult-item" v-for="item in consultItems" :key="item.id" @click="handleItemClick(item)">
|
||||||
:key="item.id" @click="handleItemClick(item)">
|
|
||||||
<view class="relative item-icon">
|
<view class="relative item-icon">
|
||||||
<image :src="item.icon" class="icon-img" mode="aspectFill" />
|
<image :src="item.icon" class="icon-img" mode="aspectFill" />
|
||||||
<view v-if="badgeMap[item.badge]" class="item-dot"></view>
|
<view v-if="badgeMap[item.badge]" class="item-dot"></view>
|
||||||
@ -20,7 +19,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { computed, ref, watch } from "vue";
|
import { ref, watch } from "vue";
|
||||||
import { storeToRefs } from "pinia";
|
import { storeToRefs } from "pinia";
|
||||||
import useAccount from "@/store/account";
|
import useAccount from "@/store/account";
|
||||||
import api from "@/utils/api";
|
import api from "@/utils/api";
|
||||||
@ -81,13 +80,6 @@ const consultItems = ref([
|
|||||||
badge: 'rate'
|
badge: 'rate'
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
const hideMenus = computed(() => {
|
|
||||||
const result = {};
|
|
||||||
if (!props.team || !props.team.creator) {
|
|
||||||
result.chat = true;
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
})
|
|
||||||
|
|
||||||
function handleItemClick(item) {
|
function handleItemClick(item) {
|
||||||
// 聊天咨询需要选择咨询人
|
// 聊天咨询需要选择咨询人
|
||||||
@ -235,10 +227,6 @@ defineExpose({
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.consult-item--hiden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-icon {
|
.item-icon {
|
||||||
width: 80rpx;
|
width: 80rpx;
|
||||||
height: 80;
|
height: 80;
|
||||||
|
|||||||
@ -1,16 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<page-loading v-if="loading && teams.length === 0" />
|
<page-loading v-if="loading && teams.length === 0" />
|
||||||
<full-page v-else-if="teams.length && team" class="home-container" :pageStyle="pageStyle">
|
<full-page v-else-if="teams.length && team" class="home-container" :pageStyle="pageStyle">
|
||||||
<!-- <template #header> -->
|
<template #header>
|
||||||
<team-head :team="team" :teams="teams" @changeTeam="changeTeam" />
|
<team-head :team="team" :teams="teams" @changeTeam="changeTeam" />
|
||||||
<!-- </template> -->
|
</template>
|
||||||
<view class="home-section home-section--first">
|
<view class="home-section home-section--first">
|
||||||
<customer-archive ref="archiveRef" :corpId="corpId" :corpUserIds="corpUserIds" :team="team"
|
<customer-archive ref="archiveRef" :corpId="corpId" :corpUserIds="corpUserIds" :team="team"
|
||||||
@update:customers="handleCustomersUpdate" />
|
@update:customers="handleCustomersUpdate" />
|
||||||
</view>
|
</view>
|
||||||
<view class="home-section">
|
|
||||||
<team-guide :team="team" />
|
|
||||||
</view>
|
|
||||||
<view class="home-section">
|
<view class="home-section">
|
||||||
<consult ref="consultRef" :corpId="corpId" :teamId="team.teamId" :team="team" :customers="customers" />
|
<consult ref="consultRef" :corpId="corpId" :teamId="team.teamId" :team="team" :customers="customers" />
|
||||||
</view>
|
</view>
|
||||||
@ -38,8 +35,7 @@ import articleList from "./article-list.vue";
|
|||||||
import consult from "./consult.vue";
|
import consult from "./consult.vue";
|
||||||
import customerArchive from "./customer-archive.vue";
|
import customerArchive from "./customer-archive.vue";
|
||||||
import teamHead from "./team-head.vue";
|
import teamHead from "./team-head.vue";
|
||||||
import teamGuide from "./team-guide.vue";
|
import teamMate from "./team-mate.vue";
|
||||||
// import teamMate from "./team-mate.vue";
|
|
||||||
import ycHome from "./yc-home.vue";
|
import ycHome from "./yc-home.vue";
|
||||||
import pageLoading from "./loading.vue";
|
import pageLoading from "./loading.vue";
|
||||||
|
|
||||||
|
|||||||
@ -1,121 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="px-15">
|
|
||||||
<view v-if="qrcode && qrcode.guide" class="team-introduce-wrapper rounded shadow-lg">
|
|
||||||
<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-2">
|
|
||||||
{{ qrcode.guide }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { computed } from "vue";
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
team: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({}),
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const qrcode = computed(() => {
|
|
||||||
const qrcodes = props.team && Array.isArray(props.team.qrcodes) ? props.team.qrcodes : [];
|
|
||||||
return qrcodes[0] || ''
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
.laba-icon {
|
|
||||||
width: 48rpx;
|
|
||||||
height: 48rpx;
|
|
||||||
margin-left: 12rpx;
|
|
||||||
margin-right: 12rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.team-introduce-wrapper {
|
|
||||||
background: #fff;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.team-introduce {
|
|
||||||
width: 690rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background: linear-gradient(186deg,
|
|
||||||
rgba(255, 255, 255, 0.4) 13.34%,
|
|
||||||
rgba(255, 255, 255, 0.6) 99.17%);
|
|
||||||
border-radius: 16rpx;
|
|
||||||
padding: 20rpx;
|
|
||||||
position: relative;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.team-introduce-border {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
border: 1px solid #fff;
|
|
||||||
border-radius: 16rpx;
|
|
||||||
pointer-events: none;
|
|
||||||
/* -webkit-mask-image: linear-gradient(to right, #000 0, #000 50rpx, transparent 50rpx, transparent 70rpx, #000 70rpx),
|
|
||||||
linear-gradient(#000, #000);
|
|
||||||
mask-image: linear-gradient(to right, #000 0, #000 50rpx, transparent 50rpx, transparent 70rpx, #000 70rpx),
|
|
||||||
linear-gradient(#000, #000);
|
|
||||||
-webkit-mask-size: 100% 1px, 100% 100%;
|
|
||||||
mask-size: 100% 1px, 100% 100%;
|
|
||||||
-webkit-mask-position: 0 0, 0 1px;
|
|
||||||
mask-position: 0 0, 0 1px;
|
|
||||||
-webkit-mask-repeat: no-repeat;
|
|
||||||
mask-repeat: no-repeat; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.triangle-wrapper {
|
|
||||||
position: absolute;
|
|
||||||
top: -12rpx;
|
|
||||||
left: 60rpx;
|
|
||||||
width: 32rpx;
|
|
||||||
height: 12rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 10;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.team-triangle {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
bottom: -9rpx;
|
|
||||||
width: 16rpx;
|
|
||||||
height: 16rpx;
|
|
||||||
background: linear-gradient(186deg,
|
|
||||||
rgba(255, 255, 255, 0.4) 13.34%,
|
|
||||||
rgba(255, 255, 255, 0.6) 99.17%);
|
|
||||||
transform: translateX(-50%) rotate(45deg);
|
|
||||||
border-top: 1px solid #fff;
|
|
||||||
border-left: 1px solid #fff;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.introduce-text {
|
|
||||||
color: #333;
|
|
||||||
font-size: 24rpx;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 36rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line-clamp-2 {
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
line-clamp: 2;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -3,11 +3,11 @@
|
|||||||
<view :style="{ height: statusBarHeight }" class="status-bar"></view>
|
<view :style="{ height: statusBarHeight }" class="status-bar"></view>
|
||||||
<view class="relative z-3 flex items-center px-15 py-12 header-bar">
|
<view class="relative z-3 flex items-center px-15 py-12 header-bar">
|
||||||
<view class="flex-shrink-0 mr-5" @click="toTeamDetail">
|
<view class="flex-shrink-0 mr-5" @click="toTeamDetail">
|
||||||
<group-avatar classType="square" :size="120" :avatarList="currentTeam ? currentTeam.avatarList : []" />
|
<group-avatar :size="120" :avatarList="currentTeam ? currentTeam.avatarList : []" />
|
||||||
</view>
|
</view>
|
||||||
<view class="w-0 flex-grow">
|
<view class="w-0 flex-grow">
|
||||||
<view class="flex items-center mb-10">
|
<view class="flex items-center mb-10">
|
||||||
<view class="team-name truncate flex-shrink-0" :style="teamStyle">{{ team.name }}</view>
|
<view class="team-name flex-shrink-0">{{ team.name }}</view>
|
||||||
<view v-if="teams.length > 1" class="flex-shrink-0 flex items-center switch-btn ml-10"
|
<view v-if="teams.length > 1" class="flex-shrink-0 flex items-center switch-btn ml-10"
|
||||||
@click="showDropDown = true">
|
@click="showDropDown = true">
|
||||||
<image class="switch-icon" src="/static/home/switch-team.png" mode="aspectFit"></image>
|
<image class="switch-icon" src="/static/home/switch-team.png" mode="aspectFit"></image>
|
||||||
@ -52,28 +52,11 @@
|
|||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="team && team.teamTroduce" class="team-introduce-wrapper" @click="toTeamDetail">
|
<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>
|
|
||||||
<!-- <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 flex items-center">
|
||||||
|
<!-- 边框层 -->
|
||||||
<view class="team-introduce-border"></view>
|
<view class="team-introduce-border"></view>
|
||||||
|
<!-- 顶部小三角形 -->
|
||||||
<view class="triangle-wrapper">
|
<view class="triangle-wrapper">
|
||||||
<view class="team-triangle"></view>
|
<view class="team-triangle"></view>
|
||||||
</view>
|
</view>
|
||||||
@ -82,7 +65,7 @@
|
|||||||
{{ qrcode.guide }}
|
{{ qrcode.guide }}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view> -->
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="showDropDown" class="mask" @click="showDropDown = false"></view>
|
<view v-if="showDropDown" class="mask" @click="showDropDown = false"></view>
|
||||||
</template>
|
</template>
|
||||||
@ -90,9 +73,7 @@
|
|||||||
import { computed, ref, onMounted, watch } from "vue";
|
import { computed, ref, onMounted, watch } from "vue";
|
||||||
|
|
||||||
import groupAvatar from "@/components/group-avatar.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 statusBarHeight = ref("50px");
|
||||||
const menuButtonInfo = ref(null);
|
const menuButtonInfo = ref(null);
|
||||||
const showDropDown = ref(false);
|
const showDropDown = ref(false);
|
||||||
@ -116,7 +97,6 @@ const qrcode = computed(() => {
|
|||||||
const qrcodes = props.team && Array.isArray(props.team.qrcodes) ? props.team.qrcodes : [];
|
const qrcodes = props.team && Array.isArray(props.team.qrcodes) ? props.team.qrcodes : [];
|
||||||
return qrcodes[0] || ''
|
return qrcodes[0] || ''
|
||||||
})
|
})
|
||||||
const teamStyle = computed(() => `max-width:${props.teams.length ? 'calc(100% - 60rpx)' : '100%'}`)
|
|
||||||
|
|
||||||
function select(team) {
|
function select(team) {
|
||||||
emits("changeTeam", team);
|
emits("changeTeam", team);
|
||||||
@ -193,7 +173,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
.team-introduce-wrapper {
|
.team-introduce-wrapper {
|
||||||
padding: 0 30rpx;
|
padding: 0 30rpx;
|
||||||
/* margin-top: 12rpx; */
|
margin-top: 20rpx;
|
||||||
margin-bottom: 30rpx;
|
margin-bottom: 30rpx;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
@ -207,7 +187,7 @@ onMounted(() => {
|
|||||||
rgba(255, 255, 255, 0.4) 13.34%,
|
rgba(255, 255, 255, 0.4) 13.34%,
|
||||||
rgba(255, 255, 255, 0.6) 99.17%);
|
rgba(255, 255, 255, 0.6) 99.17%);
|
||||||
border-radius: 16rpx;
|
border-radius: 16rpx;
|
||||||
padding: 20rpx;
|
padding: 20rpx 20rpx 20rpx 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
@ -260,11 +240,12 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.introduce-text {
|
.introduce-text {
|
||||||
color: #333;
|
max-width: 594rpx;
|
||||||
|
color: #000000;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 36rpx;
|
line-height: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line-clamp-2 {
|
.line-clamp-2 {
|
||||||
|
|||||||
@ -1,55 +1,76 @@
|
|||||||
<template>
|
<template>
|
||||||
<full-page :pageStyle="pageStyle">
|
<full-page>
|
||||||
<view v-if="team" class="detail-wrapper">
|
<view v-if="team" class="p-15">
|
||||||
<view class="linear-bg">
|
<view class="flex items-center">
|
||||||
<view class="flex items-center pt-15 px-15">
|
<view class="flex-shrink-0 mr-10">
|
||||||
<view class="flex-shrink-0 mr-10">
|
<group-avatar :size="96" :avatarList="avatarList" />
|
||||||
<group-avatar classType="square" :size="128" :avatarList="avatarList" />
|
</view>
|
||||||
</view>
|
<view class="flex-grow w-0 leading-noraml">
|
||||||
<view class="w-0 flex-grow">
|
<view class="mb-5 text-lg font-semibold text-dark">{{ team.name }}</view>
|
||||||
<view class="name-title font-semibold text-dark truncate">{{ team.name }}</view>
|
<view class="text-base text-gray">
|
||||||
<view class="corp-title text-gray truncate">{{ corpName }}</view>
|
{{ corpName }}
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="mt-15 px-15 leading-normal text-base text-blue">
|
|
||||||
{{ team.teamTroduce }}
|
|
||||||
</view>
|
|
||||||
<view class="pt-15"></view>
|
|
||||||
<image v-if="teammate.leaders.length" class="block mx-auto icon-role" src="/static/teamleader.svg">
|
|
||||||
</image>
|
|
||||||
<view v-for="i in teammate.leaders" :key="i._id" class="mt-15 flex flex-col items-center">
|
|
||||||
<view class="ablum text-center p-10 flex flex-col items-center rounded-sm"
|
|
||||||
:class="friendlyMember[i.userid] ? 'ablum-pb' : ''" @click="toHomePage(i.userid)">
|
|
||||||
<image class="avatar mb-10" :src="i.avatar || '/static/default-avatar.png'"></image>
|
|
||||||
<view class="w-full h-name text-base text-dark font-semibold truncate">{{ i.anotherName }}</view>
|
|
||||||
<view class="w-full h-job text-sm text-gray truncate">
|
|
||||||
{{ memberJob[i.userid] }}
|
|
||||||
</view>
|
|
||||||
<view v-if="friendlyMember[i.userid]" class="friend-bottom" @click.stop="toFriend(i.userid)">
|
|
||||||
可加好友
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="mt-15 border-box w-full px-15 leading-normal text-base text-blue">
|
|
||||||
个人介绍: {{ i.memberTroduce || '暂无介绍' }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<image v-if="teammate.members.length" class="block mt-30 mx-auto icon-role" src="/static/teammate.svg"></image>
|
|
||||||
<view class="mt-15 px-15 flex flex-wrap" :class="teammate.members.length === 1 ? 'justify-center' : ''">
|
|
||||||
<view v-for="i in teammate.members" :key="i._id"
|
|
||||||
class="ablum ablum--member text-center p-10 flex flex-col items-center rounded-sm"
|
|
||||||
:class="friendlyMember[i.userid] ? 'ablum-pb' : ''" @click="toHomePage(i.userid)">
|
|
||||||
<image class="avatar mb-10" :src="i.avatar || '/static/default-avatar.png'"></image>
|
|
||||||
<view class="h-name w-full text-base text-dark font-semibold truncate px-10">{{ i.anotherName }}</view>
|
|
||||||
<view class="h-job w-full text-sm text-gray truncate px-10">
|
|
||||||
{{ memberJob[i.userid] }}
|
|
||||||
</view>
|
|
||||||
<view v-if="friendlyMember[i.userid]" class="friend-bottom" @click.stop="toFriend(i.userid)">
|
|
||||||
可加好友
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="flex items-center justify-between mt-12" @click="showAllIntroduce = !showAllIntroduce">
|
||||||
|
<view class="text-dark font-semibold">团队介绍</view>
|
||||||
|
<uni-icons :type="showAllIntroduce ? 'up' : 'down'" size="20" color="#666"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<view v-if="team.teamTroduce" class="mt-10 text-base text-dark leading-normal break-all pre-wrap"
|
||||||
|
:class="showAllIntroduce ? '' : 'line-clamp-2'" @click="showAllIntroduce = !showAllIntroduce">
|
||||||
|
{{ team.teamTroduce }}
|
||||||
|
</view>
|
||||||
|
<template v-if="teammate.leaders.length">
|
||||||
|
<view class="min-w-100 inline-block mt-12 px-10 py-5 text-center text-base text-white bg-primary rounded-sm">
|
||||||
|
团队负责人
|
||||||
|
</view>
|
||||||
|
<view v-for="i in teammate.leaders" :key="i._id" class="mt-12 flex p-10 border-primary rounded-sm"
|
||||||
|
@click="toHomePage(i.userid)">
|
||||||
|
<image class="flex-shrink-0 mr-10 avatar" :src="i.avatar || '/static/default-avatar.png'"></image>
|
||||||
|
<view class="w-0 flex-grow leading-normal">
|
||||||
|
<view class="flex items-center justify-between">
|
||||||
|
<view class="flex-shrink-0 mr-5 view-lg text-dark font-semibold">{{ i.anotherName }}</view>
|
||||||
|
<view class="w-0 flex-grow truncate text-base text-dark">
|
||||||
|
{{ memberJob[i.userid] }}
|
||||||
|
</view>
|
||||||
|
<view v-if="friendlyMember[i.userid]"
|
||||||
|
class="flex-shrink-0 px-10 leading-normal text-sm border-auto text-primary rounded-full"
|
||||||
|
@click.stop="toFriend(i.userid)">
|
||||||
|
添加好友
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="line-clamp-2 text-base text-gray">
|
||||||
|
{{ i.memberTroduce || '暂无简介' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-if="teammate.members.length">
|
||||||
|
<view class="min-w-100 inline-block mt-12 px-10 py-5 text-center text-base text-white bg-primary rounded-sm">团队成员
|
||||||
|
</view>
|
||||||
|
<view v-for="i in teammate.members" :key="i._id" class="mt-12 flex p-10 border-primary rounded-sm"
|
||||||
|
@click="toHomePage(i.userid)">
|
||||||
|
<image class="flex-shrink-0 mr-10 avatar" :src="i.avatar || '/static/default-avatar.png'"></image>
|
||||||
|
<view class="w-0 flex-grow leading-normal">
|
||||||
|
<view class="flex items-center justify-between">
|
||||||
|
<view class="flex-shrink-0 mr-5 view-lg text-dark font-semibold">{{ i.anotherName }}</view>
|
||||||
|
<view class="w-0 flex-grow truncate text-base text-dark">
|
||||||
|
{{ memberJob[i.userid] }}
|
||||||
|
</view>
|
||||||
|
<view v-if="friendlyMember[i.userid]"
|
||||||
|
class="flex-shrink-0 px-10 leading-normal text-sm border-auto text-primary rounded-full"
|
||||||
|
@click.stop="toFriend(i.userid)">
|
||||||
|
添加好友
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="line-clamp-2 text-base text-gray">
|
||||||
|
{{ i.memberTroduce || '暂无简介' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
</full-page>
|
</full-page>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
@ -61,12 +82,11 @@ import api from '@/utils/api';
|
|||||||
import groupAvatar from '@/components/group-avatar.vue';
|
import groupAvatar from '@/components/group-avatar.vue';
|
||||||
import FullPage from '@/components/full-page.vue';
|
import FullPage from '@/components/full-page.vue';
|
||||||
|
|
||||||
const pageStyle = "background: linear-gradient(180deg, #065BD6 15.05%, #F6FAFA 95.37%) 0 0/100% 562rpx no-repeat, #F6FAFA;";
|
|
||||||
|
|
||||||
const corpId = ref('');
|
const corpId = ref('');
|
||||||
const teamId = ref('');
|
const teamId = ref('');
|
||||||
const team = ref(null);
|
const team = ref(null);
|
||||||
const corpName = ref('');
|
const corpName = ref('');
|
||||||
|
const showAllIntroduce = ref(false);
|
||||||
const { memberJob, memberList: list } = useJob();
|
const { memberJob, memberList: list } = useJob();
|
||||||
|
|
||||||
const memberList = computed(() => team.value && Array.isArray(team.value.memberList) ? team.value.memberList : [])
|
const memberList = computed(() => team.value && Array.isArray(team.value.memberList) ? team.value.memberList : [])
|
||||||
@ -137,103 +157,11 @@ page {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
width: 216rpx;
|
width: 120rpx;
|
||||||
height: 240rpx;
|
height: 128rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pre-wrap {
|
.pre-wrap {
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-wrapper {
|
|
||||||
transform: translateY(40rpx);
|
|
||||||
background: #F5FAFF;
|
|
||||||
border-top-left-radius: 24rpx;
|
|
||||||
border-top-right-radius: 24rpx;
|
|
||||||
min-height: calc(100vh - 40rpx);
|
|
||||||
padding-bottom: 80rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name-title {
|
|
||||||
height: 64rpx;
|
|
||||||
line-height: 64rpx;
|
|
||||||
font-size: 44rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.corp-title {
|
|
||||||
height: 44rpx;
|
|
||||||
line-height: 44rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-blue {
|
|
||||||
color: #516276;
|
|
||||||
}
|
|
||||||
|
|
||||||
.linear-bg {
|
|
||||||
background: linear-gradient(180deg, #ffffff 0%, #f5faff 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-role {
|
|
||||||
margin-top: 50rpx;
|
|
||||||
margin-bottom: 38rpx;
|
|
||||||
width: 280rpx;
|
|
||||||
height: 60rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ablum {
|
|
||||||
width: 336rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: 1rpx solid #9BB7D8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ablum-pb {
|
|
||||||
position: relative;
|
|
||||||
padding-bottom: 64rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ablum--member {
|
|
||||||
width: 332rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ablum--member:nth-child(2n) {
|
|
||||||
margin-left: 24rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ablum--member:nth-child(n+3) {
|
|
||||||
margin-top: 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mt-5 {
|
|
||||||
margin-top: 10rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.friend-bottom {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 48rpx;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 48rpx;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #fff;
|
|
||||||
font-weight: bold;
|
|
||||||
background: #065BD6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mt-30 {
|
|
||||||
margin-top: 60rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-name {
|
|
||||||
height: 20px;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-job {
|
|
||||||
height: 17px;
|
|
||||||
line-height: 17px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 8.7 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 8.1 KiB |
Loading…
x
Reference in New Issue
Block a user