banner新增页

src/components/service-list/service_list.vue

@@ -184,7 +184,7 @@ export default {
         name: "最高人气"
       },
       {
-        name: "最好好评"
+        name: "最好评价"
       }
     ],
     activeBtn: 0,

src/pages/message-management/banner/banner-list.vue

@@ -268,6 +268,7 @@ export default {
     },
     addNew() {
       console.log("新建模板");
+      this.$router.push('/message/banner_add')
     },
     editAction(item) {
       console.log(`编辑${item.name}`);

src/pages/message-management/banner/banner_add.vue

+<template>
+  <div class="apaas_detail_container">
+    <div class="apass_breadcrumb">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item :to="{ path: '/message' }">
+          {{ $t("lang.message") }}
+        </el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ path: '/message/banner' }">
+          {{ 'banner管理' }}
+        </el-breadcrumb-item>
+        <el-breadcrumb-item>
+          {{ pageName }}
+        </el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+
+    <div class="main_contaner banner_contaner">
+      <el-form
+        ref="detail_form"
+        class="detail_form"
+        label-position="top"
+        :model="detail"
+        :rules="detail_rules"
+      >
+        <el-form-item label="banner名称：" prop="name">
+          <el-input
+            v-model="detail.name"
+            placeholder="请输入banner名称"
+            :disabled="disabled"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item label="状态：" prop="state">
+          <el-select
+            v-model="detail.state"
+            placeholder="请选择状态"
+            :disabled="true"
+          >
+            <el-option
+              v-for="item in types"
+              :label="item.name"
+              :value="item.value"
+              :key="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="链接地址（选填）：" prop="url">
+          <el-input
+            v-model="detail.url"
+            placeholder="请输入链接地址"
+            :disabled="disabled"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item label="排序：" prop="rank">
+          <el-input
+            v-model="detail.rank"
+            placeholder="请输入排序"
+            :disabled="disabled"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item label="上架时间：" prop="up_time">
+          <el-date-picker
+            v-model="detail.up_time"
+            type="datetime"
+            :disabled="disabled"
+            placeholder="选择日期时间">
+          </el-date-picker>
+        </el-form-item>
+
+        <el-form-item label="下架时间：" prop="down_time">
+          <el-date-picker
+            v-model="detail.down_time"
+            type="datetime"
+            :disabled="disabled"
+            placeholder="选择日期时间">
+          </el-date-picker>
+        </el-form-item>
+
+        <el-form-item label="上传banner图片：" prop="fileList">
+          <upload-file
+            :multiple="false"
+            :max="1"
+            type="cropper"
+            :readOnly="false"
+            fit="fill"
+            :list="imgList"
+            @getNewList="getNewList"
+            ref="servicepic"
+            directory="manage"
+          ></upload-file>
+        </el-form-item>
+        
+      </el-form>
+
+      <div class="apaas_button detail_action">
+        <el-button
+          type="default"
+          @click="cancelAction"
+          :loading="submitLoading"
+        >
+          取消
+        </el-button>
+        <el-button
+          type="primary"
+          @click="primaryAction"
+          :loading="submitLoading"
+        >
+          确定
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import helper from "@/services/helper.js";
+import uploadFile from "@/components/general/upload_file";
+export default {
+    components:{
+        uploadFile
+    },
+  data: () => ({
+    pageType: 0, // 0：新增，1：编辑，2：详情
+    detail: {
+      name: "",
+      state: "",
+      url: "",
+      rank:"",
+      up_time:"",
+      down_time:"",
+      fileList:'',
+    },
+    imgList: [],
+    detail_rules: {
+      name: [
+        {
+          required: true,
+          message: "请输入消息模板名称",
+          trigger: "blur",
+        },
+        {
+          max: 16,
+          message: "长度小于16个字符",
+          trigger: "blur",
+        },
+      ],
+      tpl_type: [
+        {
+          required: true,
+          message: "请选择模板类型",
+          trigger: "blur",
+        },
+      ],
+      content: [
+        {
+          required: true,
+          message: "请输入消息详情，最多可以输入500字。",
+          trigger: "blur",
+        },
+      ],
+    },
+    types: [
+      {
+        name: "服务推送",
+        value: 1,
+      },
+      {
+        name: "平台维护",
+        value: 2,
+      },
+      {
+        name: "版本更新",
+        value: 3,
+      },
+      {
+        name: "自动消息",
+        value: 4,
+      },
+    ],
+    submitLoading: false,
+  }),
+  computed: {
+    pageName() {
+      return ["新增", "编辑", "详情"][this.pageType];
+    },
+    disabled() {
+      return this.pageType === 2;
+    },
+  },
+  created() {
+    if (this.$route.name === "banner_edit") {
+      this.pageType = 1;
+    } else if (this.$route.name === "banner_detail") {
+      this.pageType = 2;
+    }
+
+    if (this.pageType !== 0) {
+      this.getDetail();
+    }
+  },
+  methods: {
+    getNewList(val) {
+      this.detail.fileList = val[0].url;
+      console.log(this.detail.fileList);
+    },
+    getDetail() {
+      this.$http
+        .get("/apaas/service/v3/msg/manage/tpl/info", {
+          params: {
+            id: this.$route.params.id,
+          },
+        })
+        .then(({ data }) => {
+          if (data.success == 1) {
+            let detail = data.data;
+
+            this.detail.name = detail.name;
+            this.detail.tpl_type = detail.tpl_type;
+            this.detail.content = detail.content;
+          } else {
+            this.$message({
+              message: data.errMsg || "获取详情失败",
+              type: "warning",
+            });
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+
+          this.$message({
+            message: "获取详情失败",
+            type: "warning",
+          });
+        });
+    },
+    addTemplate() {
+      this.$http
+        .post("/apaas/service/v3/msg/manage/tpl/add", this.detail)
+        .then(({ data }) => {
+          if (data.success == 1) {
+            this.$message({
+              message: "新增消息模板成功",
+              type: "success",
+            });
+
+            setTimeout(() => {
+              this.$router.push("/message/message_template");
+            }, 500);
+          } else {
+            this.$message({
+              message: data.errMsg || "新增消息模板失败",
+              type: "warning",
+            });
+          }
+
+          this.submitLoading = true;
+        })
+        .catch((error) => {
+          console.log(error);
+
+          this.$message({
+            message: "新增消息模板失败",
+            type: "warning",
+          });
+
+          this.submitLoading = true;
+        });
+    },
+    editTemplate() {
+      this.$http
+        .post("/apaas/service/v3/msg/manage/tpl/update", {
+          id: this.$route.params.id,
+          ...this.detail,
+        })
+        .then(({ data }) => {
+          if (data.success == 1) {
+            this.$message({
+              message: "编辑消息模板成功",
+              type: "success",
+            });
+
+            setTimeout(() => {
+              this.$router.push("/message/message_template");
+            }, 200);
+          } else {
+            this.$message({
+              message: data.errMsg || "编辑消息模板失败",
+              type: "warning",
+            });
+          }
+
+          this.submitLoading = true;
+        })
+        .catch((error) => {
+          console.log(error);
+
+          this.$message({
+            message: "编辑消息模板失败",
+            type: "warning",
+          });
+
+          this.submitLoading = true;
+        });
+    },
+    cancelAction() {
+      this.$router.push("/message/message_template");
+    },
+    primaryAction() {
+      if (this.pageType === 2) {
+        this.$router.push("/message/message_template");
+      } else {
+        this.$refs.detail_form.validate((valid) => {
+          if (valid) {
+            this.submitLoading = true;
+
+            this.pageType === 1 ? this.editTemplate() : this.addTemplate();
+          } else {
+            return false;
+          }
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style>
+.apaas_detail_container .banner_contaner .el-input__inner{
+    width: 970px;
+}
+</style>

src/router/index.js

@@ -409,6 +409,21 @@ export default new Router({
               name: "banner",
               component: () => import("@/pages/message-management/banner/banner-list"),
             },
+            {
+              path: "/message/banner_add", // benner新增
+              name: "banner_add",
+              component: () => import("@/pages/message-management/banner/banner_add"),
+            },
+            {
+              path: "/message/banner_edit", // benner编辑
+              name: "banner_edit",
+              component: () => import("@/pages/message-management/banner/banner_add"),
+            },
+            {
+              path: "/message/banner_detail", // benner详情
+              name: "banner_detail",
+              component: () => import("@/pages/message-management/banner/banner_add"),
+            },
             {
               path: "/message/message_template", // 消息模板列表
               name: "message_template",