You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 lines
2.2 KiB
103 lines
2.2 KiB
1 year ago
|
<template>
|
||
|
|
<!-- 在线客服 -->
|
||
|
|
<view v-if="!(params.type === 'chat' && !isMpWeiXin)" class="diy-service" :style="{ '--right': `${right}px`, '--bottom': `${bottom}px` }">
|
||
|
|
<!-- 拨打电话 -->
|
||
|
|
<block v-if="params.type === 'phone'">
|
||
|
|
<view class="service-icon" @click="onMakePhoneCall">
|
||
|
|
<img class="image" :src="params.image"/>
|
||
|
|
</view>
|
||
|
|
</block>
|
||
|
|
<!-- 在线聊天 -->
|
||
|
|
<block v-else-if="params.type == 'chat'">
|
||
|
|
<button open-type="contact" class="btn-normal">
|
||
|
|
<view class="service-icon">
|
||
|
|
<img class="image" :src="params.image"/>
|
||
|
|
</view>
|
||
|
|
</button>
|
||
|
|
</block>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { rpx2px } from '@/utils/util'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 组件的属性列表
|
||
|
|
* 用于组件自定义设置
|
||
|
|
*/
|
||
|
|
props: {
|
||
|
|
itemStyle: Object,
|
||
|
|
params: Object
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 私有数据,组件的初始数据
|
||
|
|
* 可用于模版渲染
|
||
|
|
*/
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
isMpWeiXin: false,
|
||
|
|
isShow: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
right() {
|
||
|
|
return rpx2px(2 * this.itemStyle.right)
|
||
|
|
},
|
||
|
|
bottom() {
|
||
|
|
return rpx2px(2 * this.itemStyle.bottom)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
created() {
|
||
|
|
// #ifdef MP-WEIXIN
|
||
|
|
this.isMpWeiXin = true
|
||
|
|
// #endif
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 组件的方法列表
|
||
|
|
* 更新属性和数据的方法与更新页面数据的方法类似
|
||
|
|
*/
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 点击拨打电话
|
||
|
|
*/
|
||
|
|
onMakePhoneCall(e) {
|
||
|
|
uni.makePhoneCall({
|
||
|
|
phoneNumber: this.params.tel
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.diy-service {
|
||
|
|
position: fixed;
|
||
|
|
z-index: 999;
|
||
|
|
right: calc(var(--window-right) + var(--right));
|
||
|
|
// 设置ios刘海屏底部横线安全区域
|
||
|
|
bottom: calc(constant(safe-area-inset-bottom) + var(--window-bottom) + var(--bottom));
|
||
|
|
bottom: calc(env(safe-area-inset-bottom) + var(--window-bottom) + var(--bottom));
|
||
|
|
|
||
|
|
.service-icon {
|
||
|
|
padding: 10rpx;
|
||
|
|
|
||
|
|
.image {
|
||
|
|
display: block;
|
||
|
|
width: 90rpx;
|
||
|
|
height: 90rpx;
|
||
|
|
border-radius: 50%;
|
||
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|