partnerApp/pages/my/upgradeTask.vue

<template>
	<view class="page">
		<!-- 页面背景图 -->
		<image class="backimage" src="/static/image/my/upgradeTask/back.png" mode=""></image>
		<!-- 头部标题 -->
		<view class="headers dis a-c j-start">
			<u-icon name="arrow-left" color="#333" size="38" @tap="back" :custom-style="{fontWeight:'bold'}"></u-icon>
			<text style="margin: auto;">升级任务</text>
		</view>
		<!-- 升级任务 -->
		<view class="contentArea">
			<!-- 装饰图 -->
			<view class="decoration dis a-c j-s">
				<view class="dis f-c">
					<image class="textimg" src="/static/image/my/upgradeTask/text.png" mode=""></image>
					<text class="text">完成任务 解锁更高等级身份</text>
				</view>
				<image class="logo" src="/static/image/my/upgradeTask/logo.png" mode=""></image>
			</view>
			<!-- 内容部分 -->
			<view class="Area"
				:style="{height:info.lockingState == '2'?'':'calc(100vh - 450rpx)',borderRadius: info.lockingState == '2'?'20rpx':'20rpx 20rpx 0 0 '}">
				<view class="header dis a-c ">
					<image class="logo" src="/static/image/my/upgradeTask/decoration1.png" mode=""></image>
					<view class="title">
						<text class="text">升级任务</text>
						<image class="line" src="/static/image/my/upgradeTask/decoration2.png" mode=""></image>
					</view>
				</view>
				<view class="message dis a-c j-c">{{upgradeTaskdata.assessmentEndDate}}前
					满足下列{{upgradeTaskdata.appraise=='1'?'全部条件':'任意一条'}}即可升级
				</view>
				<!-- 任务列表 -->
				<view class="task mt-4 dis f-c ">
					<view class="item dis a-c j-s " v-if="item.checked" v-for="(item,index) in displayData"
						:key="item.id">
						<view class="task-icon">
							<image :src="`/static/image/my/upgradeTask/icon${index+1}.png`" mode=""></image>
						</view>
						<view class="task-progress">
							<!-- 任务标题 -->
							<text class="title " v-if="upgradeTaskdata.grade=='2'">
								{{ index==0 ? '邀请合伙人' :index==1? `${upgradeTaskdata.gradeName}下属成员出单保费`:'自己的出单保费' }}达{{item.min}}{{ index ? '元' : '人' }}
							</text>
							<text class="title " v-if="upgradeTaskdata.grade=='3'">
								{{ index==0 ? '邀请工作室' :index==1? `${upgradeTaskdata.gradeName}下属成员出单保费`:'自己的出单保费' }}达{{item.min}}{{ index ? '元' : '人' }}
							</text>
							<text class="title " v-if="upgradeTaskdata.grade=='4'">
								{{ index==0 ? '邀请团队长' :index==1? `${upgradeTaskdata.gradeName}下属成员出单保费`:'自己的出单保费' }}达{{item.min}}{{ index ? '元' : '人' }}
							</text>
							<text class="title " v-if="upgradeTaskdata.grade=='5'">
								{{ index==0 ? '邀请团队长' :index==1? `${upgradeTaskdata.gradeName}下属成员出单保费`:'自己的出单保费' }}达{{item.min}}{{ index ? '元' : '人' }}
							</text>
							<view class=" dis a-c">
								<!-- 进度条 -->
								<view class="progressBar">
									<view class="jindu"
										:style="{width: `${ Number(item.achieve) / Number(item.min) * 100}%`}">
									</view>
								</view>
								<!-- 进度条 -->
								<view class="task-data dis a-c ml-1">
									<text>{{item.achieve}}</text>
									<text class="ml-1 mr-1">/</text>
									<text>{{item.min}}</text>
								</view>
							</view>
						</view>
						<view :class="index==1?'task-btn1':'task-btn'" v-if="Number(item.achieve)>=Number(item.min)">
							已完成
						</view>
						<view :class="index==1?'task-btn1':'task-btn'" v-else @click="incompleteTaskRedirect(index)">
							{{index==1?'未完成':'去完成'}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 购买等级 -->
		<view class="purchaseLevels  dis a-c j-c" v-if="info.lockingState == '2'">
			<view class="purchaseLevel">
				<!-- 头部 -->
				<view class="header dis a-c j-c mb-3">
					<!-- 星星装饰图 -->
					<image class="star" src="/static/image/my/upgradeTask/star-left.png" mode=""></image>
					<view class="title ">
						<text>满足升级条件或直接联系客服购买该等级</text>
						<view class="line"></view>
					</view>
					<image class="star" src="/static/image/my/upgradeTask/star-right.png" mode=""></image>
				</view>
				<!-- 内容 -->
				<view class="dis a-c j-s">
					<!-- 左侧红包样式 -->
					<view class="redPacket">
						<!-- 红包图片 -->
						<image class="redPacket-img" src="/static/image/my/upgradeTask/redPacket.png" mode="">
						</image>
						<!-- 锁定样式 -->
						<view class="lock">
							<image class="lock-img" src="/static/image/my/upgradeTask/lock.png" mode=""></image>
						</view>
					</view>
					<view class="redPacket-data dis f-c">
						<view class="dis a-c ">
							<text class="sum">￥{{info.lockCommission || 0 }}</text>
							<text class="days">(已锁定 {{info.zeroDays}}天清0)</text>
						</view>
						<text class="ml-1" style="font-size: 26rpx;color: #999;">支付<text
								style="color: #FFA008;">{{info.fallAmount}}</text>
							元可解锁</text>
					</view>
					<view class="btn" @click="clickToUnlock">去解锁</view>
				</view>
			</view>
		</view>
		<u-popup v-model="contactServiceShow" mode="bottom" border-radius="20" :closeable="true">
			<view class=" dis a-c j-c " style="border-bottom: 1rpx solid #eee;padding: 16rpx;box-sizing: border-box;">
				<text class="font-weight" style="font-size: 36rpx;color: #333;">联系客服</text>
			</view>
			<view class="contactService dis a-c f-c">
				<!-- <view class="panelcanvas " id="panelcanvas">
					<image :src="serviceQRCodeImg" mode="widthFix" lazy-load></image>
				</view> -->
				<image :src="serviceQRCodeImg" mode=""></image>
				<view class="Servicebtn dis j-c" @click="saveImage">保存到相册</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/common/pdf.js'
	import QR from "@/common/wxqrcode.js"
	export default {
		data() {
			return {
				posterUrl: "", //二维码截图
				contactServiceShow: false, //客服弹窗
				serviceQRCodeImg: "",
				info: {}, //上个页面传参
				upgradeTaskdata: {}, //升级任务

			}
		},
		onShow() {

		},
		async onLoad(options) {
			let serviceQRCoderes = await this.$http.get('/partner/contactCustomerService')
			if (serviceQRCoderes.code == 200) {
				this.serviceQRCodeImg = serviceQRCoderes.msg;
			}
			this.info = JSON.parse(options.info);
			console.log(this.info);
			if (this.info.lockingState == '2') {
				let res = await this.$http.get('/partner/degradedTask?grade=' + this.info.grade); //保级任务
				this.upgradeTaskdata = res.data;
			} else {
				let grade = Number(this.info.grade + 1);
				let res = await this.$http.get('/partner/queryDowngradeTask?grade=' + grade); //升级任务
				this.upgradeTaskdata = res.data;
			}
			this.upgradeTaskdata.assessmentEndDate = this.formatDate(this.upgradeTaskdata.assessmentEndDate);
		},
		computed: {
			displayData() {
				if (this.upgradeTaskdata.requirement && this.upgradeTaskdata.requirement.length > 0) {
					return this.upgradeTaskdata.requirement;
				} else if (this.upgradeTaskdata.strategyArray && this.upgradeTaskdata.strategyArray.length > 0) {
					return this.upgradeTaskdata.strategyArray;
				}
				return []; // 或者返回默认数据
			}
		},
		methods: {
			//未完成任务跳转函数
			incompleteTaskRedirect(index) {
				switch (index) {
					case 0:
						uni.navigateTo({
							url: "/pages/institutional/invitationCode?grade=" + this.info.grade + "&info=" + JSON
								.stringify(this.info),
						})
						break;
					case 2:
						// 唤醒指定app
						if (plus.runtime.isApplicationExist({ //判断应用是否安装
								pname: 'uni.UNID4FE29A1' //包名
							})) {
							plus.runtime.launchApplication({ //调用三方程序
								pname: 'uni.UNID4FE29A',
								extra: {} // 可选参数
							}, (e) => {
								uni.showToast({
									title: '打开失败:' + e.message,
									icon: 'none',
								});
							});
						} else {
							if (typeof plus !== 'undefined') {
								const main = plus.android.runtimeMainActivity();
								const Intent = plus.android.importClass('android.content.Intent');
								const Uri = plus.android.importClass('android.net.Uri');

								const intent = new Intent(Intent.ACTION_VIEW, Uri.parse(
									'https://sxzgkj.baoxianzhanggui.com/h5/#/'));
								intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);

								if (main) {
									const chooser = Intent.createChooser(intent, "选择应用打开链接");
									try {
										main.startActivity(chooser);
									} catch (error) {
										console.error("打开选择应用对话框失败: ", error);
									}
								}
							} else {
								alert('请在真机环境中测试该功能');
							}

						}
						break;
					default:
				}
			},
			//日期格式化
			formatDate(dateStr) {
				const [year, month, day] = dateStr.split("-");
				return `${year}年${parseInt(month)}月${parseInt(day)}日`
			},
			//点击解锁生成二维码截图
			clickToUnlock() {
				this.contactServiceShow = true;
			},
			//保存图片
			saveImage() {
				base64ToPath(this.serviceQRCodeImg)
					.then(path => {
						uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
							filePath: path, //图片文件路径
							success: function() {
								uni.showToast({
									title: '已保存到相册',
									icon: 'none',
								});
							},
							fail: function(e) {
								uni.showToast({
									title: '图片保存失败',
									icon: 'none',
								});
							}
						});
					})
			},
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});

			},
			//页面截图转路径
			receiveRenderData(val) {
				this.posterUrl = val.replace(/[\r\n]/g, ''); // 去除base64位中的空格
				// 将base64转化为临时地址
				// base64ToPath(imageStr).then(path => {
				// 	this.payImg = path;
				// }).catch(error => {
				// 	console.log(error);
				// });
			},
			showLoading() {
				uni.showLoading({
					title: '正在生成图片'
				});
			},
			hideLoading() {
				uni.hideLoading();
			},
		}
	}
