yizhizan-h5/pages/my/invitationUser.vue

<template>
	<view>
		<view class="content">
			<!-- <view class="view1" v-bind:style="{backgroundImage: 'url('+backgroundImage+')'}">
			<view style="padding-top: 820upx;" @longpress="logoTime(userImageUrl)">
				<view style="width: 100%;height: 150upx;display: flex;background: #FFFFFF;padding: 20upx 10upx;">
					<image :src="userImageUrl" style="border-radius: 100upx;width: 100upx;height: 100upx;margin-left: 30upx;"></image>
					<view class="login-view-text1" style="margin-left: 30upx;width: 59%;">
						<view style="font-size: 16px;">{{ nickName }}</view>
						<view style=" font-size: 12px;margin-top: 20upx;">邀请码:{{invitationCode}}</view>
					</view>
					<canvas canvas-id="qrcode" style="width: 140upx;height: 130upx;" />
				</view>
			</view>
		</view> -->
			<!-- #ifdef MP-WEIXIN -->
			<!-- <image src="https://zhaopin.xianmaxiong.com/file/uploadPath/2022/09/02/55ae353dccf567c61c08a1e8889fb723.png" style="width: 100%;position: fixed;top: 0%;" mode="widthFix"></image> -->
			<image :src="backgroundImage" style="width: 100%;position: fixed;top: 0%;" mode="widthFix"></image>
			<!-- #endif -->
			<view class="headTop" :style="numPeople>0&&zhiRate>0?'top:420px':''">
				<view class="margin-lr-sm" style="background: #FFFFFF;border-radius: 20upx;">
					<view class="flex justify-between  padding">
						<view class="flex align-center">
							<image :src="userImageUrl?userImageUrl:'../../static/logo.png'"
								style="width: 72upx;height: 72upx;border-radius: 12upx;"></image>
							<view class="margin-left-sm">
								<view class="text-sm"><text class="text-bold"
										style="font-size: 48upx;">{{peopleNum}}</text>人</view>
								<view style="color: #82A9FE;">已成功邀请人数</view>
							</view>
						</view>

						<!-- <view class="margin-left-sm flex align-end">
							<view style=""><span @click="goChat" style="color:red;padding-right: 5rpx;">联系客服</span>领取奖励</view>
						</view> -->

					</view>
					<view style="display: flex;flex-direction: row; padding:20upx 40upx;justify-content: center;">
						<!-- #ifdef H5 -->
						<button @click="share()" type="default"
							style="background: #E4ECFF;border: 2upx solid #82A9FE;font-size: 16px;font-weight: bold;color: #82A9FE; width: 50%;">文案推广</button>
						<button @tap="showModal()" type="default"
							style="background-color: #82A9FE;font-size: 16px;font-weight: bold;color: #FFFFFF; width: 50%; margin-left: 40upx;">生成海报</button>
						<!-- #endif -->
						<!-- #ifdef APP-PLUS -->
						<button v-if="isShowWxAPPShare=='是'" @click="shareWeiXin()" type="default"
							style="background: #E4ECFF;border: 2upx solid #82A9FE;font-size: 16px;font-weight: bold;color: #82A9FE; width: 50%;">文案推广</button>
						<button v-if="isShowWxAPPShare=='否'" @click="sharAPPUrl()" type="default"
							style="background: #E4ECFF;border: 2upx solid #82A9FE;font-size: 16px;font-weight: bold;color: #82A9FE; width: 50%;">文案推广</button>

						<button @tap="showModal()" type="default"
							style="background-color: #557EFD;font-size: 16px;font-weight: bold;color: #FFFFFF; width: 50%; margin-left: 40upx;">生成海报</button>
						<!-- #endif -->

						<!-- #ifdef MP-WEIXIN -->
						<button open-type="share"
							style="background: #E4ECFF;border: 2upx solid #82A9FE;font-size: 16px;font-weight: bold;color: #82A9FE; width: 48%;">一键分享</button>
						<!-- <button @click="share()" type="default" style="background-color: #FFCB49;font-size: 16px;font-weight: bold;color: #FFFFFF; width: 40%;">文案推广</button> -->
						<button @tap="onSaveImg()" type="default"
							style="background-color: #82A9FE;font-size: 16px;font-weight: bold;color: #FFFFFF; width: 48%;">生成海报</button>

						<!-- #endif -->
						<!-- 生成海报 -->
						<!-- 图片展示由自己实现 -->
						<view class="flex_row_c_c modalView" :class="qrShow?'show':''" @tap="hideQr()">
							<view class="flex_column">
								<view class="backgroundColor-white padding1vh border_radius_10px">
									<image :src="poster.finalPath || ''" mode="widthFix" class="posterImage"></image>
								</view>
								<view class="flex_row marginTop2vh">
									<!-- #ifdef H5 -->
									<button type="primary" size="mini">长按上方图片保存</button>
									<!-- #endif -->
									<!-- #ifndef H5 -->
									<button type="primary" size="mini" @tap.prevent.stop="saveImage()">保存图片</button>
									<!-- #endif -->
								</view>
							</view>
						</view>
						<!-- 画布 -->
						<view class="hideCanvasView">
							<canvas class="hideCanvas" canvas-id="default_PosterCanvasId"
								:style="{width: (poster.width||10) + 'px', height: (poster.height||10) + 'px'}"></canvas>
						</view>
					</view>
				</view>

				<view class="margin-lr-sm margin-top padding-lr padding-bottom-xl padding-top"
					style="background: #FFFFFF;border-radius: 20upx;">
					<view>邀请奖励</view>
					<view class="yaobox " v-if="numPeople>0">
						<image src="../../static/images/my/yaoq.png" style="width: 88upx;height: 88upx;"></image>
						<view class="flex align-center justify-between" style="width: 88%;">
							<view class="margin-left-sm">
								<view>邀请{{numPeople}}人</view>
								<view class="text-sm" style="color: #999999;">可更新简历时间</view>
							</view>
							<!-- #ifdef H5 -->
							<view class="btn" @tap="showModal()">立即邀请</view>
							<!-- #endif -->
							<!-- #ifdef APP -->
							<view class="btn" @click="sharAPPUrl()">立即邀请</view>
							<!-- #endif -->
							<!-- #ifdef MP-WEIXIN -->
							<view class="btn" @tap="onSaveImg()">立即邀请</view>
							<!-- #endif -->

						</view>
					</view>
					<view class="yaobox" v-if="zhiRate>0">
						<image src="../../static/images/my/yaoq.png" style="width: 88upx;height: 88upx;"></image>
						<view class="flex align-center justify-between" style="width: 88%;">
							<view class="margin-left-sm">
								<view>我的团队</view>
								<view class="text-sm" style="color: #999999;">奖励分销</view>
							</view>
							<view class="btn" @tap="goTeam()">去查看</view>
						</view>
					</view>
				</view>
			</view>
			<!-- #ifndef MP-WEIXIN -->
			<tki-qrcode ref="qrcode" :val="url" :size="200" background="#fff" foreground="#000" pdground="#000"
				:onval="true" :loadMake="true" @result="qrR" :show="false"></tki-qrcode>
			<view class="cu-modal" :class="modalName == 'Image' ? 'show' : ''" @tap="hideModal">
				<view class="cu-dialog" v-if="backgroundImage && erweimapath && haibaoShow" @tap="hideModal">
					<view class="bg-img">
						<wm-poster @success="posterSuccess" :imgSrc="backgroundImage"
							:Referrer="'我的邀请码:'+invitationCode" :QrSrc="erweimapath" :Title="tuiguang"
							:LineType="false"></wm-poster>
					</view>
				</view>
			</view>
			<!-- #endif -->

			<!-- #ifdef MP-WEIXIN -->
			<view @tap="hideModal" :class="modalName == 'Image' ? 'show' : ''" class="modal"
				style="text-align: center;display: flex;justify-content: center;">
				<view style="width:100%;margin: auto;">
					<image :src="h5SaveImg" mode="widthFix" style="width: 90%;"></image>
				</view>
			</view>
			<canvas canvas-id="poster" class="poster_canvas"></canvas>
			<!-- #endif -->
		</view>

		<image @click="goChat"
			src="https://zhaopin.xianmaxiong.com/file/uploadPath/2022/09/05/125191cd8823a1de4eb9bd83217919e9.png"
			style="top: 90vh;left: 40rpx;position: fixed;width: 85rpx;height: 80rpx;bottom: 100rpx;" mode=""></image>
	</view>
