uni-zhihuikuangshan/components/t-o-news-tab-1/t-o-news-tab-1.vue

<template>
	<view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="label" @click="change_active(index)">
					<view class="left">
						<view class="icon">
							<image src="./icon/icon.png" mode=""></image>
						</view>
						<view class="name">{{item.category}}</view>
					</view>
					<view class="right">
						<view class="tip" v-if="active != index && item.no_num != 0">
							<view class="tip_text">未处理</view>
							<view class="tip_num">{{item.no_num}}</view>
						</view>
						<view class="icon" v-if="active != index">
							<uni-icons type="bottom" size="20" color="#e5e5e5"></uni-icons>
						</view>
						<view class="icon" v-if="active == index">
							<uni-icons type="top" size="20" color="#e5e5e5"></uni-icons>
						</view>
					</view>
				</view>
				<view class="content" v-if="active == index">
					<view class="item" v-for="(item_2,index_2) in item.children" :key="index_2">
						<view class="title">
							<view class="icon"></view>
							<view class="text">{{item_2.title}}</view>
						</view>
						<view class="btn_box">
							<view class="btn" @click.stop="go_list(item_2.title,item_2.table,item_2.num,2)">
								<view class="text">未完成：<text>{{item_2.series[1].value}} 个</text></view>
							</view>
							<view class="btn" @click.stop="go_statistical_chart(item_2.title,item_2.table)">
								<view class="text">查看统计</text></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>

	</view>
</template>

<script>
	export default {
		name: "t-o-news-tab-1",
		data() {
			return {
				active:999,
				list:[]
				
			};
		},
		mounted() {
			this.get_data()
		},
		methods:{
			change_active(index) {
				console.log(index)
				if(this.active == index){
					this.active = 999
				}else{
					this.active = index
				}
			},
			
			get_data(){
				this.$api.five_fixed_fiveFixedNewCategory({
					
				}).then((res)=>{
					// console.log(res.data.content.data)
					
					this.list = res.data.content.data
					
					let num = 0
					
					this.list.forEach((item,index)=>{
						num = num + item.no_num
					})
					
					if(num > 0){
						uni.setTabBarBadge({
							index: 1,
							text: '' + num + ''
						})
					}
					
				})
			},
			go_list(title,table,num,status){
				console.log(title,table,num,status)
				
				uni.navigateTo({
					url: "../../origanization/news/tab_1/all_list/all_list?title=" + title + "&table=" + table + "&num=" + num + "&status=" + status
				})
			},
			
			// 统计详情
			go_statistical_chart(title,table){
				uni.navigateTo({
					url:"../../origanization/news/tab_1/statistical_chart/statistical_chart?title=" + title + "&table=" + table
				})
			}
		}
		
	}
</script>

<style lang="scss">
	.list{
		box-sizing: border-box;
		padding: 25rpx;
		.item{
			margin-bottom: 20rpx;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			
			.label{
				box-sizing: border-box;
				padding: 0 25rpx;
				
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100rpx;
				
				.left{
					display: flex;
					align-items: center;
					.icon{
						margin-right: 20rpx;
						image{
							width: 32rpx;
							height: 32rpx;
							display: block;
						}
					}
					.name{
						width: 300rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				.right{
					display: flex;
					.tip{
						display: flex;
						align-items: center;
						.tip_text{
							font-size: 26rpx;
							color: #FE6A5C;
						}
						.tip_num{
							margin: 0 20rpx;
							font-size: 28rpx;
							color: #FFFFFF;
							background-color: #FE6A5C;
							border-radius: 10rpx;
							padding: 2rpx 10rpx;
							
						}
					}
					.icon{
						
					}
				}
						
			}
			.content{
				background-color: #FFFFFF;
				box-sizing: border-box;
				padding: 0 25rpx 10rpx;
				.item{
					border-top: 2rpx dashed #DCDCDC;
					.title{
						margin-left: 20rpx;
						display: flex;
						align-items: center;
						height: 90rpx;
						.icon{
							width: 16rpx;
							height: 16rpx;
							background-color: #01A0E8;
							border-radius: 50%;
						}
						.text{
							margin-left: 20rpx;
							font-size: 30rpx;
							font-weight: 700;
						}
					}
					.btn_box{
						display: flex;
						justify-content: space-around;
						.btn{
							width: 200rpx;
							text-align: center;
							color: #999999;
							font-size: 28rpx;
							padding: 6rpx 20rpx;
							border: 1rpx solid #999;
							border-radius: 30rpx;
							text{
								color: #FE6A5C;
							}
						}
					}
				}
			}
		}
	}
</style>