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.
599 lines
14 KiB
599 lines
14 KiB
<template>
|
|
<view>
|
|
<view class="tui-fab-mask" :class="{'tui-visible':isOpen}" @tap.stop="handleClickCancel"></view>
|
|
<view class="tui-fab-btn" :class="{'tui-visible':isOpen,'tui-fab-hidden':hidden}" :style="'right: ' + left + 'px; bottom:' + (Number(top)+50) + 'px;'">
|
|
<view class="tui-fab-item-box" :class="{'tui-fab-item-left':lefts && !rights && item.imgUrl}" v-for="(item,index) in btnList"
|
|
:key="index" @tap.stop="handleClick(item.id)">
|
|
<view :class="[lefts && !rights?'tui-text-left':'tui-text-right']" v-if="item.imgUrl" :style="{fontSize:item.fontSize+'rpx',color:item.color}">{{item.text || ""}}</view>
|
|
<view class="tui-fab-item" :style="{width:widths+'rpx',height:heights+'rpx',background:item.bgColor || bgColor,borderRadius:radius}">
|
|
<view class="tui-fab-title" v-if="!item.imgUrl" :style="{fontSize:item.fontSize+'rpx',color:item.color}">{{item.text || ""}}</view>
|
|
<image :src="item.imgUrl" class="tui-fab-img" v-else :style="{width:item.imgWidth+'rpx',height:item.imgHeight+'rpx'}"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="CustomerService.wxappcur == 1">
|
|
<button
|
|
id="_drag_button"
|
|
class="drag buttondrag"
|
|
open-type="contact"
|
|
:style="'left: ' + left + 'px; bottom:' + top + 'px;'"
|
|
@touchstart="touchstart"
|
|
@touchmove.stop.prevent="touchmovel"
|
|
@touchend="touchend"
|
|
hover-class="none"
|
|
:class="{transition: isDock && !isMove }"
|
|
>
|
|
<image :src="CustomerService.susicon" class="img" :style="{width: CustomerService.logowidth + 'px',height:CustomerService.logowidth + 'px'}" mode="aspectFit"></image>
|
|
</button>
|
|
</view>
|
|
<view v-else>
|
|
<view v-if="CustomerService.logoloca == 1">
|
|
<view
|
|
id="_drag_button"
|
|
class="drag"
|
|
:style="'left: ' + left + 'px; bottom:' + top + 'px;'"
|
|
@touchstart="touchstart"
|
|
@touchmove.stop.prevent="touchmovel"
|
|
@touchend="touchend"
|
|
@click.stop.prevent="click(-1)"
|
|
:class="{transition: isDock && !isMove }"
|
|
>
|
|
<image :src="CustomerService.susicon" class="img" :style="{width: CustomerService.logowidth + 'px',height:CustomerService.logowidth + 'px'}" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="CustomerService.logoloca == 0">
|
|
<view
|
|
id="_drag_button"
|
|
class="drag"
|
|
:style="'right: ' + left + 'px; bottom:' + top + 'px;'"
|
|
@touchstart="touchstart"
|
|
@touchmove.stop.prevent="touchmover"
|
|
@touchend="touchend"
|
|
@click.stop.prevent="click(-1)"
|
|
:class="{transition: isDock && !isMove }"
|
|
>
|
|
<image :src="CustomerService.susicon" class="img" :style="{width: CustomerService.logowidth + 'px',height:CustomerService.logowidth + 'px'}" mode="aspectFit"></image>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import App from '@/common/js/app.js'
|
|
export default {
|
|
name: 'drag-button',
|
|
props: {
|
|
isDock:{
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
existTabBar:{
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
btndata:{
|
|
type:Object,
|
|
default:null
|
|
},
|
|
lefts: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
//rpx 当为0时且left不为0，值为auto
|
|
rights: {
|
|
type: Number,
|
|
default: 80
|
|
},
|
|
//rpx bottom值
|
|
bottoms: {
|
|
type: Number,
|
|
default: 100
|
|
},
|
|
//默认按钮 宽度 rpx
|
|
widths: {
|
|
type: Number,
|
|
default: 108
|
|
},
|
|
//默认按钮 高度 rpx
|
|
heights: {
|
|
type: Number,
|
|
default: 108
|
|
},
|
|
//圆角值
|
|
radius: {
|
|
type: String,
|
|
default: "50%"
|
|
},
|
|
//默认按钮背景颜色
|
|
bgColor: {
|
|
type: String,
|
|
default: "#5677fc"
|
|
},
|
|
//字体颜色
|
|
color: {
|
|
type: String,
|
|
default: "#fff"
|
|
},
|
|
//拓展按钮
|
|
// bgColor: "#5677fc",
|
|
// //图标/图片地址
|
|
// imgUrl: "/static/images/fab/fab_reward.png",
|
|
// //图片高度 rpx
|
|
// imgHeight: 60,
|
|
// //图片宽度 rpx
|
|
// imgWidth: 60,
|
|
// //名称
|
|
// text: "名称",
|
|
// //字体大小
|
|
// fontSize: 30,
|
|
// //字体颜色
|
|
// color: "#fff"
|
|
//点击遮罩 是否可关闭
|
|
maskClosable: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
top:0,
|
|
left:0,
|
|
width: 0,
|
|
height: 0,
|
|
offsetWidth: 0,
|
|
offsetHeight: 0,
|
|
windowWidth: 0,
|
|
windowHeight: 0,
|
|
isMove: true,
|
|
edge: 10,
|
|
text: '按钮',
|
|
CustomerService:'',
|
|
isOpen: false,
|
|
hidden: true,
|
|
timer: null,
|
|
btnList: [{
|
|
bgColor: "#16C2C2",
|
|
//名称
|
|
text: "客服",
|
|
//字体大小
|
|
fontSize: 28,
|
|
id:0,
|
|
//字体颜色
|
|
color: "#fff"
|
|
}
|
|
// ,
|
|
// {
|
|
// bgColor: "#FFA000",
|
|
// //名称
|
|
// text: "链接",
|
|
// //字体大小
|
|
// fontSize: 28,
|
|
// id:2,
|
|
// //字体颜色
|
|
// color: "#fff"
|
|
// }
|
|
]
|
|
}
|
|
},
|
|
onHide() {
|
|
console.log('进了onhide');
|
|
},
|
|
mounted() {
|
|
const sys = uni.getSystemInfoSync();
|
|
let _this = this;
|
|
//#ifdef APP-PLUS
|
|
let obj = {
|
|
bgColor: "#64B532",
|
|
//名称
|
|
text: "分享",
|
|
//字体大小
|
|
fontSize: 28,
|
|
id:1,
|
|
//字体颜色
|
|
color: "#fff"};
|
|
this.btnList.push(obj);
|
|
//#endif
|
|
this.windowWidth = sys.windowWidth;
|
|
this.windowHeight = sys.windowHeight;
|
|
this.CustomerService = uni.getStorageSync('CustomerService');
|
|
let btnleftAndbottom = uni.getStorageSync('btnleftAndbottom');
|
|
if(btnleftAndbottom){
|
|
this.left = btnleftAndbottom.left;
|
|
this.top = btnleftAndbottom.top;
|
|
}else{
|
|
this.left = this.CustomerService.logoleft;
|
|
this.top = this.CustomerService.logobottom;
|
|
}
|
|
// #ifdef APP-PLUS
|
|
this.existTabBar && (this.windowHeight -= 50);
|
|
// #endif
|
|
if (sys.windowTop) {
|
|
this.windowHeight += sys.windowTop;
|
|
}
|
|
uni.$on('getFarBtn',function(data){
|
|
_this.getFar();
|
|
})
|
|
},
|
|
methods: {
|
|
getLeft() {
|
|
let val = "auto"
|
|
if (this.lefts && !this.rights) {
|
|
val = this.left + 'rpx'
|
|
}
|
|
return val
|
|
},
|
|
getRight() {
|
|
let val = this.rights + 'rpx'
|
|
if (this.lefts && !this.rights) {
|
|
val = "auto"
|
|
}
|
|
return val
|
|
},
|
|
handleClick: function(index) {
|
|
// this.hidden = false
|
|
// clearTimeout(this.timer)
|
|
// if (index == -1 && this.btnList.length) {
|
|
// this.isOpen = !this.isOpen
|
|
// } else {
|
|
// this.$emit("click", {
|
|
// index: index
|
|
// })
|
|
// this.isOpen = false
|
|
// }
|
|
// if (!this.isOpen) {
|
|
// this.timer = setTimeout(() => {
|
|
// this.hidden = true
|
|
// }, 200)
|
|
// }
|
|
if(index == 0){
|
|
this.$emit('btnClick');
|
|
}else if(index == 1){
|
|
let AppShareData = uni.getStorageSync('AppShareData');
|
|
console.log('分享数据测试',JSON.stringify(AppShareData));
|
|
// //#ifdef APP-PLUS
|
|
// uni.share({
|
|
// provider: 'weixin', // 分享服务提供商（即weixin|qq|sinaweibo）
|
|
// scene: "WXSceneSession", //分享到聊天界面
|
|
// type: 5, //分享形式 5:小程序
|
|
// imageUrl: AppShareData.img,//官方规定分享图比例是5：4,其它尺寸可能显示不全。
|
|
// title: '欢迎体验uniapp',
|
|
// miniProgram: {
|
|
// id: 'gh_59d3d43b1c12', //微信小程序原始id
|
|
// path: 'pages/mainPages/index/index', //点击链接进入的页面
|
|
// type: 0, //微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
|
|
// webUrl: 'https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%CA%D6%BB%FA%B1%DA%D6%BD%CD%BC%C6%AC&fr=ala&ala=1&alatpl=normal&pos=0' //兼容低版本的网页链接
|
|
// },
|
|
// success: ret => {
|
|
// console.log(JSON.stringify(ret));
|
|
// }
|
|
// });
|
|
// //#endif
|
|
//#ifdef APP-PLUS
|
|
uni.share({
|
|
provider: "weixin",
|
|
scene: "WXSceneSession",
|
|
type: 0,
|
|
// href: AppShareData.mpurl,
|
|
href:'https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%CA%D6%BB%FA%B1%DA%D6%BD%CD%BC%C6%AC&fr=ala&ala=1&alatpl=normal&pos=0',
|
|
title: AppShareData.title,
|
|
summary: AppShareData.desc,
|
|
imageUrl: AppShareData.img,
|
|
success: function (res) {
|
|
console.log(JSON.stringify(res));
|
|
uni.showToast({
|
|
title: '已分享',
|
|
duration: 2000
|
|
});
|
|
},
|
|
|
|
fail: function (err) {
|
|
|
|
var errrr = JSON.stringify(err);
|
|
if(errrr){
|
|
uni.showModal({
|
|
title: '表单不能留空',
|
|
content: '请完善所有信息再发起分享',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
console.log('用户点击确定');
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
//#endif
|
|
}else{
|
|
this.$emit('btnClick');
|
|
}
|
|
},
|
|
handleClickCancel: function() {
|
|
// if (!this.maskClosable) return;
|
|
//#ifndef APP-PLUS
|
|
this.$emit('btnClick');
|
|
//#endif
|
|
//#ifdef APP-PLUS
|
|
this.isOpen = !this.isOpen
|
|
//#endif
|
|
|
|
},
|
|
getFar(){
|
|
let btnleftAndbottom = uni.getStorageSync('btnleftAndbottom');
|
|
if(btnleftAndbottom){
|
|
this.left = btnleftAndbottom.left;
|
|
this.top = btnleftAndbottom.top;
|
|
}else{
|
|
this.left = this.CustomerService.logoleft;
|
|
this.top = this.CustomerService.logobottom;
|
|
}
|
|
},
|
|
click(index) {
|
|
//#ifdef APP-PLUS
|
|
this.hidden = false
|
|
clearTimeout(this.timer)
|
|
if (index == -1 && this.btnList.length) {
|
|
this.isOpen = !this.isOpen
|
|
// debugger
|
|
} else {
|
|
this.$emit("click", {
|
|
index: index
|
|
})
|
|
this.isOpen = false
|
|
}
|
|
if (!this.isOpen) {
|
|
this.timer = setTimeout(() => {
|
|
this.hidden = true
|
|
}, 200)
|
|
}
|
|
//#endif
|
|
//#ifndef APP-PLUS
|
|
if(this.CustomerService.wxappcur == 2){
|
|
//#ifdef H5
|
|
App.navigationTo({
|
|
url: this.CustomerService.customerurl
|
|
});
|
|
// #endif
|
|
//#ifdef MP-WEIXIN
|
|
wx.openCustomerServiceChat({
|
|
extInfo: {url: this.CustomerService.customerurl},
|
|
corpId: this.CustomerService.enterpriseid,
|
|
success(res) {
|
|
|
|
}
|
|
})
|
|
//#endif
|
|
|
|
}else{
|
|
this.$emit('btnClick');
|
|
}
|
|
|
|
//#endif
|
|
|
|
},
|
|
touchstart(e) {
|
|
this.$emit('btnTouchstart');
|
|
},
|
|
touchmovel(e){
|
|
this.width = this.btndata.width;
|
|
this.height = this.btndata.height;
|
|
this.offsetWidth = this.btndata.width/2;
|
|
this.offsetHeight = this.btndata.height/2;
|
|
// 单指触摸
|
|
if (e.touches.length !== 1) {
|
|
return false;
|
|
}
|
|
|
|
this.isMove = true;
|
|
this.left = e.touches[0].clientX - this.offsetWidth - 25;
|
|
|
|
let clientY = e.touches[0].clientY - this.offsetHeight;
|
|
// #ifdef H5
|
|
clientY += this.height;
|
|
// #endif
|
|
let edgeBottom = this.windowHeight - this.height - this.edge;
|
|
|
|
// 上下触及边界
|
|
|
|
if(this.windowHeight < (clientY - 25)){
|
|
this.top = 0
|
|
}else if(clientY < 0){
|
|
return
|
|
}else{
|
|
this.top =this.windowHeight - clientY - 25;
|
|
}
|
|
// this.top =this.windowHeight - clientY - 25
|
|
|
|
|
|
},
|
|
touchmover(e) {
|
|
this.width = this.btndata.width;
|
|
this.height = this.btndata.height;
|
|
this.offsetWidth = this.btndata.width/2;
|
|
this.offsetHeight = this.btndata.height/2;
|
|
// 单指触摸
|
|
if (e.touches.length !== 1) {
|
|
return false;
|
|
}
|
|
|
|
this.isMove = true;
|
|
this.left = this.windowWidth - e.touches[0].clientX - this.offsetWidth - 25;
|
|
|
|
let clientY = e.touches[0].clientY - this.offsetHeight;
|
|
// #ifdef H5
|
|
clientY += this.height;
|
|
// #endif
|
|
let edgeBottom = this.windowHeight - this.height - this.edge;
|
|
|
|
// 上下触及边界
|
|
if(this.windowHeight < (clientY - 25)){
|
|
this.top = 0
|
|
}else if(clientY < 0){
|
|
return
|
|
}else{
|
|
this.top =this.windowHeight - clientY - 25;
|
|
}
|
|
|
|
},
|
|
touchend(e) {
|
|
if (this.isDock) {
|
|
let edgeRigth = this.windowWidth - this.width - this.edge - 25;
|
|
setTimeout(()=>{
|
|
if (this.left < this.windowWidth / 2 - this.offsetWidth) {
|
|
this.left = -this.edge;
|
|
} else {
|
|
this.left = edgeRigth;
|
|
}
|
|
let btnleftAndbottom = {
|
|
left:this.left,
|
|
top:this.top
|
|
};
|
|
uni.setStorageSync('btnleftAndbottom',btnleftAndbottom);
|
|
},200)
|
|
}
|
|
|
|
this.isMove = false;
|
|
|
|
this.$emit('btnTouchend');
|
|
},
|
|
}}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.drag {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
// background-color: rgba(0, 0, 0, 0.5);
|
|
// box-shadow: 0 0 6upx rgba(0, 0, 0, 0.4);
|
|
color: $uni-text-color-inverse;
|
|
// width: 80upx;
|
|
// height: 80upx;
|
|
// border-radius: 50%;
|
|
font-size: $uni-font-size-sm;
|
|
position: fixed;
|
|
z-index: 999999;
|
|
|
|
&.transition {
|
|
transition: left .3s ease,top .3s ease;
|
|
}
|
|
&.transition {
|
|
transition: right .3s ease,bottom .3s ease;
|
|
}
|
|
}
|
|
.buttondrag{
|
|
padding: 0;
|
|
border-radius: 0;
|
|
}
|
|
.tui-fab-icon {
|
|
font-family: "tuifab" !important;
|
|
font-style: normal;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
padding: 10rpx;
|
|
}
|
|
|
|
.tui-icon-plus:before {
|
|
content: "\e613";
|
|
}
|
|
|
|
.tui-fab-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
position: fixed;
|
|
z-index: 99997;
|
|
}
|
|
|
|
.tui-fab-right {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.tui-fab-btn {
|
|
transform: scale(0);
|
|
transition: all 0.2s ease-in-out;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
position: fixed;
|
|
z-index: 999999;
|
|
}
|
|
|
|
.tui-fab-hidden {
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
|
|
|
|
.tui-fab-item-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
|
|
.tui-fab-item-left {
|
|
flex-flow: row-reverse;
|
|
}
|
|
|
|
.tui-fab-title {
|
|
width: 90%;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.tui-text-left {
|
|
padding-left: 28rpx;
|
|
}
|
|
|
|
.tui-text-right {
|
|
padding-right: 28rpx;
|
|
}
|
|
|
|
.tui-fab-img {
|
|
display: block;
|
|
}
|
|
|
|
.tui-fab-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.2s linear;
|
|
}
|
|
|
|
.tui-radius {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.tui-active {
|
|
transform: rotate(135deg);
|
|
}
|
|
|
|
.tui-fab-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.75);
|
|
z-index: 99996;
|
|
transition: all 0.2s ease-in-out;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.tui-visible {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
</style>
|
|
|