</template>

<script>
	let settingWritePhotosAlbum = false;
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
	import appShare from '@/utils/share.js';
	import wmPoster from '@/components/wm-poster/wm-posterorders.vue';
	import uQRCode from "../../js_sdk/Sansnn-uQRCode/uqrcode.js"
	import _app from '../../js_sdk/QuShe-SharerPoster/QS-SharePoster/app.js';
	import configdata from '../../common/config.js';
	// import {
	// 	getSharePoster
	// } from '../../js_sdk/QuShe-SharerPoster/QS-SharePoster/QS-SharePoster.js';
	export default {
		components: {
			tkiQrcode,
			wmPoster,
			// getSharePoster
		},
		data() {
			return {
				erweimapath: '',
				poster: {},
				qrShow: false,
				haibaoImg: null,
				haibaoShow: false,
				modalName: '',
				canvasId: 'default_PosterCanvasId',
				imageUrl: '',
				userImageUrl: '',
				isShowWxAPPShare: '否',
				nickName: '',
				invitationCode: '',
				backgroundImage: '',
				tuiguang: '',
				tuiguang1: '',
				url: '',
				peopleNum: 0,
				numPeople: 0,
				zhiRate: 0
			};
		},
		onLoad() {
			//我邀请的人数
			this.getYaoNum();
			//邀请收益
			this.getInviteMoney();
			this.getBackImageList();

			let avatar = this.$queue.getData('avatar');
			if (avatar && avatar !== 'undefined') {
				this.userImageUrl = avatar;
			} else {
				this.userImageUrl = '/static/logo.png';
			}

			this.$Request.getT('/app/common/type/255').then(res => {
				if (res.code === 0) {
					if (res.data && res.data.value) {
						this.tuiguang = res.data.value;
					}
				}
			});
			//文案推广
			this.$Request.getT('/app/common/type/255').then(res => {
				if (res.code === 0) {
					if (res.data && res.data.value) {
						this.tuiguang1 = res.data.value;
					}
				}
			});
			//检测书否开启APP微信分享
			this.$Request.getT('/app/common/type/136').then(res => {
				if (res.code === 0) {
					if (res.data && res.data.value) {
						this.isShowWxAPPShare = res.data.value;
					}
				}
			});

			this.invitationCode = this.$queue.getData('invitationCode');
			// #ifndef H5
			this.$Request.getT('/app/common/type/25').then(res => {
				if (res.code === 0) {
					if (res.data && res.data.value) {
						this.url = res.data.value;
					}
				}
			});
			//#endif
			// #ifdef H5
			this.$Request.getT('/app/common/type/141').then(res => {
				if (res.code === 0) {
					if (res.data && res.data.value && res.data.value == '是') {
						this.$Request.getT('/app/common/type/25').then(ress => {
							if (ress.code === 0) {
								if (ress.data && ress.data.value) {
									this.url = ress.data.value;
								}
							}
						});
					} else {
						this.url = this.$queue.publicYuMing() + '/?invitation=' + this.invitationCode;
					}
				}
			});

			//#endif

			let userName = this.$queue.getData('userName');
			if (userName && userName !== 'undefined') {
				this.nickName = userName;
			} else {
				this.nickName = '游客';
			}

		},
		onShow() {
			this.zhiRate = uni.getStorageSync('zhiRate')
		},
		onShareAppMessage(res) {
			return {
				path: '/pages/index/index?invitation=' + this.invitationCode, //这是为了传参   onload(data){let id=data.id;} 
				title: this.tuiguang,
				imageUrl: this.backgroundImage
			}
		},
		onShareTimeline(res) {
			return {
				path: '/pages/index/index?invitation=' + uni.getStorageSync(
					'invitationCode'), //这是为了传参  
				title: this.tuiguang,
				imageUrl: this.backgroundImage
			}
		},
		methods: {
			goTeam() {
				uni.navigateTo({
					url: '/my/team/team'
				})
			},
			//联系客服
			goChat() {
				let that = this
				if (uni.getStorageSync('userType') == 1) { //用户端
					// #ifdef MP-WEIXIN
					wx.openCustomerServiceChat({
						extInfo: {
							url: that.$queue.getData('kefu')
						},
						corpId: that.$queue.getData('kefuAppid'),
						success(res) {
							console.log(res)
						},
					})
					// #endif
					// #ifdef H5
					window.location.href = that.$queue.getData('kefu');
					// #endif
					// #ifdef APP
					let kefu = that.$queue.getData('kefu')
					console.log(kefu)
					plus.runtime.openURL(kefu, function(res) {});
					// #endif
				} else { //企业端
					// #ifdef MP-WEIXIN
					wx.openCustomerServiceChat({
						extInfo: {
							url: that.$queue.getData('kefuq')
						},
						corpId: that.$queue.getData('kefuAppidq'),
						success(res) {
							console.log(res)
						},
					})
					// #endif
					// #ifdef H5
					window.location.href = that.$queue.getData('kefuq');
					// #endif
					// #ifdef APP
					let kefu = that.$queue.getData('kefuq')
					console.log(kefu)
					plus.runtime.openURL(kefu, function(res) {});
					// #endif
				}
			},
			//获取邀请收益
			getInviteMoney() {
				this.$Request.getT('/app/common/type/269', {}).then(res => {
					if (res.code === 0) {
						this.numPeople = res.data.value
					}
				});
			},
			//获取我邀请的人数
			getYaoNum() {
				this.$Request.getT('/app/invite/selectInviteCount', {}).then(res => {
					if (res.code === 0) {
						this.peopleNum = res.data
					}
				});
			},
			posterSuccess(haibaoImg) {
				this.haibaoImg = haibaoImg;
				this.modalName = 'Image';
			},
			showModal() {
				if (!this.haibaoImg) {
					this.haibaoShow = true;
					this.$queue.showLoading('海报生成中...');
				} else {
					this.modalName = 'Image';
				}
			},
			hideModal() {
				this.modalName = null;
			},
			qrR(path) {
				this.erweimapath = path;
			},
			getBackImageList() {
				this.$Request.getT('/app/banner/selectBannerList?state=-1&classify=5').then(res => {
					if (res.code === 0) {
						this.backgroundImage = res.data[0].imageUrl;
					}
				});
				this.make();

			},
			make() {
				uQRCode.make({
					canvasId: 'default_PosterCanvasId',
					componentInstance: this,
					text: this.url,
					size: 68,
					margin: 4,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					correctLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						console.log(res)
					}
				})
			},
			shareWeiXin() {
				this.$Request.getT('/app/common/type/103').then(res => {
					if (res.code === 0) {
						if (res.data && res.data.value) {
							let relationId = this.invitationCode;
							let shareData = {
								shareUrl: this.url,
								shareTitle: res.data.value,
								shareContent: '邀请码：' + relationId + '，' + res.data.value,
								shareImg: this.$queue.publicYuMing() + '/logo.png',
								type: 0
							};
							appShare(shareData, res => {
								console.log('分享成功回调', res);
							});
						}
					}
				});

			},
			share() {
				this.sharurl();
			},
			sharAPPUrl() {
				let that = this;
				let relationId = this.invitationCode;
				uni.showModal({
					title: '文案推广',
					content: this.tuiguang1 + relationId + '\n' + this.url,
					showCancel: true,
					cancelText: '关闭',
					confirmText: '一键复制',
					confirmColor: '#00B88F',
					success: res => {
						if (res.confirm) {
							uni.setClipboardData({
								data: this.tuiguang1 + relationId + '\n' + this.url,
								success: function() {
									console.log('success');
									that.$queue.showToast('文案复制成功');
								}
							});
						}
					}
				});
			},
			sharurl() {
				let that = this;
				// this.$queue.showLoading('加载中...');
				let relationId = this.invitationCode;
				uni.showModal({
					title: '文案推广',
					content: this.tuiguang1 + relationId + '\n' + this.url,
					showCancel: true,
					cancelText: '关闭',
					confirmText: '一键复制',
					confirmColor: '#00B88F',
					success: res => {
						if (res.confirm) {
							uni.setClipboardData({
								data: this.tuiguang1 + relationId + '\n' + this.url,
								success: function() {
									console.log('success');
									that.$queue.showToast('复制成功');
								}
							});
						}
					}
				});
			},
			logoTime(urlList) {
				uni.previewImage({
					current: 0,
					urls: urlList,
					loop: true,
					longPressActions: {
						itemList: ['收藏'],
						itemColor: "#007AFF"
					}
				})
			},
			goList() {
				let userId = this.$queue.getData('userId');
				this.$Request.getT('/app/invite/selectInviteAndPoster?userId=' + userId).then(res => {
					if (res.code === 0) {
						if (res.data.user.imageUrl) {
							this.userImageUrl = res.data.user.imageUrl;
						} else {
							this.userImageUrl = '/static/img/common/logo.jpg';
						}

						if (res.data.user.nickName) {
							this.nickName = res.data.user.nickName;
						} else {
							this.nickName = res.data.user.phone;
						}
						this.invitationCode = res.data.user.invitationCode;
						this.imageUrl = res.data.url;

					}
				});
			},
			async shareFc() {
				let _this = this;
				try {
					const d = await getSharePoster({
						type: 'testShareType',
						backgroundImage: _this.backgroundImage,
						posterCanvasId: _this.canvasId, //canvasId
						delayTimeScale: 20, //延时系数
						drawArray: ({
							bgObj,
							type,
							bgScale
						}) => {
							const dx = bgObj.width * 0.3;
							const fontSize = bgObj.width * 0.045;
							const lineHeight = bgObj.height * 0.04;
							//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
							return new Promise((rs, rj) => {
								rs([{
										type: 'custom',
										setDraw(Context) {
											Context.setFillStyle('black');
											Context.setGlobalAlpha(0.3);
											Context.fillRect(0, bgObj.height - bgObj
												.height * 0.2, bgObj.width, bgObj
												.height * 0.2);
											Context.setGlobalAlpha(1);
										}
									},
									{
										type: 'text',
										fontStyle: 'italic',
										text: '邀请码:' + _this.invitationCode,
										size: fontSize,
										color: 'white',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: bgObj.width - textLength - fontSize,
												dy: bgObj.height - lineHeight * 3
											}
										},
										serialNum: 0,
										id: 'tag1' //自定义标识
									},
									{
										type: 'qrcode',
										text: _this.url,
										size: bgObj.width * 0.2,
										dx: bgObj.width * 0.05,
										dy: bgObj.height - bgObj.width * 0.25
									}
								]);
							})
						},
						setCanvasWH: ({
							bgObj,
							type,
							bgScale
						}) => { // 为动态设置画布宽高的方法，
							_this.poster = bgObj;
						}
					});
					//_app.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath)
					_this.poster.finalPath = d.poster.tempFilePath;
					_this.qrShow = true;
				} catch (e) {
					_app.hideLoading();
				}
			},
			saveImage() {
				uni.saveImageToPhotosAlbum({
					filePath: this.poster.finalPath,
					success(res) {
						_app.showToast('保存成功');
					}
				})
			},
			hideQr() {
				this.qrShow = false;
			},

			// 微信小程序保存图片
			async onSaveImg() {
				// #ifdef MP-WEIXIN
				let imgUrl = await this.createPoster();
				uni.showLoading({
					title: '海报下载中'
				});
				if (settingWritePhotosAlbum) {
					uni.getSetting({
						success: res => {
							if (res.authSetting['scope.writePhotosAlbum']) {
								uni.saveImageToPhotosAlbum({
									filePath: imgUrl,
									success: () => {
										uni.hideLoading();
										uni.showToast({
											title: '保存成功'
										});
									}
								});
							} else {
								uni.showModal({
									title: '提示',
									content: '请先在设置页面打开“保存相册”使用权限',
									confirmText: '去设置',
									cancelText: '算了',
									confirmColor: '#00B88F',
									success: data => {
										if (data.confirm) {
											uni.hideLoading();
											uni.openSetting();
										}
									}
								});
							}
						}
					});
				} else {
					uni.hideLoading();
					settingWritePhotosAlbum = true;
					uni.authorize({
						scope: 'scope.writePhotosAlbum',
						success: () => {
							uni.saveImageToPhotosAlbum({
								filePath: imgUrl,
								success: () => {
									uni.hideLoading();
									uni.showToast({
										title: '保存成功'
									});
								}
							});
						}
					});
				}
				// #endif
			},
			//生成海报
			createPoster() {
				let that = this;
				return new Promise((resolve, reject) => {
					uni.showLoading({
						title: '海报生成中'
					});
					const ctx = uni.createCanvasContext('poster');
					ctx.fillRect(0, 0, 375, 673);
					ctx.setFillStyle("#FFF");
					ctx.fillRect(0, 0, 375, 673);
					let imgUrl = that.backgroundImage;
					uni.downloadFile({
						url: imgUrl,
						success: (res) => {
							if (res.statusCode === 200) {
								console.log(that.config("APIHOST1") +
									'/app/invite/mpCreateQr?invitationCode=' + that.invitationCode)
								uni.downloadFile({
									url: that.config("APIHOST1") +
										'/app/invite/mpCreateQr?invitationCode=' + that
										.invitationCode,
									success: (res2) => {
										console.log(res2)
										uni.hideLoading();
										if (res.statusCode === 200) {
											ctx.drawImage(res.tempFilePath, 0, 0, 375,
												500);
											// 长按识别二维码访问
											let textTop = 0;
											ctx.setFontSize(19);
											ctx.setFillStyle('#333');
											ctx.fillText("长按识别图中二维码", 17, textTop + 590);
											// 二维码
											ctx.drawImage(res2.tempFilePath, 238, textTop +
												526, 120, 120);
											ctx.draw(true, () => {
												// canvas画布转成图片并返回图片地址
												uni.canvasToTempFilePath({
													canvasId: 'poster',
													width: 375,
													height: 673,
													success: (res) => {
														console.log(
															"海报制作成功！"
														);
														resolve(res
															.tempFilePath
														);
													},
													fail: () => {
														uni
															.hideLoading();
														reject();
													}
												})
											});
										} else {
											uni.hideLoading();
											uni.showToast({
												title: '海报制作失败，图片下载失败',
												icon: 'none'
											});
										}
									},
									fail: err => {
										console.log(err)
										uni.hideLoading();
										uni.showToast({
											title: '海报制作失败，图片下载失败',
											icon: 'none'
										});
									},
									complete: com => {
										console.log(com)
										uni.showToast({
											title: com,
											icon: 'none'
										});
									},
								});
							} else {
								uni.hideLoading();
								uni.showToast({
									title: '海报制作失败，图片下载失败',
									icon: 'none'
								});
							}
						},
						fail: err => {
							// that.yu.toast(err)
							console.log(err)
							uni.hideLoading();
							uni.showToast({
								title: '海报制作失败，图片下载失败',
								icon: 'none',
							});
						}
					});
				});
			},
			config: function(name) {
				var info = null;
				if (name) {
					var name2 = name.split("."); //字符分割
					if (name2.length > 1) {
						info = configdata[name2[0]][name2[1]] || null;
					} else {
						info = configdata[name] || null;
					}
					if (info == null) {
						let web_config = cache.get("web_config");
						if (web_config) {
							if (name2.length > 1) {
								info = web_config[name2[0]][name2[1]] || null;
							} else {
								info = web_config[name] || null;
							}
						}
					}
				}
				return info;
			},
		}
	}
