zy-wechat/components/showModel/showModel.vue

<template>
  <view class="showModel" v-show="disjunctor">
    <view class="showModel__wrap">
      <view class="showModel__header" v-if="title">
        {{ title }}
        <text v-if="operate.know == '知道了' && timerFlag">({{ time }})</text>
      </view>
      <view class="showModel__article" :class="{ p0: textareaFlag }">
        <text
          v-if="icon"
          class="showModel__icon icon_transport"
          :class="[
            'showModel__icon--' + icon,
            { 'transport-duigou': icon === 'success' },
            { 'transport-shibai': icon === 'error' },
            { 'transport-wenhao': icon === 'warn' },
          ]"
        ></text>
        <view v-if="content" class="showModel__content" @click="tel()" v-html="content"></view>
        <view v-if="info" class="showModel__info">{{ info }}</view>
        <view class="specialCloseFlag" v-if="textareaFlag">
          <textarea
            style="width: 100%"
            placeholder="请输入10~100个文字方可提交!"
            maxlength="100"
            @input="textareaInput"
          />
        </view>
        <view class="radio-wrap" v-if="radioItem.length">
          <radio-group @change="radioChange">
            <view v-for="(item, index) in radioItem" :key="item.qrcode" class="radio-item">
              <label>
                <radio :value="item.qrcode" :checked="index === 0" />
                <text>{{ item.deptName }}</text>
              </label>
            </view>
          </radio-group>
        </view>
      </view>
      <view class="showModel__footer">
        <view
          v-if="operate.ok"
          class="showModel__ok"
          @click="ok"
          hover-class="seimin-btn-hover"
          >{{ operate.ok || "" }}</view
        >
        <view
          v-if="operate.cancel"
          class="showModel__cancel"
          @click="cancel"
          hover-class="seimin-btn-hover"
          >{{ operate.cancel || "" }}</view
        >
        <view
          v-if="operate.know"
          class="showModel__know"
          @click="know"
          hover-class="seimin-btn-hover"
          >{{ operate.know || "" }}</view
        >
        <view
          v-if="operate.know && timerFlag"
          class="showModel__know"
          @click="cancelTimer"
          hover-class="seimin-btn-hover"
          >取消自动关闭</view
        >
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      time: 5, //5秒后自动关闭
      timer: null, //5秒后自动关闭，定时器
      timerFlag: true, //是否显示取消自动关闭按钮
    };
  },
  watch: {
    disjunctor(newValue) {
      if (newValue && this.operate.know == "知道了") {
        this.time = 5;
        this.timerFlag = true;
        this.timer = setInterval(() => {
          this.time--;
          if (this.time <= 0) {
            clearInterval(this.timer);
            this.know();
          }
        }, 1000);
      }
    },
  },
  props: {
    // 显示隐藏
    disjunctor: {
      type: Boolean,
      default: false,
    },
    // 标题
    title: {
      type: String,
      default: "提示",
    },
    // 图标
    icon: {
      type: String,
      default: "success",
    },
    // 内容
    content: {
      type: String,
      default: "",
    },
    // 说明
    info: {
      type: String,
      default: "",
    },
    // 拨打电话
    phone: {
      type: String,
      default: "",
    },
    // 特殊情况关闭原因
    textareaFlag: {
      type: Boolean,
      default: false,
    },
    // 单选框选项
    radioItem: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 操作按钮文字
    operate: {
      type: Object,
      default: () => {
        return {
          know: "知道了",
        };
      },
    },
  },
  methods: {
    // 单选框选中
    radioChange(item){
      this.$emit('radioChange',item.target.value)
    },
    // 输入文字
    textareaInput(e) {
      this.$emit("textareaInput", e.detail.value);
    },
    // 确定
    ok() {
      this.$emit("ok");
    },
    // 取消
    cancel() {
      this.$emit("cancel");
    },
    // 知道了
    know() {
      clearInterval(this.timer);
      this.$emit("know");
    },
    // 取消自动关闭
    cancelTimer() {
      this.timerFlag = false;
      clearInterval(this.timer);
    },
    // 拨打电话
    tel() {
      if (this.phone) {
        uni.makePhoneCall({
          phoneNumber: this.phone,
        });
      }
    },
  },
};
</script>

<style lang="less">
.showModel {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 999999;

  .showModel__wrap {
    width: 560rpx;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 12rpx;

    .showModel__header {
      font-size: 36rpx;
      color: 000;
      height: 84rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .showModel__article {
      margin: 40rpx auto 25rpx;
      width: 488rpx;
      padding: 60rpx 0;
      background-color: rgb(249, 250, 251);
      border: 2rpx solid rgb(229, 233, 237);
      border-radius: 12rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      &.p0 {
        padding: 0;
      }

      .showModel__icon {
        font-size: 138rpx;
        margin-bottom: 32rpx;

        &.showModel__icon--success {
          color: rgb(52, 179, 73);
        }

        &.showModel__icon--warn {
          color: rgb(245, 165, 35);
        }

        &.showModel__icon--error {
          color: rgb(255, 58, 82);
        }
      }

      .showModel__content {
        font-size: 36rpx;
      }

      .showModel__info {
        font-size: 32rpx;
        color: rgb(102, 102, 102);
      }
      .specialCloseFlag {
        width: 90%;
        height: 100%;
        padding: 16rpx;
      }
      .radio-wrap{
        .radio-item{
          margin-top: 16rpx;
          /deep/ .uni-radio-input-checked{
            background-color: #49b856!important;
            border-color: #49b856!important;
          }
        }
      }
    }

    .showModel__footer {
      box-sizing: border-box;
      height: 100rpx;
      border-top: 2rpx solid rgb(229, 233, 237);
      display: flex;
      align-items: center;

      view {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36rpx;
        color: rgb(102, 102, 102);
        position: relative;

        &:nth-of-type(2)::before {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 2rpx;
          height: 87rpx;
          background-color: rgb(229, 233, 237);
        }
      }

      .showModel__ok {
        flex: 1;
        color: rgb(73, 184, 86);
      }

      .showModel__cancel {
        flex: 1;
      }

      .showModel__know {
        flex: 1;
        color: rgb(73, 184, 86);
      }
    }
  }
}
</style>