From b915cd60b29edbb85f5cc0dd918761d3efdd58e4 Mon Sep 17 00:00:00 2001
From: "1960116313@qq.com" <1960116313@qq.com>
Date: Thu, 25 Jan 2024 20:07:05 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E6=94=B9=E6=94=AF=E4=BB=98?=
 =?UTF-8?q?=E8=B5=B0=E9=A9=AC=E7=81=AF=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AppRecharge/index.vue          | 156 ++++++++++--------
 src/components/AppRoleDefault/index.vue       |  16 +-
 src/components/AppUserInfo/index.vue          |   1 +
 src/store/moules/userStore/index.ts           |   1 +
 .../task/components/BasicTask/index.d.ts      |   2 +
 src/views/task/components/BasicTask/index.vue |   2 +-
 src/views/task/components/TaskList/index.d.ts |   2 +
 src/views/task/components/TaskList/index.vue  |   3 +-
 8 files changed, 102 insertions(+), 81 deletions(-)

diff --git a/src/components/AppRecharge/index.vue b/src/components/AppRecharge/index.vue
index a604893..cf1d339 100644
--- a/src/components/AppRecharge/index.vue
+++ b/src/components/AppRecharge/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue'
-import { Button, Carousel, Modal, QRCode, message } from 'ant-design-vue'
+import { Button, Carousel, Modal, QRCode, Spin, message } from 'ant-design-vue'
 import { onMounted, ref } from 'vue'
 import type { GoodsData, Racharge } from './index.d'
 import { getIsPay, goodsList, goodsType, payment } from '@/api/recharge/index'
@@ -13,6 +13,7 @@ import { RechargeEnum } from '@/enums/recharge'
 
 const userStore = useUserStore()
 const rechargeStore = useRechargeStore()
+const currentIndex = ref(3)
 // 轮播的ref
 const carouselRef = ref()
 // 选项卡索引
@@ -23,6 +24,8 @@ const qrshow = ref<boolean>(false)
 const tabs = ref<Racharge[]>([])
 // 套餐列表
 const goodslists = ref<GoodsData[]>([])
