1

src/views/issuer/issuer2/index.vue

@@ -1,3 +1,196 @@
 <template>
-    
-</template>
+    <div>
+      <!-- card组件 -->
+      <el-card
+        class="announcementBox"
+        style="width: 700px; padding-top: 30px; padding-bottom: 30px"
+      >
+        <div class="content">
+          <!-- 表单组件 -->
+          <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"
+                placeholder="请输入发行方名称"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="联系人:" prop="user">
+              <el-input
+                v-model="ruleForm.user"
+                placeholder="请输入联系人"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="联系电话:" prop="phone">
+              <el-input
+                v-model="ruleForm.phone"
+                placeholder="请输入联系电话"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="电子邮箱:" prop="email">
+              <el-input
+                v-model="ruleForm.email"
+                placeholder="请输入电子邮箱"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="详细地址:" prop="address">
+              <el-input
+                v-model="ruleForm.address"
+                placeholder="请输入详细地址"
+              ></el-input>
+            </el-form-item>
+            <!-- 上传头像 -->
+            <el-form-item label="上传头像:" prop="avatar">
+              <el-upload
+                class="avatar-uploader"
+                action="#"
+                accept="image/*"
+                :show-file-list="false"
+                :http-request="handleUpload"
+              >
+                <img
+                  v-if="ruleForm.avatar"
+                  :src="ruleForm.avatar"
+                  class="avatar"
+                />
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
+            </el-form-item>
+            <el-form-item label="备注:" prop="remarks">
+              <el-input
+                type="textarea"
+                :rows="5"
+                placeholder="请输入备注"
+                v-model="ruleForm.remarks"
+              ></el-input>
+            </el-form-item>
+            <!-- 按钮 -->
+            <div class="button">
+              <el-form-item>
+                <el-button type="primary" @click="submitForm('ruleForm')">
+                  提交
+                </el-button>
+                <el-button @click="resetForm('ruleForm')">重置</el-button>
+              </el-form-item>
+            </div>
+          </el-form>
+        </div>
+      </el-card>
+    </div>
+  </template>
+  <script>
+  // 引入接口 修改到api文件夹对应的文件夹下
+  import { createIssuer, uploadAvatar } from "@/api/issuer/create";
+  
+  export default {
+    name: "IssuerCreate",
+    data() {
+      return {
+        // 表单数据
+        ruleForm: {
+          // 发行方名称
+          name: "",
+          // 联系人
+          user: "",
+          // 联系电话
+          phone: "",
+          // 电子邮箱
+          email: "",
+          // 详细地址
+          address: "",
+          // 头像
+          avatar: "",
+          // 备注
+          remarks: "",
+        },
+        // 表单校验规则
+        rules: {
+          // 发行方名称 校验规则 不能为空
+          name: [
+            { required: true, message: "请输入发行方名称", trigger: "blur" },
+          ],
+        },
+      };
+    },
+    methods: {
+      // 提交表单
+      submitForm(formName) {
+        // 校验表单
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            // 校验通过 调接口提交数据
+            createIssuer(this.ruleForm).then((res) => {
+              if (res.code === 200) {
+                // 如果返回状态码为200 提示添加成功 200为后端定义成功状态码
+                // 提示添加成功
+                this.$message({
+                  message: "添加成功",
+                  type: "success",
+                });
+                // 重置表单
+                this.resetForm(formName);
+                // 返回上一页 真实接口取消注释
+                // this.$router.back();
+              }
+            });
+          }
+        });
+      },
+      // 自定义上传头像 覆盖默认上传
+      handleUpload({ file }) {
+        // 创建formdata对象
+        const formData = new FormData();
+        // 将文件添加到formdata对象中
+        formData.append("file", file);
+        // 调用上传头像接口
+        uploadAvatar(formData).then((res) => {
+          if (res.code === 200) {
+            // 如果返回状态码为200 将返回的头像地址赋值给表单头像字段
+            this.ruleForm.avatar = res.data;
+          }
+        });
+      },
+      // 重置表单
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      },
+    },
+  };
+  </script>
+  
+  <style>
+  .announcementBox {
+    margin-top: 40px;
+    margin-left: 300px;
+  }
+  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409eff;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 150px;
+    height: 150px;
+    line-height: 150px;
+    text-align: center;
+  }
+  .avatar {
+    width: 150px;
+    height: 150px;
+    display: block;
+  }
+  </style>
+