dev/dcp-app-gate/components/rf-kefu/index.vue

<template>
  <view class="rf-kefu" v-if="appServiceType !== '0'">
		<view class="wrapper" @tap="show">
			<text class="iconfont iconshouhoukefu"></text>
		</view>
		<view
			class="popup spec show"
			v-if="kefuClass"
			@touchmove.stop.prevent="stopPrevent"
			@tap="hide"
		>
			<!-- 遮罩层 -->
			<view class="mask" @tap="hide"></view>
			<view class="share-bg">
				<image :src="appServiceQr"></image>
			</view>
		</view>
  </view>
</template>
<script>
/*  eslint-disable  */
export default {
  name: 'Home',
	props: {
    bottom: {
      type: Number,
      default: 150
    }
	},
  data () {
    return {
      kefuClass: false,
      appServiceQr: this.$mSettingConfig.appServiceQr,
      appServiceType: this.$mSettingConfig.appServiceType
    };
  },
  methods: {
    stopPrevent() {},
    hide() {
      this.kefuClass = false;
    },
    show() {
      if (this.appServiceType === '1') {
        this.kefuClass = true;
      } else if (this.appServiceType === '2') {
      	if (!this.$mStore.getters.hasLogin) {
      		this.$mHelper.backToLogin();
      		return;
	      }
        this.$mRouter.push({ route: '/pages/product/service/index' });
      }
    }
  }
};
</script>
<style scoped lang="scss">
	.rf-kefu {
		width: 100%;
		.wrapper {
			height: 72upx;
			width: 72upx;
			background-color: #000;
			opacity: 0.5;
			border-radius: 50%;
			position: fixed;
			display: flex;
			justify-content: center;
			align-items: center;
			right: 40upx;
			bottom: 130upx;
			/* #ifdef H5 */
			bottom: 140upx;
			margin-bottom: env(safe-area-inset-bottom);
			/* #endif */
			z-index: 98;
		}
		.iconfont {
			font-size: 48upx;
			opacity: 1;
			color: $color-white;
			z-index: 92;
		}
		.share-bg {
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 98;
			image {
				margin-top: -10vw;
				width: 60vw;
				height: 60vw;
				border-radius: 12upx;
				z-index: 98;
			}
		}
	}
</style>