长字数换行

src/pages/userBind/np/naturePerson.vue

@@ -51,14 +51,14 @@
               <p>正面</p>
             </div>
             <div v-if="idCardFront && !isApproved" @click="ocrShow('idCard', 'front')">
-              <img :src="idCardFront" style="width: 100%;height: 100%;margin: 0">
+              <img :src="idCardFront" style="width: 100%;height: 100%;margin: 0" >
             </div>
             <div v-if="!idCardBack" @click="ocrShow('idCard', 'back')">
               <img src="@/assets/userBind/back.png" >
               <p>反面</p>
             </div>
             <div v-if="idCardBack && !isApproved" @click="ocrShow('idCard', 'back')">
-              <img :src="idCardBack" style="width: 100%;height: 100%;margin: 0">
+              <img :src="idCardBack" style="width: 100%;height: 100%;margin: 0" >
             </div>
           </div>
         </div>
@@ -66,8 +66,12 @@
           <item>
             <div slot="name" class="required">姓名</div>
             <input
-              slot="content" v-model="baseInfo.bp_name" readonly placeholder="上传身份证自动填充"
-              class="auto" >
+              slot="content"
+              v-model="baseInfo.bp_name"
+              readonly
+              placeholder="上传身份证自动填充"
+              class="auto"
+            >
           </item>
           <item>
             <div slot="name" class="required">身份证号码</div>
@@ -81,13 +85,17 @@
           </item>
           <item>
             <div slot="name" class="required">户籍地址</div>
-            <input
+            <textarea
               slot="content"
+              ref="myTestarea"
               v-model="baseInfo.address_on_resident_booklit"
               readonly
+              cols="30"
+              rows="1"
               placeholder="上传身份证自动填充"
               class="auto"
-            >
+              @input="addRows(baseInfo.address_on_resident_booklit)"
+            />
           </item>
           <item>
             <div slot="name" class="required">手机号码</div>
@@ -104,7 +112,8 @@
               onfocus="this.blur()"
               @click="selectProvince()"
             >
-          </item><item :showArrow="true">
+          </item>
+          <item :showArrow="true">
             <div slot="name" class="required">城市</div>
             <input
               slot="content"
@@ -115,7 +124,8 @@
               onfocus="this.blur()"
               @click="selectCity()"
             >
-          </item><item :showArrow="true">
+          </item>
+          <item :showArrow="true">
             <div slot="name" class="required">区县</div>
             <input
               slot="content"
@@ -129,7 +139,15 @@
           </item>
           <item>
             <div slot="name" class="required">居住地址</div>
-            <input slot="content" v-model="baseInfo.living_address" placeholder="请输入居住地址" >
+            <textarea
+              slot="content"
+              ref="myTestareaLive"
+              v-model="baseInfo.living_address"
+              cols="34"
+              rows="1"
+              placeholder="请输入居住地址"
+              @input="addRowsLive(baseInfo.living_address)"
+            />
           </item>
           <item :showArrow="true">
             <div slot="name" class="required">学历</div>
@@ -202,7 +220,12 @@
         </div>
       </div>
       <BankInfo v-show="tabNum==1" :getBankList="getBankList" @getInfo="getInfo" />
-      <InvoiceInfo v-show="tabNum==2" :baseInfo="baseInfo" :tabNum="tabNum" @getinvoiceList="getinvoiceList" />
+      <InvoiceInfo
+        v-show="tabNum==2"
+        :baseInfo="baseInfo"
+        :tabNum="tabNum"
+        @getinvoiceList="getinvoiceList"
+      />
     </h-content>
     <bottom-tab class="footer-button">
       <tab-button :class="[isApproved?'put-approved':'put']" @click.native="putData">提交</tab-button>
@@ -215,12 +238,28 @@
             <span>添加银行卡</span>
             <img src="@/assets/userBind/close.png" @click="hideModal" >
           </div>
-          <img v-if="!bankImg" src="@/assets/userBind/addBack.png" class="addBack" @click="ocrShow('bankCard', '')">
-          <img v-if="bankImg && !isApproved" :src="bankImg" class="addBack" @click="ocrShow('bankCard', '')" style="height: 38%;">
+          <img
+            v-if="!bankImg"
+            src="@/assets/userBind/addBack.png"
+            class="addBack"
+            @click="ocrShow('bankCard', '')"
+          >
+          <img
+            v-if="bankImg && !isApproved"
+            :src="bankImg"
+            class="addBack"
+            style="height: 38%;"
+            @click="ocrShow('bankCard', '')"
+          >
           <list-item :item-height="44" class="card-Info">
             <item>
               <div slot="name">银行卡卡号</div>
