youngee_c_web_v2/pages/workspace/taskdetail.vue

<template>
	<view>
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view style="margin-top: 160rpx;"></view>

		<view v-if="loading">
			<view style="display: flex;justify-content: center;font-size: 50rpx;">
				<p>加载中</p>
			</view>
		</view>
		<view v-if="!loading">
			<!-- 任务状态 -->
			<view style="padding-bottom: 30rpx;">
				<view style="display: flex;justify-content: center;font-size: 44rpx;padding-bottom: 20rpx;">
					<p>{{msg1}}</p>
					<view class="upload-btn" v-if="showUpload" @click="toUpload()">
						<image src="../../static/img/icon-upload.png" style="height: 40rpx;width: 40rpx;"></image>
						<p style="font-size: 32rpx;">快速上传</p>
					</view>
				</view>
				<view style="display: flex;justify-content: center;font-size: 30rpx;">
					<p>{{msg2}}</p>
				</view>
				<view style="display: flex;justify-content: center;font-size: 30rpx;" v-if="msg3 != ''">
					<p>{{msg3}}</p>
				</view>
			</view>
			
			<view style="display: flex;justify-content: center;align-items: center;">
				<image style="height: 60rpx;width: 60rpx;" src="../../static/img/icon-time.png"></image>
				<p style="font-size: 30rpx;color: #f2d241;">剩余时间：{{timeLeft}}</p>
			</view>

			<view class="address">
				<view class="address_icon">
					<image style="width: 50rpx;height: 50rpx;" :src="picture.icon_loc" mode="">
					</image>
				</view>
				<view style="width: 70%;">
					<view style="display: flex;">
						<p class='ipon' style="padding-right: 100rpx;">{{address.receiver_name}}</p>
						<p class='ipon'>{{address.phone_number}}</p>
					</view>
					<p class='ipon'>{{address.detail_addr}}</p>
				</view>
				<view class="address_edit" @click="editAddress()">
					<image :src="picture.icon_edit" mode="">
					</image>
				</view>
			</view>

			<view class="basicInfo">
				<image :src="product.photo_url" style="width: 150rpx;height: 150rpx;" mode="">
				</image>
				<view class="basicInfo_txt">
					<p style="margin-bottom: 10rpx;font-size: 35rpx;font-weight: 550;">{{project.project_name}}</p>
					<p style="font-size: 30rpx;">商品价值：{{project.Product.product_price}}</p>
				</view>
			</view>

			<view class="keyInfo">
				<view style="margin-bottom: 40rpx;">
					<p style="font-size: 36rpx;font-weight: 550;">关键任务信息</p>
				</view>
				<view>
					<p style="font-weight: 600;margin-bottom: 10rpx;">合作方式</p>
					<p>粉丝量：{{strategy.followers_low}}-{{strategy.followers_up}}
						&nbsp;&nbsp;
						稿费：{{strategy.fee_form_t}}
					</p>
				</view>

				<view class="line"></view>

				<view style="margin-top: 20rpx;margin-bottom: 10rpx;">
					<p style="font-weight: 600;margin-bottom: 10rpx;">社媒平台：</p>
					<p>{{project.project_platform_t}}</p>
				</view>

				<view class="line"></view>

				<p style="font-weight: 600;margin-top: 10rpx;">任务要求</p>
				<view class="keyInfo_task">
					<view style="display: flex;align-items: center;margin: 10rpx 0;">
						<p>内容形式：</p>
						<p>{{project.content}}</p>
					</view>
					<view style="display: flex;align-items: center;margin: 10rpx 0;">
						<p>任务形式：</p>
						<p>{{project.project_form_t}}</p>
					</view>
					<view style="margin-top: 20rpx;margin-bottom: 10rpx;">
						<p>商品描述：</p>
						<p> {{project.Product.product_detail}}
						</p>
					</view>
					<view style="margin-top: 20rpx;margin-bottom: 10rpx;">
						<p>任务详情：</p>
						<p> {{project.project_detail}} </p>
					</view>
				</view>
			</view>

			<view class="task-progress">
				<p style="font-size: 32rpx;font-weight: 600;">任务进度</p>
				<view class="task-progress-card" v-bind:style="task.task_stage == 1 ? 'background-color: #f2d241' : ''">
					<view class="tpc-txt1">
						<p>报名信息</p>
					</view>
					<view class="tpc-txt2" @click="toApplyinfo()">
						<p>查看</p>
						<image class="tpc-icon" :src="picture.icon_right"></image>
					</view>
				</view>
				<view class="task-progress-card" v-if="task.task_stage >= 6" v-bind:style="task.task_stage == 6 ? 'background-color: #f2d241' : ''">
					<view class="tpc-txt1">
						<p>物流信息</p> 
					</view>
					<view class="tpc-txt2" @click="toLogisticsinfo()">
						<p>查看</p>
						<image class="tpc-icon" :src="picture.icon_right"></image>
					</view>
				</view>
				<view class="task-progress-card"  v-if="task.task_stage >= 8" v-bind:style="task.task_stage == 8 ? 'background-color: #f2d241' : ''">
					<view class="tpc-txt1">
						<p>上传拍摄脚本</p>
					</view>
					<view class="tpc-txt2"  @click="toUpload()" v-if="task.script_status == 1">
						<p style="color: red;">待添加</p>
						<image class="tpc-icon" :src="picture.icon_right"></image>
					</view>
					<view class="tpc-txt2"  @click="toUpload()" v-if="task.script_status == 2">
						<p style="color: #fff;">已添加</p>
						<image class="tpc-icon" :src="picture.icon_right"></image>
					</view>
					<view class="tpc-txt2"  @click="toUpload()" v-if="task.script_status == 3">
						<p style="color: red;">待修改</p>
						<image class="tpc-icon" :src="picture.icon_right"></image>
					</view>
					<view class="tpc-txt2"  @click="toUpload()" v-if="task.script_status == 4">
						<p style="color: #fff;">已修改</p>
						<image class="tpc-icon" :src="picture.icon_right"></image>
					</view>
					<view class="tpc-txt2"  @click="toRecord()" v-if="task.script_status == 5">
						<p>查看</p>
						<image class="tpc-icon" :src="picture.icon_right"></image>
					</view>
				</view>
				<view class="task-progress-info">
					<view style="padding: 10rpx 0;">
						<p>任务id：{{task.task_id}}</p>
					</view>
					<view style="padding: 10rpx 0;">
						<p>报名时间：{{task.create_date}}</p>
					</view>
					<view v-if="task.task_stage > 1" style="padding: 10rpx 0;">
						<p>确认合作：{{task.select_date}}</p>
					</view>
					<view v-if="task.task_stage > 5" style="padding: 10rpx 0;">
						<p>发货时间：{{task.delivery_date}}</p>
					</view>
				</view>
			</view>

			<view class="block"></view>
			<view class="submit" v-if="false">
				<button type="default" class="submit_btn" @click="submit()"> 确认提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import mvBar from "@/components/mys_navBar/mysNavBar";
	export default {
		components: {
			mvBar
		},
		data() {
			return {
				showUpload: false,
				loading: true,
				timeLeft: "3天5小时28分",
				msg1: "",
				msg2: "",
				msg3: "",
				infoMsg1: [
					"等待企业确认合作",
					"等待企业确认合作",
					"恭喜任务申请成功！",
					"任务申请失败",
					"等待发货中",
					"商家已发货",
					"等待上传拍摄脚本",
					"等待上传拍摄脚本",
					"等待上传拍摄脚本",
					"等待上传拍摄脚本",
					"等待上传初稿",
					"等待上传初稿",
					"等待上传初稿",
					"等待上传链接",
					"等待上传链接",
					"等待上传链接",
					"等待上传作品数据",
					"等待上传作品数据",
					"已结案",
					"任务终止",
					"任务终止",
				],
				infoMsg2: [
					"商家将在申请截止后5天内审核完毕",
					"商家将在申请截止后5天内审核完毕",
					"请仔细查看任务要求和任务详情，开始执行任务吧！",
					"账号未达到入选标准，请小主尝试申请其他任务吧！",
					"发货后可在任务进度中查看物流单号",
					"请在物流进度中查看物流单号/虚拟产品兑换码",
					"请在任务进度中上传拍摄脚本，商家审核通过后再进行拍摄",
					"请在任务进度中上传拍摄脚本，商家审核通过后再进行拍摄",
					"请在任务进度中上传拍摄脚本，商家审核通过后再进行拍摄",
					"请在任务进度中上传拍摄脚本，商家审核通过后再进行拍摄",
					"请在任务进度中上传图文/视频初稿，商家审核通过后再进行发布",
					"请在任务进度中上传图文/视频初稿，商家审核通过后再进行发布",
					"请在任务进度中上传图文/视频初稿，商家审核通过后再进行发布",
					"恭喜作品审核通过，请及时发布并在任务进度中上传发布链接。",
					"恭喜作品审核通过，请及时发布并在任务进度中上传发布链接。",
					"恭喜作品审核通过，请及时发布并在任务进度中上传发布链接。",
					"恭喜链接审核通过，请在作品发布7天后上传作品数据。",
					"恭喜链接审核通过，请在作品发布7天后上传作品数据。",
					"本项目已结案，可申请佣金提现。",
					"长时间未上传，任务已终止。",
					"长时间未上传，任务已终止。",
				],
				platform: [
					"小红书",
					"抖音",
					"微博",
					"快手",
					"B站",
					"大众点评",
					"知乎",
				],
				task: {},
				address: {},
				project: {},
				product: {},
				account: {},
				strategy: {},
				picture: {
					togoimg: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/task16.png',
					icon_edit: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/youngee/talent_upload/icon-edit.png',
					icon_loc: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/youngee/talent_upload/icon-loc.png',
					icon_right: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent_upload/icon-arrow-right.png',
					home8: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/home8.png',
					home10: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/home10.png',
					home11: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/home11.png',
				},
				task_type_info: ["实体商品寄拍", "虚拟产品测评", "线下探店打卡", "素材微原创"],
				mysNavConfig: {
					isHome: false,
					/* 固定导航  */
					navFixed: true,
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "信息确认",
						color: "",
						fontSize: "32rpx", // px upx rpx
						fontWeight: "", // 100 - 700
					},
					btnType: "type2",
					onLeftClick: '',
					/* type2 按钮 */
					type2Config: {
						// 左图标
						leftPath: "https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/png2.png",
						// 右图标
						rightPath: "https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/png4.png",
						// 圆角
						radius: "40rpx",
					},
				},
			}
		},
		onShow(){
			uni.showLoading({
				title: '加载中'
			});
			console.log("onLoad run")
			this.getTaskInfo()
		},
		onLoad(options) {
			this.taskId = options.taskId
		},
		methods: {
			getTaskInfo() {
				this.$https.get('/youngee/c/t/g/get-task-detail' +
					"?" +
					"task_id" +
					"=" +
					this.taskId
				).then(res => {
					console.log(res)
					this.task = res.data.data.task_info
					this.address = JSON.parse(res.data.data.task_info.talent_post_addr_snap);
					this.account = JSON.parse(res.data.data.task_info.talent_platform_info_snap);
					this.project = res.data.data.project_detail
					this.product = res.data.data.product_photo
					this.strategy = res.data.data.strategy

					this.strategy.fee_form_t = this.strategy.fee_form == 1 ? '产品置换' : (this.strategy.fee_form ==
						2 ?
						'固定稿费 ' +
						this.task.task_reward : '创作者自报价 ' + this.task.task_reward)

					// 任务形式
					if (this.project.content_type == 1) this.project.content = "图文"
					else if (this.project.content_type == 2) this.project.content = "视频"

					// 任务类型
					this.project.project_form_t = this.task_type_info[this.project.project_form - 1]

					// 社媒平台
					this.project.project_platform_t = this.platform[this.project.project_platform - 1]
					console.log("社媒平台：", this.project.project_platform_t)

					// 不同任务阶段提示消息
					this.msg1 = this.infoMsg1[this.task.task_stage - 1]
					this.msg2 = this.infoMsg2[this.task.task_stage - 1]
					if (this.task.task_stage >= 8 && this.task.task_stage <= 10) {
						this.msg3 = "延迟上传脚本，可能导致佣金扣除。"
					} else if (this.task.task_stage >= 11 && this.task.task_stage <= 13) {
						this.msg3 = "延迟上传初稿，可能导致佣金扣除。"
					} else if (this.task.task_stage >= 14 && this.task.task_stage <= 16) {
						this.msg3 = "延迟上传链接，可能导致佣金扣除。"
					} else if (this.task.task_stage >= 17 && this.task.task_stage <= 18) {
						this.msg3 = "延迟上传作品数据，可能导致佣金扣除。"
					}
					
					if(this.task.task_stage == 8 || this.task.task_stage == 11 || this.task.task_stage == 14 || this.task.task_stage == 17){
						this.showUpload = true
					}
					this.loading = false;
					uni.hideLoading();

				})
			},
			
			toUpload(){
				var data = {
					taskId: this.task.task_id,
					scriptStatus: this.task.script_status
				};
				data = JSON.stringify(data)
				if(this.task.task_stage == 8){	// 上传脚本
					uni.navigateTo({
						url: '/pages/workspace/uploadscript?textObj=' + encodeURIComponent(data)
					});
				}
			},

			toRecord() {
				var data = {
					taskId: this.task.task_id,
				};
				data = JSON.stringify(data)
				uni.navigateTo({
					url: '/pages/workspace/scriptrecord?textObj=' + encodeURIComponent(data)
				});
			},
			toApplyinfo() {
				var data = {
					account: this.account,
				};
				data = JSON.stringify(data)
				uni.navigateTo({
					url: '/pages/workspace/applyInformation?textObj=' + encodeURIComponent(data)
				});
			},

			toLogisticsinfo() {
				console.log(this.project.project_form)
				var data = {
					address: this.address,
					taskId: this.task.task_id,
					projectForm: this.project.project_form
				};
				data = JSON.stringify(data)
				uni.navigateTo({
					url: '/pages/workspace/deliveryInformation?textObj=' + encodeURIComponent(data)
				});
			},
		}
	}
