banma/pages/deal/productInfo.vue

<template>
	<view class="">
		
	
	<u-loading-page :loading="isLoading" ></u-loading-page>
	<view class="" v-if="!isLoading">
		<u-swiper @change='swiperChange' @click="swiperClick" :list="info.images_arr" indicator indicatorMode="dot" circular height="338" imgMode="scaleToFill"></u-swiper>
		<view class="baseInfo">
			<view class="titleBox">
				<view class="wechat">
					客服微信:{{kefu}}
				</view>
				<view class="takeImg" @click="takephotos" >
					生成斑马简图
				</view>
			</view>
			<view class="attributeBox">
				<view class="attributeItem">
					<view class="labelItem">
						编号：<text class="fontWeight">{{info.code}}</text>
					</view>
					<view class="labelItem">
						区服：<text class="fontWeight">{{info.server}}</text>
					</view>
				</view>
				<view class="attributeItem">
					<view class="labelItem">
						金伙伴：<text class="fontWeight">{{info.partner}}</text>
					</view>
					<view class="labelItem">
						vip：<text class="fontWeight">{{info.level}}</text>
					</view>
					
				</view>
				<view class="attributeItem">
					<view class="labelItem">
											战力：<text class="fontWeight">{{info.force}}亿</text>
										</view>
					<view class="labelItem">
						速度：<text class="fontWeight">{{info.speed}}万</text>
					</view>
					
				</view>
				<view class="attributeItem">
					<view class="labelItem">
						法伤：<text class="fontWeight">{{info.atk}}万</text>
					</view>
					
					<view class="labelItem">
						冰冻：<text class="fontWeight">{{info.property}}万</text>
					</view>
				</view>
				<view class="attributeItem">
					<view class="labelItem">
						渡劫：<text class="fontWeight">{{info.dj_level}}</text>
					</view>
					<view class="labelItem">
						小号数量：<text class="fontWeight">{{info.children}}</text>
					</view>
				</view>
				<view class="attributeItem">
					<view class="labelItem">
						是否榜一：<text class="fontWeight">{{info.top_one==1?'是':'否'}}</text>
					</view>
					<view class="labelItem">
						账号类型：<text class="fontWeight">{{info.account_type_text}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="labelBox" >
			<view class="labelItem" :style="{	backgroundImage:'url('+BASE_URL+bg_list.top_bg.value+')'}"  v-if="info.is_top==1">
				置顶
			</view>
			
			<view class="labelItem" :style="{	backgroundImage:'url('+BASE_URL+bg_list.discount_bg.value+')'}" v-if="info.discount==1">
				特价
			</view>
			<view class="labelItem" :style="{	backgroundImage:'url('+BASE_URL+bg_list.recommend_bg.value+')'}" v-if="info.recommend==1">
				斑马推荐
			</view>
			<view class="labelItem" :style="{	backgroundImage:'url('+BASE_URL+bg_list.stage_bg.value+')'}" v-if="info.stage==1">
				可分期
			</view>
			<view class="labelItem" :style="{	backgroundImage:'url('+BASE_URL+bg_list.recommend_bg.value+')'}" v-if="info.is_hot==1">
				热门
			</view>
			<!-- <view class="labelItem" :style="{	backgroundImage:'url('+BASE_URL+bg_list.level_bg.value+')'}" v-if="info.level>=1">
				VIP
			</view> -->
			<view class="labelItem" :style="{	backgroundImage:'url('+BASE_URL+bg_list.new_bg.value+')'}" v-if="info.is_new==1">
				新品
			</view>
			
			<view class="labelItem" :style="{	backgroundImage:'url('+BASE_URL+bg_list.standby1_bg.value+')'}" v-if="info.standby1==1">
					{{info.standby1_title}}
			</view>
			<view class="labelItem" :style="{	backgroundImage:'url('+BASE_URL+bg_list.standby2_bg.value+')'}" v-if="info.standby2==1">
					{{info.standby2_title}}
			</view>
			<view class="labelItem" :style="{	backgroundImage:'url('+BASE_URL+bg_list.standby3_bg.value+')'}" v-if="info.standby3==1">
					{{info.standby3_title}}
			</view>
			
			<!-- <u-tag v-if="item.discount==1" text="特价" type="error" shape="circle" size="mini"></u-tag>
			<u-tag v-if="item.recommend==1" text="斑马推荐"  shape="circle" size="mini"></u-tag>
			<u-tag v-if="item.stage==1" text="可分期" type="success" shape="circle" size="mini"></u-tag> -->
		</view>
		<view class="productInfo">
			<view class="infoTitle">
				商品详情
			</view>
			<view class="">
				<u-parse :content="info.detail"></u-parse>
			</view>
			<view class="" v-if="info.content_switch==1">
				<u-parse :content="info.detail2"></u-parse>
			</view>
		</view>
		<view class="productInfo">
			<view class="infoTitle">
				免责声明
			</view>
			<view class="statement">
				<u-parse :content="disclaimer"></u-parse>
			</view>
			
		</view>
		<view class="tabbar">
			<view class="back" @click="goBack">
				<u-icon name="home-fill" color="#fff"></u-icon>
				<span style="font-size: 16px;">返回</span>
			</view>
			<view class="price">
				jià格：<text class="bold">{{info.money}}</text><text>米</text>
			</view>
			<view class="back purchase" @click="showPopup=true">
				流程规则
			</view>
		</view>
		<view class="swiper-item swiper-itemcopy" id="copyswiperItem">
			<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=${id}`+(rand_num?`&rand_num=${rand_num}`:'')" 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"  :style="{background: 'url('+BASE_URL+jt_bg2+')'}">
				<view class="" id="copycontent">
					
				</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)',color:`rgba(${hexToRgb(item.watermark_info.color).rgb},${(100-item.watermark_info.opacity*1)*0.01})`,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"> 
			<view class="titleBox" :style="{background: 'url('+BASE_URL+jt_bg1+')'}">
				<limeQrcodeVue v-if="item.id" ref="qrcodeRef" :value="BASE_URL1+'/h5/#/pages/deal/productInfo?id='+id" size="112rpx" ></limeQrcodeVue>
				<!-- <image :src="BASE_URL+item.qrimage" mode=""></image> -->
				<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="content1">
					<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.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)',color:`rgba(${hexToRgb(item.watermark_info.color).rgb},${(100-item.watermark_info.opacity*1)*0.01})`,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>
		<u-overlay :show="show" @click="show = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<image  :src="url" mode="widthFix"></image>
					<p>长按保存到本地</p>
				</view>
			</view>
		</u-overlay>
		<u-popup :show="showPopup" :round="10" mode="bottom" @close="showPopup=false">
			<view class="popup">
				<view class="popupTop">
					<view class="contactInfo">
						<p>{{notice_text}}</p>
						
					</view>
					<image :src="BASE_URL+noticeimage" mode=""></image>
				</view>
				<view class="notice">
					<!-- <view class="noticeTitle">
						购买须知
					</view> -->
					<view class="noticeInfo">
					<u-parse :content="buy_notes"></u-parse>
					</view>
					<view class="popupBottom">
						<view class="back" @click="showPopup=false">
							<u-icon name="home-fill" color="#fff"></u-icon>
							返回
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-overlay :show="show10" @click="show10 = false">
			<view class="warp">
				<view class="rect1" @tap.stop>
					<image src="../../static/tishi.png" mode=""></image>
					<p>该商品已出售或下架</p>
					<u-button color="#A5CF49" type="success" shape="circle" size="large" text="看看其他斑马账号" @click="goBack"></u-button>
				</view>
			</view>
		</u-overlay>
	</view>
	</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,onReady
	} from "@dcloudio/uni-app";
	import {
		ref
	} from "vue"
	import {getGoodsDetail,getsimpleimages,getplatformeditor,getsimpleimagesdetail,getplatformmeun} from '@/utils/api.js'
	let show10=ref(false)
	let disclaimer=ref()
	let buy_notes=ref()
	let notice_text=ref()
	let kefu=ref()
	let title=ref()
	let bg_list=ref({})
	let current=ref(0)
	let noticeimage=ref()
	let jt_bg1=ref('')
	let jt_bg2=ref('')
	onReady(()=>{
		getplatformmeun().then(res=>{
			uni.setNavigationBarTitle({
				title: res.data.name
			});
			jt_bg1.value=res.data.jt_bg1
			jt_bg2.value=res.data.jt_bg2
		})
		
	})
	let swiperChange=(e)=>{
		
		current.value=e.current
	}
	let swiperClick=(e)=>{
		uni.previewImage({
		           // 预览时，默认显示图片的索引
		          current:current.value,
		          // 所有图片 url 地址的数组
		          urls:info.value.images_arr
		        })
	}
	let isLoading=ref(true)
	onLoad((option) => {
		getplatformeditor().then(res=>{
			disclaimer.value=res.data.disclaimer
			notice_text.value=res.data.notice_text
			noticeimage.value=res.data.noticeimage
			buy_notes.value=res.data.buy_notes
			kefu.value=res.data.kfwx
			kefu.value=res.data.kfwx
		})
id.value=option.id;
rand_num.value=option.rand_num;
let images_arr=[]
let index = new Date().getTime()
getGoodsDetail({goods_id:id.value,rand_num:rand_num.value}).then(res=>{
	
	if(res.code==1){
		bg_list.value=res.data.bg_list
		if(res.data.detail.status==0){
			show10.value=true
			// return
		}
	}else{
		show10.value=true
		isLoading.value=false
	}
	
	
	res.data.detail.images_arr.forEach(item=>{
		// images_arr.push(BASE_URL+item+"?res="+index)
		images_arr.push(BASE_URL+item)
	})
	info.value=res.data.detail
	info.value.images_arr=images_arr
	getsimpleimagesdetail({goods_id:info.value.id}).then(res=>{
		isLoading.value=false
		item.value=res.data
		// item.value.detail=getspan(item.value.detail)
	})
	// getsimpleimages().then(res=>{
	// 	let arr=res.data
	// 	arr.forEach(it=>{
	// 		if(info.value.simple_id==it.id){
	// 			item.value=it
	// 		}
	// 	})
	// })
})
	})
	function getspan(str) {
		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
	}
	onShow(() => {

	})
	let item=ref({})
	let info=ref({})
	let id=ref('')
	let rand_num=ref('')
	let showPopup = ref(false)
	let swiperHeight =ref(67)
	let goBack = () => {
		let page=getCurrentPages()
		if(page.length==1){
			uni.switchTab({
				url:'/pages/deal/deal'
			})
		}else{
			uni.navigateBack()
		}
		// console.log('page',page)
		
	}
	let show = ref(false)
	let takephotos = () => {
		// var dom = 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");
		// 	show.value = true
		// });
		var swiper = document.getElementById('copyswiperItem'); // 获取dom元素
		var dom = document.getElementById('content1'); // 获取dom元素
		var dom1 = document.getElementById('copycontent'); // 获取dom元素
		  dom1.innerHTML=dom.innerHTML
		  let res = domTrans(dom1)
		  // console.log(1223,res)
		          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 url = ref()
	let content = `
						<p>露从今夜白，月是故乡明</p>
						<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
					`
	let list3 = ref([
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper1.png',
	])
	onPullDownRefresh(() => {
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	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;
	}

	function hexToRgb (val) {   //HEX十六进制颜色值转换为RGB(A)颜色值
                // 16进制颜色值的正则
                var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
                // 把颜色值变成小写
                var color = val.toLowerCase();
                var result = '';
                if (reg.test(color)) {
                    // 如果只有三位的值，需变成六位，如：#fff => #ffffff
                    if (color.length === 4) {
                        var colorNew = "#";
                        for (var i = 1; i < 4; i += 1) {
                            colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
                        }
                        color = colorNew;
                    }
                    // 处理六位的颜色值，转为RGB
                    var colorChange = [];
                    for (var i = 1; i < 7; i += 2) {
                        colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
                    }
                    result =  colorChange.join(",") 
                    return { rgb: result, r: colorChange[0], g: colorChange[1], b: colorChange[2] };
                } else {
                    result = '无效';
                    return { rgb: result };
                }
 
            }
</script>


<style lang="scss">
	.fontWeight{
		font-weight: bold;
		color: #000;
		font-size: 30rpx;
	}
	.warp {
		padding: 0 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	
	
	
	.rect1 {
		padding: 60rpx 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 558rpx;
		height: 438rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	
		image {
			width: 96rpx;
			height: 96rpx;
		}
	
		p {
			font-size: 30rpx;
			margin: 62rpx 0 40rpx;
		}
	
		// background-color: #fff;
	}
	.labelBox{
		padding: 0 15px;
			margin: 10rpx 0;
			display: flex;
			flex-wrap: wrap;
			.labelItem{
				margin-right: 20rpx;
				margin-bottom: 5rpx;
				font-size: 20rpx;
				color: #fff;
	border-radius: 30rpx;
				padding: 7rpx 16rpx;
				background-position: center center; 
				background-repeat: no-repeat;
				background-size: cover;
				// background-color: #A5CF49;
			}
		}
	.content{
		padding-left: 10rpx;
		padding-right: 10rpx;
		overflow: hidden;
		position: relative;
		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;
			}
		}
	}
	.popup {
		overflow: hidden;
		.notice{
			padding: 24rpx 28rpx;
			font-size: 28rpx;
			.noticeTitle{
				font-weight: bold;
				text-align: center;
			}
			.noticeInfo{
				height:500rpx;
				overflow: scroll;
			}
		}
		.popupBottom{
			display: flex;
			justify-content: right;
			padding: 20rpx 28rpx;
height: 160rpx;
.back{
	display: flex;
	justify-content: center;
	text-align: center;
	font-size: 28rpx;
	color: #fff;
	width: 162rpx;
	height: 80rpx;
	line-height: 80rpx;
	background: #A5CF49;
	border-radius: 40rpx;
}
		}
		.popupTop {
			
border-radius: 20rpx 20rpx 0rpx 0rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 26rpx;
			background: linear-gradient(135deg, #F9FFE9 0%, #DDFFDA 100%);

			.contactInfo {
				flex: 1;
				font-size: 36rpx;
			}
			image{
				width: 160rpx;
				height: 160rpx;
			}
		}
	}

	.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;
	}

	.swiper-item {
		position: fixed;
		top: 9999px;

		.titleBox {
			font-size: 28rpx;
			color: #666666;
			padding: 6rpx;
			background: #FFF5E5;
			display: flex;
			align-items: flex-end;

			image {
				margin-right: 4rpx;
				width: 112rpx;
				height: 112rpx;
			}

			.warn {
				font-size: 32rpx;
				color: #FF2828;
			}
			.title{
				margin-left: 4rpx;
			}
		}
	}

	.tabbar {
		bottom: 0;
		padding: 20rpx 28rpx;
		position: fixed;
		width: 750rpx;
		height: 160rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;

		.back {
			display: flex;
			justify-content: center;
			font-size: 28rpx;
			color: #Fff;
			width: 162rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			background: #A5CF49;
			border-radius: 40rpx;
		}

		.price {
			line-height: 80rpx;
			font-size: 24rpx;
			color: #333333;

			text {
				color: #FF2828;
			}

			.bold {
				font-weight: bold;
				font-size: 40rpx;
			}
		}
	}

	.productInfo {
		margin-bottom: 10rpx;
		background-color: #fff;
		padding: 20rpx 32rpx;

		.infoTitle {
			margin-bottom: 10rpx;
			font-size: 28rpx;
			font-weight: bold;

		}

		.statement {
			font-size: 24rpx;
		}
	}

	.label {
		padding: 24rpx 32rpx;
		background-color: #fff;
		margin: 10rpx 0;

		.u-fade-enter-active {
			margin-right: 20rpx;
		}
	}

	page {
		padding-bottom: 170rpx;

		.attributeBox {
			font-size: 28rpx;
			color: #666666;

			.attributeItem {
				margin-top: 20rpx;
				display: flex;

				.labelItem {
					flex: 1;
				}
			}
		}

		.baseInfo {
			background-color: #fff;
			padding: 22rpx 30rpx;

			.titleBox {
				display: flex;
				justify-content: space-between;

				.wechat {
					font-size: 40rpx;
					color: #1677FF;
					font-weight: bold;
				}

				.takeImg {
					width: 206rpx;
					height: 52rpx;
					line-height: 52rpx;
					background: #A5CF49;
					border-radius: 40rpx;
					font-size: 28rpx;
					color: #ffff;
					font-weight: bold;
					text-align: center;
				}
			}
		}
	}
</style>