jsh_erp/jshERP-web/src/views/dashboard/dialog/SysTipModal.vue

<template>
  <div ref="container">
    <a-modal
      :width="630"
      :visible="visible"
      :confirm-loading="confirmLoading"
      :getContainer="() => $refs.container"
      :mask="true"
      :maskClosable="false"
      @cancel="handleCancel"
      centered
      wrapClassName="sys-tip-modal-wrap"
      :footer="null"
    >
      <template #title>
        <div class="title-wrap">提醒</div>
      </template>
      <div class="tip-body">
        <div class="tip-content">
          <div class="text-title">无动销提醒</div>
          <p class="text-val" v-for="(item,index) in dataInfo.noMovingPinReminder" :key="index">{{ `${index+1}.${item}` }}</p>
          <p class="text-val" v-show="dataInfo.noMovingPinReminder.length===0">暂无</p>
          <div class="text-title">过期提醒</div>
          <p class="text-val" v-for="(item,index) in dataInfo.expirationReminder" :key="index">{{ `${index+1}.${item}` }}</p>
          <p class="text-val" v-show="dataInfo.expirationReminder.length===0">暂无</p>
          <div class="text-title">库存提醒</div>
          <p class="text-val" v-for="(item,index) in dataInfo.inventoryReminder" :key="index">{{ `${index+1}.${item}` }}</p>
          <p class="text-val" v-show="dataInfo.inventoryReminder.length===0">暂无</p>
        </div>
        <div class="btn-wrap">
          <a-button type="primary" @click="handleOk" class="confirm-btn">好的</a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      dataInfo: {
        expirationReminder: [],
        inventoryReminder: [],
        noMovingPinReminder: []
      },
    }
  },
  methods: {
    open(data = {}) {
      this.visible = true
      this.dataInfo = { ...data }
    },
    handleCancel() {
      this.visible = false
    },
    handleOk() {
      this.visible = false
    },
  },
}
</script>

<style lang="less">
.sys-tip-modal-wrap {
  .ant-modal-header {
    border-bottom: 0;
    background-color: transparent;
  }
  .ant-modal-footer {
    border-top: 0;
    text-align: center;
  }
  .ant-modal-content {
    background: url('./sys-tip-bg.png') no-repeat;
    background-size: 100% 100%;
    background-blend-mode: lighten;
  }
  .ant-modal-body {
    padding-top: 0;
  }
  .confirm-btn {
    width: 118px;
  }
  .title-wrap {
    position: relative;
    padding-left: 16px;
    font-size: 20px;
    &::before {
      position: absolute;
      content: '';
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 20px;
      width: 4px;
      background: #1890ff;
      border-radius: 4px;
    }
  }
  .tip-body {
    position: relative;
    padding: 16px;
    width: 100%;
    border-radius: 8px;
    box-shadow: 0px 0px 10px 0px #3f6bfd24;
    background-color: rgba(255, 255, 255, 0.8);
  }
  .tip-content {
    max-height: 300px;
    overflow: hidden scroll;
  }
  .btn-wrap {
    margin-top: 16px;
    text-align: center;
  }
  .text-title {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 16px;
    margin: 8px 0;
  }
  .text-val {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 0;
  }
}
</style>