From 40f7aa6783c48347228e4d49427aaa37d0405961 Mon Sep 17 00:00:00 2001
From: chenshihai <chenshh@pcl.ac.cn>
Date: Mon, 5 Sep 2022 16:10:16 +0800
Subject: [PATCH] invitation

---
 templates/user/auth/signup_inner.tmpl        | 36 ++++++++++++--
 web_src/vuepages/pages/user/invite/index.vue | 71 +++++++++++++++++++++-------
 2 files changed, 85 insertions(+), 22 deletions(-)

diff --git a/templates/user/auth/signup_inner.tmpl b/templates/user/auth/signup_inner.tmpl
index 43667f6f5..28138b8f3 100644
--- a/templates/user/auth/signup_inner.tmpl
+++ b/templates/user/auth/signup_inner.tmpl
@@ -35,8 +35,8 @@
 							{{if .DisableRegistration}}
 								<p>{{.i18n.Tr "auth.disable_register_prompt"}}</p>
 							{{else}}
-								<div class="field" style="font-weight:400;font-size:14px;color:rgba(250,140,22,1);">
-									<span>您的好友 <span>Itx003</span> 邀请你加入启智社区AI协作平台，畅享充沛的免费算力资源！</span>
+								<div class="field invitation_tips" style="font-weight:400;font-size:14px;color:rgba(250,140,22,1);display:none;">
+									<span>您的好友 <span class="__invitation_code__">Itx003</span> 邀请你加入启智社区AI协作平台，畅享充沛的免费算力资源！</span>
 								</div>
 								<div class="field {{if and (.Err_UserName) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
 									<input id="user_name" name="user_name" value="{{.user_name}}" placeholder="{{.i18n.Tr "username"}}" autofocus required>
@@ -79,9 +79,9 @@
 									<div style="display:flex;">
 										<div style="display:flex;align-items:center;">
 											<span>推荐人</span>
-										</div>										
-										<input style="flex:1;margin-left:12px;" id="shared_user" name="shared_user" value="{{.password}}" autocomplete="off" />
-									</div>									
+										</div>
+										<input style="flex:1;margin-left:12px;" id="invitation_code" name="invitation_code" value="" autocomplete="off" />
+									</div>
 								</div>
 
 								<div class="field">
@@ -107,3 +107,29 @@
 		</div>
 	</div>
 </div>
+<script>
+	; (function() {
+		var getUrlParams = function() {
+			var url = window.location.search;
+			var index = url.indexOf('?');
+			var obj = {};
+			if (index !== -1) {
+				var str = url.substr(1);
+				var arr = str.split('&');
+				for (var i = 0, iLen = arr.length; i < iLen; i++) {
+					var list = arr[i].split('=');
+					obj[list[0]] = list[1];
+				}				
+			}
+			return obj;
+		};
+		
+		var sharedUser = getUrlParams()['sharedUser'];
+		if (sharedUser) {
+			setTimeout(function() {
+				$('.invitation_tips').show().find('.__invitation_code__').text(sharedUser);
+				$('input#invitation_code').val(sharedUser).attr('disabled', true);
+			}, 20);
+		}
+	})();
+</script>
diff --git a/web_src/vuepages/pages/user/invite/index.vue b/web_src/vuepages/pages/user/invite/index.vue
index 86cdc7a54..b49db76cb 100644
--- a/web_src/vuepages/pages/user/invite/index.vue
+++ b/web_src/vuepages/pages/user/invite/index.vue
@@ -6,25 +6,25 @@
     </div>
     <div class="content-1">
       <div class="img-c">
-        <img class="img" src="/img/ad/ad03.jpg" />
-        <div class="txt">邀请好友来启智，用免费算力还能赚奖金！</div>
+        <img class="img" :src="bannerImg" />
+        <div class="txt">{{ bannerTitle }}</div>
       </div>
       <div class="descr">
