youngee_c_web_v2/pages/mycenter/mycenter.vue

<template>
	<view>
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view :style="{marginTop:navH}"></view>
		<view>
			<view class="head" v-if="token">
				<view class="head-left">
					<view class="head-avator"  @click="toUserInfo()">
						<image :src="avatarUrl" mode="" style="width: 100%;height: 100%;border-radius: 100rpx;" />
					</view>
					<view>
						<p style="padding-bottom: 20rpx;font-size: 35rpx;"  @click="toUserInfo()">{{nickName}}</p>
						<span style="display: flex;align-items: center;">
							<p style="font-size: 25rpx;">ID:{{information.id}}</p>
							<image :src="picture.icon_copy" mode="" style="width: 40rpx;height: 40rpx;"
								@click="handleCopy()" />
						</span>
					</view>
				</view>
				<view class="head-right">
					<image class="head-message" :src="picture.icon_message" @click="toMessage()"></image>
					<view v-if="hasUnReadMessage">
						<span class="point"></span>
					</view>
				</view>
			</view>

			<view class="head" v-if="!token">
				<view class="head-left">
					<view class="default-head-avator">
						<image :src="picture.defaultavatarUrl" mode="" @tap="login" style="width: 100%;height: 100%;">
						</image>
					</view>
					<view class="head-text">
						<p @tap="login" style="font-size: 35rpx;padding-bottom: 10rpx;">未登录</p>
						<p @tap="login" style="font-size: 30rpx;">点击登录账号</p>
					</view>
				</view>
			</view>

			<view class="show-income1">
				<view>
					<view style="display: flex;align-items: center;">
						<p>我获得的收益总数</p>
						<image id="helpicon" :src="picture.icon_help" mode=""
							style="width: 35rpx;height: 35rpx;padding-left: 10rpx;" @click="showHelp = true" />
					</view>

					<view class="tip_box" v-if="showHelp" :style="{ top: boxTop + 'px'}">
						<view class="container" :style="{
					  'margin-right': cotainerMargin + 'px',
					  backgroundColor: '#404040', borderRadius: '5px' }">
							<!-- 提示文字 -->
							<view class="tips">
								<p style="font-size: 24rpx;color: #fff">{{Text}}</p>
							</view>
							<view class="close" @click="showHelp = false">
								<image class="closeImg" src="../../static/delete.png" />
							</view>
						</view>
					</view>
				</view>

				<view class="show-income1-text">
					<view>
						<p style="font-size: 40rpx;font-weight:bold;color: #F0D232;padding-left: 40rpx;" @click="toincome('can')">
							{{information.showIncome?information.showIncome:'0.00'}}
						</p>
					</view>
					<view>
						<button class="show-income1-btn" type="default" @click="toincome('can')">去提现</button>
					</view>
				</view>
			</view>
			<view class="show-income2">
				<view class="show-income2-text" @click="toincome('can')">
					<p style="padding-bottom: 20rpx;">可提现</p>
					<p>{{information.showCanwithdraw?information.showCanwithdraw:'0.00'}}</p>
				</view>
				<view class="show-income2-text" @click="toincome('ed')">
					<p style="padding-bottom: 20rpx;">已提现</p>
					<p>{{information.showWithdrawed?information.showWithdrawed:'0.00'}}</p>
				</view>
				<view class="show-income2-text" @click="toincome('ing')">
					<p style="padding-bottom: 20rpx;">提现中</p>
					<p>{{information.showWithdrawing?information.showWithdrawing:'0.00'}}</p>
				</view>
			</view>
			<view class="show-body" style="border-bottom: 1rpx solid #c8c8c8;">
				<view class="show-body1">
					<view class="show-body1-text1" @click="tomytask('all')">
						<p>我的任务</p>
					</view>
					<view class="show-body1-text2" @click="tomytask('all')">
						<image class="show-body1-icon" :src="picture.icon_right"></image>
					</view>
				</view>
				<view class="show-body2">
					<view class="show-body2-text" @click="tomytask('all')">
						<p class="task-num-p">{{information.task_all?information.task_all:0}}</p>
						<p padding>全部任务</p>
					</view>
					<view class="show-body2-text" @click="tomytask('apply')">
						<p class="task-num-p">{{information.task_apply?information.task_apply:0}}
						<p>
						<p>已报名</p>
					</view>
					<view class="show-body2-text" @click="tomytask('execute')">
						<p class="task-num-p">{{information.task_execute?information.task_execute:0}}</p>
						<p>执行中</p>
					</view>
					<view class="show-body2-text" @click="tomytask('end')">
						<p class="task-num-p">{{ information.task_end ? information.task_end:0}}</p>
						<p>已结束</p>
					</view>
				</view>
			</view>

			<view class="show-body">
				<view class="show-info">
					<view class="show-info-text" @click="handleInformation()">
						<image class="show-info-icon" :src="picture.icon_person"></image>
						<p>我的信息</p>
					</view>
				</view>
			</view>


			<!-- 普通弹窗  公众号-->
			<uni-popup ref="popup2" class="share" background-color="#fff" @change="change">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<view class="sharepage">
						<view class="Tasktext1">
							<image :src="picture.task15" mode=""></image>
							<span>YoungGee</span>
						</view>
						<view class="" style="margin-top: 5%;">
							<p style='color: #333333;font-size: 28rpx;text-align: center;'>不错过任何上新</p>
						</view>
						<view class="" style="margin-top: 5%;">
							<p style='color: #333333;font-size: 24rpx;'>公众号：</p>
						</view>

						<view class="sharemap">
							<image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/gzh.png" mode="">
							</image>
						</view>
					</view>
				</view>
			</uni-popup>

			<!-- 普通弹窗  商务合作-->
			<uni-popup ref="popup3" class="share" background-color="#fff" @change="change">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<view class="sharepage">
						<view class="Tasktext1">
							<image :src="picture.task15" mode=""></image>
							<span>YoungGee</span>
						</view>
						<view class="" style="margin-top: 5%;">
							<p style='color: #333333;font-size: 28rpx;text-align: center;'>商务合作请联系我们</p>
						</view>
						<view class="" style="margin-top: 5%;">
							<p style='color: #333333;font-size: 24rpx;'>电话：010-53355656</p>
							<p style='color: #333333;font-size: 24rpx;'>商务：</p>
						</view>

						<view class="sharemap" style="margin-bottom: 5%;margin-top: 5%;">
							<image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/shangwu.png" mode="">
							</image>
						</view>
					</view>
				</view>
			</uni-popup>

			<!-- 普通弹窗  客服-->
			<uni-popup ref="popup4" class="share" background-color="#fff" @change="change">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<view class="sharepage">
						<view class="Tasktext1">
							<image :src="picture.task15" mode=""></image>
							<span>YoungGee</span>
						</view>
						<view class="" style="margin-top: 5%;">
							<p style='color: #333333;font-size: 28rpx;text-align: center;'>扫码联系</p>
						</view>
						<view class="sharemap">
							<image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/kefu.png" mode="">
							</image>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>

		<!-- <view class="" style="text-align: center;margin: 5% 0;">
			<button size="mini" @tap="toSpecialTask()">专项测试</button>
		</view> -->
		<!-- </view> -->
	</view>
