203 lines
3.5 KiB
Vue
203 lines
3.5 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="todo f-col aic">
|
|
<view class="f-col aic">
|
|
<view class="title_box f-row aic jcb" @click="tolist('')">
|
|
<view class="title f-row aic">
|
|
<image :src="`/static/my/${img}.png`" mode=""></image>
|
|
{{title}}
|
|
</view>
|
|
<view class="num">
|
|
{{total}}
|
|
</view>
|
|
</view>
|
|
<view class="list" v-if="list.length">
|
|
<view :class="['box',{'close':list.length>5&&open}]">
|
|
<view class="item_box">
|
|
<view @click="tolist(item.title)" class="item f-row aic" v-for="item,i in list" :key="i">
|
|
<view class="">
|
|
{{item.title}}
|
|
</view>
|
|
<text>{{item.num}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="more" v-show="list.length>5" @click="open = !open">
|
|
{{!open?'显示更多':'收起'}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
onMounted,
|
|
nextTick,
|
|
computed,
|
|
watch,
|
|
getCurrentInstance
|
|
} from 'vue';
|
|
import {
|
|
beforeJump
|
|
} from '@/utils/index.js';
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
img: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
list: {
|
|
type: Array,
|
|
default: function() {
|
|
return []
|
|
}
|
|
},
|
|
total: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
type:{
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
const open = ref(false)
|
|
const moreHeight = ref(null)
|
|
const CurrentInstance = getCurrentInstance()
|
|
watch(() => props.list, () => {
|
|
nextTick(() => {
|
|
uni.createSelectorQuery().in(CurrentInstance.proxy).select('.item_box')
|
|
.boundingClientRect(data => {
|
|
moreHeight.value = data?.height + 'px'
|
|
}).exec()
|
|
})
|
|
|
|
}, {
|
|
immediate: true
|
|
})
|
|
const tolist = (title) => {
|
|
let id = null
|
|
beforeJump('/pages/task/index', () => {
|
|
|
|
if (props.type == '0') {
|
|
id = 0
|
|
}
|
|
if (props.type == '1') {
|
|
id = 1
|
|
}
|
|
if (props.type == '2') {
|
|
return uni.navigateTo({
|
|
url: `/pages/task/self?title=${title}`
|
|
})
|
|
}
|
|
uni.navigateTo({
|
|
url: `/pages/task/index?id=${id}&title=${title}`
|
|
})
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: #F8F8F8;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
padding-top: 30rpx;
|
|
}
|
|
|
|
.todo {
|
|
.title_box {
|
|
width: 630rpx;
|
|
height: 108rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.16);
|
|
border-radius: 16rpx;
|
|
padding: 0 30rpx;
|
|
|
|
.title {
|
|
image {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.num {
|
|
width: 54rpx;
|
|
height: 54rpx;
|
|
background: url('../../static/my/num.png') no-repeat;
|
|
background-size: 54rpx 54rpx;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 54rpx;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
width: 570rpx;
|
|
padding: 20rpx 30rpx 30rpx 30rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.16);
|
|
border-radius: 0rpx 0rpx 16rpx 16rpx;
|
|
|
|
.box {
|
|
|
|
max-height: 120rpx;
|
|
transition: all .3s;
|
|
overflow: hidden;
|
|
|
|
.item_box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.item {
|
|
font-size: 28rpx;
|
|
height: 60rpx;
|
|
width: 50%;
|
|
|
|
view {
|
|
color: #666666;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
-o-text-overflow: ellipsis;
|
|
}
|
|
|
|
text {
|
|
color: #ED361D;
|
|
margin: 0 10rpx;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.close {
|
|
// height: 300rpx;
|
|
max-height: v-bind(moreHeight);
|
|
}
|
|
|
|
.more {
|
|
font-size: 28rpx;
|
|
color: #008DFF;
|
|
text-decoration: underline;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |