冲刺记录7

完成对举报页面的绘制

<template>
  <div class="form-container">
    <h2 class="center">匿名举报页面</h2>
    <div class="flex-container">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <div class="form-item">
          <label class="form-label">时间：</label>
          <el-date-picker
              v-model="time"
              type="datetime"
              placeholder="选择时间"
              style="margin-bottom: 20px;"
          ></el-date-picker>
        </div>
        <div class="form-item">
          <label class="form-label">地点：</label>
          <el-input
              v-model="location"
              placeholder="请输入地点"
              style="margin-bottom: 20px;"
          ></el-input>
        </div>
        <div class="form-item">
          <label class="form-label">霸凌者信息：</label>
          <el-input
              v-model="bullyInfo"
              placeholder="霸凌者信息(选填)"
              style="margin-bottom: 20px;"
          ></el-input>
        </div>
        <div class="form-item">
          <label class="form-label">被霸凌者信息：</label>
          <el-input
              v-model="victimInfo"
              placeholder="被霸凌者信息(选填)"
              style="margin-bottom: 20px;"
          ></el-input>
        </div>
        <div class="form-item">
          <label class="form-label">目睹事件经过：</label>
          <el-input
              type="textarea"
              v-model="description"
              placeholder="请输入事件描述"
              style="margin-bottom: 20px;"
          ></el-input>
        </div>
        <div class="form-item">
          <label class="form-label">其他重要信息：</label>
          <el-input
              type="textarea"
              v-model="otherInfo"
              placeholder="其他重要信息"
              style="margin-bottom: 20px;"
          ></el-input>
        </div>

        <div class="form-item">
          <label class="form-label">上传照片或视频：</label>
          <el-upload
              action="#"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              style="margin-bottom: 20px;"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>

        <el-button type="primary" @click="submitForm">立即举报</el-button>
      </el-form>
      <el-dialog :title="'确认提交'" :visible.sync="dialogVisible">
        <span>是否确认提交举报信息？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmSubmit">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { ElForm, ElDatePicker, ElInput, ElUpload, ElButton, ElDialog,ElMessage } from 'element-plus';

const time = ref('');
const location = ref('');
const description = ref('');
const bullyInfo = ref('');
const victimInfo = ref('');
const otherInfo = ref('');

const form = ref({
  time,
  location,
  description,
  bullyInfo,
  victimInfo,
  otherInfo
});

const rules = ref({
  time: [{ required: true, message: '请选择时间', trigger: 'change' }],
  location: [{ required: true, message: '请输入地点', trigger: 'blur' }],
  description: [{ required: true, message: '请输入事件描述', trigger: 'blur' }]
});

const dialogVisible = ref(false);

const submitForm = () => {
  dialogVisible.value = true;
};

const confirmSubmit = () => {
  // 在此处处理提交逻辑
  ElMessage({
    message: '举报信息提交成功',
    type: 'success',
  });
  dialogVisible.value = false;
};

const handlePictureCardPreview = (file: any) => {
  // 使用浏览器自带的窗口来预览图片
  const url = URL.createObjectURL(file.raw);
  window.open(url);
};

const handleRemove = (file: any) => {
  // 可在此处处理移除图片的逻辑
  ElMessage({
    message: '图片已移除',
    type: 'info',
  });
};
</script>

<style scoped>
.dialog-footer {
  text-align: center;
  padding: 10px 0;
}

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

.form-container {
  max-width: 800px;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
  margin: auto;
}

.center {
  text-align: center;
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  justify-content: start; /* 确保子项从盒子的开始处对齐 */
}

.form-label,
.el-input, .el-date-picker, .el-upload { /* 新增样式使输入框和选择框宽度一致 */
  flex: 3  /* 设置子元素占据可用空间 */
}

.form-label {
  min-width: 160px;  /* 保持标签宽度统一 */
  margin-right: 5px; /* 为了美观，给标签和输入框之间增加一些间隔 */
  font-weight: bold;
}

/* 优化布局，确保上传区域也左对齐 */
.el-upload {
  display: flex;
  justify-content: start; /* 覆盖默认样式，使上传控件左对齐 */
}
</style>