| @ -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> | |||