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" style="background: transparent;"
      @click="sharePage()"
    >
      <view style="margin-right: 15rpx; font-size: 26rpx">分享</view>
      <image
        src="../../static/share_icon.svg"
        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="
          isCollectedIcon
            ? '../../static/collected.png'
            : '../../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,
    },
    isCollectedIcon: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    sharePage() {
      this.$emit("sharePages");
    },
    collectionPage() {
      this.$emit("collectionPages");
    },
  },
};
</script>

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