|
|
@@ -0,0 +1,567 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="mt-20 mb-20">
|
|
|
+ <el-button type="primary" @click="callCreateForm">添加圈子</el-button>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ v-loading="loading"
|
|
|
+ :border="true"
|
|
|
+ :data="table"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column prop="name" label="名称" width="190"></el-table-column>
|
|
|
+ <el-table-column prop="order" label="排序" width="190"></el-table-column>
|
|
|
+ <el-table-column prop="name" label="图标" width="190">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <template v-if="scope.row.icon">
|
|
|
+ <el-image
|
|
|
+ style="width: 100px; height: 100px"
|
|
|
+ :src="scope.row.icon"
|
|
|
+ fit="fit"
|
|
|
+ ></el-image>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ 暂无图片
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column prop="name" label="今日动态数" width="190"></el-table-column> -->
|
|
|
+ <el-table-column
|
|
|
+ prop="total"
|
|
|
+ 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="primary"
|
|
|
+ size="mini"
|
|
|
+ @click="callEditForm(scope.row)"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="success"
|
|
|
+ size="mini"
|
|
|
+ @click="setDynamicReject(scope.row.typeId)"
|
|
|
+ >下线</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ <template v-if="scope.row.status == 2 || !scope.row.status">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ @click="callEditForm(scope.row)"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="warning"
|
|
|
+ size="mini"
|
|
|
+ @click="setDynamicPass(scope.row.typeId)"
|
|
|
+ >上线</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="modalTitle"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="modalForm"
|
|
|
+ :model="modalFormData"
|
|
|
+ :rules="rules"
|
|
|
+ size="medium"
|
|
|
+ label-width="100px"
|
|
|
+ >
|
|
|
+ <el-form-item label="名称" prop="name">
|
|
|
+ <el-input
|
|
|
+ v-model="modalFormData.name"
|
|
|
+ placeholder="请输入名称"
|
|
|
+ clearable
|
|
|
+ :style="{ width: '100%' }"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="描述" prop="desc">
|
|
|
+ <el-input
|
|
|
+ v-model="modalFormData.desc"
|
|
|
+ placeholder="请输入描述"
|
|
|
+ clearable
|
|
|
+ :style="{ width: '100%' }"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="圈子icon" prop="icon" required>
|
|
|
+ <el-upload
|
|
|
+ :limit="1"
|
|
|
+ :file-list="iconfileList"
|
|
|
+ :action="iconAction"
|
|
|
+ :before-upload="iconBeforeUpload"
|
|
|
+ :on-success="afterIconUploadSuccess"
|
|
|
+ :on-error="afterIconUploadFail"
|
|
|
+ :on-exceed="fileLimite"
|
|
|
+ list-type="picture-card"
|
|
|
+ >
|
|
|
+ <i class="el-icon-plus"></i>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否开启" prop="status" required>
|
|
|
+ <el-switch
|
|
|
+ v-model="modalFormData.status"
|
|
|
+ :active-value="1"
|
|
|
+ :inactive-value="2"
|
|
|
+ ></el-switch>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="分享标题" prop="share_title">
|
|
|
+ <el-input
|
|
|
+ v-model="modalFormData.share_title"
|
|
|
+ placeholder="请输入分享标题"
|
|
|
+ clearable
|
|
|
+ :style="{ width: '100%' }"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="分享描述" prop="share_desc">
|
|
|
+ <el-input
|
|
|
+ v-model="modalFormData.share_desc"
|
|
|
+ placeholder="请输入分享描述"
|
|
|
+ clearable
|
|
|
+ :style="{ width: '100%' }"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="分享图片" prop="share_icon" required>
|
|
|
+ <el-upload
|
|
|
+ :limit="1"
|
|
|
+ ref="share_icon"
|
|
|
+ :file-list="share_iconfileList"
|
|
|
+ :action="share_iconAction"
|
|
|
+ :before-upload="share_iconBeforeUpload"
|
|
|
+ :on-success="afterShareImgUploadSuccess"
|
|
|
+ :on-error="afterIconUploadFail"
|
|
|
+ :on-exceed="fileLimite"
|
|
|
+ list-type="picture-card"
|
|
|
+ >
|
|
|
+ <i class="el-icon-plus"></i>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="分享链接" prop="share_url">
|
|
|
+ <el-input
|
|
|
+ v-model="modalFormData.share_url"
|
|
|
+ placeholder="请输入分享链接"
|
|
|
+ clearable
|
|
|
+ :style="{ width: '100%' }"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="排序" prop="order">
|
|
|
+ <el-input-number
|
|
|
+ v-model="modalFormData.order"
|
|
|
+ placeholder="排序"
|
|
|
+ :step="1"
|
|
|
+ step-strictly
|
|
|
+ >
|
|
|
+ </el-input-number>
|
|
|
+ </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>
|
|
|
+export default {
|
|
|
+ inheritAttrs: false,
|
|
|
+ components: {},
|
|
|
+ props: [],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ iconImgArr: [],
|
|
|
+ shareImgArr: [],
|
|
|
+ // 弹层表单
|
|
|
+ modalFormData: {
|
|
|
+ name: undefined,
|
|
|
+ desc: undefined,
|
|
|
+ icon: null,
|
|
|
+ status: 1,
|
|
|
+ share_title: undefined,
|
|
|
+ share_desc: undefined,
|
|
|
+ share_icon: null,
|
|
|
+ share_url: undefined,
|
|
|
+ order: 1
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请输入名称",
|
|
|
+ trigger: "blur"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ desc: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请输入描述",
|
|
|
+ trigger: "blur"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ share_title: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请输入分享标题",
|
|
|
+ trigger: "blur"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ share_desc: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请输入分享描述",
|
|
|
+ trigger: "blur"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ share_url: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请输入分享链接",
|
|
|
+ trigger: "blur"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ order: []
|
|
|
+ },
|
|
|
+ iconAction: "/upload_image",
|
|
|
+ iconfileList: [],
|
|
|
+ share_iconAction: "/upload_image",
|
|
|
+ share_iconfileList: [],
|
|
|
+ visible: false,
|
|
|
+ modalTitle: "新建圈子",
|
|
|
+
|
|
|
+ // 列表信息
|
|
|
+ table: [],
|
|
|
+ loading: false,
|
|
|
+
|
|
|
+ //分页
|
|
|
+ page: 1,
|
|
|
+ page_size: 10,
|
|
|
+ total: 0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {},
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ this.fetchData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async fetchData() {
|
|
|
+ this.loading = true;
|
|
|
+ try {
|
|
|
+ let res = await this.$post(
|
|
|
+ "/uapi/v1/m/dynamic/get_user_dynamic_type_list",
|
|
|
+ {
|
|
|
+ status: 0
|
|
|
+ }
|
|
|
+ );
|
|
|
+ this.loading = false;
|
|
|
+ if (res && res.status === 1) {
|
|
|
+ this.table = [...res.data.list];
|
|
|
+ this.total = res.data.total;
|
|
|
+ } else {
|
|
|
+ this.$message("请求异常");
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ this.table = [];
|
|
|
+ this.loading = false;
|
|
|
+ this.$message("请求异常");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ pageChange(val) {
|
|
|
+ this.page = val;
|
|
|
+ this.fetchData();
|
|
|
+ },
|
|
|
+ handleSizeChange(e) {
|
|
|
+ this.page_size = e;
|
|
|
+ this.fetchData();
|
|
|
+ },
|
|
|
+
|
|
|
+ onOpen() {},
|
|
|
+ onClose() {
|
|
|
+ this.$refs["modalForm"].resetFields();
|
|
|
+ this.visible = false;
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ // this.$emit('update:visible', false)
|
|
|
+ this.visible = false;
|
|
|
+ },
|
|
|
+ handelConfirm() {
|
|
|
+ this.$refs["modalForm"].validate(valid => {
|
|
|
+ if (!valid) return;
|
|
|
+
|
|
|
+ if(this.modalFormData.typeId){
|
|
|
+ this.editDynamic()
|
|
|
+ }else{
|
|
|
+ this.createdDynamic();
|
|
|
+ }
|
|
|
+
|
|
|
+ this.close();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ iconBeforeUpload(file) {
|
|
|
+ let isRightSize = file.size / 1024 / 1024 < 2;
|
|
|
+ if (!isRightSize) {
|
|
|
+ this.$message.error("文件大小超过 2MB");
|
|
|
+ }
|
|
|
+ return isRightSize;
|
|
|
+ },
|
|
|
+ share_iconBeforeUpload(file) {
|
|
|
+ let isRightSize = file.size / 1024 / 1024 < 2;
|
|
|
+ if (!isRightSize) {
|
|
|
+ this.$message.error("文件大小超过 2MB");
|
|
|
+ }
|
|
|
+ return isRightSize;
|
|
|
+ },
|
|
|
+
|
|
|
+ callCreateForm() {
|
|
|
+ // 重置表单数据
|
|
|
+ this.modalFormData = {
|
|
|
+ name: undefined,
|
|
|
+ desc: undefined,
|
|
|
+ icon: null,
|
|
|
+ status: 1,
|
|
|
+ share_title: undefined,
|
|
|
+ share_desc: undefined,
|
|
|
+ share_icon: null,
|
|
|
+ share_url: undefined,
|
|
|
+ order: 1
|
|
|
+ };
|
|
|
+ this.iconfileList = [];
|
|
|
+ this.share_iconfileList = [];
|
|
|
+ this.modalTitle = "新建圈子";
|
|
|
+ this.visible = true;
|
|
|
+ },
|
|
|
+ callEditForm(itemData) {
|
|
|
+ let {
|
|
|
+ typeId,
|
|
|
+ name,
|
|
|
+ desc,
|
|
|
+ icon,
|
|
|
+ status,
|
|
|
+ share_title,
|
|
|
+ share_desc,
|
|
|
+ share_icon,
|
|
|
+ share_url,
|
|
|
+ order
|
|
|
+ } = itemData;
|
|
|
+ this.modalFormData = {
|
|
|
+ typeId,
|
|
|
+ name,
|
|
|
+ desc,
|
|
|
+ icon,
|
|
|
+ status,
|
|
|
+ share_title,
|
|
|
+ share_desc,
|
|
|
+ share_icon,
|
|
|
+ share_url,
|
|
|
+ order
|
|
|
+ };
|
|
|
+
|
|
|
+ let iconInfo = {
|
|
|
+ name: icon,
|
|
|
+ url: icon
|
|
|
+ };
|
|
|
+ let shareInfo = {
|
|
|
+ name: share_icon,
|
|
|
+ url: share_icon
|
|
|
+ };
|
|
|
+ this.iconfileList = [iconInfo];
|
|
|
+ this.share_iconfileList = [shareInfo];
|
|
|
+
|
|
|
+ this.modalTitle = "编辑圈子";
|
|
|
+ this.visible = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ async createdDynamic() {
|
|
|
+ try {
|
|
|
+ let {
|
|
|
+ name,
|
|
|
+ desc,
|
|
|
+ icon,
|
|
|
+ status,
|
|
|
+ share_title,
|
|
|
+ share_desc,
|
|
|
+ share_icon,
|
|
|
+ share_url,
|
|
|
+ order
|
|
|
+ } = this.modalFormData;
|
|
|
+ let res = await this.$post("/uapi/v1/m/dynamic/add_user_dynamic_type", {
|
|
|
+ name,
|
|
|
+ desc,
|
|
|
+ icon,
|
|
|
+ status,
|
|
|
+ share_title,
|
|
|
+ share_desc,
|
|
|
+ share_icon,
|
|
|
+ share_url,
|
|
|
+ order
|
|
|
+ });
|
|
|
+ if (res && res.status === 1) {
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "创建成功!"
|
|
|
+ });
|
|
|
+ this.fetchData();
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ this.$message("请求异常");
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ async editDynamic() {
|
|
|
+ try {
|
|
|
+ let {
|
|
|
+ typeId,
|
|
|
+ name,
|
|
|
+ desc,
|
|
|
+ icon,
|
|
|
+ status,
|
|
|
+ share_title,
|
|
|
+ share_desc,
|
|
|
+ share_icon,
|
|
|
+ share_url,
|
|
|
+ order
|
|
|
+ } = this.modalFormData;
|
|
|
+ let res = await this.$post("/uapi/v1/m/dynamic/edit_user_dynamic_type", {
|
|
|
+ typeId,
|
|
|
+ name,
|
|
|
+ desc,
|
|
|
+ icon,
|
|
|
+ status,
|
|
|
+ share_title,
|
|
|
+ share_desc,
|
|
|
+ share_icon,
|
|
|
+ share_url,
|
|
|
+ order
|
|
|
+ });
|
|
|
+ if (res && res.status === 1) {
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "创建成功!"
|
|
|
+ });
|
|
|
+ this.fetchData();
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ this.$message("请求异常");
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ afterShareImgUploadSuccess(res, file, fileList) {
|
|
|
+ let info = {
|
|
|
+ name: file.name,
|
|
|
+ url: res.filename
|
|
|
+ };
|
|
|
+ this.share_iconfileList.push(info);
|
|
|
+ this.modalFormData.share_icon = res.filename;
|
|
|
+ },
|
|
|
+ // icon 上传成功
|
|
|
+ afterIconUploadSuccess(res, file, fileList) {
|
|
|
+ let info = {
|
|
|
+ name: file.name,
|
|
|
+ url: res.filename
|
|
|
+ };
|
|
|
+ this.iconfileList.push(info);
|
|
|
+ this.modalFormData.icon = res.filename;
|
|
|
+ },
|
|
|
+ // icon 上传失败
|
|
|
+ afterIconUploadFail(err, file, fileList) {
|
|
|
+ // console.log(file, fileList);
|
|
|
+ this.$message({
|
|
|
+ message: "图片上传失败,请重新操作",
|
|
|
+ type: "warning"
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fileLimite(files, fileList) {
|
|
|
+ this.$message({
|
|
|
+ message: "请先删除当前所选图片",
|
|
|
+ type: "warning"
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 设置圈子上架
|
|
|
+ async setDynamicPass(typeId) {
|
|
|
+ this.$post("/uapi/v1/m/dynamic/set_user_dynamic_type_status", {
|
|
|
+ status: 1,
|
|
|
+ typeId
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ if (res.status == 1) {
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "操作成功!"
|
|
|
+ });
|
|
|
+ this.fetchData();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: "info",
|
|
|
+ message: "操作失败"
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 设置圈子下架
|
|
|
+ setDynamicReject(typeId) {
|
|
|
+ this.$post("/uapi/v1/m/dynamic/set_user_dynamic_type_status", {
|
|
|
+ status: 2,
|
|
|
+ typeId
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ if (res.status == 1) {
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "操作成功!"
|
|
|
+ });
|
|
|
+ this.fetchData();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: "info",
|
|
|
+ message: "操作失败"
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|