uni-zhihuikuangshan-2/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_h5(item_2.title,item_2.table,item_2.num,1)">
								<view class="icon">
									<image src="./icon/icon_ok.png" mode=""></image>
								</view>
								<view class="text">已完成：<text>{{item_2.series[0].value}}</text></view>
								<view class="right">
									<uni-icons type="right" color="#e5e5e5"></uni-icons>
								</view>
							</view>
							<view class="btn" @click.stop="go_h5(item_2.title,item_2.table,item_2.num,2)">
								<view class="icon">
									<image src="./icon/icon_no.png" mode=""></image>
								</view>
								<view class="text">未完成：<text>{{item_2.series[1].value}}</text></view>
								<view class="right">
									<uni-icons type="right" color="#e5e5e5"></uni-icons>
								</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
				})
			},
			go_h5(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
				})
			}
		}
		
	}
</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{
							display: flex;
							align-items: center;
							padding: 0 20rpx;
							height: 70rpx;
							.icon{
								image{
									width: 36rpx;
									height: 36rpx;
									display: block;
								}
							}
							.text{
								margin-left: 10rpx;
								color: #999999;
								font-size: 26rpx;
								text{
									font-size: 28rpx;
									color: #000;
								}
							}
							.right{
								margin-left: 10rpx;
							}
						}
					}
				}
			}
		}
	}
</style>