zy-pda/components/seiminModel/seiminModel.vue

<!--
 * @Author: 廖明明
 * @Date: 2022-04-01 17:11:19
 * @LastEditors: 廖明明
 * @LastEditTime: 2022-04-02 17:03:14
 * @Description: 自定义弹窗组件
-->
<template>
  <view class="seiminModel seiminModel_mask" v-if="opts.isVisible">
    <view class="seiminModel_container animate__animated animate__fadeIn animate__faster">
      <view class="seiminModel_header">{{ opts.title }}</view>
      <!-- 动态二维码 -->
      <view class="seiminModel_content qrcode" v-if="opts.skin === 'qrcode'">
        <image class="w100" :src="nurseCodeImg" mode="widthFix"></image>
        <view class="qrcode_operate">
          <view class="refreshQRCode" @click="showNurseCode">
            刷新
          </view>
          <view>{{ refreshQRCodeTime }}s</view>
        </view>
      </view>
      <!-- 正常弹窗 -->
      <view class="seiminModel_content" v-html="opts.content" v-else></view>
      <view class="seiminModel_footer">
        <view class="seiminModel_footer__btn" v-for="(btn, i) in opts.btns" :style="{
            flex: btn.flex,
            color: btn.textColor,
          }" @click="btn.click($event)" :key="i">{{ btn.name }}</view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex';
  import {
    reqDeptCodes
  } from '../../request/api.js';
  export default {
    name: "seiminModel",
    data() {
      return {
        // 配置项
        opts: {},
        // 动态二维码定时器
        timer: null,
        // 动态二维码qrcode
        nurseCodeImg: '',
        // 动态二维码刷新间隔时长
        refreshQRCodeTime: 30,
      };
    },
    computed: {
      ...mapState('user', ['loginInfo']),
    },
    methods: {
      // 显示弹窗
      show(args = {}) {
        // 默认配置项
        let defaultOptions = {
          skin: "default", //弹窗风格(default|toast|qrcode|)
          isVisible: false, //是否显示弹窗
          title: "提示", //标题
          content: "", //内容
          btns: [{
              name: "取消",
              textColor: "#666",
              flex: 1,
              click: this.close
            },
            {
              name: "确定",
              textColor: "#666",
              flex: 1,
              click: this.close
            },
          ], //弹窗按钮
        };
        // 根据弹窗风格修改默认配置项
        switch (args.skin) {
          case "toast":
            defaultOptions.btns = [{
              name: "知道了",
              textColor: "#49b856",
              flex: 1,
              click: this.close,
            }, ];
            break;
        }
        // 按钮合并参数
        if (Array.isArray(args.btns)) {
          let btns = [];
          args.btns.forEach((v, i) => {
            btns.push(Object.assign({}, defaultOptions.btns[i], v));
          })
          args.btns = btns;
        }
        // 合并配置
        this.opts = Object.assign({}, defaultOptions, args, {
          isVisible: true,
        });
        // 如果是动态二维码,则需要发起请求
        if (this.opts.skin === 'qrcode') {
          this.showNurseCode();
        }
      },
      // 关闭弹窗
      close() {
        this.opts.isVisible = false;
        if (this.opts.skin === 'qrcode') {
          clearInterval(this.timer);
          this.timer = null;
        }
      },
      // 科室动态二维码方法
      showNurseCode() {
        let deptId = this.loginInfo.user && this.loginInfo.user.dept.id;
        reqDeptCodes([deptId]).then(res => {
          if (res.status == 200) {
            this.nurseCodeImg = res["data"][0].base64;
            this.refreshQRCodeTime = res["data"][0].refreshQRCodeTime;
            clearInterval(this.timer);
            this.timer = setInterval(() => {
              this.refreshQRCodeTime = Math.max(--this.refreshQRCodeTime, 0);
              if (this.refreshQRCodeTime === 0) {
                clearInterval(this.timer);
                this.showNurseCode();
              }
            }, 1000);
          }
        })
      },
    },
  };
</script>

<style lang="scss" scoped>
  .seiminModel {
    font-size: 36rpx;
    color: #000;
    line-height: 50rpx;
    text-align: center;

    &.seiminModel_mask {
      background-color: rgba(0, 0, 0, 0.5);
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      z-index: 9999;
      @include flex(center, center);

      .seiminModel_container {
        width: 560rpx;
        border-radius: 8rpx;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        align-content: center;

        .seiminModel_header {
          height: 100rpx;
          @include flex(center, center);
        }

        .seiminModel_content {
          flex: 1;
          background-color: #f9fafb;
          margin: 0 36rpx 25rpx;
          border: 1px solid #e5e9ed;
          color: #333;
          padding: 76rpx 24rpx;
          @include numbersAndLettersNoWrap;

          &.qrcode {
            padding: 24rpx;
            font-size: 32rpx;
            color: #999;

            .qrcode_operate {
              @include flex(space-between, center);

              .refreshQRCode {
                color: $defaultColor;
              }
            }
          }

          .red {
            color: $textColorRed;
          }

          .green {
            color: $defaultColor;
          }
        }

        .seiminModel_footer {
          border-top: 1px solid #e5e5e5;
          height: 100rpx;
          color: #666;
          @include flex(center, center);

          .seiminModel_footer__btn {
            height: 100%;
            @include flex(center, center);
            position: relative;

            &::after {
              content: "";
              height: 86rpx;
              position: absolute;
              width: 1px;
              bottom: 0;
              right: 0;
              background-color: #dde1e5;
            }
          }
        }
      }
    }
  }
</style>