【需求 20331】 feat: 优化积分商城相关页面

src/views/pointsStore/components/exchangeYabiRecordDilaog.vue

@@ -11,19 +11,19 @@
       <!-- 搜索筛选区域 - 优化布局 -->
       <div class="mb-4 flex items-center gap-3 justify-end">
         <div class="w-750px flex items-center gap-3">
-          <el-select v-model="searchParams.type" placeholder="选择商品类型" clearable>
+          <!-- <el-select v-model="searchParams.type" placeholder="选择商品类型" clearable>
             <el-option label="亚声实物" :value="ShopGoodsTypeEnum.REAL_GOODS" />
             <el-option label="虚拟装饰" :value="ShopGoodsTypeEnum.VIRTUAL_GOODS" />
-          </el-select>
+          </el-select> -->
 
           <el-date-picker
-            v-model="searchParams.dateRange"
+            v-model="timeRange"
             type="daterange"
             range-separator="至"
             start-placeholder="开始日期"
             end-placeholder="结束日期"
             format="YYYY-MM-DD"
-            value-format="YYYY-MM-DD"
+            value-format="x"
             clearable
             style="width: 700px"
           />
@@ -42,7 +42,7 @@
               class="font-semibold"
               :class="{ 'text-red-500': !scope.row.isIncr, 'text-green-500': scope.row.isIncr }"
             >
-              {{ scope.row.isIncr ? '+' : '-' }}
+              <!-- {{ scope.row.isIncr ? '+' : '-' }} -->
               {{ scope.row.scoreAyabi }}
             </span>
           </template>
@@ -74,12 +74,30 @@
 import { usePageSearch } from '@/hooks'
 import { getExchangeYabiRecordList } from '@/api'
 import dayjs from 'dayjs'
-import { ShopGoodsTypeEnum } from '@/constants'
 
 const { total, searchParams, refresh, goToPage, list } = usePageSearch(getExchangeYabiRecordList, {
   immediate: false,
 })
 
+const timeRange = computed({
+  get() {
+    if (!searchParams.value.startTime || !searchParams.value.endTime) {
+      return []
+    } else {
+      return [searchParams.value.startTime * 1000, searchParams.value.endTime * 1000]
+    }
+  },
+  set(value) {
+    if (!value) {
+      searchParams.value.startTime = undefined
+      searchParams.value.endTime = undefined
+    } else {
+      searchParams.value.startTime = value[0]! / 1000
+      searchParams.value.endTime = value[1]! / 1000
+    }
+  },
+})
+
 const visible = shallowRef(false)
 
 const open = () => {

src/views/pointsStore/index.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="flex gap-6">
       <!-- 左侧：商品列表区域 -->
-      <div class="flex-1 min-w-0">
+      <div class="flex-3/4 min-w-0">
         <!-- 虚拟装饰区域 -->
         <div
           class="bg-white/90 backdrop-blur-sm rounded-2xl p-6 shadow-lg mb-6 border border-white/60"
@@ -137,7 +137,7 @@
       </div>
 
       <!-- 右侧：信息面板 -->
-      <div class="w-80 flex-shrink-0 space-y-6">
+      <div class="flex-1/4 flex-shrink-0 space-y-6">
         <!-- YA币信息卡片 -->
         <div
           class="bg-white/90 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-white/60 sticky top-[52px]"
@@ -147,7 +147,7 @@
             <div
               class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 text-5xl font-bold"
             >
-              {{ currentYaBi }}
+              {{ yabiData.currentValue }}
             </div>
           </div>
 
@@ -212,17 +212,21 @@
 </template>
 
 <script setup lang="tsx">
-import { exchangeGoods, getShopItemList, getYaBiData } from '@/api'
+import { exchangeGoods, getShopItemList } from '@/api'
 import { usePageSearch } from '@/hooks'
 import { regionListOptions, ShopGoodsTypeEnum } from '@/constants'
 import type { ExchangeGoodsParams, BackendShopItemDto } from '@/api'
 import ExchangeContent from './components/exchangeContent.tsx'
 import ExchangeGoodsRecordDialog from './components/exchangeGoodsRecordDilaog.vue'
 import ExchangeYabiRecordDialog from './components/exchangeYabiRecordDilaog.vue'
+import { useYaBiStore } from '@/stores'
+import { storeToRefs } from 'pinia'
+const yabiStore = useYaBiStore()
+const { yabiData } = storeToRefs(yabiStore)
+
 const activeTab = ref('深圳')
 const tabs = ref(regionListOptions)
 
-const currentYaBi = ref(0)
 const exchangeGoodsRecordDialogRef = useTemplateRef<InstanceType<typeof ExchangeGoodsRecordDialog>>(
   'exchangeGoodsRecordDialogRef',
 )
@@ -270,12 +274,6 @@ const onOpenExchangeGoodsRecordDialog = () => {
   exchangeGoodsRecordDialogRef.value?.open()
 }
 
-// 获取YA币数据
-const getYaBiDataFn = async () => {
-  const { data } = await getYaBiData()
-  currentYaBi.value = data.currentValue
-}
-
 // 兑换商品
 
 const onExchangeGoods = async (item: BackendShopItemDto) => {
@@ -302,15 +300,15 @@ const onExchangeGoods = async (item: BackendShopItemDto) => {
     center: true,
     beforeClose: async (action, instance, done) => {
       if (action === 'cancel') return done()
-      if (currentYaBi.value < item.price * form.value.num)
+      if (yabiData.value.currentValue < item.price * form.value.num)
         return ElMessage.error(
-          `您的YA币不足,兑换所需${item.price * form.value.num}YA币,当前YA币${currentYaBi.value}`,
+          `您的YA币不足,兑换所需${item.price * form.value.num}YA币,当前YA币${yabiData.value.currentValue}`,
         )
       try {
         instance.confirmButtonLoading = true
         await exchangeGoods(form.value)
         ElMessage.success('兑换成功')
-        getYaBiDataFn()
+        yabiStore.fetchYaBiData()
         done()
       } catch (error) {
         console.log(error)
@@ -320,8 +318,4 @@ const onExchangeGoods = async (item: BackendShopItemDto) => {
     },
   })
 }
-
-onMounted(async () => {
-  getYaBiDataFn()
-})
 </script>