| <template> | |
|   <view> | |
|     <uv-popup ref="popup" mode="bottom" bgColor="none" > | |
|       <view class="popup__view"> | |
|         <view class="flex header"> | |
|           <view class="title">导师电话</view> | |
|           <button class="btn" @click="close">关闭</button> | |
|         </view> | |
|         <view class="flex content"> | |
|           <view>{{ phone }}</view> | |
|           <button plain class="flex btn" @click="onCall"> | |
|             <image class="btn-icon" src="@/pages_order/static/order/icon-phone.png" mode="widthFix"></image> | |
|           </button> | |
|         </view> | |
|       </view> | |
|     </uv-popup> | |
|   </view> | |
| </template> | |
| 
 | |
| <script> | |
|   export default { | |
|     data() { | |
|       return { | |
|         phone: null, | |
|       } | |
|     }, | |
|     methods: { | |
|       open(phone) { | |
|         this.phone = phone | |
|         this.$refs.popup.open() | |
|       }, | |
|       close() { | |
|         this.$refs.popup.close() | |
|       }, | |
|       onCall() { | |
|         uni.makePhoneCall({ | |
|           phoneNumber: this.phone, | |
|           success() { | |
|             console.log('安卓拨打成功'); | |
|           }, | |
|           fail() { | |
|             console.log('安卓拨打失败'); | |
|           } | |
|         }) | |
|       }, | |
|     }, | |
|   } | |
| </script> | |
| 
 | |
| <style lang="scss" scoped> | |
| 
 | |
|   .popup__view { | |
|     width: 100vw; | |
|     display: flex; | |
|     flex-direction: column; | |
|     box-sizing: border-box; | |
|     font-family: PingFang SC; | |
|     font-weight: 400; | |
|     line-height: 1.4; | |
|     background: #FFFFFF; | |
|     border-top-left-radius: 32rpx; | |
|     border-top-right-radius: 32rpx; | |
|   } | |
| 
 | |
|   .header { | |
|     position: relative; | |
|     width: 100%; | |
|     padding: 24rpx 0; | |
|     box-sizing: border-box; | |
|     border-bottom: 2rpx solid #EEEEEE; | |
| 
 | |
|     .title { | |
|       font-family: PingFang SC; | |
|       font-weight: 500; | |
|       font-size: 34rpx; | |
|       line-height: 1.4; | |
|       color: #181818; | |
|     } | |
| 
 | |
|     .btn { | |
|       font-family: PingFang SC; | |
|       font-weight: 500; | |
|       font-size: 32rpx; | |
|       line-height: 1.4; | |
|       color: #8B8B8B; | |
|       position: absolute; | |
|       top: 26rpx; | |
|       left: 40rpx; | |
|     } | |
| 
 | |
|   } | |
| 
 | |
|   .content { | |
|     padding: 84rpx; | |
|     column-gap: 12rpx; | |
|     font-size: 36rpx; | |
|     color: #181818; | |
| 
 | |
|     .btn { | |
|       border: none; | |
|       width: 72rpx; | |
|       height: 72rpx; | |
|       background: #F6F6F6; | |
|       border-radius: 50%; | |
|       overflow: hidden; | |
| 
 | |
|       &-icon { | |
|         width: 40rpx; | |
|         height: auto; | |
|       } | |
|     } | |
|   } | |
| 
 | |
| </style> |