feat;新增邀请

fix:修改样式

src/components/AppNoviceBenefit/index.ts

@@ -0,0 +1,3 @@
+import AppNoviceBenefit from './index.vue'
+
+export { AppNoviceBenefit }

src/components/AppNoviceBenefit/index.vue

@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import { Button } from 'ant-design-vue'
+import { CloseOutlined } from '@ant-design/icons-vue'
+
+// import { useUserStore } from '@/store/moules/userStore/index'
+
+const a = ref(false)
+onMounted(() => {
+
+})
+// 关闭弹窗
+function handleClose() {
+  a.value = false
+}
+</script>
+
+<template>
+  <transition name="modal">
+    <div v-if="a" class="modal-mask">
+      <div class="modal-wrapper">
+        <div class="modal-container">
+          <div class="modal-body">
+            <Button class="btn">
+              领取并前往使用
+            </Button>
+          </div>
+        </div>
+        <div class="close" @click="handleClose">
+          <CloseOutlined />
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<style scoped lang="scss">
+  .modal-mask {
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.1);
+  .close {
+    position: absolute;
+    top: 40px;
+    right: 40px;
+    width: 27px;
+    height: 27px;
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 50%;
+    line-height: 27px;
+    text-align: center;
+    color: #fff;
+    cursor: pointer;
+  }
+  .modal-wrapper {
+    width: 40vw;
+    height: 60vh;
+    position: absolute;
+    top: 10%;
+    left: 50%;
+    transform: translateX(-50%);
+    background-image: url(@/assets/images/benefit.png);
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: contain;
+    border-radius: 22px;
+    .modal-body {
+      .btn {
+        height: 38px;
+        background: linear-gradient(180deg, #ffa733 0%, #df5413 100%);
+        border-radius: 40px;
+        font-size: 14px;
+        font-family: PingFang-SC, PingFang-SC;
+        font-weight: bold;
+        color: #ffffff;
+        letter-spacing: 2px;
+        position: absolute;
+        bottom: 60px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+  }
+}
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.3s;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-to,
+.modal-leave-from {
+  opacity: 1;
+}
+</style>

src/components/AppRecharge/index.vue

@@ -220,9 +220,9 @@ function separator(num: number | string) {
                     </div>
                     <div class="marquee">
                       <div class="content">
-                        <span>这是第一条滚动的公告</span>
-                        <span>这是第二条滚动的公告</span>
-                        <span>这是第三条滚动的公告</span>
+                        <span>152****0062 在 2024/1/23 开通了至尊礼遇卡！</span>
+                        <span>178****6455 在 2024/1/12 开通了年套餐！</span>
+                        <span>195****2519 在 2024/1/1开通了日套餐！</span>
                       </div>
                     </div>
                   </div>

src/components/AppTaskMenuList/index.vue

@@ -25,11 +25,11 @@ const list = computed(() => [
     status: taskListStore.dailyTask,
     task: 'task3',
   },
-  {
-    title: '其他任务',
-    status: taskListStore.otherTask,
-    task: 'task4',
-  },
+  // {
+  //   title: '其他任务',
+  //   status: taskListStore.otherTask,
+  //   task: 'task4',
+  // },
 ])
 // 切换任务
 function handleClick(index: number, task: string) {

src/components/AppUserInfo/index.vue

@@ -9,6 +9,7 @@ import { useRechargeStore } from '@/store/moules/rechareStore'
 const rechargeStore = useRechargeStore()
 const userStore = useUserStore()
 const info = userStore.getChatInfo
+console.log(info, 'info')
 
 function handleRecharge() {
   rechargeStore.rechargeOpen()

src/store/moules/taskListStore/index.ts

@@ -9,20 +9,6 @@ export const useTaskListStore = defineStore('useTaskListStore', {
       otherTask: false,
     }
   },
-  getters: {
-    getBasicTask(): boolean {
-      return this.basicTask
-    },
-    getNoviceTask(): boolean {
-      return this.noviceTask
-    },
-    getDailyTask(): boolean {
-      return this.dailyTask
-    },
-    getOtherTask(): boolean {
-      return this.otherTask
-    },
-  },
   actions: {
     changeBasicTask(status: boolean) {
       this.basicTask = status

src/views/login/index.vue

@@ -48,7 +48,7 @@ const rules: Record<string, Rule[]> = {
     { validator: validatePhone, trigger: 'blur' },
   ],
   code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
-  inviteCode: [{ required: false, message: '请输入验证码', trigger: 'blur' }],
+
 }
 // 登录
 function handleLogin() {
@@ -187,15 +187,6 @@ function timer() {
               </template>
             </Input>
           </FormItem>
-          <FormItem
-            name="inviteCode"
-          >
-            <Input v-model:value="ruleForm.inviteCode" :bordered="false" class="custom-input" placeholder="请输入邀请码">
-              <template #prefix>
-                <UsergroupAddOutlined style="color:#787D8E" />
-              </template>
-            </Input>
-          </FormItem>
           <FormItem>
             <Button
               class="login-button"
@@ -216,7 +207,8 @@ function timer() {
 </template>
 
 <style lang="scss" scoped>
-.login-container {
+@media all and (min-width: 992px) {
+  .login-container {
     width: 100%;
     height: 100%;
     background-image: url('@/assets/images/login/loginbg.png');
@@ -354,5 +346,148 @@ function timer() {
         }
       }
     }
+  }
+}
+@media all and (max-width: 992px) {
+  .login-container {
+    width: 100%;
+    height: 100%;
+    background-image: url('@/assets/images/login/loginbg.png');
+    background-size: 100% 100%;
+    background-position: center center;
+    position: relative;
+
+    .logo {
+      position: absolute;
+      top: 2%;
+      left: 2%;
+      .logoimg {
+        width: 200px;
+      }
+    }
+    .logoncontent {
+      width: 90%;
+      height: 50%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      display: flex;
+      align-items: center;
+      position: relative;
+      .left {
+        display: none;
+        width: 50%;
+        height: 100%;
+        margin-right: 20px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        position: relative;
+        .info {
+          position: absolute;
+          top: 20%;
+          left: 10%;
+          .welcome {
+            font-size: 50px;
+            font-family: PingFang-SC, PingFang-SC;
+            font-weight: 300;
+            color: #ffffff;
+
+            letter-spacing: 4px;
+          }
+          .zh {
+            font-size: 26px;
+            padding-top: 20px;
+            font-family: PingFang-SC, PingFang-SC;
+            font-weight: 400;
+            color: #ffffff;
+            letter-spacing: 5px;
+          }
+          .en {
+            font-size: 13px;
+            font-family: PingFang-SC, PingFang-SC;
+            font-weight: 400;
+            color: #77a4ff;
+            line-height: 22px;
+            padding-top: 10px;
+          }
+        }
+      }
+
+      .right {
+        width: 100%;
+        height: 100%;
+        border-radius: 4px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        letter-spacing: 0.2em;
+        backdrop-filter: blur(50px);
+        position: absolute;
+        top: 0;
+        right: 2%;
+        .login-Form {
+          width: 70%;
+          margin: 0 auto;
+          .icon {
+            width: 15px;
+            height: 15px;
+          }
+          .time {
+            font-size: 12px;
+            color: #48a1fe;
+          }
+          :deep(.ant-form-item-explain-error) {
+            font-size: 12px;
+            padding-left: 27px;
+          }
+
+          .custom-input {
+            border: none;
+            border-radius: 0;
+            background-color: transparent;
+            color: #333;
+            border-bottom: 1px solid #c8cbd6;
+            .ant-form-item-explain-error {
+              color: blue;
+            }
+          }
+          .login-title {
+            margin-top: 50px;
+            margin-bottom: 30px;
+            color: #505458;
+            font-size: 19px;
+            font-family:
+              PingFangSC,
+              PingFang SC;
+            font-weight: 500;
+            color: #141515;
+          }
+          .login-button {
+            margin-top: 10px;
+            width: 100%;
+            height: 40px;
+
+            background: #0075eb;
+            border-radius: 4px;
+            color: white;
+          }
+          .versions {
+            width: 100%;
+            text-align: center;
+            font-size: 13px;
+            font-family:
+              PingFangSC,
+              PingFang SC;
+            font-weight: 400;
+            color: #6e7382;
+            padding-top: 20px;
+            letter-spacing: 2px;
+          }
+        }
+      }
+    }
+  }
 }
 </style>

src/views/task/components/BasicTask/index.vue

@@ -153,10 +153,10 @@ function handleInvite() {
                 <div class="name">
                   {{ item.name }}
                 </div>
-                <div v-show="item.status === 2" class="accomplish">
+                <div v-show="item.status === 2 " class="accomplish">
                   已获得{{ item.score }}点数
                 </div>
-                <div v-show="item.status !== 2" class="unfinished">
+                <div v-show="item.status !== 2 && item.name !== '邀请注册' " class="unfinished">
                   0/{{ item.score }}
                 </div>
               </div>
@@ -457,8 +457,6 @@ function handleInvite() {
                   padding-left: 3px;
                 }
                 .add-dot-btn {
-                  cursor: pointer;
-
                   border-radius: 16px;
                   font-size: 11px;
                   font-family:
@@ -470,7 +468,7 @@ function handleInvite() {
                   text-align: center;
                   padding: 2px 5px;
                   &.accomplish {
-                    width: 45px;
+                    width: 48px;
                     background: linear-gradient(
                       90deg,
                       #b5ceff 0%,
@@ -484,6 +482,7 @@ function handleInvite() {
                     border: 1px solid #cdcdcd;
                     line-height: 18px;
                     color: #888c90;
+                    cursor: pointer;
                   }
                   &.invite {
                     width: 47px;
@@ -493,6 +492,7 @@ function handleInvite() {
                       #486dff 100%
                     );
                     color: #ffffff;
+                    cursor: pointer;
                   }
                 }
               }

src/views/task/components/InviteForm/index.vue

@@ -46,7 +46,7 @@ const code = ref('你好啊')
             <div class="close" @click="handleClose">
             </div>
             <div class="qr">
-              <QRCode ref="qrcodeCanvasRef" :size="145" value="http://www.antdv.com" />
+              <QRCode ref="qrcodeCanvasRef" :size="145" :value="`http://192.168.1.121:5173/Login?inviteCode=${code}`" />
             </div>
             <Button type="primary" class="save-qr" @click="dowloadChange">
               保存二维码

src/views/task/index.vue

@@ -3,6 +3,7 @@ import { provide, ref } from 'vue'
 import { BasicTask } from './components/BasicTask'
 import { NoviceTask } from './components/NoviceTask'
 import { DailyTask } from './components/DailyTask'
+import { AppNoviceBenefit } from '@/components/AppNoviceBenefit/index'
 
 // import { OtherTask } from './components/OtherTask'
 import { AppUserInfo } from '@/components/AppUserInfo'
@@ -33,6 +34,7 @@ provide('taskContainer', taskContainer)
         <NoviceTask ref="task2" />
         <DailyTask ref="task3" />
         <!-- <OtherTask ref="task4" /> -->
+        <AppNoviceBenefit />
       </div>
     </template>
   </AppContainerBox>