warst/warst-h5/pages/waitHandle/index.vue

<template>
	<!-- 待办 -->
	<view class="wait-handle">
		<c-navbar :leftIconSize="0" title="待办"> </c-navbar>
		<view class="main">
			<view class="header-tabs">
				<u-tabs
					:current="current"
					:itemStyle="itemStyle"
					:activeStyle="activeStyle"
					:list="tabsList"
					@change="tabsChange"
				></u-tabs>
			</view>
			<view class="content">
				<swiper
					class="swiper"
					:current="current"
					@change="swiperChange"
				>
					<swiper-item
						style="padding: 14px; box-sizing: border-box"
						:item-id="item.id"
						:key="item.idx"
						v-for="item in tabsList"
					>
						<listContent
							@approval="approval"
							:key="reloadCode"
							:type="item.idx"
						/>
					</swiper-item>
				</swiper>
			</view>
			<!-- 审批-form  -->
			<approval-fm
				@reload="reload"
				:rId="rId"
				:isShow.sync="isShow"
			></approval-fm>
		</view>
	</view>
</template>

<script>
import listContent from './listContent.vue';
import ApprovalFm from '@/pages/waitHandle/approvalDetail/approvalFm.vue';

export default {
	name: 'waitHandle',
	components: { listContent, ApprovalFm },
	data() {
		return {
			rId: undefined,
			isShow: false,
			reloadCode: '',
			itemStyle: {
				width: '33.33%',
				height: '44px',
			},
			activeStyle: {
				color: '#436FF6',
			},
			current: 0,
			tabsList: [
				{
					name: '我发起',
					idx: 0,
					badge: {
						value: 0,
					},
				},
				{
					name: '我审批',
					idx: 1,
					badge: {
						value: 5,
					},
				},
				{
					name: '抄送我',
					idx: 2,
					badge: {
						value: 0,
					},
				},
			],
		};
	},
	onShow() {
		this.reload();
	},
	methods: {
		reload() {
			// 刷新
			this.reloadCode = Math.random().toString(36).slice(-6);
		},
		approval(item) {
			this.rId = item.id;
			this.isShow = true;
		},
		tabsChange(e) {
			this.current = e.index;
		},
		swiperChange(e) {
			this.current = e.detail.current;
		},
	},
};
</script>

<style scoped lang="scss">
.wait-handle {
	display: flex;
	flex-direction: column;
	.main {
		flex: 1;
		display: flex;
		flex-direction: column;

		.content {
			flex: 1;
			.swiper {
				height: 100%;
			}
		}

		.header-tabs {
			background-color: #fff;
			/deep/ .u-tabs__wrapper__nav__line {
				background-color: #436ff6 !important;
			}
			/deep/ .u-tabs__wrapper__nav__item__text {
				color: inherit;
			}
		}
	}
}
</style>