feature(invitation): 邀请注册获得简币

.eslintrc-auto-import.json

@@ -1,6 +1,7 @@
 {
   "globals": {
     "EffectScope": true,
+    "ElMessage": true,
     "asyncComputed": true,
     "autoResetRef": true,
     "computed": true,

src/auto-import.d.ts

@@ -2,6 +2,7 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   const computed: typeof import('vue')['computed']

src/components.d.ts

@@ -52,6 +52,7 @@ declare module '@vue/runtime-core' {
     ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
@@ -72,7 +73,6 @@ declare module '@vue/runtime-core' {
     ImportJsonDialog: typeof import('./components/ImportJsonDialog/ImportJsonDialog.vue')['default']
     IndexMenuItem: typeof import('./components/NavBar/components/IndexMenuItem.vue')['default']
     InternshipExperienceCom: typeof import('./components/ModelComs/InternshipExperienceCom.vue')['default']
-    InvitationDailog: typeof import('./components/InvitationDialog/InvitationDailog.vue')['default']
     InvitationDialog: typeof import('./components/InvitationDialog/InvitationDialog.vue')['default']
     JobIntentionCom: typeof import('./components/ModelComs/JobIntentionCom.vue')['default']
     LoadingCom: typeof import('./components/Loading/LoadingCom.vue')['default']

src/components/InvitationDialog/InvitationDialog.vue

@@ -31,19 +31,32 @@
 </template>
 
 <script lang="ts" setup>
+  import { getInviteCodeAsync } from '@/http/api/invitations';
   import useClipboard from 'vue-clipboard3';
   const emit = defineEmits(['cancle']);
   interface TDialog {
     dialogInvitationVisible: boolean;
   }
-  withDefaults(defineProps<TDialog>(), {
+  const props = withDefaults(defineProps<TDialog>(), {
     dialogInvitationVisible: false
   });
 
+  watch(
+    () => props.dialogInvitationVisible,
+    (newVal) => {
+      if (newVal) {
+        getInviteCode();
+      }
+    },
+    {
+      deep: true
+    }
+  );
+
   // 邀请人数
   const invitationNum = ref<number>(0);
   // 邀请码
-  const invitationCode = ref<string>('ASD6HD');
+  const invitationCode = ref<string>('');
 
   // 取消
   const cancle = () => {
@@ -65,6 +78,17 @@
   const handleOpen = () => {
     console.log('弹窗打开回调');
   };
+
+  // 获取专属邀请码
+  const getInviteCode = async () => {
+    const data = await getInviteCodeAsync();
+    if (data.data.status === 200) {
+      invitationCode.value = data.data.data.inviteCode;
+      invitationNum.value = data.data.data.totalInvited;
+    } else {
+      ElMessage.error(data.data.message);
+    }
+  };
 </script>
 <style lang="scss" scoped>
   .dialog-footer button:first-child {

src/components/LoginDialog/LoginDialog.vue

@@ -19,6 +19,7 @@
             ref="registerRuleFormRef"
             class="forms_form"
             :model="registerForm"
+            size="small"
             :rules="registerRules"
           >
             <!-- 昵称 -->
@@ -64,7 +65,7 @@
               />
             </el-form-item>
             <!-- 邮箱验证码 -->
-            <el-form-item prop="surePassword">
+            <el-form-item prop="verificationCode">
               <div class="email-code-box">
                 <el-input
                   v-model="registerForm.verificationCode"
@@ -75,13 +76,23 @@
                 <el-button
                   :disabled="!isEmail || isDisabled"
                   class="get-email-code"
+                  size="small"
                   type="primary"
                   @click.stop="getEmailCode"
                 >
                   {{ isDisabled ? `${countdown}s 后重试` : '获取验证码' }}</el-button
                 >
               </div>
             </el-form-item>
+            <!-- 注册邀请码 -->
+            <el-form-item>
+              <el-input
+                v-model.trim="registerForm.inviteCode"
+                class="forms_field-input"
+                placeholder="邀请码（非必填）"
+                @keyup.enter="register(registerRuleFormRef)"
+              />
+            </el-form-item>
           </el-form>
           <el-button
             class="ghost-button forms_buttons-action"
@@ -94,7 +105,13 @@
         <div class="form-container sign-in-container">
           <h1>登录</h1>
           <div class="social-container"> </div>
-          <el-form ref="loginRuleFormRef" class="forms_form" :model="loginForm" :rules="loginRules">
+          <el-form
+            ref="loginRuleFormRef"
+            class="forms_form"
+            size="small"
+            :model="loginForm"
+            :rules="loginRules"
+          >
             <el-form-item prop="email">
               <el-input
                 v-model="loginForm.email"
@@ -234,13 +251,15 @@
     password: string;
     surePassword: string;
     verificationCode: string;
+    inviteCode: string;
   }
   const registerForm = reactive<IRegisterForm>({
-    name: '',
-    email: '',
-    password: '',
-    surePassword: '',
-    verificationCode: ''
+    name: '', // 昵称
+    email: '', // 注册邮箱
+    password: '', // 密码
+    surePassword: '', // 确认密码
+    verificationCode: '', // 邮箱验证码
+    inviteCode: '' // 邀请码
   });
   const registerRules = reactive<FormRules>({
     name: [{ required: true, message: '请输入用户名', trigger: 'change' }],
@@ -252,7 +271,8 @@
         trigger: 'change'
       }
     ],
-    surePassword: [{ required: true, validator: surePassValidator, trigger: 'change' }]
+    surePassword: [{ required: true, validator: surePassValidator, trigger: 'change' }],
+    verificationCode: [{ required: true, message: '邮箱验证码不能为空', trigger: 'change' }]
   });
 
   const show = ref<boolean>(true);
@@ -352,7 +372,8 @@
           name: registerForm.name,
           email: registerForm.email,
           password: registerForm.password,
-          verificationCode: registerForm.verificationCode
+          verificationCode: registerForm.verificationCode,
+          inviteCode: registerForm.inviteCode
         };
         const data = await registerAsync(params);
         if (data.status === 200) {
@@ -477,7 +498,7 @@
       height: 48px;
       align-items: center;
       .get-email-code {
-        height: 47px;
+        height: 40px;
         display: flex;
         padding: 0;
         width: 150px;
@@ -497,7 +518,7 @@
       overflow: hidden;
       width: 768px;
       max-width: 100%;
-      min-height: 500px;
+      min-height: 550px;
     }
 
     .form-container {

src/components/PayIntegralDialog/PayIntegralDialog.vue

@@ -67,19 +67,17 @@
 
               <li>
                 <div class="top">
-                  <h1>评论</h1>
+                  <h1>邀请注册</h1>
                   <div class="circle"
-                    >5 <img width="16" src="@/assets/images/jianB.png" alt="简币"
+                    >20 <img width="16" src="@/assets/images/jianB.png" alt="简币"
                   /></div>
                 </div>
                 <div class="bottom">
                   <p class="content-desc"
-                    >每次评论免费获得+1简币（每日最多+5个，评论违规被删除将扣除简币！）</p
+                    >每邀请一位新用户注册化简，您将获得+20个简币（新用户注册时填写您的专属邀请码）</p
                   >
                   <div class="attendance-box">
-                    <el-tooltip content="前往任意评论区评论即可~">
-                      <div class="have-attend">去评论</div>
-                    </el-tooltip>
+                    <div class="button" @click="getInviteCode">获取专属邀请码</div>
                   </div>
                 </div>
               </li>
@@ -174,6 +172,12 @@
     :dialog-buy-integral-visible="dialogBuyIntegralVisible"
     @cancle="handlePayIntegralCancle"
   ></buy-integral-dialog>
+
+  <!-- 邀请用户弹窗 -->
+  <invitation-dialog
+    :dialog-invitation-visible="dialogInvitationVisible"
+    @cancle="cancleInvitationDialog"
+  ></invitation-dialog>
 </template>
 <script lang="ts" setup>
   import { addIntegralLogAsync } from '@/http/api/integral';
@@ -257,6 +261,17 @@
   const toWebCode = () => {
     router.push('/webcode');
   };
+
+  // 获取专属邀请码
+  const dialogInvitationVisible = ref<boolean>(false);
+  const getInviteCode = async () => {
+    dialogInvitationVisible.value = true;
+  };
+
+  // 关闭邀请弹窗
+  const cancleInvitationDialog = () => {
+    dialogInvitationVisible.value = false;
+  };
 </script>
 <style lang="scss">
   .get-integral-dialog-box {
@@ -469,7 +484,7 @@
             letter-spacing: 4px;
             font-size: 14px;
             border-radius: 3px;
-            cursor: not-allowed;
+            cursor: pointer;
           }
         }
       }

src/http/api/invitations.ts

@@ -0,0 +1,9 @@
+import http from '../request';
+
+// 获取专属邀请码
+export const getInviteCodeAsync: any = () => {
+  return http.request({
+    url: '/huajian/invitations/getInviteCode',
+    method: 'get'
+  });
+};

src/views/person/integralDetail/index.vue

@@ -13,7 +13,7 @@
           </div>
           <!-- 邀请注册 -->
           <div class="integral-line invitation-people">
-            <span>邀请注册：</span>
+            <span>邀请有奖：</span>
             <div class="get-bi-method" @click="openInvitationDialog">立即邀请</div>
           </div>
         </div>