sj-miniprogram/components/phone-popup/phone-popup.vue

<template>
  <view class="popup-mask" v-if="visible" @tap="closePopup">
    <view class="popup-content" @tap.stop>
      <view class="popup-header">
        <view class="logo-circle"></view>
        <text class="title">审计之家</text>
      </view>
      
      <view class="popup-body">
        <view class="phone-title">你的手机号</view>
        <view class="phone-row">
          <view class="phone-info">
            <text class="phone-num">13888888888</text>
            <text class="phone-desc">微信绑定号码</text>
          </view>
          <icon type="success_no_circle" size="20" color="#09BB07"/>
        </view>
        <view class="use-other">使用其它头像和昵称</view>
      </view>
      
      <view class="popup-footer">
        <button class="btn-cancel" @tap="closePopup">取消</button>
        <button class="btn-allow" @tap="allowLogin">允许</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="js">
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:visible', 'allow']);

const closePopup = () => {
  emit('update:visible', false);
};

const allowLogin = () => {
  emit('allow');
};
</script>

<style lang="scss" scoped>
@import './phone-popup.scss';
</style>