jsh_erp_app/pages/inventory-task/components/actionNumPopup.vue

<template>
  <u-popup
    :show="show"
    mode="center"
    @close="close"
    @open="open"
    :round="10"
    :closeOnClickOverlay="false"
  >
    <view class="action-num-popup">
      <view class="icon-wrapper">
					<u-image src="@/static/image/error-img.png" width="112rpx" height="112rpx"></u-image>
				</view>
      <view class="title">请确认该商品盘点数量</view>
      <view class="num-box">
        <u-number-box v-model="count">
          <view slot="minus" class="minus">
            <u-icon name="minus" color="#0256FF" size="12"></u-icon>
          </view>
          <text slot="input" class="input">{{count}}</text>
          <view slot="plus" class="plus">
            <u-icon name="plus" color="#ffffff" size="12"></u-icon>
          </view>
        </u-number-box>
      </view>
      <view class="btn-group">
        <u-button 
          class="btn cancel-btn" 
          :plain="true" 
          shape="square" 
          @click="onCancel"
        >取消</u-button>
        <u-button 
          class="btn confirm-btn" 
          type="primary" 
          shape="square" 
          @click="onConfirm"
        >确认</u-button>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: "actionNumPopup",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    defaultCount: {
      type: [Number, String],
      default: 1
    },
    minCount: {
      type: Number,
      default: 0
    },
    maxCount: {
      type: Number,
      default: 9999
    }
  },
  data() {
    return {
      count: 2,
    };
  },
  watch: {
    show(newVal) {
      if (newVal) {
        this.count = this.defaultCount || 2;
      }
    },
    defaultCount: {
      immediate: true,
      handler(val) {
        this.count = val || 2;
      }
    }
  },
  methods: {
    close() {
      this.$emit('update:show', false);
    },
    open() {},
    onNumberChange(value) {
      this.count = value;
    },
    onCancel() {
      this.close();
      this.$emit('cancel');
    },
    onConfirm() {
      this.close();
      this.$emit('confirm', this.count);
    }
  },
};
</script>

<style lang="scss" scoped>
.action-num-popup {
  padding: 40rpx 30rpx;
	width: 580rpx;
  
  .icon-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 20rpx;
  }
  
  .title {
    font-size: 32rpx;
    color: #333;
    text-align: center;
    font-weight: 500;
    margin-bottom: 40rpx;
  }
  
  .num-box {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0;
		.input {
			width: 112rpx;
			text-align: center;
			border-bottom: 1px solid #0256FF;
			margin: 0 8rpx;
		}
		.minus {
			width: 40rpx;
			height: 40rpx;
			border-radius: 8rpx;
			border: 1px solid #0256FF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.plus {
			width: 40rpx;
			height: 40rpx;
			border-radius: 8rpx;
			background-color: #0256FF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

  .btn-group {
    display: flex;
    justify-content: space-between;
    
    .btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      
      &.cancel-btn {
        margin-right: 20rpx;
        color: #666;
        border-color: #ddd;
      }
      
      &.confirm-btn {
        background-color: #2979ff;
      }
    }
  }
}
</style>