</script>
<script module="canvasImage" lang="renderjs">
	import html2canvas from 'html2canvas'
	export default {
		data() {
			return {

			}
		},
		mounted() {

		},
		methods: {
			generateImage() {
				setTimeout(() => {
					this.$ownerInstance.callMethod('showLoading')
					const dom = document.getElementById('panelcanvas') // 需要生成图片内容的 dom 节点
					html2canvas(dom, {
						width: dom.clientWidth, //dom 原始宽度
						height: dom.clientHeight,
						scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
						scrollX: 0,
						useCORS: true, //支持跨域
						// allowTaint: false,
						scale: 2, // 设置生成图片的像素比例，默认是1，如果生成的图片模糊的话可以开启该配置项
					}).then((canvas) => {
						// 生成成功
						this.$ownerInstance.callMethod('hideLoading')
						this.$ownerInstance.callMethod('receiveRenderData', canvas.toDataURL('image/png'))
					}).catch(err => {
						// 生成失败 弹出提示弹窗
						this.$ownerInstance.callMethod('_errAlert', `【生成图片失败，请重试】${err}`)
					})
				}, 300)
			}
		},
	}
</script>
<style lang="scss" scoped>
	.page {
		background-color: #f8f8f8;
		height: calc(100vh);
	}

	.backimage {
		width: 100%;
		height: 702rpx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.headers {
		position: fixed;
		top: 0;
		left: 0;
		height: auto;
		width: 100%;
		z-index: 999999;
		padding: 108rpx 30rpx 20rpx;

		text {
			font-size: 36rpx;
			font-weight: bold;
			color: #000;
		}

		.headers-activeTab {
			width: 80%;
		}
	}

	.contentArea {
		padding: 176rpx 30rpx 20rpx;
		box-sizing: border-box;
		position: relative;

		.decoration {
			.textimg {
				width: 348rpx;
				height: 76rpx;
				margin-top: 20rpx;
			}

			.text {
				font-size: 30rpx;
				color: #666;
				line-height: 1.4;
				margin-top: 28rpx;
			}

			.logo {
				width: 314rpx;
				height: 280rpx;
			}

		}

		// 任务进度
		.Area {
			position: relative;
			// height: calc(100vh - 450rpx);
			background: #fff;
			border-radius: 20rpx;
			padding: 27rpx 30rpx;
			box-sizing: border-box;
			margin-top: -27rpx;
			z-index: 9;

			.header {
				margin-bottom: 23rpx;

				.logo {
					width: 50rpx;
					height: 50rpx;
				}

				.title {
					position: relative;

					.text {
						font-size: 36rpx;
						color: #1968F3;
						font-weight: bold;
						position: relative;
						z-index: 2;
					}

					.line {
						position: absolute;
						bottom: 0;
						right: -8rpx;
						width: 80rpx;
						height: 24rpx;
					}
				}

			}

			.message {
				background: #F1FBFF;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				padding: 10rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				color: #666;
			}

			.task {
				.item {
					width: 100%;
					margin-bottom: 40rpx;

					.task-icon {
						background: #F1FBFF;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						padding: 15rpx;
						box-sizing: border-box;

						image {
							width: 70rpx;
							height: 70rpx;
						}
					}

					.task-progress {
						flex: 1;
						height: 100%;
						margin-left: 20rpx;
						margin-right: 16rpx;

						.title {
							font-size: 28rpx;
							color: #333;
							font-weight: bold;
						}

						.progressBar {
							position: relative;
							width: 90rpx;
							height: 6rpx;
							background: #F0F0F0;
							border-radius: 100px;
							overflow: hidden;

							.jindu {
								position: absolute;
								left: 0;
								top: 0;
								height: 6rpx;
								background: #FFA008;
								border-radius: 100px;
							}
						}

						.task-data {
							font-size: 26rpx;

							text:nth-child(1) {
								color: #FFA008;
							}

							text:nth-child(2),
							text:nth-child(3) {
								color: #999999;
							}
						}

					}

					.task-btn {
						padding: 8rpx 20rpx;
						box-sizing: border-box;
						background: linear-gradient(132deg, #2DD9FF 0%, #2D6DFF 100%);
						border-radius: 50rpx 50rpx 50rpx 50rpx;
						font-size: 28rpx;
						color: #fff;
						line-height: 1.5;
					}

					.task-btn1 {
						padding: 8rpx 20rpx;
						box-sizing: border-box;
						background: transparent;
						border-radius: 50rpx 50rpx 50rpx 50rpx;
						font-size: 28rpx;
						color: #2D74FF;
						line-height: 1.5;
					}
				}

				.item:last-child {
					margin-bottom: 13rpx;
				}
			}
		}
	}

	// 购买等级
	.purchaseLevels {
		position: relative;
		background: linear-gradient(180deg, #FFD581 0%, #FFFFFF 70%);
		border-radius: 20rpx;
		margin: 0 30rpx;

		.purchaseLevel {
			width: 99.7%;
			margin-top: 2rpx;
			padding: 40rpx 30rpx;
			box-sizing: border-box;
			background: linear-gradient(0deg, #fff 20%, #FFF6EC 100%);
			border-radius: 20rpx;

		}

		.header {
			.star {
				width: 27rpx;
				height: 22rpx;
			}

			.title {
				position: relative;
				margin-left: 2rpx;
				margin-right: 2rpx;
				text-align: center;
				font-size: 30rpx;
				color: #333;
				font-weight: bold;

				text {
					position: relative;
					z-index: 9;
					margin: 0 4rpx;
				}

				.line {
					position: absolute;
					bottom: 6rpx;
					left: 0;
					right: 0;
					margin: auto;
					width: 90%;
					height: 13rpx;
					background: #FFE262;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
				}
			}
		}

		// 红包样式
		.redPacket {
			position: relative;
			padding: 15rpx;
			box-sizing: border-box;
			background: #FFF0E8;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.redPacket-img {
				width: 70rpx;
				height: 70rpx;
			}

			.lock {
				position: absolute;
				bottom: 0;
				right: 0;
				padding: 5rpx;
				z-index: 9;
				box-sizing: border-box;
				background: rgba(255, 163, 117, 0.3);
				border-radius: 20rpx 0rpx 20rpx 0rpx;
				backdrop-filter: blur(10rpx);

				.lock-img {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}

		/* 锁定金额 */
		.redPacket-data {
			.sum {
				font-size: 36rpx;
				color: #F74141;
				font-weight: bold;
			}

			.days {
				font-size: 30rpx;
				color: #666;
			}
		}

		/* 去解锁按钮 */
		.btn {
			padding: 8rpx 20rpx;
			box-sizing: border-box;
			background: linear-gradient(132deg, #2DD9FF 0%, #2D6DFF 100%);
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			font-size: 28rpx;
			color: #fff;
			line-height: 1.5;
		}
	}

	.contactService {
		padding: 30rpx 50rpx;
		box-sizing: border-box;

		.panelcanvas {
			position: relative;

			image {
				width: 250rpx;
				height: 250rpx;
			}
		}

		.Servicebtn {
			width: 100%;
			padding: 18rpx;
			box-sizing: border-box;
			background: linear-gradient(132deg, #2DD9FF 0%, #2D6DFF 100%);
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			font-size: 32rpx;
			color: #fff;
			line-height: 1.4;
			margin-top: 60rpx;
		}
	}
</style>