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 {getTemplateByNo,getTemplateById,callback,youkuClickCallback, iqiyiClickCallback} from '../../api/api.js'
	import {clicks} from '../../common/common.js'


	export default {
		data() {
			return {
        images: [],
        params: {},
				site: {},
				data: {},
				json: {},
				vid: '',
				click_id: '',
				aid: '',
				id: null,
				no: null,
				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) {
      this.params = option;
			this.no = this.params.no;
			this.id = this.params.tid;
			if((this.id == null || this.id == "" || this.id == undefined) && (this.no == null || this.no == "" || this.no == undefined)){
				uni.showToast({
					icon:'none',
					title: '推广链接错误',
				});
				return;
			}
			this.accountId = this.params.accountId;
			this.type = this.params.type;
			this.no = this.params.no;
			if(this.id){
				getTemplateById(this.id).then(e => {
					this.data = e.data;
					this.site = e.site;
					this.type = e.site.type;
					this.json = JSON.parse(e.data.json)
          this.setData();
				})
			}else if(this.no){
				getTemplateByNo(this.no).then(e => {
					this.data = e.data;
					this.json = JSON.parse(e.data.json)
          this.setData();
				})
			}
			// callback({vid: this.vid}).then(e => {
			// 	console.info(e)
			// })
		},
		methods: {
      setData(){
        // 百度
        if(this.type == 0){
          this.vid = this.params.bd_vid;
        }
        // 优酷
        if(this.type == 1){
          this.vid = this.params.bd_vid;
          this.aid = this.params.aid;
          this.click_id = this.params.click_id;
          this.ip = this.params.ip;
        }
        // 爱奇艺
        if(this.type == 2){
          this.order_plan_id = this.params.order_plan_id;
          this.creative_id = this.params.creative_id;
          this.impress_id = this.params.impress_id;
          this.sign = this.params.sign;
        }
      },
			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 = {
						id: this.id,
						url: window.location.href,
						vid: this.vid,
						clickType: 67,
					};
					baiduClickCallback(data).then(e => {
						window.location.href = workUrl + "?customer_channel=" + this.vid;
					})
				}
				// 优酷
				if(this.type == 1){
					let data = {
						id: this.id,
						url: window.location.href,
						vid: this.vid,
						aid: this.aid,
						clickId: this.click_id,
						ip: this.ip,
					};
					youkuClickCallback(data).then(e => {
						window.location.href = workUrl + "?customer_channel=" + this.vid;
					})
				}
				// 爱奇艺
				if(this.type == 2){
          if(this.id){
            let data = {
              url: window.location.href,
              id: this.id,
              planId: this.order_plan_id,
              creativeId: this.creative_id,
              vid: this.impress_id,
              sign: this.sign,
              clickType: "200"
            };
            iqiyiClickCallback(data).then(e => {
              window.location.href = workUrl + "?customer_channel=" + this.impress_id;
            })
          }else{
            let data = {
              accountId: this.accountId,
              url: window.location.href,
              no: this.no,
              planId: this.order_plan_id,
              creativeId: this.creative_id,
              vid: 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>