Web_TracerMethodology/pages/mission/components/mission-list/mission-list.vue

<template>
	<view class="mission-list">
		<scroll-view class="scroll-y" scroll-y="true">
			<list-item />
			<list-item />
			<view class="completed-box">
				<view class="btn-box">
					<view class="btn" @click="toggleBtn">
						<image class="icon" :src="`/static/${btnSetting.icon}.png`"></image>
						<text class="text">
						  {{ btnSetting.name }}
						</text>
					</view>
				</view>
				<list-item :isClose="true" v-if="showCloseList" />
			</view>
		</scroll-view>
		<tm-tabbar :permission="1" />
	</view>
</template>

<script>
	// 任务列表
	import listItem from './list-item.vue';
	export default {
		data(){
			return {
				// 是否展开历史任务
				showCloseList: false,
				btnSetting: {
					icon: 'up-icon', // 图标名
					name: '展示历史任务' // 按钮显示名字
				},
				closeList: [1, 2, 3]
			}
		},
		watch: {
			showCloseList(newVal, oldVal) {
				if(newVal != oldVal){
					this.btnSetting.icon = newVal ? 'up-icon' : 'down-ion';
					this.btnSetting.name = newVal ? '收起历史任务' : '展示历史任务';
				}
			}
		},
		methods: {
			toggleBtn() {
				this.showCloseList = !this.showCloseList
			}
		},
		components: {
			listItem
		}
	}
</script>

<style lang="less">
	.mission-list {
		height: 100%;
		padding-top: 15rpx;
		
		.scroll-y {
			height: calc(100% - 87.5rpx);
			
			.completed-box {
				
				.btn-box {
					display: flex;
					justify-content: center;
					margin-bottom: 25rpx;
					height: 50rpx;
					
					.btn {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 225rpx;
						height: 50rpx;
						border-radius: 37.5rpx;
						border: 1.25rpx solid #98A1B3;
						
						.icon {
							margin-right: 6.25rpx;
							width: 21.25rpx;
							height: 12.5rpx;
						}
						
						.text {
							font-size: 22.5rpx;
							color: #98A1B3;
						}
					}
				}
			}
		}
	}
</style>