toilet_h5_show/pages/index/index.vue

<template>
	<view class="page">
		<view class="container">
			<view style="width: 100%; margin-top: 20px;">
				<video style="width: 100%; border-radius: 10px 10px 10px 10px;" id="myVideo" ref="videoPlayer" src="http://hdcs-3.ifastore.com.cn:9005/api/media/visit?media=5bq35LmD5b+D6ams5qG25Lqn5ZOB5a6j5Lyg6KeG6aKRIyMyMDIzMTEyNTIwMzA1Nzc5Mi5tcDQ="
					@error="videoErrorCallback" controls></video>
			</view>
			<view style="width: 100%; height: 60%; margin-top: 10px; margin-bottom: 10px;" >
				<image style="height: 100%; border-radius: 10px 10px 10px 10px;" src="http://hdcs-3.ifastore.com.cn:9005/api/media/visit?media=5Lit55S15bGV5Lya5Y2w5Yi2LTIjIzIwMjMxMTI1MjAzMjE2Njg2LmpwZw=="></image>
			</view>
			<view style="width: 100%; margin-bottom: 20px; display: flex; flex-direction: column; align-items: center; background-color: aliceblue;
						    border-radius: 10px 10px 10px 10px;">
				<view style="display: flex; align-items: center; flex-direction: row;  height: 50px; border-radius: 2%; " 
				@click="makeCall">
				<text :style="getTextStyle(textFlag)">点击获取优惠价格(拨打400)</text>
				<view style="height: 30px; width: 30px; margin-left: 10px;">
					<image style="height: 100%; width: 100%;" :animation="animationData" mode="aspectFill" src="../../static/tel.png"></image>
				</view>
				</view>
			</view>
		</view> 
	</view>
</template>

<script>
export default {
    data() {
        return {
			animationData: {},
			animation:null,
			textFlag:false
        }
    },
    onReady: function (res) {
    	this.videoContext = uni.createVideoContext('myVideo')
		setTimeout(()=>{
			this.playVideo();   // 自动播放方法
		},1000)
		var animation = uni.createAnimation({
			duration: 500,
			timingFunction: 'ease',
		})	
		setInterval(()=>{    
			setTimeout(function() {
				this.animation = animation
				this.animation.scale(1,1).step()
				this.animation.scale(1.5,1.5).step()
				this.animationData = animation.export()
				this.textFlag = !this.textFlag
		  }.bind(this), 1000);  
		},1000)
    },
	onShow() {
		setTimeout(()=>{
			this.playVideo();
		},2000)
	},
    methods: {
        videoErrorCallback: function (e) {
			console.log('视频错误信息:')
			console.log(e.target.errMsg)
		},
		makeCall() {
			uni.makePhoneCall({
			  phoneNumber: '4001019698',
			});
		},
		playVideo() {
			this.videoContext.play()
			
		},
		scaleAnimal(){
			this.animation.scale(2,2).step()
			this.animationData = animation.export()
		},
		getTextStyle(flag){
			if(flag){
				return 'font-size: 20px; color: red;'
			}else {
				return 'font-size: 20px; color: gold;'
			}
		}
    }
}
</script>


<style>
	.page {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #bee9fc;
		height: 100%;
		width: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 80%;
		height: 100%;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>