-        <span>新一期的开源打榜活动，每邀请一名好友注册并激活，就可以获得5打榜积分。快快邀请更多好友帮你冲击榜单吧~ </span>
-        <a>点击查看活动详情</a>
+        <span>{{ pageLinkDesc }}</span>
+        <a :href="pageLink" target="_blank">点击查看活动详情</a>
       </div>
     </div>
     <div class="content-2">
       <div class="txt-c">
         <div class="txt-1">
-          <span>启智AI协作平台是启智社区面向AI开发者提供的一站式AI开发协作平台，提供了代码托管、数据集管理、基于异构计算资源的模型调试与训练等功能。目前已经与鹏城云脑、中国算力网（C²NET）一期打通，免费提供丰富算力资源，支撑大家完成AI开发任务。</span>
+          <span>{{ pageOpeniDesc }}</span>
         </div>
-        <div class="txt-2"><span>{{ sharedLink }}</span></div>
-        <div class="txt-3"><span>推荐人：</span><span>{{ sharedUser }}</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>
       <div class="qr-code">
-        <img src="" alt="" style="width:120px;height:120px;">
+        <div id="__qr-code__" style="width:120px;height:120px;"></div>
       </div>
     </div>
     <div class="table-container">
@@ -43,9 +43,7 @@
               <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="注册时间" align="center" header-align="center"></el-table-column>
           <template slot="empty">
             <span style="font-size: 12px">{{
                 loading ? $t('loading') : $t('noData')
@@ -68,14 +66,22 @@
 </template>
 
 <script>
-import { formatDate } from 'element-ui/lib/utils/date-util';
 import Clipboard from 'clipboard';
+import QRCode from 'qrcodejs2';
+import { formatDate } from 'element-ui/lib/utils/date-util';
+import { getUserInvitationCode } from '~/apis/modules/userinvite';
 
 export default {
   data() {
     return {
-      sharedLink: 'https://git.openi.org.cn/user/sign_up?sharedUser=Openihu',
-      sharedUser: 'Openihu',
+      bannerImg: '',
+      bannerTitle: '',
+      pageLink: '',
+      pageLinkDesc: '',
+      invitationLink: window.origin + '/user/sign_up?sharedUser=',
+      invitationCode: '',
+      pageOpeniDesc: '',
+
       loading: false,
       tableData: [],
       pageInfo: {
@@ -91,15 +97,45 @@ export default {
     initCopy() {
       const clipboard = new Clipboard('.__copy_link_btn__', {
         text: () => {
-          return this.sharedLink;
+          return this.invitationLink + this.invitationCode;
         },
-      })
+      });
       clipboard.on('success', (e) => {
         this.$message({
           type: 'success',
           message: '分享内容已复制到剪切板'
         });
       });
+      clipboard.on('error', (e) => {
+        this.$message({
+          type: 'error',
+          message: '复制错误'
+        });
+      });
+    },
+    initData() {
+      getUserInvitationCode().then(res => {
+        res = res.data;
+        if (res) {
+          this.bannerImg = res.page_banner_img;
+          this.bannerTitle = res.page_banner_title;
+          this.pageLink = res.page_link;
+          this.pageLinkDesc = res.page_link_desc;
+          this.invitationCode = res.invitation_code;
+          this.pageOpeniDesc = res.page_openi_desc;
+          this.tableData = res.invitation_users || [];
+          const qrCode = new QRCode("__qr-code__", {
+            text: this.invitationLink + this.invitationCode,
+            width: 120,
+            height: 120,
+            colorDark: '#000000',
+            colorLight: '#ffffff',
+            correctLevel: QRCode.CorrectLevel.H
+          });
+        }
+      }).catch(err => {
+        console.log(err);
+      });
     },
     getTableData() {
       const data = new Array(10).fill(0).map((item, index) => {
@@ -145,8 +181,9 @@ export default {
     },
   },
   mounted() {
+    // this.getTableData();
+    this.initData();
     this.initCopy();
-    this.getTableData();
   },
   beforeDestroy() {
   },