adH5/pages/index/index.vue

<template>
	<view class="content" :style="{paddingBottom: paddingBottom}">
		<view class="item" v-for="(item, index) in json" :class="item.classText.join(' ')" @click="click(item)">
			<p v-if="item.type == 'h5-text'" :style="item.style">{{item.content}}</p>
			<img :ref="'myImage' + index" @load="handleImageLoad(index, item)" v-if="item.type == 'h5-image'" :src="item.url"></p>
		</view>
	</view>
</template>
<script>
	import Clipboard from 'clipboard'; // 引入Clipboard
	import {getTemplate,callback,youkuClickCallback, iqiyiClickCallback} from '../../api/api.js'
	import {clicks} from '../../common/common.js'
		
		
	export default {
		data() {
			return {
				images: [],
				site: {},
				data: {},
				json: {},
				vid: '',
				click_id: '',
				aid: '',
				no: '',
				type: 0,
				show: false,
				name: '',
				tel: '',
				accountId: '',
				ip: '',
				paddingBottom: 0,
				order_plan_id: "",
				creative_id: "",
				impress_id: "",
				sign: "",
			}
		},
		mounted() {
			window.vueInstance = this;  // 将 Vue 实例暴露到全局
		},
		onLoad(option) {
			if(option.type == null || option.type == "" || option.type == undefined){
				uni.showToast({
					icon:'none',
					title: '推广链接错误',
				});
				return;
			}
			if(option.accountId == null || option.accountId == "" || option.accountId == undefined){
				uni.showToast({
					icon:'none',
					title: '推广链接错误',
				});
				return;
			}
			if(option.id == null || option.id == "" || option.id == undefined){
				uni.showToast({
					icon:'none',
					title: '推广链接错误',
				});
				return;
			}
			this.accountId = option.accountId;
			this.type = option.type;
			this.no = option.no;
			// 百度
			if(this.type == 0){
				this.vid = option.bd_vid;
			}
			// 优酷
			if(this.type == 1){
				this.vid = option.bd_vid;
				this.aid = option.aid;
				this.click_id = option.click_id;
				this.ip = option.ip;
			}
			// 爱奇艺
			if(this.type == 2){
				this.order_plan_id = option.order_plan_id;
				this.creative_id = option.creative_id;
				this.impress_id = option.impress_id;
				this.sign = option.sign;
			}
			getTemplate(option.id).then(e => {
				this.data = e.data;
				this.site = e.site;
				this.json = JSON.parse(e.data.json)
			})
			// callback({vid: this.vid}).then(e => {
			// 	console.info(e)
			// })
		},
		methods: {
			handleImageLoad(index, item){
				if(item.classText.indexOf("footer") != -1){
					const imgElement  = this.$refs["myImage" + index];
					// 获取真实高度（包含以下两种方式）
					const naturalHeight = imgElement[0].naturalHeight; // 原始高度
					const clientHeight = imgElement[0].clientHeight;   // 渲染高度
					this.paddingBottom = clientHeight + "px";
				}
			},
			confirm() {
				this.show = false;
			},
			clickToWx(workUrl){
				// 百度
				if(this.type == 0){
					let data = {
						accountId: this.accountId, 
						url: window.location.href, 
						no: this.no, 
						bdVid: this.vid, 
						t: 67,
					};
					callback(data).then(e => {
						window.location.href = workUrl + "?customer_channel=" + this.vid;
					})
				}
				// 优酷
				if(this.type == 1){
					let data = {
						accountId: this.accountId, 
						deeplink_url: window.location.href, 
						no: this.no, 
						bd_vid: this.vid, 
						aid: this.aid, 
						click_id: this.click_id, 
						ip: this.ip,
					};
					youkuClickCallback(data).then(e => {
						window.location.href = workUrl + "?customer_channel=" + this.vid;
					})
				}
				// 优酷
				if(this.type == 2){
					let data = {
						accountId: this.accountId, 
						url: window.location.href, 
						no: this.no, 
						order_plan_id: this.order_plan_id,
						creative_id: this.creative_id,
						impress_id: this.impress_id,
						sign: this.sign,
						clickType: "200"
					};
					iqiyiClickCallback(data).then(e => {
						window.location.href = workUrl + "?customer_channel=" + this.impress_id;
					})
				}
				
			},
			click(item){
				if(!item.addWxFun){
					return;
				}
				this.clickToWx(item.workUrl);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.item{
		display: flex;
		flex-direction: column;
		flex: 1;
		margin: 0;
		width: 100%;
		img{
			width: 100%;
		}
		p{
			white-space: pre-line;
		}
	}
	.footer{
		position: fixed;
		bottom: 0;
		left: 0;
	}
</style>