metaverse2024vue/src/views/user/components/invite.vue

<template>
  <div class="user-info py-10 px-20 w-full h-full overflow-auto">
    <div class=" w-full rounded-xl w-full p-4 bg-white mb-4">
      <div class=" text-lg flex items-center">
        邀请链接：<span class=" text-indigo-600" id="code">{{ url }}{{ code }}</span>
        <el-button class=" ml-2" size="mini" @click="copy">复制</el-button>
      </div>
    </div>
    
    <div class=" w-full rounded-xl w-full overflow-hidden">
      <div class="p-6 bg-white form">
        <div class=" text-lg mb-4">已邀请用户</div>
        <el-table
          :data="tableData"
          style="width: 100%"
          height="540"
        >
          <el-table-column
            prop="createTime"
            label="时间"
          >
          </el-table-column>
          <el-table-column
            prop="userId"
            label="用户ID"
          >
          </el-table-column>
        </el-table>
        <div class="w-full pt-4 flex justify-center">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="currentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getInfo } from '@/api/login'
import { queryRecordApi, getInviteUserListApi } from '@/api/user'
import {
  getModelListApi,
} from "@/api/chat.js"
export default {
  data() {
    return {
      url: 'http://192.168.0.114:8088/#/home?code=',
      code: '',
      params: {
        pageNum: 1,
        pageSize: 10,
        startTime: null,
        endTime: null,
        modelId: null,
      },
      modelList: [],
      times: [],
      total: 0,
      tableData: []
    }
  },
  mounted() {
    getInfo().then(res => {
      console.log(res, 'getInfo')
      this.code = res.data.id
    })
    this.queryRecord()
    this.getModelList()
  },
  methods: {
    async copy() {
      try {
        // 获取源DOM元素
        const sourceElement = document.getElementById('code');
        // 读取文本内容
        const textContent = sourceElement.textContent;
        // let url = 'http://192.168.0.114:8088/#/home?code=' + this.code
        const textarea = document.createElement('textarea');
        textarea.value = textContent;
        document.body.appendChild(textarea);
        textarea.select();
        if (document.execCommand('copy')) {
          document.execCommand('copy');
        }
        document.body.removeChild(textarea);
        
        this.$message({
          message: '复制成功',
          type: 'success'
        });
      } catch (err) {
        this.$message({
          message: '复制失败',
          type: 'error'
        });
      }
      
    },
    reset() {
      this.params = {
        pageNum: 1,
        pageSize: 10,
        startTime: null,
        endTime: null,
        modelId: null,
      }
      this.queryRecord()
    },
    getModelList() {
      getModelListApi().then(res => {
        console.log(res, '模型列表');
        this.modelList = res.data
      })
    },
    currentChange(value) {
      this.params.pageNum = value
      this.queryRecord()
    },
    search() {
      if(this.times.length > 0) {
        this.params.startTime = this.times[0]
        this.params.endTime = this.times[1]
      } else {
        this.params.startTime = null
        this.params.endTime = null
      }
      this.queryRecord()
    },
    queryRecord() {
      getInviteUserListApi(this.params).then(res => {
        console.log(res, 'getInviteUserListApi')
        this.tableData = res.rows
        this.total = res.total
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .top {
    background: linear-gradient(rgba(0, 0, 0, 0) 23.28%, rgba(0, 0, 0, 0.72) 100%), url(https://cdn-az.rochat.tech/avatar/131__c9103616-e103-11ee-bef2-66a40ff97e79.png) center center / cover no-repeat;
  }
</style>
<style scoped>

</style>