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

<template>
  <u-popup
    :show="show"
    mode="center"
    @close="close"
    :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"
          :min="minCount"
          :inputWidth="56"
          :max="maxCount"
          integer
        >
          <!-- <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"
          :customStyle="{
            fontSize: '32rpx',
            marginRight: '20rpx',
            color: '#666',
            borderColor: '#ddd',
          }"
          @click="onCancel"
          >取消</u-button
        >
        <u-button
          class="btn confirm-btn"
          type="primary"
          shape="square"
          :customStyle="{
            fontSize: '32rpx',
            backgroundColor: '#2979ff',
          }"
          @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: 0,
    },
    minCount: {
      type: [Number, String],
      default: 0,
    },
    maxCount: {
      type: [Number, String],
      default: 9999,
    },
  },
  data() {
    return {
      count: 0,
      confirmCount: 0,
    };
  },
  watch: {
    show(val) {
      if (val) {
        this.count = this.defaultCount || 0;
      }
    },
    defaultCount: {
      immediate: true,
      handler(val) {
        this.count = val || 0;
      },
    },
  },
  methods: {
    close() {
      this.$emit("update:show", false);
    },
    onCancel() {
      this.close();
      this.$emit("cancel");
    },
    onConfirm() {
      this.$emit("confirm", this.count);
      this.close();
    },
  },
};
</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 {
      font-size: 32rpx;

      &.cancel-btn {
        margin-right: 20rpx;
        color: #666;
        border-color: #ddd;
      }

      &.confirm-btn {
        background-color: #2979ff;
      }
    }
  }
}
</style>