youngee_b_api/pages/tasksquare/taskdetail.vue

<template>
	<view style="position: relative;" v-if="!tyy">
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view class="" id="wrap0">

			<view class="home" style="padding-top: 180rpx;">

				<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="" style="width: 100% ;height: 100% ;"></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="introduction">
							<view class="rleft">
								<p>商品价值:{{information.Product.product_price}}元</p>
							</view>
							<view class="rright">
								<p>申请截止时间：{{information.recruit_ddl}}</p>
							</view>
						</view>
						<view class="tasks">
							<view class="tasksleft">
								<p><span style="color: #FDD442;font-size: 120% ;">{{information.taskNum}}</span>
								</p>
								<p>任务数量</p>
							</view>
							<view class="title-left"></view>
							<view class="tasksright">
								<p><span style="color: #FDD442;font-size: 120% ;">{{information.apply_num}}</span>
								</p>
								<p>报名人数</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: 5rpx 0;">
							<p>商品价值：</p>
							<p class="wvp" style="padding: 0 30rpx;">{{information.Product.product_price}}元</p>
						</view>
						<view style="display: flex;margin: 5rpx 0;">
							<p v-if="information.Product.product_url !== ''">商品链接：</p>
							<p class="wvp">{{information.Product.product_url}}</p>
						</view>
						<p>合作佣金：点击报名后显示</p>
					</view>
				</view>
				<view class="">
					<view class="circularmark">
						<p>账号要求</p>
					</view>
					<view class="markcontent">
						<view style="display: flex;margin: 5rpx 0;">
							<p>社媒平台：</p>
							<p class="wvp">{{information.PlatformInfo.platform_name}}</p>
							<p style="padding-left: 50rpx;">任务形式：</p>
							<p class="wvp">{{information.project_form}}</p>
						</view>
						<view style="display: flex;margin: 5rpx 0;">
							<p>创作者类型: </p>
							<p class="wvp" v-for="(item,index) in information.talent_type">{{item}}</p>
						</view>
						<view style="display: flex;margin: 5rpx 0;">
							<p>粉丝数要求: </p>
							<p class="wvp" v-for="(item,index) in information.Numfensi">{{item}}</p>
						</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;margin: 5rpx 0;">
								<p>内容形式：</p>
								<p class="wvp">{{information.content}}</p>
							</view>
							<p style="margin: 5rpx 0;">商品描述：</p>
							<p class="wvp" style="margin: 0;padding: 10rpx 0;"> {{information.Product.product_detail}}
							</p>
							<p style="margin: 5rpx 0;">任务详情：</p>
							<p class="wvp" style="margin: 0;padding: 10rpx 0;"> {{information.project_detail}} </p>
						</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" 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" :disabled="tyy" :class="{'on':item.title == '1',}"
					@click="toggle('bottom')" v-if="Registered==0"> 立即报名</button>
				<button type="default" class="but1" disabled v-if="Registered==1"> 已报名 </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="popup" background-color="#fff" @change="change" style="border-radius: 20rpx;">
					<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
						<view class="">
							<view class="sampledrawing">
								<image :src="img" style="width: 250rpx;height: 235rpx;margin-top: -9% ;" mode="">
								</image>
								<view class="samplecharacter">
									<p style='color: #666666;font-size: 80% ;'>
										{{ information.IsBuySamples.buy_samples_type==1?'样叽拍单返款':'不拍单'}}<span
											style='font-size: 120% ;color: #FCA641;margin-right: 3% ;'
											v-if="information.IsBuySamples.buy_samples_type==1">￥{{information.IsBuySamples.buySamplesRefund}}</span>
									</p>
									<p style='color: #999999;font-size: 60% ;'>品牌合作，作品合格返还。不合格，筛选后返还。</p>
								</view>
							</view>
							<!-- 黑线 -->
							<view class=""
								style="border-bottom: 2rpx solid #C0C0C0;margin-top: 3% ;margin-bottom: 3% ;">
							</view>
							<view class="" style="margin-left: 3% ;">
								<h3>产品规格</h3>
								<view class="">
									<uni-data-checkbox mode="tag" v-model="value" :localdata="sex">
									</uni-data-checkbox>
								</view>
							</view>
							<view class="" style="margin-left: 3% ; ">
								<h3>合作选择（平台账号不达标不能选择）</h3>
								<view class="" style="display: flex;">
									<view class="buu">
										<uni-data-checkbox mode="tag" v-model="value1" :localdata="coop_choice">
										</uni-data-checkbox>
									</view>


								</view>

							</view>
							<!-- 黑线 -->
							<view class=""
								style="border-bottom: 2rpx solid #C0C0C0;margin-top: 3% ;margin-bottom: 3% ;">
							</view>
							<view class="butto">
								<!-- <button class="mini-btn"  size="mini" @tap="Reset" style="background-color: #FFFFFF;">更新账号</button> -->
								<button class="mini-btn" size="mini" @tap="determine"
									style="background-color: #FCCF41;">立即报名</button>
							</view>
						</view>
					</view>
				</uni-popup>
			</view>
			<view>
				<!-- 底部普通弹窗 -->
				<uni-popup ref="popup1" background-color="#fff" @change="change" style="border-radius: 20rpx;">
					<view class="popup-content" :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>
			<canvas class="my-canvas" canvas-id="myCanvas" id="myCanvas"
				:style="{'width': `${poster.width}px`, 'height': `${poster.height}px`}" />
			<uni-popup ref="popup2" class="share1" background-color="#fff" @change="change">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">

					<view>
						<image :src="posterImg" style="width: 100% ;border-radius: 10rpx;" mode="widthFix" />
					</view>

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

