android-cloud-H5/pages/customer-service.vue

<template lang="">
  <div>
    <!-- <v-btn @click="open({ templateId: 6635862 })">双子星模板</v-btn>
    <v-btn @click="open({ templateId: 6634867 })">唔即云模板</v-btn> -->
  </div>
</template>
<script>
import qs from 'qs';
import { fileKeyToUrl } from '@/plugins/file-center.js';
console.log(
  '🚀 ~ file: customer-service.vue ~ line 10 ~ fileKeyToUrl',
  fileKeyToUrl,
);

export default {
  head() {
    return {
      script: [
        {
          src:
            'https://qiyukf.com/script/98112bcf552907c28ee450c6a58269c3.js' +
            qs.stringify(
              {
                hidden: 1,
                sdkTemplateId:
                  this.$route.query?.templateId ??
                  process.env.QIYUKF_TEMPLATE_ID,
              },
              {
                addQueryPrefix: true,
              },
            ),
          async: true,
          callback: () => {
            // console.log(window.ysf);
            this.init(window.ysf);
          },
        },
      ],
    };
  },
  computed: {
    isAutoOpen() {
      return this.$route.query.autoopen === 'true';
    },
    isOnunread() {
      return this.$route.query.onunread === 'true';
    },
    ysfConfigData() {
      return [
        { key: 'real_name', value: this.$auth.user.userName },
        { key: 'mobile_phone', hidden: true, value: this.$auth.user.phone },
        { key: 'email', value: this.$auth.user.email },
        {
          key: 'avatar',
          label: '头像',
          value:
            this.$auth.user.headImgFileId &&
            fileKeyToUrl(this.$auth.user.headImgFileId),
        }, // 访客头像
        {
          index: 0,
          key: 'account',
          label: '账号',
          value: this.$auth.user.phone,
        },
      ];
    },
    ysfConfig() {
      return {
        uid: String(this.$auth.user.id),
        name: this.$auth.user.userName,
        mobile: this.$auth.user.phone,
        email: this.$auth.user.email,
        data: JSON.stringify(this.ysfConfigData),
        language: 'zh-cn',
      };
    },
  },
  mounted() {},
  methods: {
    async init(ysf) {
      this.ysf = ysf;
      // console.log(ysf);

      await new Promise((resolve, reject) => {
        ysf('onready', resolve);
      });

      await new Promise((resolve, reject) => {
        ysf('config', {
          ...this.ysfConfig,
          success: resolve,
          error: reject,
        });
      });
      if (this.isAutoOpen) {
        this.open();
      }
      if (this.isOnunread) {
        this.onunread();
      }
    },
    open() {
      const url = this.ysf('url');
      location.replace(url);
      // this.ysf('open', data);
    },
    getUnreadMsg() {
      const result = this.ysf('getUnreadMsg');
      console.log(result.total, result.type, result.message);
    },
    onunread() {
      this.ysf('onunread', (result) => {
        console.log(result.total, result.type, result.message);
      });
    },
  },
};
</script>