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

<template name="scrollTop">
	<!-- 商品详情价格判断 -->
	<view>
		<view class="scrollTop" :style="{bottom:bottom+'rpx'}">
            <view class="supplierLogo" v-if="isShowSupplier" @click="$api.navigateTo('/pages/login/supplier_login')"></view>
			<view class="icon msg">
				<!-- #ifdef MP-WEIXIN -->
				<button class="contact-btn" open-type="contact" @bindcontact="handleContact">
					<text class="iconfont icon-zixunrexian"></text>
				</button>	
				<!-- #endif -->
			</view>
			<view class="icon top" @click="onPageScrollTop" :class="isScrollTop ? 'show' : 'none'">
				<text class="iconfont icon-zhiding"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:'scrollTop',
		props:{
			bottom:{
				type:Number,
				default:100
			},
			isScrollTop:{
				type:Boolean,
				default:false
			},
            isShowSupplier: { // 是否展示供应商服务图标
                type: Boolean,
                default: false
            }
		},
		data() {
			return{
				isPhone:false,
				telPhone:'0755-22907771',
				mobilePhone:'15338851365'
			}
		},
		created() {
			
		},
		methods:{
			onPageScrollTop(){
				uni.pageScrollTo({
				    scrollTop: 0,
				    duration: 600
				})
			},
			handleContact(e){
				console.log(e.detail.path)
				console.log(e.detail.query)
			},
		},		
	}
</script>

<style lang="scss">	
	.scrollTop{
		width: 80rpx;
		height: 200rpx;
		position: fixed;
		right: 20rpx;
		z-index: 99;
        .supplierLogo {
            width: 80rpx;
            height: 80rpx;
            background: url(https://static.caimei365.com/app/img/icon/supplier_logo.png) no-repeat;
            background-size: contain;
            transform: scale(1.5);
        }
		.icon{
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			float: left;
			margin: 10rpx 0;
			line-height: 80rpx;
			text-align: center;
			.contact-btn{
				width: 80rpx;
				height: 80rpx;
				background-color: rgba(0,0,0,0);
				line-height: 80rpx;
				.iconfont{
					font-size: $font-size-44;
					color: #FFFFFF;
				}
			}
			&.msg{
				background-image: linear-gradient(0deg, #f28e31 0%, #FF5B00 100%);
			}
			&.top{
				background-color: rgba(0,0,0,0.4);
				&.show{
					opacity: 1;
				}
				&.none{
					opacity: 0;
				}
			}
			.iconfont{
				font-size: $font-size-44;
				color: #FFFFFF;
			}
		}
	}
</style>