commodity-manage-app/common/betone_components/betone-modal.vue

<template>
  <view class="modal-warp">
    <u-modal
      class="modal-css"
      v-model="show"
      :border-radius="borderRadius"
      :show-title="false"
      :show-cancel-button="false"
      :show-confirm-button="false"
    >
      <view class="modal-content">
        <view class="modal-title" v-if="showTitle">{{ title }}</view>
        <view class="content-css">
          <block v-if="content">
            {{ content }}
          </block>
          <block v-else>
            <slot></slot>
          </block>
        </view>
        <view class="modal-btns" v-if="showCancelButton || showConfirmButton">
          <view
            class="modal-btn cancel-btn"
            :style="{ backgroundColor: cancelBgColor, color: cancelColor }"
            v-if="showCancelButton"
            @click="btnClick('cancel')"
            >{{ modalCancelText }}</view
          >
          <view
            class="modal-btn confirm-btn"
            :style="{ backgroundColor: confirmBgColor, color: confirmColor }"
            v-if="showConfirmButton"
            @click="btnClick('confirm')"
            >{{ modalConfirmText }}</view
          >
        </view>
      </view>
    </u-modal>
  </view>
</template>
<script>
export default {
  name: "betoneModal",
  model: {
    prop: "value",
    event: "changeShow",
  },
  watch: {
    value: {
      immediate: true, // 立即执行 :当刷新页面时会立即执行一次handler函数
      handler(val) {
        this.show = val;
      },
    },
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    borderRadius: {
      type: [Number, String],
      default: 16,
    },
    title: {
      type: String,
      default: "",
    },
    // 是否可以通过点击遮罩进行关闭
    maskCloseAble: {
      type: Boolean,
      default: true,
    },
    // 是否显示close 图标
    showClose: {
      type: Boolean,
      default: true,
    },
    zIndex: {
      type: [Number, String],
      default: "",
    },
    // 给一个负的margin-top，往上偏移，避免和键盘重合的情况
    negativeTop: {
      type: [String, Number],
      default: 0,
    },
    // 确认文案
    confirmText: {
      type: String,
      default: "",
    },
    // 取消文案
    cancelText: {
      type: String,
      default: "",
    },
    // 确认按钮颜色
    confirmColor: {
      type: String,
      default: "#00A6FF",
    },
    // 确认按钮背景颜色
    confirmBgColor: {
      type: String,
      default: "",
    },
    // 取消文字颜色
    cancelColor: {
      type: String,
      default: "#666",
    },
    // 取消按钮背景颜色
    cancelBgColor: {
      type: String,
      default: "",
    },
    content: {
      type: String,
      default: "",
    },
    // 是否显示确认按钮
    showConfirmButton: {
      type: Boolean,
      default: true,
    },
    // 是否显示取消按钮
    showCancelButton: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    // 是否显示标题
    showTitle() {
      return this.title ? true : false;
    },
  },
  data() {
    return {
      show: false,
      modalCancelText: "",
      modalConfirmText: "",
    };
  },
  created() {
    this.modalCancelText = this.cancelText || '取消';
    this.modalConfirmText = this.confirmText || '确认';
  },
  methods: {
    colseClick() {
      this.show = false;
    },
    onCloseFun() {
      this.$emit("changeShow", false);
    },
    btnClick(type) {
      // this.show = false;
      // this.$emit("changeShow", false);
      this.$emit(type);
    },
  },
};
</script>
<style lang="scss" scoped>
.modal-warp ::v-deep {
  .modal-css {
    .u-model,
    .u-mode-center-box {
      background: #fff;
    }
    .modal-content {
      padding-top: 64rpx;
      overflow: hidden;
      .modal-title {
        color: #333;
        font-family: "PingFang SC";
        font-size: 32rpx;
        font-style: normal;
        font-weight: 500;
        line-height: 1.05; /* 105% */
        text-align: center;
      }
      .content-css {
        padding: 32rpx 26rpx 64rpx;
        color: #666;
        text-align: center;
        font-family: "PingFang SC";
        font-size: 28rpx;
        font-style: normal;
        font-weight: 400;
        line-height: 1.42; /* 142.857% */
      }
      .modal-btns {
        display: flex;
        align-items: center;
        border-top: 1px solid #f3f5f9;
        .modal-btn {
          width: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 32rpx;
          height: 94rpx;
          font-weight: 400;
          font-family: "PingFang SC";
          cursor: pointer;
          user-select: none;
          &.confirm-btn {
            border-left: 1px solid #f3f5f9;
          }
        }
      }
    }
  }
}
</style>