-              <input slot="content" v-model="bank.bank_account_num" readonly placeholder="识别银行卡自动填充" >
+              <input
+                slot="content"
+                v-model="bank.bank_account_num"
+                readonly
+                placeholder="识别银行卡自动填充"
+              >
             </item>
             <item>
               <div slot="name">账户姓名</div>
@@ -339,9 +378,7 @@ export default {
       }
     },
     tabNum: function (newVal, oldVal) {
-      if (
-        (newVal === 1 && !this.isSave) && !this.from
-      ) {
+      if (newVal === 1 && !this.isSave && !this.from) {
         this.hlsPopup.showError('请先保存基本信息')
         this.tabNum = oldVal
       }
@@ -426,7 +463,11 @@ export default {
         vm.hlsPopup.showLongCenter('客户类型不能为空！')
       } else if (vm.isSelected && vm.isPaople && !vm.baseInfo.agent_username) {
         vm.hlsPopup.showLongCenter('业务经办员工代码不能为空！')
-      } else if (vm.isSelected && !vm.isPaople && !vm.baseInfo.business_license_num) {
+      } else if (
+        vm.isSelected &&
+        !vm.isPaople &&
+        !vm.baseInfo.business_license_num
+      ) {
         vm.hlsPopup.showLongCenter('营业执照号不能为空！')
       } else if (!vm.baseInfo.bp_name) {
         vm.hlsPopup.showLongCenter('客户姓名不能为空！')
@@ -442,13 +483,16 @@ export default {
         vm.hlsPopup.showLongCenter('学历不能为空！')
       } else if (!vm.baseInfo.marital_status) {
         vm.hlsPopup.showLongCenter('婚姻状况不能为空！')
-      } else if ((vm.marital_status_n === '已婚') && !vm.baseInfo.bp_name_sp) {
+      } else if (vm.marital_status_n === '已婚' && !vm.baseInfo.bp_name_sp) {
         vm.hlsPopup.showLongCenter('配偶姓名不能为空！')
-      } else if ((vm.marital_status_n === '已婚') && !vm.baseInfo.spouse_phone) {
+      } else if (vm.marital_status_n === '已婚' && !vm.baseInfo.spouse_phone) {
         vm.hlsPopup.showLongCenter('配偶手机号不能为空！')
-      } else if ((vm.marital_status_n === '已婚') && !vm.baseInfo.working_place_sp) {
+      } else if (
+        vm.marital_status_n === '已婚' &&
+        !vm.baseInfo.working_place_sp
+      ) {
         vm.hlsPopup.showLongCenter('配偶工作单位不能为空！')
-      } else if ((vm.marital_status_n === '已婚') && !vm.baseInfo.address_sp) {
+      } else if (vm.marital_status_n === '已婚' && !vm.baseInfo.address_sp) {
         vm.hlsPopup.showLongCenter('配偶居住地址不能为空！')
       } else if (!vm.hlsUtil.phoneNumber(vm.baseInfo.cell_phone)) {
         vm.hlsPopup.showLongCenter('手机号码有误!')
@@ -496,7 +540,9 @@ export default {
       }
       let success = function (imgdata) {
         if (ocrType === 'idCard') {
-          type === 'front' ? vm.idCardFront = imgdata : vm.idCardBack = imgdata
+          type === 'front'
+            ? (vm.idCardFront = imgdata)
+            : (vm.idCardBack = imgdata)
           vm.idCardIdentify(imgdata)
         } else if (ocrType === 'bankCard') {
           vm.bankImg = imgdata
@@ -518,7 +564,9 @@ export default {
       }
       let success = function (imgUrl) {
         if (ocrType === 'idCard') {
-          type === 'front' ? vm.idCardFront = imgUrl[0] : vm.idCardBack = imgUrl[0]
+          type === 'front'
+            ? (vm.idCardFront = imgUrl[0])
+            : (vm.idCardBack = imgUrl[0])
           vm.idCardIdentify(imgUrl[0])
         } else if (ocrType === 'bankCard') {
           vm.bankImg = imgUrl[0]
@@ -556,6 +604,22 @@ export default {
         vm.bank.bank_card_type = result.bank_card_type
       })
     },
+    addRows (e) {
+      let addNum = parseInt(e.length / 25)
+      if (addNum === 0) {
+        this.$refs.myTestarea.rows = 1
+      } else if (addNum >= addNum - 1 && addNum < addNum + 1) {
+        this.$refs.myTestarea.rows = addNum + 1
+      }
+    },
+    addRowsLive (e) {
+      let addNum = parseInt(e.length / 25)
+      if (addNum === 0) {
+        this.$refs.myTestareaLive.rows = 1
+      } else if (addNum >= addNum - 1 && addNum < addNum + 1) {
+        this.$refs.myTestareaLive.rows = addNum + 1
+      }
+    },
     successCall () {
       this.hideModal()
       this.getBankInfo()
@@ -568,15 +632,15 @@ export default {
       this.hlsPopup.showConfirm({
         title: '提示',
         content: '您确认添加吗？',
-        onConfirm: (data) => {
+        onConfirm: data => {
           console.log(data)
           if (data) {
             let bpName = window.localStorage.getItem('bp_name')
             if (
               this.bank.bank_account_num === '' ||
-        this.bank.bank_account_name === '' ||
-        this.bank.bank_full_name === '' ||
-        this.bank.bank_branch_name === ''
+              this.bank.bank_account_name === '' ||
+              this.bank.bank_full_name === '' ||
+              this.bank.bank_branch_name === ''
             ) {
               this.hlsPopup.showLongCenter('请输入完整字段')
             } else if (this.hlsUtil.isBankAccount(this.bank.bank_account_num)) {
@@ -609,11 +673,14 @@ export default {
       })
     },
     putData () {
-      if (window.localStorage.getItem('user_id') && window.localStorage.getItem('user_id') !== 'undefined') {
+      if (
+        window.localStorage.getItem('user_id') &&
+        window.localStorage.getItem('user_id') !== 'undefined'
+      ) {
         this.hlsPopup.showConfirm({
           title: '提示',
           content: '您确认提交吗？',
-          onConfirm: (data) => {
+          onConfirm: data => {
             console.log(data)
             if (data) {
               let vm = this
@@ -671,14 +738,17 @@ export default {
         bp_id: bpId,
       }
       vm.hlsPopup.showLoading('请稍候')
-      vm.hlsHttp.post(url, param).then(function (res) {
-        vm.hlsPopup.hideLoading()
-        if (res.result === 'S') {
-          vm.getBankList = res.lists
-        }
-      }).catch(() => {
-        this.hlsPopup.showLongCenter('传入参数异常')
-      })
+      vm.hlsHttp
+        .post(url, param)
+        .then(function (res) {
+          vm.hlsPopup.hideLoading()
+          if (res.result === 'S') {
+            vm.getBankList = res.lists
+          }
+        })
+        .catch(() => {
+          this.hlsPopup.showLongCenter('传入参数异常')
+        })
     },
     getinvoiceList (i) {
       Object.assign(this.baseInfo, i)
@@ -738,7 +808,7 @@ export default {
     },
     selectDistrict (e) {
       let vm = this
-      if ((vm.baseInfo.city_id === '') || (vm.baseInfo.province_id === '')) {
+      if (vm.baseInfo.city_id === '' || vm.baseInfo.province_id === '') {
         hlsPopup.showLongCenter('请先选择城市')
       }
       vm.hlsPopup.selectList({
@@ -877,12 +947,18 @@ export default {
   },
 }
 </script>
-<style lang="less">
+              <style lang="less">
 #base-info1 {
   font-family: PingFangSC-Regular;
   input::placeholder {
     color: #b4b4b5;
   }
+  textarea::placeholder {
+    color: #b4b4b5;
+  }
+  textarea {
+    text-align: right;
+  }
   .header {
     background-color: #00469c;
     color: #fff;
@@ -1014,8 +1090,8 @@ export default {
     border: 1px solid #00469c;
     background-color: #fafafa;
   }
-  .put-approved{
-      width: 90%;
+  .put-approved {
+    width: 90%;
     height: 45px;
     color: #fff;
     border-radius: 4px;
@@ -1095,3 +1171,4 @@ export default {
   line-height: 34px !important;
 }
 </style>
+</h-view></textarea></item></list-item></div></h-content></template>