drp-ui/src/views/business/as/after-sales/contact-us/index.vue

<!-- 联系我们 -->
<script>
import Cookies from "js-cookie";
import { ProjectInfo } from "@/api/business/as/after-sales";
export default {
  name: "contactUs",
  data() {
    return {
      phone: "",
      show: false,
      actions: [
        { name: "拨号", key: "call" },
        { name: "复制", key: "copy" },
      ],
    };
  },
  methods: {
    async onSelect({ key, name }) {
      this.show = false;
      if (key === "call") {
        window.location.href = `tel:${this.phone}`;
        return;
      }
      if (key === "copy") {
        await navigator.clipboard.writeText(this.phone);
        return this.$toast("已复制到剪贴板");
      }
    },
    onCancel() {},
    async getProjectInfo(id) {
      try {
        this.loading = true;
        let { code, data } = await ProjectInfo({ id });
        if (code === 200) {
          this.phone = data.defaultContactWay;
        }
      } catch (error) {
      } finally {
        this.loading = false;
      }
    },
  },
  created() {
    const projectId = Cookies.get("salesProId");
    this.getProjectInfo(projectId);
  },
};
</script>

<template>
  <div>
    <van-cell
      is-link
      :title="'热线电话' + phone"
      value="8:00-22:00"
      @click="show = true"
    />
    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
      @select="onSelect"
    />
  </div>
</template>

<style scope lang="scss">
.van-cell {
  background-color: #f5f5f5;
  .van-cell__title {
    flex-grow: 2;
  }
}
</style>