✨ feat(用户 期刊): 用户联调 期刊添加详情评论

src/api/comment.js

@@ -6,9 +6,9 @@
  */
 import request from "@/utils/request";
 export default {
-  getList(volid) {
+  getList(id, page, size) {
     return request({
-      url: `/luoo-comment/comment/findByVolid/${volid}`,
+      url: `/luoo-comment/comment/${id}/${page}/${size}`,
       method: "get"
     });
   }

src/api/user.js

@@ -0,0 +1,29 @@
+/*
+ * @Description:
+ * @version: v1
+ * @Author: zhangjiabao
+ * @Date: 2024-01-19 23:38:16
+ */
+import request from "@/utils/request";
+export default {
+  getList(data, page, size) {
+    return request({
+      url: `/user/cms/user/search/${page}/${size}`,
+      method: "post",
+      data: data
+    });
+  },
+  getDetail(id) {
+    return request({
+      url: `/user/cms/user/${id}`,
+      method: "get"
+    });
+  },
+  updata(id, data) {
+    return request({
+      url: `/user/cms/user/${id}`,
+      method: "put",
+      data
+    });
+  }
+};

src/views/article/articleDetail.vue

@@ -13,7 +13,7 @@
       label-width="100px"
     >
       <el-form-item prop="title" label="期刊标题">
-        <span>VOL.{{ data.number }} {{ data.name }}</span>
+        <span>VOL.{{ data.journalNo }} {{ data.title }}</span>
       </el-form-item>
       <el-form-item prop="tag" label="期刊标签">
         <span>{{ getTagNameById(data.tag) }}</span>
@@ -24,8 +24,8 @@
       <el-form-item prop="image" label="期刊封面">
         <img
           style="width: 170px;height: 120px;"
-          v-if="data.coverPhoto"
-          :src="data.coverPhoto"
+          v-if="data.image"
+          :src="data.image"
         />
       </el-form-item>
       <el-form-item label="期刊音乐"></el-form-item>
@@ -36,18 +36,17 @@
       style="width: calc(50% + 400px); margin: 0 0 auto auto;"
       stripe
       class="draggable-table"
-      row-key="name"
       border
       fit
       element-loading-text="加载中"
       :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
     >
-      <el-table-column prop="picture" label="专辑封面" width="100px">
+      <el-table-column prop="image" label="专辑封面" width="100px">
         <template slot-scope="slot">
           <img
             style="width: 50;height: 50px;"
-            v-if="slot.row.picture"
-            :src="slot.row.picture"
+            v-if="slot.row.image"
+            :src="slot.row.image"
           />
         </template>
       </el-table-column>
@@ -56,7 +55,7 @@
       <el-table-column prop="album" label="所属专辑"></el-table-column>
       <el-table-column prop="duration" label="时长">
         <template slot-scope="scope">
-          <audio :src="scope.row.url" controls></audio>
+          <audio preload="none" :src="scope.row.url" controls></audio>
         </template>
       </el-table-column>
     </el-table>
@@ -67,29 +66,43 @@
       label-suffix=":"
     >
       <el-form-item label="期刊文案">
-        <span>{{ data.summary }}</span>
+        <div v-html="data.content"></div>
       </el-form-item>
       <el-form-item label="评论记录">
-        <el-card
-          style="margin-top: 5px;background-color: rgba(249, 249, 249, 0.4980392156862745);"
-          shadow="hover"
-          v-for="c in commentList"
-          :key="c['_id']"
-        >
-          <span
-            style="font-family:'微软雅黑', sans-serif;font-weight:400;font-size:14px;color:#666666;"
-            >{{ c["nickname"] }}</span
+        <div>
+          <el-card
+            style="margin-top: 5px;background-color: rgba(249, 249, 249, 0.4980392156862745);padding: 5px 10px 5px 10px"
+            shadow="hover"
+            v-for="c in commentList"
+            :key="c['_id']"
           >
-          <span
-            style="font-family:'微软雅黑', sans-serif;font-weight:400;font-size:12px;color:#999999;"
-            >{{ c["publishtime"] }}</span
-          >
-          <span style="float: right;"
-            ><i class="el-icon-thumb"></i><span>{{ c["thumbup"] }}</span></span
-          >
-          <br />
-          <span class="comment">{{ c["content"] }}</span>
-        </el-card>
+            <span
+              style="font-family:'微软雅黑', sans-serif;font-weight:400;font-size:14px;color:#666666;"
+              >{{ c["nickName"] }}</span
+            >
+            <span
+              style="font-family:'微软雅黑', sans-serif;font-weight:400;font-size:12px;color:#999999;"
+              >{{ c["publishTime"] }}</span
+            >
+            <span style="float: right;"
+              ><i class="el-icon-thumb"></i
+              ><span>{{ c["thumbupCount"] }}</span></span
+            >
+            <br />
+            <span class="comment">{{ c["content"] }}</span>
+          </el-card>
+          <!-- 分页 -->
+          <el-pagination
+            class="pagination-right"
+            background
+            layout="total, prev, pager, next, sizes"
+            :current-page.sync="commentPage.current"
+            :page-size="commentPage.size"
+            :total="commentPage.total"
+            @size-change="handlePageSizeChange"
+            @current-change="handlePageCurrentChange"
+          ></el-pagination>
+        </div>
       </el-form-item>
     </el-form>
   </div>
@@ -124,7 +137,13 @@ export default {
   },
   data() {
     return {
-      commentList: []
+      commentList: [],
+      commentLoading: true,
+      commentPage: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
     };
   },
   filters: {},
@@ -135,45 +154,27 @@ export default {
   mounted() {},
   methods: {
     fetchComment() {
-      // this.$message.success(this.data.number)
-      // commentApi.getList(this.data.number).then(res => {
-      //   console.log(res)
-      // })
-      let res = {
-        code: 0,
-        data: [
-          {
-            _id: "1",
-            articleid: "",
-            comment: 0,
-            content: "wowowowowowow",
-            nickname: "nickname1",
-            parentid: "",
-            publishtime: "2023-01-01",
-            share: 0,
-            state: "",
-            thumbup: 333,
-            userid: "123",
-            visits: 0
-          },
-          {
-            _id: "2",
-            articleid: "",
-            comment: 0,
-            content: "ninininininin",
-            nickname: "nickname2",
-            parentid: "",
-            publishtime: "2023-01-01",
-            share: 0,
-            state: "",
-            thumbup: 12,
-            userid: "123",
-            visits: 0
+      this.commentLoading = true;
+      commentApi
+        .getList(this.data.id, this.commentPage.current, this.commentPage.size)
+        .then(res => {
+          if (res.code === 200) {
+            this.commentList = res.data.rows;
+            this.commentPage.total = res.data.total;
+            this.commentLoading = false;
+          } else {
+            this.$message(res.message);
+            this.commentList = [];
+            this.commentPage.total = 0;
+            this.commentLoading = false;
           }
-        ],
-        message: ""
-      };
-      this.commentList = res.data;
+        });
+    },
+    handlePageSizeChange() {
+      this.fetchComment();
+    },
+    handlePageCurrentChange() {
+      this.fetchComment();
     },
     // ************************* 数据处理 *************************
     getAuthorNameById(userId) {
@@ -224,4 +225,8 @@ export default {
   text-align: left;
   line-height: 22px;
 }
+.pagination-right {
+  text-align: right;
+  margin-top: 10px;
+}
 </style>

src/views/article/articleModify.vue

@@ -158,7 +158,12 @@
       <el-table-column prop="duration" label="时长"></el-table-column>
       <el-table-column label="试听" width="255">
         <template slot-scope="scope">
-          <audio style="width:230px" :src="scope.row.url" controls></audio>
+          <audio
+            preload="none"
+            style="width:230px"
+            :src="scope.row.url"
+            controls
+          ></audio>
         </template>
       </el-table-column>
       <el-table-column label="操作" width="280">

src/views/article/index.vue

@@ -156,7 +156,7 @@
         <el-table-column
           fixed="right"
           label="操作"
-          :width="[200, 200, 100][activateTab]"
+          :width="[300, 200, 200][activateTab]"
         >
           <template slot-scope="scope">
             <el-button
@@ -179,7 +179,7 @@
             <el-button
               plain
               icon="el-icon-info"
-              v-if="activateTab === 1"
+              v-if="activateTab === 0 || activateTab === 2"
               @click="handleDetailClick(scope.row)"
               type="primary"
               size="mini"
@@ -554,9 +554,20 @@ export default {
      * 详情点击事件
      */
     handleDetailClick(row) {
-      this.modifyDialog.data = JSON.parse(JSON.stringify(row));
-      this.modifyDialog.type = 2;
       this.modifyDialog.visible = true;
+      this.modifyDialog.loading = true;
+      articleApi.getDetail(row.id).then(res => {
+        if (res.code === 200) {
+          this.modifyDialog.data = JSON.parse(JSON.stringify(res.data));
+          this.modifyDialog.type = 2;
+          this.modifyDialog.loading = false;
+        } else {
+          this.modifyDialog.data = JSON.parse(JSON.stringify(row));
+          this.modifyDialog.type = 2;
+          this.modifyDialog.loading = false;
+          this.$message.error(res.message);
+        }
+      });
     },
     /**
      * 表格内状态滑块切换事件

src/views/song/index.vue

@@ -134,7 +134,12 @@
         </el-table-column>
         <el-table-column label="试听" width="255">
           <template slot-scope="scope">
-            <audio style="width:230px" :src="scope.row.url" controls></audio>
+            <audio
+              preload="none"
+              style="width:230px"
+              :src="scope.row.url"
+              controls
+            ></audio>
           </template>
         </el-table-column>
         <el-table-column label="启停用" width="70">

src/views/user/detail.vue

@@ -2,8 +2,8 @@
  * @Author: zhangjiabao
  * @Date: 2024-02-02 01:00:52
  * @LastEditors: zhangjiabao
- * @LastEditTime: 2024-02-02 02:24:36
- * @FilePath: \luoo_manage_fe\src\views\user\detail.vue
+ * @LastEditTime: 2024-02-02 16:22:49
+ * @FilePath: /luoo_manage_fe/src/views/user/detail.vue
 -->
 <template>
   <div class="app-container">
@@ -15,7 +15,7 @@
         <el-col :span="2">
           <img
             style="width:100px; height:100px; margin-top:5px; "
-            src="//luoow.wxwenku.com/997/cover_min.jpg"
+            :src="data.avatar"
           />
         </el-col>
         <el-col :span="2">
@@ -23,19 +23,27 @@
             <span
               style="line-height:30px;
               font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif; font-weight: 700; color: #666666;"
-              >落在低处</span
+              >{{ data.nickName }}</span
             ><span
+              v-if="data.sex === 0"
               style="margin-left:10px;line-height:30px; color:rgba(64, 158, 255, 1);
               font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif; font-weight: 700;"
               >♂️</span
             >
+            <span
+              v-if="data.sex === 1"
+              style="margin-left:10px;line-height:30px; color:rgba(251, 98, 96, 1);
+              font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif; font-weight: 700;"
+              >♀</span
+            >
             <br />
-            <span style="line-height:30px;">❤️</span>
+            <!-- 留给标识 -->
+            <span style="line-height:30px;"></span>
             <br />
             <span
               style="line-height:30px;font-size: 12px;font-family: '微软雅黑', sans-serif;
                font-weight: 400; color: #999999; font-size: 12px;"
-              >你还没有设置签名哦！</span
+              >{{ data.signature }}</span
             >
           </div>
         </el-col>
@@ -48,11 +56,19 @@
             >
             <br />
             <span
+              v-if="data.status === 1"
               class="green-dot"
               style="line-height:30px;font-family: '微软雅黑', sans-serif;
               font-size: 12px; font-weight: 400;"
               >正常</span
             >
+            <span
+              v-if="data.status === 0"
+              class="red-dot"
+              style="line-height:30px;font-family: '微软雅黑', sans-serif;
+              font-size: 12px; font-weight: 400;"
+              >禁用</span
+            >
           </div>
         </el-col>
         <el-col :span="3">
@@ -69,7 +85,7 @@
             <span
               style="line-height:30px;font-family: '微软雅黑', sans-serif;
               font-size: 20px; font-weight: 700; color:#666666"
-              >1000</span
+              >*****</span
             >
             <span
               style="line-height:50px;font-family: '微软雅黑', sans-serif; 
@@ -92,7 +108,7 @@
             <span
               style="line-height:30px;font-family: '微软雅黑', sans-serif;
               font-size: 20px; font-weight: 700; color:#666666"
-              >1000</span
+              >*****</span
             >
             <span
               style="line-height:50px;font-family: '微软雅黑', sans-serif; 
@@ -115,7 +131,7 @@
             <span
               style="line-height:30px;font-family: '微软雅黑', sans-serif;
               font-size: 20px; font-weight: 700; color:#666666"
-              >1000</span
+              >*****</span
             >
             <span
               style="line-height:50px;font-family: '微软雅黑', sans-serif; 
@@ -138,7 +154,7 @@
             <span
               style="line-height:30px;font-family: '微软雅黑', sans-serif;
               font-size: 20px; font-weight: 700; color:#666666"
-              >1000</span
+              >*****</span
             >
             <span
               style="line-height:50px;font-family: '微软雅黑', sans-serif; 
@@ -161,7 +177,7 @@
             <span
               style="line-height:30px;font-family: '微软雅黑', sans-serif;
               font-size: 20px; font-weight: 700; color:#666666"
-              >1000</span
+              >*****</span
             >
             <span
               style="line-height:50px;font-family: '微软雅黑', sans-serif; 
@@ -172,8 +188,12 @@
         </el-col>
         <el-col :span="3">
           <div style="margin-top:30px; padding-left:10px">
-            <el-button size="medium" type="primary">修改资料</el-button>
-            <el-button size="medium">设置状态</el-button>
+            <el-button @click="callNotFinished" size="medium" type="primary"
+              >修改资料</el-button
+            >
+            <el-button @click="callNotFinished" size="medium"
+              >设置状态</el-button
+            >
           </div>
         </el-col>
       </el-row>
@@ -182,53 +202,254 @@
       <div slot="header" class="card-header clearfix">
         <el-button
           type="text"
-          class=" card-header-text-button card-header-text-button-selected"
+          :class="
+            activateTab === 0
+              ? 'card-header-text-button card-header-text-button-selected'
+              : 'card-header-text-button'
+          "
+          @click="changeActivateTab(0)"
           >用户详情</el-button
         >
-        <el-button type="text" class="card-header-text-button"
+        <el-button
+          type="text"
+          :class="
+            activateTab === 1
+              ? 'card-header-text-button card-header-text-button-selected'
+              : 'card-header-text-button'
+          "
+          @click="changeActivateTab(1)"
           >播放记录</el-button
         >
-        <el-button type="text" class="card-header-text-button"
+        <el-button
+          type="text"
+          :class="
+            activateTab === 2
+              ? 'card-header-text-button card-header-text-button-selected'
+              : 'card-header-text-button'
+          "
+          @click="changeActivateTab(2)"
           >收藏期刊</el-button
         >
-        <el-button type="text" class="card-header-text-button"
+        <el-button
+          type="text"
+          :class="
+            activateTab === 3
+              ? 'card-header-text-button card-header-text-button-selected'
+              : 'card-header-text-button'
+          "
+          @click="changeActivateTab(3)"
           >收藏单曲</el-button
         >
-        <el-button type="text" class="card-header-text-button"
+        <el-button
+          type="text"
+          :class="
+            activateTab === 4
+              ? 'card-header-text-button card-header-text-button-selected'
+              : 'card-header-text-button'
+          "
+          @click="changeActivateTab(4)"
           >下载记录</el-button
         >
-        <el-button type="text" class="card-header-text-button"
+        <el-button
+          type="text"
+          :class="
+            activateTab === 5
+              ? 'card-header-text-button card-header-text-button-selected'
+              : 'card-header-text-button'
+          "
+          @click="changeActivateTab(5)"
           >评论记录</el-button
         >
-        <el-button type="text" class="card-header-text-button"
+        <el-button
+          type="text"
+          :class="
+            activateTab === 6
+              ? 'card-header-text-button card-header-text-button-selected'
+              : 'card-header-text-button'
+          "
+          @click="changeActivateTab(6)"
           >登录日志</el-button
         >
-        <el-button type="text" class="card-header-text-button"
+        <el-button
+          type="text"
+          :class="
+            activateTab === 7
+              ? 'card-header-text-button card-header-text-button-selected'
+              : 'card-header-text-button'
+          "
+          @click="changeActivateTab(7)"
           >操作日志</el-button
         >
-        <el-button type="text" class="card-header-text-button"
+        <el-button
+          type="text"
+          :class="
+            activateTab === 8
+              ? 'card-header-text-button card-header-text-button-selected'
+              : 'card-header-text-button'
+          "
+          @click="changeActivateTab(8)"
           >IM记录</el-button
         >
       </div>
+      <!-- 详情 -->
+      <div v-if="activateTab === 0">
+        <el-descriptions class="margin-top" :column="2" border>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-user"></i>
+              UID
+            </template>
+            {{ data.id }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-s-opportunity"></i>
+              昵称
+            </template>
+            {{ data.nickName }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-male"></i>
+              性别
+            </template>
+            {{
+              data.sex === null || data.sex === undefined
+                ? "未填写"
+                : ["男", "女", "隐藏"][data.sex]
+            }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-ship"></i>
+              生日
+            </template>
+            {{ data.birthday }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-guide"></i>
+              签名
+            </template>
+            {{ data.signature }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-mobile-phone"></i>
+              手机
+            </template>
+            {{ data.mobile }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-position"></i>
+              IP
+            </template>
+            {{ data.lastLoginIp }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-time"></i>
+              注册时间
+            </template>
+            {{ data.joinTime }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-monitor"></i>
+              机型
+            </template>
+            {{ data.lastUseDeviceBrand }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-mobile"></i>
+              设备ID
+            </template>
+            {{ data.lastUseDeviceId }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-key"></i>
+              最近登录
+            </template>
+            {{ data.lastLoginTime }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+      <div class="no-content-div" v-if="activateTab === 1">
+        <span>无数据</span>
+      </div>
+      <div class="no-content-div" v-if="activateTab === 2">
+        <span>无数据</span>
+      </div>
+      <div class="no-content-div" v-if="activateTab === 3">
+        <span>无数据</span>
+      </div>
+      <div class="no-content-div" v-if="activateTab === 4">
+        <span>无数据</span>
+      </div>
+      <div class="no-content-div" v-if="activateTab === 5">
+        <span>无数据</span>
+      </div>
+      <div class="no-content-div" v-if="activateTab === 6">
+        <span>无数据</span>
+      </div>
+      <div class="no-content-div" v-if="activateTab === 7">
+        <span>无数据</span>
+      </div>
+      <div class="no-content-div" v-if="activateTab === 8">
+        <span>无数据</span>
+      </div>
     </el-card>
   </div>
 </template>
 
 <script>
+import userApi from "@/api/user";
+
 export default {
   name: "UserDetail",
   components: {},
   props: {},
   data() {
     return {
+      activateTab: 0,
+      id: null,
       data: {}
     };
   },
   computed: {},
   watch: {},
-  created() {},
+  created() {
+    if (!this.$route.query.id) {
+      this.data = {};
+    } else {
+      this.id = this.$route.query.id;
+      this.fetchDetail();
+    }
+  },
   mounted() {},
-  methods: {}
+  methods: {
+    callNotFinished() {
+      this.$message.info("未开放这个功能");
+    },
+    fetchDetail() {
+      if (this.id === null) {
+        return;
+      }
+      userApi.getDetail(this.id).then(res => {
+        if (res.code === 200) {
+          this.data = res.data;
+        } else {
+          this.data = {};
+        }
+      });
+    },
+    changeActivateTab(tab) {
+      this.activateTab = tab;
+    }
+  }
 };
 </script>
 
@@ -317,13 +538,14 @@ export default {
   position: relative;
   top: -16px;
   text-align: center;
+  border-width: 0px;
 }
 .card-header-text-button-selected {
   color: rgba(64, 158, 255, 1);
   border-bottom: solid;
   border-radius: 0px;
   border-color: rgba(64, 158, 255, 1);
-  border-width: 0px 0px 2px 0px;
+  border-width: 0px 0px 2px 0px !important;
 }
 .green-dot,
 .red-dot {
@@ -351,4 +573,10 @@ export default {
 .red-dot::before {
   background-color: red;
 }
+/* 子组件样式，可以自定义样式，这里包含一个 span 元素表示没有数据 */
+.no-content-div {
+  text-align: center;
+  padding: 20px;
+  margin-top: 5%;
+}
 </style>

src/views/user/index.vue

@@ -2,8 +2,8 @@
  * @Author: zhangjiabao
  * @Date: 2024-02-01 22:12:08
  * @LastEditors: zhangjiabao
- * @LastEditTime: 2024-02-02 01:14:57
- * @FilePath: \luoo_manage_fe\src\views\user\index.vue
+ * @LastEditTime: 2024-02-02 17:03:49
+ * @FilePath: /luoo_manage_fe/src/views/user/index.vue
 -->
 <template>
   <div class="app-container">
@@ -15,59 +15,88 @@
         <el-form-item>
           <el-input
             size="medium"
-            style="width: 200px;"
-            placeholder="用户昵称/ID/手机号码"
+            style="width: 180px;"
+            v-model="queryForm.data.mobile"
+            placeholder="手机号码"
           ></el-input>
         </el-form-item>
         <el-form-item>
           <el-input
             size="medium"
-            style="width: 200px;"
-            placeholder="用户标识"
+            style="width: 180px;"
+            v-model="queryForm.data.nickName"
+            placeholder="昵称"
           ></el-input>
         </el-form-item>
         <el-form-item>
           <el-input
             size="medium"
-            style="width: 200px;"
-            placeholder="用户状态"
+            style="width: 180px;"
+            v-model="queryForm.data.signature"
+            placeholder="签名"
           ></el-input>
         </el-form-item>
         <el-form-item>
-          <el-input
+          <el-select
             size="medium"
-            style="width: 200px;"
-            placeholder="在线状态"
-          ></el-input>
+            style="width: 110px;"
+            v-model="queryForm.data.sex"
+            placeholder="性别"
+          >
+            <el-option label="男" value="0"></el-option>
+            <el-option label="女" value="1"></el-option>
+            <el-option label="保密" value="2"></el-option>
+          </el-select>
         </el-form-item>
         <el-form-item>
-          <el-input
+          <el-select
             size="medium"
-            style="width: 200px;"
-            placeholder="在线状态"
-          ></el-input>
+            style="width: 110px;"
+            v-model="queryForm.data.status"
+            placeholder="用户状态"
+          >
+            <el-option label="启用" :value="1"></el-option>
+            <el-option label="弃用" :value="0"></el-option>
+          </el-select>
         </el-form-item>
         <el-form-item>
           <el-date-picker
             placeholder="注册时间"
+            type="datetime"
             :editable="false"
             :clearable="false"
-            value-format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd hh:mm:ss"
+            v-model="queryForm.data.joinTime"
             size="medium"
-            style="width: 200px;"
+            style="width: 230px;"
           >
           </el-date-picker>
         </el-form-item>
         <el-form-item>
-          <el-button icon="el-icon-search" type="primary" size="medium"
+          <el-button
+            icon="el-icon-search"
+            type="primary"
+            size="medium"
+            @click="handleQueryClick"
             >查询</el-button
           >
         </el-form-item>
         <el-form-item>
-          <el-button icon="el-icon-refresh-left" size="medium">重置</el-button>
+          <el-button
+            icon="el-icon-refresh-left"
+            size="medium"
+            @click="handleResetClick"
+            >重置</el-button
+          >
         </el-form-item>
         <el-form-item>
-          <el-button type="text" icon="el-icon-s-operation">高级筛选</el-button>
+          <el-button
+            type="text"
+            disabled
+            icon="el-icon-s-operation"
+            @click="callNotFinished"
+            >高级筛选</el-button
+          >
         </el-form-item>
       </el-form>
       <el-form :inline="true" class="in-card-form">
@@ -77,6 +106,7 @@
             icon="el-icon-error"
             type="primary"
             size="medium"
+            disabled
             @click="callNotFinished"
             >停用用户</el-button
           >
@@ -87,6 +117,7 @@
             icon="el-icon-unlock"
             type="primary"
             size="medium"
+            disabled
             @click="callNotFinished"
             >启用用户</el-button
           >
@@ -97,6 +128,7 @@
             icon="el-icon-s-tools"
             type="primary"
             size="medium"
+            disabled
             @click="callNotFinished"
             >标识设置</el-button
           >
@@ -106,6 +138,7 @@
             plain
             icon="el-icon-upload2"
             size="medium"
+            disabled
             @click="callNotFinished"
             >导出数据</el-button
           >
@@ -116,7 +149,7 @@
         stripe
         ref="userTable"
         :data="table.data"
-        height="calc(100vh - 345px)"
+        height="calc(100vh - 400px)"
         v-loading="table.loading"
         element-loading-text="加载中"
         :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
@@ -125,16 +158,31 @@
         @selection-change="handleTableSelectionChange"
       >
         <el-table-column type="selection" width="55"> </el-table-column>
-        <el-table-column label="UID" sortable="" prop="id"></el-table-column>
-        <el-table-column label="用户昵称"></el-table-column>
-        <el-table-column label="用户标识"></el-table-column>
-        <el-table-column label="用户状态"></el-table-column>
-        <el-table-column label="播放记录"></el-table-column>
-        <el-table-column label="收藏期刊"></el-table-column>
-        <el-table-column label="收藏单曲"></el-table-column>
-        <el-table-column label="评论记录"></el-table-column>
-        <el-table-column label="注册时间"></el-table-column>
-        <el-table-column label="在线状态"></el-table-column>
+        <el-table-column label="UID" sortable prop="id"></el-table-column>
+        <el-table-column label="用户头像">
+          <template slot-scope="scope">
+            <img :src="scope.row.avatar" style="width:70px; height:60px" />
+          </template>
+        </el-table-column>
+        <el-table-column label="用户昵称" prop="nickName"></el-table-column>
+        <el-table-column label="用户签名" prop="signature"></el-table-column>
+        <el-table-column label="用户状态">
+          <template slot-scope="scope">
+            <span v-if="scope.row.status === 1" class="green-dot">正常</span>
+            <span v-if="scope.row.status === 0" class="red-dot">停用</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="粉丝数量" prop="fansCount"></el-table-column>
+        <el-table-column label="关注数量" prop="followCount"></el-table-column>
+        <el-table-column label="手机" prop="mobile"></el-table-column>
+        <el-table-column label="注册时间" prop="joinTime"></el-table-column>
+        <el-table-column label="性别">
+          <template slot-scope="scope">
+            <span v-if="scope.row.status === 0">男</span>
+            <span v-if="scope.row.status === 1">女</span>
+            <span v-if="scope.row.status === 2">保密</span>
+          </template>
+        </el-table-column>
         <el-table-column label="操作" width="200">
           <template slot-scope="scope">
             <el-button
@@ -145,17 +193,37 @@
               @click="handleDetailClick(scope.row)"
               >详情</el-button
             >
-            <el-button plain icon="el-icon-edit" type="primary" size="mini"
+            <el-button
+              plain
+              icon="el-icon-edit"
+              type="primary"
+              disabled
+              size="mini"
+              @click="callNotFinished"
               >编辑</el-button
             >
           </template>
         </el-table-column>
       </el-table>
+      <!-- 分页 -->
+      <el-pagination
+        class="pagination-right"
+        background
+        layout="total, prev, pager, next, sizes"
+        :current-page.sync="table.page.current"
+        :page-size="table.page.size"
+        :total="table.page.total"
+        @size-change="handlePageSizeChange"
+        @current-change="handlePageCurrentChange"
+      >
+      </el-pagination>
     </el-card>
   </div>
 </template>
 
 <script>
+import userApi from "@/api/user";
+
 export default {
   name: "User",
   components: {},
@@ -163,20 +231,33 @@ export default {
   data() {
     return {
       queryForm: {
-        data: {},
+        data: {
+          mobile: null,
+          nickName: null,
+          signature: null,
+          sex: null,
+          joinTime: null,
+          status: null
+        },
         lastQuery: {}
       },
       table: {
         loading: false,
         selection: [],
-        data: [{ id: 1 }, { id: 2 }, { id: 3 }],
-        page: {}
+        data: [],
+        page: {
+          current: 1,
+          size: 10,
+          total: 0
+        }
       }
     };
   },
   computed: {},
   watch: {},
-  created() {},
+  created() {
+    this.fetchData(this.queryForm.data);
+  },
   mounted() {},
   methods: {
     /**
@@ -188,11 +269,69 @@ export default {
     callNotFinished() {
       this.$message.info("未开放这个功能");
     },
+    // ************************* 数据查询 *************************
+    /**
+     * 查询表格数据
+     */
+    fetchData(param) {
+      // 记录上一次查询条件
+      this.queryForm.lastQuery = param;
+
+      let queryParam = {
+        ...param
+      };
+
+      this.table.loading = true;
+      this.table.data = [];
+      userApi
+        .getList(queryParam, this.table.page.current, this.table.page.size)
+        .then(res => {
+          this.table.data = res.data.rows;
+          this.table.page.total = res.data.total;
+          this.table.loading = false;
+        });
+    },
+    // ************************* 按扭事件 *************************
+    /**
+     * 查询按扭点击事件
+     */
+    handleQueryClick() {
+      this.table.page.current = 1;
+      this.table.page.total = 0;
+      this.fetchData(this.queryForm.data);
+    },
+    /**
+     * 重置点击事件
+     */
+    handleResetClick() {
+      this.queryForm.data = {
+        mobile: null,
+        nickName: null,
+        signature: null,
+        sex: null,
+        joinTime: null,
+        status: null
+      };
+    },
     /**
      * 表格详情
      */
     handleDetailClick(row) {
       this.$router.push(`/userManage/detail?id=${row.id}`);
+    },
+    /**
+     * 分页组件页数变化事件
+     */
+    handlePageCurrentChange(val) {
+      this.table.page.current = val;
+      this.fetchData(this.queryForm.lastQuery);
+    },
+    /**
+     * 分页组件大小变化事件
+     */
+    handlePageSizeChange(val) {
+      this.table.page.size = val;
+      this.fetchData(this.queryForm.lastQuery);
     }
   }
 };
@@ -263,4 +402,30 @@ export default {
   letter-spacing: normal;
   color: #333333;
 }
+.green-dot,
+.red-dot {
+  position: relative;
+  padding-left: 15px; /* 调整圆点距离文字的距离 */
+}
+
+.green-dot::before,
+.red-dot::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translate(-50%, -50%);
+  width: 10px; /* 圆点的直径 */
+  height: 10px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.green-dot::before {
+  background-color: green;
+}
+
+.red-dot::before {
+  background-color: red;
+}
 </style>