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="avatarUrl2" mode="" style="width: 100%;height: 100%;border-radius: 100rpx;" />
					</view>
					<button @click="fetchImage">获取头像</button>
					<view>
						<p style="padding-bottom: 20rpx;font-size: 35rpx;" @click="toUserInfo()">{{nickName}}</p>
						<p style="font-size: 28rpx;">ID:{{information.id}}
							<image :src="picture.icon_copy" mode="" class="copy-img"
								@click="handleCopy(information.id)" />
						</p>
					</view>
				</view>
				<view class="head-right">
					<image class="head-message" :src="picture.icon_message" @click="toMessage()"></image>
					<view v-if="numInfo.numUnReadMessage != 0">
						<span class="point">{{numInfo.numUnReadMessage}}</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-income">
				<view class="income1">
					<!-- <p> 我的钱包 </p> -->
					<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="showIncomeHelp = true" />
					</view>
					<view class="tip_box" v-if="showIncomeHelp">
						<view class="container" :style="{
					  'margin-right': cotainerMargin + 'px',
					  backgroundColor: '#404040', borderRadius: '5px' }">

							<view class="tips">
								<p>{{incomeHelpText}}</p>
							</view>
							<view class="close" @click="showIncomeHelp = false">
								<image class="closeImg" src="../../static/delete.png" />
							</view>
						</view>
					</view>
					<p @click="toIncome('can')" style="margin-right: -40rpx;font-size: 28rpx;"> 去提现> </p>
				</view>

				<view class="income2">

					<view class="income2-item" @click="toIncome('can')">
						<p>总收益</p>
						<p>{{information.showIncome?information.showIncome:'0.0'}}</p>
					</view>
					<!-- <view class="income2-item">
						<view style="display: flex;align-items: center;">
							<p @click="toIncome('can')">总收益</p>
							<image id="helpicon" :src="picture.icon_help" mode=""
								style="width: 35rpx;height: 35rpx;padding-left: 10rpx;"
								@click="showIncomeHelp = true" />
						</view>
						<view class="tip_box" v-if="showIncomeHelp">
							<view class="container" :style="{
					  'margin-right': cotainerMargin + 'px',
					  backgroundColor: '#404040', borderRadius: '5px' }">

								<view class="tips">
									<p>{{incomeHelpText}}</p>
								</view>
								<view class="close" @click="showIncomeHelp = false">
									<image class="closeImg" src="../../static/delete.png" />
								</view>
							</view>
						</view>
						<p @click="toIncome('can')">{{information.showIncome?information.showIncome:'0.0'}}</p>
					</view> -->
					<view class="income2-item" @click="toIncome('can')">
						<p>可提现</p>
						<p>{{information.showCanwithdraw?information.showCanwithdraw:'0.0'}}</p>
					</view>
					<view class="income2-item" @click="toIncome('ed')">
						<p>已提现</p>
						<p>{{information.showWithdrawed?information.showWithdrawed:'0.0'}}</p>
					</view>
					<view class="income2-item" @click="toIncome('ing')">
						<p>提现中</p>
						<p>{{information.showWithdrawing?information.showWithdrawing:'0.0'}}</p>
					</view>
				</view>

				<view class="income3" @click="toPoint()">
					<view>
						<p>创作者积分：0</p>
					</view>
					<view>
						<image style="height: 20rpx;width: 20rpx;" :src="picture.icon_right"></image>
					</view>
				</view>

			</view>

			<view class="show-body">
				<view class="show-body1">
					<view class="show-body1-text1" @click="toMySec(0)">
						<p>带货任务</p>
					</view>
					<view class="show-body1-text2" @click="toMySec(0)">
						<image class="show-body1-icon" :src="picture.icon_right"></image>
					</view>
				</view>
				<view class="show-body2">
					<view class="show-body2-text" @click="toMySec(0)">
						<p class="task-num-p">{{numInfo.numAllSec}}</p>
						<p padding>全部任务</p>
					</view>
					<view class="show-body2-text" @click="toMySec(1)">
						<p class="task-num-p">{{numInfo.get_sample_sec_task_num}}</p>
						<p>已领样</p>
					</view>
					<view class="show-body2-text" @click="toMySec(2)">
						<p class="task-num-p">{{numInfo.numExecuteSec}}</p>
						<p>已出单</p>
					</view>
					<view class="show-body2-text" @click="toMySec(3)">
						<p class="task-num-p">{{numInfo.numEndSec}}</p>
						<p>已结束</p>
					</view>
				</view>
			</view>

			<view class="show-body">
				<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">{{numInfo.numAllTask}}</p>
						<p padding>全部任务</p>
					</view>
					<view class="show-body2-text" @click="toMyTask('apply')">
						<p class="task-num-p">{{numInfo.numApplyTask}}</p>
						<p>已报名</p>
					</view>
					<view class="show-body2-text" @click="toMyTask('execute')">
						<p class="task-num-p">{{numInfo.numExecuteTask}}</p>
						<p>执行中</p>
					</view>
					<view class="show-body2-text" @click="toMyTask('end')">
						<p class="task-num-p">{{ numInfo.numEndTask}}</p>
						<p>已结束</p>
					</view>
				</view>
			</view>

			<view class="show-body">
				<view class="show-body1">
					<view class="show-body1-text1" @click="toMyTeam('exe')">
						<p>YOUNG之团</p>
					</view>
					<view class="show-body1-text2" @click="toMyTeam('exe')">
						<p style="color: #f0d232;">看看团长收益</p>
						<image class="show-body1-icon" :src="picture.icon_right"></image>
					</view>
				</view>
				<view class="show-body2">
					<view class="show-body2-text" @click="toMyTeam('exe')">
						<p class="task-num-p">{{numInfo.numExeTeam}}</p>
						<p padding>开团中</p>
					</view>
					<view class="show-body2-text" @click="toMyTeam('end')">
						<p class="task-num-p">{{numInfo.numEndTeam}} </p>
						<p>已结束</p>
					</view>
					<view class="show-body2-text">
						<p style="color: #fff;">已结束</p>
					</view>
					<view class="show-body2-text">
						<p style="color: #fff;">已结束</p>
					</view>
				</view>
			</view>


			<view class="show-body" style="margin-top: 3%;">
				<view class="show-body1">
					<view class="show-body1-text1">
						<p>个人中心</p>
					</view>
				</view>
				<view class="show-body2">
					<view class="show-body2-text" @click="handleInformation()">
						<image class="show-info-icon" style="width: 50rpx;height: 50rpx;padding-bottom: 15rpx;"
							:src="picture.icon_person"></image>
						<p>我的信息</p>
					</view>
					<view class="show-body2-text" @click="handleSubmitTask()">
						<image class="show-info-icon" style="width: 50rpx;height: 50rpx;padding-bottom: 15rpx;"
							:src="picture.icon_edit"></image>
						<p>发布任务</p>
					</view>
					<view class="show-body2-text">
						<p style="color: #fff;">联系客服</p>
					</view>
					<view class="show-body2-text">
						<p style="color: #fff;">客服</p>
					</view>
				</view>
			</view>

			<!-- 客服组件 -->
			<view class="contact" @click="toggle4('center')">
				<view class="contt">
					<image class="img1"
						src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/kefu_20211124192542.png" mode="">
					</image>
				</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" :maskClick="false">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<view class="sharepage">
						<view class="projecttext1">
							<image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/younggee_logo.png"
								style="width: 250rpx; height: 80rpx;" mode=""></image>
							<!-- <span>YoungGee</span> -->
						</view>
						<view class="sharemap">
							<image :src="picture.kefu" style="width: 400rpx;height: 400rpx;" mode=""></image>
						</view>
						<view style="margin: 30rpx 0;">
							<button class="butmin1" size="mini" @tap="saveImage">保存二维码</button>
						</view>
						<view class="sharetxt">
							<text>
								使用样叽的过程中，有任何疑问，\n
								请添加上方微信。\n
								我们保证及时全力为您解决！
							</text>
						</view>
						<view style="margin: 30rpx 0;">
							<button class="butmin" size="mini" @tap="closepop">知道了</button>
						</view>
					</view>

				</view>
			</uni-popup>
		</view>

		<!-- 普通弹窗  公众号-->
		<uni-popup ref="popup4" class="share" background-color="#fff" @change="change" :maskClick="false">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view class="sharepage">
					<view class="projecttext1">
						<image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/younggee_logo.png"
							style="width: 250rpx; height: 80rpx;" mode=""></image>
						<!-- <span>YoungGee</span> -->
					</view>
					<view class="sharemap">
						<image :src="picture.kefu" style="width: 400rpx;height: 400rpx;" mode=""></image>
					</view>
					<view style="margin: 30rpx 0;">
						<button class="butmin1" size="mini" @tap="saveImage">保存二维码</button>
					</view>
					<view class="sharetxt">
						<text>
							使用样叽的过程中，有任何疑问，\n
							请添加上方微信。\n
							我们保证及时全力为您解决！
						</text>
					</view>
					<view style="margin: 30rpx 0;">
						<button class="butmin" size="mini" @tap="closepop">知道了</button>
					</view>
				</view>

			</view>
		</uni-popup>


		<!-- 普通弹窗  发布任务-->
		<uni-popup ref="popup5" class="share" background-color="#fff" @change="change">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view class="sharepage">
					<view class="projecttext1">
						<span style="color: #f72424;font-size: 36rpx;line-height: 50rpx;">发布任务请用PC登录</span>
						<span style="color: #f72424;font-size: 36rpx;line-height: 50rpx;">www.younggee.com</span>
					</view>
					<view class="projecttext1" style="height: 40rpx;margin: 60rpx 0 10rpx;">
						<span style="font-size: 28rpx;line-height: 30rpx;">使用有任何疑问请联系样叽客服</span>
					</view>
					<view class="sharemap">
						<image :src="picture.kefu" style="width: 400rpx;height: 400rpx;" mode=""></image>
					</view>
					<view style="margin: 30rpx 0;">
						<button class="butmin1" size="mini" @tap="saveImage">保存二维码</button>
					</view>
				</view>
			</view>
		</uni-popup>

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

