<template>
	<!-- :style="{paddingTop: showFlag ? '0' : '60rpx'}" -->
	<view class="container" :style="{paddingTop: showFlag ? '0' : '60rpx'}">
		<!-- 禁用弹窗 -->
		<restrictedTip ref="restrictedTip" />
		<view class="homeHeader" v-if="showFlag">
			<view class="one">
				<text style="font-size: 80rpx;">01</text>
				<view class="titleTxt">
					<text>分享商品</text>
					<text class="iconfont icon-shuangyoujiantou iconOne"></text>
				</view>
			</view>
			<view class="two">
				<text>02</text>
				<view class="titleTxt">
					<text>好友购买</text>
					<text class="iconfont icon-shuangyoujiantou iconOne"></text>
				</view>
			</view>
			<view class="three">
				<text>03</text>
				<view class="titleTxt lastTxt">
					<text>首页佣金</text>
					<text>查看收益</text>
				</view>
			</view>
		</view>
		<!-- 家办商城跳cffp的分享功能 -->
		<!-- #ifdef H5 -->
		<!-- v-if="!generatedImage" -->
		<view class="generateImageBox" ref="captureElement" v-if="!generatedImage">
			<view class="imgBox">
				<img class="posterImg" @load="handleBgImageLoad" @error="handleBgImageError" style="display: block;"
					:src="sharePosterItem.fileFirstImage+'?t='+Math.random()" crossorigin="anonymous" alt="防缓存图片" />
			</view>
			<view class="txtBox">
				<view class="descriptionTxt">
					{{sharePosterItem.fileSynopsis}}
				</view>
				<view class="productNum">
					￥{{sharePosterItem.coursePrice}}
				</view>
				<view class="generateImageBottom">
					<view class="left">
						<view class="top">
							<view style="width: 100rpx;">
								<image :src="companyLogo" mode="widthFix"></image>
							</view>
							<text class="companyName">银盾家办</text>
						</view>
						<view class="bottom">
							识别二维码查看商品
						</view>
					</view>
					<!-- 二维码容器 -->
					<view class="qrcode-container">
						<canvas canvas-id="qrcode" class="qrcode-canvas"
							:style="{width: qrCodeSize + 'px', height: qrCodeSize + 'px'}"></canvas>
					</view>
				</view>
			</view>

		</view>
		<!-- #endif -->
		<view class="productBox">
			<view class="productList" :style="{marginTop}">
				<view class="tabBox">
					<view :class="{'actived': courseClassify==4}" @click="transform('consult')"><text>咨询产品</text></view>

					<view :class="{'actived': courseClassify==3}" @click="transform('plan')"><text>规划产品</text></view>
				</view>
				<view class="productItem" v-for="item in localCourseInfos" :key="item.fileId">
					<view class="top" @click="goDetail(item)">
						<view class="left">
							<image class="productImg" :src="item.displayImage" alt="" mode="widthFix"></image>
						</view>
						<view class="right">
							<view class="one">
								{{item.fileTitle}}
							</view>
							<view class="two">
								{{item.fileSynopsis}}
							</view>
							<view class="three">
								<text
									style="font-size: 28rpx;color: rgba(32, 39, 155, 1);">￥{{Number(item.coursePrice).toFixed(2)}}</text>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="bottomCon">
							<view class="left">
								最高可赚￥{{item.income || '0.00'}}
							</view>
							<view class="right" @click="gotoShare(item)">
								<loadingIcon :loading="isLoading"
									v-if="isLoading&&(sharePosterItem.fileId==item.fileId)" />
								<text style="margin-left: 5rpx;">去分享</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<BootPage loginSource="产品中心" ref="sharelogin" v-if="sharelogin" @close="closeLogin">
		</BootPage>
		<!-- 海报弹窗 -->
		<sharePosterPop ref="sharePosterPop" :generatedImage="generatedImage" @closePoster="closePoster"
			:sharePosterUrl="qrCodeUrl" :sharePosterObj="sharePosterObj"></sharePosterPop>
		<uni-popup ref="popup" type="center" background-color="#fff">
			<view class="descriptionBox">
				<view class="imageBox">
					<text>关注公众号</text>
					<text class="subTit">通知实时提醒，及时接收下单和提现通知</text>
				</view>
				<view class="codeBox">
					<image v-if="sourceType == '1'" src="@/static/cffpCode.jpg" mode="widthFix"
						style="width:250rpx !important;"></image>
					<image v-if="sourceType == '4'" src="@/static/ydCode.jpg" mode="widthFix"
						style="width:250rpx !important;"></image>
					<image v-if="sourceType == '3'" src="@/static/ydHomeOfficeCode.jpg" mode="widthFix"
						style="width:250rpx !important;"></image>
				</view>
				<view class="description">
					扫一扫，关注公众号
				</view>
			</view>

		</uni-popup>
		<!-- 添加合伙人提示弹窗组件 -->
		<partner-tip-popup ref="partnerTipPopup" @join="gotoJoinPartner" @continue="continueShare" />
		<uni-share-wx ref="sharewx"></uni-share-wx>
		<!-- 分享得向导图 -->
		<ShareGuide :show.sync="shareTipsFlag" @close="shareTipsFlag=false"></ShareGuide>
	</view>
	<!-- <tabBar :currentPage="currentPage" v-if="onlyShowList!=0"></tabBar> -->
