fix:填补优化页面

package.json

@@ -21,6 +21,7 @@
     "@vueuse/core": "^10.7.2",
     "ant-design-vue": "^4.1.0",
     "axios": "^1.6.5",
+    "clipboard-copy": "^4.0.1",
     "crypto-js": "^4.2.0",
     "lodash-es": "^4.17.21",
     "md-editor-v3": "^4.11.0",

pnpm-lock.yaml

@@ -17,6 +17,9 @@ dependencies:
   axios:
     specifier: ^1.6.5
     version: 1.6.5
+  clipboard-copy:
+    specifier: ^4.0.1
+    version: 4.0.1
   crypto-js:
     specifier: ^4.2.0
     version: 4.2.0
@@ -2535,6 +2538,10 @@ packages:
       escape-string-regexp: 1.0.5
     dev: true
 
+  /clipboard-copy@4.0.1:
+    resolution: {integrity: sha512-wOlqdqziE/NNTUJsfSgXmBMIrYmfd5V0HCGsR8uAKHcg+h9NENWINcfRjtWGU77wDHC8B8ijV4hMTGYbrKovng==}
+    dev: false
+
   /cliui@8.0.1:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}

src/api/recharge/index.ts

@@ -0,0 +1,7 @@
+import { defHttp } from '@/utils/axios/index'
+
+export async function goodsType() {
+  return defHttp.get({
+    url: `/hulk-system/dict/dictionary?code=goods_type`,
+  })
+}

src/components/AppRecharge/index.vue

