caimei-applets-caimei/components/cm-module/scrollTop/scrollTop.vue

<template name="scrollTop">
	<!-- 商品详情价格判断 -->
	<view>
		<view class="scrollTop">
			<view class="icon msg" @click="onClickPhone">
				<text class="iconfont icon-zixunrexian"></text>
			</view>
			<view class="icon top" @click="onPageScrollTop">
				<text class="iconfont icon-zhiding"></text>
			</view>
		</view>
		<view class="phone" v-show="isPhone">
			<view class="content">
				<view class="tel">
					<view class="p">0755-22907771</view>
					<view class="btn">
						<tui-button margin="5rpx 0 5rpx 0" type="gradual" shape="circle" width="120rpx" height="50rpx" :size="24" @click="toTelPhone">点击咨询</tui-button>
					</view>
				</view>
				<view class="tel">
					<view class="p">153-3885-1365</view>
					<view class="btn">
						<tui-button margin="5rpx 0 5rpx 0" type="gradual" shape="circle" width="120rpx" height="50rpx" :size="24" @click="toPhone">点击咨询</tui-button>
					</view>
				</view>
				<view class="txt">工作日</view>
				<view class="txt">周一~周五/9:00-18:00</view>
			</view>
			<text class="iconfont icon-2guanbi" @click.stop="hideIsPhone"></text>
		</view>
	</view>
</template>

<script>
	export default{
		name:'scrollTop',
		props:{
			
		},
		data() {
			return{
				isPhone:false,
				telPhone:'0755-22907771',
				mobilePhone:'15338851365'
			}
		},
		created() {
			
		},
		methods:{
			onPageScrollTop(){
				uni.pageScrollTo({
				    scrollTop: 0,
				    duration: 600
				});
			},
			onClickPhone(){
				this.isPhone = true
			},
			hideIsPhone(){
				this.isPhone = false
			},
			toTelPhone(){
				uni.makePhoneCall({
				    phoneNumber:this.telPhone 
				});
			},
			toPhone(){
				uni.makePhoneCall({
				    phoneNumber:this.mobilePhone 
				});
			},
		},		
	}
</script>

<style lang="scss">	
	.scrollTop{
		width: 80rpx;
		height: 200rpx;
		position: fixed;
		right: 20rpx;
		bottom: 20%;
		.icon{
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			float: left;
			margin: 10rpx 0;
			line-height: 80rpx;
			text-align: center;
			&.msg{
				background-image: linear-gradient(0deg, #f28e31 0%, #e15616 100%);
			}
			&.top{
				background-color: rgba(0,0,0,0.4);
			}
			.iconfont{
				font-size: $font-size-44;
				color: #FFFFFF;
			}
		}
	}
	.phone{
		width: 100%;
		height: 100%;
		position: fixed;
		right: 0;
		top: 0;
		background: rgba(0,0,0,0.4);
		z-index: 999999;
		.content{
			width: 500rpx;
			height: 704rpx;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			background: url(https://admin-b.caimei365.com/userfiles/1/images/photo/2020/11/%E4%B8%8B%E8%BD%BD.jpg) no-repeat;
			background-size: cover;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 220rpx 60rpx 0 60rpx;
			.tel{
				height: 60rpx;
				line-height: 60rpx;
				font-size: $font-size-28;
				margin: 8rpx 0;
				.p{
					color: $color-system;
					float: left;
				}
				.btn{
					float: right;
				}
			}
			.txt{
				height: 60rpx;
				line-height: 60rpx;
				font-size: $font-size-28;
				color: #666666;
				text-align: center;
			}
		}
		.icon-2guanbi{
			width: 80rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 54rpx;
			display: block;
			position: absolute;
			bottom: 18%;
			left: 50%;
			margin-left: -40rpx;
			color: #FFFFFF;
		}
	}
</style>