</script>


<style lang="scss" scoped>
	.basicInfo {
		display: flex;
		margin-top: 20rpx;
		padding: 20rpx 40rpx;
		background-color: #FFFFFF;

		.basicInfo_txt {
			margin-left: 40rpx;
			padding-top: 20rpx;
		}
	}

	.upload-btn {
		display: flex;
		background-color: #f2d241;
		border-radius: 10rpx;
		padding: 5rpx;
		margin-left: 20rpx;
		cursor: pointer;
	}

	.address {
		display: flex;
		margin: 20rpx 0;
		// padding: 20rpx 20rpx;
		background-color: #FFFFFF;
		justify-content: space-around;
		align-items: center;

		.address_icon {
			width: 15%;
			vertical-align: middle;
			display: flex;
			justify-content: center;
		}

		.address_edit {
			width: 15%;
		}

		.address_edit image {
			vertical-align: middle;
			width: 50rpx;
			height: 50rpx;
			display: inline-block;
			padding-right: 14rpx;
		}

		.ipon {
			color: #333333;
			font-size: 30rpx;
			font-weight: 500;
			margin-bottom: 10rpx;
		}
	}

	.keyInfo {
		padding: 20rpx 20rpx;
		background-color: #FFFFFF;

		.keyInfo_task {
			color: #999999;
		}
	}

	.keyInfo h3 {
		font-weight: 600;
	}

	.keyInfo p {
		font-size: 30rpx;
	}

	.account {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		// width: 90%;
		margin: 20rpx 0;
		padding: 20rpx 20rpx;
		background-color: #FFFFFF;
		font-size: 35rpx;

		.account_txt {
			display: inline-block;
			padding: 0 0 0 1%;
			width: 400rpx;
		}

		.account_txt image {
			vertical-align: middle;
			width: 50rpx;
			height: 50rpx;
			display: inline-block;
			padding-right: 14rpx;
		}

		.account_fans {
			display: flex;
			width: 250rpx;
		}

		.account_fans p {
			display: inline-block;
			color: #333333;
			font-weight: 550;
		}

		.account_btn {}
	}

	.task-progress {
		padding: 20rpx;

		.task-progress-card {
			margin: 15rpx 0;
			display: flex;
			align-items: center;
			// margin: 20rpx;
			padding: 10rpx;
			font-size: 30rpx;
			border-radius: 10rpx;

			.tpc-txt1 {
				display: flex;
				justify-content: flex-start;
				// margin-left: 20rpx;

			}

			.tpc-txt2 {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				// margin-right: 20rpx;
				flex: 1;

				.tpc-icon {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}

		.task-progress-info {
			padding: 10rpx;
			font-size: 30rpx;
			border-radius: 10rpx;
			background-color: #f2f2f2;
		}
	}

	.block {
		width: 100%;
		height: 100rpx;
		margin-top: 5%;
	}

	.submit {
		box-shadow: 0rpx 5rpx 40rpx #ccc;
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		height: 90rpx;
		padding-top: 2%;
		background-color: #FFFFFF;

		.submit_btn {
			width: 60%;
			background-color: #FCCF41;
			border-radius: 20rpx;
			font-size: 36rpx;
			line-height: 200%;
			letter-spacing: 10rpx;
			font-weight: 500;
			height: 80%;
		}

	}

	.line {
		border-bottom: 1rpx solid #d5d5d5;
		width: 98%;
		margin: 10rpx 1%;
	}
</style>