jsh_erp_app/pages/picking-task/components/ble-tip-pop.vue

<template>
  <view>
    <u-popup
      :show="errorShow"
      :closeOnClickOverlay="false"
      :safeAreaInsetBottom="false"
      @close="closeClick"
      mode="center"
      :round="10"
    >
      <view class="error-box">
        <view class="flex_box flex_row_center">
          <u-image
            src="@/static/image/error-img.png"
            width="112rpx"
            height="112rpx"
          ></u-image>
        </view>
        <view :class="['tips-value', { 'is-center': isCenter }]">
          <view>{{ content }}</view>
          <view class="tips-value-extra" v-if="extraText">{{ extraText }}</view>
        </view>
        <view class="btn-box">
          <u-button
            class="no-btn"
            type="primary"
            :plain="true"
            :text="cancelBtnText"
            @click="closeClick"
          ></u-button>
          <u-button
            class="yes-btn"
            type="primary"
            :text="confirmBtnText"
            @click="confirmClick"
          ></u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    content: {
      type: String,
      default: "",
    },
    extraText: {
      type: String,
      default: "",
    },
    cancelBtnText: {
      type: String,
      default: "否",
    },
    confirmBtnText: {
      type: String,
      default: "是",
    },
    isCenter: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    value: {
      handler(val) {
        this.errorShow = val;
      },
      immediate: true,
    },
  },
  data() {
    return {
      errorShow: false,
    };
  },
  methods: {
    closeClick() {
      this.$emit("close");
      this.$emit("input", false);
    },
    confirmClick() {
      this.$emit("confirm");
    },
  },
};
</script>

<style lang="scss" scoped>
.error-box {
  width: 580rpx;
  padding: 48rpx 36rpx 48rpx;
  .tips-value {
    color: #1d212a;
    font-family: "PingFang SC";
    font-size: 32rpx;
    font-style: normal;
    font-weight: bold;
    margin-top: 32rpx;

    &.is-center {
      text-align: center;
    }

    &-extra {
      font-weight: 400;
      font-size: 28rpx;
      color: rgba(153, 153, 153, 1);
      margin-top: 10rpx;
    }
  }

  .btn-box {
    display: flex;
    justify-content: space-between;
    margin-top: 60rpx;
    .no-btn {
      width: 244rpx;
      border-radius: 16rpx;
      border: 1px solid #bfc8db;
      color: #86909c;
      font-size: 32rpx;
    }
    .yes-btn {
      width: 244rpx;
      border-radius: 16rpx;
      background: #0256ff;
      font-size: 32rpx;
    }
  }
}
</style>