合并

src/views/pcenter/comment.vue

@@ -1,19 +1,159 @@
 <template>
   <div id="comment">
-    <p>comment</p>
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="list" v-if="display">
+          <el-table :data="tableData" border style="width: 100%">
+            <el-table-column prop="nname" label="信息标题" align="center" :show-overflow-tooltip="true" width="180px"> </el-table-column>
+            <el-table-column prop="uname" label="评论人" align="center"> </el-table-column>
+            <el-table-column prop="content" label="评论内容" align="center" :show-overflow-tooltip="true" width="180px">
+              <template slot-scope="scope">
+                <span v-html="scope.row.content"></span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="address" label="状态" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.status == '0' ? '审核中' : scope.row.status == '1' ? '审核通过' : scope.row.status == '2' ? '审核拒绝' : '未识别' }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" width="230px">
+              <template slot-scope="scope">
+                <el-button size="mini" @click="view(scope.row.id)">查看</el-button>
+                <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
+                <el-button v-if="user.type === '0' || user.type === '1'" type="success" size="mini" @click="refer(scope.row.id, { status: '1' })"
+                  >审核通过</el-button
+                >
+                <el-button v-if="user.type === '0' || user.type === '1'" type="warning" size="mini" @click="refer(scope.row.id, { status: '2' })"
+                  >审核拒绝</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+          <page :total="total" position="right" @query="search"></page>
+        </el-col>
+        <el-col :span="24" class="detail" v-else>
+          <el-col class="top"><el-button type="primary" size="mini" @click="back">返回</el-button></el-col>
+          <el-col class="main">
+            <el-form ref="form" :model="form">
+              <el-form-item>
+                <el-form-item label="信息标题：">
+                  <span>{{ form.nname }}</span>
+                </el-form-item>
+                <el-form-item label="评论人：">
+                  <span>{{ form.uname }}</span>
+                </el-form-item>
+                <el-form-item label="评论内容：">
+                  <span v-html="form.content"></span>
+                </el-form-item>
+                <el-button v-if="user.type === '0' || user.type === '1'" type="success" @click="refer(form.id, { status: '1' })">审核通过</el-button>
+                <el-button v-if="user.type === '0' || user.type === '1'" type="warning" @click="refer(form.id, { status: '2' })">审核拒绝</el-button>
+              </el-form-item>
+            </el-form>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
+import page from '@/components/pagination.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: comment } = createNamespacedHelpers('comment');
 export default {
   name: 'comment',
   props: {},
-  components: {},
-  data: () => ({}),
-  created() {},
-  computed: {},
-  methods: {},
+  components: { page },
+  data: () => ({
+    tableData: [],
+    total: 0,
+    display: true,
+    form: {},
+  }),
+  created() {
+    this.search();
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  methods: {
+    ...comment(['update', 'fetch', 'query', 'delete']),
+    // 查询信息列表
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      let res = {};
+      if (this.user.type === '0' || this.user.type === '1') {
+        res = await this.query({ skip, limit, ...info });
+      }
+      if (this.user.type === '3') {
+        res = await this.query({ skip, limit, uid: this.user.uid });
+      }
+      this.$set(this, `tableData`, res.data);
+      this.$set(this, `total`, res.total);
+    },
+    async view(id) {
+      const res = await this.fetch(id);
+      this.$set(this, `form`, res.data);
+      if (this.user.type === '0' || this.user.type === '1' || res.data.status != '0') {
+        this.disabled = true;
+      }
+      this.display = false;
+    },
+    async del(id) {
+      const res = await this.delete(id);
+      if (res.errcode === 0) {
+        this.$message({
+          message: '信息删除成功',
+          type: 'success',
+        });
+        this.search();
+      } else {
+        this.$message.error('信息删除失败');
+      }
+    },
+    async refer(id, { status }) {
+      const res = await this.update({ id, status });
+      if (res.errcode === 0) {
+        this.$message({
+          message: '信息修改成功',
+          type: 'success',
+        });
+        this.search();
+        this.display = true;
+      } else {
+        this.$message.error('信息修改失败');
+      }
+    },
+    // 返回
+    back() {
+      this.display = true;
+    },
+  },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.style {
+  width: 95%;
+  margin: 0 auto;
+  float: none;
+}
+.list /deep/.el-button {
+  display: inline-block;
+  height: 30px;
+  width: 48px;
+  text-align: center;
+  line-height: 20px;
+  padding: 0;
+  margin: 5px 1px;
+  font-size: 11px;
+}
+.top {
+  text-align: right;
+  padding: 0 0 10px 0;
+}
+.main {
+  text-align: left;
+  margin: 0;
+  padding: 0;
+}
+</style>