uniapp开发有在线客服功能小程序项目

项目大概设计为如下图：

线上解答即为联系微信小程序的客服

• 首页有线上解答
• Tabbar有线上解答

在微信开发平台配置客服

登录微信开发平台——小程序，在基础功能->客服中添加客服

uniapp的button组件可点击跳转客服

<button open-type="contact" class="pos" >客服</button>

多个商户有自己的对应的客服，进入对应的商铺商品页面咨询客服，那么对接的就是对应商铺的客服，增加一个属性 business-id，表示子商户 ID

<button
    open-type="contact"
    :send-message-title="对应的标题" 	
    :send-message-path="对应的路径"
    :send-message-img="对应的封面"
    show-message-card
    :business-id="对应的商户id" 
    class="pos"
>
客服
</button>

Tabbar跳转客服功能问题

• 尝试1： 常规Tabbar配置，创建中转页面，进入页面获取button元素，触发点击事件。以失败告终，无法获取元素触发点击事件
• 尝试2： 常规Tabbar配置，创建button组件，使用position：fixed，定位到tabbar。以失败告终，无法覆盖到Tabbar上
• 尝试3： 自定义Tabbar。成功，Oh, Yeah!

自定义Tabbar使用的Vant Weapp的Tabbar。

<template>
	<view>
		<van-tabbar :active="currentActive" custom-class="tabbar" fixed safe-area-inset-bottom  @change="onChange">
			<van-tabbar-item v-for="(item,index) in tabbarList" :key="index">
				<template #icon>
					<image
					     :src="item.icon"
					     mode="aspectFit"
					     :style="iconStyle"
					   />
				</template>
				<template #icon-active>
					<image
					     :src="item.iconActive"
					     mode="aspectFit"
					     :style="iconStyle"
					   />
				</template>
				<template v-if="item.pagePath === 'button'">
					<text>{{ item.text }}</text>
					<button
					hover-class='none'
					open-type="contact"
					class="tabbar-pos"
					>
					</button>
				</template>
				<template v-else>
					{{ item.text }}
				</template>
			</van-tabbar-item>
		</van-tabbar>
	</view>
</template>


<style>
.tabbar-pos {
	background-color: transparent;
	border: none;
	outline: none;
	font-size: 24rpx;
	color: #646566;
	padding: 0;
	margin: 0;
	box-shadow: none;
	position: absolute;
	height: 100rpx;
	width: 50px;
	bottom: 46rpx;
	right: 24px;
	line-height: 62px;
}
.tabbar-pos::after{
	border: none;
}
</style>