youngee_b_api/page_mycenter/myteam/myteam.vue

<template>
	<view style="position: relative;">
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view :style="{marginTop:navH}"></view>
		<view class="head">
			<view class="show-income">
				<p>累计开团现金收益</p>
				<p style="margin-top: 20rpx;font-weight: 600;">￥0.0</p>
			</view>
			<view class="show-income">
				<p>累计开团积分收益</p>
				<p style="margin-top: 20rpx;font-weight: 600;">0</p>
			</view>
		</view>

		<view class="content">
			<p>开团明细</p>
			<view>
				<uni-search-bar @confirm="search" :focus="true" cancelButton="none" v-model="searchValue">
				</uni-search-bar>
			</view>

			<view class="menu">
				<view class="menu-item" @click="toShow1()">
					<p v-bind:class="tab == 'exe'?'lor':'unlor'">开团中</p>
				</view>
				<view class="menu-item" @click="toShow2()">
					<p v-bind:class="tab == 'end'?'lor':'unlor'">已结束</p>
				</view>
			</view>

			<view class="team-list" v-if="tab == 'exe'">
				<view class="team-card">
					<view class="project" @click="">
						<!-- 项目名称 -->
						<image class="platform-img"></image>
						<p>PUYU朴郁小树茶茶干茶粉</p>
						<view @click="toProject()">
							<image class="togo-icon" :src="picture.icon_right"></image>
						</view>
					</view>
					<view class="team-info">
						<!-- young之团信息 -->
						<image class="project-img"></image>
						<view class="team-txt">
							<!-- 成团编码 -->
							<view style="display: flex;">
								<p>成团编码ID：5234501300</p>
								<image :src="picture.icon_copy" mode=""
									style="padding-left:5rpx;width: 30rpx;height: 30rpx;"
									@click="handleCopy('5234501300')" />
							</view>
							<!-- 人数信息 -->
							<p style="padding: 10rpx 0;">已报名：25人 &nbsp; 申请成功：5人 &nbsp; 已结案：1人</p>
							<!-- 收益信息 -->
							<p style="font-weight: 600;">预计积分收益：1250 &nbsp; 预计现金收益：￥50.0</p>
						</view>
					</view>
					<view class="team-foot">
						<!-- 查看进度按钮 -->
						<button class="team-btn" type="default">查看进度</button>
					</view>
				</view>


				<view class="team-card">
					<view class="project" @click="">
						<!-- 项目名称 -->
						<image class="platform-img"></image>
						<p>PUYU朴郁小树茶茶干茶粉</p>
						<view @click="toProject()">
							<image class="togo-icon" :src="picture.icon_right"></image>
						</view>
					</view>
					<view class="team-info">
						<!-- young之团信息 -->
						<image class="project-img"></image>
						<view class="team-txt">
							<!-- 成团编码 -->
							<view style="display: flex;">
								<p>成团编码ID：5234501300</p>
								<image :src="picture.icon_copy" mode=""
									style="padding-left:5rpx;width: 30rpx;height: 30rpx;"
									@click="handleCopy('5234501300')" />
							</view>
							<!-- 人数信息 -->
							<p style="padding: 10rpx 0;">已报名：25人 &nbsp; 申请成功：5人 &nbsp; 已结案：1人</p>
							<!-- 收益信息 -->
							<p style="font-weight: 600;">预计积分收益：1250 &nbsp; 预计现金收益：￥50.0</p>
						</view>
					</view>
					<view class="team-foot">
						<!-- 查看进度按钮 -->
						<button class="team-btn" type="default">查看进度</button>
					</view>
				</view>
			</view>



			<view class="team-list" v-if="tab == 'end'">
				<view class="team-card">
					<view class="project" @click="">
						<!-- 项目名称 -->
						<image class="platform-img"></image>
						<p>PUYU朴郁小树茶茶干茶粉</p>
						<view @click="toProject()">
							<image class="togo-icon" :src="picture.icon_right"></image>
						</view>
					</view>
					<view class="team-info">
						<!-- young之团信息 -->
						<image class="project-img"></image>
						<view class="team-txt">
							<!-- 成团编码 -->
							<view style="display: flex;">
								<p>成团编码ID：5234501300</p>
								<image :src="picture.icon_copy" mode=""
									style="padding-left:5rpx;width: 30rpx;height: 30rpx;"
									@click="handleCopy('5234501300')" />
							</view>
							<!-- 人数信息 -->
							<p style="padding: 10rpx 0;">已报名：25人 &nbsp; 申请成功：5人 &nbsp; 已结案：1人</p>
							<!-- 收益信息 -->
							<p style="font-weight: 600;">积分收益：1250 &nbsp; 现金收益：￥50.0</p>
						</view>
					</view>
					<view class="team-foot">
						<!-- 查看进度按钮 -->
						<button class="team-btn" type="default">查看历史纪录</button>
					</view>
				</view>
				
				<view class="team-card">
					<view class="project" @click="">
						<!-- 项目名称 -->
						<image class="platform-img"></image>
						<p>PUYU朴郁小树茶茶干茶粉</p>
						<view @click="toProject()">
							<image class="togo-icon" :src="picture.icon_right"></image>
						</view>
					</view>
					<view class="team-info">
						<!-- young之团信息 -->
						<image class="project-img"></image>
						<view class="team-txt">
							<!-- 成团编码 -->
							<view style="display: flex;">
								<p>成团编码ID：5234501300</p>
								<image :src="picture.icon_copy" mode=""
									style="padding-left:5rpx;width: 30rpx;height: 30rpx;"
									@click="handleCopy('5234501300')" />
							</view>
							<!-- 人数信息 -->
							<p style="padding: 10rpx 0;">已报名：25人 &nbsp; 申请成功：5人 &nbsp; 已结案：1人</p>
							<!-- 收益信息 -->
							<p style="font-weight: 600;">积分收益：1250 &nbsp; 现金收益：￥50.0</p>
						</view>
					</view>
					<view class="team-foot">
						<!-- 查看进度按钮 -->
						<button class="team-btn" type="default">查看历史纪录</button>
					</view>
				</view>
			</view>

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

