suochencheng
/
FangYuan


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688
							<!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">
        <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('equityProveA')"
                       :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="equityProveA" :src="equityProveA" class="avatar">
                <i v-if="!equityProveA" class="el-icon-data">1</i>
            </el-upload>
            <el-upload class="avatar-uploader" action="assets/uploadFile" @click.native="clickAvatar('equityProveB')"
                       :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="equityProveB" :src="equityProveB" class="avatar">
                <i v-if="!equityProveB" class="el-icon-data">2</i>
            </el-upload>
            <el-upload class="avatar-uploader" action="assets/uploadFile" @click.native="clickAvatar('equityProveC')"
                       :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="equityProveC" :src="equityProveC" class="avatar">
                <i v-if="!equityProveC" class="el-icon-data">3</i>
            </el-upload>
            <el-upload class="avatar-uploader" action="assets/uploadFile" @click.native="clickAvatar('equityProveD')"
                       :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="equityProveD" :src="equityProveD" class="avatar">
                <i v-if="!equityProveD" class="el-icon-data">4</i>
            </el-upload>
        </el-form-item>
        <!--       <el-form-item class="excess" label="售房年限" prop="phone">
                  <el-input v-model="form.xxx"></el-input>
              </el-form-item>
              <el-form-item class="excess" label="售房单价" prop="phone">
                  <el-input v-model="form.xxx"></el-input>
              </el-form-item>
              <el-form-item class="excess" label="付款方式" prop="phone">
                  <el-input v-model="form.xxx"></el-input>
              </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-upload class="avatar-uploader" action="assets/uploadFile" @click.native="clickAvatar('commission')"
                       :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="commission" :src="commission" class="avatar">
                <i v-if="!commission" class="el-icon-plus"></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 class="excess" label="首次支付租金日期">
            <!--<el-input v-model="form.firstPayTime"></el-input>-->
            <el-date-picker
                    v-model="form.firstPayTime"
                    type="date"
                    placeholder="选择日期">
            </el-date-picker>
        </el-form-item>

        <el-form-item class="excess" label="支付方式">
            <el-select v-model="form.payType" @change="changePayType(form.payType)" placeholder="请选择支付方式">
                <el-option :value="1">支付宝</el-option>
                <el-option :value="2">银行卡</el-option>
            </el-select>
            <!--             <el-input v-model="form.payType"></el-input> -->
        </el-form-item>
        <el-form-item class="excess" label="支付宝户名" v-show="alipay">
            <el-input v-model="form.alipayName"></el-input>
        </el-form-item>
        <el-form-item class="excess" label="支付宝帐号" v-show="alipay">
            <el-input v-model="form.alipayCount"></el-input>
        </el-form-item>
        <el-form-item class="excess" label="银行卡户名" v-show="bankCard">
            <el-input v-model="form.bankCardName"></el-input>
        </el-form-item>
        <el-form-item class="excess" label="银行卡卡号" v-show="bankCard">
            <el-input v-model="form.bankCardCount"></el-input>
        </el-form-item>
        <el-form-item label="银行卡照片" v-show="bankCard">
            <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 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-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 class="excess" label="水表交接度数">
            <el-input v-model="form.waterMetersCount"></el-input>
        </el-form-item>
        <el-form-item class="excess" label="电表交接度数">
            <el-input v-model="form.metersCount"></el-input>
        </el-form-item>
        <el-form-item label="峰">
            <el-input v-model="form.metersPeak"></el-input>
        </el-form-item>
        <el-form-item>
            <el-upload class="avatar-uploader" action="assets/uploadFile" @click.native="clickAvatar('metersPeakPhoto')" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="metersPeakPhoto" :src="metersPeakPhoto" class="avatar">
                <i v-if="!metersPeakPhoto" class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="谷">
            <el-input v-model="form.metersValley"></el-input>
        </el-form-item>
        <el-form-item>
            <el-upload class="avatar-uploader" action="assets/uploadFile" @click.native="clickAvatar('metersValleyPhoto')" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="metersValleyPhoto" :src="metersValleyPhoto" class="avatar">
                <i v-if="!metersValleyPhoto" class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="总">
            <el-input v-model="form.metersTotal"></el-input>
        </el-form-item>
        <el-form-item>
            <el-upload class="avatar-uploader" action="assets/uploadFile" @click.native="clickAvatar('metersTotalPhoto')" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="metersTotalPhoto" :src="metersTotalPhoto" class="avatar">
                <i v-if="!metersTotalPhoto" class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="燃气度数">
            <el-input v-model="form.gasCount"></el-input>
        </el-form-item>
        <el-form-item>
            <el-upload class="avatar-uploader" action="assets/uploadFile" @click.native="clickAvatar('gasCountPhoto')" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="gasCountPhoto" :src="gasCountPhoto" class="avatar">
                <i v-if="!gasCountPhoto" 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="waterMetersNumPhoto" 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 label="短视频">

            <div class="avatar-uploader" @click="chooseFile">
                <div class="el-upload">
                    <img v-if="houseVideo" src="images/video.png" class="avatar">
                    <i v-if="!houseVideo" class="el-icon-plus"></i>
                </div>
            </div>


            <input id="videoFile" style="display: none" type="file" accept="video/*"  @change="videoUpload">
        </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 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-item class="skip">
                    <a href="form_zf.html"><el-button type="primary">租客信息页面</el-button></a>
                </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,
            alipay: true,
            bankCard: false,
            idCardPhotoA: '',
            idCardPhotoB: '',
            idCardPhotoAa: '',
            idCardPhotoBb: '',
            equityProveA: '',
            equityProveB: '',
            equityProveC: '',
            equityProveD: '',
            contractA: '',
            contractB: '',
            contractC: '',
            contractD: '',
            handover: '',
            commission: '',
            depositPaper: '',
            acquittancePhoto: '',
            waterMetersNumPhoto: '',
            waterMetersValuePhoto: '',
            elecMetersNumPhoto: '',
            elecMetersValuePhoto: '',
            elecMetersPeakPhoto: '',
            elecMetersValleyPhoto: '',
            elecMetersSumPhoto: '',
            gasMetersNumPhoto: '',
            gasMetersValuePhoto: '',
            payPhoto: '',
            bankCardPhoto: '',
            houseVideo: '',
            form: {

                type: 1,
                address: '',
                name: '',
                idCard: '',
                idCardPhotoA: '',
                idCardPhotoB: '',
                idCardPhotoAa: '',
                idCardPhotoBb: '',
                equityProveA: '',
                equityProveB: '',
                equityProveC: '',
                equityProveD: '',
                phone: '',
                contractA: '',
                contractB: '',
                contractC: '',
                contractD: '',
                handover: '',
                commission: '',
                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: '',
                firstPayTime: '',
                houseVideo: '',
                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'},
                    // {metersValley: 18, metersPeak: 18, message: '请输入有效的身份证号', trigger: 'blur'}
                ],
                idCardPhotoA: [
                    {required: true, message: '请上传身份证照片', trigger: 'change'}
                ]
            },
            payTypeInfoOptions: []
        },

        methods: {
            handleAvatarSuccess: function (res, file) {
                this.form[this.model] = res.data[0];
                if ('houseVideo' == this.model) {
                    this[this.model] = 'images/video.png'
                } else {

                    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;

            },
            changePayType: function (payType) {

                if (payType == 1) {
                    this.alipay = true;
                    this.bankCard = false;
                } else {
                    this.alipay = false;
                    this.bankCard = true;
                }
            },
            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 () {

                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);
                }
                if(data.firstPayTime){
                    data.firstPayTime=this.ChangeTime(data.firstPayTime);
                }
                this.loading=true
                $.post({
                    url: 'rentInfo/postOne',
                    data: data
                }).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();
            },
            chooseFile: function (){
                document.getElementById('videoFile').click()
            },
            videoUpload: function (e){
               if(! e.target.files[0]){
                   return false;
               }

               console.log(e.target.files[0])

                var fd = new FormData();
               fd.append('file',e.target.files[0]);
                $.post({
                    url: 'assets/uploadFile',
                    data: fd,
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
                }).then(function (res) {
                    if(res.data){
                        this.form.houseVideo=res.data[0]
                        this.houseVideo=res.data[0]
                    }
                    // if (res2.success) {
                    //     this.$message.success('保存成功');
                    // } else {
                    //     this.$message.error('保存失败');
                    // }
                }.bind(this))

            }
        },

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


                if (res.success == true) {
                    that.payTypeInfoOptions = res.data;
                }
            });
        }

    })
</script>
</html>