@@ -2,13 +2,20 @@
 import { CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue'
 import { Button, Carousel } from 'ant-design-vue'
 import { ref } from 'vue'
+import { goodsType } from '@/api/recharge/index'
 import trumpet from '@/assets/images/recharge/lb.png'
+import vip from '@/assets/images/recharge/vip.png'
 
 import { useRechargeStore } from '@/store/moules/rechareStore'
 
 const rechargeStore = useRechargeStore()
 const carouselRef = ref()
-
+function getType() {
+  goodsType().then((res) => {
+    console.log(res)
+  })
+}
+getType()
 // 关闭充值弹窗
 function handleClose() {
   rechargeStore.rechargeClose()
@@ -85,6 +92,7 @@ function onNextClick() {
                   :class="tabClass(index)"
                   @click="selectTab(index)"
                 >
+                  <img v-if="index === tabs.length - 1" class="vipphoto" :src="vip" alt="">
                   {{ tab.title }}
                 </div>
               </div>
@@ -237,7 +245,7 @@ function onNextClick() {
   <style scoped lang="scss">
   .modal-mask {
   position: fixed;
-
+  z-index: 9999;
   top: 0;
   left: 0;
   width: 100%;
@@ -374,7 +382,7 @@ function onNextClick() {
             width: 85%;
             height: 100%;
             margin: 0 auto;
-            padding: 30px 0;
+            padding: 20px 0;
             .extremebg {
               width: 97%;
               height: 140px;
@@ -603,6 +611,10 @@ function onNextClick() {
   border-top-left-radius: 22px;
   border-top-right-radius: 22px;
   overflow: hidden;
+  .vipphoto {
+    width: 30px;
+    height: 30px;
+  }
 }
 
 .tab {
@@ -616,7 +628,6 @@ function onNextClick() {
   font-family: PingFang-SC, PingFang-SC;
   font-weight: bold;
   color: #6b2d01;
-  overflow: hidden;
   letter-spacing: 2px;
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
@@ -627,22 +638,10 @@ function onNextClick() {
   content: '';
   border-right: 1px solid #f1d7b6;
   position: absolute;
-  top: 0;
+  top: 6px;
   bottom: 6px;
   right: 0;
 }
-.tab:last-child::before {
-  content: '';
-  display: inline-block;
-  width: 30px; /* 调整宽度 */
-  height: 30px; /* 调整高度 */
-  background-image: url('@/assets/images/recharge/vip.png');
-  background-size: contain; /* 背景图片保持比例填充 */
-  background-repeat: no-repeat; /* 防止背景图片重复 */
-  margin-right: 5px;
-  vertical-align: middle;
-}
-
 .tab.active.square {
   background-color: white;
 }
@@ -650,13 +649,37 @@ function onNextClick() {
 .tab.active.triangle:first-child {
   border-top-left-radius: 12px;
   background-color: white;
-  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    right: -30px;
+    width: 0;
+    height: 0;
+    z-index: 1;
+    border-top: 0px solid transparent;
+    border-right: 30px solid transparent;
+    border-bottom: 50px solid #ffffff;
+  }
 }
 
 .tab.active.triangle:last-child {
+  border-top-right-radius: 12px;
   background-color: #0f0745;
   color: #ffac72;
-  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: -25px;
+    bottom: 0;
+    width: 0;
+    height: 0;
+    z-index: 1;
+    border-top: 0px solid transparent;
+    border-left: 30px solid transparent;
+    border-bottom: 48px solid #0f0745;
+  }
 }
 </style>
 

src/components/AppUserInfo/index.vue

@@ -25,7 +25,7 @@ function handleRecharge() {
         </div>
       </div>
       <div class="num">
-        <!-- {{ info.questionCount > 0 ? info?.questionCount : 0 }} -->
+        {{ info.questionCount > 0 ? info?.questionCount : 0 }}
       </div>
       <div class="pay" @click="handleRecharge">
         充值
@@ -34,7 +34,7 @@ function handleRecharge() {
     <div class="app-user-info-bottom">
       <div>
         <div class="accumulative">
-          <!-- {{ info?.messageCount }} -->
+          {{ info?.messageCount }}
         </div>
         <div class="accumulativename">
           累计提问
@@ -43,7 +43,7 @@ function handleRecharge() {
       <Divider type="vertical" style="height: 30px; background-color: #e1e9f9" />
       <div>
         <div class="accumulative">
-          <!-- {{ info?.createdDay }}天 -->
+          {{ info?.createdDay }}天
         </div>
         <div class="accumulativename">
           来到同聪

src/store/moules/rechareStore/index.ts

@@ -3,7 +3,7 @@ import { defineStore } from 'pinia'
 export const useRechargeStore = defineStore('useRechargeStore', {
   state: () => {
     return {
-      show: false,
+      show: true,
     }
   },
   getters: {

src/views/login/index.vue

@@ -27,7 +27,7 @@ const ruleForm = reactive<LoginForm>({
   phone: '',
   code: '',
 })
-
+const loading = ref(false)
 async function validatePhone(_rule: Rule, value: string) {
   if (!value || !(/^1\d{10}$/.test(value)))
     // eslint-disable-next-line prefer-promise-reject-errors
@@ -46,6 +46,7 @@ function handleLogin() {
   formRef.value
     .validate()
     .then(() => {
+      loading.value = true
       userStore.login({
         user_type: UserTypeEnum.C,
         grant_type: GrantTypeEnum.SMS,
@@ -55,9 +56,11 @@ function handleLogin() {
         type: TypeEnum.PHONE,
       }).then(() => {
         createMessage.success('登录成功')
+        loading.value = false
         router.push('/')
       }).catch(() => {
         createMessage.error('登录失败')
+        loading.value = false
       })
     })
 }
@@ -176,13 +179,14 @@ function timer() {
             </Input>
           </FormItem>
           <FormItem>
-            <div
+            <Button
               class="login-button"
+              :loading="loading"
               @click="handleLogin"
               @key.enter="handleLogin"
             >
               登 录
-            </div>
+            </Button>
             <div class="versions">
               v1.0.0
             </div>
@@ -282,22 +286,21 @@ function timer() {
           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;
-          &::placeholder {
+          .ant-form-item-explain-error {
-            font-size: 10px;
+            color: blue;
-            color: #6e7382;
-            letter-spacing: 3px;
-          }
-          &:focus {
-            box-shadow: none;
           }
         }
-
         .login-title {
           margin-top: 50px;
           margin-bottom: 30px;
@@ -313,12 +316,10 @@ function timer() {
           margin-top: 10px;
           width: 100%;
           height: 40px;
-          cursor: pointer;
+
           background: #0075eb;
           border-radius: 4px;
           color: white;
-          text-align: center;
-          line-height: 40px;
         }
         .versions {
           width: 100%;

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

@@ -2,8 +2,9 @@
 import {
   CloseOutlined,
 } from '@ant-design/icons-vue'
-import { Button, QRCode } from 'ant-design-vue'
+import { Button, Divider, QRCode, message } from 'ant-design-vue'
 import { ref } from 'vue'
+import copy from 'clipboard-copy'
 
 defineProps({
   show: {
@@ -12,6 +13,7 @@ defineProps({
   },
 })
 const emits = defineEmits(['update:show'])
+
 // 关闭弹窗
 function handleClose() {
   emits('update:show', false)
@@ -27,6 +29,23 @@ async function dowloadChange() {
   a.click()
   document.body.removeChild(a)
 }
+
+const code = ref('你好啊')
+
+function copyText() {
+  copy(code.value)
+    .then(() => {
+      message.success({
+        content: () => '复制成功',
+        class: 'message-class',
+      })
+      // 复制成功后的操作
+    })
+    // .catch(() => {
+    //   console.log('Failed to copy!')
+    //   // 复制失败后的操作
+    // })
+}
 </script>
 
 <template>
@@ -48,6 +67,20 @@ async function dowloadChange() {
               保存二维码
             </Button>
           </div>
+          <Divider style="border-color: #7cb305;margin: 0;" dashed />
+          <div class="invitationCode">
+            <div class="i-name">
+              邀请码邀请
+            </div>
+            <div class="i-code">
+              {{ code }}
+            </div>
+            <div class="i-copy">
+              <Button class="copy-btn" @click="copyText">
+                复制邀请码
+              </Button>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -123,6 +156,50 @@ async function dowloadChange() {
       letter-spacing: 1px;
     }
   }
+  .invitationCode {
+    width: 530px;
+    height: 60px;
+    background: #e4edff;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    .i-name {
+      font-size: 14px;
+      font-family: PingFang-SC, PingFang-SC;
+      font-weight: bold;
+      color: #000000;
+      letter-spacing: 1px;
+    }
+    .i-code {
+      width: 170px;
+      height: 30px;
+      background: #ffffff;
+      border-radius: 4px;
+      border: 1px solid #dddddd;
+      font-size: 13px;
+      font-family:
+        PingFangSC,
+        PingFang SC;
+      font-weight: 400;
+      color: #888c90;
+      letter-spacing: 1px;
+      line-height: 30px;
+      padding-left: 20px;
+    }
+    .copy-btn {
+      width: 128px;
+      height: 30px;
+      background: #4670e3;
+      border-radius: 4px;
+      font-size: 13px;
+      font-family:
+        PingFangSC,
+        PingFang SC;
+      font-weight: 400;
+      color: #ffffff;
+      letter-spacing: 1px;
+    }
+  }
 }
 .modal-enter-active,
 .modal-leave-active {
@@ -138,4 +215,7 @@ async function dowloadChange() {
 .modal-leave-from {
   opacity: 1;
 }
+:deep(.message-class) {
+  z-index: 200;
+}
 </style>