</template>

<script>
	import mvBar from "@/components/mys_navBar/mysNavBar";
	import {
		money
	} from '@/components/utils.js';
	export default {
		components: {
			mvBar,
		},
		data() {
			return {
				navH: getApp().globalData.navHeight,
				hasUnReadMessage: false,
				Text: "在平台产生的总收益【可提现+已提现+提现中】",
				showHelp: false,
				boxTop: 0,
				arrowMargin: 0,
				cotainerMargin: 0,
				screenWidth: 0,
				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_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',
				},
				token: '',
				nickName: '',
				avatarUrl: '',
				type: 'center',
				type2: 'center',
				type3: 'center',
				type4: 'center',
				mysNavConfig: {
					/* 开启单页显示首页图标 */
					isHome: true,
					/* 固定导航  */
					navFixed: true,
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "我的",
						color: "",
						fontSize: "32rpx", // px upx rpx
						fontWeight: "normal", // 100 - 700
					},
				},
				codeImg: '',
				information: {},
			};
		},
		onReady() {
			this.init()
		},
		async onShow() {
			// 显示加载中
			uni.showLoading({
				title: '加载中'
			});
			// 判断登陆是否过期
			this.token = uni.getStorageSync('token')
			await this.$https.get('/youngee/c/t/g/is-login')
				.then(res => {
					if (res.data.code == 403) {
						this.token = ""
						uni.hideLoading();
					}
				})
			if (this.token !== '') { // 若登录
				this.nickName = uni.getStorageSync('nickName');
				this.avatarUrl = uni.getStorageSync('avatarUrl');

				// 获取达人基本信息
				await this.$https.get('/youngee/c/t/g/get-talent-info')
					.then(res => {
						if (res.data.code === 0) {
							this.information = res.data.data
							this.information.showWithdrawing = money(this.information.withdrawing)
							this.information.showWithdrawed = money(this.information.withdrawed)
							this.information.showCanwithdraw = money(this.information.canwithdraw)
							this.information.showIncome = money(this.information.income)
						}
					});
				// 获取达人参与任务数量
				await this.$https.get('/youngee/c/t/g/get-task-num')
					.then(res => {
						console.log(res)
						if (res.data.code === 0) {
							this.information.task_all = res.data.data.all_num
							this.information.task_apply = res.data.data.sign_up_num
							this.information.task_execute = res.data.data.going_on_num
							this.information.task_end = res.data.data.completed_num
						}
					})
				await this.$https.get('/youngee/c/t/g/has-un-read-message')
					.then(res => {
						if (res.data.code === 0) {
							this.hasUnReadMessage = res.data.data === 0 ? false : true;
						}
					})
			} else { // 未登录
				// this.login();
			}
			uni.hideLoading();
		},
		onLoad() {},
		methods: {
			toSpecialTask() {
				uni.navigateTo({
					url: '/pages/tasksquare/specialTask/specialTaskDetail?id=' + "2302662349"
				});
			},
			init() {
				let rect = uni.getMenuButtonBoundingClientRect();
				let screenWidth = uni.getSystemInfoSync().screenWidth;
				// this.boxTop = rect.bottom;
				this.arrowMargin = rect.width * 0.75 + 4;
				this.cotainerMargin = screenWidth - rect.right;

				var that = this;

				const query = uni.createSelectorQuery().in(that);
				query.select('#helpicon').boundingClientRect(data => {
					this.boxTop = data.bottom;
					console.log(data)
				}).exec();
			},
			handleCopy() {
				wx.setClipboardData({
					data: this.information.id,
					success: function(res) {
						console.log("复制成功");
					}
				});
			},
			// 进入登录页面
			login() {
				uni.navigateTo({
					url: '../login/login'
				});
			},
			// 进入头像昵称修改页面
			toUserInfo() {
				uni.navigateTo({
					url: '../login/userinfo'
				});
			},
			// 进入通知页面
			toMessage() {
				uni.navigateTo({
					url: 'message'
				});
			},
			// 进入个人资料
			handleInformation() {
				if (this.token !== '')
					uni.navigateTo({
						url: '/pages/mycenter/myinformation/myinformation'
					});
				else
					this.login()
			},
			// 进入收益页面
			toincome(tab) {
				console.log(tab)
				if (this.token !== '') {
					switch (tab) {
						case "can":
							uni.navigateTo({
								url: '/pages/mycenter/myincome?showTab=1'
							});
							break;
						case "ed":
							uni.navigateTo({
								url: '/pages/mycenter/myincome?showTab=2'
							});
							break;
						case "ing":
							uni.navigateTo({
								url: '/pages/mycenter/myincome?showTab=3'
							});
							break;
					}
				} else
					this.login()
			},
			// 进入我的任务页面
			tomytask(tab) {
				console.log(tab)
				if (this.token !== '') {
					var data = {
						tab: tab
					};
					data = JSON.stringify(data)
					uni.navigateTo({
						url: '/pages/mycenter/mytask/mytask?textObj=' + encodeURIComponent(data)
					});
				} else
					this.login()
			},
			// 保留两位小数点
			toDecimal(x) {
				var f = parseFloat(x);
				if (isNaN(f)) {
					return;
				}
				f = Math.round(x * 100) / 100;
				return f;
			},
			//弹出层
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			togo2(type) {
				this.type2 = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup2.open(type)
				// this.$refs.popup1.close()
			},
			togo3(type) {
				this.type3 = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup3.open(type)
				// this.$refs.popup1.close()
			},
			togo4(type) {
				this.type4 = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup4.open(type)
				// this.$refs.popup1.close()
			},
		},
	};
