youngee_b_api/pages/workspace/workspace.vue

<template>
	<view>
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view :style="{marginTop:navH}"></view>
		<view class="menu">
			<view class="menu-item" @click="toShow1()">
				<view class="menu-item-p">
					<p v-bind:class="showList1?'lor':'unlor'">待传脚本</p>
				</view>
				<span class="point" v-if="showPoint1" key="0"></span>
			</view>
			<view class="menu-item" @click="toShow2()">
				<view class="menu-item-p">
					<p v-bind:class="showList2?'lor':'unlor'">待传初稿</p>
				</view>
				<span class="point" v-if="showPoint2" key="1"></span>
			</view>
			<view class="menu-item" @click="toShow3()">
				<view class="menu-item-p">
					<p v-bind:class="showList3?'lor':'unlor'">待传链接</p>
				</view>
				<span class="point" v-if="showPoint3" key="2"></span>
			</view> 
			<view class="menu-item" @click="toShow4()">
				<view class="menu-item-p">
					<p v-bind:class="showList4?'lor':'unlor'">待传数据</p>
				</view>
				<span class="point" v-if="showPoint4" key="3"></span>
			</view>
		</view>

		<view class="home" v-if="showList1 && !loading" style="padding-top: 100rpx;">
			<view class="task" v-for="item in List1">
				<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">
						<view class="task-info-left">
							<image :src="item.product_img_url" style="height: 120rpx;width: 120rpx;"></image>
							<p style="margin-left: 50rpx;">{{item.project_name}}</p>
						</view>
						<view class="task-info-right" v-if="item.isShowModify">
							<image src="../../static/img/icon-edit.png" style="height: 60rpx;width: 60rpx;"></image>
							<p style="font-size: 32rpx;color: #ffcb41;font-weight: 600">改</p>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="home" v-if="showList2 && !loading" style="padding-top: 100rpx;">
			<view class="task" v-for="item in List2">
				<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">
						<view class="task-info-left">
							<image :src="item.product_img_url" style="height: 120rpx;width: 120rpx;"></image>
							<p style="margin-left: 50rpx;">{{item.project_name}}</p>
						</view>
						<view class="task-info-right" v-if="item.isShowModify">
							<image src="../../static/img/icon-edit.png" style="height: 60rpx;width: 60rpx;"></image>
							<p style="font-size: 32rpx;color: #ffcb41;font-weight: 600">改</p>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="home" v-if="showList3 && !loading" style="padding-top: 100rpx;">
			<view class="task" v-for="item in List3">
				<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">
						<view class="task-info-left">
							<image :src="item.product_img_url" style="height: 120rpx;width: 120rpx;"></image>
							<p style="margin-left: 50rpx;">{{item.project_name}}</p>
						</view>
						<view class="task-info-right" v-if="item.isShowModify">
							<image src="../../static/img/icon-edit.png" style="height: 60rpx;width: 60rpx;"></image>
							<p style="font-size: 32rpx;color: #ffcb41;font-weight: 600">改</p>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="home" v-if="showList4 && !loading" style="padding-top: 100rpx;">
			<view class="task" v-for="item in List4">
				<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">
						<view class="task-info-left">
							<image :src="item.product_img_url" style="height: 120rpx;width: 120rpx;"></image>
							<p style="margin-left: 50rpx;">{{item.project_name}}</p>
						</view>
						<view class="task-info-right" v-if="item.isShowModify">
							<image src="../../static/img/icon-edit.png" style="height: 60rpx;width: 60rpx;"></image>
							<p style="font-size: 32rpx;color: #ffcb41;font-weight: 600">改</p>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mvBar from "@/components/mys_navBar/mysNavBar";
	export default {
		components: {
			mvBar,
		},
		data() {
			return {
				loading: true,
				showPoint1: false,
				showPoint2: false,
				showPoint3: false,
				showPoint4: false,
				navH: getApp().globalData.navHeight,
				showList1: true,
				showList2: false,
				showList3: false,
				showList4: false,
				List1: [],
				List2: [],
				List3: [],
				List4: [],
				taskStageList: [],
				mysNavConfig: {
					/* 开启单页显示首页图标 */
					isHome: true,
					/* 固定导航  */
					navFixed: true,
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "工作台",
						color: "",
						fontSize: "32rpx", // px upx rpx
						fontWeight: "normal", // 100 - 700
					},
				},
				list: [{
					account: {
						platform: "https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/lQLPDhrXwll1_MsjI7CSK_6e62AG2AGOvh1HgAcA_35_35.png",
						nickname: "丸子在成都",
					},
					status: "待确认",
					mainphoto: "https://static1.paizi.com/uploadfile/2018/1013/20181013013207465.png",
					taskname: "醉码头火锅太古里店",
				}, {
					account: {
						platform: "https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/pingtai2.png",
						nickname: "成都的一颗丸子",
					},
					status: "待确认",
					mainphoto: "https://tse1-mm.cn.bing.net/th/id/R-C.978cb3a3b27875a0cc9d78a254b30b8f?rik=yrP2kNCtfQYEgQ&riu=http%3a%2f%2fnews.southcn.com%2fgd%2fcontent%2fimages%2fattachement%2fpng%2fsite4%2f20190917%2feca86b61fd551eeb23c507.png&ehk=xuWbgLrNmyhNJaByMZPJrX81PrzXrLHqHM%2fdYatFhrs%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1",
					taskname: "奥运吉祥物冰墩墩盲盒",
				}],
			}
		},
		async onShow() {
			this.token = uni.getStorageSync('token')
			await this.$https.get('/youngee/c/t/g/is-login')
				.then(res => {
					console.log(res)
					if (res.data.code == 403) {
						this.token = ""
						uni.clearStorage();
					}
				});
			if (this.token !== '') { // 若登录
				this.showList2 = false;
				this.showList3 = false;
				this.showList4 = false;
				this.showList1 = true;
				this.getList();
			} else {
				uni.showModal({
					content: '请先登录',
					success: function(res) {
						uni.navigateTo({
							url: '../login/login'
						});
					}
				});
			}
		},
		methods: {
			async getList() {
				this.loading = true
				uni.showLoading({
					title: '加载中'
				});
				var taskList = [];
				this.showPoint1 = false
				this.showPoint2 = false
				this.showPoint3 = false
				this.showPoint4 = false
				await this.$https.get('/youngee/c/t/g/get-task-exe-list').then(res => {
					console.log(res)
					taskList = res.data.data.list1
					if (taskList != null) {
						this.showPoint1 = true
						for (let i = 0; i < taskList.length; ++i) {
							let productPhoto = JSON.parse(taskList[i].product_photo_snap);
							for (let j = 0; j < productPhoto.length; j++) {
								if (productPhoto[j].Symbol == 1) {
									taskList[i].product_img_url = productPhoto[j].PhotoUrl
								}
							}

							if ((taskList[i].task_stage == 7 && taskList[i].script_status == 3) ||
								(taskList[i].task_stage == 9 && taskList[i].sketch_status == 3) ||
								(taskList[i].task_stage == 11 && taskList[i].link_status == 3) ||
								(taskList[i].task_stage == 13 && taskList[i].data_status == 3)) {
								taskList[i].isShowModify = true
							} else {
								taskList[i].isShowModify = false
							}
							for (let j = 0; j < this.taskStageList.length; ++j) {
								if (taskList[i].task_stage == this.taskStageList[j]
									.task_stage_id)
									taskList[i].task_stage_txt = this.taskStageList[j]
									.task_stage
							}
						}
					}
					this.List1 = taskList;
					taskList = res.data.data.list2
					if (taskList != null) {
						this.showPoint2 = true
						for (let i = 0; i < taskList.length; ++i) {
							let productPhoto = JSON.parse(taskList[i].product_photo_snap);
							for (let j = 0; j < productPhoto.length; j++) {
								if (productPhoto[j].Symbol == 1) {
									taskList[i].product_img_url = productPhoto[j].PhotoUrl
								}
							}

							if ((taskList[i].task_stage == 7 && taskList[i].script_status == 3) ||
								(taskList[i].task_stage == 9 && taskList[i].sketch_status == 3) ||
								(taskList[i].task_stage == 11 && taskList[i].link_status == 3) ||
								(taskList[i].task_stage == 13 && taskList[i].data_status == 3)) {
								taskList[i].isShowModify = true
							} else {
								taskList[i].isShowModify = false
							}
							for (let j = 0; j < this.taskStageList.length; ++j) {
								if (taskList[i].task_stage == this.taskStageList[j]
									.task_stage_id)
									taskList[i].task_stage_txt = this.taskStageList[j]
									.task_stage
							}
						}
					}
					this.List2 = taskList;
					taskList = res.data.data.list3
					if (taskList != null) {
						this.showPoint3 = true
						for (let i = 0; i < taskList.length; ++i) {
							let productPhoto = JSON.parse(taskList[i].product_photo_snap);
							for (let j = 0; j < productPhoto.length; j++) {
								if (productPhoto[j].Symbol == 1) {
									taskList[i].product_img_url = productPhoto[j].PhotoUrl
								}
							}

							if ((taskList[i].task_stage == 7 && taskList[i].script_status == 3) ||
								(taskList[i].task_stage == 9 && taskList[i].sketch_status == 3) ||
								(taskList[i].task_stage == 11 && taskList[i].link_status == 3) ||
								(taskList[i].task_stage == 13 && taskList[i].data_status == 3)) {
								taskList[i].isShowModify = true
							} else {
								taskList[i].isShowModify = false
							}
							for (let j = 0; j < this.taskStageList.length; ++j) {
								if (taskList[i].task_stage == this.taskStageList[j]
									.task_stage_id)
									taskList[i].task_stage_txt = this.taskStageList[j]
									.task_stage
							}
						}
					}
					
					this.List3 = taskList;
					taskList = res.data.data.list4
					if (taskList != null) {
						this.showPoint4 = true
						for (let i = 0; i < taskList.length; ++i) {
							let productPhoto = JSON.parse(taskList[i].product_photo_snap);
							for (let j = 0; j < productPhoto.length; j++) {
								if (productPhoto[j].Symbol == 1) {
									taskList[i].product_img_url = productPhoto[j].PhotoUrl
								}
							}

							if ((taskList[i].task_stage == 7 && taskList[i].script_status == 3) ||
								(taskList[i].task_stage == 9 && taskList[i].sketch_status == 3) ||
								(taskList[i].task_stage == 11 && taskList[i].link_status == 3) ||
								(taskList[i].task_stage == 13 && taskList[i].data_status == 3)) {
								taskList[i].isShowModify = true
							} else {
								taskList[i].isShowModify = false
							}
							for (let j = 0; j < this.taskStageList.length; ++j) {
								if (taskList[i].task_stage == this.taskStageList[j]
									.task_stage_id)
									taskList[i].task_stage_txt = this.taskStageList[j]
									.task_stage
							}
						}
					}
					this.List4 = taskList;
				})
				uni.hideLoading();
				this.loading = false
			},
			toShow1() {
				this.showList2 = false;
				this.showList3 = false;
				this.showList4 = false;
				this.showList1 = true;
				this.getList();
			},
			toShow2() {
				this.showList1 = false;
				this.showList3 = false;
				this.showList4 = false;
				this.showList2 = true;
				this.getList();
			},
			toShow3() {
				this.showList2 = false;
				this.showList1 = false;
				this.showList4 = false;
				this.showList3 = true;
				this.getList();
			},
			toShow4() {
				this.showList2 = false;
				this.showList1 = false;
				this.showList3 = false;
				this.showList4 = true;
				this.getList();
			},
			toDetail(item) {
				uni.navigateTo({
					url: '/pages/workspace/taskdetail?taskId=' + item.task_id,
					success(res) {
						console.log(res);
					},
					fail(err) {
						console.log(err);
					}
				});
			},
		}
	}
</script>

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

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

	.menu-item {
		display: flex;
	}

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

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

		&.unlor {
			border-bottom: 5rpx solid #fff;
			color: #81838f;
			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;
			justify-content: space-between;
			padding: 10rpx 20rpx;

			.task-info-left {
				display: flex;
				align-items: center;
			}

			.task-info-right {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				border: #ffcb41 2rpx solid;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.line {
		border-bottom: 1rpx #AAAAAA solid;
	}

	.menu-point {
		position: relative;
		left: 30rpx;
		top: 20rpx;
	}

	.point {
		width: 6px;
		height: 6px;
		background: red;
		border-radius: 50%;
	}
</style>