jucai/public/themes/default/views/app/content/buyhouse/list.blade.php

@extends('module.layouts.content')

@push('meta')

@endpush

@push('css')
    <link href="{{ theme_asset('app/css/common.css') }}" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{{theme_asset('app/css/elementui.min.css')}}">
    <style>
        .header_image{
            display:block;
            width:100%;
        }

        .house_title{
            font-size:26px;
            text-align:center;
            margin-top:20px;
            color:#333333;
        }

        .content_box{
            width:1200px;
            box-sizing:border-box;
            margin:0 auto;
        }

        .table_box{
            margin-top:20px;
        }

        .table_box .header_line{
            background:#46afc7;
            width:100%;
            height:15px;
            border-top:1px solid #1a8199;
            margin-top:20px;
        }
    </style>
    <style>
        .table_form table, .table_form table tr th, .table_form table tr td{
            border:1px solid #ccc;
            padding:0 7px;
            box-sizing:border-box;
        }

        .table_form table{
            width:100%;
            min-height:25px;
            line-height:25px;
            text-align:center;
            border-collapse:collapse;
            padding:2px;
        }

        .el-form-item{
            margin-bottom:0;
        }

        .require{
            color:#f56c6c;
        }

        .avatar-uploader{
            padding:15px;
        }

        .avatar-uploader .el-upload{
            border:1px dashed #d9d9d9;
            border-radius:6px;
            cursor:pointer;
            position:relative;
            overflow:hidden;
            display:inline-block;
            vertical-align:middle;
        }

        .avatar-uploader .el-upload:hover{
            border-color:#409EFF;
        }

        .avatar-uploader-icon{
            font-size:28px;
            color:#8c939d;
            width:178px;
            height:178px;
            line-height:178px;
            text-align:center;
        }

        .avatar{
            width:178px;
            height:178px;
            display:block;
        }

        .ticket{
            border:3px solid #000;
            padding:10px;
        }

        .ticket h2{
            text-align:center;
            font:normal 20px/40px "microsoft yahei";
        }

        .ticket h3{
            text-align:center;
            font:normal 24px/30px "microsoft yahei";
        }

        .ex_rule{
            margin-top:20px;
        }

        .ex_rule h4{
            font-size:20px;
            line-height:50px;
        }

        .ex_rule p{
            text-indent:30px;
            line-height:25px;
        }

        .ticket .item{
            line-height:30px;
        }
    </style>
@endpush

@push('js')

@endpush

