youngee_b_api/pages/mycenter/mytask/applytask.vue

<template>
	<view>
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view style="height: 180rpx;width: 100%; position: fixed;background-color: #FFFFFF;top: 0;z-index: 8;">
		</view>
		<view class="menu">
			<view class="menu-item" @click="toAll()">
				<p>全部</p>
			</view>
			<view class="menu-item">
				<p class='lor'>已报名</p>
			</view>
			<view class="menu-item" @click="toexecute()">
				<p>执行中</p>
			</view>
			<view class="menu-item" @click="toEnd()">
				<p>已结束</p>
			</view>
		</view>
		
		<view class="home">
			<view class="task" v-for="item in applyList">
				<view @click="toDetail(item)">
					<view class="task-head">
						<view class="task-head-account">
							<image :src="item.platform_icon_url" style="height: 50rpx;width: 50rpx;"></image>
							<p style="margin-left: 20rpx;">{{item.platform_nick_name}}</p>
						</view>
						<view class="task-head-status">
							<p>{{item.task_stage_txt}}</p>
						</view>
					</view>
					<view class="task-info">
						<image :src="item.product_img_url" style="height: 120rpx;width: 120rpx;"></image>
						<p style="margin-left: 50rpx;">{{item.project_name}}</p>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mvBar from "@/components/mys_navBar/mysNavBar";
	export default {
		components: {
			mvBar,
		},
		data() {
			return {
				allList: [],
				applyList: [],
				goingList: [],
				endList: [],
				taskStageList: [],
				mysNavConfig: {
					/* 开启单页显示首页图标 */
					isHome: true,
					/* 固定导航  */
					navFixed: true,
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "我的信息",
						color: "",
						fontSize: "32rpx", // px upx rpx
						fontWeight: "normal", // 100 - 700
					},
					btnType: "type2",
					onLeftClick: "/pages/mycenter/mycenter",
					/* type2 按钮 */
					type2Config: {
						// 左图标
						leftPath: "/static/img/png2.png",
						// 右图标
						rightPath: "/static/img/png4.png",
						// 圆角
						radius: "40rpx",
					},
				},
			}
		},
		onLoad() {
			uni.showLoading({
				title: '加载中'
			});
			this.getInfoTable();
		},
		methods: {
			getInfoTable() {
				this.$https.get('/youngee/c/g/get-info-tables')
					.then(res => {
						console.log(res)
						this.taskStageList = res.data.data.TaskStage
						this.getList()
					})
			},
			getList() {
				console.log("run func getList")
				this.$https.get('/youngee/c/t/g/get-task-brief-list').then(res => {
					console.log(res)
					this.applyList = res.data.data.sgin_up_Task_info_list
					if (this.applyList != null) {
						for (let i = 0; i < this.applyList.length; ++i) {
							for (let j = 0; j < this.taskStageList.length; ++j) {
								if (this.applyList[i].task_stage == this.taskStageList[j].task_stage_id)
									this.applyList[i].task_stage_txt = this.taskStageList[j].task_stage
							}
						}
					}

					console.log(this.applyList)
					uni.hideLoading();
				})
			},
			toAll() {
				uni.navigateTo({
					url: '/pages/mycenter/mytask/mytask'
				});
			},
			toexecute() {
				uni.navigateTo({
					url: '/pages/mycenter/mytask/executetask'
				});
			},
			toEnd() {
				uni.navigateTo({
					url: '/pages/mycenter/mytask/endtask'
				});
			},
			toDetail(item) {
				console.log("func toDetail running")
				uni.navigateTo({
					url: '/pages/workspace/taskdetail?taskId=' + item.task_id,
					success(res) {
						console.log(res);
					},
					fail(err) {
						console.log(err);
					}
				});

				console.log("func toDetail end")
			},
		}
	}
</script>

<style lang="scss" scoped>
	view {
		font-size: 14px;
		line-height: inherit;
	}

	.menu {
		position: fixed;
		top: 180rpx;
		border-bottom: #FCCF41;
		background-color: #FFFFFF;
		justify-content: space-around;
		height: 5%;
		width: 100%;
		display: flex;
		z-index: 10;
	}

	.menu-item p {
		font-weight: 600;

		&.lor {
			border-bottom: 5rpx solid #F0D232;
			color: #F0D232;
			padding-bottom: 15rpx;
		}
	}

	.home {
		margin-top: 100rpx;
	}

	.task {
		margin-bottom: 20rpx;
		border-bottom: 1rpx #d7d7d7 solid;

		.task-head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 20rpx;

			.task-head-account {
				display: flex;
			}

			.task-head-status {
				color: red;
			}
		}

		.task-info {
			display: flex;
			align-items: center;
			padding: 10rpx 20rpx;

		}
	}

	.line {
		border-bottom: 1rpx #AAAAAA solid;
	}
</style>