111

src/api/member/member.js

@@ -16,6 +16,13 @@ export function getAnnouncer(userId) {
     method: 'get'
   })
 }
+// 查询会员详细
+export function getBlogger(userId) {
+  return request({
+    url: '/member/member/bloggerDetail/' + userId,
+    method: 'get'
+  })
+}
 
 // 新增会员
 export function addMember(data) {

src/views/member/blogger/form/bloggerDraw.vue

@@ -0,0 +1,66 @@
+<template>
+  <el-drawer title="博主详情" :visible.sync="drawer" size="55%">
+
+    <el-descriptions class="margin-top" :column="3" :size="size" border>
+      <el-descriptions-item>
+        <template slot="label">
+          昵称
+        </template>
+        {{ bloggerDetail.nickName }}
+      </el-descriptions-item>
+
+      <el-descriptions-item>
+        <template slot="label">
+          会员
+        </template>
+        {{ bloggerDetail.memberCardName }}
+      </el-descriptions-item>
+
+      <el-descriptions-item>
+        <template slot="label">
+          联系电话
+        </template>
+        {{ bloggerDetail.tel }}
+      </el-descriptions-item>
+
+    </el-descriptions>
+    {{bloggerDetail}}
+  </el-drawer>
+</template>
+
+<script>
+import {getBlogger} from "@/api/member/member";
+export default {
+  name: "BloggerDraw",
+  data() {
+    return {
+      //抽屉打开框
+      drawer: false,
+      //博主用户id
+      userId: null,
+      //博主详情
+      bloggerDetail:{},
+    }
+  },
+  methods: {
+    /**初始化博主详情页*/
+    initDraw(id) {
+      this.drawer = true
+      this.getBloggerDetail(id)
+    },
+
+    /**获取博主详情*/
+    getBloggerDetail(userId){
+      this.bloggerDetail = {}
+      getBlogger(userId).then(response => {
+        this.bloggerDetail = response.data;
+      });
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/member/blogger/index.vue

@@ -62,16 +62,20 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
-
+    <BloggerDraw ref="formRef" />
   </div>
 </template>
 
 <script>
 import { listMember, getMember, delMember, addMember, updateMember } from "@/api/member/member";
 import { changeUserStatus } from "@/api/system/user";
+import BloggerDraw from "@/views/member/blogger/form/bloggerDraw.vue"
 export default {
   name: "Blogger",
   dicts: ['dl_identity_type'],
+  components:{
+    BloggerDraw
+  },
   data() {
     return {
       // 遮罩层
@@ -141,20 +145,11 @@ export default {
     },
 
 
-    /** 修改按钮操作 */
+    /** 查看详情 */
     detail(row) {
-      // const id = row.id || this.ids
-      // getMember(id).then(response => {
-      //   this.form = response.data;
-      //   this.open = true;
-      //   this.title = "修改会员";
-      // });
+      this.$refs['formRef'].initDraw(row.userId)
     },
 
-
-
-
-
   }
 };
 </script>