xunjian_app/task_pages/taskarrment/taskarrment.vue

<template>
	<!-- 临时任务首页 -->
	<view class=" u-relative u-flex u-p-l-30 u-p-r-30 f-d-c">
		<navigator hover-class="none" url="../guarantee/guarantee" class="m-w u-m-t-30 u-flex u-row-right ">
			<u-image :src="feij" width="40" height="40" />
			<view class="u-m-l-8">派发任务</view>
		</navigator>
		<!-- guarantee -->
		<view class="m-w">
			<view style="width: 300rpx;">
				<u-tabs bar-width="80" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
		</view>
		<view class="u-flex u-m-t-30 u-flex-wrap u-row-between">
			<navigator hover-class="none" :url="`./tasklist/tasklist?staus=${current}&id=${1}`" 
				class="u-relative u-com-ite  ">
				<image class="back-img" :src="imgs.chaos"></image>
				<view class="item-pdi u-flex f-d-c u-clo-vew">
					<view class="m-w">处理中</view>
					<view class="item-center"></view>
					<view class="u-text-right m-w">{{count1}}</view>
				</view>
			</navigator>
			<navigator hover-class="none" :url="`./tasklist/tasklist?staus=${current}&id=${4}`"
				class="u-relative  u-com-ite  " style=" width: 335rpx;height: 129rpx;  ;">
				<image class="back-img" :src="imgs.chuli"></image>
				<view class="item-pdi u-flex f-d-c u-clo-vew">
					<view class="m-w">已超时</view>
					<view class="item-center"></view>
					<view class="u-text-right m-w">{{count4}}</view>
				</view>
			</navigator>
			<navigator hover-class="none" :url="`./tasklist/tasklist?staus=${current}&id=${2}`"
				class="u-relative u-m-t-30  u-com-ite  " style=" width: 335rpx;height: 129rpx;  ;">
				<image class="back-img" :src="imgs.quxiao"></image>
				<view class="item-pdi u-flex f-d-c u-clo-vew">
					<view class="m-w">已完成</view>
					<view class="item-center"></view>
					<view class="u-text-right m-w">{{count2}}</view>
				</view>
			</navigator>
			<navigator hover-class="none" :url="`./tasklist/tasklist?staus=${current}&id=${3}`"
				class="u-relative u-m-t-30  u-com-ite " style="  width: 335rpx;height: 129rpx;  ;">
				<image class="back-img" :src="imgs.wanchen"></image>
				<view class="item-pdi u-flex f-d-c u-clo-vew">
					<view class="m-w">已取消</view>
					<view class="item-center"></view>
					<view class="u-text-right m-w">{{count3}}</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	import feij from "@/static/img/feij.png";
	import chaos from "@/static/img/renwu/chaos.png";
	import chuli from "@/static/img/renwu/chuli.png";
	import quxiao from "@/static/img/renwu/quxiao.png";
	import wanchen from "@/static/img/renwu/wanchen.png";
	import {
		taskecl,
		publishcl
	} from "@/api/index.js";
	export default {
		data() {
			return {
				ifOnShow:false,
				feij: feij,
				list: [{
						name: "我收到的",
					},
					{
						name: "我发布的",
					},
				],
				imgs: {
					chaos,
					chuli,
					quxiao,
					wanchen,
				},
				userId: "",
				current: 0,
				count1: 0,
				count2: 0,
				count3: 0,
				count4: 0,
			};
		},
		onHide(){
		
		this.ifOnShow=true
		
		},
		
		onShow(){
		
		if(this.ifOnShow){
		
			this.change(this.current);
		
		}
		
		},
		onLoad() {
			this.change(0);
		},
		methods: {
			change(index) {
				this.current = index;
				if (index == 0) {
					taskecl().then(({
						data
					}) => {
						this.count1=0;
						this.count2=0;
						this.count3=0;
						this.count4=0;
						data.forEach(Element => {
							if (Element.status == 1) {
								this.count1 = Element.count
							} else if (Element.status == 2) {
								this.count2 = Element.count
							} else if (Element.status == 3) {
								this.count3 = Element.count
							} else if (Element.status == 4) {
								this.count4 = Element.count
							}
						})
					});
				} else {
					publishcl().then(({
						data
					}) => {
						this.count1=0;
						this.count2=0;
						this.count3=0;
						this.count4=0;
						data.forEach(Element => {
							if (Element.status == 1) {
								this.count1 = Element.count
							} else if (Element.status == 2) {
								this.count2 = Element.count
							} else if (Element.status == 3) {
								this.count3 = Element.count
							} else if (Element.status == 4) {
								this.count4 = Element.count
							}
						})
						
					});
				}
			},
		},
	};
</script>

<style lang="scss">
	.back-img {
		position: absolute;
		width: 335rpx;
		height: 129rpx;
		z-index: -1; // 设置z-index层级，将image标签置于底层
	}

	.u-com-ite {
		width: 335rpx;
		height: 129rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.item-pdi {
		color: #ffffff;
		font-size: 28rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		align-items: inherit;
		display: flex;
		flex-direction: column;
		align-items: center;
		line-height: 1;

		view {
			line-height: 1;
		}
	}

	.item-center {
		width: 270rpx;
		height: 1rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		background: #e6e6e6;
	}
</style>