banma/pages/index/index.vue

<template>
	<view class="">
		<view class="btn" @click="takephotos">
			点击保存
		</view>
		<view class="swiperBox">
			<swiper duration="100" :style="{height: swiperHeight+'px'}" @change='swiperChange' :current="current"
				:indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in list" :key="index">
					<view class="swiper-item swiper-itemcopy" :id='"copyswiperItem"+index'>
						<view class="titleBox" :style="{background: 'url('+BASE_URL+jt_bg1+')'}">
							<!-- <image :src="BASE_URL+item.qrimage" mode=""></image> -->
							<limeQrcodeVue ref="qrcodeRef" :value="BASE_URL1+'/h5/#/pages/deal/productInfo?id='+item.id" size="112rpx" ></limeQrcodeVue>
							<view class="title">
								<p>{{item.title1}}</p>
								<p>{{item.title2}}</p>
								<p class="warn">{{item.title3}}</p>
							</view>
							<!-- <image class="jtbj" src="../../static/logo.png" mode=""></image> -->
						</view>
						<view class="content"  :style="{background: 'url('+BASE_URL+jt_bg2+')'}">
							<view class="" :id='"copycontent"+index'>
								
							</view>
							<view class="watermark"
								v-if="item.watermark_info&&item.watermark_info.type==1||item.watermark_info&&item.watermark_info.type==3">
							
								<view v-for="it in 9" class=""
									:style="{transform: 'rotate('+item.watermark_info.angle+'deg)',opacity:(100-item.watermark_info.opacity*1)*0.01,color:item.watermark_info.color,marginTop:item.watermark_info.hh+'px',marginBottom:item.watermark_info.hh+'px',marginLeft:item.watermark_info.ww+'px',marginRight:item.watermark_info.ww+'px',fontSize:item.watermark_info.text_font+'px',fontWeight:item.watermark_info.bold==1?'bold':'',fontFamily:item.watermark_info.typeface==1?'typeface1':item.watermark_info.typeface==2?'typeface2':item.watermark_info.typeface==3?'typeface3':item.watermark_info.typeface==4?'typeface4':item.watermark_info.typeface==5?'typeface5':item.watermark_info.typeface==6?'typeface6':''}">
									<image :src="BASE_URL+item.watermark_info.image" mode="" v-if="item.watermark_info.image&&item.watermark_info.type==1"></image>
									<text
										v-if="item.watermark_info.water_text&&item.watermark_info.type==3">{{item.watermark_info.water_text}}</text>
								</view>
							</view>
							<view class="watermark1"
								:style="{left:item.watermark_info.waterPos==0?0:item.watermark_info.waterPos==1?0:item.watermark_info.waterPos==4?0:item.watermark_info.waterPos==7?0:item.watermark_info.waterPos==2?'40%':item.watermark_info.waterPos==5?'40%':item.watermark_info.waterPos==8?'40%':'',top:item.watermark_info.waterPos==0?0:item.watermark_info.waterPos==1?0:item.watermark_info.waterPos==2?0:item.watermark_info.waterPos==3?0:item.watermark_info.waterPos==4?'40%':item.watermark_info.waterPos==5?'40%':item.watermark_info.waterPos==6?'40%':'',right:item.watermark_info.waterPos==3?0:item.watermark_info.waterPos==6?0:item.watermark_info.waterPos==9?0:'',bottom:item.watermark_info.waterPos==7?0:item.watermark_info.waterPos==8?0:item.watermark_info.waterPos==9?0:'',fontWeight:item.watermark_info.bold==1?'bold':'',fontFamily:item.watermark_info.typeface==1?'typeface1':item.watermark_info.typeface==2?'typeface2':item.watermark_info.typeface==3?'typeface3':item.watermark_info.typeface==4?'typeface4':item.watermark_info.typeface==5?'typeface5':item.watermark_info.typeface==6?'typeface6':''}"
								v-if="item.watermark_info&&item.watermark_info.type==2||item.watermark_info&&item.watermark_info.type==4">
							
								<view class=""
									:style="{transform: 'rotate('+item.watermark_info.angle+'deg)',opacity:(100-item.watermark_info.opacity*1)*0.01,color:item.watermark_info.color,fontSize:item.watermark_info.text_font+'px'}">
									<image :src="BASE_URL+item.watermark_info.image" mode=""
										v-if="item.watermark_info.image&&item.watermark_info.type==2"></image>
									<text
										v-if="item.watermark_info.water_text&&item.watermark_info.type==4">{{item.watermark_info.water_text}}</text>
								</view>
							</view>
							
						</view> 
					</view>
					<view class="swiper-item" :id='"swiperItem"+index'>
						<view class="titleBox" :style="{background: 'url('+BASE_URL+jt_bg1+')'}">
						<!-- <view class="titleBox"> -->
							<!-- <image :src="BASE_URL+item.qrimage" mode=""></image> -->
							<limeQrcodeVue ref="qrcodeRef" :value="BASE_URL1+'/h5/#/pages/deal/productInfo?id='+item.id"
								size="112rpx"></limeQrcodeVue>
							<view class="title">
								<p>{{item.title1}}</p>

								<p>{{item.title2}}</p>
								<p class="warn">{{item.title3}}</p>
							</view>
						</view>
						<view class="content"  v-if="item.detail" :style="{background: 'url('+BASE_URL+jt_bg2+')'}">
							<view class="" :id='"content"+index'>
								<u-parse :content="item.detail"></u-parse>
							</view>
							
							<view class="watermark"
								v-if="item.watermark_info&&item.watermark_info.type==1||item.watermark_info&&item.watermark_info.type==3">

								<view v-for="it in 100" class=""
									:style="{transform: 'rotate('+item.watermark_info.angle+'deg)',opacity:(100-item.watermark_info.opacity*1)*0.01,color:item.watermark_info.color,marginTop:item.watermark_info.hh+'px',marginBottom:item.watermark_info.hh+'px',marginLeft:item.watermark_info.ww+'px',marginRight:item.watermark_info.ww+'px',fontSize:item.watermark_info.text_font+'px',fontWeight:item.watermark_info.bold==1?'bold':'',fontFamily:item.watermark_info.typeface==1?'typeface1':item.watermark_info.typeface==2?'typeface2':item.watermark_info.typeface==3?'typeface3':item.watermark_info.typeface==4?'typeface4':item.watermark_info.typeface==5?'typeface5':item.watermark_info.typeface==6?'typeface6':''}">
									<image :src="BASE_URL+item.watermark_info.image" mode=""
										v-if="item.watermark_info.image&&item.watermark_info.type==1"></image>
									<text
										v-if="item.watermark_info.water_text&&item.watermark_info.type==3">{{item.watermark_info.water_text}}</text>
								</view>
							</view>
							<view class="watermark1"
								:style="{left:item.watermark_info.waterPos==0?0+item.watermark_info.xx+'px':item.watermark_info.waterPos==1?0+item.watermark_info.xx+'px':item.watermark_info.waterPos==4?0+item.watermark_info.voffset+'px':item.watermark_info.waterPos==7?0+item.watermark_info.xx+'px':item.watermark_info.waterPos==2?'calc( 40%'+' + '+item.watermark_info.xx+'px )':item.watermark_info.waterPos==5?'calc( 40%'+' + '+item.watermark_info.voffset+'px )':item.watermark_info.waterPos==8?'calc( 40%'+' + '+item.watermark_info.xx+'px )':'',top:item.watermark_info.waterPos==0?0+item.watermark_info.yy+'px':item.watermark_info.waterPos==1?0+item.watermark_info.yy+'px':item.watermark_info.waterPos==2?0+item.watermark_info.yy+'px':item.watermark_info.waterPos==3?0+item.watermark_info.yy+'px':item.watermark_info.waterPos==4?'40%':item.watermark_info.waterPos==5?'40%':item.watermark_info.waterPos==6?'40%':'',right:item.watermark_info.waterPos==3?0+item.watermark_info.xx+'px':item.watermark_info.waterPos==6?0+item.watermark_info.waterPos+'px':item.watermark_info.waterPos==9?0+item.watermark_info.xx+'px':'',bottom:item.watermark_info.waterPos==7?0+item.watermark_info.xx+'px':item.watermark_info.waterPos==8?0+item.watermark_info.ww+'px':item.watermark_info.waterPos==9?0+item.watermark_info.xx+'px':'',fontWeight:item.watermark_info.bold==1?'bold':'',fontFamily:item.watermark_info.typeface==1?'typeface1':item.watermark_info.typeface==2?'typeface2':item.watermark_info.typeface==3?'typeface3':item.watermark_info.typeface==4?'typeface4':item.watermark_info.typeface==5?'typeface5':item.watermark_info.typeface==6?'typeface6':''}"
								v-if="item.watermark_info&&item.watermark_info.type==2||item.watermark_info&&item.watermark_info.type==4">

								<view class=""
									:style="{transform: 'rotate('+item.watermark_info.angle+'deg)',opacity:(100-item.watermark_info.opacity*1)*0.01,color:item.watermark_info.color,fontSize:item.watermark_info.text_font+'px'}">
									<image :src="BASE_URL+item.watermark_info.image" mode=""
										v-if="item.watermark_info.image&&item.watermark_info.type==2"></image>
									<text
										v-if="item.watermark_info.water_text&&item.watermark_info.type==4">{{item.watermark_info.water_text}}</text>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>

			</swiper>
		</view>
		<u-overlay :show="show" @click="show = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<image :style="{height: swiperHeight+'px'}" :src="url" mode=""></image>
					<p>长按保存到本地</p>
				</view>
			</view>
		</u-overlay>
		<u-overlay :show="show2" @click="show2 = false" @touchstart="start" @touchend="end" @touchmove="move">
			<view class="warp">
				<view class="rect2">
					<image src="../../static/swiper1.png" mode=""></image>
					<p style="color: #fff;">{{alert2}}</p>
				</view>
			</view>
		</u-overlay>
		<u-overlay :show="show1" @click="show1 = false">
			<view class="warp">
				<view class="rect1" @tap.stop>
					<image src="../../static/warn.png" mode=""></image>
					<p>{{alert1}}</p>
					<u-button color="#A5CF49" type="success" shape="circle" text="确认收藏" @click="addFavorite"></u-button>
				</view>
			</view>
		</u-overlay>

	</view>
