assessment-front/pages_order/service/popupPhone.vue

<template>
  <uv-popup 
    ref="popup"
    :overlayOpacity="0"
    mode="center"
    bgColor="none"
  >
    <view class="popup__view">
      <image class="bg" src="@/pages_order/static/service/bg-popup-phone.png" mode="widthFix"></image>
      <view class="flex flex-column content">
        <text class="title">电话咨询</text>
        <view class="flex phone">
          <view class="flex icon" @click="onCall">
            <image class="img" src="@/pages_order/static/service/icon-phone.png" mode="widthFix"></image>
          </view>
          <view>{{ phone }}</view>
        </view>
        <button class="btn" @click="onCopy()">复制手机号</button>
      </view>
    </view>
  </uv-popup>
</template>

<script>
  import { mapState } from 'vuex'

  import utils from '@/utils/utils.js'

	export default {
		data() {
			return {
        phone: '',
      }
    },
    computed : {
      ...mapState(['configList'])
    },
    methods: {
      open() {
        this.phone = this.configList.customer_service_phone
        this.$refs.popup.open();
      },
      close() {
        this.$refs.popup.close();
      },
      onCall() {
        uni.makePhoneCall({
          phoneNumber: this.phone,
          success() {
            console.log('安卓拨打成功');
          },
          fail() {
            console.log('安卓拨打失败');
          }
        })
      },
      onCopy() {
        utils.copyText(this.phone)
      },
    },
  }
</script>

<style scoped lang="scss">
  .popup__view {
    position: relative;
    width: 684rpx;
    min-height: 701rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
  }

  .bg {
    width: 100%;
    height: auto;
  }

  .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 69rpx 0;
    box-sizing: border-box;
    justify-content: space-between;
  }

  .title {
    font-size: 32rpx;
    font-weight: 600;
    color: #000000;
  }

  .phone {
    margin: 238rpx 0 122rpx 0;
    column-gap: 21rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #000000;

    .icon {
      width: 60rpx;
      height: 60rpx;
      .img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .btn {
    padding: 29rpx 202rpx;
    font-size: 30rpx;
    color: #FFFFFF;
    background: #014FA2;
    border-radius: 50rpx;
  }
</style>