H5/pages/map/model/hint.vue

<template>
  <uni-popup
    ref="hintRef"
    :isMaskClick="true"
    type="center"
    border-radius="10px 10px 0 0"
    maskBackgroundColor="rgba(0, 0, 0, 0.1)"
  >
    <view class="hint-box">
      <view class="hint-title">温馨提示</view>
      <div v-html="mapConfig.prompt" class="hint-val"></div>
      <view class="hint-btns">
        <view
          v-if="mapConfig.outsideAddress"
          class="hint-btn"
          @click.stop="openWindow(mapConfig.outsideAddress)"
          >查看详情</view
        >
        <view class="hint-btn plain" @click.stop="onClose()">关闭</view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import { PhoneCall } from "@/utils/tool.js";
import { getConfigByKey } from "@/api/feedback.js";
export default {
  props: {
    mapConfig: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      hintList: [],
      warningText: "",
    };
  },
  created() {},
  mounted() {
    this.cheackShow();
  },
  methods: {
    async cheackShow() {
      console.log("-------检查提示列表-------");
      try {
        const res = await getConfigByKey({ configKey: "mapIndexWarning" });
        this.warningText = res.configValue;
        const a = uni.getStorageSync("showHint");
        if (!a) {
          this.open();
        }
      } catch (e) {
        this.open();
      }
    },
    openWindow(url) {
      console.log(url);
      window.open(url);
    },
    open() {
      this.$refs.hintRef.open();
      try {
        uni.setStorageSync("showHint", true);
      } catch (e) {
        // error
      }
    },
    onPhoneCall(phone) {
      PhoneCall(phone).then((res) => {
        this.onClose();
      });
    },
    onClose() {
      this.$refs.hintRef.close();
      this.hintList = [];
    },
  },
};
</script>

<style lang="scss" scoped>
.uni-popup {
  z-index: 1002;

  .hint-box {
    width: 80vw;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 20rpx 0;
    // display: flex;
    // flex-direction: column;
    // justify-content: center;
    // align-items: center;
    // justify-content: space-between;

    .hint-title {
      text-align: center;
      font-size: 36rpx;
      height: 80rpx;
      line-height: 80rpx;
    }

    .hint-val {
      // height: calc(100% - 76rpx - 130rpx);
      padding: 20rpx 30rpx;
      color: #6f6f6f;
      ::v-deep p {
        line-height: 1.25;
        margin: 0 0 1em 0;
      }

      .hint-content {
        height: auto;
        min-height: 20rpx;
        max-height: 65vh;
      }

      .paragraph-item {
        text-indent: 2em;

        .item-sing {
          font-weight: bold;
        }
      }
    }

    .hint-btns {
      display: flex;
      padding: 20rpx 0;
      gap: 30rpx;

      .hint-btn {
        margin: 0 auto;
        width: 240rpx;
        height: 74rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        border-radius: 10rpx;
        background-color: #3291f8;
      }
      .plain {
        background-color: transparent;
        color: #3291f8;
        border: 1rpx solid #3291f8;
      }
    }
  }
}
</style>