</template>

<script setup>
	import limeQrcodeVue from '../../uni_modules/lime-qrcode/components/l-qrcode/l-qrcode.vue';
	import html2canvas from 'html2canvas';
	import {
		BASE_URL,BASE_URL1
	} from '../../utils/http.js'
	import {
		onLoad,
		onShow,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	import {
		nextTick,
		ref
	} from "vue"
	import {
		getsimpleimages,
		getplatformeditor,getplatformmeun
	} from '@/utils/api.js'
	let isSave=ref(false)
	let show = ref(false)
	let show1 = ref(false)
	let show2 = ref(false)
	let startData=ref({clientX: '',clientY: '',})
			let moveX=ref(0)
			let touch=ref({})
	// let touch=(e)=>{
	// 	console.log(123,e)
	// 	current.value++
	// 	// show2.value = false
	// }
	// 触摸touch事件
	let	start=(e)=>{  //@touchstart 触摸开始
		    startData.value.clientX = e.changedTouches[0].clientX;   //手指按下时的X坐标         
		}
		let	end=(e)=>{  //@touchend触摸结束
			moveX.value = 0;  //触摸事件结束恢复原状
			console.log(123,touch.value.clientX-startData.value.clientX)
			if(touch.value.clientX-startData.value.clientX> 0) {  //在事件结束时，判断滑动的距离是否达到出发需要执行事件的要求
				if(current.value!=0){
					current.value-=1
				}
			} else {
				current.value+=1
				// this.touch = {};
			}
		}
		let	move=(event)=>{  //@touchmove触摸移动
			let touch1 = event.touches[0];  //滑动过程中，手指滑动的坐标信息 返回的是Objcet对象
			touch.value = touch1;
			let data = touch1.clientX - startData.value.clientX;
			if(touch1.clientX < startData.value.clientX) {  //向左移动
				if(data<-250) {
					data = -250;
				}
			}
			if(touch1.clientX > startData.value.clientX) {  //向右移动
				if(moveX.value == 0) {
					data = 0
				} else {
					if(data>50) {
						data = 50;
					}
				}
			}
			moveX.value = data;
		}
	let swiperChange = (e) => {
		
		current.value = e.detail.current
		var dom = document.getElementById('swiperItem' + current.value); // 获取dom元素

		if (dom && dom.children[1]) {
			swiperHeight.value = 67 + dom.children[1].clientHeight
		} else {
			swiperHeight.value = 67
		}
		if(current.value%10==0&&current.value!=0){
			page.value += 1
			getsimpleimages({
				page: page.value,
				page_num
			}).then(res => {
				list.value = [...list.value, ...res.data]
				list.value.forEach(item=>{
					// item.detail=getspan(item.detail)
					
				})
			})
		}
		
	}
	let page_num = 1
	let page = ref(1)
	let url = ref()
	let swiperHeight = ref(67)
	let current = ref(0)
	let list = ref([])
	let refList = ref([])
	let setBoxRef = (el) => {
		if (el) {
			refList.value.push(el)
		}
	}
	//收藏网站
	// 收藏本站
	let addFavorite = () => {
		var url = window.location;
		var title = '斑马交易平台';
		var ua = navigator.userAgent.toLowerCase();
		if (ua.indexOf("360se") > -1) {
			alert("您的浏览器不支持自动加入收藏，请手动设置！");
		} else if (ua.indexOf("msie 8") > -1) {
			window.external.AddToFavoritesBar(url, title); //IE8
		} else if (document.all) { //IE类浏览器
			try {
				window.external.addFavorite(url, title);
			} catch (e) {
				alert('您的浏览器不支持自动加入收藏，请手动设置！');
			}
		} else if (window.sidebar) { //firfox等浏览器；
			window.sidebar.addPanel(title, url, "");
		} else {
			alert('您的浏览器不支持自动加入收藏，请手动设置！');
		}
		show1.value = false
	}


	let takephotos = () => {
		// var dom = document.getElementById('swiperItem' + current.value); // 获取dom元素
		// // var dom1 = document.getElementById('swiperItem'); // 获取dom元素
		// if (dom && dom.children[1]) {
		// 	swiperHeight.value = 67 + dom.children[1].clientHeight
		// } else {
		// 	swiperHeight.value = 67
		// }
		// html2canvas(dom).then((canvas) => {
		// 	url.value = canvas.toDataURL("image/png").replace('image/png', 'image/octet-stream');
		// 	show.value = true
		// });
		var swiper = document.getElementById('copyswiperItem'+current.value); // 获取dom元素
		var dom = document.getElementById('content'+current.value); // 获取dom元素
		var dom1 = document.getElementById('copycontent'+current.value); // 获取dom元素
		  dom1.innerHTML=dom.innerHTML
		  let res = domTrans(dom1)
		          let html = forFn(res)
				  dom1.innerHTML=html
		  html2canvas(swiper,{
			   allowTaint: true,
			  useCORS: true
		  }).then((canvas) => {
		    url.value = canvas.toDataURL("image/png").replace('image/png', 'image/octet-stream');
			show.value=true
		  });  
	}
	let alert1 = ref('')
	let alert2 = ref('')
	let jt_bg1=ref('')
	let jt_bg2=ref('')
	onLoad(() => {
		getplatformmeun().then(res=>{
			uni.setNavigationBarTitle({
				title: res.data.name
			});
			jt_bg1.value=res.data.jt_bg1
			jt_bg2.value=res.data.jt_bg2
		})
		getplatformeditor().then(res => {
			alert1.value = res.data.alert1
			alert2.value = res.data.alert2
		})
		getsimpleimages({
			page: page.value,
			page_num: 12
		}).then(res => {
			show2.value=true
			list.value = res.data
			// list.value.forEach(item=>{
			// 	item.detail=getspan(item.detail)
				
			// })
			setTimeout(()=>{
				var dom = document.getElementById('swiperItem' + current.value); // 获取dom元素
				if (dom && dom.children[1]) {
					swiperHeight.value = 67 + dom.children[1].clientHeight
				} else {
					swiperHeight.value = 67
				}
			})
			setTimeout(() => {
				show2.value = false
			}, 5000)
		})
		let flag = uni.getStorageSync('collect')
		if (!flag) {
			show1.value = true
			uni.setStorageSync('collect', true)
		}
		
	})


	onShow(() => {

	})

	function getspan(str) {
		// let st=str.replace(new RegExp('font', 'g'), 'span')
		var list1 = str.split('</span>')
		var list2 = []
		list1.forEach(val => {
			if (val.indexOf("<span") > -1) {
				list2.push({
					isspan: true,
					arr: val.split("<span")
				})
			} else {
				list2.push({
					isspan: false,
					arr: val
				})
			}
		})
		var list3 = []
		list2.forEach(val => {
			if (val.isspan) {
				list3.push({
					...val,
					style: val.arr[1].split('>')[0],
					span: val.arr[1].split('>')[1]
				})
			} else {
				list3.push({
					...val
				})
			}
		})
		var html = ''
		list3.forEach(val => {
			if (val.isspan) {
				html = html + val.arr[0]
				var span = ''
				for (var a = 0; a < val.span.length; a++) {
					span = span + `<span${val.style}>${val.span[a]}</span>`
				}
				html = html + span
			} else {
				html = html + val.arr
			}
		})
		return html
	}
	onPullDownRefresh(() => {
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	// 将DOM转换为js对象
	function domTrans(dom) {
		// 总dom树
		let tree = [];

		// 递归, node = 当前的节点，dataNode = 数据插入的节点
		const loop = (node, dataNode) => {
			// 当前节点的模板
			let temp = {
				type: node.nodeType,
			};
			// 如果是文本节点 或 单标签节点
			if (temp.type == 3 && node.nodeValue.match(/\S/)) {
				temp["content"] = node.nodeValue;
				temp["tag"] = node.nodeName;
				dataNode.push(temp);
			}

			// 元素节点
			if (temp.type == 1) {
				let attributes = getAttribute(node);

				// 如果没有属性，不添加 attributes
				if (attributes) temp["attributes"] = attributes;

				var newNode = node.childNodes

				var newNode2
				if (newNode[0] && newNode.length <= 1) {
					newNode2 = newNode[0].childNodes.length
				}
				// 当前节点下还有子节点
				if (node.childNodes.length > 1 || newNode2 > 0) {
					temp["children"] = [];
					temp["tag"] = node.nodeName.toLowerCase();
					for (let i = 0; i < node.childNodes.length; i++) {
						loop(node.childNodes[i], temp.children);
					}
				}
				// 当前节点下只有文本 或 单标签节点
				if (node.childNodes.length <= 1 && newNode2 == 0) {

					temp["content"] = node.innerHTML;
					temp["tag"] = node.nodeName.toLowerCase();
				}

				dataNode.push(temp);

			}
		};
		loop(dom, tree);
		return tree[0].children;
	}

	function forFn(arr) {

		let html = ``
		for (let i = 0; i < arr.length; i++) {
			let tArr = []
			if (arr[i].content) {
				tArr = arr[i].content.split("")
			}
			if (arr[i].type === 1) {
				if (arr[i].attributes) {
					if (arr[i].attributes.src) {
						html +=
							`<img class="${arr[i].attributes.class}" src="${arr[i].attributes.src}" style="${arr[i].attributes.style}">`
					} else {
						html += `<${arr[i].tag} class="${arr[i].attributes.class}" style="${arr[i].attributes.style}">`
					}

				} else {
					if (arr[i].tag == "img") {
						html += `<${arr[i].tag} style="${arr[i].attributes.style}">`
					} else {
						html += `<${arr[i].tag}>`
					}
				}
				if (arr[i].children) {
					html += forFn(arr[i].children)
				}
				html += `</${arr[i].tag}>`
			}
			tArr.forEach(el => {
				if (arr[i].tag === "#text") {
					html += `${el}`
				} else {

					if (arr[i].attributes) {
						if (arr[i].tag == "img") {
							html +=
								`<${arr[i].tag} class="${arr[i].attributes.class}" src="${arr[i].attributes.src}" style="${arr[i].attributes.style}">${el}</${arr[i].tag}>`
						} else {
							html +=
								`<${arr[i].tag} class="${arr[i].attributes.class}" style="${arr[i].attributes.style}">${el}</${arr[i].tag}>`
						}
					} else {
						if (arr[i].tag == "img") {
							html += `<${arr[i].tag} src="${arr[i].attributes.src}">${el}</${arr[i].tag}>`
						} else {
							html += `<${arr[i].tag}>${el}</${arr[i].tag}>`
						}

					}

				}
			});
		}
		// console.log(html,'====')
		return html
	}
	// 提取元素属性
	function getAttribute(dom) {
		let attributes = {};
		//   let empty = true;
		Array.from(dom.attributes).map((item) => {
			attributes[item.nodeName] = item.nodeValue;
			// empty = false;
		});
		return attributes;
	}
</script>


<style lang="scss">
	
	.typeface1{
		font-family:typeface1;
	}
	.swiper-itemcopy{
		position: absolute;
		top: 999px;
	}
	.content {
		padding-left: 10rpx;
		padding-right: 10rpx;
		word-break: break-all;
		word-wrap: break-word;
		overflow: hidden;
		position: relative;

		.watermark {
			display: flex;
			flex-wrap: wrap;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;

			// bottom: 0;
			image {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.watermark1 {
			position: absolute;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}
	}

	.warp {
		padding: 0 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 694px;
		height: auto;

		image {
			width: 100%;
		}

		p {
			font-size: 48rpx;
			color: #fff;
			margin-top: 12rpx;
		}

		// background-color: #fff;
	}
@keyframes example1 {
0% {
transform:translate(0);
}
 50% {
transform:translate(-40px);
}
 100% {
transform:translate(-80px);
}
0% {
transform:translate(0);
}
}
	.rect2 {
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 374rpx;
			height: 361rpx;
		}
		transform: translate(0);
		animation:example1 1s linear  0s backwards;
		animation-iteration-count:infinite;
		
	}


	.rect1 {
		padding: 60rpx 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 558rpx;
		// height: 438rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		image {
			max-width: 96rpx;
			max-height: 96rpx;
		}

		p {
			font-size: 30rpx;
			margin: 62rpx 0 40rpx;
		}

		// background-color: #fff;
	}

	page {
		height: 100%;

		.btn {
			font-size: 35rpx;
			color: #fff;
			text-align: center;
			line-height: 90rpx;
			float: right;
			width: 200rpx;
			height: 90rpx;
			background: #A5CF49;
			border-radius: 0rpx 0rpx 0rpx 32rpx;
		}

		.swiperBox {


			width: 694rpx;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);

			.swiper-item {
				.titleBox {
					position: relative;
					font-size: 28rpx;
					color: #666666;
					padding: 6rpx;
					
					display: flex;
					align-items: flex-end;

					image {
						margin-right: 4rpx;
						width: 112rpx;
						height: 112rpx;
					}
					.jtbj{
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						z-index: 0;
					}
					.warn {
						font-size: 32rpx;
						color: #FF2828;
					}

					.title {
						margin-left: 4rpx;
					}

				}
			}

		}
	}
</style>