youngee_b_api/pages/mycenter/mycenter.vue

<template>
	<view>
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view class="home">
			<view class="head" v-if="token">
				<view class="head-avator">
					<image :src="avatarUrl" mode="" style="border-radius: 50%; width: 100%;height: 100%;">
					</image>
				</view>
				<view>
					<p style="padding-bottom: 20rpx;font-size: 35rpx;">{{information.talent_wx_nickname}}</p>
					<p style="font-size: 25rpx;">ID:{{information.id}}</p>
				</view>
				<image class="head-message" :src="picture.icon_message"></image>
			</view>
			<view class="head" v-if="!token">
				<view class="head-avator">
					<image :src="picture.defaultavatarUrl" mode="" @tap="login"
						style="border-radius: 50%; 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 class="show-income1">
				<view class="show-income1-text">
					<p>我获得的收益总数</p>
					<p style="font-size: 40rpx;font-weight:bold;color: #F0D232;" @click="toincome('all')">
						{{information.income?information.income:0}}
					</p>
				</view>
				<view class="show-income1-text2">
					<button class="show-income1-btn" type="default" @click="withdraw()">提现</button>
				</view>
			</view>
			<view class="show-income2">
				<view class="show-income2-text" @click="toincome('can')">
					<p style="padding-bottom: 20rpx;color: #807F7A;">可提现</p>
					<p>{{information.canwithdraw?information.canwithdraw:0}}</p>
				</view>
				<view class="show-income2-text" @click="toincome('ed')">
					<p style="padding-bottom: 20rpx;color: #807F7A;">已提现</p>
					<p>{{information.withdrawed?information.withdrawed:0}}</p>
				</view>
				<view class="show-income2-text" @click="toincome('ing')">
					<p style="padding-bottom: 20rpx;color: #807F7A;">提现中</p>
					<p>{{information.withdrawing?information.withdrawing:0}}</p>
				</view>
			</view>
			<view class="show-body">
				<view class="show-body1">
					<view class="show-body1-text1">
						<p>我的任务</p>
					</view>
					<view class="show-body1-text2">
						<image class="show-body1-icon" :src="picture.icon_right"></image>
					</view>
				</view>
				<view class="show-body2">
					<view class="show-body2-text" style="padding-left: 30rpx;" @click="tomytask('all')">
						<p class="task-num-p">{{information.task_all?information.task_all:0}}</p>
						<p padding>全部任务</p>
					</view>
					<view class="shu-line"></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="shu-line"></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="shu-line"></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-body1">
					<view class="show-body1-text1">
						<p>我的信息</p>
					</view>
					<view class="show-body1-text2">
						<image class="show-body1-icon" :src="picture.icon_right"></image>
					</view>
				</view>
				<view class="show-info">
					<view class="show-info-text" @click="personinfo()">
						<image class="show-info-icon" :src="picture.icon_person"></image>
						<p>个人资料</p>
					</view>
					<view class="show-info-text" @click="mylocation()">
						<image class="show-info-icon" :src="picture.icon_location"></image>
						<p>收货地址</p>
					</view>
					<view class="show-info-text" @click="myaccount()">
						<image class="show-info-icon" :src="picture.icon_account"></image>
						<p>社媒账号</p>
					</view>
					<view class="show-info-text" @click="mybank()">
						<image class="show-info-icon" :src="picture.icon_rmb"></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>
</template>

<script>
	import mvBar from "@/components/mys_navBar/mysNavBar";
	export default {
		components: {
			mvBar,
		},
		data() {
			return {
				picture: {
					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: {

				},
			};
		},
		onShow() {
			this.nickName = uni.getStorageSync('nickName')
			this.avatarUrl = uni.getStorageSync('avatarUrl')
			this.token = uni.getStorageSync('token')
			console.log(this.token)
			if (this.token !== '')
				this.gettalentinfo()
		},
		onLoad() {

		},
		methods: {
			gettalentinfo() {
				this.$https.get('/youngee/c/t/g/get-talent-info')
					.then(res => {
						console.log(res)
						this.information = res.data.data
					})
			},
			// 进入登录页面
			login() {
				uni.navigateTo({
					url: '../login/login'
				});
			},
			// 进入个人资料
			personinfo() {
				if (this.token !== '')
					uni.navigateTo({
						url: '/pages/mycenter/personinfo'
					});
				else
					this.login()
			},
			// 进入收货地址
			mylocation() {
				if (this.token !== '')
					uni.navigateTo({
						url: '/pages/mycenter/mylocation'
					});
				else
					this.login()
			},
			// 进入社媒账号
			myaccount() {
				if (this.token !== '')
					uni.navigateTo({
						url: '/pages/mycenter/myaccount'
					});
				else
					this.login()
			},
			// 进入个人账号页面
			mybank() {
				if (this.token !== '')
					uni.navigateTo({
						url: '/pages/mycenter/mybank'
					});
				else
					this.login()
			},
			// 提现
			withdraw() {
				console.log("提现")
			},
			// 进入收益页面
			toincome(tab) {
				console.log(tab)
			},
			// 进入我的任务页面
			tomytask(tab) {
				console.log(tab)
			}
		},
		// 保留两位小数点
		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()
		},
		// 进入关于样叽
		about() {
			uni.navigateTo({
				url: '/pages/my/aboutyg'
			});
		},
		// 进入个人信息
		personal() {
			uni.navigateTo({
				url: '/pages/my/personal'
			});
		},
		// 进入收货地址
		receiving() {
			uni.navigateTo({
				url: '/pages/my/receiving'
			});
		},
		// 进入卜卜币页面
		ppcurrency() {
			uni.navigateTo({
				url: '/pages/ppcurrency/ppcurrency'
			});
		},
		// 进入个人账号页面
		gameplayer() {
			uni.navigateTo({
				url: '/pages/gameplayer/gameplayer'
			});
		},
		// 进入任务列表页面

		mymission(typee) {
			if (this.token !== '') {
				uni.navigateTo({
					url: '/pages/mymission/mymission?typee=' + typee
				});
			} else {
				uni.showToast({
					title: '请先登录',
					icon: 'none',
					duration: 2000
				});
			}

		},
	};
</script>
<style>
	/deep/ .share .uni-popup .uni-popup__wrapper {
		width: 70% !important;
		border-radius: 15rpx !important;
	}
</style>
<style lang="scss" scoped>
	p {
		font-size: 30rpx;
	}

	.head {
		display: flex;
		/* 垂直居中 */
		align-items: center;
		height: 200rpx;
		position: relative;
		margin: 2% 3% 3%;
		border: 1rpx solid #BCBCBC;
		border-radius: 10rpx;
	}

	.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 {
		display: flex;
		align-items: center;
		height: 120rpx;
		margin: 0 3%;
		border: 1rpx solid #BCBCBC;
		border-radius: 10rpx;
	}

	.show-income1-text {
		margin-left: 20rpx;
		margin-right: 200rpx;
	}

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

	.show-income1-btn {
		width: 200rpx;
		text-align: center;
		background-color: #F0D232;
		border: 1rpx solid #BCBCBC;
		border-radius: 15rpx;
		font-size: 35rpx;
		line-height: 180%;
	}

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

	.show-income2-text {
		padding: 0 50rpx;
		text-align: center;
	}

	.show-body {
		height: 250rpx;
		margin: 0 3% 3%;
		border: 1rpx solid #BCBCBC;
		border-radius: 10rpx;
	}

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

	.show-body1-text1 {
		display: flex;
		justify-content: flex-start; 
		margin-left: 20rpx;
		// 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;
	}

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

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