purchase-let/components/modal.vue

<template>
  <up-popup :show="show" round="10" @close="close" mode="center" :safeAreaInsetBottom="false">
    <view class="m-modal-popup">
      <view class="head-title-modal">{{title}}</view>
      <view class="content-modal">{{content}}</view>
      <view class="btn-box-modal">
        <view style="width: 230rpx;"><up-button @click="close" plain color="#999" :throttleTime="800">{{cancleText}}</up-button></view>
        <view style="width: 230rpx;"><up-button @click="change" color="#20B128" :throttleTime="800">{{confirmText}}</up-button></view>
      </view>
    </view>
  </up-popup>
</template>

<script setup>

  const props = defineProps({
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '确认操作吗'
    },
    content: {
      type: String,
      default: '确认后继续下一步操作'
    },
    confirmText: {
      type: String,
      default: '确认'
    },
    cancleText: {
      type: String,
      default: '取消'
    },
  })

  const emit = defineEmits(['close', 'change']);
  const close = () => {
    emit('close');
  }
  
  const change = ()=>{
    emit('change');
  }

</script>

<style scoped lang="scss">
  .m-modal-popup{
    width: 500rpx;
    padding: 40rpx;
    .head-title-modal{
      font-size: 32rpx;
      text-align: center;
    }
    .content-modal{
      font-size: 26rpx;
      color: #999;
      text-align: center;
      padding: 40rpx 0;
    }
    .btn-box-modal{
      display: flex;
      justify-content: space-between;
    }
  }
</style>