</script>
<style>
	/deep/ .share .uni-popup .uni-popup__wrapper {
		width: 70% !important;
		border-radius: 15rpx !important;
	}
</style>
<style lang="scss" scoped>
	p {
		font-size: 32rpx;
	}

	.head {
		display: flex;
		/* 垂直居中 */
		align-items: center;
		justify-content: space-between;
		height: 200rpx;
		position: relative;
		margin: 2% 3% 3%;
	}

	.head-left {
		display: flex;
		align-items: center;
	}

	.head-right {
		display: flex;
	}

	.default-head-avator {
		display: inline-block;
		margin: 0 25rpx;
		padding: 10rpx 10rpx 0 0;
		width: 120rpx;
		height: 120rpx;
		background-color: #F0D232;
		border-radius: 50%;
	}

	.head-avator {
		display: inline-block;
		margin: 0 25rpx;
		width: 120rpx;
		height: 120rpx;
		background-color: #F0D232;
		border-radius: 50%;
	}

	.head-text {
		display: inline-block;

	}

	.head-message {
		margin: 10rpx 20rpx 10rpx 100rpx;
		width: 60rpx;
		height: 60rpx;
	}

	.show-income1 {
		height: 150rpx;
		margin: 0 3%;
	}

	.show-income1-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.show-income1-text2 {
		flex: 1;
		display: flex;
	}

	.show-income1-btn {
		width: auto;
		padding: 0 40rpx;
		text-align: center;
		background-color: #F0D232;
		border-radius: 15rpx;
		font-size: 32rpx;
		line-height: 200%;
	}

	.show-income2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 150rpx;
		margin: 0 3% 3%;
		background-color: #F0D232;
		border-radius: 10rpx;
		padding: 0 40rpx;
	}

	.show-income2-text {
		text-align: center;
	}

	.show-body {
		height: 250rpx;
		margin: 0 3% 3%;
	}

	.show-body1 {
		display: flex;
		align-items: center;
		height: 80rpx;
	}

	.show-body1-text1 {
		display: flex;
		justify-content: flex-start;
		margin-left: 40rpx;
		// margin-right: 480rpx;
	}

	.show-body1-text2 {
		display: flex;
		justify-content: flex-end;
		margin-right: 20rpx;
		flex: 1;
		// display: flex;
	}

	.show-body1-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.show-body2 {
		// display: flex;
		// align-items: center;
		// justify-content: space-between;

		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
	}

	.show-body2-text {
		// width: 150rpx;
		text-align: center;
	}

	.task-num-p {
		padding-bottom: 40rpx;
		font-size: 35rpx;
		font-weight: bold;
		color: #F0D232;
	}

	.shu-line {
		border: 1rpx solid #BCBCBC;
		float: left;
		height: 70rpx;
		margin: 0 10rpx;
		margin-bottom: 30rpx;
	}

	.show-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
	}

	.show-info-text {
		text-align: center;
	}

	.show-info-icon {
		width: 50rpx;
		height: 50rpx;
		padding-bottom: 20rpx;
	}

	.butto {
		text-align: center;
	}

	.option {
		padding: 20rpx;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.card {
		width: 88%;
		// height: 200rpx;
		padding: 24rpx;
		margin-top: 30rpx;
		border-radius: 15rpx;
		background-color: #ffffff;
		margin: 0 auto;
		box-shadow: 0px 0px 10rpx 2rpx #ffffff;
	}

	.iimmg {
		width: 80rpx;
		height: 80rpx;
		background-color: #FFFFFF;
		border-radius: 15%;
	}

	.iimmg image {
		width: 60%;
		height: 60%;
		padding: 20%;
	}

	.ppan {
		font-size: 60%;
		margin-top: 1%;
	}

	.headportrait {
		margin: 0 auto;
		width: 180rpx;
		height: 180rpx;
		background-color: #FEE58E;
		border-radius: 50%;
	}

	.task22 {
		width: 80%;
		height: 80%;
		padding: 10%;
	}

	.but1 {
		// width: 120%;
		text-align: center;
		background-color: #1890FF;
		color: #FFFFFF;
		border-radius: 10rpx;
		font-size: 34rpx;
		line-height: 150%;
		font-weight: 500;
		height: 60%;
	}

	.dou p {
		font-size: 26rpx;
		color: #333333;
		font-weight: 550;
		text-align: center;
	}

	.dou span {
		font-size: 24rpx;
		color: #666666;
		text-align: center;
	}

	.title-left {
		width: 4rpx;
		height: 80rpx;
		background: #E2E2E2;
		display: inline-block;
		border-radius: 1rpx;
		margin-top: 4rpx;
		vertical-align: top;

	}

	//弹窗
	.sharepage {
		width: 90%;
		margin: 0 auto;
		// position: relative;
	}

	/deep/ .share.uni-popup .uni-popup__wrapper {
		width: 70%;
		border-radius: 15rpx;
	}

	.Tasktext1 {
		// padding-top: 5%;
		padding: 0 0 0 1%;
		height: 80rpx;
		margin-top: 7%;
		text-align: center;
	}

	.Tasktext1 span {
		color: #333333;
		font-size: 100%;
		font-weight: 550;
		text-indent: 2em;

	}

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

	.sharemap {
		margin: 0 auto;
		text-align: center;
		margin-top: 15%;
		margin-bottom: 15%;
	}

	.sharemap image {
		width: 400rpx;
		height: 400rpx;

	}

	.butmin {
		height: 48rpx;
		background-color: #3397FA;
		color: #FFFFFF;
		line-height: 48rpx;
	}

	.tip_box {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 9999;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		flex-direction: column;

		.arrow {
			width: 0;
			height: 0;
			border: 10rpx solid;
			border-color: transparent;
		}

		.container {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 16rpx 24rpx;

			.tips {
				flex: 1;
				padding-right: 12rpx;
			}

			.close {
				display: flex;
				align-items: center;
				height: 30rpx;
				width: 30rpx;

				.closeImg {
					height: 100%;
					width: 100%;
				}
			}
		}
	}

	.point {
		position: absolute;
		// top: 0;
		right: 5px;
		width: 6px;
		height: 6px;
		background: red;
		border-radius: 50%;
	}
</style>