aiforge/web_src/vuepages/pages/user/invite/index.vue

<template>
  <div class="ui container">
    <div class="title">
      <div class="title-1"><span>邀请好友</span></div>
      <div class="title-2"><span>复制二维码或者邀请注册链接分享给好友</span></div>
    </div>
    <div class="content-1">
      <div class="img-c">
        <img class="img" src="/img/ad/ad03.jpg" />
        <div class="txt">邀请好友来启智，用免费算力还能赚奖金！</div>
      </div>
      <div class="descr">
        <span>新一期的开源打榜活动，每邀请一名好友注册并激活，就可以获得5打榜积分。快快邀请更多好友帮你冲击榜单吧~ </span>
        <a>点击查看活动详情</a>
      </div>
    </div>
    <div class="content-2">
      <div class="txt-c">
        <div class="txt-1">
          <span>启智AI协作平台是启智社区面向AI开发者提供的一站式AI开发协作平台，提供了代码托管、数据集管理、基于异构计算资源的模型调试与训练等功能。目前已经与鹏城云脑、中国算力网（C²NET）一期打通，免费提供丰富算力资源，支撑大家完成AI开发任务。</span>
        </div>
        <div class="txt-2"><span>{{ sharedLink }}</span></div>
        <div class="txt-3"><span>推荐人：</span><span>{{ sharedUser }}</span></div>
        <el-button class="__copy_link_btn__" type="primary">复制注册邀请链接</el-button>
      </div>
      <div class="qr-code">
        <img src="" alt="" style="width:120px;height:120px;">
      </div>
    </div>
    <div class="table-container">
      <div>
        <el-table border :data="tableData" style="width:100%" v-loading="loading" stripe>
          <el-table-column prop="ID" label="已邀请好友" align="left" header-align="center">
            <template slot-scope="scope">
              <div style="display:flex;align-items:center;padding-left:20px;">
                <img src="" alt="" style="height:45px;width:45px;margin-right:10px;" />
                <a :href="scope.row.userLink" style="font-weight:500;font-size:15px;">{{ scope.row.userName }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="statusStr" label="状态" align="center" header-align="center">
            <template slot-scope="scope">
              <span :style="{ color: scope.row.statusColor }">{{ scope.row.statusStr }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="regTime" label="注册时间" align="center" header-align="center">

          </el-table-column>
          <template slot="empty">
            <span style="font-size: 12px">{{
                loading ? $t('loading') : $t('noData')
            }}</span>
          </template>
        </el-table>
      </div>
      <div class="__r_p_pagination">
        <div style="margin-top: 2rem">
          <div class="center">
            <el-pagination background @current-change="currentChange" :current-page="pageInfo.curpage"
              :page-sizes="pageInfo.pageSizes" :page-size="pageInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from 'element-ui/lib/utils/date-util';
import Clipboard from 'clipboard';

export default {
  data() {
    return {
      sharedLink: 'https://git.openi.org.cn/user/sign_up?sharedUser=Openihu',
      sharedUser: 'Openihu',
      loading: false,
      tableData: [],
      pageInfo: {
        curpage: 1,
        pageSize: 10,
        pageSizes: [10],
        total: 0,
      },
    };
  },
  components: {},
  methods: {
    initCopy() {
      const clipboard = new Clipboard('.__copy_link_btn__', {
        text: () => {
          return this.sharedLink;
        },
      })
      clipboard.on('success', (e) => {
        this.$message({
          type: 'success',
          message: '分享内容已复制到剪切板'
        });
      });
    },
    getTableData() {
      const data = new Array(10).fill(0).map((item, index) => {
        const status = Math.random() > 0.5 ? '1' : '2';
        return {
          userName: 'userName-' + index + '-' + Math.random().toFixed(2),
          userLink: 'userLink-' + index + '-' + Math.random().toFixed(2),
          status: status,
          statusStr: status == '1' ? '已激活' : '未激活',
          statusColor: status == '1' ? 'rgb(82, 196, 26)' : 'rgb(245, 34, 45)',
          regTime: 'regTime' + index + Math.random().toFixed(2),
        }
      });
      this.tableData = data;

      return;
      const params = {
        page: this.pageInfo.curpage,
        pagesize: this.pageInfo.pageSize,
      };
      this.loading = true;
      getResSceneList(params).then(res => {
        this.loading = false;
        res = res.data;
        if (res.Code === 0) {
          const list = res.Data.List;
          const data = list.map((item) => {
            return {

            }
          });
          this.tableData = data;
          this.pageInfo.total = res.Data.TotalSize;
        }
      }).catch(err => {
        console.log(err);
        this.loading = false;
      });
    },
    currentChange(val) {
      this.pageInfo.curpage = val;
      this.getTableData();
    },
  },
  mounted() {
    this.initCopy();
    this.getTableData();
  },
  beforeDestroy() {
  },
};
</script>

<style scoped lang="less">
.title {
  margin-top: 15px;
  margin-bottom: 15px;

  .title-1 {
    font-weight: 500;
    font-size: 20px;
    color: rgba(16, 16, 16, 1);
    margin-bottom: 10px;
  }

  .title-2 {
    font-weight: 400;
    font-size: 14px;
    color: rgba(136, 136, 136, 1);
  }
}

.content-1 {
  margin-bottom: 32px;

  .img-c {
    height: 80px;
    position: relative;

    .img {
      width: 100%;
      height: 100%;
    }

    .txt {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      line-height: 80px;
      padding-left: 25px;
      font-weight: 500;
      font-size: 24px;
      color: rgb(255, 255, 255);
    }
  }

  .descr {
    font-weight: 300;
    font-size: 16px;
    color: rgb(16, 16, 16);
    padding: 25px;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0px 0px 4px 4px;
  }
}

.content-2 {
  display: flex;
  background-color: rgb(228, 242, 255);
  border-color: rgb(228, 242, 255);
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
  padding: 25px;
  margin-bottom: 32px;

  .txt-c {
    flex: 1;
    font-weight: 300;
    font-size: 16px;
    color: rgb(16, 16, 16);

    span {
      line-height: 24px;
    }

    div {
      margin-bottom: 6px;
    }

    .txt-3 {
      margin-bottom: 15px;
    }
  }

  .qr-code {
    width: 150px;
    display: flex;
    flex-direction: column;
    align-items: end;
  }
}

.table-container {
  margin-bottom: 16px;

  /deep/ .el-table__header {
    th {
      background: rgb(245, 245, 246);
      font-size: 12px;
      color: rgb(36, 36, 36);
    }
  }

  /deep/ .el-table__body {
    td {
      font-size: 12px;
    }
  }

  .op-btn {
    cursor: pointer;
    font-size: 12px;
    color: rgb(25, 103, 252);
    margin: 0 5px;
  }
}

.center {
  display: flex;
  justify-content: center;
}
</style>