youngee_c_web_v2/pages/tasksquare/specialTask/specialTaskDetail.vue

<template>
	<view style="position: relative;">
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view :style="{marginTop:navH}"></view>
		<view class="" id="wrap0" v-show="!loading">
			<view class="home">
				<view class="uni-margin-wrap">
					<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000"
						:duration="1000">
						<swiper-item v-for="item in carousel_images">
							<image :src="item" mode="aspectFill" style="width: 100%;height: 100%;"
								@click="handlePreviewImage1(item)">
							</image>
						</swiper-item>
					</swiper>

					<view class="">
						<view class="Tasktext">
							<image :src="information.PlatformInfo.platform_icon" mode=""></image>
							<span>{{information.project_name}}</span>
						</view>

						<view class="markcontent">
							<view style="display: flex;margin: 10rpx 0;">
								<p class="wvp">商品价值：</p>
								<p class="wvp">{{information.Product.ProductPrice}}元</p>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="interval"></view> -->
			<view class="home" style="padding-top: 0;">
				<view class="">
					<view class="circularmark">
						<p>任务信息</p>
					</view>
					<view class="markcontent">
						<view style="display: flex;margin: 10rpx 0;">
							<p class="label">社媒平台：</p>
							<p class="wvp">{{information.PlatformInfo.platform_name}}</p>
						</view>
						<view style="display: flex;margin: 10rpx 0;">
							<p class="label">商品类型：</p>
							<p class="wvp">{{information.Product.ProductType}}</p>
						</view>
						<view style="display: flex;;margin: 10rpx 0;">
							<p class="label">商品链接：</p>
							<span style="display: flex;align-items: center;"
								v-if="information.Product.ProductUrl === ''">
								<p class="wvp" style="padding: 0;">无</p>
							</span>
							<span style="display: flex;align-items: center;"
								v-if="information.Product.ProductUrl !== ''">
								<p class="wvp" style="padding: 0;">{{information.Product.ProductUrl|ellipsis}}</p>
								<image :src="icon_copy" mode="" style="width: 40rpx;height: 40rpx;"
									@click="handleCopy(information.Product.ProductUrl)" />
							</span>
						</view>
					</view>
				</view>
			</view>
			<view class="" id="wrap1">
				<view class="home" style="padding-top: 0;">
					<view class="">
						<view class="circularmark">
							<p>任务要求</p>
						</view>
						<view class="markcontent">
							<view style="display: flex;">
								<p class="wvp" style="margin: 10rpx 0;">内容形式：</p>
								<p class="wvp" style="margin: 10rpx 0;">{{information.content}}</p>
							</view>
							<p class="wvp" style="margin: 10rpx 0;">商品描述：</p>
							<text class="wvp" style="margin: 10rpx 0;" decode="true" user-select="true">
								{{information.Product.ProductDetail}} </text>
							</p>
							<p class="wvp" style="margin: 10rpx 0;">任务详情：</p>
							<text class="wvp" style="margin: 10rpx 0;" decode="true" user-select="true">
								{{information.project_detail}} </text>
						</view>
					</view>
				</view>
			</view>
			<view class="" id="wrap2">

				<view class="home" style="padding-top: 0;">
					<view class="">
						<view class="circularmark">
							<p>任务详情图</p>
						</view>
						<view class="markcontent1">
							<view class="diagram" style="font-size: 30rpx;margin: 0 30rpx;" v-if="hasNoProjectPhoto">
								<p>暂无详情说明</p>
							</view>
							<view class="diagram" v-for="item in information.ProjectPhoto">
								<image :src="item.photo_url" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<!-- <view class="">
						<view class="circularmark">
							<p>商品详情图</p>
						</view>
						<view class="markcontent1">
							<view class="diagram" v-for="item in product_detail_images">
								<image :src="item" mode="widthFix"></image>
							</view>
						</view>
					</view> -->
				</view>
				<view class="interval2"></view>
			</view>

			<view class="signup">
				<button type="default" class="but1" :loading="loading" :class="{'on':item.title === '1',}"
					@click="toggle('bottom')" v-if="isSign===0">
					开始执行</button>
				<button type="default" class="but1" disabled v-if="isSign===1 && isAgree === 1"> 等待审核 </button>
				<button type="default" class="but1" disabled v-if="isSign===1 && isAgree === 2"> 执行中 </button>
				<button type="default" class="but1" disabled v-if="isSign===1 && isAgree === 3"> 已结束 </button>
				<button type="default" class="but2" @click="toggle1('bottom')">
					<image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/task8.png" mode=""></image>
					分享
				</button>
			</view>
			<view>
				<!-- 底部普通弹窗 -->
				<uni-popup ref="popup1" background-color="#fff" @change="change" style="border-radius: 20rpx;">
					<view class="popup-content1" :class="{ 'popup-height': type === 'left' || type === 'right' }">
						<view
							style="display: flex; justify-content: space-around; margin-top: 10% ;margin-bottom: 3% ;">
							<view>
								<button class="tii2" data-name="shareBtn" open-type="share">
									<view class="circular" style="margin-top: 10% ;">
										<image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/taskw.png"
											mode=""></image>
									</view>
									<p class="tii">发送给朋友</p>
								</button>
							</view>
							<view>
								<button class="tii2" @click="toggle2('center')">
									<view class="circular" style="margin-top: 10% ;">
										<image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/taske.png"
											mode=""></image>
									</view>
									<p class="tii">生成分享码</p>
								</button>
							</view>
						</view>

						<button type="default" class="errar" @click="cancel()">取消</button>
					</view>
				</uni-popup>
			</view>
			<uni-popup ref="popup2" class="share1" background-color="#fff" @change="change">
				<view class="popup-content">
					<image :src="canvasUrl" mode="widthFix" style="width: 300px;height: 420px;margin-top: 30rpx;">
					</image>
					<mosoweCanvas ref="mosoweCanvasComponents" @canvasImage="_canvasImage" :lists="lists" height="420"
						width="300" imgType="png" />

					<view class="" style="text-align: center;margin: 5% 0;">
						<button class="butmin" size="mini" @tap="saveImage">保存</button>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import mosoweCanvas from "@/components/mosowe-canvas-image/mosowe-canvas-image";
	import mvBar from "@/components/mys_navBar/mysNavBar";
	import zSwiper from '@/components/z-swiper/index.vue'
	import {
		getQueryString,
		money
	} from '@/components/utils.js';
	import {
		saveImageToPhotosAlbum,
		showToast,
		downloadFile
	} from '@/uni_modules/sakura-canvas/js_sdk/util'
	export default {
		filters: {
			ellipsis(value) {
				if (!value) return "";
				if (value.length > 30) {
					return value.slice(0, 30) + "...";
				}
				return value;
			},
		},
		components: {
			mvBar,
			zSwiper,
			mosoweCanvas
		},
		data() {
			return {
				hasNoProjectPhoto: false,
				icon_copy: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent_upload/icon-copy.png',
				navH: getApp().globalData.navHeight,
				canvasUrl: '',
				loading: true,
				isSign: 0,
				isAgree: 0,
				strategy_id: 0,
				strategy: null,
				input_offer: 0.0,
				chooseBtn: 0,
				share: {
					title: "",
					path: '',
					imageUrl: '',
					desc: '',
					content: ''
				},
				poster: {},
				posterImg: '',
				canvasId: 'myCanvas',
				img: '',
				younggee_logo: "https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/younggee_logo.png",
				task_type_info: ["实体商品寄拍", "虚拟产品测评", "线下探店打卡", "素材微原创"],
				talent_type_info: ["美妆", "美食", "生活", "时尚", "测评", "旅行", "汽车", "萌宠", "游戏", "音乐", "舞蹈", "房产", "情感", "三农",
					"园艺", "随拍", "图文控", "二次元", "母婴亲子", "颜值达人", "剧情搞笑", "运动健身", "家居家装", "科技数码", "教育培训", "才艺技能", "艺术文化",
					"财经投资",
				],
				product_types: [{
						value: 1,
						label: '3C及电器'
					},
					{
						value: 2,
						label: '食品饮料'
					},
					{
						value: 3,
						label: '服装配饰'
					},
					{
						value: 4,
						label: '医疗'
					},
					{
						value: 5,
						label: '房地产'
					},
					{
						value: 6,
						label: '家居建材'
					},
					{
						value: 7,
						label: '教育培训'
					},
					{
						value: 8,
						label: '出行旅游'
					},
					{
						value: 9,
						label: '游戏'
					},
					{
						value: 10,
						label: '互联网平台'
					},
					{
						value: 11,
						label: '汽车'
					},
					{
						value: 12,
						label: '文体娱乐'
					},
					{
						value: 13,
						label: '影视传媒'
					},
					{
						value: 14,
						label: '线下店铺'
					},
					{
						value: 15,
						label: '软件服务'
					},
					{
						value: 16,
						label: '美妆'
					},
					{
						value: 17,
						label: '母婴宠物'
					},
					{
						value: 18,
						label: '日化'
					},
					{
						value: 19,
						label: '其他'
					}
				],
				title: '[东鑫记港式茶餐厅]南京东路|魔都新晋爆款茶餐厅来袭！99元抢门',
				price: '',
				tips: '识别二维码\n立即申请任务',
				head: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/task15.png',
				big: '',
				tabBarStyle: {},
				activeTab: 0,
				hei: '',
				hei1: '',
				topp0: '',
				topp1: '',
				topp2: '',
				scrollTop: '',
				activeColor: '#f2d22d',
				value: '',
				value1: '',
				sex: [],
				coop_choice: [],
				type: 'center',
				type1: 'center',
				type2: 'center',
				item: {
					title: '0'
				},
				// 视频轮播
				fullScreen: true,
				topFloat: true,
				fotterFloat: true,
				// 指示器样式
				mode: 'circle',
				indicatorPos: 'bottomCenter',
				list1: [{
						type: 'video',
						poster: 'https://img2.baidu.com/it/u=2141851239,1037607188&fm=26&fmt=auto&gp=0.jpg',
						src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4',
					},
					{
						type: 'image',
						src: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/home1.png'
					},
					{
						type: 'video',
						poster: 'https://img1.baidu.com/it/u=1297253752,1185196455&fm=26&fmt=auto&gp=0.jpg',
						src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4',
					},
					{
						type: 'image',
						src: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/home1.png'
					},

				],
				carousel_images: ['https://img2.baidu.com/it/u=2141851239,1037607188&fm=26&fmt=auto&gp=0.jpg',
					'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/home1.png',
				],
				dotIndex: 0, //指示器索引
				dotFloatIndex: 0, //位置指示器索引
				//轮播图
				swiper: {
					margin: "150rpx",
					index: 0,
					list: [

					]
				},

				tar: false,
				mysNavConfig: {
					/* 占位开启  */
					// navPadding: true,
					/* 背景 */
					// bgColor: "#f8f8f8",
					/* 开启单页显示首页图标 */
					isHome: false,
					/* 固定导航  */
					navFixed: true,
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "任务详情",
						color: "",
						fontSize: "32rpx", // px upx rpx
						fontWeight: "500", // 100 - 700
					},
					btnType: "type2",
					onLeftClick: '/pages/tasksquare/tasksquare',
					/* type2 按钮 */
					type2Config: {
						// 左图标
						leftPath: "https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/png2.png",
						// 右图标
						rightPath: "https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/png4.png",
						// 圆角
						radius: "40rpx",
					},
				},
				projectid: '',
				talent: {},
				account: [],
				information: {},
				zhanghaocode: '',
				product_detail_images: [],
				codeImg: '',
				queryAll: '',
			};
		},
		onShareAppMessage(res) {
			return {
				title: this.share.title,
				path: '/pages/tasksquare/specialTask/specialTaskDetail?id=' + this.projectid,
				imageUrl: this.share.imageUrl,
				desc: '',
				content: '',
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		computed: {
			lists: {
				get() {
					let tmplist = [
						// 大图
						{
							type: 'image',
							content: this.img,
							width: 300,
							height: 320,
							x: 0,
							y: 0,
						},
						// 标题
						{
							type: 'text',
							content: this.title,
							color: '#333333',
							weight: 'bold',
							size: '12px',
							width: 200,
							height: 20,
							x: 20,
							y: 340,
						},
						// 文案2
						{
							type: 'text',
							content: "扫码立即报名",
							color: '#333333',
							size: '10px',
							width: 60,
							height: 20,
							x: 20,
							y: 370,
						},
						// logo
						// {
						// 	type: 'image',
						// 	content: this.younggee_logo,
						// 	width: 120,
						// 	height: 50,
						// 	x: 10,
						// 	y: 370,
						// },
						// 文案3
						{
							type: 'text',
							content: "发布任务请登录",
							color: '#333333',
							size: '10px',
							width: 70,
							height: 20,
							x: 20,
							y: 400,
						},
						{
							type: 'text',
							content: "www.younggee.com",
							color: '#333333',
							size: '10px',
							// style: 'italic',
							width: 60,
							height: 20,
							x: 90,
							y: 400,
						},
						// 二维码
						{
							type: 'qr',
							content: this.head,
							width: 80,
							height: 80,
							x: 215,
							y: 325,
						},
					]
					return tmplist
				},
				set() {}
			}
		},
		async created() {},
		async onShow() {
			// 判断登录
			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();
						}
					}
				});
			} else {
				this.loading = true;
				uni.showLoading({
					title: '加载中'
				});
				await this.postlist()
				await this.getTalentInfo();
				await this.getProjectDetail();
				await this.getTalentAccountInfo();
				if (this.account.length != 0) {
					await this.isSignUp();
				}
				this.loading = false;
				uni.hideLoading();
			}
		},
		onLoad(options) {
			// if (options.q) {
			// 	let queryAll = decodeURIComponent(options.q);
			// 	this.projectid = getQueryString(queryAll, 'id')
			// } else {
			// 	this.projectid = options.id
			// }
			console.log(options)
			this.projectid = options.id
			const scene = decodeURIComponent(options.scene);
			if (scene != "undefined") {
				this.projectid = scene;
			}
			this.share.path = 'https://younggee.com/wxapp/specialtaskdetail?action=taskdetail&id=' + this
				.projectid
		},
		onReady() { // 注意：想要拿到元素实例，需要在实例已经挂载到页面上才可以
		},
		methods: {
			handleCopy(content) {
				wx.setClipboardData({
					data: content,
					success: function(res) {
						console.log("复制成功");
					}
				});
			},
			postlist() {
				return this.$https.post('/youngee/c/p/get-qrcode', {
						scene: this.projectid,
						page: 'pages/tasksquare/specialTask/specialTaskDetail',
						// scene: this.taskid,
						// page: 'pages/task/taskdetails',
					})
					.then(res => {
						console.log(res)
						this.head = 'data:image/png;base64,' + res.data.data;
					})
			},
			// 判断登陆是否过期
			isLogin() {
				return this.$https.get('/youngee/c/t/g/is-login')
					.then(res => {
						if (res.data.code === 403) {
							// 登陆已失效
							this.token = ""
						} else {
							this.token = uni.getStorageSync('token')
						}
					})
			},
			handlePreviewImage1(item) {
				console.log("image src: ", item)
				let that = this
				wx.previewImage({
					current: item, // 当前显示图片的http链接
					urls: that.carousel_images // 需要预览的图片http链接列表
				})
			},
			handleCoopClick(value) {
				if (this.account[0].fans_count < value.followers_low) {
					// 提示“粉丝量不符合报名条件”
					uni.showToast({
						title: '粉丝量不符合报名条件',
						icon: 'none',
						duration: 2000
					});
				} else {
					this.strategy_id = value.strategy_id;
					this.strategy = value;
				}
			},
			getProjectDetail() {
				return this.$https.get('/youngee/c/t/g/get-project-detail' +
					"?" +
					"projectid" +
					"=" +
					this.projectid
				).then(res => {
					this.information = res.data.data
					this.hasNoProjectPhoto = this.information.ProjectPhoto === null ? true : false;
					this.information.Product = JSON.parse(res.data.data.product_snap);
					this.information.Product.ProductPhoto = JSON.parse(res.data.data
						.product_photo_snap);
					this.information.Product.ProductPrice = money(this.information.Product
						.ProductPrice)
					console.log("Product: ", this.information.Product)
					// 分享图里的
					for (let i = 0; i < this.information.Product.ProductPhoto.length; i++) {
						if (this.information.Product.ProductPhoto[i].Symbol === 1) {
							this.img = this.information.Product.ProductPhoto[i].PhotoUrl
							this.share.imageUrl = this.information.Product.ProductPhoto[i].PhotoUrl
						}
					}
					this.title = this.information.project_name
					this.share.title = this.information.project_name


					this.information.Product.ProductType = this.product_types[parseInt(this.information
						.Product
						.ProductType) - 1].label
					// 轮播图、详情图
					this.carousel_images = []
					this.product_detail_images = []
					for (let i = 0; i < this.information.Product.ProductPhoto.length; i++) {
						if (this.information.Product.ProductPhoto[i].Symbol != 3) {
							this.carousel_images.push(this.information.Product.ProductPhoto[i]
								.PhotoUrl)
							if (this.information.Product.ProductPhoto[i].Symbol != 1)
								this.product_detail_images.push(this.information.Product.ProductPhoto[
									i].PhotoUrl)
						}
					}

					// 任务类型
					this.information.project_form = this.task_type_info[this.information.project_form -
						1]

					// 任务形式
					if (this.information.content_type === 1) this.information.content = "图文"
					else if (this.information.content_type === 2) this.information.content = "视频"
				})
			},
			// 达人信息
			getTalentInfo() {
				return this.$https.get('/youngee/c/t/g/get-talent-info')
					.then(res => {
						console.log(res)
						this.talent = res.data.data
					})
			},
			//账号信息
			getTalentAccountInfo() {
				return this.$https.get('/youngee/c/t/g/get-talent-account')
					.then(res => {
						console.log(res)
						var accounts = res.data.data
						this.account = []
						if (res.data.code != -3) {
							for (var i = 0; i < accounts.length; i++) {
								if (this.information.project_platform === accounts[i].platform_id) {
									this.account.push(accounts[i])
								}
							}
						}
					})
			},
			isSignUp() {
				return this.$https.get('/youngee/c/t/g/is-sign-up-task' +
						"?" +
						"project_id" +
						"=" +
						this.projectid)
					.then(res => {
						if (res.data.code === 0) {
							this.isSign = res.data.data.is_sign;
							this.isAgree = res.data.data.is_agree;
						}
					})
			},
			onPageScroll(res) {
				uni.$emit('onPageScroll', res.scrollTop);
				this.scrollTop = res.scrollTop;
				// console.log(res.scrollTop);
				if (res.scrollTop <= this.topp1 - this.hei1) {
					// console.log(0)
					this.activeTab = 0
				}
				if (res.scrollTop > this.topp1 - this.hei1 && res.scrollTop < this.topp2 - this.hei1) {
					// console.log(1)
					this.activeTab = 1
				}
				if (res.scrollTop > this.topp2 - this.hei1) {
					// console.log(2)
					this.activeTab = 2
				}
			},
			//获取节点离顶部高度
			getInfo() {

				const query = uni.createSelectorQuery().in(this);

				query.select('#wrap0').boundingClientRect(data => {

					this.topp0 = data.top
				}).exec();
				query.select('#wrap1').boundingClientRect(data => {

					this.topp1 = data.top
				}).exec();
				query.select('#wrap2').boundingClientRect(data => {
					this.topp2 = data.top
					// console.log(this.topp2)
				}).exec();
				query.select('#wap').boundingClientRect(data => {

					// console.log(data)
					this.hei = data.height
					this.tabBarStyle = {

						height: data.height + data.height + 'px',
						width: '100% ',
					}
				}).exec();
				query.select('#wa').boundingClientRect(data => {

					// console.log(data)
					this.hei1 = data.height

				}).exec();

			},
			//视频轮播
			effect3dMarginMethed() {
				this.effect3dMargin++
			},
			//swiper滑动事件
			swiperChange: function(e) {
				this.swiper.index = e.detail.current;
			},
			//底部弹出层
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			toggle(type) {
				let that = this
				if (that.talent.is_bind_info === 0 || that.talent.is_bind_location === 0 ||
					that.account.length === 0) {
					// 前往个人信息绑定三合一界面
					uni.showModal({
						content: '请先绑定个人信息',
						success: function(res) {
							if (res.confirm) {
								if (that.account.length === 0) {
									uni.navigateTo({
										url: '/pages/tasksquare/bindinfo?platform_id=' +
											that
											.information.project_platform
									})
								} else {
									uni.navigateTo({
										url: '/pages/tasksquare/bindinfo?platform_id=' +
											that.information.project_platform +
											'&account_id=' +
											that.account[0].account_id
									})
								};
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					var data = {
							projectid: that.projectid,
							information: that.information,
							account: that.account[0].account_id,
						},
						data = JSON.stringify(data)
					uni.navigateTo({
						url: '/pages/tasksquare/specialTask/information?textObj=' + encodeURIComponent(
							data)
					});
				}
			},
			toggle1(type) {
				this.type1 = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup1.open(type)
			},
			cancel() {
				this.$refs.popup1.close()
			},
			// 更新账号
			Reset() {
				console.log("Reset func running")
				uni.navigateTo({
					url: '/pages/mycenter/myinformation/bindaccount?platform_id=' + this
						.information
						.project_platform + '&account_id=' + this.account[0].account_id,
					success(res) {
						console.log(res);
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			//进入信息确认页面
			determine() {
				console.log(this.strategy_id)
				if (this.strategy_id === 0 || this.strategy === null) {
					uni.showToast({
						title: '请选择合作方式',
						icon: 'none',
						duration: 2000
					});
				} else if (this.account[0].fans_count < this.strategy.followers_low) {
					// 提示“粉丝量不符合报名条件”
					uni.showToast({
						title: '粉丝量不符合报名条件',
						icon: 'none',
						duration: 2000
					});
				} else if (this.strategy.fee_form === 3 && this.strategy.offer === 0) {
					console.log(this.strategy)
					uni.showToast({
						title: '请填写自报价金额',
						icon: 'none',
						duration: 2000
					});
				} else {
					this.$refs.popup.close()
					var data = {
							projectid: this.projectid,
							information: this.information,
							account: this.account[0].account_id,
							strategy: this.strategy,
						},
						data = JSON.stringify(data)
					console.log("data")
					console.log(data)
					uni.navigateTo({
						url: '/pages/tasksquare/information?textObj=' + encodeURIComponent(data)
					});
				}
			},
			beginCanvas() {
				this.$refs.mosoweCanvasComponents.createCanvas();
			},
			_canvasImage(e) {
				console.log("url", e)
				this.canvasUrl = e;
			},
			// 保存图片
			async saveImage() {
				let {
					canvasUrl
				} = this
				let res = await saveImageToPhotosAlbum(canvasUrl)
				if (!res.success) return
				showToast('保存成功')
				this.$refs.popup2.close()
			},
			toggle2(type) {
				if (this.canvasUrl !== '') {
					this.type2 = type
					// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
					this.$refs.popup2.open(type)
					this.$refs.popup1.close()
				} else {
					this.beginCanvas()
					this.type2 = type
					// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
					this.$refs.popup2.open(type)
					this.$refs.popup1.close()
				}
			},
		}
	};
</script>
<style>
	/deep/ .share1 .uni-popup .uni-popup__wrapper {
		width: 300px !important;
		/* height: 500px !important; */
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 15rpx !important;
	}

	/deep/ .share.uni-popup .uni-popup__wrapper {
		width: 70%;
		border-radius: 15rpx;
	}
</style>
<style lang="scss" scoped>
	text {
		font-size: 24rpx;
	}

	#coop_box {
		// display: flex;
		margin-top: 15rpx;
	}

	#coop_box .coop_box_btn {
		display: flex;
		justify-content: center;
		align-items: center;
		// width: 700rpx;
		// height: 50rpx;
		border: 2px solid #f9f9f9;
		border-radius: 15rpx;
		font-size: 30rpx;
		text-align: center;
		// line-height: 40px;
		cursor: pointer;
	}

	.borderColor {
		border: 2px solid #f7d43c !important;
	}

	.offer_input {
		width: 50rpx;
		border: 1px solid #cccccc;
	}

	.wvp {
		color: #000;
		margin: 0 5rpx;
	}

	.wvp1 {
		padding: 0 30rpx;
		border-radius: 10rpx;
		margin: 0 10rpx;
		background-color: #f2d22d;
		border: 10rpx;
	}

	.my-canvas {
		position: fixed;
		top: -99999999999rpx;
		left: -99999999999rpx;
		z-index: -99999999999;
		opacity: 0;
	}

	.poster {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		overflow: hidden;
	}

	.container {
		padding: 40rpx;
		font-size: 28rpx;
		line-height: 48rpx;
	}

	.butmin {
		width: 200rpx;
		height: 65rpx;
		background-color: #f2d22d;
		border-radius: 20rpx;
		font-size: 36rpx;
		line-height: 2;
	}

	//视频轮播
	.full {
		position: relative;

		.btns {
			position: absolute;
			background-color: rgba(255, 255, 255, 0.5);
			z-index: 1;
			left: 100rpx;
			top: 50rpx;
			right: 100rpx;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;

			>view {
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				padding: 0 20rpx;
			}

			&.full {
				position: relative;
				left: 0;
				right: 0;

				>view {
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					padding: 0 20rpx;
					background-color: rgba(0, 0, 0, 0.1);
					margin-bottom: 10rpx;
				}
			}
		}
	}

	//轮播图
	page {
		background-color: #fff;
	}

	.top-swiper {
		margin-bottom: 30rpx;

		.bg {
			padding-top: var(--status-bar-height);
			box-sizing: content-box;
			width: 100%;
			position: relative;



			.image {
				box-sizing: content-box;
				position: absolute;
				z-index: 1;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				overflow: hidden;

				&::after {
					content: '';
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: 1;
					bottom: 0;
					left: 0;
					height: 65%;
					background-image: linear-gradient(to bottom, transparent, #FFF);
				}

				>image {
					position: absolute;
					box-sizing: content-box;
					padding: 60px;
					top: 0;
					left: 0;
					width: 100%;
					height: 80%;
					top: -60px;
					left: -60px;
					filter: blur(50px);
				}
			}
		}

		.box {
			padding-top: var(--status-bar-height);
			box-sizing: content-box;
			// position: absolute;
			z-index: 5;
			top: 0;
			left: 0;
			width: 100%;
			height: auto;
		}

		.swiper {
			height: 450rpx;
			margin: 0 20rpx;

			.le-img {
				width: 100%;
				height: 100%;
				display: block;
				transform: scale(0.8);
				transition: transform 0.3s ease-in-out 0s;
				border-radius: 4px;

				&.le-active {
					transform: scale(1);
				}
			}

		}
	}

	//其他的
	/deep/ .uni-data-checklist .checklist-group .checklist-box {
		border-radius: 20rpx !important;
		padding: 8rpx 30rpx !important;
		border: 0 !important;
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text {
		font-size: 24rpx;
		color: #333333;
	}

	/deep/ .mini-btn {
		height: 45rpx;
		width: 150rpx;
		line-height: 45rpx;
		margin: 30rpx;
	}

	.butto {
		text-align: center;
	}

	.option {
		padding: 20rpx;
	}

	//轮播图

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

	.swiper {
		height: 750rpx;
		display: flex;
		justify-content: center;
	}

	.swiper-item {
		display: block;
		width: 100%;
		height: 750rpx;
		line-height: 750rpx;
		text-align: center;
	}

	.swiper-list {
		margin-bottom: 0;
	}

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

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

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

	.Tasktext {
		// padding-top: 5% ;
		padding: 0 0 0 1%;
		// height: 80rpx;
		margin-top: 2%;
	}

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

	}

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

	.TitleText {
		height: 30rpx;
		background-color: #FDD442;
		border-radius: 20rpx;
		display: inline-block;
		padding: 0rpx 20rpx 0rpx 20rpx;
		line-height: 30rpx;
		margin-right: 20rpx;
		margin-top: 6%;
	}

	.TitleText p {
		color: #C49A0A;
		font-size: 50%;

	}

	.introduction {
		width: 100%;
		margin: 0 auto;
		display: flex;
		// justify-content: space-around;
		margin-top: 2%;
	}

	.rleft p {
		font-size: 24rpx;
		color: #999999;
	}

	.rright p {
		font-size: 24rpx;
		color: #999999;
	}

	.tasks {
		width: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: space-around;
		margin-top: 5%;
	}

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

	}

	.tasksleft p {
		font-size: 30rpx;
		text-align: center;
	}

	.tasksright p {
		font-size: 30rpx;
		text-align: center;
	}

	.interval {
		width: 100%;
		height: 40rpx;
		background-color: #E4E4E4;
		margin-top: 5%;
	}

	.circularmark {
		margin: 2% auto;
		width: 26%;
		padding: 10rpx;
		background-color: #f2d22d;
		border-radius: 10rpx;
		position: relative;
	}

	.circularmark p {
		font-size: 85%;
		text-align: center;
		font-weight: 800;
	}

	.circularmark image {
		width: 60rpx;
		height: 68rpx;
		position: absolute;
		top: -30%;
		left: -10%;
	}

	.btnn {
		background-color: #3296FA;
		border-radius: 20rpx;
		font-size: 25rpx;
		line-height: 34rpx;
	}

	.markcontent {
		// width: 100%;
		// background-color: #E4E4E4;
		margin: 0 30rpx;
		border-radius: 20rpx;
		padding-top: 2%;
		padding-bottom: 2%;
	}

	.markcontent p {
		font-size: 24rpx;
		// color: #333333;
		// margin: 3% ;
	}

	.markcontent span {
		font-size: 24rpx;
		// color: #333333;
		// margin: 3% ;
	}

	.interval2 {
		width: 100%;
		height: 100rpx;
		background-color: #E4E4E4;
		margin-top: 5%;
	}

	.markcontent1 {
		width: 100%;
		border-radius: 20rpx;
		padding-top: 2%;
		padding-bottom: 2%;
	}

	.markcontent1 p {
		font-size: 24rpx;
		// color: #333333;
		// margin: 3% ;
		// text-indent: 2em;
	}

	.trademark {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #f2d22d;
		margin: 0 auto;
	}

	.trademark image {
		width: 100%;
		height: 100%;
	}

	.diagram {
		width: 100%;
		// height: 1000rpx;
	}

	.diagram image {
		width: 100%;
		// height: 100% ;
	}

	.but1 {
		width: 60%;
		background-color: #f2d22d;
		border-radius: 20rpx;
		font-size: 36rpx;
		line-height: 200%;
		letter-spacing: 10rpx;
		font-weight: 500;
		height: 80%;

		&.on {
			background-color: #C0C0C0;

		}

	}

	/** 必须提升样式优先权(!important) **/
	button[disabled] {
		width: 60%;
		border-radius: 20rpx;
		font-size: 36rpx;
		line-height: 200%;
		letter-spacing: 10rpx;
		font-weight: 500;
		height: 80%;
		color: white !important;
		background: #c4c1c1 !important;
	}

	.but2 {
		width: 25%;
		background-color: #FFFFFF;
		border: 2rpx solid #f2d22d;
		border-radius: 20rpx;
		font-size: 36rpx;
		line-height: 180%;
		letter-spacing: 10rpx;
		font-weight: 500;
		position: relative;
		text-indent: 0.5em;
		height: 80%;
	}

	.but2 image {
		width: 19%;
		height: 56%;
		position: absolute;
		left: 9%;
		top: 21%;
	}

	.signup {
		box-shadow: 0rpx 5rpx 40rpx #ccc;
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		height: 90rpx;
		padding-top: 2%;
		background-color: #FFFFFF;
	}

	.pick {
		width: 50rpx;
		height: 50rpx;
		vertical-align: middle;
	}

	.nex {
		width: 100rpx;
		height: 20rpx;
		vertical-align: middle;
	}

	.sampledrawing {
		display: flex;
		width: 96%;
		margin: 0 auto;

	}

	.samplecharacter {
		flex: 1;
		margin-top: 2%;
	}

	.samplecharacter p {
		padding: 1%;
	}


	/deep/.uni-popup__content {
		background-color: #4CD964;
		border-radius: 20rpx !important;
	}

	/deep/.uni-popup__mask {
		background: rgba(0, 0, 0, 0.5) !important;
	}

	.butto {
		text-align: center;
	}

	/deep/ .mini-btn {
		height: 70rpx;
		width: 300rpx;
		line-height: 70rpx;
		margin: 10rpx;
		font-size: 80%;
		box-shadow: 0rpx 0rpx 0rpx 5rpx #f2d22d;
		border: 0rpx solid #f2d22d !important;
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box.is--tag {
		background-color: #FFFFFF !important;
		box-shadow: 0rpx 0rpx 6rpx 0rpx #464100;
		border-radius: 10rpx !important;
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box.is--tag.is-checked {
		background-color: #f2d22d !important;
	}

	/deep/.uni-data-checklist .checklist-group .checklist-box.is--tag.is-checked .checklist-text {
		color: #333333 !important;
	}

	/deep/.buu .uni-data-checklist .checklist-group {
		flex-direction: column !important;
	}


	.surplus p {
		margin-bottom: 17%;
		margin-top: 8%;
		font-size: 80%;

	}

	.circular {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #28EA71;
		margin: 0 auto;
	}

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

	.tii {
		text-align: center;
		font-size: 26rpx;
		margin-top: 2%;
	}

	.tii2 {
		text-align: center;
		font-size: 26rpx;
		margin-top: 2%;
		background-color: #FFFFFF;

	}

	.errar {
		background-color: #FFFFFF;

	}

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

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

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

	}

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

	.Tasktext2 span {
		color: #333333;
		font-size: 88%;
		font-weight: 600;
		text-indent: 2em;

	}

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

	.textti p {
		font-size: 60%;
		color: #999999;
		text-align: center;
	}

	.immg image {
		width: 200rpx;
		height: 200rpx;
	}

	.immg {
		line-height: 150%;
	}

	.immg p {
		color: #333333;
		font-size: 90%;
		font-weight: 600;

	}

	.warr p {
		font-weight: 500;
		font-size: 90%;

		&.lor {
			border-bottom: 2rpx solid #f2d22d;

		}
	}

	.label {
		// font-weight: 600;
		width: 130rpx;
	}
</style>