<script>
	import mvBar from "@/components/mys_navBar/mysNavBar";
	import {
		saveImageToPhotosAlbum,
		showToast,
		downloadFile
	} from '@/uni_modules/sakura-canvas/js_sdk/util';
	import {
		money
	} from '@/components/utils.js';
	export default {
		components: {
			mvBar,
		},
		data() {
			return {
				navH: getApp().globalData.navHeight,
				picture: getApp().globalData.picture,
				mysNavConfig: {
					/* 开启单页显示首页图标 */
					isHome: true,
					/* 固定导航  */
					navFixed: true,
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "我的",
						color: "",
						fontSize: "32rpx", // px upx rpx
						fontWeight: "normal", // 100 - 700
					},
				},
				pointHelpText: "平台收益提现时可使用积分抵扣税款，10分=1元",
				incomeHelpText: "在平台产生的总收益【可提现+已提现+提现中】",
				showPointHelp: false,
				showIncomeHelp: false,
				boxTop: 0,
				arrowMargin: 0,
				cotainerMargin: 0,
				screenWidth: 0,
				token: '',
				nickName: '',
				avatarUrl2: "https://wx3.sinaimg.cn/orj480/a680b5c5ly8hqgtrxs3hqj20u00u0di7.jpg",
				type: 'center',
				type2: 'center',
				type3: 'center',
				type4: 'center',
				codeImg: '',
				information: {},
				numInfo: {
					numUnReadMessage: 0,
					numAllTask: 0,
					numApplyTask: 0,
					numExecuteTask: 0,
					numEndTask: 0,

					numExeTeam: 0,
					numEndTeam: 0,
					get_sample_sec_task_num: 0,
					numAllSec: 0,
					numApplySec: 0,
					numExecuteSec: 0,
					numEndSec: 0,
				},

			};
		},
		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.getTalentInfo();
				// 获取页面展示信息（任务数量、young之团数量、带货任务数量）
				await this.getNumInfo();
				// 获取未读消息条数
				await this.getUnreadMessage();
			}
			uni.hideLoading();
		},
		onLoad() {},
		methods: {
			getTalentInfo() {
				return 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)
						}
					});
			},
			getUnreadMessage() {
				return this.$https.get('/youngee/c/t/g/has-un-read-message')
					.then(res => {
						if (res.data.code === 0) {
							this.numInfo.numUnReadMessage = res.data.data
						}
					})
			},
			// 获取头像并显示
			fetchImage() {
				// 发起请求，带上 Referer 请求头
				uni.request({
					url: 'https://tvax4.sinaimg.cn/crop.0.0.512.512.180/0074I19Oly8hvtrzq5e2dj30e80e8aa8.jpg?KID=imgbed,tva&Expires=1732974121&ssig=nlU868XTZ1',
					method: 'GET',
					header: {
						// 'Referer': 'https://m.weibo.cn/u/6482526052?' // 设置Referer头
						'Referer': 'https://m.weibo.cn' // 设置Referer头
					},
					success: (res) => {
						if (res.statusCode === 200) {
							// 处理二进制数据
							const arrayBuffer = res.data;
							const base64Data = uni.arrayBufferToBase64(arrayBuffer); // 将二进制数据转换为 base64 格式
							this.avatarUrl = `data:image/jpeg;base64,${base64Data}`; // 设置图片数据源
						} else {
							console.error('请求失败', res);
						}
					},
					fail: (err) => {
						console.error('请求失败', err);
					}
				});
			},
			getNumInfo() {
				return this.$https.get('/youngee/c/t/g/get-my-info-num')
					.then(res => {
						console.log('/youngee/c/t/g/get-my-info-num', res)
						if (res.data.code === 0) {
							console.log("res.data.data—/get-my-info-num—>", res)
							this.numInfo.numAllTask = res.data.data.all_task_num
							this.numInfo.numApplyTask = res.data.data.apply_task_num
							this.numInfo.numExecuteTask = res.data.data.exe_task_num
							this.numInfo.numEndTask = res.data.data.end_task_num

							this.numInfo.numExeTeam = res.data.data.exe_team_num
							this.numInfo.numEndTeam = res.data.data.end_team_num
							//带货任务
							//已领样
							this.numInfo.get_sample_sec_task_num = res.data.data.get_sample_sec_task_num
							//已出单
							this.numInfo.numExecuteSec = res.data.data.exe_sec_task_num
							//已结束
							this.numInfo.numEndSec = res.data.data.end_sec_task_num
							//所有
							this.numInfo.numAllSec = res.data.data.all_sec_task_num
						}
					})
			},
			toTest() {
				uni.navigateTo({
					url: '/pages/test/test'
				});
			},
			toSpecialTask() {
				uni.navigateTo({
					url: '/page_tasksquare/specialtask/specialTaskDetail?id=' + "2301261257"
				});
			},
			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(content) {
				wx.setClipboardData({
					data: content,
					success: function(res) {
						console.log("复制成功");
					}
				});
			},
			// 进入登录页面
			login() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			// 进入头像昵称修改页面
			toUserInfo() {
				uni.navigateTo({
					url: '/pages/login/userinfo'
				});
			},
			// 进入通知页面
			toMessage_bak() {
				uni.navigateTo({
					url: '/page_mycenter/message'
				});
			},

			// 进入个人资料
			handleInformation() {
				if (this.token !== '')
					uni.navigateTo({
						url: '/page_mycenter/myinformation/myinformation'
					});
				else
					this.login()
			},
			// 进入收益页面
			toIncome(tab) {
				console.log(tab)
				if (this.token !== '') {
					switch (tab) {
						case "can":
							uni.navigateTo({
								url: '/page_mycenter/myincome/myincome?showTab=1'
							});
							break;
						case "ed":
							uni.navigateTo({
								url: '/page_mycenter/myincome/myincome?showTab=2'
							});
							break;
						case "ing":
							uni.navigateTo({
								url: '/page_mycenter/myincome/myincome?showTab=3'
							});
							break;
					}
				} else
					this.login()
			},
			toPoint() {
				if (this.token !== '') {
					uni.navigateTo({
						url: '/page_mycenter/mypoint/mypoint'
					});
				} else
					this.login()
			},
			// 进入种草任务页面
			toMyTask(tab) {
				console.log(tab)
				if (this.token !== '') {
					var data = {
						tab: tab
					};
					data = JSON.stringify(data)
					uni.navigateTo({
						url: '/page_mycenter/mytask/mytask?textObj=' + encodeURIComponent(data)
					});
				} else
					this.login()
			},
			// 进入我的young之团页面
			toMyTeam(tab) {
				console.log("toMyTeam: ", tab)
				if (this.token !== '') {
					var data = {
						tab: tab
					};
					data = JSON.stringify(data)
					uni.navigateTo({
						url: '/page_mycenter/myteam/myteam?textObj=' + encodeURIComponent(data)
					});
				} else
					this.login()
			},
			// 进入我的带货任务页面
			toMySec(tab) {
				console.log("toMySec: ", tab)
				if (this.token !== '') {
					var data = {
						value: tab
					};
					data = JSON.stringify(data)
					console.log("data---->", data)
					uni.navigateTo({
						url: '/page_mycenter/myselection/myselection?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()
			},
			// 传入center
			//
			toggle4(type) {
				this.type4 = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				//this.$refs表示一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例
				//uni-popup注册了popup4
				this.$refs.popup4.open(type)
				// this.$refs.popup1.close()
			},
			// 保存图片
			async saveImage() {
				// showToast('保存成功')
				wx.downloadFile({
					url: this.picture.kefu,
					success: function(res) {
						wx.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(data) {
								wx.showToast({
									title: "保存成功",
									icon: "success",
									duration: 2000
								})
							},
							fail: function(err) {
								console.log(err);
							},
							complete(res) {
								console.log(res);
							}
						})
					}
				})
			},
			closepop() {
				this.$refs.popup4.close()
			},
			// 进入个人资料
			handleSubmitTask() {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup5.open()
				// 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: 0% 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-income {
		height: 210rpx;
		background-color: #F0D232;
		border-radius: 10rpx;
		margin: 3% 3% 0;
		padding: 3% 6%;
	}

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

	.income2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 3% 0;

		.income2-item {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}

	.income3 {
		background-color: white;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 2rpx 10rpx;
	}

	.show-income1 {
		height: 150rpx;
		margin: 0 3% 0 8%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

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

	.show-income1-left {
		display: flex;
		flex-direction: column;
		justify-content: start;
	}

	.show-income1-left-up {
		margin-bottom: 10rpx;
	}

	.show-income1-left-down p {
		font-size: 40rpx;
		font-weight: bold;
		color: #F0D232;
	}

	.show-income1-right {
		padding-right: 20rpx;
	}

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

	.show-income2-text {
		width: 24%;
		text-align: center;
	}

	.show-body {
		// height: 250rpx;
		margin: 5% 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;
		align-items: center;
		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 5%;
	}

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

	.task-num-p {
		padding-bottom: 10rpx;
		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;

	}

	.share {
		text-align: center;
		line-height: 10rpx;
		margin-top: 10rpx;
	}

	.share image {
		vertical-align: middle;
		width: 25rpx;
		height: 25rpx;
		display: inline-block
	}

	.share p {
		// display: inline-block;
		font-size: 24rpx;
		// color: #333333;
	}

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


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

	.tip_box {
		position: absolute;
		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;
			}

			.tips p {
				font-size: 24rpx;
				color: #fff
			}

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

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

	.point {
		position: absolute;
		right: 0px;
		top: 25px;
		width: 35rpx;
		height: 35rpx;
		background: red;
		border-radius: 50%;
		font-size: 20rpx;
		align-items: center;
		justify-content: center;
		display: flex;
		color: #fff;
	}

	.contt {
		position: relative;
	}

	.contact {
		position: fixed;
		top: 80%;
		right: 13%;
	}

	.img1 {
		width: 84rpx;
		height: 124rpx;
		position: absolute;
	}

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

	/deep/ .share.uni-popup .uni-popup__wrapper {
		width: 70%;

		border-radius: 15rpx;
	}

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

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

	}

	.sharetxt {
		height: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.sharetxt text {
		font-size: 24rpx;
		text-align: left;
		line-height: 20rpx
	}

	.butmin {
		// height: 48rpx;
		width: 250rpx;
		background-color: #FCCF41;
		line-height: 48rpx;
	}

	.butmin1 {
		// height: 48rpx;
		width: 250rpx;
		background-color: #fff;
		border: #000000 1rpx solid;
		line-height: 48rpx;
	}
</style>