From 66f18c7f029b43462a8cefb847a363d716f5a43e Mon Sep 17 00:00:00 2001
From: chenshihai <chenshh@pcl.ac.cn>
Date: Mon, 5 Sep 2022 18:17:05 +0800
Subject: [PATCH] Invitation

---
 web_src/vuepages/apis/modules/userinvite.js  |  4 +-
 web_src/vuepages/langs/config/en-US.js       | 13 ++++
 web_src/vuepages/langs/config/zh-CN.js       | 13 ++++
 web_src/vuepages/pages/user/invite/index.vue | 73 +++++++++-----------
 4 files changed, 62 insertions(+), 41 deletions(-)

diff --git a/web_src/vuepages/apis/modules/userinvite.js b/web_src/vuepages/apis/modules/userinvite.js
index 7d79b3f4d..f50b3fd66 100644
--- a/web_src/vuepages/apis/modules/userinvite.js
+++ b/web_src/vuepages/apis/modules/userinvite.js
@@ -1,11 +1,11 @@
 import service from '../service';
 
 // 邀请好友页面数据
-export const getUserInvitationCode = () => {
+export const getUserInvitationCode = (params) => { // page pageSize
   return service({
     url: '/user/invitation_code',
     method: 'get',
-    params: {},
+    params: params,
     data: {},
   });
 }
diff --git a/web_src/vuepages/langs/config/en-US.js b/web_src/vuepages/langs/config/en-US.js
index c25b66b5a..1ee42190e 100644
--- a/web_src/vuepages/langs/config/en-US.js
+++ b/web_src/vuepages/langs/config/en-US.js
@@ -151,6 +151,19 @@ const en = {
     lastUpdateTime: 'Last Update Time',
     resSceneDeleteConfirm: 'Are you sure to delete the current Resource Scene?',
   },
+  user: {
+    inviteFriends: 'Invite Friends',
+    inviteFriendsTips: 'Copy QR code or invite registration link to share with friends',
+    clickToViewTheEventDetails: 'Click to view the event details',
+    copyRegistrationInvitationLink: 'Copy registration invitation link',    
+    recommender: 'Recommender: ',
+    invitedFriends: 'Invited friends',
+    registrationTime: 'Registration time',
+    theSharedContentHasBeenCopiedToTheClipboard: 'The shared content has been copied to the clipboard',
+    copyError: 'Copy error',
+    Activated: 'Activated',
+    notActive: 'Not active',
+  },
 }
 
 export default en;
diff --git a/web_src/vuepages/langs/config/zh-CN.js b/web_src/vuepages/langs/config/zh-CN.js
index c593cd684..88befdbb5 100644
--- a/web_src/vuepages/langs/config/zh-CN.js
+++ b/web_src/vuepages/langs/config/zh-CN.js
@@ -151,6 +151,19 @@ const zh = {
     lastUpdateTime: '最后更新时间',
     resSceneDeleteConfirm: '是否确认删除当前应用场景？',
   },
+  user: {
+    inviteFriends: '邀请好友',
+    inviteFriendsTips: '复制二维码或者邀请注册链接分享给好友',
+    clickToViewTheEventDetails: '点击查看活动详情',
+    copyRegistrationInvitationLink: '复制注册邀请链接',
+    recommender: '推荐人：',
+    invitedFriends: '已邀请好友',
+    registrationTime: '注册时间',
+    theSharedContentHasBeenCopiedToTheClipboard: '分享内容已复制到剪切板',
+    copyError: '复制错误',
+    Activated: '已激活',
+    notActive: '未激活',
+  },
 }
 
 export default zh;
diff --git a/web_src/vuepages/pages/user/invite/index.vue b/web_src/vuepages/pages/user/invite/index.vue
index b49db76cb..c67090c5a 100644
--- a/web_src/vuepages/pages/user/invite/index.vue
+++ b/web_src/vuepages/pages/user/invite/index.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="ui container">
     <div class="title">
-      <div class="title-1"><span>邀请好友</span></div>
-      <div class="title-2"><span>复制二维码或者邀请注册链接分享给好友</span></div>
+      <div class="title-1"><span>{{ $t('user.inviteFriends') }}</span></div>
+      <div class="title-2"><span>{{ $t('user.inviteFriendsTips') }}</span></div>
     </div>
     <div class="content-1">
       <div class="img-c">
