bd-ad/pages/index/index.vue

<template>
	<view class="content">
		<view class="img-div">
			<img class="img" v-for="url in images" :src="url" />
			<view class="text-color">
				重庆润天健康管理有限公司，主营中医养生课程，课程内容包括居家养生，食疗食补房子，穴位养生等，针对50岁以上中老年人群，0基础即可学习，每天30分钟，在家轻松学。
			</view>
		</view>
		<view class="box"></view>
		<view class="foot">
			<view class="butt">
				<!-- <u-button type="success" text="加微" @click="show = true"></u-button> -->
				<!-- <button data-agl-cvt="35">复制微信</button> -->
				<div class="copy">
				    <span>加微信了解更多</span>：
				    <!-- 点击微信号之后复制，设置转化类型为35（微信复制按钮点击） -->
				    <span @click="clickToWx" class="clickbox shake-animation">点击加微</span>
				</div>
			</view>
			<view class="foot-box">
				<span>重庆润天健康管理有限公司</span>
				<span>重庆市经开区长生桥镇蔷薇路46号5-1   18523923647</span>
			</view>
		</view>
	</view>
</template>
<script>
	import Clipboard from 'clipboard'; // 引入Clipboard
	import {getTemplate,callback} from '../../api/api.js'
	import {clicks} from '../../common/common.js'
		
		
	export default {
		data() {
			return {
				images: [],
				json: {},
				vid: '',
				no: '',
				show: false,
				name: '',
				tel: ''
			}
		},
		mounted() {
			window.vueInstance = this;  // 将 Vue 实例暴露到全局
		},
		onLoad(option) {
			this.vid = option.bd_vid;
			this.no = option.no;
			if(option.no == null || option.no == "" || option.no == undefined){
				uni.showToast({
					icon:'none',
					title: '地址错误',
				});
				return;
			}
			getTemplate(option.no).then(e => {
				this.images = e.images;
				this.json = e.json;
			})
			// callback({vid: this.vid}).then(e => {
			// 	console.info(e)
			// })
		},
		methods: {
			confirm() {
				this.show = false;
			},
			clickToWx(){
				callback({url: window.location.href, no: this.no, bdVid: this.vid, t: 67}).then(e => {
					window.location.href = this.json.wxNo + "?customer_channel=" + this.vid;
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.text-color{
		text-align: center;
		width: 90%;
		margin: 0 auto;
		font-size: 14px;
	}
	.foot-box{
		display: flex;
		flex-direction: column;
		margin: 4px 0;
		span{
			margin: 0;
			line-height:16px;
			font-size: 12px;
		}
	}
	.box{
		height: 120px;
	}
	.content {
		text-align: center;
	}
	.img-div{
		margin: 0 auto;
		display: flex;
		flex-direction: column;
	}
	.img{
		width: 100%;
	}
	.foot{
		background-color: #fff;
		font-size: 13px;
		width: 100%;
		margin-top: 20px;
		padding-top: 10px;
		line-height: 50px;
		color: #848b99;
		text-align: center;
		position: fixed;
		bottom: 0;
	}
	.butt{
		/* width: 80px; */
		margin: 0 auto;
	}
	.copy{
		width: 80%;
		background-color: #F26F00;
		margin: 0 auto;
		color: #fff;
		border-radius: 6px;
		display: flex;
		align-items: center;
		justify-content: center
	}
	.clickbox{
		background-color: #fff;
		color: #F26F00;
		display: inline-block;
		width: 100px;
		height: 40px;
		line-height: 40px;
		border-radius: 4px;
		font-size: 18px;
		font-weight: bold;
	}
	 @keyframes shake-animation {
		   0% { transform: scale(1); }
	       25% { transform: scale(1.1); }
	       50% { transform: scale(1); }
	       75% { transform: scale(1.1); }
	       100% { transform: scale(1); }
	  }
	 
	  .shake-animation {
	    animation: shake-animation 1.5s;
	    animation-iteration-count: infinite; /* 使动画无限循环 */
	  }
</style>