youngee_c_web_v2/page_mycenter/myselection/myselection.vue

<template>
	<view>
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view :style="{marginTop:navH}"></view>

		<view class="menu">
			<view class="menu-item" @click="handleClickTab(0)">
				<p v-bind:class="showList[0]?'lor':'unlor'">全部</p>
			</view>
			<view class="menu-item" @click="handleClickTab(1)">
				<p v-bind:class="showList[1]?'lor':'unlor'">已领样</p>
			</view>
			<view class="menu-item" @click="handleClickTab(2)">
				<p v-bind:class="showList[2]?'lor':'unlor'">已出单</p>
			</view>
			<view class="menu-item" @click="handleClickTab(3)">
				<p v-bind:class="showList[3]?'lor':'unlor'">已结束</p>
			</view>
		</view>

		<view class="home" v-if="showList[0] && !loading">
			<view class="task" v-for="item in secTaskLists[0]" @click="handleToSecTaskDetail(item)">
				<view class="task-card">
					<view class="task-info">
						<!-- 左侧图片和文字 -->
						<view class="task-info-left">
							<!-- 图片 -->
							<image class="project-img" :src="item.product_img_url"></image>
							<image v-if="item.isFinished" class="overlay-img"  src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/home4.png"></image>
							<!-- 描述 -->
							<view class="task-info-txt">
								<view class="Tasktext">
									<image class="platform-img" :src="item.PlatformInfo.platform_icon"></image>
									<span>
										{{item.SelectionInfo.selection_name}}
									</span>
								</view>
								<p style="color: #ffcb41 ;">任务截至时间:{{item.ddl}}</p>
								<p>售价：￥{{item.price}} 佣金率：{{item.exclusive_commission}}%</p>
								<!-- sectask表有已经有 -->
								<p>全部销售量/有效销售量：{{item.sale_num_all}}单/{{item.sale_actual}}单</p>
								<p v-if="item.task_mode==1">悬赏金额/悬赏有效销售量：
									￥{{item.RewardStrategy[0].per_reward}}/{{item.RewardStrategy[0].sale_actual}}单</p>
								<p v-if="item.sample_mode==1">免费领样状态：{{ getFreeStageText(item.free_stage) }}</p>
							</view>
						</view>
						<!-- 右侧图标 -->
						<view class="task-info-right">
							<image
								src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent_upload/icon-arrow-right.png"
								style="height: 30rpx;width: 30rpx;"></image>
						</view>
					</view>
					<!-- <view style="text-align: right;" v-if="item.task_stage > 5">
						<p style="font-size: 25rpx;">实际收益：￥{{item.show_real_reward}}</p>
					</view> -->
					<view class="container">
						<p class="left-text" v-if="item.reward_stage==1"><span style="color: green;">待领悬赏</span></p>
						<p class="right-text" v-if="item.reward_stage==2">实际收益：<span
								style="color: red;">￥{{item.RewardStrategy[0].per_reward}}</span></p>
					</view>
				</view>
			</view>
		</view>

		<view class="home" v-if="showList[1] && !loading">
			<view class="task" v-for="item in secTaskLists[1]" @click="handleToSecTaskDetail(item)">
				<view class="task-card">
					<view class="task-info">
						<!-- 左侧图片和文字 -->
						<view class="task-info-left">
							<!-- 图片 -->
							<image class="project-img" :src="item.product_img_url"></image>
							<image v-if="item.isFinished" class="overlay-img"  src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/home4.png"></image>
							<!-- 描述 -->
							<view class="task-info-txt">
								<!-- <view class="" style="display: flex;">
									<image class="platform-img" :src="item.platform_icon_url"></image>
									<p style="font-size: 28rpx; line-height: 28rpx;color: black;">
										{{item.selection_name}}
									</p>
								</view> -->
								<view class="Tasktext">
									<image class="platform-img" :src="item.PlatformInfo.platform_icon"></image>
									<span>
										{{item.SelectionInfo.selection_name}}
									</span>
								</view>
								<p style="color: #ffcb41 ;">任务截至时间:{{item.ddl}}</p>
								<p>售价：￥{{item.price}} 佣金率：{{item.exclusive_commission}}%</p>
								<!-- sectask表有已经有 -->
								<p>全部销售量/有效销售量：{{item.sale_num_all}}单/{{item.sale_actual}}单</p>
								<p v-if="item.task_mode==1">悬赏金额/悬赏有效销售量：
									￥{{item.RewardStrategy[0].per_reward}}/{{item.RewardStrategy[0].sale_actual}}单</p>
								<p v-if="item.sample_mode==1">免费领样状态：{{ getFreeStageText(item.free_stage) }}</p>
							</view>
						</view>
						<!-- 右侧图标 -->
						<view class="task-info-right">
							<image
								src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent_upload/icon-arrow-right.png"
								style="height: 30rpx;width: 30rpx;"></image>
						</view>
					</view>
					<view class="container">
						<p class="left-text" v-if="item.reward_stage==1"><span style="color: green;">待领悬赏</span></p>
						<p class="right-text" v-if="item.reward_stage==2">实际收益：<span
								style="color: red;">￥{{item.RewardStrategy[0].per_reward}}</span></p>
					</view>
				</view>
			</view>
		</view>

		<view class="home" v-if="showList[2] && !loading">
			<view class="task" v-for="item in secTaskLists[2]" @click="handleToSecTaskDetail(item)">
				<view class="task-card">
					<view class="task-info">
						<!-- 左侧图片和文字 -->
						<view class="task-info-left">
							<!-- 图片 -->
							<image class="project-img" :src="item.product_img_url"></image>
							<image v-if="item.isFinished" class="overlay-img"  src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/home4.png"></image>
							<!-- 描述 -->
							<view class="task-info-txt">
								<!-- <view class="" style="display: flex;">
									<image class="platform-img" :src="item.platform_icon_url"></image>
									<p style="font-size: 28rpx; line-height: 28rpx;color: black;">
										{{item.selection_name}}
									</p>
								</view> -->
								<view class="Tasktext">
									<image class="platform-img" :src="item.PlatformInfo.platform_icon"></image>
									<span>
										{{item.SelectionInfo.selection_name}}
									</span>
								</view>
								<p style="color: #ffcb41 ;">任务截至时间:{{item.ddl}}</p>
								<p>售价：￥{{item.price}} 佣金率：{{item.exclusive_commission}}%</p>
								<!-- sectask表有已经有 -->
								<p>全部销售量/有效销售量：{{item.sale_num_all}}单/{{item.sale_actual}}单</p>
								<p v-if="item.task_mode==1">悬赏金额/悬赏有效销售量：
									￥{{item.RewardStrategy[0].per_reward}}/{{item.RewardStrategy[0].sale_actual}}单</p>
								<p v-if="item.sample_mode==1">免费领样状态：{{ getFreeStageText(item.free_stage) }}</p>
							</view>
						</view>
						<!-- 右侧图标 -->
						<view class="task-info-right">
							<image
								src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent_upload/icon-arrow-right.png"
								style="height: 30rpx;width: 30rpx;"></image>
						</view>
					</view>
					<view class="container">
						<p class="left-text" v-if="item.reward_stage==1"><span style="color: green;">待领悬赏</span></p>
						<p class="right-text" v-if="item.reward_stage==2">实际收益：<span
								style="color: red;">￥{{item.RewardStrategy[0].per_reward}}</span></p>
					</view>
				</view>
			</view>
		</view>

		<view class="home" v-if="showList[3] && !loading">
			<view class="task" v-for="item in secTaskLists[3]" @click="handleToSecTaskDetail(item)">
				<view class="task-card">
					<view class="task-info">
						<!-- 左侧图片和文字 -->
						<view class="task-info-left">
							<!-- 图片 -->
							<image class="project-img" :src="item.product_img_url"></image>
							<image v-if="item.isFinished" class="overlay-img"  src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/home4.png"></image>
							<!-- 描述 -->
							<view class="task-info-txt">
								<!-- <view class="" style="display: flex;">
									<image class="platform-img" :src="item.platform_icon_url"></image>
									<p style="font-size: 28rpx; line-height: 28rpx;color: black;">
										{{item.selection_name}}
									</p>
								</view> -->
								<view class="Tasktext">
									<image class="platform-img" :src="item.PlatformInfo.platform_icon"></image>
									<span>
										{{item.SelectionInfo.selection_name}}
									</span>
								</view>
								<p style="color: #ffcb41 ;">任务截至时间:{{item.ddl}}</p>
								<p>售价：￥{{item.price}} 佣金率：{{item.exclusive_commission}}%</p>
								<!-- sectask表有已经有 -->
								<p>全部销售量/有效销售量：{{item.sale_num_all}}单/{{item.sale_actual}}单</p>
								<p v-if="item.task_mode==1">悬赏金额/悬赏有效销售量：
									￥{{item.RewardStrategy[0].per_reward}}/{{item.RewardStrategy[0].sale_actual}}单</p>
								<p v-if="item.sample_mode==1">免费领样状态：{{ getFreeStageText(item.free_stage) }}</p>
							</view>
						</view>
						<!-- 右侧图标 -->
						<view class="task-info-right">
							<image
								src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent_upload/icon-arrow-right.png"
								style="height: 30rpx;width: 30rpx;"></image>
						</view>
					</view>
					<view class="container">
						<p class="left-text" v-if="item.reward_stage==1"><span style="color: green;">待领悬赏</span></p>
						<p class="right-text" v-if="item.reward_stage==2">实际收益：<span
								style="color: red;">￥{{item.RewardStrategy[0].per_reward}}</span></p>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mvBar from "@/components/mys_navBar/mysNavBar";
	import {
		fansview,
		money,
		getDaysAndHoursBetweenDates,
	} from '@/components/utils.js';
	export default {
		components: {
			mvBar,
		},
		data() {
			return {
				navH: getApp().globalData.navHeight,
				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",
					},
				},

				loading: false,
				showList: [true, false, false, false],
				secTaskStageList: [],
				secTaskLists: [
					[],
					[],
					[],
					[]
				],
				curTab: 0,
				productInfo: {},
			}
		},
		async onLoad(options) {
			// 判断登录
			await this.isLoginApi();
			if (this.token === '') {
				uni.showModal({
					content: '请先登录',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							});
						} else if (res.cancel) {
							uni.navigateBack();
						}
					}
				});
			}
			console.log("options--->", options)
			let data = options.textObj.replace(/""/g, "");
			data = JSON.parse(decodeURIComponent(data))
			console.log("data（上级页面参数解码后）--->", data)
			this.curTab = data.value
			console.log("curTab---->", this.curTab)

			let that = this
			this.showList.forEach(function(item, index) {
				if (index == that.curTab) {
					that.showList[index] = true
				} else {
					that.showList[index] = false
				}
			})
			console.log("showList: ", this.showList)
		},
		async onShow() {
			console.log("onshow!!!!!!!!")
			await this.getInfoTableApi()
			this.handleClickTab(this.curTab)
		},
		methods: {
			getFreeStageText(freeStage) {
				switch (freeStage) {
					case 1:
						return '已申请';
					case 2:
						return '已拒绝';
					case 3:
						return '待发货';
					case 4:
						return '已发货';
					case 5:
						return '已收货';
					default:
						return '未知状态';
				}
			},
			async handleClickTab(value) {
				this.loading = true;
				uni.showLoading({
					title: '加载中'
				});

				let that = this
				this.showList.forEach(function(item, index) {
					if (index == value) {
						that.showList[index] = true
					} else {
						that.showList[index] = false
					}
				})
				console.log("handleClickTab", that.showList)
				// value为0123
				await this.getSecTaskListApi_new(parseInt(value) + 1);

				uni.hideLoading();
				this.loading = false;
			},
			handleToSecTaskDetail(item) {
				console.log("item--->", item)
				uni.navigateTo({
					url: '/page_workspace/selection/sectaskdetail1?taskId=' + item.task_id,
					success(res) {},
					fail(err) {}
				});
			},
			// 判断登陆是否过期
			isLoginApi() {
				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')
						}
					})
			},
			// 获取所有的info_sectask_stage的状态即 任务阶段
			getInfoTableApi() {
				return this.$https.get('/youngee/c/g/get-info-tables')
					.then(res => {
						console.log("/youngee/c/g/get-info-tables", res)
						this.secTaskStageList = res.data.data.SecTaskStage
					})
			},
			getProductInfoApi(item) {
				return this.$https.get('/youngee/c/t/g/get-product-detail' +
						"?productid=" +
						item
					)
					.then(res => {
						console.log("getproductsuccess---", res)
						this.productInfo = res.data.data

					})
			},
			// 此处value为1234（在后端处理后，每个数字会对应多个状态）  更多task_stage参考info_sectask_stage
			async getSecTaskListApi(value) {
				return this.$https.get('/youngee/c/api/t/secTask/list?task_stage=' + value).then(
					async res => { // 注意这里添加了async关键字
						if (res.data.code === 1) {
							console.log("res--->", res)
							let secTaskList = res.data.data.sec_task
							console.log("secTaskList--->", secTaskList)
							let num = res.data.data.count
							for (let i = 0; i < num; ++i) {

								//通过prouctid获取product表和product_photo表的信息
								await this.getProductInfoApi(secTaskList[i].product_id);

								console.log("****secTaskList[i]*******", secTaskList[i])
								secTaskList[i].price = this.productInfo.product_price
								secTaskList[i].exclusive_commission = this.productInfo.exclusive_commission

								// 主图
								if (secTaskList[i].product_photo_snap != null && secTaskList[i]
									.product_photo_snap !=
									'') {
									let productPhoto = JSON.parse(secTaskList[i].product_photo_snap);
									for (let j = 0; j < productPhoto.length; j++) {
										if (productPhoto[j].Symbol == 1) {
											secTaskList[i].product_img_url = productPhoto[j].PhotoUrl
										}
									}
								}
								//截至时间
								secTaskList[i].ddl = secTaskList[i].task_ddl
								//售价和佣金率


								// 待修改标识
								if (secTaskList[i].task_stage == 8 && secTaskList[i].assignment_status == 3) {
									secTaskList[i].isShowModify = true
								} else {
									secTaskList[i].isShowModify = false
								}

								// 任务阶段展示							
								secTaskList[i].task_stage_txt = this.secTaskStageList[secTaskList[i]
										.task_stage - 1]
									.task_stage

								// 任务收益

							}
							this.secTaskLists[value - 1] = secTaskList
						}

					})
			},
			// 此处value为1234（在后端处理后，每个数字会对应多个状态）  更多task_stage参考info_sectask_stage
			async getSecTaskListApi_new(value) {
				return this.$https.get('/youngee/c/api/t/secTask/list-tab?tab_stage=' + value).then(
					async res => { // 注意这里添加了async关键字
						if (res.data.code === 1) {
							console.log("****res*******", res)
							let secTaskList = res.data.data.SecTaskTable
							let num = res.data.data.count
							for (let i = 0; i < num; ++i) {
								console.log("****secTaskList[i]*******", secTaskList[i])
								let product_info = secTaskList[i].YounggeeProduct
								let product_photo_info = secTaskList[i].YounggeeProductPhoto
								let selection_platform = secTaskList[i].PlatformInfo
								secTaskList[i].price = product_info.product_price
								secTaskList[i].exclusive_commission = product_info.exclusive_commission
								// 主图
								if (product_photo_info != null && product_photo_info != '') {
									for (let j = 0; j < product_photo_info.length; j++) {
										if (product_photo_info[j].symbol == 1) {
											secTaskList[i].product_img_url = product_photo_info[j].photo_url
										}
									}
								}
								//截至时间
								secTaskList[i].ddl = secTaskList[i].SelectionInfo.task_ddl
								// 判断是否到期
								secTaskList[i].isFinished = this.isFinish(secTaskList[i].ddl)
							}
							this.secTaskLists[value - 1] = secTaskList
						}

					})
			},
			isFinish(ddl) {
				var timeNow = new Date();
				var ddl = new Date(ddl.replace(/-/g, "/"));
				var diff = getDaysAndHoursBetweenDates(timeNow, ddl);
				let remain_days = diff.days;
				let remain_hours = diff.hours;
				if (remain_days <= 0 & remain_hours <= 0) return true;
				else return false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	p {
		font-size: 32rpx;
	}
	
	.overlay-img {
	  position: absolute;
	  width: 200rpx;
	  height: 200rpx;
	  background-color: black;
	  opacity: 0.5;
	  pointer-events: none; /* This makes the overlay image not interfere with any click events on the main image */
	}

	.container {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.left-text {
		text-align: left;
		flex: 1;
		font-size: 30rpx;
		padding-left: 20rpx;
	}

	.right-text {

		text-align: right;
		flex: 1;
		font-size: 30rpx;
		padding-right: 20rpx;
		padding-top: 15rpx;
	}

	.Tasktext {
		// padding-top: 5% ;
		padding: 0 0 0 1%;
		// height: 80rpx;
		// margin-top: 2%;
	}

	.Tasktext span {
		color: #333333;
		font-size: 23rpx;
		font-weight: 550;
		text-indent: 2em;

	}

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

	.home {
		padding-top: 70rpx;
	}

	.menu {
		position: fixed;
		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;
		}

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

	.task-card {
		margin: 10rpx 0;
		height: 300rpx;
		background-color: #f2f2f2;

		// border-bottom: 1rpx #d7d7d7 solid;
		.platform-img {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
			flex-shrink: 0;
		}

		.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;
				flex-shrink: 0;
			}

			.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: 200rpx;
					width: 200rpx;
					flex-shrink: 0;
					// background-color: #b3c96b;
				}

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

				.task-info-txt p {
					font-size: 24rpx;
					color: #85859d;
					letter-spacing: 2rpx;
					// margin-bottom: 4rpx;
				}
			}

			.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;
			}
		}
	}
</style>