zry 代码

src/components/changePassword.vue

@@ -10,9 +10,9 @@
       <h3 class="form-title">修改密码</h3>
 
       <!-- 原密码 -->
-      <el-form-item prop="oldVal" label="原密码">
+      <el-form-item prop="oldPassword" label="原密码">
         <el-input
-            v-model.trim="passwd.oldVal"
+            v-model.trim="passwd.oldPassword"
             type="password"
             placeholder="请输入原密码"
             show-password
@@ -20,9 +20,9 @@
       </el-form-item>
 
       <!-- 新密码 -->
-      <el-form-item prop="newVal" label="新密码">
+      <el-form-item prop="newPassword" label="新密码">
         <el-input
-            v-model.trim="passwd.newVal"
+            v-model.trim="passwd.newPassword"
             type="password"
             placeholder="请输入新密码"
             show-password
@@ -30,9 +30,9 @@
       </el-form-item>
 
       <!-- 重复密码 -->
-      <el-form-item prop="repeatNewVal" label="重复密码">
+      <el-form-item prop="againPassword" label="重复密码">
         <el-input
-            v-model.trim="passwd.repeatNewVal"
+            v-model.trim="passwd.againPassword"
             type="password"
             placeholder="请再次输入新密码"
             show-password
@@ -79,7 +79,7 @@
 </template>
 
 <script setup>
-import {ref, reactive, computed, watch} from 'vue'
+import {ref, reactive, computed, watch, onMounted} from 'vue'
 import {CircleCloseFilled, SuccessFilled} from '@element-plus/icons-vue'
 import {ElMessage} from "element-plus";
 import API from '@/util/http'
@@ -91,22 +91,34 @@ const emit = defineEmits(['confirm'])
 
 const passwdFormRef = ref(null)
 const passwd = reactive({
-  oldVal: '',
-  newVal: '',
-  repeatNewVal: ''
+  account: '',
+  oldPassword: '',
+  newPassword: '',
+  againPassword: ''
 })
 const errorMsg = ref('')
