APP/components/MessagePopup/MessagePopup.vue

<template>
  <view class="message-popup" v-if="visible">
    <view class="popup-mask" @click="handleMaskClick"></view>
    <view 
      class="popup-content" 
      :style="{ 
        backgroundColor: bgColor || getTypeStyle('bgColor'),
        borderColor: borderColor || getTypeStyle('borderColor'),
        color: textColor || getTypeStyle('textColor')
      }"
    >
	<view v-if="showHeader&&headerTxt" class="header"
	
	>{{headerTxt}}</view>
	
     <view v-if="visibleClose" class="rightClose" 
	 :style="{color:textColor || getTypeStyle('textColor')}"
	 @click="closeClick"
	 >x</view>
      <view v-if="!visiblePrompt">
        <image 
          v-if="iconUrl" 
          :src="iconUrl" 
          mode="aspectFit" 
          class="popup-icon"
          :style="{ tintColor: textColor || getTypeStyle('textColor') }"
        ></image>
        <view class="popup-message">{{ message }}</view>
      </view>
      
     
      <view v-else class="popup-prompt">
        <text class="popup-prompt-title">{{ promptTitle || '请输入信息' }}</text>
        <input 
          class="popup-prompt-input"  
          :placeholder="promptPlaceholder" 
          :value="modelValue"
          @input="handleInput"
          @confirm="handleButtonClick"
        />
      </view>
      
	  <view class="popBtnContent">
		  
		  <view
		    class="popup-button-cancel" 
		   :style="{display:showCancel?'block':'none'}"
		    @click="handleCancelClick"
		  >{{ buttonCancelText?buttonCancelText:'取消' }}</view>
		  
		  <view
		    class="popup-button" 
		    :style="{ 
		      backgroundColor: buttonBgColor || getTypeStyle('buttonBgColor'),
		      color: buttonTextColor || getTypeStyle('buttonTextColor')
		    }"
		    @click="handleButtonClick"
		  >{{ buttonText }}</view>
		  
		  
	  </view>
     
	  
	  
    </view>
  </view>
</template>

<script>
export default {
  name: 'MessagePopup',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
	visibleClose:{
		type:Boolean,
		default:true
	},
    visiblePrompt: {
      type: Boolean,
      default: false
    },
    promptTitle: String,
    promptPlaceholder: {
      type: String,
      default: "请输入"
    },
    modelValue: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'info',
      validator: value => ['success', 'error', 'info','custom'].includes(value)
    },
    bgColor: String,
    borderColor: String,
    textColor: String,
    buttonBgColor: String,
    buttonTextColor: String,
    iconUrl: String,
    message: {
      type: String,
      default: ''
    },
    buttonText: {
      type: String,
      default: '确定'
    },
	buttonCancelText:{
		type:String,
		default:'取消'
	},
	showCancel:{
		type:Boolean,
		default:false
	},
	showHeader:{
		type:Boolean,
		default:false
	},
	headerTxt:{
		type:String,
		default:""
	}
  },
  data() {
    return {
      inputValue: this.modelValue
    }
  },
  watch: {
    // 监听外部值变化
    modelValue(newVal) {
      this.inputValue = newVal
    },
    // 监听模式切换
    visiblePrompt(newVal) {
      console.log('[MessagePopup] visiblePrompt changed to:', newVal)
      // 重置输入值
      if (newVal) {
        this.inputValue = this.modelValue
      }
    }
  },
  mounted() {
    
  },
  methods: {
    getTypeStyle(styleType) {
      const styles = {
        success: {
          bgColor: '#f0fff0',
          borderColor: '#52c41a',
          textColor: '#389e0d',
          buttonBgColor: '#52c41a',
          buttonTextColor: '#FFFFFF'
        },
        error: {
          bgColor: '#fff0f0',
          borderColor: '#ff4d4f',
          textColor: '#cf1322',
          buttonBgColor: '#ff4d4f',
          buttonTextColor: '#FFFFFF'
        },
        info: {
          bgColor: '#e6f7ff',
          borderColor: '#1890ff',
          textColor: '#0050b3',
          buttonBgColor: '#1890ff',
          buttonTextColor: '#FFFFFF'
        }
      }
      return styles[this.type][styleType]
    },
    handleButtonClick() {
      console.log('[MessagePopup] Button clicked with value:', this.inputValue)
      this.$emit('buttonClick', this.inputValue)
    },
    handleMaskClick() {
      console.log('[MessagePopup] Mask clicked')
      this.$emit('maskClick')
    },
	closeClick(){
		 this.$emit('closePop')
	},
	handleCancelClick(){
		this.$emit('cancelPop');
	},
    handleInput(e) {
		
      this.inputValue = e.detail.value
      this.$emit('update:modelValue', this.inputValue)
    }
  }
}
</script>

