|
- <template>
- <div class="login">
- <div class="top_div"></div>
- <div class="login_ct">
- <el-alert
- title="严禁发布低价欺诈以及图片虚假的信息诱导买家,价格严重偏离正常水平的及图片虚假的信息将被删除"
- type="warning"
- show-icon
- :closable="false">
- </el-alert>
- <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" size="small">
- <p>基础信息</p>
- <el-form-item label="标题" prop="name">
- <el-input v-model="ruleForm.name" placeholder="请输入标题"></el-input>
- </el-form-item>
- <el-form-item label="类别" prop="category">
- <el-select v-model="ruleForm.category" placeholder="请选择活动区域">
- <el-option v-for="(item, index) in categoryList" :key="index" :label="item.label" :value="item.value"></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="上传图片" prop="fileList">
- <el-upload
- class="upload-demo"
- ref="upload"
- action="#"
- :show-file-list="true"
- :on-change="fileChange"
- :file-list="ruleForm.fileList"
- :on-remove="fileRemove"
- accept="image/*"
- :auto-upload="false"
- >
- <el-button type="primary">请选择图片</el-button>
- </el-upload>
- </el-form-item>
- <el-form-item label="信息详情" prop="detail">
- <el-input type="textarea" v-model="ruleForm.detail" placeholder="请输入信息详情介绍"></el-input>
- </el-form-item>
- <p>联系方式</p>
- <el-form-item label="联系电话" prop="phone">
- <el-input v-model="ruleForm.phone" placeholder="请输入联系电话"></el-input>
- </el-form-item>
- <el-form-item label="联系人" prop="contact">
- <el-input v-model="ruleForm.contact" placeholder="请输入联系人"></el-input>
- </el-form-item>
- <el-form-item label="QQ">
- <el-input v-model="ruleForm.qq" placeholder="请输入QQ"></el-input>
- </el-form-item>
- <el-form-item label="E-mail">
- <el-input v-model="ruleForm.email" placeholder="请输入E-mail"></el-input>
- </el-form-item>
- </el-form>
- <div class="login_btn">
- <el-button class="right" size="small" type="primary" @click="login('ruleForm')">发布信息</el-button>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- data() {
- var checkIdCard = (rule, value, cb) => {
- if (value.length > 0) {
- return cb();
- }
- cb(new Error("请选择图片"));
- };
- return {
- ruleForm: {
- name: '',
- category: 1,
- detail: '',
- phone: '',
- contact: '',
- qq: '',
- email: '',
- imageUrl: '',
- fileList: [],
- },
- rules: {
- name: [
- { required: true, message: '请输入标题', trigger: 'blur' }
- ],
- category: [
- { required: true, message: '请选择类别', trigger: 'change' }
- ],
- detail: [
- { required: true, message: '请输入信息详情', trigger: 'blur' }
- ],
- phone: [
- { required: true, message: '请输入联系人电话', trigger: 'blur' }
- ],
- contact: [
- { required: true, message: '请输入联系人', trigger: 'blur' }
- ],
- fileList: [
- { required: true, message: "请选择图片", trigger: ['blur', 'change'] },
- { validator: checkIdCard, trigger: ['blur', 'change'] }
- ]
- },
- categoryList: [
- {
- label: '生活服务',
- value: 1
- },
- {
- label: '同城活动',
- value: 2
- },
- {
- label: '商务服务',
- value: 3
- },
- {
- label: '宠物市场',
- value: 4
- },
- {
- label: '行业市场',
- value: 5
- },
- {
- label: '教育培训',
- value: 6
- },
- {
- label: '跳蚤市场',
- value: 7
- },
- {
- label: '车辆相关',
- value: 8
- },
- {
- label: '房产出售',
- value: 9
- },
- {
- label: '餐饮美食',
- value: 10
- },
- {
- label: '票务卡券',
- value: 11
- },
- {
- label: '宠物市场',
- value: 12
- }
- ]
- };
- },
- methods: {
- login(formName) {
- this.$refs[formName].validate((valid) => {
- if (valid) {
- this.$message({
- message: '人工审核中',
- type: 'success'
- });
- } else {
- console.log('error submit!!');
- return false;
- }
- });
- },
- goPage(path) {
- if(path) {
- this.$router.push(path);
- }
- },
- resetForm(formName) {
- this.$refs[formName].resetFields();
- },
- /* 只保留最后一次上传的文件 */
- fileChange (file, fileList) {
- if (fileList.length > 0) {
- this.ruleForm.fileList = [fileList[fileList.length - 1]]
- }
- },
- fileRemove(file) {
- this.ruleForm.fileList = []
- }
- }
- }
- </script>
- <style scoped lang="scss">
- .login {
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- .top_div{
- height: 50%;
- width: 100%;
- background: #008ead;
- }
- .login_ct{
- width: 600px;
- margin: -100px auto 0;
- background: #fff;
- padding: 40px 0 0;
- border: 1px solid #e7e7e7;
- position: relative;
- .el-form{
- padding: 0 40px;
- .code{
- width: 90%;
- float: right;
- height: 30px;
- vertical-align: middle;
- border-radius: 5px;
- border: 1px solid #d3d3d3;
- background: #F2FBFE;
- text-align: center;
- line-height: 30px;
- font-weight: bold;
- }
- .login_text{
- font-size: 12px;
- line-height: 20px;
- display: inline-block;
- a{
- color: #409EFF;
- font-size: 12px;
- cursor: pointer;
- }
- }
- }
- .login_btn {
- height: 50px;
- margin-top: 40px;
- border-top: 1px solid #e7e7e7;
- line-height: 50px;
- padding: 10px 40px 0;
-
- .right{
- float: right;
- button{
- margin: 0 10px;
- }
- }
- }
- }
- }
- </style>
|