im-admin/im-admin-ui/src/views/im/code/index.vue

<template>
  <div class="getCode_container">
    <div class="content">
      <el-card shadow="never">
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item title="超链接" name="1">
            <alink :tokeninfo="token" :site-url="siteUrl" @cget-copy="getCopy"></alink>
          </el-collapse-item>
          <el-collapse-item title="网页内嵌" name="2">
            <wangye :tokeninfo="token" :site-url="siteUrl" @cget-copy="getCopy"></wangye>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, getCurrentInstance } from 'vue';
// import { useStore } from 'vuex';
// import { adminAppCustomer, appReset } from '@/api/kefu';
import alink from './components/alink.vue';
import wangye from './components/wangye.vue';
// import kaifa from './components/kaifa';
// import setting from './components/setting';

const activeName = ref('1');

const { proxy } = getCurrentInstance() as any;

// const store = useStore();
// const isMobile = computed(() => store.state.media?.isMobile);
// const categoryId = computed(() => store.state.userLevel?.categoryId);
// const labelWidth = computed(() => (isMobile.value ? undefined : 75));
// const labelPosition = computed(() => (isMobile.value ? 'top' : 'left'));

const token = ref<any>('');
const canfrime = ref(false);
const srcUrl = ref(`${location.origin}/customerServer.js`);
const siteUrl = ref(`${location.origin}`);
const cloneTip = ref(false);
const canCustomerServer = ref('');

const linkUrl = computed(() => `${location.origin}/chat/index?token=${token.value?.token_md5}&noCanClose=1`);

// onMounted(() => {
//   getAdminAppCustomer();
// });

// async function getAdminAppCustomer() {
//   try {
//     const mod: any = await import('@/api/kefu');
//     if (mod && typeof mod.adminAppCustomer === 'function') {
//       const res: any = await mod.adminAppCustomer();
//       if (res.status === 200 && res.data?.list?.length) {
//         token.value = res.data.list[0];
//       }
//     }
//   } catch (e) {
//     // ignore if module not present
//   }
// }

function resetToken() {
  canfrime.value = true;
}

// async function confirme() {
//   if (!token.value?.id) return;
//   try {
//     const mod: any = await import('@/api/kefu');
//     if (mod && typeof mod.appReset === 'function') {
//       const res: any = await mod.appReset(token.value.id);
//       if (res?.status === 200) {
//         token.value = { ...token.value, token: res.data.token };
//         proxy?.$Message?.success('token 已重置');
//       }
//     }
//   } catch (e) {
//     // ignore
//   }
//   canfrime.value = false;
// }

function cancel() {
  canfrime.value = false;
}

function getCopy(id: string) {
  const elem = document.getElementById(id);
  if (!elem) return;
  const content = copyToClipboard(elem as HTMLElement);
  if (content) cloneTip.value = true;
}

function copyToClipboard(elem: HTMLElement) {
  const targetId = '_hiddenCopyText_';
  let target: HTMLTextAreaElement | HTMLInputElement | null = null as any;
  const tagName = elem.tagName;
  const isInput = tagName === 'INPUT' || tagName === 'TEXTAREA';
  let origSelectionStart: number | undefined;
  let origSelectionEnd: number | undefined;

  if (isInput) {
    target = elem as HTMLInputElement;
    origSelectionStart = (elem as HTMLInputElement).selectionStart as number;
    origSelectionEnd = (elem as HTMLInputElement).selectionEnd as number;
  } else {
    target = document.getElementById(targetId) as HTMLTextAreaElement;
    if (!target) {
      target = document.createElement('textarea');
      target.style.position = 'absolute';
      target.style.left = '-9999px';
      target.style.top = '0';
      target.id = targetId;
      document.body.appendChild(target);
    }
    target.textContent = elem.textContent || '';
  }

  const currentFocus = document.activeElement as HTMLElement | null;
  target.focus();
  (target as HTMLTextAreaElement).setSelectionRange(0, (target as HTMLTextAreaElement).value.length);

  let succeed = false;
  try {
    succeed = document.execCommand('copy');
  } catch (e) {
    succeed = false;
  }

  if (currentFocus && typeof currentFocus.focus === 'function') {
    currentFocus.focus();
  }

  if (isInput && target) {
    (elem as HTMLInputElement).setSelectionRange(origSelectionStart as number, origSelectionEnd as number);
  } else if (target) {
    target.textContent = '';
  }

  proxy?.$Message?.success('已成功复制到粘贴板');
  return succeed;
}
</script>

<style>
.getCode_container {
  .content {
    width: 100%;
    color: #323437;
    background: #ffffff;
    margin-top: 18px;
    font-size: 13px;
    padding: 10px;
  }
  .font-w {
    font-weight: 800;
    margin: 10px 0;
  }

  .text-i {
    text-indent: 2em;
  }

  .content > p {
    margin-bottom: 6px;
  }

  .code-content-wrap {
    clear: both;
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    padding: 12px 17px;
    background-color: #f8f8f8;
  }

  .other-wrap {
    margin: 4px 0;
    text-align: right;
  }

  .textarea {
    border: none;
    /* height: 40px; */
    width: 100%;
    outline: 0;
    resize: none;
    background-color: #f8f8f8;
    font-family: Arial;
    color: #323437;
    line-height: 24px;
    text-align: left;
  }

  .code {
    border: none;
    /* height: 40px; */
    width: 100%;
    outline: 0;
    resize: none;
    background-color: #f8f8f8;
    font-family: Arial;
    color: #323437;
    line-height: 24px;
    text-align: left;
  }

  .btn {
    display: inline-block;
    zoom: 1;
    padding: 6px 16px;
    border: 1px solid #d9dbdc;
    border-radius: 2px;
    line-height: 1;
    color: #323437;
    cursor: pointer;
    outline: 0;
  }

  .btn.btn-blue {
    color: #fff;
    background-color: #4f97e7;
    border-color: #3085e3;
  }

  .setting-highlight {
    color: #f15755;
    margin-left: 5px;
    line-height: 30px;
  }
  .fenlei {
    margin: 10px 0;
    border: 1px solid #eee;
    padding: 30px;
    padding-bottom: 10px;
    border-radius: 6px;
  }
  .typetitle {
    padding: 4px 7px;
    font-size: 18px;
  }
}
</style>
<style scoped>
.ivu-modal-confirm {
  display: flex;
  align-items: center;
}
.modimg {
  width: 40px !important;
  height: 40px !important;
  margin-right: 30px;
}
</style>