<style>
.message-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
  position: relative;
  width: 80%;
  max-width: 400px;
  border-radius: 12px;
  padding: 30rpx;
  background-color: white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border-width: 2rpx;
  border-style: solid;
  box-sizing: border-box;
  z-index: 10;
}
.header{
	width:100%;
	color: rgba(255, 255, 255, 0.87);
	font-family: PingFang SC;
	font-size: 32rpx;
	font-weight: 600;
	height: 80rpx;
	line-height: 80rpx;
	letter-spacing: 0.07px;
	text-align: center;
}
.rightClose{
	position: absolute;
	right: 20rpx;
	top: 20rpx;
	color: #FFFFFF;
	font-size: 36rpx;
	width: 24rpx;
	height: 24rpx;
	line-height: 24rpx;
}
.popup-icon {
  width: 60rpx;
  height: 60rpx;
  margin: 20rpx auto;
  display: block;
}

.popup-message {
  font-size: 28rpx;
  text-align: center;
  padding: 20rpx 0rpx 30rpx 0rpx;

  
  font-weight: 400;

  letter-spacing: 0.07px;
}

.popup-prompt {
  width: 100%;
}

.popup-prompt-title {
  display: block;
  font-size: 32rpx;
  text-align: center;
  margin-bottom: 20rpx;
  font-weight: 500;
}

.popup-prompt-input {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  margin-bottom: 30rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.popBtnContent{
	width:100%;
	height: 60rpx;
	 margin-top: 20rpx;
	     display: flex
	 ;
	     flex-direction: row;
	     flex-wrap: nowrap;
	     align-content: center;
	     justify-content: space-evenly;
	     align-items: center;
}
.popup-button {
  width: 30%;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 44rpx;
  
  text-align: center;
  font-size: 24rpx;
  font-weight: 500;
  letter-spacing: 4rpx;
  border: none;
  outline: none;
  cursor: pointer;
 
}

.popup-button-cancel{
	width: 30%;
	height: 60rpx;
	line-height: 60rpx;
	border-radius: 44rpx;
	
	text-align: center;
	font-size: 24rpx;
	font-weight: 500;
	letter-spacing: 4rpx;
	border: none;
	outline: none;
	cursor: pointer;
	 
	 box-sizing: border-box;
	 border: 1px solid rgba(255, 255, 255, 0.5);

	 background-color: #00000000;
	
color: #FFFFFFde;
}

.popup-prompt{
	width: 100%;
	height: 60rpx;
	line-height: 60rpx;
padding-top: 40rpx;	
}


.popup-prompt-title{
	color: rgba(255, 255, 255, 0.6);
	text-align: right;
	width: 30%;
	float: left;
	box-sizing: border-box;
	white-space:nowrap;
	padding-right: 10rpx;
}
.popup-prompt-input{
	float: left;
	width: 70%;
	height: 60rpx;
	line-height: 60rpx;
	color: rgba(255, 255, 255, 0.87) ;
	
	box-sizing: border-box;
	border: 2rpx solid rgba(255, 255, 255, 0.4);
	border-radius: 8rpx;

}


</style>