</script>

<style lang="scss">
	.content {
		min-height: 100vh;
		/* background: linear-gradient(0deg, #FFFFFF 0%, #E5EEFF 51%); */
		background-image: url('https://zhaopin.xianmaxiong.com/file/uploadPath/2022/09/02/55ae353dccf567c61c08a1e8889fb723.png');
		background-size: 100% 120%;
		position: relative;
		z-index: 0;
	}

	/* #ifdef MP-WEIXIN */
	.headTop {
		position: relative;
		top: 300px;
		left: 0;
		right: 0;
	}

	/* #endif */
	/* #ifndef MP-WEIXIN */
	.headTop {
		position: relative;
		top: 380px;
		left: 0;
		right: 0;
	}

	/* #endif */


	.yaobox {

		background: #E4ECFF;
		border: 2upx solid #82A9FE;
		border-radius: 24upx;
		padding: 30upx;
		margin-top: 30upx;
		display: flex;
		/* align-items: center; */

	}

	.btn {
		background: #82A9FE;
		border-radius: 40upx;
		color: #FFFFFF;
		padding: 15upx 30upx;
	}

	.modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000upx;
		/* background: rgba(0, 0, 0, 0.6); */
		background: #FFFFFF;
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
	}

	.modal.show {
		opacity: 1;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}

	page {
		background: #FFFFFF;
	}

	.view1 {
		border-radius: 15upx;
		background-size: 100%;
		margin: 20upx 20upx 0 20upx;

	}

	.hideCanvasView {
		position: relative;
	}

	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}

	.flex_row_c_c {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.modalView {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		outline: 0;
		transform: scale(1.2);
		perspective: 2500upx;
		/* background: rgba(0, 0, 0, 0.6); */
		background: #FFFFFF;
		transition: all .3s ease-in-out;
		pointer-events: none;
		backface-visibility: hidden;
		z-index: 999;
	}

	.modalView.show {
		opacity: 1;
		transform: scale(1);
		pointer-events: auto;
	}

	.flex_column {
		display: flex;
		flex-direction: column;
	}

	.backgroundColor-white {
		background-color: white;
	}

	.border_radius_10px {
		border-radius: 10px;
	}

	.padding1vh {
		padding: 1vh;
	}

	.posterImage {
		width: 60vw;
	}

	.flex_row {
		display: flex;
		flex-direction: row;
	}

	.marginTop2vh {
		margin-top: 2vh;
	}

	.poster_canvas {
		width: 750upx;
		height: 1334upx;
		position: fixed;
		top: -10000upx;
		left: 0;
	}
</style>