suochencheng
/
FangYuan


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>租客信息页面</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="lib/element/element-ui.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
    <el-row>
        <template>
            <!--  <el-carousel :interval="5000" arrow="always" height="150px">
                 <el-carousel-item v-for="item in imgData" :key="item.index">
                     <img :src="item.url" height="150px" width="100%"/>
                 </el-carousel-item>
             </el-carousel> -->
        </template>
    </el-row>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="max-width:300px">
        <el-form-item label="房屋地址" prop="address">
            <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="租客姓名" prop="name">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item class="excess" label="租客联系方式" prop="phone">
            <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="form.idCard"></el-input>
        </el-form-item>
        <el-form-item class="excess" label="身份证" prop="idCardPhotoA">
            <el-upload class="avatar-uploader" action="assets/uploadFile" @click.native="clickAvatar('idCardPhotoA')"
                       :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="idCardPhotoA" :src="idCardPhotoA" class="avatar">
                <i v-if="!idCardPhotoA" class="el-icon-data">正</i>
            </el-upload>
            <el-upload class="avatar-uploader" action="assets/uploadFile" @click.native="clickAvatar('idCardPhotoB')"
                       :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="idCardPhotoB" :src="idCardPhotoB" class="avatar">
                <i v-if="!idCardPhotoB" class="el-icon-data">反</i>
            </el-upload>
            <!--              <el-upload class="avatar-uploader" action="assets/uploadFile"  @click.native="clickAvatar('idCardPhotoAa')" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                            <img v-if="idCardPhotoAa" :src="idCardPhotoAa" class="avatar">
                            <i v-if="!idCardPhotoAa" class="el-icon-data">正</i>
                          </el-upload>
                        <el-upload class="avatar-uploader" action="assets/uploadFile" @click.native="clickAvatar('idCardPhotoBb')" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                            <img v-if="idCardPhotoBb" :src="idCardPhotoBb" class="avatar">
                            <i v-if="!idCardPhotoBb" class="el-icon-data">反</i>
                        </el-upload> -->
        </el-form-item>
        <el-form-item label="合同">
            <el-upload class="avatar-uploader" action="assets/uploadFile" @click.native="clickAvatar('contractA')"
                       :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="contractA" :src="contractA" class="avatar">
                <i v-if="!contractA" class="el-icon-data">1</i>
            </el-upload>
            <el-upload class="avatar-uploader" action="assets/uploadFile" @click.native="clickAvatar('contractB')"
                       :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="contractB" :src="contractB" class="avatar">
                <i v-if="!contractB" class="el-icon-data">2</i>
            </el-upload>
            <el-upload class="avatar-uploader" action="assets/uploadFile" @click.native="clickAvatar('contractC')"
                       :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="contractC" :src="contractC" class="avatar">
                <i v-if="!contractC" class="el-icon-data">3</i>
            </el-upload>
            <el-upload class="avatar-uploader" action="assets/uploadFile" @click.native="clickAvatar('contractD')"
                       :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="contractD" :src="contractD" class="avatar">
                <i v-if="!contractD" class="el-icon-data">4</i>
            </el-upload>
        </el-form-item>
        <el-form-item class="excess" label="月租金">
            <el-input v-model="form.monthRent"></el-input>
        </el-form-item>

        <!--         </el-form-item>
                 <el-form-item class="excess" label="租金">
                    <el-input v-model="form.rent"></el-input>
                </el-form-item> -->

        <el-form-item class="excess" label="支付方式">
            <el-input v-model="form.payType"></el-input>
        </el-form-item>
        <!--          <el-form-item class="excess" label="支付宝户名">
                    <el-input v-model="form.alipayName"></el-input>
                </el-form-item>
                  <el-form-item class="excess" label="支付宝帐号">
                    <el-input v-model="form.alipayCount"></el-input>
                </el-form-item>
                  <el-form-item class="excess" label="银行卡户名">
                    <el-input v-model="form.bankCardName"></el-input>
                </el-form-item>
                 <el-form-item class="excess" label="银行卡卡号">
                    <el-input v-model="form.bankCardCount"></el-input>
                </el-form-item>
               <el-form-item label="银行卡照片">
                    <el-upload class="avatar-uploader" action="assets/uploadFile" @click.native="clickAvatar('bankCardPhoto')" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="bankCardPhoto" :src="bankCardPhoto" class="avatar">
                        <i v-if="!bankCardPhoto" class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item> -->

        <el-form-item label="支付截图">
            <el-upload class="avatar-uploader" action="assets/uploadFile" @click.native="clickAvatar('payPhoto')"
                       :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="payPhoto" :src="payPhoto" class="avatar">
                <i v-if="!payPhoto" class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>

        <el-form-item class="excess" label="合同开始日期">
            <!--<el-input v-model="form.contractStart"></el-input>-->
            <el-date-picker
                    v-model="form.contractStart"
                    type="date"
                    placeholder="选择日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item class="excess" label="合同结束日期">
            <!--<el-input v-model="form.contractEnd"></el-input>-->
            <el-date-picker
                    v-model="form.contractEnd"
                    type="date"
                    placeholder="选择日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="押金收条">
            <el-upload class="avatar-uploader" action="assets/uploadFile" @click.native="clickAvatar('depositPaper')"
                       :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="depositPaper" :src="depositPaper" class="avatar">
                <i v-if="!depositPaper" class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="水卡卡号">
            <el-input v-model="form.waterMetersNum"></el-input>
        </el-form-item>
        <el-form-item label="照片">
            <el-upload class="avatar-uploader" action="assets/uploadFile"
                       @click.native="clickAvatar('waterMetersNumPhoto')" :show-file-list="false"
                       :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="waterMetersNumPhoto" :src="waterMetersNumPhoto" class="avatar">
                <i v-if="!waterMetersNumPhoto" class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="水表度数">
            <el-input v-model="form.waterMetersValue"></el-input>
        </el-form-item>
        <el-form-item label="照片">
            <el-upload class="avatar-uploader" action="assets/uploadFile"
                       @click.native="clickAvatar('waterMetersValuePhoto')" :show-file-list="false"
                       :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="waterMetersValuePhoto" :src="waterMetersValuePhoto" class="avatar">
                <i v-if="!waterMetersValuePhoto" class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>

        <el-form-item label="电卡卡号">
            <el-input v-model="form.elecMetersNum"></el-input>
        </el-form-item>
        <el-form-item label="照片">
            <el-upload class="avatar-uploader" action="assets/uploadFile"
                       @click.native="clickAvatar('elecMetersNumPhoto')" :show-file-list="false"
                       :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="elecMetersNumPhoto" :src="elecMetersNumPhoto" class="avatar">
                <i v-if="!elecMetersNumPhoto" class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>
        <!-- <el-form-item label="电表交接度数">
            <el-input v-model="form.elecMetersValue"></el-input>
        </el-form-item>
        <el-form-item>
            <el-upload class="avatar-uploader" action="assets/uploadFile" @click.native="clickAvatar('elecMetersValuePhoto')" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="elecMetersValuePhoto" :src="elecMetersValuePhoto" class="avatar">
                <i v-if="!elecMetersValuePhoto" class="el-icon-plus"></i>
            </el-upload>
        </el-form-item> -->
        <!--  <el-form-item label="电表读数">
             <el-input v-model="form.elecMetersReadValue"></el-input>
         </el-form-item>
         <el-form-item>
             <el-upload class="avatar-uploader" action="assets/uploadFile" @click.native="clickAvatar('elecMetersReadValuePhoto')" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                 <img v-if="elecMetersReadValuePhoto" :src="elecMetersReadValuePhoto" class="avatar">
                 <i v-if="!elecMetersReadValuePhoto" class="el-icon-plus"></i>
             </el-upload>
         </el-form-item> -->
        <el-form-item label="电表峰">
            <el-input v-model="form.elecMetersPeak"></el-input>
        </el-form-item>
        <el-form-item label="照片">
            <el-upload class="avatar-uploader" action="assets/uploadFile"
                       @click.native="clickAvatar('elecMetersPeakPhoto')" :show-file-list="false"
                       :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="elecMetersPeakPhoto" :src="elecMetersPeakPhoto" class="avatar">
                <i v-if="!elecMetersPeakPhoto" class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="电表谷">
            <el-input v-model="form.elecMetersValley"></el-input>
        </el-form-item>
        <el-form-item label="照片">
            <el-upload class="avatar-uploader" action="assets/uploadFile"
                       @click.native="clickAvatar('elecMetersValleyPhoto')" :show-file-list="false"
                       :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="elecMetersValleyPhoto" :src="elecMetersValleyPhoto" class="avatar">
                <i v-if="!elecMetersValleyPhoto" class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="电表总">
            <el-input v-model="form.elecMetersSum"></el-input>
        </el-form-item>
        <el-form-item label="照片">
            <el-upload class="avatar-uploader" action="assets/uploadFile"
                       @click.native="clickAvatar('elecMetersSumPhoto')" :show-file-list="false"
                       :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="elecMetersSumPhoto" :src="elecMetersSumPhoto" class="avatar">
                <i v-if="elecMetersSumPhoto" class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>
        <el-form-item class="excess" label="燃气卡卡号">
            <el-input v-model="form.gasMetersNum"></el-input>
        </el-form-item>
        <el-form-item label="照片">
            <el-upload class="avatar-uploader" action="assets/uploadFile"
                       @click.native="clickAvatar('gasMetersNumPhoto')" :show-file-list="false"
                       :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="gasMetersNumPhoto" :src="gasMetersNumPhoto" class="avatar">
                <i v-if="!gasMetersNumPhoto" class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>
        <el-form-item class="excess" label="燃气度数">
            <el-input v-model="form.gasMetersValue"></el-input>
        </el-form-item>
        <el-form-item label="照片">
            <el-upload class="avatar-uploader" action="assets/uploadFile"
                       @click.native="clickAvatar('gasMetersValuePhoto')" :show-file-list="false"
                       :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="gasMetersValuePhoto" :src="gasMetersValuePhoto" class="avatar">
                <i v-if="!gasMetersValuePhoto" class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="交接单">
            <el-upload class="avatar-uploader" action="assets/uploadFile" @click.native="clickAvatar('handover')"
                       :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="handover" :src="handover" class="avatar">
                <i v-if="!handover" class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>

        <!--          <el-form-item class="excess" label="空置期">
                    <el-input v-model="form.vacancyTime"></el-input>
                </el-form-item>
                 <el-form-item class="excess" label="年限">
                    <el-input v-model="form.ageLimit"></el-input>
                </el-form-item> -->

        <el-form-item label="是否中介">
            <el-radio-group v-model="form.medium">
                <el-radio label="是"></el-radio>
                <el-radio label="否"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="中介费用" v-if="form.medium == '是'">
            <el-input v-model="form.mediumCost"></el-input>
        </el-form-item>
        <el-form-item label="收据" v-if="form.medium == '是'">
            <el-upload class="avatar-uploader" action="assets/uploadFile"
                       @click.native="clickAvatar('acquittancePhoto')" :show-file-list="false"
                       :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="acquittancePhoto" :src="acquittancePhoto" class="avatar">
                <i v-if="!acquittancePhoto" class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="备注">
            <el-input v-model="form.note"></el-input>
        </el-form-item>
        <el-form-item label="开单人">
            <el-input v-model="form.submitter"></el-input>
        </el-form-item>
        <el-form-item label="开单人电话">
            <el-input v-model="form.submitterPhone"></el-input>
        </el-form-item>
        <el-form-item label="支付方式">

            <el-select v-model="form.payTypeId" placeholder="请选择支付方式">
                <el-option
                        v-for="item in payTypeInfoOptions"
                        :key="item.id"
                        :label="item.payType"
                        :value="item.id">
                </el-option>
            </el-select>

        </el-form-item>
        <el-form-item label="单次金额">
            <el-input v-model="form.onceMoney"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" :loading="loading" @click.native="onSave">提交</el-button>
            <el-button @click.native="reback()">取消</el-button>
        </el-form-item>

    </el-form>

