studytour-front/pages_order/order/components/contactMentorPopup.vue

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