fix:填补优化页面

1 year ago · c5277a58c6
8 changed files with 157 additions and 38 deletions
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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'}
--- a/src/api/recharge/index.ts
+++ b/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`,
+  })
+}
--- a/src/components/AppRecharge/index.vue
+++ b/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>

--- a/src/components/AppUserInfo/index.vue
+++ b/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">
          来到同聪
--- a/src/store/moules/rechareStore/index.ts
+++ b/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: {
--- a/src/views/login/index.vue
+++ b/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 {
-            font-size: 10px;
-            color: #6e7382;
-            letter-spacing: 3px;
-          }
-          &:focus {
-            box-shadow: none;
+          .ant-form-item-explain-error {
+            color: blue;
          }
        }
-
        .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%;
--- a/src/views/task/components/InviteForm/index.vue
+++ b/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>