动态管理

pages/main/index/dynamic.vue

@@ -0,0 +1,309 @@
+<template>
+<div>
+    <el-row :gutter="15">
+        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
+            <el-col :span="8">
+                <el-form-item label="状态" prop="status">
+                    <el-select v-model="formData.status" placeholder="请选择状态" :style="{width: '100%'}">
+                        <el-option v-for="(item, index) in statusOptions" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
+                    </el-select>
+                </el-form-item>
+            </el-col>
+            <el-col :span="8">
+                <el-form-item size="large">
+                    <el-button type="primary" @click="submitForm">提交</el-button>
+                    <el-button @click="resetForm">重置</el-button>
+                </el-form-item>
+            </el-col>
+        </el-form>
+    </el-row>
+
+    <el-table v-loading="loading" :border="true" :data="table" style="width: 100%">
+        <el-table-column prop="type_text" label="动态id+名称" width="190">
+            <template slot-scope="scope">
+                <div>动态id：{{scope.row.dynamicId}}</div>
+                <div>名称：{{scope.row.type_text}}</div>
+            </template>
+        </el-table-column>
+        <el-table-column label="评论用户" width="200">
+            <template slot-scope="scope">
+                <el-avatar :src="scope.row.user_info.icon_url">
+                </el-avatar>
+                <span>{{scope.row.user_info.nickname}}</span>
+            </template>
+        </el-table-column>
+        <el-table-column prop="title" label="标题" width="300">
+        </el-table-column>
+
+        <el-table-column label="图片" width="300">
+            <template slot-scope="scope">
+                <template v-if="scope.row.imgList.length > 0">
+                    <el-image :preview-src-list="scope.row.imgList" style="width: 100px; height: 100px" :src="scope.row.imgList[0]" fit="fit"></el-image>
+                </template>
+                <template v-else>
+                    暂无图片
+                </template>
+
+            </template>
+        </el-table-column>
+
+        <el-table-column prop="addtime" label="发布时间" width="190">
+        </el-table-column>
+        <el-table-column prop="status_text" label="状态" width="190">
+
+        </el-table-column>
+        <el-table-column label="操作" fixed="right">
+            <template slot-scope="scope">
+                <template v-if="scope.row.status == 1">
+                    <el-button type="success" size="mini" @click="setDynamicPass(scope.row.dynamicId)">通过</el-button>
+                    <el-button type="danger" size="mini" @click="callDynamicReject(scope.row.dynamicId)">拒绝</el-button>
+                </template>
+                <template v-if="scope.row.status == 2">
+                    <el-button type="primary" size="mini" @click="setDynamicRecommendt(scope.row.dynamicId)">推荐</el-button>
+                    <el-button type="danger" size="mini" @click="callDynamicReject(scope.row.dynamicId,scope.row)">拒绝</el-button>
+                </template>
+                <template v-if="scope.row.status == 3">
+                    <el-button type="success" size="mini" @click="setDynamicPass(scope.row.dynamicId)">通过</el-button>
+                </template>
+            </template>
+        </el-table-column>
+    </el-table>
+
+    <el-row :gutter="24">
+        <el-col :span="23" :offset="1">
+            <div class="mt-20 mb-20">
+                <el-pagination :page-size="page_size" :current-page="page" @current-change="pageChange" @size-change="handleSizeChange" background :page-sizes="[10, 30, 50]" layout="total,sizes,prev, pager, next,jumper" :total="total">
+                </el-pagination>
+            </div>
+        </el-col>
+    </el-row>
+
+    <el-dialog :visible="visible" v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" title="请填写拒绝原因">
+        <el-form ref="modalForm" :model="modalFormData" :rules="modalFormDataRules" size="medium" label-width="100px">
+            <el-form-item label="动态id" prop="memo">
+                <el-input v-model="rejectDynamicId" :disabled="true" placeholder="请输入拒绝原因" clearable :style="{width: '100%'}">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="名称" prop="memo">
+                <el-input v-model="rejectTypeText" :disabled="true" placeholder="请输入拒绝原因" clearable :style="{width: '100%'}">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="拒绝原因" prop="memo">
+                <el-input v-model="modalFormData.memo" placeholder="请输入拒绝原因" clearable :style="{width: '100%'}">
+                </el-input>
+            </el-form-item>
+        </el-form>
+        <div slot="footer">
+            <el-button @click="close">取消</el-button>
+            <el-button type="primary" @click="handelConfirm">确定</el-button>
+        </div>
+    </el-dialog>
+</div>
+</template>
+
+<script>
+import Cookies from 'js-cookie'
+
+export default {
+    inheritAttrs: false,
+    components: {},
+    props: [],
+    data() {
+        return {
+            formData: {
+                status: 0
+            },
+            rules: {
+                status: [],
+            },
+            statusOptions: [{
+                "label": "全部",
+                "value": 0
+            }, {
+                "label": "未审核",
+                "value": 1
+            }, {
+                "label": "审核通过",
+                "value": 2
+            }, {
+                "label": "审核拒绝",
+                "value": 3
+            }],
+
+            table: [],
+            page: 1,
+            page_size: 10,
+            total: 0,
+
+            loading: false,
+
+            // 模态表单
+            visible: false,
+            rejectTypeText: '',
+            rejectDynamicId: "",
+            modalFormData: {
+                memo: "",
+            },
+            modalFormDataRules: {
+                memo: [{
+                    required: true,
+                    message: '请输入拒绝原因',
+                    trigger: 'blur'
+                }],
+            },
+        }
+    },
+    computed: {},
+    watch: {},
+    created() {
+
+    },
+    mounted() {
+        this.fetchData()
+    },
+    methods: {
+        submitForm() {
+            this.$refs['elForm'].validate(valid => {
+                if (!valid) return
+                // 重置页数
+                this.page = 1
+                this.fetchData()
+                // TODO 提交表单
+            })
+        },
+        resetForm() {
+            this.$refs['elForm'].resetFields()
+        },
+        pageChange(val) {
+            this.page = val
+            this.fetchData()
+        },
+        handleSizeChange(e) {
+            this.page_size = e;
+            this.fetchData()
+        },
+        async fetchData() {
+            this.loading = true;
+            let res = await this.$post("/uapi/v1/m/dynamic/get_admin_dynamic_list", {
+                status: this.formData.status + "",
+                page: this.page,
+                page_size: this.page_size
+
+            });
+            this.loading = false;
+            if (res && res.status === 1) {
+                this.table = res.data.list.map(item => {
+                    let imgList = item.img.map(img => {
+                        return img.img
+                    })
+                    return {
+                        ...item,
+                        imgList: imgList
+                    }
+                })
+                this.total = res.data.total
+            }
+        },
+        // 设置通过
+        async setDynamicPass(dynamicId) {
+            this.$post("/uapi/v1/m/dynamic/set_user_dynamic_status", {
+                status: 2,
+                dynamicId
+
+            }).then((res) => {
+                if (res.status == 1) {
+                    this.$message({
+                        type: "success",
+                        message: "操作成功!"
+                    });
+                    this.fetchData()
+                }
+            }).catch(() => {
+                this.$message({
+                    type: "info",
+                    message: "操作失败"
+                });
+            });
+        },
+        // 设置拒绝
+        async setDynamicReject(dynamicId, memo) {
+            this.$post("/uapi/v1/m/dynamic/set_user_dynamic_status", {
+                status: 3,
+                dynamicId,
+                memo: memo
+
+            }).then((res) => {
+                if (res.status == 1) {
+                    this.$message({
+                        type: "success",
+                        message: "操作成功!"
+                    });
+                    this.close()
+                    this.fetchData()
+                }
+            }).catch(() => {
+                this.$message({
+                    type: "info",
+                    message: "操作失败"
+                });
+            });
+        },
+        // 设置推荐
+        async setDynamicRecommendt(dynamicId) {
+
+            this.$post("/uapi/v1/m/dynamic/set_user_dynamic_is_hot", {
+                is_hot: 1,
+                dynamicId
+
+            }).then((res) => {
+                if (res.status == 1) {
+                    this.$message({
+                        type: "success",
+                        message: "操作成功!"
+                    });
+                    this.fetchData()
+                }
+            }).catch(() => {
+                this.$message({
+                    type: "info",
+                    message: "操作失败"
+                });
+            });
+
+        },
+
+        callDynamicReject(dynamicId, item) {
+            this.rejectDynamicId = dynamicId
+            this.rejectTypeText = item.type_text
+            this.visible = true
+        },
+
+        // 弹出表单
+
+        onOpen() {},
+        onClose() {
+            this.$refs['modalForm'].resetFields()
+            this.rejectDynamicId = ""
+            this.rejectTypeText = ""
+            this.visible = false
+        },
+        close() {
+            this.$emit('update:visible', false)
+            this.rejectDynamicId = ""
+            this.rejectTypeText = ""
+            this.visible = false
+
+        },
+        handelConfirm() {
+            this.$refs['modalForm'].validate(valid => {
+                if (!valid) return
+                console.log(this.modalFormData.memo)
+                let memo = this.modalFormData.memo
+
+                this.setDynamicReject(this.rejectDynamicId, memo)
+                // this.close()
+            })
+        },
+    }
+}
+</script>

styles/index.scss

@@ -189,3 +189,11 @@ aside {
 .multiselect--active {
   z-index: 1000 !important;
 }
+
+
+.mt-20{
+  margin-top: 20px;
+}
+.mb-20{
+  margin-bottom: 20px;
+}