账户余额

src/views/integral/components/integralShow.vue

@@ -1,19 +1,22 @@
 <!--  -->
 <template>
-  <div class="statisticsBox">
-    <div class="mt-2">
-      <span style="font-size: 20px; color: var(--color-333); line-height: 28px; font-weight: bold;" class="ml-10">{{ props.title }}</span>
-      <span style="font-size: 14px; color: var(--color-666); line-height: 24px; cursor: pointer;" class="ml-2" @click="integralRulesClick">{{ $t('points.integralRules') }}</span>
+  <div class="statisticsBox d-flex">
+    <div class="d-flex mt-2" style="flex: 1;">
+      <div v-for="(val, i) in list" :key="i" :style="{'margin-left': val.showRules ? '0' : '200px'}">
+        <div>
+          <span class="ml-10 item-title">{{ val.title }}</span>
+          <span v-if="val.showRules" class="ml-2 rules cursor-pointer" @click="integralRulesClick">{{ $t('points.integralRules') }}</span>
+        </div>
+        <div>
+          <span class="ml-10 item-value" @click="integralDetails">{{ accountData[val.value] || 0 }}</span>
+        </div>
+      </div>
     </div>
-    <div class="d-flex justify-space-between align-end my-1">
-      <span style="font-size: 42px; color: #10897bba; line-height: 50px;" class="ml-10 cursor-pointer" @click="integralDetails">{{ accountData?.point || 0 }}</span>
+    <div class="d-flex align-end">
       <span style="font-size: 16px; color: #787d82; line-height: 24px;" class="mr-8">
-        <!-- 积分商城 -->
         <template v-if="props.showMall">
-          <!-- <span>积分土豪的都喜欢来这里，</span> -->
           <span class="mall-text" @click="handleClickMall">{{ $t('points.handpickMall') }}</span>
         </template>
-        <!-- 任务中心 -->
         <template v-if="props.taskCenter">
           <span class="septal-line"></span>
           <span class="mall-text" @click="router.push({ path: '/recruit/personal/TaskCenter' })">赚取积分</span>
@@ -49,6 +52,11 @@ const props = defineProps({
   }
 })
 
+const list = ref([
+  { title: props.title, value: 'point', showRules: true }
+])
+if (props.isEnterprise) list.value.push({ title: '您当前账户余额', value: 'balance', showRules: false })
+
 const userStore = useUserStore()
 const key = props.isEnterprise ? 'enterpriseUserAccount' : 'userAccount'
 let accountData = ref(JSON.parse(localStorage.getItem(key)) || {})
@@ -66,10 +74,6 @@ const integralRulesClick = () => {
 const handleClickMall = () => {
   window.open('/mall')
 }
-// 积分详情
-const integralDetails = () => {
-  window.open(props.isEnterprise ? '/enterprise/memberCenter/myPoints' : '/integral/pointsManagement')
-}
 </script>
 
 <style lang="scss" scoped>
@@ -87,4 +91,20 @@ const integralDetails = () => {
     color: var(--v-primary-base);
   }
 }
+.item-title {
+  font-size: 20px; 
+  color: var(--color-333); 
+  line-height: 28px; 
+  font-weight: bold;
+}
+.item-value {
+  font-size: 42px; 
+  color: #10897bba;
+  line-height: 50px;
+}
+.rules {
+  font-size: 14px; 
+  color: var(--color-666); 
+  line-height: 24px; 
+}
 </style>