youngee_c_web_v2/page_mycenter/myselection/myselection.vue

<template>
	<view>
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view :style="{marginTop:navH}"></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'" style="padding-top: 100rpx;">
			<view class="task">
				<view class="task-card">
					<view class="task-head">
						<view class="task-head-account">
							<image class="platform-img"></image>
							<p>丸子在成都</p>
						</view>
						<view class="task-head-status">
							<p>已报名</p>
						</view>
					</view>
					<view class="task-info">
						<view class="task-info-left">
							<image class="project-img"></image>
							<view class="task-info-txt">
								<p style="color: #000;font-size: 32rpx;">鹿小井婴儿餐具清洗液</p>
								<p style="color: #F0D232;">上传截止时间：2022/1/9 10:00</p>
								<p>样品预计返现金额：￥35.0</p>
								<p>预计收益：￥300.0</p>
							</view>
						</view>
					</view>
					<view style="text-align: right;">
						<p style="display: inline-block;">实际收益：￥435.0</p>
					</view>
				</view>

				<view class="task-card">
					<view class="task-head">
						<view class="task-head-account">
							<image class="platform-img"></image>
							<p>丸子在成都</p>
						</view>
						<view class="task-head-status">
							<p>已报名</p>
						</view>
					</view>
					<view class="task-info">
						<view class="task-info-left">
							<image class="project-img"></image>
							<view class="task-info-txt">
								<p style="color: #000;font-size: 32rpx;">鹿小井婴儿餐具清洗液</p>
								<p style="color: #F0D232;">上传截止时间：2022/1/9 10:00</p>
								<p>样品预计返现金额：￥35.0</p>
								<p>预计收益：￥300.0</p>
							</view>
						</view>
					</view>
					<view style="text-align: right;">
						<p style="display: inline-block;">实际收益：￥435.0</p>
					</view>
				</view>
			</view>
		</view>

		<view class="home" v-if="tab == 'apply'" style="padding-top: 100rpx;">
		</view>

		<view class="home" v-if="tab == 'execute'" style="padding-top: 100rpx;">
		</view>

		<view class="home" v-if="tab == 'end'" style="padding-top: 100rpx;">

		</view>

	</view>
	</view>
</template>

<script>
	import mvBar from "@/components/mys_navBar/mysNavBar";
	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",
					},
				},
				tab: 'all',
			}
		},
		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
		},
		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')
						}
					})
			},
			toAll() {
				this.tab = 'all'

			},
			toApply() {
				this.tab = 'apply'

			},
			toExecute() {
				this.tab = 'execute'

			},
			toEnd() {
				this.tab = 'end'
			},
		}
	}
</script>

<style lang="scss" scoped>
	p {
		font-size: 32rpx;
	}

	.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;
		// 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;
				background-color: #F0D232;
			}

			.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 p {
				font-size: 24rpx;
			}
		}
	}
</style>