chat/_src/components/relateGroup/relateGroup.vue

<template>
  <div class="c-view" v-loading="isLoading">
    <div class="box">
      <div class="box-hd">
        <div class="title-wrap">{{$t('group.relateTelegram')}}</div>
      </div>
      <div class="pub-loading" v-if="isLoadingRoom"></div>
      <div class="box-bd pub-scroll-box" v-else>
        <h2>{{$t('group.needRelateTelegram')}}：<span>{{tgGroupTitle}}</span></h2>
        <ul class="list-group" v-if="isBind">
          <li class="group-item" v-for="(item,index) in groups" :key="index">
            <h3>{{item.group_title}}</h3>
            <p>{{`https://mee.chat/s/${item.group_id}`}}</p>
            <p>{{$t('group.groupId')}}：{{item.group_id}}</p>
            <el-button type="primary" class="btn-relate" @click="doSync(index)">{{$t('group.relate')}}</el-button>
          </li>
          <li class="group-item ext-add" @click="createAndSync()">
            <h3>{{$t('group.createGroupToRelate')}}</h3>
            <i class="el-icon-plus"></i>
          </li>
        </ul>
        <div class="no-data" v-else>
          <h3>{{$t('group.needRelateTip')}}</h3>
          <i class="icon-tele"></i>
          <el-button type="primary" class="btn-relate" @click="bindTg">{{$t('group.clickBind')}}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Button } from 'element-ui'
import api from '@/api'
import { getMeechatType } from '@/util/util'
import { bindAccountMixins } from '@/mixins/user'

Vue.component(Button.name, Button)

export default {
  name: 'relateGroup',
  mixins: [bindAccountMixins],
  components: {
  },
  data () {
    return {
      params: {},
      isLoadingRoom: true,
      isLoading: false,
      isBind: false,
      tgGroupTitle: '',
      tgGroupId: 0,
      winHandler: null,
      groups: [],
      timeoutHandler: 0,
      meechatType: getMeechatType()
    }
  },
  async created () {
    let search = location.hash.replace('#/relateGroup?', '')
    let searchArgs = search.split('&')
    let params = {}

    searchArgs.forEach((item) => {
      let arr = item.split('=')

      params[arr[0]] = arr[1]
    })

    this.params = params
    this.getSyncInfo(this.params)
  },
  methods: {
    getSyncInfo (params) {
      api.tg.getSyncInfo(params).then(({ data }) => {
        this.groups = data.data.groups
        this.isBind = !!data.data.userId
        this.tgGroupTitle = decodeURI(data.data.tgGroupTitle)
        this.tgGroupId = data.data.tgGroupId
        this.isLoadingRoom = false
      }).catch(e => {
        this.isLoadingRoom = false
      })
    },
    async doSync (index) {
      this.isLoading = true

      let groupId = this.groups[index].group_id

      api.tg.doSync({
        group_id: groupId,
        tg_group_id: this.tgGroupId
      }).then(() => {
        this.isLoading = false
        this.$router.replace(`/group/${groupId}`)
      }).catch(error => {
        this.isLoading = false
        console.log(error)
      })
    },
    createAndSync () {
      if (this.meechatType == 'h5') {
        this.$router.push(`/invite/1?tgGroupId=${this.tgGroupId}`)
      } else {
        this.$showInvite(1, {
          tgGroupId: this.tgGroupId
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./relateGroup.scss";
</style>