<script>
	import mvBar from "@/components/mys_navBar/mysNavBar";
	import zSwiper from '@/components/z-swiper/index.vue'
	import {
		saveImageToPhotosAlbum,
		showToast,
		downloadFile
	} from '@/uni_modules/sakura-canvas/js_sdk/util'
	import Draw from '@/uni_modules/sakura-canvas/js_sdk/draw'
	let draw = null
	export default {
		components: {
			mvBar,
			zSwiper
		},
		data() {
			return {
				share: {
					title: "",
					path: '',
					imageUrl: '',
					desc: '',
					content: ''
				},
				poster: {},
				posterImg: '',
				canvasId: 'myCanvas',
				img: '',
				task_type_info: ["实体商品寄拍", "虚拟产品测评", "线下探店打卡", "素材微原创"],
				talent_type_info: ["美妆", "美食", "生活", "时尚", "测评", "旅行", "汽车", "萌宠", "游戏", "音乐", "舞蹈", "房产", "情感", "三农",
					"园艺", "随拍", "图文控", "二次元", "母婴亲子", "颜值达人", "剧情搞笑", "运动健身", "家居家装", "科技数码", "教育培训", "才艺技能", "艺术文化",
					"财经投资",
				],
				title: '[东鑫记港式茶餐厅]南京东路|魔都新晋爆款茶餐厅来袭！99元抢门',
				price: '',
				tips: '识别二维码\n立即申请任务',
				head: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/task15.png',
				big: '',
				tyy: true,
				tabBarStyle: {},
				activeTab: 0,
				hei: '',
				hei1: '',
				topp0: '',
				topp1: '',
				topp2: '',
				scrollTop: '',
				activeColor: '#FCCF41',
				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: "", // 100 - 700
					},
					btnType: "type2",
					onLeftClick: '',
					/* 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: {},
				token: '',
				fensishu: '',
				Registered: '0',
				zhanghaocode: '',
				product_detail_images: [],
				codeImg: '',
				queryAll: '',
			};
		},
		async created() {},
		onShow() {
			this.fensishu = ''
			this.token = uni.getStorageSync('token')
			this.getProjectDetail()
			console.log(this.token)
			// this.value=''
			// this.value1=''
		},
		onLoad(options) {
			// 传过来的id
			// console.log(options)
			this.projectid = options.id
			const scene = decodeURIComponent(options.scene);
			if (scene != "undefined") {
				this.projectid = scene;
			}

			this.share.path = '/pages/tasksquare/taskdetail?id=' + this.projectid
			this.postlist()

		},
		onReady() { // 注意：想要拿到元素实例，需要在实例已经挂载到页面上才可以

		},
		methods: {

			postlist() {
				this.$http.post('/youngee/c/p/get-qrcode', {
						scene: this.projectid,
						page: 'pages/tasksquare/taskdetails',
					})
					.then(res => {
						console.log(res)
						this.head = 'data:image/png;base64,' + res.data.data;
					})
			},
			getProjectDetail() {
				this.$http.get('/youngee/c/t/g/get-project-detail' +
					"?" +
					"projectid" +
					"=" +
					this.projectid
				).then(res => {
					console.log(res)
					this.information = res.data.data

					// 分享图里的
					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].photo_url
							this.share.imageUrl = this.information.Product.ProductPhoto[i].photo_url
						}
					}
					this.title = this.information.project_name
					this.share.title = this.information.project_name

					// 轮播图、详情图
					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].photo_url)
							if (this.information.Product.ProductPhoto[i].symbol !== 1)
								this.product_detail_images.push(this.information.Product.ProductPhoto[i].photo_url)
						}
					}
					// 钱数除100
					// if (this.information.IsBuySamples) {
					// 	if (this.information.IsBuySamples.buySamplesCost) {
					// 		this.information.IsBuySamples.buySamplesCost = Number(this.information.IsBuySamples
					// 			.buySamplesCost) * 0.01
					// 	}
					// 	if (this.information.IsBuySamples.buySamplesRefund) {
					// 		this.information.IsBuySamples.buySamplesRefund = Number(this.information.IsBuySamples
					// 			.buySamplesRefund) * 0.01
					// 	}
					// }

					// if (this.information.Product.product_price) {
					// 	this.information.Product.product_price = Number(this.information.Product
					// 		.product_price) * 0.01
					// }

					// 任务数量
					this.information.taskNum = 0
					for (let j = 0; j < this.information.RecruitStrategy.length; j++) {
						this.information.taskNum = Number(this.information.taskNum) + Number(this.information
							.RecruitStrategy[j]
							.recruit_number)
					}

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

					// 创作者类型
					let arr = JSON.parse(this.information.talent_type)
					this.information.talent_type = []
					if (arr.length == 0) this.information.talent_type.push("不限")
					for (var j = 0; j < arr.length; ++j) {
						this.information.talent_type.push(this.talent_type_info[arr[j] - 1])
					}

					// 粉丝数要求
					this.information.Numfensi = []
					for (let i = 0; i < this.information.RecruitStrategy.length; ++i) {
						let fensi = this.information.RecruitStrategy[i].followers_low + ' - ' + this.information
							.RecruitStrategy[i].followers_up
						this.information.Numfensi.push(fensi)
					}

					// 任务形式
					if (this.information.content_type == 1) this.information.content = "图文"
					else if (this.information.content_type == 2) this.information.content = "视频"

					// 报名截止日期
					this.information.recruit_ddl = this.information.recruit_ddl.substr(0, 10);

					// 合作选择
					var arr1 = [];
					for (let i = 0; i < this.information.RecruitStrategy.length; ++i) {
						let fee_form = this.information.RecruitStrategy[i].fee_form
						let str1 = '粉丝量' + this.information.RecruitStrategy[i].followers_low + ' - ' + this
							.information
							.RecruitStrategy[i].followers_up + '   稿费：'
						let str2 = fee_form == 1 ? '产品置换' : (fee_form == 2 ? '稿费' : '创作者自报价')
						let str3 = fee_form == 2 ? '' + this.information.RecruitStrategy[i].offer + '元/人' : ''
						let str = str1 + str2 + str3
						let choice = {
							value: this.information.RecruitStrategy[i].strategy_id,
							fee_form: fee_form,
							text: str
						}
						arr1.push(choice)
					}
					this.coop_choice = arr1

					this.getlist2()
					this.getlist3()

					this.tyy = false

				})
			},
			//达人信息
			getlist2() {
				this.$https.get('/youngee/c/t/g/get-talent-info')
					.then(res => {
						console.log("talent")
						console.log(res.data.data)
						this.talent = res.data.data
					})
			},
			//账号信息
			getlist3() {
				this.$https.get('/youngee/c/t/g/get-talent-account')
					.then(res => {
						console.log("account")
						console.log(res.data.data)
						var accounts = res.data.data
						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])
								}
							}
						}
					})
			},
			// 位运算方法
			contentFormToString(val) {
				let result = ""

				let broadcast = 128
				let broadcastType = val & broadcast
				if (broadcastType > 0) {
					result += "直播"
				} else {
					let imgMask = 15
					let articleMask = 48
					let liveMask = 64
					let originImgVal = 1
					let zhidingImgVal = 2
					let originVideo = 4
					let zhidingVidel = 8
					let origArticle = 16
					let zhidingArticle = 32

					let imgAVal = val & imgMask
					if (imgAVal == originImgVal) {
						result += "原创图片"
					} else if (imgAVal == zhidingImgVal) {
						result += "指定图片"
					} else if (imgAVal == originVideo) {
						result += "原创视频"
					} else if (imgAVal == zhidingVidel) {
						result += "指定视频"
					}

					let articleType = val & articleMask


					if (articleType == origArticle) {
						result += "+ 原创文案"
					} else if (articleType == zhidingArticle) {
						result += "+ 指定文案"
					}
				}
				return result
			},
			// 滑动
			anniu() {
				uni.pageScrollTo({
					scrollTop: this.topp0

				})
				this.activeTab = 0
			},
			anniu1() {
				uni.pageScrollTo({
					scrollTop: this.topp1 - this.hei1 + this.hei + this.hei
				})
				this.activeTab = 1
			},
			anniu2() {
				uni.pageScrollTo({
					scrollTop: this.topp2 - this.hei
				})
				this.activeTab = 2
			},
			//scroll滚动
			// async tabScoll(e){
			// 	let scrollTop = e.detail.scrollTop;
			// 	console.log(scrollTop)

			// },
			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) {
								console.log(that.talent)
								console.log("in")

								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 {
					that.type = type
					// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
					that.$refs.popup.open(type)
				}
			},
			// 生成分享图
			async createdPoster() {
				let {
					canvasId,
					img,
					title,
					price,
					head,
					tips
				} = this
				draw = new Draw({
					width: 375,
					height: 580,
					canvasId,
					_this: this,
					background: {
						type: 'color',
						color: 'white',
						w: 375,
						h: 580,
					},
				})
				let res = await draw.createdSharePoster(({
					bgObj
				}) => {
					let {
						width,
						height
					} = bgObj
					this.poster = bgObj
					// 绘制内容
					return [
						// 大图
						{
							type: 'image',
							x: 0,
							y: 0,
							src: img,
							w: width,
							h: width
						},
						// 标题
						{
							type: 'text',
							w: width - (20 * 2),
							text: title,
							color: '#333333',
							font: {
								size: 22,
								weight: 600
							},
							line: {
								num: 1
							},
							callBack: (before) => {
								let {
									sx,
									ex,
									sy,
									ey
								} = before
								return {
									x: sx + 20,
									y: ey + 20,
								}
							}
						},
						// 价格
						{
							type: 'text',
							text: price,
							color: '#333333',
							font: {
								size: 16
							},
							callBack: (before) => {
								let {
									sx,
									ex,
									sy,
									ey
								} = before
								return {
									x: sx,
									w: width - (sx * 2),
									y: ey + 15,
								}
							}
						},
						// 虚线
						// {
						//     type: 'line',
						//     x: 0,
						//     w: width,
						//     color: '#ff875f',
						//     lineType: 'dashed',
						//     callBack: (before) => {
						//         let { sx, ex, sy, ey } = before
						//         return {
						//             y: ey + 10,
						//         }
						//     }
						// },
						// 二维码
						{
							type: 'qrcode',
							x: 20,
							size: 110,
							text: '',
							image: {
								src: head,
								size: 110,
								r: 10,
								borderWidth: 7,
								borderColor: '#ffffff'
							},
							callBack: (before) => {
								let {
									sx,
									ex,
									sy,
									ey
								} = before
								return {
									y: ey + 15,
								}
							}
						},
						{
							type: 'text',
							w: 200,
							text: tips,
							color: '#333333',
							font: {
								size: 17,
							},
							line: {
								height: 22
							},
							callBack: (before, all) => {
								let {
									sx,
									ex,
									sy,
									ey,
									w
								} = before
								return {
									x: sx + w + 50,
									y: sy + 50,
								}
							}
						}
					]
				})
				console.log('res', res)
				if (!res.success) return
				this.posterImg = res.data
				this.isShow = true
			},
			// 保存图片
			async saveImage() {
				let {
					posterImg
				} = this
				let res = await saveImageToPhotosAlbum(posterImg)
				if (!res.success) return
				showToast('保存成功')
				this.isShow = false
				this.$refs.popup2.close()
			},
			toggle1(type) {
				this.type1 = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup1.open(type)

			},
			toggle2(type) {
				if (this.posterImg !== '') {
					uni.hideLoading();
					this.type2 = type
					// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
					this.$refs.popup2.open(type)
					this.$refs.popup1.close()
				} else {
					this.createdPoster()
					uni.hideLoading();
					this.type2 = type
					// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
					this.$refs.popup2.open(type)
					this.$refs.popup1.close()
				}



			},
			preservation() {
				uni.showToast({
					title: "保存成功",
					duration: 1000,
				});
			},
			cancel() {
				this.$refs.popup1.close()
			},
			// 更新账号
			Reset() {
				uni.showToast({
					title: '更新成功',
					duration: 1000
				});
			},
			//进入信息确认页面
			determine() {
				if (this.value === '' || this.value1 === '') {
					uni.showToast({
						title: '请选择产品规格和合作选择',
						icon: 'none',
						duration: 2000
					});
				} else {
					this.$refs.popup.close()
					var data = {
							projectid: this.projectid,
							guige: this.value,
							dengji: this.value1,
						},
						data = JSON.stringify(data)
					uni.navigateTo({
						url: '/pages/task/information?textObj=' + data
					});
				}


			},
		}
	};
</script>
<style>
	/* 	 /deep/uni-button:after{
				  border: 1rpx solid #FFFFFF !important;
	} */
	/deep/ .share1 .uni-popup .uni-popup__wrapper {
		width: 85% !important;
		border-radius: 15rpx !important;
	}

	/deep/ .share.uni-popup .uni-popup__wrapper {
		width: 70%;
		border-radius: 15rpx;
	}
</style>
<style lang="scss" scoped>
	.wvp {
		background-color: #FFFFFF;
		padding: 0 20rpx;
		border: 1rpx solid #AAAAAA;
		border-radius: 10rpx;
		margin: 0 5rpx;
	}

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

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

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

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

	//视频轮播
	.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;
	}

	.swiper-item {
		display: block;
		height: 400rpx;
		line-height: 400rpx;
		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: 90%;
		color: #999999;
		text-align: center;
	}

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

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

	.circularmark {
		margin: 2% auto;
		width: 26%;
		padding: 10rpx;
		background-color: #FCCF41;
		border-radius: 30rpx;
		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;
		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: #FCCF41;
		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: #FCCF41;
		border-radius: 20rpx;
		font-size: 36rpx;
		line-height: 200%;
		letter-spacing: 10rpx;
		font-weight: 500;
		height: 80%;

		&.on {
			background-color: #C0C0C0;

		}

	}

	.but2 {
		width: 25%;
		background-color: #FFFFFF;
		border: 2rpx solid #FCCF41;
		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 #FCCF41;
		border: 0rpx solid #FCCF41 !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: #FCCF41 !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;
	}

	/deep/ .share1.uni-popup .uni-popup__wrapper {
		width: 85%;
		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: 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;

	}

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

	}

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

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

		}
	}
</style>