Просмотр исходного кода

feature:添加后台管理界面的微信轮播图功能

zeng.chen 5 месяцев назад
Родитель
Сommit
f1d6583110

+ 6 - 4
src/api/ohplay/operation.js

@@ -1,7 +1,7 @@
 import request from '@/utils/request'
 
 // 广告位 推荐位 快捷位上传
-export function create(data){
+export function create(data) {
   return request({
     url: `/house/tAdminAdvertising/add`,
     method: 'post',
@@ -10,16 +10,18 @@ export function create(data){
 }
 
 // 运营管理列表
-export function list(data){
-  return request({
+export function list(data) {
+  var res = request({
     url: `/house/tAdminAdvertising/list`,
     method: 'post',
     data
   })
+  console.log("运营管理列表", res)
+  return res;
 }
 
 // 删除
-export function remove(ids){
+export function remove(ids) {
   return request({
     url: `/house/tAdminAdvertising/remove/${ids}`,
     method: 'delete',

+ 63 - 0
src/api/operation/wxbanner.js

@@ -0,0 +1,63 @@
+import request from '@/utils/request'
+
+
+// 获取列表
+export function list(data) {
+    return request({
+        url: `/miniBannerConfig/page`,
+        method: 'get',
+        data,
+        // headers: {
+        //   'Content-Type': 'multipart/form-data'
+        // }
+    })
+}
+
+// status 2:删除
+export function deletes(id) {
+    return request({
+        url: `/miniBannerConfig/remove`,
+        method: 'post',
+        data: {
+            "id": id,
+        }
+    })
+}
+// status 0上架,1下架
+export function upAnddown(id, status) {
+    return request({
+        url: `/miniBannerConfig/updateStatus`,
+        method: 'post',
+        data: {
+            "id": id,
+            "status": status,
+        }
+    })
+}
+
+// 详情
+export function detail(id) {
+    return request({
+        url: `/miniBannerConfig/get?id=` + id,
+        method: 'get'
+    })
+}
+
+// 新增 
+export function add(data) {
+    return request({
+        url: `/miniBannerConfig/save`,
+        method: 'post',
+        data
+    })
+}
+
+//  编辑
+export function edit(data) {
+    return request({
+        url: `/miniBannerConfig/update`,
+        method: 'post',
+        data
+    })
+}
+

Разница между файлами не показана из-за своего большого размера
+ 769 - 753
src/router/index.js


+ 174 - 0
src/views/operation/wxbanner/detail.vue

@@ -0,0 +1,174 @@
+<template>
+    <div class="app-container">
+        <el-form :model="form" ref="form" :rules="rules" label-width="100px" :disabled="disabled">
+            <el-form-item label="跳转方式:" prop="forwardType">
+                <el-select v-model="form.forwardType" placeholder="请选择跳转方式">
+                    <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
+                        :value="Number(item.value)" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="图片:" prop="icon">
+                <Upload list-type="picture-card" :url="form.pic" @upload="upload" :disabled="disabled" />
+            </el-form-item>
+
+            <el-table-column label="标签排序" prop="sort" align="center" />
+
+            <el-form-item label="当前状态:" prop="cascader">
+                <el-cascader style="width: 100%" v-model="form.cascader" :options="mapOptions" placeholder="请选择方式"
+                    :props="{
+                        value: 'id',
+                        label: 'status',
+                        children: 'statusList',
+                        checkStrictly: true,
+                    }" />
+            </el-form-item>
+
+        </el-form>
+        <div class="form-btn">
+            <el-button @click="cancel">取消</el-button>
+            <el-button v-if="!disabled" type="primary" @click="getSubmit">确定</el-button>
+        </div>
+    </div>
+</template>
+
+<script>
+import { detail, submit } from "@/api/operation/wxbanner";
+import { mapMixin } from "@/mixin/index";
+export default {
+    mixins: [mapMixin],
+    data() {
+        return {
+            // 表单
+            form: {
+                id: "",
+                pic: "",
+                name: "",
+                status: 0,
+                sort: 0,
+                forwardUrl: "",
+                forwardType: 0,
+                updateTime: 0,
+                updateTimeStr: "",
+                createTime: 0,
+                createTimeStr: ""
+            },
+            // 校验
+            rules: {
+                forwardType: [{
+                    required: true, message: '请选择跳转方式', trigger: 'change'
+                }],
+                icon: [
+                    {
+                        required: true,
+                        message: "请上传轮播图的图片",
+                        trigger: "change",
+                    },
+                ],
+
+                status: [
+                    {
+                        required: true,
+                        message: "请选择状态",
+                        trigger: "blur",
+                    },
+                ],
+                sort: [
+                    {
+                        required: true,
+                        message: "请输入序号",
+                        trigger: "blur",
+                    },
+                ],
+
+            },
+            // 跳转类型
+            typeOptions: [{
+                value: 0,
+                label: '指定页面'
+            }, {
+                value: 1,
+                label: '指定URL'
+            }],
+            // 状态 0-上架  1-下架  2-删除
+            statusList: [{
+                value: 0,
+                label: '上架'
+            }, {
+                value: 1,
+                label: '下架'
+            }],
+            // 只读
+            disabled: false,
+        };
+    },
+    mounted() {
+        if (this.$route.query.id) {
+            this.form.id = this.$route.query.id;
+            this.form.status = this.$route.query.status;
+            this.disabled = Boolean(this.$route.query.boolean);
+
+            this.getDetail();
+        }
+    },
+    methods: {
+        // 详情
+        getDetail() {
+            detail(this.$route.query.id).then((res) => {
+                if (res.code === 0) {
+                    console.log(res.data);
+                    // this.form = res.data;
+                    // this.$set(this.form, "cascader", [res.data.province]);
+                    // if (res.data.city) {
+                    //     this.form.cascader[1] = res.data.city;
+                    // }
+                    // if (res.data.area) {
+                    //     this.form.cascader[2] = res.data.area;
+                    // }
+                }
+            });
+        },
+
+        // 上传
+        upload(e) {
+            this.form.icon = e.file;
+        },
+
+        cancel() {
+            this.$tab.closeOpenPage("/operation/map");
+        },
+
+        // 提交
+        getSubmit() {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    this.form.province = this.form.cascader[0];
+                    this.form.city = this.form.cascader[1] ? this.form.cascader[1] : null;
+                    this.form.area = this.form.cascader[2] ? this.form.cascader[2] : null;
+                    submit(this.form).then((res) => {
+                        if (res.code === 0) {
+                            this.$message.success("提交成功!");
+                            this.cancel();
+                        }
+                    });
+                } else {
+                    return false;
+                }
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-form {
+    .el-form-item {
+        width: 500px;
+    }
+}
+
+::v-deep .el-dialog__wrapper {
+    .el-dialog__body {
+        padding: 0;
+    }
+}
+</style>

+ 114 - 0
src/views/operation/wxbanner/index.vue

@@ -0,0 +1,114 @@
+<!-- 运营管理 微信轮播图banner -->
+<template>
+    <div class="app-container">
+        <!-- 搜索 -->
+        <el-form inline size="mini">
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-plus" plain @click="getDetail(false, 0, 0)"
+                    v-hasPermi="['operation:wxbanner:add']">新增</el-button>
+            </el-form-item>
+        </el-form>
+        <!-- 列表 -->
+        <el-table :data="tableData" v-loading="loading">
+            <el-table-column label="序号" align="center" type="index" />
+            <el-table-column label="跳转方式" align="center" prop="name" show-overflow-tooltip />
+
+            <el-table-column label="当前状态" prop="categoryName" align="center" />
+
+            <el-table-column label="更新时间" align="center" prop="updateTimeStr" />
+            <el-table-column label="创建时间" align="center" prop="createTimeStr" />
+            <el-table-column label="操作" align="center">
+                <template slot-scope="scope">
+                    <el-button type="text" @click="getDetail(true, 1, scope.row.id)"
+                        v-hasPermi="['operation:wxbannber:check']">查看</el-button>
+
+                    <span style="margin: 0 10px">
+                        <el-button type="text" @click="getDetail(false, 2, scope.row.id)"
+                            v-hasPermi="['operation:wxbannber:edit']">编辑</el-button>
+
+                        <el-button type="delete" @click="getDelete(scope.row)"
+                            v-hasPermi="['operation:wxbannber:delete']">删除</el-button>
+                    </span>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <pagination v-show="total > 0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
+            @pagination="getList" />
+    </div>
+</template>
+
+<script>
+import { deletes, list } from "@/api/operation/wxbanner";
+import { currentMixin, devMixin, disabledMixin } from "@/mixin/index";
+import { dialogCallBack } from "@/utils/DialogUtil";
+export default {
+    mixins: [devMixin, currentMixin, disabledMixin],
+    data() {
+        return {
+            // 遮罩层
+            loading: false,
+            // 表单
+            form: {
+                pageNum: 1,
+                pageSize: 10,
+            },
+            // 总数据
+            total: 0,
+            // 列表
+            tableData: [],
+        };
+    },
+
+    watch: {},
+    mounted() {
+        this.getList();
+    },
+
+    methods: {
+        addData() { },
+        // 列表
+        getList() {
+            this.loading = true;
+            list(this.form).then((res) => {
+                if (res.code === 0) {
+                    this.tableData = res.data.records;
+                    this.total = res.data.total;
+                    this.loading = false;
+                }
+            });
+        },
+
+        // 轮播图详情
+        getDetail(boolean, state, id) {
+            this.$router.push({
+                path: `/operation/wxbanner/detail`,
+                query: {
+                    id: id,
+                    boolean: boolean,
+                    state: state,
+                },
+            });
+        },
+
+        // 删除
+        getDelete(row) {
+            var that = this;
+            dialogCallBack(that, function () {
+                that
+                    .$confirm(`是否删除${row.name}?`, "提示:", {
+                        type: "warning",
+                    })
+                    .then(() => {
+                        deletes(row.id, 2).then((res) => {
+                            if (res.code === 0) {
+                                that.$message.success("删除成功!");
+                                that.getList();
+                            }
+                        });
+                    });
+            });
+        },
+    },
+};
+</script>