jsm-mall-h5-front/src/components/floatButton.vue

<template>
	<view class="btn-group">
		<view class="btn" @tap="toShare()" v-if="isShare">
			<text class="iconfont icon-fenxiang"></text>
			<text class="text">分享</text>
		</view>
		<view class="btn" @tap="toCart()" v-if="isCart">
			<text class="iconfont icon-gouwuche"></text>
			<text class="text">购物车</text>
		</view>
		<button class="btn" open-type="contact" v-if="isService">
			<text class="iconfont icon-kefu"></text>
			<text class="text">在线客服</text>
		</button>
	</view>
</template>

<script>
	export default {
		props: {
			isDock: {
				type: Boolean,
				default: false
			},
			customBar: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {

			}
		},
		computed: {
			curRoute() {
				let routes = getCurrentPages();
				return routes[routes.length - 1].route;
			},

			isCart() {
				return ![
						'pages/login/index',
						'packageGoods/pages/cart',
						'pages/mine/index',
						'packageGoods/pages/detail',
						'packageGoods/pages/order',
						'pages/mine/order/detail',
						'packageGoods/pages/coupon',
						'pages/mine/coupon/list',
					].includes(this.curRoute);
			},

			isService() {
				return ![
						'pages/login/index',
						'packageGoods/pages/cart',
						'pages/mine/index',
						'packageGoods/pages/order',
						'pages/mine/order/detail',
						'packageGoods/pages/coupon',
						'pages/mine/coupon/list',
					].includes(this.curRoute);
			},

			isShare() {
				return [
						'pages/mine/groupbuy/list',
						'packageGoods/pages/activity',
					].includes(this.curRoute);
			}
		},
		mounted() {

		},
		methods: {
			toCart() {
				this.$navToPage({
          url: '/packageGoods/pages/cart'
        });
			},

			toShare() {
				uni.$emit('hanbleShare');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.btn-group {
		position: fixed;
		bottom: 20vh;
		right: 20rpx;
		z-index: 999998;
		.btn {
			width: 92rpx;
			height: 92rpx;
			background: #ffffff;
			box-shadow: 0 2rpx 8rpx 2rpx rgba(0,0,0,.3);
			transition: all .5s;
			text-align: center;
			border-radius: 50%;
			color: #333333;
			margin-top: 15rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 0;
			padding-bottom: 8rpx;
			line-height: 1;
			box-sizing: border-box;
			&::after {
				border: none;
			}
			.iconfont {
				font-size: 44rpx;
			}
			.text {
				font-size: 18rpx;
				margin-top: 6rpx;
			}
		}
	}
</style>