<script>
	import mvBar from "@/components/mys_navBar/mysNavBar";
	import {
		fansview
	} from '@/components/utils.js';
	export default {
		components: {
			mvBar,
		},
		data() {
			return {
				navH: getApp().globalData.navHeight,
				mysNavConfig: {
					/* 开启单页显示首页图标 */
					isHome: true,
					/* 固定导航  */
					navFixed: true,
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "YOUNG之团",
						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",
					},
				},
				picture: {
					icon_help: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent_upload/icon-help.png',
					icon_copy: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent_upload/icon-copy.png',
					icon_person: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/youngee/talent_upload/icon-person.png',
					icon_edit: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent_upload/icon-edit2.png',
					icon_location: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/youngee/talent_upload/icon-location.png',
					icon_account: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/youngee/talent_upload/icon-account.png',
					icon_rmb: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/youngee/talent_upload/icon-rmb.png',
					icon_message: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/youngee/talent_upload/icon-message.png',
					icon_right: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent_upload/icon-arrow-right.png',
					defaultavatarUrl: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/logoxin01.png',
				},
				searchValue: "",
				showList1: false,
				showList2: false,
				tab: 'exe',
			}
		},
		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')
						}
					})
			},
			async search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			handleCopy(text) {
				wx.setClipboardData({
					data: text,
					success: function(res) {
						console.log("复制成功");
					}
				});
			},
			toShow1() {
				this.tab = 'exe';
			},
			toShow2() {
				this.tab = 'end';
			},
		}
	}
</script>

<style>
	/deep/ .uni-searchbar__box-search-input {
		font-size: 32rpx !important;
	}
</style>

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

	.head {
		margin: 10rpx 3%;
		border-radius: 15rpx;
		background-color: #f0d232;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.show-income {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.content {
		margin: 30rpx 3%;
	}

	.menu {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

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

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

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

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

	.point-card-left {
		display: flex;
		flex-direction: column;
		justify-content: start;
	}

	.point-card-right p {
		color: #f0d232;
		font-weight: 600;
	}

	.team-list {
		padding: 20rpx 0;
	}

	.team-card {
		margin: 20rpx 0;
		display: flex;
		flex-direction: column;
		// justify-content: start;
	}

	.project {
		display: flex;
		align-items: center;
	}

	.project p{
		font-weight: 600;
	}

	.platform-img {
		width: 40rpx;
		height: 40rpx;
		background-color: #F0D232;
		margin-right: 10rpx;
	}

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

	.team-info {
		margin: 20rpx 0;
		display: flex;
		justify-content: start;
		align-items: center;
	}

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

	.team-txt {
		margin-left: 10rpx;
		display: flex;
		flex-direction: column;
	}

	.team-txt p {
		font-size: 28rpx;
	}

	.team-foot {
		padding: 0 20rpx;
		text-align: right;
	}

	.team-btn::after {
		border: none;
	}

	.team-btn {
		display: inline-block;
		width: 250rpx;
		border: 1rpx solid #F0D232;
		background-color: #ffffff;
		border-radius: 15rpx;
		font-size: 28rpx;
		line-height: 200%;
	}
</style>