feat(membership): 新增用户余额编辑功能

- 新增余额修改弹窗组件 balanceEdit.vue
- 实现资金流向选择（流入/流出）
- 添加金额输入及验证规则- 集成保存余额记录接口 saveBalanceRecord
- 查询用户会员信息接口 queryUserMemberInfo- 在用户列表页添加修改余额按钮
- 调整收支记录按钮文案-优化会员名称显示模板格式

src/api/membership.ts

@@ -27,3 +27,11 @@ export function saveMemberBenefits(params?: any) {
 export function queryBalanceRecordPage(params?: any) {
     return request.post({ url: '/membership/queryBalanceRecordPage', params }, { urlPrefix: '/elab-marketing-content' })
 }
+
+export function saveBalanceRecord(params?: any) {
+    return request.post({ url: '/membership/saveBalanceRecord', params }, { urlPrefix: '/elab-marketing-content' })
+}
+
+export function queryUserMemberInfo(params?: any) {
+    return request.post({ url: '/membership/queryUserMemberInfo', params }, { urlPrefix: '/elab-marketing-content' })
+}

src/views/membership/user/balanceEdit.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="edit-popup">
+    <popup
+        ref="popupRef"
+        :title="popupTitle"
+        :async="true"
+        width="550px"
+        @confirm="handleSubmit"
+        @close="handleClose"
+    >
+      <el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules">
+        <el-form-item label="当前余额">
+          <span>{{ formData.currentAmount }}</span>
+        </el-form-item>
+        <el-form-item label="资金流向" prop="balanceFlow">
+          <el-radio-group v-model="formData.balanceFlow" size="small">
+            <el-radio label=1>流入（余额增加）</el-radio>
+            <el-radio label=-1>流出（余额减少）</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="金额" prop="amount">
+          <el-input
+              type="number"
+              v-model="formData.amount"
+              placeholder="请输入金额"
+              clearable
+          />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input
+              v-model="formData.remark"
+              placeholder="请输入修改原因（可选）"
+              clearable
+          />
+        </el-form-item>
+      </el-form>
+    </popup>
+  </div>
+</template>
+<script lang="ts" setup>
+import type {FormInstance} from 'element-plus'
+import Popup from '@/components/popup/index.vue'
+import feedback from '@/utils/feedback'
+import {queryUserMemberInfo, saveBalanceRecord} from '@/api/membership'
+
+const emit = defineEmits(['success', 'close'])
+const formRef = shallowRef<FormInstance>()
+const popupRef = shallowRef<InstanceType<typeof Popup>>()
+const popupTitle = computed(() => {
+  return '修改余额'
+})
+const formData = reactive({
+  amount: null,
+  currentAmount: 0,
+  balanceFlow: null,
+  bizScene: '余额修改',
+  brandId: null,
+  operator: '',
+  remark: '',
+  userId: null
+})
+
+const formRules = {
+  amount: [
+    {
+      required: true,
+      message: '请输入金额',
+      trigger: ['blur']
+    }
+  ],
+  balanceFlow: [
+    {
+      required: true,
+      message: '请选择资金流向',
+      trigger: ['blur']
+    }
+  ]
+}
+
+const handleSubmit = async () => {
+  await formRef.value?.validate()
+  formData.operator = localStorage.getItem('username') || ''
+  formData.amount = Number(formData.amount || 0) * 100
+  formData.balanceFlow = Number(formData.balanceFlow || 1)
+  await saveBalanceRecord(formData)
+  feedback.msgSuccess('操作成功')
+  popupRef.value?.close()
+  emit('success')
+}
+
+const open = () => {
+  popupRef.value?.open()
+}
+
+const getDetail = async (row: Record<string, any>) => {
+  const data = await queryUserMemberInfo({
+    userId: row.userId,
+    brandId: row.brandId,
+    genQrCode: 0
+  })
+  formData.userId = data.single.userId
+  formData.brandId = data.single.brandId
+  formData.currentAmount = data.single.accountAmount
+}
+
+const handleClose = () => {
+  emit('close')
+}
+
+defineExpose({
+  open,
+  getDetail
+})
+</script>

src/views/membership/user/user.vue

@@ -24,7 +24,9 @@
         <el-table-column label="手机号" prop="userMobile" min-width="120" show-tooltip-when-overflow/>
         <el-table-column label="会员名称" prop="membershipName" min-width="120">
           <template #default="scope">
-            <span><img :src="scope.row.membershipIcon" style="width: 20px;display: inline-block;margin-right:3px;"/>{{ scope.row.membershipName }}</span>
+            <span><img :src="scope.row.membershipIcon" style="width: 20px;display: inline-block;margin-right:3px;"/>{{
+                scope.row.membershipName
+              }}</span>
           </template>
         </el-table-column>
         <el-table-column label="会员编号" prop="membershipNo" min-width="100"/>
@@ -36,8 +38,8 @@
         <el-table-column label="入会时间" prop="time" min-width="120"/>
         <el-table-column label="操作" min-width="180" fixed="right">
           <template #default="{ row }">
-<!--            <el-button type="primary" link @click="updateBalance(row)">修改余额</el-button>-->
-            <el-button type="primary" link @click="showChargeConsumeRecord(row)">余额变动记录</el-button>
+            <el-button type="primary" link @click="updateBalance(row)">修改余额</el-button>
+            <el-button type="primary" link @click="showChargeConsumeRecord(row)">收支记录</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -47,83 +49,40 @@
     </el-card>
   </div>
   <ChargeConsumeRecord @init="init()" ref="chargeConsumeRecordRef"></ChargeConsumeRecord>
+  <balance-edit v-if="showEdit" ref="balanceEditRef" @success="getLists" @close="showEdit = false"/>
 </template>
 <script lang="ts" setup>
-import { useElabPaging } from '@/hooks/useElabPaging'
-import feedback from '@/utils/feedback'
-import {queryMemberUser} from "@/api/membership";
+import {useElabPaging} from '@/hooks/useElabPaging'
+import {queryMemberUser} from "@/api/membership"
 import ChargeConsumeRecord from './chargeConsumeRecord.vue'
+import balanceEdit from "./balanceEdit.vue"
+import {ref, reactive, shallowRef} from 'vue'
 
-const router = useRouter()
+const showEdit = ref(false)
 const chargeConsumeRecordRef = ref<InstanceType<typeof ChargeConsumeRecord>>()
+const balanceEditRef = shallowRef<InstanceType<typeof balanceEdit>>()
 
 const queryParams = reactive({
   mobile: ''
 })
-const { pager, getLists, resetPage, resetParams } = useElabPaging({
+const {pager, getLists, resetPage, resetParams} = useElabPaging({
   fetchFun: queryMemberUser,
   params: queryParams
 })
-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()
-  editRef.value?.open('add')
-}
-
-const handleEdit = async (data: any) => {
-  showEdit.value = true
-  await nextTick()
-  editRef.value?.open('edit')
-  editRef.value?.getDetail(data)
-}
-
-const useMethodFormatter = (row: any) => {
-  return row.useMethod == 0 ? '仅展示': ''
-}
-const volumeFormatter = (row: any) => {
-  if (row.volume == 0) {
-    return '大'
-  } else if (row.volume == 1) {
-    return '中'
-  } else if (row.volume == 2) {
-    return '小'
-  } else if (row.volume == 3) {
-    return '关闭'
-  } else {
-    return '大'
-  }
-}
-
-const handleDelete = async (id: number) => {
-  await feedback.confirm('确定要删除？')
-  // await articleCateDelete({id})
-  await delPrinter({id})
-  feedback.msgSuccess('删除成功')
-  getLists()
-}
-
-const changeStatus = async (id: number, status: any) => {
-  try {
-    await editPrinter({id, status})
-    feedback.msgSuccess('修改成功')
-    getLists()
-  } catch (error) {
-    getLists()
-  }
-}
 
 const showChargeConsumeRecord = async (row: any) => {
   chargeConsumeRecordRef.value?.open(row)
 }
 
 const updateBalance = async (data: any) => {
-
+  showEdit.value = true
+  await nextTick()
+  balanceEditRef.value?.open()
+  balanceEditRef.value?.getDetail(data)
 }
 getLists()
 </script>