-
+//获取用户信息的account
+const getAccount= async function() {
+  try {
+    const adminData = ref({})
+    const result = await API({ url: '/admin/userinfo', data: {} })
+    adminData.value = result
+    console.log('管理员用户信息', adminData.value)
+    passwd.account = adminData.value.account
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
 // 实时密码规则校验
-const isLengthValid = computed(() => passwd.newVal.length >= 8 && passwd.newVal.length <= 16)
+const isLengthValid = computed(() => passwd.newPassword.length >= 8 && passwd.newPassword.length <= 16)
 
 const isComplexValid = computed(() => {
   const rules = [/\d/, /[a-z]/, /[A-Z]/, /[^a-zA-Z0-9]/]
-  return rules.filter((r) => r.test(passwd.newVal)).length >= 2
+  return rules.filter((r) => r.test(passwd.newPassword)).length >= 2
 })
 
-watch(() => passwd.newVal, (val) => {
-  if (val && val === passwd.oldVal) {
+watch(() => passwd.newPassword, (val) => {
+  if (val && val === passwd.oldPassword) {
     errorMsg.value = '新密码不能与旧密码一致'
   } else {
     errorMsg.value = ''
@@ -116,12 +128,12 @@ watch(() => passwd.newVal, (val) => {
 const loading = ref(false)
 // 表单校验规则
 const rules = reactive({
-  oldVal: [{required: true, message: '请输入原密码', trigger: 'blur'}],
-  newVal: [
+  oldPassword: [{required: true, message: '请输入原密码', trigger: 'blur'}],
+  newPassword: [
     {required: true, message: '新密码不能为空', trigger: 'blur'},
     {
       validator: (rule, value, callback) => {
-        if (value === passwd.oldVal) {
+        if (value === passwd.oldPassword) {
           callback(new Error('新密码不能与旧密码一致'))
         } else if (value.length < 8 || value.length > 16) {
           callback(new Error('长度应在 8 到 16 个字符'))
@@ -138,11 +150,11 @@ const rules = reactive({
       trigger: 'blur'
     }
   ],
-  repeatNewVal: [
+  againPassword: [
     {required: true, message: '请再次输入新密码', trigger: 'blur'},
     {
       validator: (rule, value, callback) => {
-        if (value !== passwd.newVal) {
+        if (value !== passwd.newPassword) {
           callback(new Error('两次输入密码不一致'))
         } else {
           callback()
@@ -153,72 +165,74 @@ const rules = reactive({
   ]
 })
 
-// // 修改密码接口调用方法
-// const changePassword = async function () {
-//   try {
-//     const params = {
-//       oldVal: passwd.oldVal,
-//       newVal: passwd.newVal
-//     }
-//
-//     const result = await API({url: '/user/changePassword', data: params})
-//     console.log('@@@@@@@@@@@修改密码结果:', result)
-//     if(result.status === 200){
-//       // 显示成功弹窗
-//
-//       ElMessage.success('修改密码成功')
-//       // 重置表单字段
-//       resetFields()
-//       router.replace ('/PasswordSuccess');
-//     }else if(result === 400){
-//       //todo 待完善
-//     }
-//
-//   } catch (error) {
-//     console.log('re:', result)
-//     console.error('修改密码失败', error)
-//     ElMessage.error('操作失败')
-//     // 抛出错误让外层捕获，保持finally正常执行
-//     throw error
-//   }
-// }
-
-// 修改密码接口调用方法（模拟始终成功）
+// 修改密码接口调用方法
 const changePassword = async function () {
   try {
-    // 模拟API调用
-    const result = {
-      status: 200,
-      data: {success: true, message: '密码修改成功'}
-    };
-
-    console.log('修改密码结果:', result);
+    const params = {
+      account: passwd.account,
+      oldPassword: passwd.oldPassword,
+      newPassword: passwd.newPassword,
+      againPassword: passwd.againPassword
+    }
 
-    // 统一处理成功逻辑
-    if (result.status === 200 ) {
-      // 显示成功提示
-      ElMessage.success(result.data.message || '修改密码成功');
+    const result = await API({url: '/admin/password', data: params})
+    console.log('@@@@@@@@@@@修改密码结果:', result)
+    if(result.status === 200){
+      // 显示成功弹窗
 
+      ElMessage.success('修改密码成功')
       // 重置表单字段
-      resetFields();
-
+      resetFields()
       router.replace ('/PasswordSuccess');
-
-
-      return result;
-    } else {
-      // 处理API返回但状态非成功的情况
-      const errorMsg = result.data.message || '密码修改失败';
-      ElMessage.error(errorMsg);
-      throw new Error(errorMsg);
+    }else if(result === 400){
+      //todo 待完善
     }
+
   } catch (error) {
-    // 处理网络错误或API异常
-    console.error('修改密码失败:', error);
-    ElMessage.error(error.message || '操作失败，请重试');
-    throw error;
+    console.log('re:', result)
+    console.error('修改密码失败', error)
+    ElMessage.error('操作失败')
+    // 抛出错误让外层捕获，保持finally正常执行
+    throw error
   }
-};
+}
+
+// 修改密码接口调用方法（模拟始终成功）
+// const changePassword = async function () {
+//   try {
+//     // 模拟API调用
+//     const result = {
+//       status: 200,
+//       data: {success: true, message: '密码修改成功'}
+//     };
+
+//     console.log('修改密码结果:', result);
+
+//     // 统一处理成功逻辑
+//     if (result.status === 200 ) {
+//       // 显示成功提示
+//       ElMessage.success(result.data.message || '修改密码成功');
+
+//       // 重置表单字段
+//       resetFields();
+
+//       router.replace ('/PasswordSuccess');
+
+
+//       return result;
+//     } else {
+//       // 处理API返回但状态非成功的情况
+//       const errorMsg = result.data.message || '密码修改失败';
+//       ElMessage.error(errorMsg);
+//       throw new Error(errorMsg);
+//     }
+//   } catch (error) {
+//     // 处理网络错误或API异常
+//     console.error('修改密码失败:', error);
+//     ElMessage.error(error.message || '操作失败，请重试');
+//     throw error;
+//   }
+// };
 
 // 表单提交与重置
 const resetFields = () => {
@@ -247,6 +261,10 @@ const onSubmit = () => {
   })
 }
 
+onMounted(() => {
+  getAccount()
+})
+
 </script>
 
 <style scoped>

src/views/refund/addCoinRefund.vue

@@ -1,11 +1,11 @@
 
 <script setup>
-import { onMounted, reactive } from 'vue'
-import { ref, computed, watch } from 'vue'
-import { ElMessage } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
+import {onMounted, reactive} from 'vue'
+import {ref, computed, watch} from 'vue'
+import {ElMessage} from 'element-plus'
+import {Plus} from '@element-plus/icons-vue'
 import axios from 'axios'
-import { ElMessageBox } from 'element-plus'
+import {ElMessageBox} from 'element-plus'
 import API from '@/util/http'
 import moment from 'moment'
 // import _ from 'lodash'
@@ -15,12 +15,11 @@ const addRe = ref({
 })
 
 
-
 //这是获取用户信息的接口
 const adminData = ref({})
 const getAdminData = async function () {
   try {
-    const result = await API({ url: '/admin/userinfo', data: {} })
+    const result = await API({url: '/admin/userinfo', data: {}})
     adminData.value = result
     addRefund.value.adminId = adminData.value.id
     console.log('请求成功', result)
@@ -85,8 +84,9 @@ const add = async function () {
     }
 
     // 发送POST请求
-    const result = await API({ url: '/refund/add', 
-    data: processedRefund
+    const result = await API({
+      url: '/refund/add',
+      data: processedRefund
     })
     if (result.code === 0) {
       ElMessage.error(result.msg)
@@ -108,7 +108,7 @@ const addBefore = () => {
     if (valid) {
 
       try {
-        await getUser(refund.value.jwcode);
+        await getUser(addRefund.value.jwcode);
         if (!user.value.jwcode) {
           ElMessage.error('请先验证有效的精网号');
           return;
@@ -119,13 +119,13 @@ const addBefore = () => {
       }
 
       ElMessageBox.confirm('确认添加？')
-        .then(() => {
-          add()
-          console.log('添加成功')
-        })
-        .catch(() => {
-          console.log('取消添加')
-        })
+          .then(() => {
+            add()
+            console.log('添加成功')
+          })
+          .catch(() => {
+            console.log('取消添加')
+          })
     } else {
       //提示
       ElMessage({
@@ -139,7 +139,8 @@ const addBefore = () => {
 // 表单验证
 // 开始时间改变时，重新验证结束时间
 const Ref = ref(null)
-const startChange = (val) => {}
+const startChange = (val) => {
+}
 const validateJwCode = (rule, value, callback) => {
   if (!value) {
     callback(new Error('精网号不能为空'));
@@ -152,16 +153,16 @@ const validateJwCode = (rule, value, callback) => {
   callback();
 };
 const rules = reactive({
-  jwcode: [{ required: true, validator:validateJwCode, trigger: 'blur' }],
-  refundType: [{ required: true, message: '请选择退款类型', trigger: 'blur' }],
-  goodsName: [{ required: true, message: '请选择退款商品', trigger: 'blur' }],
-  taskGold: [{ required: true, message: '请输入任务金币', trigger: 'blur' }],
-  freeGold: [{ required: true, message: '请输入免费金币', trigger: 'blur' }],
+  jwcode: [{required: true, validator: validateJwCode, trigger: 'blur'}],
+  refundType: [{required: true, message: '请选择退款类型', trigger: 'blur'}],
+  goodsName: [{required: true, message: '请选择退款商品', trigger: 'blur'}],
+  taskGold: [{required: true, message: '请输入任务金币', trigger: 'blur'}],
+  freeGold: [{required: true, message: '请输入免费金币', trigger: 'blur'}],
   permanentGold: [
-    { required: true, message: '请输入永久金币', trigger: 'blur' }
+    {required: true, message: '请输入永久金币', trigger: 'blur'}
   ],
   sumGold: [
-    { required: true, message: '请选择付款方式', trigger: 'blur' },
+    {required: true, message: '请选择付款方式', trigger: 'blur'},
     {
       validator: (rule, value) => {
         if (value === 0) {
@@ -198,7 +199,7 @@ const user = ref({
 })
 const getUser = async function (jwcode) {
   trimJwCode();
-  cancelExceptJwcode();
+  // cancelExceptJwcode();
   try {
     // 发送POST请求
     const result = await API({
@@ -236,10 +237,8 @@ const getUser = async function (jwcode) {
 }
 
 
-
-
 // 退款类型，写死为商品退款
-const refundType = ref([{ value: '商品退款', label: '商品退款' }]);
+const refundType = ref([{value: '商品退款', label: '商品退款'}]);
 
 // 获取退款类型
 // const getRefundTypes = async function () {
@@ -264,8 +263,6 @@ const refundType = ref([{ value: '商品退款', label: '商品退款' }]);
 // }
 
 
-
-
 // 根据精网号查询商品
 const goodsName = ref([])
 const getGoods = async function (jwcode) {
@@ -316,7 +313,7 @@ const selectedGoodsGold = ref({
 })
 
 // 处理退款方式切换，当部分退款切换全部退款时，退款金额应自动重新填充
-const handleRefundModelChange = () =>{
+const handleRefundModelChange = () => {
   if (addRe.value.typeR === '0') {
     // 全部退款时
     addRefund.value.permanentGold = selectedGoodsGold.value.permanentGold;
@@ -423,213 +420,214 @@ onMounted(async function () {
 </script>
 
 <template>
-  <div >
-
-  <el-form
-    :model="addRefund"
-    ref="Ref"
-    :rules="rules"
-    label-width="auto"
-    style="max-width: 750px"
-    class="form-style"
-  >
-    <el-form-item prop="jwcode" label="精网号">
-      <el-input
-        v-model="addRefund.jwcode"
-        style="width: 220px"
-        @change="getGoods(addRefund.jwcode)"
-        
-      />
-      <el-button
-        type="primary"
-        @click="getUser(addRefund.jwcode)"
-        style="margin-left: 20px"
-        >查询</el-button
-      >
-    </el-form-item>
-    <el-form-item prop="refundType" label="退款类型">
-      <el-select
-        v-model="addRefund.refundType"
-        placeholder="请选择"
-        style="width: 300px"
-      >
-        <el-option
-          v-for="item in refundType"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        />
-      </el-select>
-    </el-form-item>
-    <el-form-item prop="goodsName" label="商品名">
-      <el-select
-        v-model="addRefund.goodsName"
-        placeholder="请选择"
-        style="width: 300px"
-        @change="handleSelectionChange"
-      >
-        <el-option
-          v-for="item in goodsName"
-          :key="item.key"
-    :label="item.label"
-    :value="item"
-        />
-      </el-select>
-    </el-form-item>
-
-    <el-form-item prop="refundModel" label="退款方式:">
-      <el-radio-group v-model="addRe.typeR" @change="handleRefundModelChange">
-        <el-radio value="0">全部退款</el-radio>
-        <el-radio value="1">部分退款</el-radio>
-      </el-radio-group>
-    </el-form-item>
-
-    <div style="display: flex; align-items: center">
-      <el-form-item prop="permanentGold" label="永久金币" style="float: left">
+  <div>
+
+    <el-form
+        :model="addRefund"
+        ref="Ref"
+        :rules="rules"
+        label-width="auto"
+        style="max-width: 750px"
+        class="form-style"
+    >
+      <el-form-item prop="jwcode" label="精网号">
         <el-input
-          v-model="addRefund.permanentGold"
-          style="width: 100px"
-          :disabled="addRe.typeR === '0' ? true : false"
-          @input="handlePermanentGoldInput($event)"
-          type="number"
+            v-model="addRefund.jwcode"
+            style="width: 220px"
+            @change="getGoods(addRefund.jwcode)"
+
+        />
+        <el-button
+            type="primary"
+            @click="getUser(addRefund.jwcode)"
+            style="margin-left: 20px"
+        >查询
+        </el-button
+        >
+      </el-form-item>
+      <el-form-item prop="refundType" label="退款类型">
+        <el-select
+            v-model="addRefund.refundType"
+            placeholder="请选择"
+            style="width: 300px"
+        >
+          <el-option
+              v-for="item in refundType"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="goodsName" label="商品名">
+        <el-select
+            v-model="addRefund.goodsName"
+            placeholder="请选择"
+            style="width: 300px"
+            @change="handleSelectionChange"
+        >
+          <el-option
+              v-for="item in goodsName"
+              :key="item.key"
+              :label="item.label"
+              :value="item"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item prop="refundModel" label="退款方式:">
+        <el-radio-group v-model="addRe.typeR" @change="handleRefundModelChange">
+          <el-radio value="0">全部退款</el-radio>
+          <el-radio value="1">部分退款</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <div style="display: flex; align-items: center">
+        <el-form-item prop="permanentGold" label="永久金币" style="float: left">
+          <el-input
+              v-model="addRefund.permanentGold"
+              style="width: 100px"
+              :disabled="addRe.typeR === '0' ? true : false"
+              @input="handlePermanentGoldInput($event)"
+              type="number"
+          >
+          </el-input>
+          <p>个</p>
+        </el-form-item>
+        <el-form-item
+            prop="freeGold"
+            label="免费金币"
+            style="margin-left: -20px; float: left"
         >
+          <el-input
+              v-model="addRefund.freeGold"
+              style="float: left; width: 100px"
+              :disabled="addRe.typeR === '0' ? true : false"
+              @input="handleFreeGoldInput($event)"
+              type="number"
+          />
+          <p>个</p>
+        </el-form-item>
+        <el-form-item prop="taskGold" label="任务金币" style="margin-left: -20px">
+          <el-input
+              v-model="addRefund.taskGold"
+              style="float: left; width: 100px"
+              :disabled="addRe.typeR === '0' ? true : false"
+              @input="handleTaskGoldInput($event)"
+              type="number"
+          />
+          <p>个</p>
+        </el-form-item>
+      </div>
+      <el-form-item prop="sumGold" label="退款金币总数">
+        <el-input disabled v-model="addRefund.sumGold" style="width: 100px">
         </el-input>
-        <p>个</p>
       </el-form-item>
-      <el-form-item
-        prop="freeGold"
-        label="免费金币"
-        style="margin-left: -20px; float: left"
-      >
+      <el-form-item prop="remark" label="备注">
         <el-input
-          v-model="addRefund.freeGold"
-          style="float: left; width: 100px"
-          :disabled="addRe.typeR === '0' ? true : false"
-          @input="handleFreeGoldInput($event)"
-          type="number"
+            v-model="addRefund.remark"
+            style="width: 300px"
+            :rows="2"
+            maxlength="100"
+            show-word-limit
+            type="textarea"
         />
-        <p>个</p>
       </el-form-item>
-      <el-form-item prop="taskGold" label="任务金币" style="margin-left: -20px">
+      <el-form-item prop="adminName" label="提交人">
         <el-input
-          v-model="addRefund.taskGold"
-          style="float: left; width: 100px"
-          :disabled="addRe.typeR === '0' ? true : false"
-          @input="handleTaskGoldInput($event)"
-          type="number"
+            style="width: 300px"
+            :value="adminData.adminName"
+            disabled
+            placeholder="提交人姓名"
         />
-        <p>个</p>
       </el-form-item>
-    </div>
-    <el-form-item prop="sumGold" label="退款金币总数">
-      <el-input disabled v-model="addRefund.sumGold" style="width: 100px">
-      </el-input>
-    </el-form-item>
-    <el-form-item prop="remark" label="备注">
-      <el-input
-        v-model="addRefund.remark"
-        style="width: 300px"
-        :rows="2"
-        maxlength="100"
-        show-word-limit
-        type="textarea"
-      />
-    </el-form-item>
-    <el-form-item prop="adminName" label="提交人">
-      <el-input
-        style="width: 300px"
-        :value="adminData.adminName"
-        disabled
-        placeholder="提交人姓名"
-      />
-    </el-form-item>
-    <el-button type="success" @click="cancel()" style="margin-left: 280px">重置</el-button>
-    <el-button type="primary" @click="addBefore"> 提交 </el-button>
-  </el-form>
-
-  <!-- 客户信息栏 -->
-  <el-card v-if="user.jwcode" style="width: 800px; float: right" class="customer-info">
-  <el-form
-    :model="user"
-    label-width="auto"
-    style="max-width: 1000px"
-    label-position="left"
-  >
-    <el-text size="large" style="margin-left: 20px">客户信息</el-text>
-    
-    <!-- 第一行：姓名 + 历史金币 -->
-    <el-row style="margin-top: 20px">
-      <el-col :span="9">
-        <el-form-item label="姓名:">
-          <p>{{ user.name }}</p>
-        </el-form-item>
-      </el-col>
-      <el-col :span="14">
-        <el-form-item label="历史金币总数">
-          <p v-if="!isNaN(Number(user.historySumGold))">
-            {{ Number(user.historySumGold) }}
-          </p>
-        </el-form-item>
-      </el-col>
-    </el-row>
-
-    <!-- 第二行：精网号 + 当前金币（独立行） -->
-    <el-row>
-      <el-col :span="9">
-        <el-form-item label="精网号">
-          <p>{{ user.jwcode }}</p>
-        </el-form-item>
-      </el-col>
-      <el-col :span="14">
-        <el-form-item label="当前金币总数" style="width: 500px">
+      <el-button type="success" @click="cancel()" style="margin-left: 280px">重置</el-button>
+      <el-button type="primary" @click="addBefore"> 提交</el-button>
+    </el-form>
+
+    <!-- 客户信息栏 -->
+    <el-card v-if="user.jwcode" style="width: 800px; float: right" class="customer-info">
+      <el-form
+          :model="user"
+          label-width="auto"
+          style="max-width: 1000px"
+          label-position="left"
+      >
+        <el-text size="large" style="margin-left: 20px">客户信息</el-text>
+
+        <!-- 第一行：姓名 + 历史金币 -->
+        <el-row style="margin-top: 20px">
+          <el-col :span="9">
+            <el-form-item label="姓名:">
+              <p>{{ user.name }}</p>
+            </el-form-item>
+          </el-col>
+          <el-col :span="14">
+            <el-form-item label="历史金币总数">
+              <p v-if="!isNaN(Number(user.historySumGold))">
+                {{ Number(user.historySumGold) }}
+              </p>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- 第二行：精网号 + 当前金币（独立行） -->
+        <el-row>
+          <el-col :span="9">
+            <el-form-item label="精网号">
+              <p>{{ user.jwcode }}</p>
+            </el-form-item>
+          </el-col>
+          <el-col :span="14">
+            <el-form-item label="当前金币总数" style="width: 500px">
           <span
-            style="color: #2fa1ff; margin-right: 5px"
-            v-if="user.nowSumGold !== undefined"
+              style="color: #2fa1ff; margin-right: 5px"
+              v-if="user.nowSumGold !== undefined"
           >{{ user.nowSumGold }}</span>
-        </el-form-item>
-        <!-- 金币详情独立显示 -->
-        <el-form-item style="margin-top: -23px">  <!-- 负边距减少间距 -->
-          <span
-            style="color: #b1b1b1; margin-left: 0px"
-            v-if="user.nowPermanentGold !== undefined"
-          >(永久金币:{{ user.nowPermanentGold }};
+            </el-form-item>
+            <!-- 金币详情独立显示 -->
+            <el-form-item style="margin-top: -23px">  <!-- 负边距减少间距 -->
+              <span
+                  style="color: #b1b1b1; margin-left: 0px"
+                  v-if="user.nowPermanentGold !== undefined"
+              >(永久金币:{{ user.nowPermanentGold }};
             免费金币:{{ user.nowFreeGold }};
             任务金币:{{ user.nowTaskGold }})</span>
-        </el-form-item>
-      </el-col>
-    </el-row>
-
-    <!-- 第三行：首次充值日期 + 充值次数 -->
-    <el-row style="margin-top:-23px">
-      <el-col :span="9">
-        <el-form-item label="首次充值日期">
-          <p v-if="user.firstRecharge">
-            {{ moment(user.firstRecharge).format('YYYY-MM-DD HH:mm:ss') }}
-          </p>
-        </el-form-item>
-      </el-col>
-      <el-col :span="14">
-        <el-form-item label="充值次数">
-          <p style="color: #2fa1ff">{{ user.rechargeNum }}</p>
-        </el-form-item>
-      </el-col>
-    </el-row>
-
-    <!-- 第四行：消费次数 + 所属门店 -->
-    <el-row>
-      <el-col :span="9">
-        <el-form-item label="消费次数">
-          <p style="color: #2fa1ff">{{ user.consumeNum }}</p>
-        </el-form-item>
-      </el-col>
-      <el-col :span="9">
-        <el-form-item label="所属门店">
-          <p>{{ user.market }}</p>
-        </el-form-item>
-      </el-col>
-    </el-row>
-  </el-form>
-</el-card>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- 第三行：首次充值日期 + 充值次数 -->
+        <el-row style="margin-top:-23px">
+          <el-col :span="9">
+            <el-form-item label="首次充值日期">
+              <p v-if="user.firstRecharge">
+                {{ moment(user.firstRecharge).format('YYYY-MM-DD HH:mm:ss') }}
+              </p>
+            </el-form-item>
+          </el-col>
+          <el-col :span="14">
+            <el-form-item label="充值次数">
+              <p style="color: #2fa1ff">{{ user.rechargeNum }}</p>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- 第四行：消费次数 + 所属门店 -->
+        <el-row>
+          <el-col :span="9">
+            <el-form-item label="消费次数">
+              <p style="color: #2fa1ff">{{ user.consumeNum }}</p>
+            </el-form-item>
+          </el-col>
+          <el-col :span="9">
+            <el-form-item label="所属门店">
+              <p>{{ user.market }}</p>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
   </div>
 </template>