</div>
</body>
<script src="lib/vue/vue.js"></script>
<script src="lib/element/element-ui.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            loading: false,
            idCardPhotoA: '',
            idCardPhotoB: '',
            idCardPhotoAa: '',
            idCardPhotoBb: '',
            contractA: '',
            contractB: '',
            contractC: '',
            contractD: '',
            handover: '',
            depositPaper: '',
            acquittancePhoto: '',
            waterMetersNumPhoto: '',
            waterMetersValuePhoto: '',
            elecMetersNumPhoto: '',
            elecMetersValuePhoto: '',
            elecMetersPeakPhoto: '',
            elecMetersValleyPhoto: '',
            elecMetersSumPhoto: '',
            gasMetersNumPhoto: '',
            gasMetersValuePhoto: '',
            payPhoto: '',
            bankCardPhoto: '',
            form: {
                type: 2,
                address: '',
                name: '',
                idCard: '',
                idCardPhotoA: '',
                idCardPhotoB: '',
                idCardPhotoAa: '',
                idCardPhotoBb: '',
                phone: '',
                contractA: '',
                contractB: '',
                contractC: '',
                contractD: '',
                handover: '',
                depositPaper: '',
                agent: '',
                agentCost: '',
                acquittancePhoto: '',
                note: '',
                submitter: '',
                waterMetersNum: '',
                waterMetersNumPhoto: '',
                waterMetersValue: '',
                waterMetersValuePhoto: '',
                elecMetersNum: '',
                elecMetersNumPhoto: '',
                elecMetersValue: '',
                elecMetersValuePhoto: '',
                elecMetersPeak: '',
                elecMetersPeakPhoto: '',
                elecMetersValley: '',
                elecMetersValleyPhoto: '',
                elecMetersSum: '',
                elecMetersSumPhoto: '',
                gasMetersNum: '',
                gasMetersNumPhoto: '',
                gasMetersValue: '',
                gasMetersValuePhoto: '',
                monthRent: '',
                payType: '',
                payPhoto: '',
                contractStart: '',
                contractEnd: '',
                vacancyTime: '',
                ageLimit: '',
                rent: '',
                alipayName: '',
                alipayCount: '',
                bankCardName: '',
                bankCardCount: '',
                bankCardPhoto: '',
                payTypeId:''
            },
            imgData: [{url: 'img/bg1.jpg'}, {url: 'img/bg2.jpg'}, {url: 'img/bg3.jpg'}, {url: 'img/bg4.jpg'}],
            rules: {
                address: [
                    {required: true, message: '请输入房屋地址', trigger: 'blur'}
                ],
                name: [
                    {required: true, message: '请输入租客姓名', trigger: 'blur'}
                ],
                phone: [
                    {required: true, message: '请输入租客联系方式', trigger: 'blur'},
                    {pattern: /^1[3456789]\d{9}$/, message: '请输入有效的联系方式', trigger: 'blur'}
                ],
                idCard: [
                    {required: true, message: '请输入身份证号', trigger: 'blur'},
                ],
                idCardPhotoA: [
                    {required: true, message: '请上传身份证照片', trigger: 'change'}
                ]
            },
            payTypeInfoOptions: []
        },

        methods: {
            handleAvatarSuccess: function (res, file) {
                this.form[this.model] = res.data[0];
                this[this.model] = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload: function (file) {
                const isJPG = file.type === 'image/jpeg' || 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 10;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 或者 PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 10MB!');
                }
                return isJPG && isLt2M;
            },
            clickAvatar: function (file_type) {
                this.model = file_type;

            },
            onSave() {
                this.$refs.form.validate(function (valid) {
                    if (valid) {
                        this.onSubmit();
                    } else {
                        return false;
                    }
                }.bind(this));
            },
            ChangeTime(time){
                var date=new Date(time);
                return date.getFullYear()+'-'+(((date.getMonth()+1)<10)?('0'+(date.getMonth()+1)):(date.getMonth()+1))+'-'+(date.getDate()<10?('0'+date.getDate()):date.getDate())
            },
            onSubmit: function (form) {

                var data = JSON.parse(JSON.stringify(this.form));
                if(data.contractStart) {
                    data.contractStart = this.ChangeTime(data.contractStart);
                }
                if(data.contractEnd) {
                    data.contractEnd = this.ChangeTime(data.contractEnd);
                }
                this.loading = true
                $.get({
                    url: 'rentInfo/getOne',
                    data: {
                        address: data.address,
                        phone: data.phone,
                        type: 2
                    }
                }).then(function (res) {
                    this.loading = false

                    if (res.success == true) {

                        if (!res.data) {
                            $.post({
                                url: 'rentInfo/save',
                                data: data
                            }).then(function (res2) {
                                if (res2.success) {
                                    this.$message.success('保存成功');
                                } else {
                                    this.$message.error('保存失败');
                                }
                            }.bind(this))
                        } else {
                            this.$message.error('地址和租客已存在请勿重复提交！');
                        }
                    }
                }.bind(this));


            },
            reback: function () {
                history.back();
            }
        },
        created: function () {
            var that = this;
            $.get({
                url: '../payTypeInfo/all',
                data: {}
            }).then(function (res) {


                if (res.success == true) {
                    that.payTypeInfoOptions = res.data;
                }
            });
        }
    })
</script>
</html>