addpublisher

src/views/notice/addNotice.vue

@@ -5,76 +5,103 @@
     </el-card>
     <div class="body">
       <div class="s-body">
-
-        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+        <el-form
+          :model="ruleForm"
+          :rules="rules"
+          ref="ruleForm"
+          label-width="100px"
+          class="demo-ruleForm"
+        >
           <el-form-item label="公告名称:  " prop="name">
             <el-input v-model="ruleForm.name"></el-input>
           </el-form-item>
 
-
           <el-form-item label="发布时间:  " required>
             <el-col>
               <el-form-item prop="date2">
-                <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
+                <el-time-picker
+                  placeholder="选择时间"
+                  v-model="ruleForm.date2"
+                  style="width: 100%"
+                ></el-time-picker>
               </el-form-item>
             </el-col>
           </el-form-item>
           <el-form-item label="公告内容:  " prop="name">
-            <mavon-editor ref="md" v-model="notice.noticeContent" style="height:calc(100vh - 260px)" />
-
-            <el-button type="danger" @click="dialogVisible = true " style='float:right'>发布公告</el-button>
-
-            <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
+            <mavon-editor
+              ref="md"
+              v-model="notice.noticeContent"
+              style="height: calc(100vh - 400px)"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              type="danger"
+              @click="dialogVisible = true"
+              style="float: right"
+              >发布公告</el-button
+            >
+
+            
+          </el-form-item>
+        </el-form>
+        <el-dialog
+              title="提示"
+              :visible.sync="dialogVisible"
+              width="20%"
+              :before-close="handleClose"
+            >
               <span>确认发布公告吗？</span>
               <span slot="footer" class="dialog-footer">
                 <el-button @click="dialogVisible = false">取 消</el-button>
-                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+                <el-button type="primary" @click="dialogVisible = false"
+                  >确 定</el-button
+                >
               </span>
             </el-dialog>
-          </el-form-item>
-        </el-form>
       </div>
     </div>
   </div>
 </template>
 
-
 <script>
 export default {
-  name: 'Addnotice',
+  name: "Addnotice",
 
   data() {
     return {
       ruleForm: {
-        name: '',
-        date2: '',
+        name: "",
+        date2: "",
       },
       notice: {
-        noticeContent: ""
+        noticeContent: "",
       },
       rules: {
-        name: [
-          { required: true, message: '请输入公告名称', trigger: 'blur' },
-
-        ],
+        name: [{ required: true, message: "请输入公告名称", trigger: "blur" }],
         date2: [
-          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
+          {
+            type: "date",
+            required: true,
+            message: "请选择时间",
+            trigger: "change",
+          },
         ],
       },
-      dialogVisible:false
-    }
+      dialogVisible: false,
+    };
   },
 
   methods: {
     goback() {
-      window.history.go(-1)
+      window.history.go(-1);
     },
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          alert('submit!');
+          alert("submit!");
         } else {
-          console.log('error submit!!');
+          console.log("error submit!!");
           return false;
         }
       });
@@ -83,27 +110,22 @@ export default {
       this.$refs[formName].resetFields();
     },
     handleClose(done) {
-        this.$confirm('确认关闭？')
-          .then(_ => {
-            done();
-          })
-          .catch(_ => {});
-      }
-    
-
-
-  }
-
-
-}
+      this.$confirm("确认关闭？")
+        .then((_) => {
+          done();
+        })
+        .catch((_) => {});
+    },
+  },
+};
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .body {
   margin: auto;
   width: 80%;
   border: solid 2px rgb(239, 231, 231);
-  margin-top: 50px;
+  margin-top: 16px;
   border-radius: 10px;
 }
 
@@ -111,6 +133,6 @@ export default {
   margin: 0 auto;
   width: 70%;
   /* background-color: pink; */
-  padding-top: 80px;
+  padding-top: 40px;
 }
-</style>
+</style>

src/views/publishers/addPublisher.vue

@@ -1,17 +1,107 @@
 <template>
   <div>
-    <el-form ref="form"  label-width="80px">
-      <el-form-item label="发行方名称">
-        <el-input ></el-input>
-      </el-form-item>
-      <el-form-item label="活动区域">
-        <el-select  placeholder="请选择活动区域">
-          <el-option label="区域一" value="shanghai"></el-option>
-          <el-option label="区域二" value="beijing"></el-option>
-        </el-select>
-      </el-form-item>
-
-      
-    </el-form>
+    <div class="addfrom">
+      <div class="addcenter">
+        <el-form
+          ref="form"
+          label-width="100px"
+          :style="{ border: '1px soild #ccc' }"
+          :model="publishForm"
+          :rules="rules"
+        >
+          <el-form-item label="发行方名称" prop="pname">
+            <el-input></el-input>
+          </el-form-item>
+
+          <el-form-item label="联系人" prop="aname">
+            <el-input></el-input>
+          </el-form-item>
+
+          <el-form-item label="联系电话" prop="tel">
+            <el-input></el-input>
+          </el-form-item>
+
+          <el-form-item label="电子邮箱" prop="email">
+            <el-input></el-input>
+          </el-form-item>
+
+          <el-form-item label="详细地址" prop="address">
+            <el-input></el-input>
+          </el-form-item>
+
+          <el-form-item label="上传头像" prop="avater">
+            <el-upload
+              :show-file-list="false"
+              :style="{
+                border: '1px dashed #d9d9d9',
+                borderRadius: '6px',
+                width: '178px',
+                height: '178px',
+              }"
+            >
+              <img v-if="imageUrl" :src="imageUrl" id="avatar" />
+              <i
+                v-else
+                class="el-icon-plus avatar-uploader-icon"
+                :style="{
+                  width: '178px',
+                  height: '178px',
+                  lineHeight: '178px',
+                  textAlign: 'center',
+                }"
+              ></i>
+            </el-upload>
+          </el-form-item>
+
+          <el-form-item label="备注" prop="info">
+            <el-input type="textarea" :rows="4"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary">提交</el-button>
+            <el-button>重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
   </div>
 </template>
+
+<script>
+export default {
+  name: "addPublisher",
+  data() {
+    return {
+      publishForm: {
+        pname: "",
+        aname: "",
+        tel: "",
+        email: "",
+        address: "",
+        avater: "",
+        info: "",
+      },
+
+      rules: {
+        pname: [
+          { required: true, message: "请输入发行方名称", trigger: "blur" },
+        ],
+      },
+    };
+  },
+};
+</script>
+
+<style>
+.addfrom {
+  margin: auto;
+  width: 70%;
+  border: solid 2px #fcf6f6;
+  margin-top: 40px;
+  border-radius: 4px;
+}
+.addcenter {
+  margin: auto;
+  width: 60%;
+  margin-top: 40px;
+}
+</style>