@ -0,0 +1,40 @@ | |||||
// 文字益处处理 | |||||
.text-ellipsis{ | |||||
overflow:hidden; //超出的文本隐藏 | |||||
text-overflow:ellipsis; //溢出用省略号显示 | |||||
white-space:nowrap; //溢出不换行 | |||||
} | |||||
.text-ellipsis-2{ | |||||
overflow: hidden; | |||||
text-overflow: ellipsis; | |||||
display:-webkit-box; //作为弹性伸缩盒子模型显示。 | |||||
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列 | |||||
-webkit-line-clamp:2; //显示的行 | |||||
} | |||||
.text-ellipsis-3{ | |||||
overflow: hidden; | |||||
text-overflow: ellipsis; | |||||
display:-webkit-box; //作为弹性伸缩盒子模型显示。 | |||||
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列 | |||||
-webkit-line-clamp:3; //显示的行 | |||||
} | |||||
.share{ | |||||
padding: 0; | |||||
margin: 0; | |||||
background-color: #fff; | |||||
display: flex !important; | |||||
flex-direction: column !important; | |||||
justify-content: center !important; | |||||
align-items: center !important; | |||||
font-size: 26rpx; | |||||
} | |||||
.share::after{ | |||||
border: none; | |||||
padding: 0; | |||||
margin: 0; | |||||
width: 0; | |||||
height: 0; | |||||
} |
@ -1,81 +0,0 @@ | |||||
<template> | |||||
<view @click="$emit('confirm')" :style="{ | |||||
position: 'fixed', | |||||
display: 'flex', | |||||
justifyContent: 'center', | |||||
alignItems: 'center', | |||||
width: '100vw', | |||||
bottom: bottom | |||||
}"> | |||||
<button :style="{ | |||||
color: color, | |||||
backgroundColor: backgroundColor, | |||||
fontSize: fontSize, | |||||
width: width, | |||||
height: height, | |||||
borderRadius: borderRadius | |||||
}"> | |||||
{{ text }} | |||||
</button> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
props: { | |||||
color: { | |||||
default: '#000000' // 设置默认颜色值 | |||||
}, | |||||
backgroundColor: { | |||||
default: '#FFFFFF' // 设置默认背景颜色 | |||||
}, | |||||
fontSize: { | |||||
default: '36rpx' // 设置默认字体大小 | |||||
}, | |||||
text: { | |||||
default: '按钮' // 设置默认文本内容 | |||||
}, | |||||
width: { | |||||
default: '150rpx' // 设置默认宽度 | |||||
}, | |||||
height: { | |||||
default: '60rpx' // 设置默认高度 | |||||
}, | |||||
borderRadius: { | |||||
default: '40rpx' // 设置默认高度 | |||||
}, | |||||
bottom: { | |||||
default: '40rpx' // 设置默认距离底部高度 | |||||
}, | |||||
}, | |||||
data() { | |||||
return { | |||||
} | |||||
}, | |||||
methods: { | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="less"> | |||||
// .container { | |||||
// position: fixed; | |||||
// display: flex; | |||||
// justify-content: center; | |||||
// /* 水平居中 */ | |||||
// align-items: center; | |||||
// /* 垂直居中 */ | |||||
// width: 100%; | |||||
// /* 使容器宽度覆盖整个屏幕 */ | |||||
// } | |||||
button { | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
} | |||||
</style> |
@ -0,0 +1,116 @@ | |||||
<template> | |||||
<!-- 联系客服弹框 --> | |||||
<uv-overlay :show="show" @click="close"> | |||||
<view class="warp"> | |||||
<view class="rect" @tap.stop> | |||||
<view class="title">联系客服</view> | |||||
<view class="center">确定拨打客服电话?</view> | |||||
<view class="bottom"> | |||||
<view class="btn1" | |||||
@click="close"> | |||||
取消 | |||||
</view> | |||||
<view class="btn2" | |||||
@click="confirm"> | |||||
确定 | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</uv-overlay> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return { | |||||
show: false, | |||||
phone:'', | |||||
} | |||||
}, | |||||
onLoad() { | |||||
this.getCustomPhone() | |||||
}, | |||||
methods: { | |||||
getCustomPhone(){ | |||||
this.$api('customUser', {}, res => { | |||||
this.phone = res.result.phone | |||||
}) | |||||
}, | |||||
open() { | |||||
this.show = true | |||||
}, | |||||
close() { | |||||
this.show = false | |||||
}, | |||||
// 拨打电话 | |||||
confirm() { | |||||
this.show = false | |||||
uni.makePhoneCall({ | |||||
phoneNumber: this.phone, | |||||
success() { | |||||
console.log('安卓拨打成功'); | |||||
}, | |||||
fail() { | |||||
console.log('安卓拨打失败'); | |||||
} | |||||
}) | |||||
}, | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
.warp { | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
height: 100%; | |||||
} | |||||
.rect { | |||||
width: 600rpx; | |||||
height: 300rpx; | |||||
background-color: #fff; | |||||
border-radius: 20rpx; | |||||
overflow: hidden; | |||||
.title { | |||||
padding: 10rpx 0 0 15rpx; | |||||
background-color: $uni-color; | |||||
color: #FFF; | |||||
text-align: left; | |||||
width: 100%; | |||||
height: 18%; | |||||
font-size: 36rpx; | |||||
} | |||||
.center { | |||||
height: 40%; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
font-size: 36rpx; | |||||
} | |||||
.bottom { | |||||
display: flex; | |||||
justify-content: center; | |||||
gap: 50rpx; | |||||
view{ | |||||
height: 60rpx; | |||||
line-height: 60rpx; | |||||
padding: 0 50rpx; | |||||
border-radius: 30rpx; | |||||
} | |||||
.btn1{ | |||||
background-color: #fff; | |||||
} | |||||
.btn2{ | |||||
background-color: $uni-color; | |||||
color: #fff; | |||||
} | |||||
} | |||||
} | |||||
</style> |