luban-mall/components/customer-service/customer-service.vue

<template>
	<view>
		<view class="customer-service-bg" :style="{right:right+'rpx',bottom:bottom+'rpx'}">
			<view class="customer-service flex" @tap="toService">
				<image src="/static/public/icon-service.png" mode="widthFix" lazy-load></image>
				<!-- <button class="service-btn" open-type="contact">客服</button> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"customer-service",
		props:{
			right:{//距离右边多宽
				type:Number,
				default:28
			},
			bottom:{//距离底部多高
				type:Number,
				default:172
			}
		},
		computed: {
			// 主题颜色
			publicColor() {
				return '#0073bc'
			}
		},
		data() {
			return {};
		},
		methods:{
			toService(){
				this.$requst.post('/api/user/business-qr').then(res=>{
					// console.log(res,'商家客服')
					if(res.code==0) {
						if(res.data.contact.toString()){
							uni.makePhoneCall({
								phoneNumber:res.data.contact.toString(),//电话号码
								success:function(e){
									console.log(e);
								},
								fail:function(e){
									console.log(e);
								}
							})
						}else{
							this.$toolAll.tools.showToast('电话号码为空!');
						}
					}
				})
			},
		}
	}
</script>

<style>
.customer-service-bg{
	position: fixed;
	width: 120rpx;
	height: 120rpx;
	background-color: #FFFFFF;
	border-radius: 100%;
	box-shadow: 0 0 16rpx rgba(0,0,0,.4);
	animation: scale_name 1s linear alternate infinite;
	overflow: hidden;
}
.customer-service{
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	height: 100%;
}
.customer-service image{
	width: 68rpx;
	height: 68rpx;
}
.customer-service .service-btn{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
}
@keyframes scale_name{
	from{transform: scale(1);}
	to{transform: scale(1.1);}
}
</style>