@section('content')
    <div id="app">
        <img src="{{ theme_asset('app/images/buyhouse/header.jpg') }}" class="header_image">
        <h1 class="house_title">申报内容</h1>

        {{--申报内容--}}
        <div class="content_box table_box">
            <div class="header_line"></div>
            <el-table
                    :data="list"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="ID"
                        width="80">
                </el-table-column>
                <el-table-column
                        label="申报状态"
                        width="100">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.status_tag" effect="dark" size="mini">
                            @{{ scope.row.status_text }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="项目"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="declare_time_text"
                        label="申报时间"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址">
                </el-table-column>
                <el-table-column
                        prop="apply_time"
                        label="报名时间"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="describe"
                        label="项目介绍">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="120">
                    <template slot-scope="scope">
                        <el-button @click="dialogVisible = true" type="text" size="small">查看项目介绍</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
                title="项目介绍"
                :visible.sync="dialogVisible"
                width="30%">
            <span v-html="list[0].content"></span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>

        {{--审核状态--}}
        @if($check)
            <el-alert
                    title="{{$check['status_text']}}"
                    type="{{$check['type']}}"
                    description="{{$check['comment']}}"
                    style="margin:20px auto;width:1200px;">
            </el-alert>
        @endif

        {{--表单--}}
        <div style="margin:0 auto;width:1200px;" class="table_form">
            <el-form :model="user" ref="userForm" :status-icon="true" :show-message="false" :rules="rules"
                     :disabled="formDisable">
                {{--个人信息--}}
                <table cellspacing="0">
                    <tr style="height:60px;page-break-inside:avoid">
                        <td colspan="12">
                            <h1>个人信息</h1>
                        </td>
                    </tr>
                    <tr style="height:52px;page-break-inside:avoid">
                        <td valign="center" style="width:100px;">
                            <span class="require">*</span>姓名
                        </td>
                        <td valign="center" colspan="3" style="width:300px;">
                            <el-form-item>
                                <el-input v-model="user.name" :disabled="true" placeholder="请输入您的姓名"></el-input>
                            </el-form-item>
                        </td>
                        <td valign="center" style="width:100px;">
                            <span class="require">*</span>联系电话
                        </td>
                        <td valign="center" colspan="3" style="width:300px;">
                            <el-form-item>
                                <el-input v-model="user.mobile" :disabled="true" placeholder="请输入您的联系电话"></el-input>
                            </el-form-item>
                        </td>
                        <td valign="center" style="width:100px;">
                            <span class="require">*</span>籍贯
                        </td>
                        <td valign="center" colspan="3" style="width:300px;">
                            <el-form-item>
                                <el-input v-model="user.native" :disabled="true" placeholder="请输入您的籍贯"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr style="height:52px;page-break-inside:avoid">
                        <td valign="center">
                            <span class="require">*</span>电子邮箱
                        </td>
                        <td valign="center" colspan="3">
                            <el-form-item>
                                <el-input v-model="user.email" :disabled="true" placeholder="请输入电子邮箱"></el-input>
                            </el-form-item>
                        </td>
                        <td valign="center">
                            <span class="require">*</span>人才层次
                        </td>
                        <td valign="center" colspan="3">
                            <el-form-item>
                                <el-select v-model="user.talent_level" disabled placeholder="请选择人才层次" style="width:100%;">
                                    <el-option label="第一层次" value="第一层次"></el-option>
                                    <el-option label="第二层次" value="第二层次"></el-option>
                                    <el-option label="第三层次" value="第三层次"></el-option>
                                    <el-option label="第四层次" value="第四层次"></el-option>
                                    <el-option label="第五层次" value="第五层次"></el-option>
                                    <el-option label="第六层次" value="第六层次"></el-option>
                                    <el-option label="第七层次" value="第七层次"></el-option>
                                </el-select>
                            </el-form-item>
                        </td>
                        <td valign="center">
                            <span class="require">*</span>人才证有效期
                        </td>
                        <td valign="center" colspan="3">
                            <el-form-item>
                                <el-input v-model="user.talent_card_validity" :disabled="true" placeholder="输入您的人才证有效期"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr style="height:52px;page-break-inside:avoid">
                        <td valign="center">
                            <span class="require">*</span>人才标签
                        </td>
                        <td valign="center" colspan="3">
                            <el-form-item>
                                <el-input v-model="user.talent_tags" :disabled="true" placeholder="请输入人才标签"></el-input>
                            </el-form-item>
                        </td>

                        <td valign="center">
                            <span class="require">*</span>人才认定条件
                        </td>
                        <td valign="center" colspan="6">
                            <el-form-item prop="talent_condition">
                                <el-input v-model="user.talent_condition" :disabled="true" placeholder="请输入人才认定条件"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr style="height:52px;page-break-inside:avoid">
                        <td valign="center">
                            <span class="require">*</span>证件信息<br/>
                            （身份证或护照，本人手持证件正、反面照片）
                        </td>
                        <td valign="center" colspan="11">
                            <el-form-item prop="certificates">
                                <div style="padding: 10px 0">
                                    <el-upload
                                            action="{{ route('buyhouse.upload') }}"
                                            list-type="picture-card"
                                            :data="{_token:'{{csrf_token()}}'}"
                                            :file-list="user.certificates"
                                            :before-upload="beforeImageUpload"
                                            :on-success="uploadSuccessID"
                                            :multiple="true"
                                            :on-preview="handlePictureCardPreview"
                                            :on-remove="removeID">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                </div>
                            </el-form-item>
                        </td>
                    </tr>
                </table>

                {{--家庭资料--}}
                <table cellspacing="0">
                    <tr style="height:60px;page-break-inside:avoid">
                        <td colspan="12">
                            <h1>家庭资料</h1>
                        </td>
                    </tr>
                    <tr>
                        <td valign="center">
                            <span class="require">*</span>婚姻状况
                        </td>
                        <td valign="center" colspan="5">
                            <el-form-item prop="marry">
                                <el-radio label="1" v-model="user.marry">未婚</el-radio>
                                <el-radio label="2" v-model="user.marry">已婚</el-radio>
                                <el-radio label="3" v-model="user.marry">离异</el-radio>
                                <el-radio label="4" v-model="user.marry">丧偶</el-radio>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr style="height:52px;page-break-inside:avoid" v-show="user.marry > 1">
                        <td valign="center">
                            <span class="require">*</span>婚姻证明<br/>
                            （结婚证，离婚证，离婚生效文书、丧偶证明等）
                        </td>
                        <td valign="center" colspan="3">
                            <el-form-item prop="marry_prove">
                                <div style="padding: 10px 0">
                                    <el-upload
                                            action="{{ route('buyhouse.upload') }}"
                                            list-type="picture-card"
                                            :data="{_token:'{{csrf_token()}}'}"
                                            :file-list="user.marry_prove"
                                            :before-upload="beforeImageUpload"
                                            :on-success="uploadSuccessMarry"
                                            :multiple="true"
                                            :on-preview="handlePictureCardPreview"
                                            :on-remove="removeMarry">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                </div>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr style="height:52px;page-break-inside:avoid">
                        <td valign="center">
                            <span class="require">*</span>户口本<br/>
                            （上传家庭户口本）
                        </td>
                        <td valign="center" colspan="3">
                            <el-form-item prop="household_register">
                                <div style="padding: 10px 0">
                                    <el-upload
                                            action="{{ route('buyhouse.upload') }}"
                                            list-type="picture-card"
                                            :data="{_token:'{{csrf_token()}}'}"
                                            :file-list="user.household_register"
                                            :before-upload="beforeImageUpload"
                                            :on-success="uploadSuccessHousehold"
                                            :multiple="true"
                                            :on-preview="handlePictureCardPreview"
                                            :on-remove="removeHousehold">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                </div>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr style="height:47px;page-break-inside:avoid">
                        <td valign="center" :rowspan="this.user.family.length+1" style="width:200px;">
                            家庭成员<br/>
                            <el-button type="primary" icon="el-icon-plus" size="small" @click="addFamily">添加家庭成员
                            </el-button>
                            <br/>
                            <el-button type="danger" icon="el-icon-minus" size="small" @click="delFamily">删除最后一行
                            </el-button>
                        </td>
                        <td valign="center" style="width:200px;">
                            <p style=";text-align:center">
                                <span style=";font-family:宋体;font-size:14px">称谓</span>
                            </p>
                        </td>
                        <td width="200" valign="center" style="width:200px;">
                            <p style=";text-align:center">
                                <span style=";font-family:宋体;font-size:14px">姓名</span>
                            </p>
                        </td>
                        <td width="87" valign="center" style="width:600px;">
                            <p style=";text-align:center">
                                <span style=";font-family:宋体;font-size:14px">证件信息</span>
                            </p>
                        </td>
                    </tr>
                    <tr style="height:52px;page-break-inside:avoid" v-for="(item,index) in user.family">
                        <td valign="center">
                            <el-form-item :prop="'family.'+index+'.relation'"
                                          :rules="{required: true, message: '称谓不能为空', trigger: 'blur'}">
                                <el-input v-model="item.relation" placeholder="称谓"></el-input>
                            </el-form-item>
                        </td>
                        <td valign="center">
                            <el-form-item :prop="'family.'+index+'.realname'"
                                          :rules="{required: true, message: '真实姓名不能为空', trigger: 'blur'}">
                                <el-input v-model="item.realname" placeholder="真实姓名"></el-input>
                            </el-form-item>
                        </td>
                        <td valign="center">
                            <el-form-item :prop="'family.'+index+'.idcard'"
                                          :rules="{required: true, message: '证件信息不能为空', trigger: 'blur'}">
                                <el-input v-model="item.idcard" placeholder="证件信息"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                </table>
                {{--工作情况--}}
                <table cellspacing="0">
                    <tr style="height:60px;page-break-inside:avoid">
                        <td colspan="12">
                            <h1>工作情况</h1>
                        </td>
                    </tr>
                    <tr style="height:52px;page-break-inside:avoid">
                        <td valign="center" style="width:200px;">
                            <span class="require">*</span>人才工作单位<br/>
                            （上传在职证明扫描件，格式PNG或JPEG）<br/>
                            <a href="" target="_blank" style="color:blue;">点击下载范本</a>
                        </td>
                        <td valign="center" style="width:1000px;">
                            <el-form-item prop="work_prove">
                                <div style="padding: 10px 0">
                                    <el-upload
                                            action="{{ route('buyhouse.upload') }}"
                                            list-type="picture-card"
                                            :data="{_token:'{{csrf_token()}}'}"
                                            :file-list="user.work_prove"
                                            :before-upload="beforeImageUpload"
                                            :on-success="uploadSuccessWork"
                                            :multiple="true"
                                            :on-preview="handlePictureCardPreview"
                                            :on-remove="removeWork">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                </div>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr style="height:52px;page-break-inside:avoid">
                        <td valign="center">
                            <span class="require">*</span>所属街道
                        </td>
                        <td valign="center">
                            <el-form-item prop="street">
                                <el-input v-model="user.street" placeholder="请输入所属街道"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                </table>
                {{--住房情况--}}
                <table>
                    <tr style="height:60px;page-break-inside:avoid">
                        <td colspan="11">
                            <h1>住房情况</h1>
                        </td>
                    </tr>
                    <tr style="height:52px;page-break-inside:avoid">
                        <td valign="center" colspan="3">
                            <span class="require">*</span>家庭成员在晋江市行政区域内住房情况
                        </td>
                        <td valign="center" colspan="3">
                            <el-form-item prop="house_condition">
                                <el-input v-model="user.house_condition" placeholder="请输入情况 "></el-input>
                            </el-form-item>
                        </td>

                        <td valign="center" colspan="3">
                            <span class="require">*</span>在晋享受政策性住房或相关优惠情况
                        </td>
                        <td valign="center" colspan="3">
                            <el-form-item prop="house_policy">
                                <el-input v-model="user.house_policy" placeholder="请输入情况"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                </table>

                <table>
                    <tr>
                        <td height="52" colspan="12" style="padding: 10px 0">
                            <p>
                                <el-form-item prop="checked">
                                    本人承诺<a href="" style="color: blue;">《承诺书》</a>：
                                    <el-checkbox v-model="user.checked"></el-checkbox>
                                </el-form-item>
                            </p>
                            <el-form-item size="large">
                                <el-button type="success" @click="submit('userForm')">提交申请</el-button>
                                <el-button type="info" @click="location.href = '{{route("buyhouse.login")}}'">返回</el-button>
                            </el-form-item>
                        </td>
                    </tr>
                </table>
            </el-form>
        </div>
        <el-dialog :visible.sync="imageDialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
@endsection

@section('script')
    <script type="text/javascript" src="{{theme_asset('app/js/vue.min.js')}}"></script>
    <script src="{{theme_asset('app/js/axios.js')}}"></script>
    <script src="{{theme_asset('app/js/qs.min.js')}}"></script>
    <script type="text/javascript" src="{{theme_asset('app/js/elementui.min.js')}}"></script>
    <script>

        new Vue({
            el: '#app',
            data() {
                return {
                    dialogVisible: false,
                    imageDialogVisible: false,
                    dialogImageUrl: '',
                    user: {!! $apply !!},
                    post_data: {},
                    rules: {
                        certificates: [
                            {validator: this.validCertificates, trigger: 'change'}
                        ],
                        marry: [
                            {required: true, message: '请选择婚姻状况', trigger: 'change'}
                        ],
                        marry_prove: [
                            {validator: this.validMarry, trigger: 'change'}
                        ],
                        household_register: [
                            {validator: this.validHousehold, trigger: 'change'}
                        ],
                        family: [
                            {validator: this.validFamily, trigger: 'blur'}
                        ],
                        work_prove: [
                            {validator: this.validWork, trigger: 'change'}
                        ],
                        street: [
                            {required: true, message: '请填写所属街道', trigger: 'blur'}
                        ],
                        house_condition: [
                            {required: true, message: '请填写家庭成员在晋江市行政区域内住房情况', trigger: 'blur'}
                        ],
                        house_policy: [
                            {required: true, message: '在晋享受政策性住房或相关优惠情况', trigger: 'blur'}
                        ],
                        checked: [
                            {validator: this.validChecked, trigger: 'change'}
                        ],
                    },
                    list: [{!!$house!!}],
                    formDisable: false,
                };
            },
            methods: {
                //上传相关
                beforeImageUpload(file) {
                    const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                        this.$message.error('上传图片只能是 JPG、PNG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                },
                handlePictureCardPreview(file) {
                    this.dialogImageUrl = file.url;
                    this.imageDialogVisible = true;
                },
                uploadSuccessID(response, file, fileList) {
                    if (response.status) {
                        this.user.certificates = fileList
                    } else {
                        this.$message.error(response.msg);
                    }
                },
                removeID(file, fileList) {
                    this.user.certificates = fileList
                },
                uploadSuccessMarry(response, file, fileList) {
                    if (response.status) {
                        this.user.marry_prove = fileList
                    } else {
                        this.$message.error(response.msg);
                    }
                },
                removeMarry(file, fileList) {
                    this.user.marry_prove = fileList
                },
                uploadSuccessHousehold(response, file, fileList) {
                    if (response.status) {
                        this.user.household_register = fileList
                    } else {
                        this.$message.error(response.msg);
                    }
                },
                removeHousehold(file, fileList) {
                    this.user.household_register = fileList
                },
                uploadSuccessWork(response, file, fileList) {
                    if (response.status) {
                        this.user.work_prove = fileList
                    } else {
                        this.$message.error(response.msg);
                    }
                },
                removeWork(file, fileList) {
                    this.user.work_prove = fileList
                },

                //验证相关
                validCertificates(rule, value, callback){
                    if(this.user.certificates.length == 0){
                        callback(new Error('请上传证件信息'));
                    }else{
                        callback();
                    }
                },
                validMarry(rule, value, callback){
                    if(this.user.marry > 1 && this.user.marry_prove.length == 0){
                        callback(new Error('请上传婚姻证明'));
                    }else{
                        callback();
                    }
                },
                validHousehold(rule, value, callback){
                    if(this.user.household_register.length == 0){
                        callback(new Error('请上传户口本'));
                    }else{
                        callback();
                    }
                },
                validFamily(rule, value, callback){
                    if(this.user.family.length == 0){
                        callback(new Error('请填写家庭成员'));
                    }else{
                        callback();
                    }
                },
                validWork(rule, value, callback){
                    if(this.user.work_prove.length == 0){
                        callback(new Error('请上传人才工作单位'));
                    }else{
                        callback();
                    }
                },
                validChecked(rule, value, callback){
                    if(!this.user.checked){
                        callback(new Error('请同意承诺书'));
                    }else{
                        callback();
                    }
                },


                //家庭成员
                addFamily() {
                    this.user.family.push({
                        relation: '',
                        realname: '',
                        idcard: '',
                    });
                },
                delFamily() {
                    var length = this.user.family.length;
                    if (length > 1) {
                        this.user.family.pop()
                    } else {
                        this.$message.error('只剩一条记录，不能再删啦');
                    }
                },

                //提交表单
                submit(formName){
                    this.user.operation = 2;
                    this.$refs[formName].validate((valid,object) => {
                        if (valid) {
                            var msg = '资料请详细检查！';
                            this.$confirm(msg, '提示', {
                                confirmButtonText: '检查无误，确定提交',
                                cancelButtonText: '我需要再检查一遍',
                                type: 'warning'
                            }).then(() => {
                                this.loading = this.$loading({
                                    lock: false,
                                    text: '加载中',
                                    spinner: 'el-icon-loading',
                                    background: 'rgba(0, 0, 0, 0.7)'
                                });

                                this.user._token = '{{csrf_token()}}';
                                axios.post("{{route('buyhouse.listPost')}}",Qs.stringify(this.user)).then(response => {
                                    if(response.data.status){
                                        this.$alert(response.data.msg, '提交成功', {
                                            confirmButtonText: '确定',
                                            callback: action => {
                                                window.location.reload();
                                            }
                                        });
                                    }else{
                                        this.$message.error(response.data.msg);
                                        this.loading.close();
                                        return false;
                                    }
                                });
                            }).catch(() => {

                            });

                        } else {
                            for(let key in object){
                                this.$message.error(object[key][0].message);
                                return false;
                            }
                            return false;
                        }
                    })
                },
            },
        })
    </script>
@endsection