样式修改

src/views/membership/user/chargeConsumeRecord.vue

@@ -4,20 +4,20 @@
         v-model="showOrderConsole"
         title="充值/消费记录"
         direction="rtl"
-        size="80%"
+        size="50%"
         :before-close="beforeClose"
     >
       <el-table class="mt-4" size="large" :data="pager.lists">
         <el-table-column type="index" width="55"/>
-        <el-table-column label="类型" prop="typeDesc" min-width="120"/>
-        <el-table-column label="场景" prop="bizScene" min-width="80" show-tooltip-when-overflow/>
-        <el-table-column label="发生金额(元)" prop="amount" min-width="120" show-tooltip-when-overflow>
+        <el-table-column label="变动类型" prop="typeDesc" min-width="80"/>
+        <el-table-column label="来源/场景" prop="bizScene" show-tooltip-when-overflow/>
+        <el-table-column label="变动金额(元)" prop="amount" align="right" show-tooltip-when-overflow>
           <template #default="scope">
-            <span v-if="scope.row.type > 0" style="font-weight: bolder;color:#67C23A">+{{ scope.row.amount }}</span>
-            <span v-else style="font-weight: bolder;color:#F56C6C">-{{ scope.row.amount }}</span>
+            <span v-if="scope.row.type > 0" style="font-weight: bolder;color:#F56C6C">+{{ formatAmount(scope.row.amount) }}</span>
+            <span v-else style="font-weight: bolder;color:#67C23A">-{{ formatAmount(scope.row.amount) }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="发生时间" prop="eventTime" min-width="120"/>
+        <el-table-column label="操作时间" prop="eventTime"/>
       </el-table>
       <div class="flex justify-end mt-4">
         <pagination v-model="pager" @change="getLists"/>
@@ -49,6 +49,11 @@ const beforeClose = () => {
   showOrderConsole.value = false
 }
 
+// 示例：添加千分位分隔符并保留两位小数
+const formatAmount = (amount: string) => {
+  return Number(amount).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
 onMounted(() => {
   // initData()
 })

src/views/membership/user/user.vue

@@ -24,7 +24,11 @@
         <el-table-column label="手机号" prop="userMobile" min-width="120" show-tooltip-when-overflow/>
         <el-table-column label="会员名称" prop="membershipName" min-width="80"/>
         <el-table-column label="会员编号" prop="membershipNo" min-width="100"/>
-        <el-table-column label="账户余额(元)" prop="accountAmount" min-width="100"/>
+        <el-table-column label="账户余额(元)" prop="accountAmount" align="right" min-width="100">
+          <template #default="scope">
+            <span style="font-weight: bolder;color:#F56C6C">{{ formatAmount(scope.row.accountAmount) }}</span>
+          </template>
+        </el-table-column>
         <el-table-column label="入会时间" prop="time" min-width="120"/>
         <el-table-column label="操作" min-width="180" fixed="right">
           <template #default="{ row }">
@@ -57,7 +61,10 @@ const { pager, getLists, resetPage, resetParams } = useElabPaging({
 })
 const editRef = shallowRef<InstanceType<typeof EditPopup>>()
 const showEdit = ref(false)
-
+// 示例：添加千分位分隔符并保留两位小数
+const formatAmount = (amount: string) => {
+  return Number(amount).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
 const handleAdd = async () => {
   showEdit.value = true
   await nextTick()