youngee_b_api/page_mycenter/mytask/mytask.vue

<template>
	<view>
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view :style="{paddingTop:navH}" style="background-color: #fff;z-index: 10;"></view>

		<view class="menu" v-if="!loading">
			<view class="menu-item" @click="toAll()">
				<p v-bind:class="tab == 'all'?'lor':'unlor'">全部</p>
			</view>
			<view class="menu-item" @click="toApply()">
				<p v-bind:class="tab == 'apply'?'lor':'unlor'">已报名</p>
			</view>
			<view class="menu-item" @click="toexecute()">
				<p v-bind:class="tab == 'execute'?'lor':'unlor'">执行中</p>
			</view>
			<view class="menu-item" @click="toEnd()">
				<p v-bind:class="tab == 'end'?'lor':'unlor'">已结束</p>
			</view>
		</view>

		<view class="home" v-if="tab == 'all' && !loading">
			<view class="task" v-for="item in allList" @click="toTaskDetail(item)">
				<view class="task-card">
					<view class="task-head">
						<view class="task-head-account">
							<image class="platform-img" :src="item.platform_icon_url"></image>
							<p>{{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 class="project-img" :src="item.product_img_url"></image>
							<view class="task-info-txt">
								<p style="color: #000;font-size: 32rpx;">{{item.project_name}}</p>
								<view v-if="item.task_stage >= 7 && item.task_stage <= 14">
									<p style="color: #F0D232;" v-if="!item.time_out">上传截止时间：{{item.upload_ddl}}</p>
									<p style="color: #f70c0c;" v-else>超时：{{item.upload_ddl}}</p>
								</view>
								<p>预计违约扣款金额：￥{{item.show_cut_payment}}</p>
								<p>预计收益：￥{{item.show_task_reward}}</p>
							</view>
						</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 style="text-align: right;" v-if="item.task_stage > 6">
						<p style="display: inline-block;">实际收益：￥{{item.show_real_reward}}</p>
					</view>
				</view>
			</view>
		</view>

		<view class="home" v-if="tab == 'apply' && !loading">
			<view class="task" v-for="item in applyList" @click="toTaskDetail(item)">
				<view class="task-card">
					<view class="task-head">
						<view class="task-head-account">
							<image class="platform-img" :src="item.platform_icon_url"></image>
							<p>{{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 class="project-img" :src="item.product_img_url"></image>
							<view class="task-info-txt">
								<p style="color: #000;font-size: 32rpx;">{{item.project_name}}</p>
								<p>预计违约扣款金额：￥{{item.show_cut_payment}}</p>
								<p>预计收益：￥{{item.show_task_reward}}</p>
							</view>
						</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 style="text-align: right;" v-if="item.task_stage > 6">
						<p style="display: inline-block;">实际收益：￥{{item.show_real_reward}}</p>
					</view>
				</view>
			</view>
		</view>

		<view class="home" v-if="tab == 'execute' && !loading">
			<view class="task" v-for="item in goingList" @click="toTaskDetail(item)">
				<view class="task-card">
					<view class="task-head">
						<view class="task-head-account">
							<image class="platform-img" :src="item.platform_icon_url"></image>
							<p>{{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 class="project-img" :src="item.product_img_url"></image>
							<view class="task-info-txt">
								<p style="color: #000;font-size: 32rpx;">{{item.project_name}}</p>
								<view v-if="item.task_stage >= 7 && item.task_stage <= 14">
									<p style="color: #F0D232;" v-if="!item.time_out">上传截止时间：{{item.upload_ddl}}</p>
									<p style="color: #f70c0c;" v-else>超时：{{item.upload_ddl}}</p>
								</view>
								<p>预计违约扣款金额：￥{{item.show_cut_payment}}</p>
								<p>预计收益：￥{{item.show_task_reward}}</p>
							</view>
						</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 style="text-align: right;" v-if="item.task_stage > 6">
						<p style="display: inline-block;">实际收益：￥{{item.show_real_reward}}</p>
					</view>
				</view>
			</view>
		</view>

		<view class="home" v-if="tab == 'end' && !loading">
			<view class="task" v-for="item in endList" @click="toTaskDetail(item)">
				<view class="task-card">
					<view class="task-head">
						<view class="task-head-account">
							<image class="platform-img" :src="item.platform_icon_url"></image>
							<p>{{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 class="project-img" :src="item.product_img_url"></image>
							<view class="task-info-txt">
								<p style="color: #000;font-size: 32rpx;">{{item.project_name}}</p>
								<p>预计违约扣款金额：￥{{item.show_cut_payment}}</p>
								<p>预计收益：￥{{item.show_task_reward}}</p>
							</view>
						</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 style="text-align: right;" v-if="item.task_stage > 6">
						<p style="display: inline-block;">实际收益：￥{{item.show_real_reward}}</p>
					</view>
				</view>
			</view>
		</view>

		<view style="height: 100rpx;"></view>
	</view>
</template>

<script>
	import mvBar from "@/components/mys_navBar/mysNavBar";
	import {
		fansview,
		money
	} from '@/components/utils.js';
	export default {
		components: {
			mvBar,
		},
		data() {
			return {
				navH: getApp().globalData.navHeight,
				loading: true,
				tab: '',
				allList: [],
				applyList: [],
				goingList: [],
				endList: [],
				taskStageList: [],
				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: "奥运吉祥物冰墩墩盲盒",
				}, ],
				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",
					},
				},
			}
		},
		async onLoad(options) {
			// 判断登录
			await this.isLogin();
			if (this.token === '') {
				uni.showModal({
					content: '请先登录',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							});
						} else if (res.cancel) {
							uni.navigateBack();
						}
					}
				});
			}

			let data = options.textObj.replace(/""/g, "");
			data = JSON.parse(decodeURIComponent(data))
			this.tab = data.tab
		},
		async onShow() {
			this.loading = true;
			uni.showLoading({
				title: '加载中'
			});
			await this.getInfoTable();
			await this.getList();
			uni.hideLoading();
			this.loading = false;
		},
		methods: {
			// 判断登陆是否过期
			isLogin() {
				return this.$https.get('/youngee/c/t/g/is-login')
					.then(res => {
						if (res.data.code === 403) {
							// 登陆已失效
							this.token = ""
							uni.clearStorage();
						} else {
							this.token = uni.getStorageSync('token')
						}
					})
			},
			getInfoTable() {
				return this.$https.get('/youngee/c/g/get-info-tables')
					.then(res => {
						console.log(res)
						this.taskStageList = res.data.data.TaskStage
					})
			},
			getList() {
				return this.$https.get('/youngee/c/t/g/get-task-brief-list').then(res => {
					console.log(res)
					this.allList = res.data.data.all_Task_info_list
					if (this.allList != null) {
						for (let i = 0; i < this.allList.length; ++i) {
							let productPhoto = JSON.parse(this.allList[i].product_photo_snap);
							for (let j = 0; j < productPhoto.length; j++) {
								if (productPhoto[j].Symbol == 1) {
									this.allList[i].product_img_url = productPhoto[j].PhotoUrl
								}
							}
							if ((this.allList[i].task_stage == 7 && this.allList[i].script_status == 3) ||
								(this.allList[i].task_stage == 9 && this.allList[i].sketch_status == 3) ||
								(this.allList[i].task_stage == 11 && this.allList[i].link_status == 3) ||
								(this.allList[i].task_stage == 13 && this.allList[i].data_status == 3)) {
								this.allList[i].isShowModify = true
							} else {
								this.allList[i].isShowModify = false
							}

							for (let j = 0; j < this.taskStageList.length; ++j) {
								if (this.allList[i].task_stage == this.taskStageList[j].task_stage_id)
									this.allList[i].task_stage_txt = this.taskStageList[j].task_stage
							}

							this.allList[i].real_reward = this.allList[i].task_reward * (100 - this.allList[i]
								.break_rate) / 100
							this.allList[i].cut_payment = this.allList[i].task_reward - this.allList[i].real_reward
							this.allList[i].show_task_reward = money(this.allList[i].task_reward)
							this.allList[i].show_real_reward = money(this.allList[i].real_reward)
							this.allList[i].show_cut_payment = money(this.allList[i].cut_payment)

							// 截止时间
							let ddl = this.thistime(this.allList[i].cur_break_at)
							console.log("isTimeOut", ddl.isTimeOut)
							console.log("ddl", ddl.deadline_time)
							this.allList[i].time_out = ddl.isTimeOut
							this.allList[i].upload_ddl = ddl.isTimeOut ? ddl.deadline_time : this.allList[i]
								.cur_break_at.replace(/-/g,
									"/").slice(0, -3)
						}
					}
					this.applyList = res.data.data.sgin_up_Task_info_list
					if (this.applyList != null) {
						for (let i = 0; i < this.applyList.length; ++i) {
							let productPhoto = JSON.parse(this.applyList[i].product_photo_snap);
							for (let j = 0; j < productPhoto.length; j++) {
								if (productPhoto[j].Symbol == 1) {
									this.applyList[i].product_img_url = productPhoto[j].PhotoUrl
								}
							}
							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
							}

							this.applyList[i].real_reward = this.applyList[i].task_reward * (100 - this.applyList[
									i]
								.break_rate) / 100
							this.applyList[i].cut_payment = this.applyList[i].task_reward - this.applyList[i]
								.real_reward
							this.applyList[i].show_task_reward = money(this.applyList[i].task_reward)
							this.applyList[i].show_real_reward = money(this.applyList[i].real_reward)
							this.applyList[i].show_cut_payment = money(this.applyList[i].cut_payment)

							// 截止时间
							let ddl = this.thistime(this.applyList[i].cur_break_at)
							console.log("isTimeOut", ddl.isTimeOut)
							console.log("ddl", ddl.deadline_time)
							this.applyList[i].time_out = ddl.isTimeOut
							this.applyList[i].upload_ddl = ddl.isTimeOut ? ddl.deadline_time : this.applyList[i]
								.cur_break_at.replace(/-/g,
									"/").slice(0, -3)
						}
					}
					this.goingList = res.data.data.going_on_Task_info_list
					if (this.goingList != null) {
						for (let i = 0; i < this.goingList.length; ++i) {
							let productPhoto = JSON.parse(this.goingList[i].product_photo_snap);
							for (let j = 0; j < productPhoto.length; j++) {
								if (productPhoto[j].Symbol == 1) {
									this.goingList[i].product_img_url = productPhoto[j].PhotoUrl
								}
							}
							if ((this.goingList[i].task_stage == 7 && this.goingList[i].script_status == 3) ||
								(this.goingList[i].task_stage == 9 && this.goingList[i].sketch_status == 3) ||
								(this.goingList[i].task_stage == 11 && this.goingList[i].link_status == 3) ||
								(this.goingList[i].task_stage == 13 && this.goingList[i].data_status == 3)) {
								this.goingList[i].isShowModify = true
							} else {
								this.goingList[i].isShowModify = false
							}
							for (let j = 0; j < this.taskStageList.length; ++j) {
								if (this.goingList[i].task_stage == this.taskStageList[j].task_stage_id)
									this.goingList[i].task_stage_txt = this.taskStageList[j].task_stage
							}


							this.goingList[i].real_reward = this.goingList[i].task_reward * (100 - this.goingList[
									i]
								.break_rate) / 100
							this.goingList[i].cut_payment = this.goingList[i].task_reward - this.goingList[i]
								.real_reward
							this.goingList[i].show_task_reward = money(this.goingList[i].task_reward)
							this.goingList[i].show_real_reward = money(this.goingList[i].real_reward)
							this.goingList[i].show_cut_payment = money(this.goingList[i].cut_payment)

							// 截止时间
							let ddl = this.thistime(this.goingList[i].cur_break_at)
							console.log("isTimeOut", ddl.isTimeOut)
							console.log("ddl", ddl.deadline_time)
							this.goingList[i].time_out = ddl.isTimeOut
							this.goingList[i].upload_ddl = ddl.isTimeOut ? ddl.deadline_time : this.goingList[i]
								.cur_break_at.replace(/-/g,
									"/").slice(0, -3)
						}
					}
					this.endList = res.data.data.completed_Task_info_list
					if (this.endList != null) {
						for (let i = 0; i < this.endList.length; ++i) {
							let productPhoto = JSON.parse(this.endList[i].product_photo_snap);
							for (let j = 0; j < productPhoto.length; j++) {
								if (productPhoto[j].Symbol == 1) {
									this.endList[i].product_img_url = productPhoto[j].PhotoUrl
								}
							}
							for (let j = 0; j < this.taskStageList.length; ++j) {
								if (this.endList[i].task_stage == this.taskStageList[j].task_stage_id)
									this.endList[i].task_stage_txt = this.taskStageList[j].task_stage
							}

							this.endList[i].real_reward = this.endList[i].task_reward * (100 - this.endList[i]
								.break_rate) / 100
							this.endList[i].cut_payment = this.endList[i].task_reward - this.endList[i].real_reward
							this.endList[i].show_task_reward = money(this.endList[i].task_reward)
							this.endList[i].show_real_reward = money(this.endList[i].real_reward)
							this.endList[i].show_cut_payment = money(this.endList[i].cut_payment)

							// 截止时间
							let ddl = this.thistime(this.endList[i].cur_break_at)
							console.log("isTimeOut", ddl.isTimeOut)
							console.log("ddl", ddl.deadline_time)
							this.endList[i].time_out = ddl.isTimeOut
							this.endList[i].upload_ddl = ddl.isTimeOut ? ddl.deadline_time : this.endList[i]
								.cur_break_at.replace(/-/g,
									"/").slice(0, -3)
						}
					}
				})
			},
			async toAll() {
				this.tab = 'all'
				uni.showLoading({
					title: '加载中'
				});
				await this.getList()
				uni.hideLoading()
			},
			async toApply() {
				this.tab = 'apply'
				uni.showLoading({
					title: '加载中'
				});
				await this.getList()
				uni.hideLoading()
			},
			async toexecute() {
				this.tab = 'execute'
				uni.showLoading({
					title: '加载中'
				});
				await this.getList()
				uni.hideLoading()
			},
			async toEnd() {
				this.tab = 'end'
				uni.showLoading({
					title: '加载中'
				});
				await this.getList()
				uni.hideLoading()
			},
			toTaskDetail(item) {
				console.log("func toTaskDetail running")
				uni.navigateTo({
					url: '/page_workspace/task/taskdetail?taskId=' + item.task_id,
					success(res) {
						console.log(res);
					},
					fail(err) {
						console.log(err);
					}
				});
				console.log("func toTaskDetail end")
			},
			// 计算结束时间
			thistime(val) {
				// 转换格式
				var beginTime = new Date(val.replace(/-/g, "/"));
				// 当前时间
				var thisTime = new Date();
				// 相减
				var dateMiss = beginTime.getTime() - thisTime.getTime();
				let isTimeOut = dateMiss < 0 ? true : false
				dateMiss = dateMiss < 0 ? -dateMiss : dateMiss
				// 天数
				var day = Math.floor(dateMiss / (24 * 3600 * 1000));
				// 减去天数剩下的毫秒数
				var backOne = dateMiss % (24 * 3600 * 1000);
				// 小时数
				var hours = Math.floor(backOne / (3600 * 1000));
				// 减去小时数剩下的毫秒数
				var backHour = backOne % (3600 * 1000);
				// 分钟数
				var min = Math.floor(backHour / (60 * 1000));
				var deadline_time = day + '天' + hours + '时' + min + '分'
				var result = {
					isTimeOut: isTimeOut,
					deadline_time: deadline_time
				}
				return result
			},
		}
	}
</script>

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

	.menu {
		padding-top: 20rpx;
		background-color: #fff;
		position: fixed;
		border-bottom: #FCCF41;
		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;
		}

		&.unlor {
			border-bottom: 5rpx solid #fff;
			color: #81838f;
			padding-bottom: 15rpx;
		}
	}

	.home {
		margin-top: 100rpx;
	}

	.task-card {
		margin: 10rpx 0;
		// border-bottom: 1rpx #d7d7d7 solid;

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

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

			.platform-img {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}

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

		.task-info {
			display: flex;
			justify-content: space-between;
			padding: 10rpx 20rpx;

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

				.project-img {
					height: 120rpx;
					width: 120rpx;
					// background-color: #b3c96b;
				}

				.task-info-txt {
					margin-left: 10rpx;
				}

				.task-info-txt p {
					font-size: 24rpx;
					color: #85859d;
					margin-bottom: 10rpx;
				}
			}

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

			.task-info-right p {
				font-size: 24rpx;
			}
		}
	}


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