sagacloud-sagacare-ipad/src/views/envmonitor/components/Contact/index.vue

<template>
  <van-dialog
    v-model:show="isShowContact"
    :show-confirm-button="false"
    class="contact-dialog"
    :show-cancel-button="false"
  >
    <!-- 联系方式 -->
    <div class="contact-content">
      <div class="title">联系我们</div>
      <div class="contact">
        <div class="code-box">
          <img :src="imgUrl + '&key=' + contantDetail.wechatQrCode" alt="" />
          <div class="title">客户微信二维码</div>
        </div>
        <div class="phone-box">
          <img :src="parseImgUrl('ipdImages', 'phone-icon.svg')" alt="" />
          <div class="title">{{ contantDetail.phone }}</div>
          <div class="concat-text">客户电话联系方式</div>
        </div>
      </div>
      <buttons class="dailog-btn" @click="closeDailog">我知道了</buttons>
    </div>
  </van-dialog>
</template>
      
      <script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  ref,
  watch,
  getCurrentInstance,
} from "vue";
import { Loading, Dialog, Toast } from "vant";
import { getUserInfo, parseImgUrl } from "@/utils";
import { queryCustomerservice } from "@/apis/envmonitor";
const userInfo: any = getUserInfo();

export default defineComponent({
  props: {
    isShowContact: {
      type: Boolean,
      default: () => false,
    },
  },
  components: {
    VanLoading: Loading,
    [Dialog.Component.name]: Dialog.Component,
  },
  setup(props, contx) {
    const contantDetail: any = {};
    const proxyGlobal: any = getCurrentInstance();
    const proxyData = reactive({
      parseImgUrl: parseImgUrl,
      contantDetail: contantDetail,
      userInfo: userInfo,
      imgUrl: proxyGlobal.proxy.$imgUrl,
      isShowContact: props.isShowContact,
      closeDailog() {
        contx.emit("closeDailog");
      },
      // 查询联系方式
      queryCustomerservice() {
        let params: any = {
          criteria: { projectId: proxyData.userInfo.projectId },
        };
        queryCustomerservice(params).then((res) => {
          let resData: any = res;
          let content: any = resData?.content ?? [];
          proxyData.contantDetail = content[0];
        });
      },
    });
    watch(
      props,
      (newProps: any) => {
        proxyData.isShowContact = newProps.isShowContact;
      },
      {
        deep: false,
        immediate: true,
      }
    );
    onMounted(() => {
      proxyData.queryCustomerservice();
    });
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
<style lang="scss">
.contact-dialog {
  width: 680px !important;
  height: 420px !important;
  background: #ffffff;
  border-radius: 32px;
  .van-dialog__content {
    width: 100%;
    height: 100%;
  }
  .contact-content {
    position: relative;
    width: 100%;
    height: 100%;
    .title {
      font-family: "PingFang SC";
      font-style: normal;
      font-weight: 500;
      font-size: 22px;
      line-height: 31px;
      text-align: center;
      padding: 30px;
      color: #000000;
    }
    .dailog-btn {
      position: absolute;
      bottom: 38px;
      width: 335px;
      left: 50%;
      transform: translateX(-50%);
      height: 50px;
      line-height: 50px;
      text-align: center;
      background: #ffffff;
      border: 1px solid #c3c7cb;
      border-radius: 25px;
    }
  }
  .contact {
    display: flex;
    height: 182px;
    .code-box {
      flex: 1;
      border-right: 1px solid #d9d9d9;
      text-align: center;
      color: #1F2429;
      img {
        width: 134px;
        height: 134px;
        // margin-bottom: 17px;
      }
      .title {
        color: #1f2429;
        font-family: "Noto Sans SC";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        // line-height: 20px;
        text-align: center;
      }
    }
    .phone-box {
      flex: 1;
      text-align: center;
      .title {
        font-family: "Montserrat";
        font-style: normal;
        font-weight: 500;
        font-size: 24px;
        // line-height: 29px;
        margin-top: -15px;
        color: #af810c;
      }
      img {
        width: 100px;
        height: 100px;
      }
      .concat-text {
        margin-top: -10px;
      }
    }
  }
}
</style>