+
+const isDataLoaded = ref(false)
 // 支付路径
 const payData = ref<any>({
   orderCode: '',
@@ -40,14 +43,19 @@ function getType() {
 
 // 套餐列表
 function getgoodsList(type: string) {
+  isDataLoaded.value = true
   goodsList({ type }).then((res) => {
     goodslists.value = res
+    setTimeout(() => {
+      isDataLoaded.value = false
+    }, 300)
   })
 }
 
 // 选择选项卡
 function selectTab(index: number, key: string) {
   activeTab.value = index
+  currentIndex.value = 3
   getgoodsList(key)
 }
 
@@ -78,7 +86,6 @@ function stopPolling() {
     clearInterval(intervalId.value)
     intervalId.value = null
     qrshow.value = false
-
     userStore.getChatInfoFun()
   }
 }
@@ -111,11 +118,17 @@ function tabClass(index: number) {
 
 // 走马灯向上
 function onPrevClick() {
-  carouselRef.value.prev()
+  if (currentIndex.value > 3) {
+    currentIndex.value--
+    carouselRef.value.prev()
+  }
 }
 // 走马灯向下
 function onNextClick() {
-  carouselRef.value.next()
+  if (currentIndex.value < goodslists.value.length) {
+    currentIndex.value++
+    carouselRef.value.next()
+  }
 }
 
 // 数字分隔符
@@ -150,89 +163,92 @@ function separator(num: number | string) {
                 <div v-show="goodslists.length > 3" class="prev-button prev" @click="onPrevClick">
                   <LeftOutlined />
                 </div>
-                <Carousel ref="carouselRef" arrows :dots="false" :autoplay="false" :slides-to-show="goodslists.length > 3 ? 3 : goodslists.length" :slides-to-scroll="1">
-                  <div v-for="(item, index) in goodslists" :key="index" class="carouse-box">
-                    <div class="carouse-item">
-                      <div class="dotnumbox">
-                        <div class="dotnum">
-                          {{ item.giveNum }}点数
-                        </div>
-                        <div class="discount">
-                          限时折扣
-                        </div>
-                      </div>
-                      <div class="deadline">
-                        {{ item.title }}
-                      </div>
-                      <div class="equitiesbox">
-                        <div class="equities">
-                          <div class="left">
-                            GPT3.5版本
+                <Spin :spinning="isDataLoaded">
+                  <Carousel :key="activeTab" ref="carouselRef" arrows :dots="false" :infinite="false" :autoplay="false" :slides-to-show="goodslists.length > 3 ? 3 : goodslists.length" :slides-to-scroll="1">
+                    <div v-for="(item, index) in goodslists" :key="index" class="carouse-box">
+                      <div class="carouse-item">
+                        <div class="dotnumbox">
+                          <div class="dotnum">
+                            {{ item.giveNum }}点数
                           </div>
-                          <div class="right">
-                            {{ item.gpt35Num }}条
+                          <div class="discount">
+                            限时折扣
                           </div>
                         </div>
+                        <div class="deadline">
+                          {{ item.title }}
+                        </div>
+                        <div class="equitiesbox">
+                          <div class="equities">
+                            <div class="left">
+                              GPT3.5版本
+                            </div>
+                            <div class="right">
+                              {{ item.gpt35Num }}条
+                            </div>
+                          </div>
 
-                        <div class="equities">
-                          <div class="left">
-                            GPT4.0版本
+                          <div class="equities">
+                            <div class="left">
+                              GPT4.0版本
+                            </div>
+                            <div class="right">
+                              {{ item.gpt40Num }}条
+                            </div>
                           </div>
-                          <div class="right">
-                            {{ item.gpt40Num }}条
+                          <div class="equities">
+                            <div class="left">
+                              AI绘图
+                            </div>
+                            <div class="right">
+                              {{ item.pictureNum }}幅
+                            </div>
                           </div>
                         </div>
-                        <div class="equities">
-                          <div class="left">
-                            AI绘图
+                        <div class="price">
+                          <div class="nowprice">
+                            ¥{{ item.price }}
                           </div>
-                          <div class="right">
-                            {{ item.pictureNum }}幅
+                          <div class="oldprice">
+                            ¥{{ item.costPrice }}
                           </div>
                         </div>
-                      </div>
-                      <div class="price">
-                        <div class="nowprice">
-                          ¥{{ item.price }}
+                        <div class="payBtn">
+                          <Button class="customBtn" @click="handlePay(item.id)">
+                            立即充值
+                          </Button>
                         </div>
-                        <div class="oldprice">
-                          ¥{{ item.costPrice }}
-                        </div>
-                      </div>
-                      <div class="payBtn">
-                        <Button class="customBtn" @click="handlePay(item.id)">
-                          立即充值
-                        </Button>
                       </div>
                     </div>
+                  </Carousel>
+
+                  <div v-show="goodslists.length > 3" class="next-button next" @click="onNextClick">
+                    <RightOutlined />
                   </div>
-                </Carousel>
-                <div v-show="goodslists.length > 3" class="next-button next" @click="onNextClick">
-                  <RightOutlined />
-                </div>
-                <div class="line">
-                  <div class="colorLine"></div>
-                </div>
-                <div class="broadcastBox">
-                  <div class="broadcast">
-                    <div class="trumpet">
-                      <img :src="trumpet" alt="">
-                    </div>
-                    <div class="marquee">
-                      <div class="content">
-                        <span>152****0062 在 2024/1/25开通了至尊礼遇卡！</span>
-                        <span>178****6455 在 2024/1/24开通了年套餐！</span>
-                        <span>151****2519 在 2024/1/23开通了日套餐！</span>
-                        <span>178****0062 在 2024/1/22开通了至尊礼遇卡！</span>
-                        <span>178****6556 在 2024/1/21开通了年套餐！</span>
-                        <span>131****9871 在 2024/1/20开通了日套餐！</span>
-                        <span>198****2091 在 2024/1/19开通了至尊礼遇卡！</span>
-                        <span>138****4848 在 2024/1/18开通了年套餐！</span>
-                        <span>195****2519 在 2024/1/17开通了日套餐！</span>
+                  <div class="line">
+                    <div class="colorLine"></div>
+                  </div>
+                  <div class="broadcastBox">
+                    <div class="broadcast">
+                      <div class="trumpet">
+                        <img :src="trumpet" alt="">
+                      </div>
+                      <div class="marquee">
+                        <div class="content">
+                          <span>152****0062 在 2024/1/25开通了至尊礼遇卡！</span>
+                          <span>178****6455 在 2024/1/24开通了年套餐！</span>
+                          <span>151****2519 在 2024/1/23开通了日套餐！</span>
+                          <span>178****0062 在 2024/1/22开通了至尊礼遇卡！</span>
+                          <span>178****6556 在 2024/1/21开通了年套餐！</span>
+                          <span>131****9871 在 2024/1/20开通了日套餐！</span>
+                          <span>198****2091 在 2024/1/19开通了至尊礼遇卡！</span>
+                          <span>138****4848 在 2024/1/18开通了年套餐！</span>
+                          <span>195****2519 在 2024/1/17开通了日套餐！</span>
+                        </div>
                       </div>
                     </div>
                   </div>
-                </div>
+                </Spin>
               </div>
               <div v-else class="extreme-box">
                 <div class="extreme">
diff --git a/src/components/AppRoleDefault/index.vue b/src/components/AppRoleDefault/index.vue
index ed004a8..07ca7d1 100644
--- a/src/components/AppRoleDefault/index.vue
+++ b/src/components/AppRoleDefault/index.vue
@@ -14,7 +14,6 @@ const typeIndex = ref(0)
 function getRoleData() {
   getRole(1).then((res) => {
     roleList.value = res
-    console.log('角色', res)
   })
 }
 getRoleData()
@@ -22,7 +21,6 @@ getRoleData()
 function getAppData() {
   getAppList().then((res) => {
     application.value = res
-    console.log('应用', res)
   })
 }
 
@@ -134,11 +132,13 @@ function handleChange(index: number) {
           height: 100px;
           margin-bottom: 35px;
           background: linear-gradient(169deg, #edf3ff 0%, #f7f9ff 100%);
-          box-shadow: 1px 4px 10px 0px rgba(194, 205, 235, 0.49);
+          // box-shadow: 1px 4px 10px 0px rgba(194, 205, 235, 0.49);
           border-radius: 10px;
-
+          transition: all 0.3s linear 0s;
           cursor: pointer;
-
+          &:hover {
+            box-shadow: 1px 4px 10px 0px rgba(194, 205, 235, 0.49);
+          }
           .top {
             display: flex;
             position: relative;
@@ -157,7 +157,7 @@ function handleChange(index: number) {
               right: 0px;
               width: 4px;
               height: 30px;
-              background: linear-gradient(131deg, #226aff 0%, #3fc6ff 100%);
+              background: #4670e3;
               font-size: 0;
               border-radius: 100px 0px 0px 100px;
               transition: width 0.3s linear 0s;
@@ -199,8 +199,8 @@ function handleChange(index: number) {
             }
           }
           &:hover .exchange {
-            width: 50px;
-            background: linear-gradient(131deg, #226aff 0%, #3fc6ff 100%);
+            width: 70px;
+            background: #4670e3;
             border-radius: 100px 0px 0px 100px;
             text-align: center;
             color: white;
diff --git a/src/components/AppUserInfo/index.vue b/src/components/AppUserInfo/index.vue
index 4ee52b1..93a3637 100644
--- a/src/components/AppUserInfo/index.vue
+++ b/src/components/AppUserInfo/index.vue
@@ -9,6 +9,7 @@ import { useRechargeStore } from '@/store/moules/rechareStore'
 
 const rechargeStore = useRechargeStore()
 const userStore = useUserStore()
+
 const info = computed(() => userStore.getChatInfo)
 
 function handleRecharge() {
diff --git a/src/store/moules/userStore/index.ts b/src/store/moules/userStore/index.ts
index 893ae22..da30542 100644
--- a/src/store/moules/userStore/index.ts
+++ b/src/store/moules/userStore/index.ts
@@ -55,6 +55,7 @@ export const useUserStore = defineStore('useUserStore', {
 
     getChatInfoFun() {
       chatInfo().then((res) => {
+        console.log(res, 'sotre')
         this.setChatInfo(crypto.encryptAES(JSON.stringify(res), crypto.localKey))
       })
     },
diff --git a/src/views/task/components/BasicTask/index.d.ts b/src/views/task/components/BasicTask/index.d.ts
index b928690..20ad198 100644
--- a/src/views/task/components/BasicTask/index.d.ts
+++ b/src/views/task/components/BasicTask/index.d.ts
@@ -12,5 +12,7 @@ interface TaskType {
   id: string
   receiveCount: number
   finishEnableCount: number
+  finishCount: number
+  finishEnableMaxCount: number
 }
 export { SignType, TaskType }
diff --git a/src/views/task/components/BasicTask/index.vue b/src/views/task/components/BasicTask/index.vue
index 76cdaec..ecb6a76 100644
--- a/src/views/task/components/BasicTask/index.vue
+++ b/src/views/task/components/BasicTask/index.vue
@@ -157,7 +157,7 @@ function handleInvite() {
                   已获得{{ item.points }}点数
                 </div>
                 <div v-show="item.status !== 2" class="unfinished">
-                  {{ item.receiveCount }}/{{ item.finishEnableCount }}
+                  {{ item.finishCount }}/{{ item.finishEnableMaxCount }}
                 </div>
               </div>
               <div class="earn-list-right">
diff --git a/src/views/task/components/TaskList/index.d.ts b/src/views/task/components/TaskList/index.d.ts
index 2c92383..95918f5 100644
--- a/src/views/task/components/TaskList/index.d.ts
+++ b/src/views/task/components/TaskList/index.d.ts
@@ -5,4 +5,6 @@ export interface TaskType {
   id: string
   receiveCount: number
   finishEnableCount: number
+  finishCount: number
+  finishEnableMaxCount: number
 }
diff --git a/src/views/task/components/TaskList/index.vue b/src/views/task/components/TaskList/index.vue
index f2d3275..ad602a1 100644
--- a/src/views/task/components/TaskList/index.vue
+++ b/src/views/task/components/TaskList/index.vue
@@ -28,7 +28,6 @@ const props = defineProps({
 })
 const emit = defineEmits(['updateList'])
 const reactiveList: ComputedRef<TaskType[]> = computed(() => props.list)
-console.log(reactiveList, 'reactiveList')
 
 const userStore = useUserStore()
 // 领取积分
@@ -84,7 +83,7 @@ const dynamicStyle = computed(() => {
                 已获得{{ item.points }}点数
               </div>
               <div v-show="item.status !== 2" class="unfinished">
-                {{ item.receiveCount }}/{{ item.finishEnableCount }}
+                {{ item.finishCount }}/{{ item.finishEnableMaxCount }}
               </div>
             </div>
             <div class="earn-list-right">