@@ -11,7 +11,7 @@
       </div>
       <div class="descr">
         <span>{{ pageLinkDesc }}</span>
-        <a :href="pageLink" target="_blank">点击查看活动详情</a>
+        <a :href="pageLink" target="_blank">{{ $t('user.clickToViewTheEventDetails') }}</a>
       </div>
     </div>
     <div class="content-2">
@@ -20,8 +20,8 @@
           <span>{{ pageOpeniDesc }}</span>
         </div>
         <div class="txt-2"><span>{{ invitationLink + invitationCode }}</span></div>
-        <div class="txt-3"><span>推荐人：</span><span>{{ invitationCode }}</span></div>
-        <el-button class="__copy_link_btn__" type="primary">复制注册邀请链接</el-button>
+        <div class="txt-3"><span>{{ $t('user.recommender') }}</span><span>{{ invitationCode }}</span></div>
+        <el-button class="__copy_link_btn__" type="primary">{{ $t('user.copyRegistrationInvitationLink') }}</el-button>
       </div>
       <div class="qr-code">
         <div id="__qr-code__" style="width:120px;height:120px;"></div>
@@ -30,20 +30,21 @@
     <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">
+          <el-table-column prop="ID" :label="$t('user.invitedFriends')" 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;" />
+                <img :src="scope.row.avatarSrc" 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">
+          <el-table-column prop="statusStr" :label="$t('status')" 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>
+          <el-table-column prop="regTime" :label="$t('user.registrationTime')" align="center" header-align="center">
+          </el-table-column>
           <template slot="empty">
             <span style="font-size: 12px">{{
                 loading ? $t('loading') : $t('noData')
@@ -103,18 +104,28 @@ export default {
       clipboard.on('success', (e) => {
         this.$message({
           type: 'success',
-          message: '分享内容已复制到剪切板'
+          message: this.$t('user.theSharedContentHasBeenCopiedToTheClipboard')
         });
       });
       clipboard.on('error', (e) => {
         this.$message({
           type: 'error',
-          message: '复制错误'
+          message: this.$t('user.copyError')
         });
       });
     },
+    transRowData(item) {
+      return {
+        userName: item.Name,
+        avatarSrc: item.Avatar,
+        userLink: window.origin + '/' + item.Name,
+        statusStr: item.IsActive ? this.$t('user.Activated') : this.$t('user.notActive'),
+        statusColor: item.IsActive ? 'rgb(82, 196, 26)' : 'rgb(245, 34, 45)',
+        regTime: formatDate(new Date(item.CreatedUnix * 1000), 'yyyy-MM-dd HH:mm:ss'),
+      }
+    },
     initData() {
-      getUserInvitationCode().then(res => {
+      getUserInvitationCode({ page: this.pageInfo.curpage, pageSize: this.pageInfo.pageSize }).then(res => {
         res = res.data;
         if (res) {
           this.bannerImg = res.page_banner_img;
@@ -123,7 +134,10 @@ export default {
           this.pageLinkDesc = res.page_link_desc;
           this.invitationCode = res.invitation_code;
           this.pageOpeniDesc = res.page_openi_desc;
-          this.tableData = res.invitation_users || [];
+          this.tableData = (res.invitation_users || []).map((item, index) => {
+            return this.transRowData(item);
+          });
+          this.pageInfo.total = res.invitation_users_count;
           const qrCode = new QRCode("__qr-code__", {
             text: this.invitationLink + this.invitationCode,
             width: 120,
@@ -138,38 +152,19 @@ export default {
       });
     },
     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,
+        pageSize: this.pageInfo.pageSize,
       };
       this.loading = true;
-      getResSceneList(params).then(res => {
+      getUserInvitationCode(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;
-        }
+        const data = (res.invitation_users || []).map((item, index) => {
+          return this.transRowData(item);
+        });
+        this.tableData = data;
+        this.pageInfo.total = res.invitation_users_count;
       }).catch(err => {
         console.log(err);
         this.loading = false;