add:信息编辑页面

src/pages/Activity/releaseProduc/components/addProduc.vue

+<template>
+  <div class="addProduc">
+      添加商品
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/pages/Activity/releaseProduc/components/infoEditing.vue

+<template>
+  <div class="infoEditing">
+    <el-form ref="infoEditForm" :model="infoEditForm" label-width="80px">
+      <el-form-item label="标题：">
+        <el-input v-model="infoEditForm.title"></el-input>
+      </el-form-item>
+      <el-form-item label="介绍：">
+        <el-input type="textarea" v-model="infoEditForm.desc"></el-input>
+      </el-form-item>
+        <el-form-item label="图片：">
+        <el-upload action="#" list-type="picture-card" :auto-upload="false">
+          <template #default>
+            <i class="el-icon-plus"></i>
+          </template>
+          <template #file="{ file }">
+            <div>
+              <img
+                class="el-upload-list__item-thumbnail"
+                :src="file.url"
+                alt=""
+              />
+              <span class="el-upload-list__item-actions">
+                <span
+                  class="el-upload-list__item-preview"
+                  @click="handlePictureCardPreview(file)"
+                >
+                  <i class="el-icon-zoom-in"></i>
+                </span>
+                <span
+                  v-if="!disabled"
+                  class="el-upload-list__item-delete"
+                  @click="handleDownload(file)"
+                >
+                  <i class="el-icon-download"></i>
+                </span>
+                <span
+                  v-if="!disabled"
+                  class="el-upload-list__item-delete"
+                  @click="handleRemove(file)"
+                >
+                  <i class="el-icon-delete"></i>
+                </span>
+              </span>
+            </div>
+          </template>
+        </el-upload>
+        <el-dialog v-model="dialogVisible">
+          <img width="100%" :src="dialogImageUrl" alt="" />
+        </el-dialog>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      infoEditForm: {
+        title: "",
+        desc: "",
+      },
+      dialogImageUrl: "",
+      dialogVisible: false,
+      disabled: false,
+    };
+  },
+  methods: {
+    handleRemove(file) {
+      console.log(file);
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    handleDownload(file) {
+      console.log(file);
+    },
+  },
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file

src/pages/Activity/releaseProduc/components/spellOrderSet.vue

+<template>
+  <div class="spellOrderSet">
+      拼单设置
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/pages/Activity/releaseProduc/index.vue

+<template>
+  <div class="releaseProduc">
+    <h4 class="headTitle">发布活动</h4>
+    <el-steps
+      class="steps"
+      :active="active"
+      finish-status="success"
+      space="30%"
+      align-center="true"
+    >
+      <el-step title="信息编辑"></el-step>
+      <el-step title="添加商品"></el-step>
+      <el-step title="拼单设置"></el-step>
+    </el-steps>
+    <div class="content">
+      <infoEditing v-if="active === 1" />
+      <addProduc v-else-if="active === 2" />
+      <spellOrderSet v-else />
+    </div>
+    <div class="btn">
+      <el-button style="margin-top: 12px" @click="prev" v-show="active >= 2"
+        >上一步</el-button
+      >
+      <el-button style="margin-top: 12px" v-show="active < 3" @click="next"
+        >下一步</el-button
+      >
+      <el-button style="margin-top: 12px" v-show="active == 1" @click="cancel"
+        >取消</el-button
+      >
+      <el-button
+        style="margin-top: 12px"
+        v-show="active == 3"
+        @click="confirmRelease"
+        >确认发布</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import infoEditing from "./components/infoEditing.vue";
+import addProduc from "./components/addProduc.vue";
+import spellOrderSet from "./components/spellOrderSet.vue";
+export default {
+  components: {
+    infoEditing,
+    addProduc,
+    spellOrderSet,
+  },
+  data() {
+    return {
+      active: 1,
+    };
+  },
+
+  methods: {
+    // 上一步
+    prev() {
+      if (this.active-- <= 0) this.active = 0;
+    },
+    // 下一步
+    next() {
+      if (this.active++ > 2) this.active = 0;
+    },
+    // 取消
+    cancel() {},
+    // 确认发布
+    confirmRelease() {},
+  },
+};
+</script>
+
+<style scope>
+.releaseProduc {
+  padding: 30px;
+  box-sizing: border-box;
+}
+.headTitle {
+  font-size: 18px;
+  margin-bottom:30px;
+}
+.steps {
+  display: flex;
+  justify-content: center;
+}
+.steps /deep/ .el-step__icon {
+  width: 50px;
+  height: 50px;
+}
+.steps /deep/ .el-step.is-horizontal .el-step__line {
+  top: 25px;
+}
+.content,.btn{
+  width: 64%;
+  margin: 20px auto;
+}
+.btn {
+  text-align: center;
+}
+</style>
\ No newline at end of file

src/router/Activity/index.js

@@ -11,6 +11,13 @@
       name: "ManageList",
       component: () => import(/* webpackChunkName: "activity" */ "@/pages/Activity/Manage")
     },
+
+    // 发布拼单
+    {
+      path: "/op/activity/releaseProduc",
+      name: "releaseProduc",
+      component: () => import(/* webpackChunkName: "activity" */ "@/pages/Activity/releaseProduc")
+    },
    
   ];