优化商品编辑

src/views/member/index.vue

@@ -3,7 +3,8 @@
         <div class="left_content">
             <div class="query_wrap">
                 <div class="form">
-                    <el-input v-model="queryForm.key" placeholder="请输入昵称或手机号查询" style="width: 230px;"></el-input>
+                    <el-input v-model="queryForm.key" placeholder="请输入昵称或手机号查询" style="width: 230px;"
+                        @input="phoneInput"></el-input>
                     <el-select v-model="queryForm.isVip" placeholder="是否为会员" style="width: 150px;"
                         @change="getUserList">
                         <el-option label="全部" value=""></el-option>
@@ -20,10 +21,11 @@
             <div class="table_wrap">
                 <el-table ref="tableRef" :data="tableData.list" v-loading="tableData.loading" border strip height="100%"
                     highlight-current-row @current-change="handleCurrentChange">
-                    <el-table-column label="昵称" prop="nickName" width="150">
+                    <el-table-column label="昵称" prop="nickName" width="200">
                         <template v-slot="scope">
                             <div class="info">
-                                <el-image :src="scope.row.headImg" style="width: 40px;height: 40px;"></el-image>
+                                <el-image :src="scope.row.headImg"
+                                    style="width: 40px;height: 40px;flex-shrink: 0;"></el-image>
                                 <span>{{ scope.row.nickName }}</span>
                             </div>
                         </template>
@@ -60,28 +62,36 @@
                 <div class="top_info">
                     <div class="row">
                         <span>会员昵称：</span>
-                        <span>{{ currentRow.nickName }}</span>
+                        <span v-if="currentRow">{{ currentRow.nickName || '' }}</span>
                     </div>
                     <div class="row">
                         <span>手机号码：</span>
-                        <span>{{ currentRow.phone }}</span>
+                        <span v-if="currentRow">{{ currentRow.phone || '' }}</span>
                     </div>
                     <div class="row">
                         <span>会员编号：</span>
-                        <span>{{ currentRow.code }}</span>
+                        <span v-if="currentRow">{{ currentRow.code || '' }}</span>
                     </div>
                     <div class="row">
-                        <span>会员等级：</span>
-                        <span>{{ currentRow.code }}</span>
+                        <span>会员生日：</span>
+                        <span v-if="currentRow">{{ currentRow.birthDay || '' }}</span>
                     </div>
                     <div class="row">
                         <div class="fit_row">
-                            <span>会员积分：{{ currentRow.accountPoints || 0 }}</span>
+                            <div class="flex">
+                                <span>会员积分：</span>
+                                <span v-if="currentRow">{{ currentRow.accountPoints || 0 }}</span>
+                                <span v-else>0</span>
+                            </div>
                         </div>
                     </div>
                     <div class="row" @click="RecordDialogRef.show(currentRow)">
                         <div class="fit_row">
-                            <span>储值余额：￥{{ currentRow.amount || 0 }}</span>
+                            <div class="flex">
+                                <span>储值余额：￥ </span>
+                                <span v-if="currentRow">{{ currentRow.amount || 0 }}</span>
+                                <span v-else>0</span>
+                            </div>
                             <el-icon class="icon">
                                 <ArrowRight />
                             </el-icon>
@@ -108,6 +118,7 @@
 </template>
 
 <script setup>
+import _ from 'lodash'
 import { ref, onMounted } from 'vue'
 import { shopUserList } from '@/api/account.js'
 import UserCharge from './components/userCharge.vue'
@@ -159,6 +170,11 @@ function resetHandle() {
     getUserList()
 }
 
+// 输入
+const phoneInput = _.debounce(function (e) {
+    getUserList()
+}, 800)
+
 // 获取用户列表
 async function getUserList() {
     try {
@@ -167,7 +183,14 @@ async function getUserList() {
         tableData.value.list = res.records
         tableData.value.total = +res.totalRow
 
-        setCurrent(res.records[0])
+        if (res.records.length) {
+            console.log('有数据');
+            // 有数据要设置默认选中的会员
+            setCurrent(res.records[0])
+        } else {
+            console.log('没有数据');
+            currentRow.value = {}
+        }
     } catch (error) {
         console.log(error);
     }
@@ -246,6 +269,10 @@ onMounted(() => {
                 color: #fff;
                 border-radius: 6px;
 
+                .flex {
+                    display: flex;
+                }
+
                 .row {
                     display: flex;