</template>

<script>
	import BootPage from "@/components/bootpage/bootpage.vue";
	import PartnerTipPopup from "@/components/commonPopup/PartnerTipPopup.vue";
	import api from "../../api/api";
	import courseItem from "@/components/courseItem/courseItem.vue";
	import tabBar from '../../components/tabBar/tabBar.vue';
	import carousel from '@/components/carousel/carousel.vue';
	import search from '@/components/search/search.vue';
	import { baseURL, apiURL, cffpURL, companyInfo, shareURL } from "@/environments/environment";
	import dataHandling from "@/util/dataHandling";
	import { hshare, setWechatShare, initJssdkShare } from '@/util/fiveshare';
	import UniShareWx from "@/uni_modules/uni-share-wx/index.vue";
	import { nanoid } from 'nanoid';
	import restrictedTip from '@/components/commonPopup/restrictedTip.vue';
	import sharePosterPop from '@/components/commonPopup/sharePosterPop.vue';
	import loadingIcon from '@/components/loading/loading.vue';
	import ShareGuide from '@/components/ShareGuide/ShareGuide.vue';
	import UQRCode from 'uqrcodejs';
	import wx from 'weixin-js-sdk'
	import { elementToImage } from '@/util/htmlToImage';
	export default {
		name: 'courselist',
		props: {
			showFlag: {
				type: Boolean,
				default: true
			},
			cffpCourseInfos: {
				type: Array,
				default: () => []
			},
			pageSource: {
				type: String,
				default: 'courselist'
			}
		},
		components: {
			courseItem,
			tabBar,
			carousel,
			search,
			UniShareWx,
			BootPage,
			PartnerTipPopup,
			restrictedTip,
			sharePosterPop,
			loadingIcon,
			ShareGuide
		},
		watch: {
			// 监听 prop 变化，更新本地副本
			cffpCourseInfos: {
				immediate: true, // 立即执行一次
				handler(newVal) {
					this.localCourseInfos = [...newVal]; // 深拷贝（如果是简单数组，浅拷贝也行）
				},
			},
		},
		data() {
			return {
				localCourseInfos: [], // 本地副本
				currentPage: 'courselist',
				fileUploadItemCFFPList: [],
				queryName: null,
				userId: uni.getStorageSync('cffp_userId'),
				userInfo: {},
				runEnv: dataHandling.getRuntimeEnv(), //运行的环境  browser、app、h5
				shareTipsFlag: false,
				sourceType: '1', //根据来源展示二维码 默认是cffp,
				env: dataHandling.getRuntimeEnv2(),
				shareItem: {}, //分享的产品
				sharelogin: false,
				courseClassify: 4,
				posterImg: 'https://yindun-images.oss-cn-shanghai-finance-1-pub.aliyuncs.com/ydMall/product/serviceContent-zx_jqsw1-1.png',

				qrCodeUrl: 'https://example.com', //二维码的链接地址
				qrCodeSize: 100, //二维码的尺寸
				companyLogo: '../../static/suplogo.png',
				generatedImage: '', //生成的海报图片
				sharePosterObj: {}, //海报分享数据
				sharePosterItem: { fileFirstImage: '' },
				isLoading: false
			}
		},
		onLoad() {
			this.queryName = uni.getStorageSync('queryName') || '';
			this.sourceType = uni.getStorageSync('addSystemType') || '1';
			if (companyInfo.companyType == '1') {
				this.companyLogo = '../../static/myteam/Group1633.png';
			} else if (this.companyType == '2') {
				this.companyLogo = '../../static/suplogo.png';
			}

		},
		
		onShow() {
			this.isLoading = false
			this.generatedImage = ''
			this.sharePosterItem = { fileFirstImage: '' }
			this.queryName = uni.getStorageSync('queryName') || '';
			this.courseList();
			this.sourceType = uni.getStorageSync('addSystemType') || '1';
			if (uni.getStorageSync('cffp_userInfo')) {
				this.userInfo = JSON.parse(uni.getStorageSync('cffp_userInfo'))
			}
			this.userId = uni.getStorageSync('cffp_userId')
			// #ifdef H5
			initJssdkShare(() => {
				setWechatShare();
			}, window.location.href);
			// #endif

		},
		created() {
			this.queryName = uni.getStorageSync('queryName') || '';
			this.courseList();
			// 初始化本地副本
			this.localCourseInfos = [...this.cffpCourseInfos];
			this.sourceType = uni.getStorageSync('addSystemType') || '1';
			if (uni.getStorageSync('cffp_userInfo')) {
				this.userInfo = JSON.parse(uni.getStorageSync('cffp_userInfo'))
			}
		},
		computed: {
			marginTop() {
				if (this.env.device.isMobile) {
					return '-5%'
				} else {
					return '-1.5%'
				}
			}
		},

		methods: {
			transform(value) {
				if (value == 'consult') {
					this.courseClassify = 4
				} else if (value == 'plan') {
					this.courseClassify = 3
				}
				this.$emit('changeCourseClassify', this.courseClassify)
				this.courseList()
			},
			gotoJoinPartner() {
				dataHandling.pocessTracking(
					'点击',
					`用户在产品中心未加盟时点击了加盟按钮`,
					'点击',
					2,
					'产品中心',
					'pages/courselist/courselist'
				)
				uni.navigateTo({
					url: '/myPackageA/applyFranchise/applyFranchise'
				})
				this.$refs.partnerTipPopup.close()
			},
			gotoShare(item) {
				if (uni.getStorageSync('cffp_userInfo')) {
					this.userInfo = JSON.parse(uni.getStorageSync('cffp_userInfo'))
				}
				// return
				// 未登录去登录
				if (uni.getStorageSync('loginType') !== 'codelogin') {
					dataHandling.pocessTracking(
						'点击',
						`用户在产品中心未登录时点击产品分享按钮`,
						'点击',
						2,
						'产品中心',
						'pages/courselist/courselist'
					)
					if (dataHandling.h5RuntimeEnv() == 'wechat-miniprogram') {
						this.jumpMplogin()
						return
					}
					this.sharelogin = true
					return
				}
				this.shareItem = JSON.parse(JSON.stringify(item))
				// 已登录，未成为合伙人
				if (this.userInfo && !this.userInfo['partnerType']) {
					dataHandling.pocessTracking(
						'点击',
						`用户在产品中心未加盟时点击产品分享按钮`,
						'点击',
						2,
						'产品中心',
						'pages/courselist/courselist'
					)
					this.$refs.partnerTipPopup.open()
					return
				}
				if (this.runEnv == 'browser') {
					dataHandling.pocessTracking(
						'点击',
						`用户在产品中心浏览器端点击产品分享按钮`,
						'点击',
						2,
						'产品中心',
						'pages/courselist/courselist'
					)
					this.$refs.popup.open()
					return
				}

				this.continueShare()
			},
			continueShare() {
				this.userId = uni.getStorageSync('cffp_userId')
				const shareCode = nanoid() + this.userId
				const jumptime = Date.parse(new Date()) / 1000

				// if (uni.getStorageSync('mpCffp')) {
				// 	this.isLoading = true
				// 	this.sharePosterItem = JSON.parse(JSON.stringify(this.shareItem))
				// 	let newLink = shareURL + "/pages/courseDetail/courseDetail?fileId=" + this.shareItem.fileId +
				// 		'&coursesharing=1' + '&serialsNo=' + nanoid() + '&shareCode=' + shareCode + '&shareUserId=' +
				// 		this.userId + '&jumpUrl=' + jumptime + "&" //分享链接

				// 	this.qrCodeUrl = newLink
				// 	this.submitsuessc(shareCode, jumptime, this.shareItem)
				// 	return
				// }
				//app分享 
				// #ifdef APP-PLUS
				let dataWXform = {
					href: shareURL + "/pages/courseDetail/courseDetail?fileId=" + this.shareItem.fileId +
						'&coursesharing=1' + '&serialsNo=' + nanoid() + '&shareCode=' + shareCode + '&shareUserId=' +
						this.userId + '&jumpUrl=' + jumptime + "&",
					title: this.shareItem.fileTitle,
					summary: this.shareItem.fileSynopsis,
					imageUrl: this.shareItem.displayImage,
					fileId: this.shareItem.fileId,
					shareCode: shareCode
				}
				this.$refs.sharewx.open(dataWXform)
				dataHandling.pocessTracking(
					'点击',
					`用户在产品中心点击分享按钮，分享${this.shareItem.fileTitle}`,
					'点击',
					2,
					'产品中心',
					'pages/courselist/courselist'
				)
				// #endif

				//#ifdef H5
				this.shareTipsFlag = true;
				if (dataHandling.h5RuntimeEnv() == 'wechat-miniprogram') {
					let shareInfo = {
						title: this.shareItem.fileTitle,
						desc: this.shareItem.fileSynopsis,
						link: `${shareURL}/pages/lanch/index?fileId=${this.shareItem.fileId}&coursesharing=1&serialsNo=${nanoid()}&shareCode=${shareCode}&shareUserId=${this.userId}&jumpUrl=${jumptime}&landingPage=courseDetail&miniShare=1`,
						imgUrl: this.shareItem.displayImage, //图片
						commonId: this.shareItem.fileId,
						sharePage: 'courseDetail', //分享出去得页面
						userId:this.userId,
						fileId:this.shareItem.fileId,
						shareCode:shareCode,
						isSaveShare:'1',//是否存贮分享便于统计分享数据
					}
					wx.miniProgram.postMessage({
						data: {
							type: 'share',
							shareData: JSON.stringify(shareInfo),
							messageId: nanoid()  // 唯一消息ID
						}

					})
					
					return
				}
				this.getshareData2(shareCode, jumptime, this.shareItem)
				// #endif
				this.$refs.partnerTipPopup.close()
			},

			getshareData2(shareCode, jumptime, item) {
				let data = {
					title: item.fileTitle,
					// desc: '加入我们开启学习之旅',
					desc: item.fileSynopsis,
					link: shareURL + "/pages/courseDetail/courseDetail?fileId=" + item.fileId +
						'&coursesharing=1' + '&serialsNo=' + nanoid() + '&shareCode=' + shareCode + '&shareUserId=' +
						this.userId + '&jumpUrl=' + jumptime + "&", //分享链接
					imgUrl: item.displayImage, //图片
				}
				//安卓机型获取当前页面路径
				let url = window.location.href.split('#')[0];

				//ios机型获取当前页面路径
				let ua = navigator.userAgent.toLowerCase();
				let isWeixin = ua.indexOf('micromessenger') !== -1;
				if (isWeixin) {
					let isiOS = /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent); //ios终端
					if (isiOS && window.sessionStorage.getItem('firstEntryUrl')) {
						url = window.sessionStorage.getItem('firstEntryUrl').split('#')[0];
					}
				}
				setTimeout(() => {
					initJssdkShare(() => {
						setWechatShare(data);
					}, url);
				}, 500)

				// hshare(data, url)

				this.submitsuessc(shareCode, jumptime, item)
				dataHandling.pocessTracking(
					'点击',
					`用户在产品中心点击分享按钮，分享${item.fileTitle}`,
					'点击',
					2,
					'产品中心',
					'pages/courselist/courselist'
				)

			},
			submitsuessc(shareCode, jumptime, item) {
				let platform = uni.getSystemInfoSync().platform
				let UserShareRequestVO = {
					systemType: platform == 'ios' ? '1' : '0',
					userId: uni.getStorageSync('cffp_userId'),
					businessType: '1', // 分享类型
					businessId: item.fileId, // 课程Id
					shareUrl: shareURL + "/pages/courseDetail/courseDetail?fileId=" + item.fileId +
						'&coursesharing=1' + '&serialsNo=' + nanoid() + '&shareCode=' + shareCode + '&shareUserId=' +
						this.userId + '&jumpUrl=' + jumptime + "&", // 分享链接
					shareType: '2', // 分享类型(1:图片分享; 2:链接分享)
					shareToWhere: 3, //分享到哪儿（1好友 2朋友圈）
					shareCode: shareCode
				}
				api.userShare(UserShareRequestVO).then(res => {
					if (res['success']) {
						// #ifdef H5
						initJssdkShare(() => {
							setWechatShare();
						}, window.location.href);
						// #endif
						// uni.showToast({
						// 	title: '分享成功',
						// 	duration: 2000
						// });
					}
				})
			},
			closeLogin(val1, val2, val3) {
				if (val3) {
					this.sharelogin = false
					return
				}
				if (uni.getStorageSync('cffp_userInfo')) {
					this.userInfo = JSON.parse(uni.getStorageSync('cffp_userInfo'))
				}
				this.sharelogin = false
				if (this.runEnv == 'browser') {
					dataHandling.pocessTracking(
						'点击',
						`用户在产品中心浏览器端点击产品分享按钮`,
						'点击',
						2,
						'产品中心',
						'pages/courselist/courselist'
					)
					this.$refs.popup.open()
					return
				} else {
					// 已登录，未成为合伙人
					if (!this.userInfo['partnerType']) {
						dataHandling.pocessTracking(
							'点击',
							`用户在产品中心未加盟时点击产品分享按钮`,
							'点击',
							2,
							'产品中心',
							'pages/courselist/courselist')
						this.$refs.partnerTipPopup.open()
						return
					}
					this.continueShare()
				}
			},
			goDetail(item) {
				dataHandling.pocessTracking(
					'点击',
					`用户在产品中心点击${item.fileTitle},查看产品详情`,
					'点击',
					2,
					'产品中心',
					'pages/courselist/courselist'
				)
				uni.setStorageSync('posterItem', item)
				uni.navigateTo({
					url: `/pages/courseDetail/courseDetail?fileId=${item.fileId}`
				});
			},
			courseList() {
				console.log('执行了');
				const param = {
					queryName: this.queryName,
					courseClassify: this.courseClassify
				}
				api.courseList(param).then(res => {
					if (res['success']) {
						this.localCourseInfos = res['data']['data']; // 修改本地副本


					}
				})

			},

			queryAreaCenterInfo() {
				api.queryAreaCenterInfo({
					userId: uni.getStorageSync('cffp_userId'),
					companyType: `${companyInfo.companyType}`
				}).then((res) => {
					if (res['success']) {
						uni.setStorageSync('fileUploadItemCFFPList', res['data']['fileUploadItemCFFPList'])

						this.fileUploadItemCFFPList = uni.getStorageSync('fileUploadItemCFFPList');
					}
				})
			},

			// 背景图片加载成功
			handleBgImageLoad() {
				this.generateQrcodeAndCapture();
			},

			// 背景图片加载失败
			handleBgImageError() {
				console.log('产品图片加载完成');
				// 即使失败也继续流程，可能会有默认背景
				// this.generateQrcodeAndCapture();
			},

			// 顺序执行：生成二维码 -> 截图
			async generateQrcodeAndCapture() {
				try {
					uni.showLoading({
						title: '准备生成分享图...'
					});

					// 1. 先生成二维码
					console.log('开始生成二维码...');
					await this.makeQrcode();
					console.log('二维码生成完成');

					// 2. 等待500ms确保渲染完成
					await new Promise(resolve => setTimeout(resolve, 2000));

					// 3. 执行截图
					console.log('开始截图...');
					await this.captureImage();
					console.log('截图完成');

					uni.hideLoading();
				} catch (error) {
					console.error('生成分享图失败:', error);
					uni.hideLoading();
					// this.retryGenerate();
				}
			},



			// 生成二维码
			makeQrcode() {
				return new Promise((resolve, reject) => {
					// 创建实例
					const qr = new UQRCode();

					// 设置二维码内容
					qr.data = this.qrCodeUrl;

					// 设置二维码大小
					qr.size = this.qrCodeSize;

					// 设置前景色（二维码颜色）
					qr.foregroundColor = '#000000';

					// 设置背景色
					qr.backgroundColor = '#FFFFFF';

					// 设置边距
					qr.margin = 10;

					// 设置纠错等级
					qr.errorCorrectLevel = UQRCode.errorCorrectLevel.H;

					try {
						// 调用制作二维码方法
						qr.make();

						// 获取canvas上下文
						const ctx = uni.createCanvasContext('qrcode', this);

						// 清空画布
						ctx.clearRect(0, 0, this.qrCodeSize, this.qrCodeSize);

						// 将二维码绘制到canvas上
						qr.canvasContext = ctx;
						qr.drawCanvas();

						// 绘制完成
						ctx.draw(true, () => {
							console.log('二维码绘制完成');
							resolve();
						});
					} catch (err) {
						reject(err);
					}
				});
			},

			// 截图方法
			async captureImage() {
				try {
					uni.showLoading({
						title: '正在生成图片...'
					});

					// 获取DOM元素（在H5环境下）
					const element = this.$refs.captureElement.$el;
					// 调用工具函数生成图片
					const imageData = await elementToImage(element);
					this.generatedImage = imageData
					this.isLoading = false
					this.$refs.sharePosterPop.toggleDropdown()

					// 压缩图片
					// const compressedImage = await this.compressImage(imageData);

					// this.generatedImage = compressedImage;
				} catch (error) {
					console.error('截图失败:', error);
					throw error; // 抛出错误以便外部捕获
				} finally {
					uni.hideLoading();
				}
			},
			compressImage(base64) {
				return new Promise((resolve) => {
					const img = new Image();
					img.src = base64;
					img.onload = () => {
						const canvas = document.createElement('canvas');
						const ctx = canvas.getContext('2d');

						// 设置压缩后的宽高
						const maxWidth = 800;
						const maxHeight = 1200;
						let width = img.width;
						let height = img.height;

						if (width > maxWidth) {
							height *= maxWidth / width;
							width = maxWidth;
						}

						if (height > maxHeight) {
							width *= maxHeight / height;
							height = maxHeight;
						}

						canvas.width = width;
						canvas.height = height;
						ctx.drawImage(img, 0, 0, width, height);

						// 降低质量
						resolve(canvas.toDataURL('image/jpeg', 0.7));
					};
				});
			},
			// 关闭海报弹窗
			closePoster() {
				this.sharePosterItem = {
					fileFirstImage: ""
				}
				this.generatedImage = ''
			},
			jumpMplogin() {
				let currentUrl =
					`${shareURL}/pages/lanch/index?landingPage=${this.pageSource}&noShare=1`;
				console.log('获取页面路径');
				

				let data = {
					type: 'login',
					h5SystemType: 'cffp',
					link: encodeURIComponent(currentUrl),
				}
				wx.miniProgram.postMessage({
					data: {
						type: 'login',
						shareData: JSON.stringify(data)
					}

				})
				wx.miniProgram.navigateBack({
					delta: 1
				})
			}

		},
		mounted() {
			this.fileUploadItemCFFPList = uni.getStorageSync('fileUploadItemCFFPList');
			if (!this.fileUploadItemCFFPList) {
				this.queryAreaCenterInfo();
			}
			// this.courseList();
		},
		onTabItemTap() {
			// 通过tabbar切换时清空storage
			uni.removeStorageSync('queryName');
		},
		onHide() {
			this.queryName = ''
			uni.removeStorageSync('queryName')
			this.$nextTick(() => {
				this.$refs.sharePosterPop.closeDropdown()
			})
		},

	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		background-color: rgba(235, 239, 247, 1);
		display: flex;
		flex-direction: column;
		width: 100%;
		height: auto;
		box-sizing: border-box;

		.generateImageBox {
			position: absolute;
			top: -100%;
			z-index: -1;
			border-radius: 20rpx;
			width: 100%;
			box-sizing: border-box;
			background-color: #fff;

			.imgBox {
				box-sizing: border-box;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx;

				.posterImg {
					width: 900rpx;
					height: 900rpx;
				}

			}

			.txtBox {
				padding: 20rpx;

				.descriptionTxt {
					font-size: 45rpx;
				}

				.productNum {
					font-size: 45rpx;
					font-weight: 500;
					margin: 10rpx 0;
					color: rgba(255, 74, 50, 1);
				}

				.generateImageBottom {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						min-width: 500rpx;

						.top {
							width: 100%;
							display: flex;
							align-items: center;

							image {
								width: 100%;
							}

							.companyName {
								min-width: 300rpx;
								color: #333;
								font-size: 35rpx;
							}
						}

						.bottom {
							font-size: 30rpx;
							color: #999;
							margin-top: 10rpx;
							font-weight: 500;
						}
					}

					.qrcode-container {

						background: #fff;
						padding: 10rpx;
						border-radius: 10rpx;
						box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);

						.qrcode-canvas {
							display: block;
						}
					}
				}
			}

		}

		.preview-container {
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx;
			margin-bottom: 100rpx;

			.preview-image {
				width: 100%;
			}
		}

		.tabBox {
			display: flex;
			align-items: center;
			height: 88rpx;
			margin-bottom: 20rpx;
			background: #fafafa;
			border-bottom: 1px solid #262088;

			view {
				color: #000;
				width: 160rpx;
				height: 100%;
				text-align: center;
				margin-right: 30rpx;
				line-height: 88rpx;

				&.actived {
					background-color: #262088;
					color: #fff;
				}
			}
		}

		.homeHeader {
			box-sizing: border-box;
			width: 100%;
			background: linear-gradient(225deg, rgba(65, 69, 188, 1) 0%, rgba(29, 30, 125, 1) 100%);
			padding: 30rpx 0 100rpx 0;
			color: rgba(255, 255, 255, .3);
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 80rpx;
			height: 300rpx;

			view {
				width: 33%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				.titleTxt {
					box-sizing: border-box;
					position: absolute;
					width: 100%;
					left: 50%;
					transform: translate(-50%);
					bottom: -20%;
					font-size: 28rpx;
					color: #fff;

					.icon-shuangyoujiantou {
						font-size: 26rpx;
						position: absolute;
						right: 0;

					}
				}

				.lastTxt {
					display: flex;
					align-items: center;
					flex-direction: column;
					bottom: -40%;
					line-height: 1.3;
				}
			}

		}

		.productBox {
			flex: 1;
			width: 100%;
			padding: 0rpx 15rpx;
			box-sizing: border-box;

			.productList {
				width: 100%;
				box-sizing: border-box;
				background-color: #fff;
				padding: 20rpx;
				border-radius: 10rpx;
				margin-bottom: 150rpx;

				.productItem {
					padding-bottom: 15rpx;
					border-bottom: 1rpx solid rgba(238, 238, 240, 1);
					margin-bottom: 20rpx;

					.top {
						display: flex;
						justify-content: flex-start;

						.left {
							width: 220rpx;
							flex-shrink: 0;
							/* 防止左侧被压缩 */
							margin-right: 20rpx;

							.productImg {
								border-radius: 20rpx;
								width: 100%;
								height: 180rpx;
								/* 固定图片高度 */
								display: block;
							}
						}

						.right {
							flex: 1;
							/* 右侧占据剩余空间 */
							min-width: 0;
							/* 允许文本截断 */
							display: flex;
							flex-direction: column;

							.one {
								font-size: 30rpx;
								font-weight: 500;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								/* 确保不会换行 */
							}

							.two {
								font-size: 24rpx;
								margin: 10rpx 0;
							}

							.three {
								font-size: 28rpx;
								color: rgba(32, 39, 155, 1);
								margin-top: auto;
								/* 关键代码：自动顶部边距，推到底部 */
							}
						}
					}

					.bottom {
						box-sizing: border-box;
						margin: 10rpx 0;
						width: 100%;
						padding-left: 240rpx;

						.bottomCon {
							box-sizing: border-box;
							width: 100%;
							background: rgba(54, 57, 169, 0.05);
							border-radius: 10rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.left {
								padding: 15rpx 0rpx 15rpx 20rpx;
								font-size: 26rpx;
								color: rgba(34, 35, 133, 1);
							}

							.right {
								display: flex;
								align-items: center;
								justify-content: center;
								padding: 15rpx 10rpx 15rpx 15rpx;
								background: rgba(36, 37, 137, 1);

								font-size: 27rpx;
								color: #fff;
								border-radius: 0 10rpx 10rpx 0rpx;
								/* 左上 右上 右下 左下 */
							}
						}
					}
				}

				.productItem:last-child {
					border: none;
				}
			}

			/* 电脑端 */
			@media (min-width: 768px) {
				.productList {
					// padding-top: 60rpx;
				}
			}
		}

		.descriptionBox {
			width: 510rpx;
			padding: 40rpx;

			.popupClose {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.icon-guanbi {
					font-size: 28rpx;

				}
			}

			.imageBox {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				font-size: 32rpx;
				font-weight: 600;

				.subTit {
					font-size: 28rpx;
					color: #919094;
					margin: 15rpx 0;
					font-weight: 400;
				}
			}

			.codeBox {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 250rpx;
			}

			.description {
				color: rgba(56, 56, 56, 1);
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.markBox {
			position: fixed;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			height: 100%;
			color: #fff;
			display: flex;
			justify-content: flex-end;
			z-index: 100000;
			background: rgba(0, 0, 0, 0.8);

			.guideImgBox {
				margin: 20px auto;

				uni-image {
					width: 25% !important;
					position: absolute;
					right: 0;
					top: 0;
				}
			}

			.tips {
				margin-top: 30%;
				padding: 0 30px;
			}
		}

		.joinContent {
			width: 600rpx;
			border-radius: 30rpx;
			background-color: #ffff;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			flex-direction: column;

			.joinHeader {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background: rgba(54, 57, 169, 1);
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;
			}

			.joinCon {
				margin-bottom: 20rpx;

				.one {
					font-size: 28rpx;
					color: rgba(38, 41, 44, 1);

					text-align: center;
				}

				.two {
					color: rgba(145, 144, 148, 1);
					font-size: 26rpx;
					text-align: center;
					margin-top: 10rpx;
					margin-bottom: 20rpx;
				}
			}

			.joinFotter {
				width: 100%;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 10rpx 0;
				font-size: 24rpx;

				view {
					background: rgba(54, 57, 169, 1);
					border-radius: 10rpx;
					padding: 10rpx;
				}
			}
		}
	}

	.container {
		padding-top: 60rpx;

		.homeHeader {
			padding-bottom: 100rpx;
			position: relative;
			z-index: 1;
		}

		.productBox {
			position: relative;
			z-index: 2;

			.productList {
				padding-top: 30rpx; // 改用padding-top
				margin-top: 0;

				.productItem {
					&:first-child {
						margin-top: 0;
					}
				}
			}
		}
	}

	/* iPad横屏特定适配 */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
		.container {
			.homeHeader {
				padding-bottom: 120rpx;
			}

			.productBox {
				.productList {
					padding-top: 50rpx;
				}
			}

			.generateImageBox {
				max-width: 950rpx !important;

				.descriptionTxt {
					font-size: 33rpx !important;
				}

				.txtBox {
					.generateImageBottom {
						.left {
							width: 60% !important;

							.top {
								width: 100%;

								.companyName {
									min-width: 200rpx !important;
									font-size: 30rpx !important;
								}
							}

							.bottom {
								font-size: 28rpx !important;
							}
						}
					}
				}
			}
		}
	}

	/* 所有iPad竖屏 */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {

		/* 竖屏样式 */
		.generateImageBox {
			max-width: 950rpx !important;

			.descriptionTxt {
				font-size: 33rpx !important;
			}

			.txtBox {
				.generateImageBottom {
					.left {
						width: 60% !important;

						.top {
							width: 100%;

							.companyName {
								min-width: 200rpx !important;
								font-size: 30rpx !important;
							}
						}

						.bottom {
							font-size: 28rpx !important;
						}
					}
				}
			}
		}
	}
</style>