konggang-city-miniprogram/components/footer-share/footer-share.vue

<template>
	<view class="footer-share-box display-around">
		<button class="display-flex-start items-center share-font" :style="{'border-right': isCollection ? '1px solid #d8d8d8' : 'none'}" open-type="share" @click="sharePage()">
			<view style="margin-right:15rpx;font-size: 26rpx;">分享</view>
			<image src="../../static/share_icon.png" mode="aspectFill" style="width: 30rpx;height: 30rpx;"></image>
		</button> 
		<view class="display-flex-start items-center share-font" v-if='isCollection' @click="collectionPage()">
			<view style="margin-right:15rpx;font-size: 26rpx;">收藏</view>
			<image src="../../static/collection.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name:"footer-share",
		props:{
			isCollection: {
			  type: Boolean,
			  default:false
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			sharePage() {
			    this.$emit('sharePages')
			},
			collectionPage() {
			    this.$emit('collectionPages')
			},
		}
	}
</script>

<style>
   .footer-share-box {
	   height: 50rpx;
	   position: fixed;
	   bottom: 0;
	   width: 100%;
	   border-radius: 10rpx;
	   box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
	   padding: 20rpx;
	   background: #fff;
   }
   .share-font {
	   width: 45%;
	   justify-content: center;
   }
   .footer-share-box button {
	   background-color: #fff;
	   border-radius:0;
   }
  .footer-share-box button::after{ border: none;} 
</style>