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>
      <view class="hint-val">
        {{ warningText }}
      </view>
      <view class="hint-btns" @click.stop="onClose()">
        <view class="hint-btn">关闭</view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import { PhoneCall } from "@/utils/tool.js";
import { getConfigByKey } from "@/api/feedback.js";
export 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();
      }
    },
    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;
    min-height: 30vh;
    height: auto;
    max-height: 70vh;
    background-color: #fff;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    justify-content: space-between;

    .hint-title {
      font-size: 36rpx;
      padding: 20rpx 0;
    }

    .hint-val {
      height: 1px;
      flex: 1;
      padding: 20rpx 30rpx;
      color: #6f6f6f;
    }

    .hint-btns {
      padding: 20rpx 0;

      .hint-btn {
        width: 260rpx;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        border-radius: 10rpx;
        background-color: #3291f8;
      }
    }
  }
}
</style>