<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.fileSynopsis}}
							</view>
							<view class="two">
								{{item.fileTitle}}
							</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>
		<view class="markBox" @click="shareTipsFlag=false" v-if="shareTipsFlag">
			<view class="guideImgBox">
				<image src="../../static/Group132.png" mode="widthFix"></image>
				<view class="tips">
					<view style="margin-bottom:30rpx">请点击右上角菜单</view>
					<view>分享给朋友</view>
				</view>
			</view>
		</view>
		
	</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 UQRCode from 'uqrcodejs';
	import { elementToImage  } from '@/util/htmlToImage';
	export default{
		name:'courselist',
		props:{
			showFlag:{
				type:Boolean,
				default:true
			},
			 cffpCourseInfos: {
			    type: Array,
			    default: () => []
			  }
		},
		components:{
			courseItem,
			tabBar,
			carousel,
			search,
			UniShareWx,
			BootPage,
			PartnerTipPopup,
			restrictedTip,
			sharePosterPop,
			loadingIcon
		},
		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/logo2.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/logo2.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'
					)
					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;
				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();
			  }
			},
			
			// 重试机制
			// retryGenerate() {
			//   if (this.retryCount < this.maxRetryCount) {
			//     this.retryCount++;
			//     const delay = 1000 * this.retryCount;
			//     console.log(`第${this.retryCount}次重试，${delay}ms后重试...`);
			    
			    
			    
			//     setTimeout(() => {
			//       this.generateQrcodeAndCapture();
			//     }, delay);
			//   } else {
			//     // uni.showToast({
			//     //   title: '生成分享图失败，请稍后再试',
			//     //   icon: 'none'
			//     // });
			//   }
			// },
			
			// 生成二维码
			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 = ''
			}
			
		},
		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>