前端 sdy

src/views/home/index.vue

@@ -13,7 +13,7 @@
           <el-button @click="closePort()">closePort</el-button>
           <div>{{text}}</div>
         </div>
-       <img style='width:100%;margin-top:10px;' src="../../../public/img/tmt.gif" alt="">
+       <!-- <img style='width:100%;margin-top:10px;' src="../../../public/img/tmt.gif" alt=""> -->
       </div>
     </div>
     <div id="mapXY"></div>

src/views/houseSelfCollect/customerManagementAdd.vue

@@ -6,8 +6,14 @@
         <h2 class="bg-left titleup">{{ trader }}粮商</h2>
       </el-col>
       <el-col :span="12" class="bg-right">
-        <el-button class="bg-bottom" type="primary" size="small" @click="cancel"><img width="6" height="10"
-            style="vertical-align: bottom; margin-right: 3px" src="../../../public/img/lujing.png" alt="" />返回
+        <el-button class="bg-bottom" type="primary" size="small" @click="cancel"
+          ><img
+            width="6"
+            height="10"
+            style="vertical-align: bottom; margin-right: 3px"
+            src="../../../public/img/lujing.png"
+            alt=""
+          />返回
         </el-button>
       </el-col>
     </el-row>
@@ -17,90 +23,206 @@
           <div style="display: flex; width: 100%; text-align: center">
             <div style="width: 330px; margin: 0 auto">
               <div class="unload-img">上传身份证人像面</div>
-              <el-upload class="avatar-uploader avatar-uploader1" action="https://www.zthymaoyi.com/upload/admin"
-                :show-file-list="false" :on-success="upLoadSuccess1" :disabled="disabled">
-                <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
+              <el-upload
+                class="avatar-uploader avatar-uploader1"
+                action="https://www.zthymaoyi.com/upload/admin"
+                :show-file-list="false"
+                :on-success="upLoadSuccess1"
+                :disabled="disabled"
+              >
+              <!-- :class="avatarshow == true ? 'avatar1' : 'avatar'" -->
+                <img v-if="imageUrl1" :src="imageUrl1" class="avatar" />
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload>
             </div>
             <div style="width: 330px; margin: 0 auto">
-
               <div class="unload-img">上传身份证国徽面</div>
-              <el-upload class="avatar-uploader avatar-uploader2" action="https://www.zthymaoyi.com/upload/admin"
-                :show-file-list="false" :on-success="upLoadSuccess2" :disabled="disabled">
-                <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
+              <el-upload
+                class="avatar-uploader avatar-uploader2"
+                action="https://www.zthymaoyi.com/upload/admin"
+                :show-file-list="false"
+                :on-success="upLoadSuccess2"
+                :disabled="disabled"
+              >
+                <img v-if="imageUrl2" :src="imageUrl2" class="avatar" />
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload>
             </div>
           </div>
 
           <div style="display: flex; width: 100%; text-align: center">
-            <div style="width:330px; margin: 0 auto">
+            <div style="width: 330px; margin: 0 auto">
               <div class="unload-img">上传银行卡正面</div>
-              <el-upload class="avatar-uploader avatar-uploader3" action="https://www.zthymaoyi.com/upload/admin"
-                :show-file-list="false" :on-success="bankSuccess1" :disabled="disabled">
-                <img v-if="imageUrl3" :src="imageUrl3" class="avatar">
+              <el-upload
+                class="avatar-uploader avatar-uploader3"
+                action="https://www.zthymaoyi.com/upload/admin"
+                :show-file-list="false"
+                :on-success="bankSuccess1"
+                :disabled="disabled"
+              >
+                <img v-if="imageUrl3" :src="imageUrl3" class="avatar" />
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload>
             </div>
-            <div style="width:330px; margin: 0 auto">
+            <div style="width: 330px; margin: 0 auto">
               <div class="unload-img">上传银行卡反面</div>
-              <el-upload class="avatar-uploader avatar-uploader4" action="https://www.zthymaoyi.com/upload/admin"
-                :show-file-list="false" :on-success="bankSuccess2" :disabled="disabled">
-                <img v-if="imageUrl4" :src="imageUrl4" class="avatar">
+              <el-upload
+                class="avatar-uploader avatar-uploader4"
+                action="https://www.zthymaoyi.com/upload/admin"
+                :show-file-list="false"
+                :on-success="bankSuccess2"
+                :disabled="disabled"
+              >
+                <img v-if="imageUrl4" :src="imageUrl4" class="avatar" />
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload>
             </div>
           </div>
-          <ws-form-item label="姓名" span="1" prop="customerName" label-width="80px">
-            <ws-input v-model="customerList.customerName" placeholder="请输入姓名" maxlength="15" size="small"
-              :disabled="disabled" />
+          <ws-form-item
+            label="姓名"
+            span="1"
+            prop="customerName"
+            label-width="80px"
+          >
+            <ws-input
+              v-model="customerList.customerName"
+              placeholder="请输入姓名"
+              maxlength="15"
+              size="small"
+              :disabled="disabled"
+            />
           </ws-form-item>
           <ws-form-item label="身份证号" span="1" prop="customerNumberCard">
-            <ws-input v-model="customerList.customerNumberCard" placeholder="请输入身份证号" maxlength="18" size="small"
-              :disabled="disabled" />
+            <ws-input
+              v-model="customerList.customerNumberCard"
+              placeholder="请输入身份证号"
+              maxlength="18"
+              size="small"
+              :disabled="disabled"
+            />
           </ws-form-item>
           <ws-form-item label="银行卡号" span="1" prop="bankCard">
-            <ws-input type="number" @mousewheel.native.prevent v-model="customerList.bankCard" placeholder="请输入银行卡号" maxlength="19" size="small"
-              :disabled="disabled" />
+            <ws-input
+              type="number"
+              @mousewheel.native.prevent
+              v-model="customerList.bankCard"
+              placeholder="请输入银行卡号"
+              maxlength="19"
+              size="small"
+              :disabled="disabled"
+            />
           </ws-form-item>
           <ws-form-item label="开户行" span="1" prop="bankDeposit">
-            <ws-input v-model="customerList.bankDeposit" placeholder="请输入开户行" maxlength="100" size="small"
-              :disabled="disabled" />
+            <ws-input
+              v-model="customerList.bankDeposit"
+              placeholder="请输入开户行"
+              maxlength="100"
+              size="small"
+              :disabled="disabled"
+            />
           </ws-form-item>
           <ws-form-item label="开户支行" span="1" prop="bankDepositBranch">
-            <ws-input v-if="bankInput" v-model="customerList.bankDepositBranch" placeholder="请输入开户支行" maxlength="100" size="small"
-              :disabled="disabled" />
-            <ws-select v-else v-model="customerList.bankDepositBranch" placeholder="请输入开户支行" :disabled="disabled">
-              <ws-option v-for="item in bankList" :key="item" :label="item" :value="item" />
+            <ws-input
+              v-if="bankInput"
+              v-model="customerList.bankDepositBranch"
+              placeholder="请输入开户支行"
+              maxlength="100"
+              size="small"
+              :disabled="disabled"
+            />
+            <ws-select
+              v-else
+              v-model="customerList.bankDepositBranch"
+              placeholder="请输入开户支行"
+              :disabled="disabled"
+            >
+              <ws-option
+                v-for="item in bankList"
+                :key="item"
+                :label="item"
+                :value="item"
+              />
             </ws-select>
-            <el-button type="primary" @click="bankInputChange" v-if="switchType != 2">{{bankText}}</el-button>
+            <el-button
+              type="primary"
+              @click="bankInputChange"
+              v-if="switchType != 2"
+              >{{ bankText }}</el-button
+            >
           </ws-form-item>
           <ws-form-item label="收款人姓名" span="1" prop="payeeName">
-            <ws-input v-model="customerList.payeeName" placeholder="请输入收款人姓名" maxlength="15" size="small"
-              :disabled="disabled" />
+            <ws-input
+              v-model="customerList.payeeName"
+              placeholder="请输入收款人姓名"
+              maxlength="15"
+              size="small"
+              :disabled="disabled"
+            />
           </ws-form-item>
           <ws-form-item label="收款人身份证号" span="1" prop="payeeNumberCard">
-            <ws-input v-model="customerList.payeeNumberCard" placeholder="请输入收款人身份证号" maxlength="18" size="small"
-              :disabled="disabled" />
+            <ws-input
+              v-model="customerList.payeeNumberCard"
+              placeholder="请输入收款人身份证号"
+              maxlength="18"
+              size="small"
+              :disabled="disabled"
+            />
           </ws-form-item>
           <ws-form-item label="手机号" span="1" prop="customerPhone">
-            <ws-input type="number" @mousewheel.native.prevent v-model="customerList.customerPhone" placeholder="请输入手机号" maxlength="11" size="small"
-              :disabled="disabled" />
+            <ws-input
+              type="number"
+              @mousewheel.native.prevent
+              v-model="customerList.customerPhone"
+              placeholder="请输入手机号"
+              maxlength="11"
+              size="small"
+              :disabled="disabled"
+            />
           </ws-form-item>
           <ws-form-item label="联系地址" span="1" prop="compAddress">
-            <ws-input v-model="customerList.compAddress" placeholder="请输入联系地址" maxlength="100" size="small"
-              :disabled="disabled" />
+            <ws-input
+              v-model="customerList.compAddress"
+              placeholder="请输入联系地址"
+              maxlength="100"
+              size="small"
+              :disabled="disabled"
+            />
           </ws-form-item>
-          <div v-if="this.switchType == 1 || this.switchType == 3" class = "jiaoYan">
-              <el-button type="primary" class="veriCode" @click="toSend()" v-if="!sendDisabled">获取验证码</el-button>
-            <el-button type="warning" class="veriCode" v-if="sendDisabled">{{sendText}}</el-button>
-            <ws-input type="number" @mousewheel.native.prevent v-model="verifyCode" placeholder="请输入验证码" maxlength="100" size="small" :disabled="disabled" />
+          <div
+            v-if="this.switchType == 1 || this.switchType == 3"
+            class="jiaoYan"
+          >
+            <el-button
+              type="primary"
+              class="veriCode"
+              @click="toSend()"
+              v-if="!sendDisabled"
+              >获取验证码</el-button
+            >
+            <el-button type="warning" class="veriCode" v-if="sendDisabled">{{
+              sendText
+            }}</el-button>
+            <ws-input
+              type="number"
+              @mousewheel.native.prevent
+              v-model="verifyCode"
+              placeholder="请输入验证码"
+              maxlength="100"
+              size="small"
+              :disabled="disabled"
+            />
           </div>
         </ws-info-table>
         <div class="but">
-          <el-button type="primary" @click="commit" v-if="switchType == 1 || switchType == 3">提交</el-button>
-          <el-button type="primary" @click="cancel" v-if="switchType == 2">关闭</el-button>
+          <el-button
+            type="primary"
+            @click="commit"
+            v-if="switchType == 1 || switchType == 3"
+            >提交</el-button
+          >
+          <el-button type="primary" @click="cancel" v-if="switchType == 2"
+            >关闭</el-button
+          >
         </div>
       </ws-form>
     </div>
@@ -162,7 +284,8 @@
         verifyCode: '',
         bankList:[],
         bankInput:false,
-        bankText:'手动填写'
+        bankText:'手动填写',
+        avatarshow:false,
       }
     },
     activated() {
@@ -274,6 +397,18 @@
           path: 'customerManagement'
         })
       },
+      obtainWH(e,index){
+          //获取图片宽高
+          var img_url = e.url;//图片URL地址
+             var imgObj = new Image();//创建对象
+             imgObj.src = img_url;//改变图片地址
+             imgObj.onload = function(){
+               if(Number(imgObj.width) < Number(imgObj.height)){
+                 let i = document.getElementsByClassName("avatar");
+                 i[index].style.width='auto'
+               }
+            }
+      },
       upLoadSuccess1(e) {
         this.identityUp = 'up'
         this.identity[0] = e.url
@@ -295,7 +430,9 @@
               this.$set( this.customerList,'compAddress',response.recPersonAddr)
             }
           })
+           this.obtainWH(e,1)
       },
+
       upLoadSuccess2(e) {
         this.identityLow = 'low'
         this.identity[1] = e.url
@@ -319,6 +456,7 @@
         //       this.$set( this.customerList,'compAddress',response.recPersonAddr)
         //     }
         //   })
+        this.obtainWH(e,0)
       },
       bankSuccess1(e) {
         this.bankUps = 'bankUp'
@@ -339,6 +477,7 @@
               this.$set(this.customerList,'bankDeposit',response.bankName)
             }
           })
+          this.obtainWH(e,2)
       },
       bankSuccess2(e) {
         this.bankLows = 'bankLow'
@@ -359,6 +498,7 @@
         //       this.$set(this.customerList,'bankDeposit',response.bankName)
         //     }
         //   })
+        this.obtainWH(e,3)
       },
       commit() {
         if (!this.imageUrl1) {
@@ -499,164 +639,166 @@
   }
 </script>
 <style lang="scss" scoped>
-  .avatar-uploader1 {
-    background: url('../../../public/img/identityup.png');
-  }
-
-  .avatar-uploader2 {
-    background: url('../../../public/img/identitylow.png');
-  }
-
-  .avatar-uploader3 {
-    background: url('../../../public/img/bankup.png');
-  }
-
-  .avatar-uploader4 {
-    background: url('../../../public/img/banklow.png');
-  }
-
-  /deep/.el-upload {
-    height: 200px;
-  }
-
-  .avatar-uploader {
-    background-size: 100% 100%;
-  }
-
-  .avatar-uploader .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .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: 330px;
-    height: 103%;
-    display: block;
-  }
-
-  .center {
-    background: #f6f7fc;
-  }
-
-  .seach {
-    display: flex;
-    align-items: center;
-
-    .find {
-      width: 32px;
-    }
-
-    .search-left {
-      display: flex;
-    }
-  }
-
-  .ws-info-table {
-    border: none;
-    width: 80%;
-    margin: 0 auto;
-  }
-
-  .ws-info-table .el-form-item {
-    width: 50%;
-    border: none;
-  }
-
-  /deep/.ws-info-table .el-form-item .el-form-item__label {
-    width: 30%;
-    text-align: center;
-    background: #ffffff;
-    font-size: 14px;
-    color: #8890b1;
-  }
-
-  /deep/.ws-info-table .el-form-item .el-form-item__content {
-    border: none;
-  }
-
-  .bg-left {
-    padding-left: 30px;
-  }
-
-  .bg-right {
-    padding-right: 10px;
-    text-align: right;
-  }
-
-  .bg-bottom {
-    margin: 15px 0px;
-  }
-
-  .titleup {
-    position: relative;
-  }
-
-  .titleup::before {
-    content: '';
-    display: inline-block;
-    width: 5px;
-    height: 30px;
-    background: #5473e8;
-    position: absolute;
-    left: 0;
-  }
-
-  .unload {
-    background: #ffffff;
-    padding-top: 20px;
-  }
-
-  .but {
-    text-align: center;
-    margin: 20px auto;
-  }
-
-  /deep/.up .el-upload--picture-card {
-    display: none;
-  }
-
-  /deep/.low .el-upload--picture-card {
-    display: none;
-  }
-
-  /deep/.bankUp .el-upload--picture-card {
-    display: none;
-  }
-
-  /deep/.bankLow .el-upload--picture-card {
-    display: none;
-  }
-
-  .unload-img {
-    margin: 20px 0;
-  }
-
-  .veriCode {
-    margin: 0 9px;
-  }
-  .jiaoYan{
+.avatar-uploader1 {
+  background: url('../../../public/img/identityup.png');
+}
+
+.avatar-uploader2 {
+  background: url('../../../public/img/identitylow.png');
+}
+
+.avatar-uploader3 {
+  background: url('../../../public/img/bankup.png');
+}
+
+.avatar-uploader4 {
+  background: url('../../../public/img/banklow.png');
+}
+
+/deep/.el-upload {
+  height: 200px;
+}
+
+.avatar-uploader {
+  background-size: 100% 100%;
+}
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.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: 330px;
+  height: 103%;
+  display: block;
+}
+.avatar1 {
+  height: 103%;
+  display: block;
+}
+.center {
+  background: #f6f7fc;
+}
+
+.seach {
+  display: flex;
+  align-items: center;
+
+  .find {
+    width: 32px;
+  }
+
+  .search-left {
     display: flex;
-    width: 50%;
-    padding: 0 9px;
   }
-  /deep/.jiaoYan .el-input__inner{
-    width: 100%;
-  }
-
+}
+
+.ws-info-table {
+  border: none;
+  width: 80%;
+  margin: 0 auto;
+}
+
+.ws-info-table .el-form-item {
+  width: 50%;
+  border: none;
+}
+
+/deep/.ws-info-table .el-form-item .el-form-item__label {
+  width: 30%;
+  text-align: center;
+  background: #ffffff;
+  font-size: 14px;
+  color: #8890b1;
+}
+
+/deep/.ws-info-table .el-form-item .el-form-item__content {
+  border: none;
+}
+
+.bg-left {
+  padding-left: 30px;
+}
+
+.bg-right {
+  padding-right: 10px;
+  text-align: right;
+}
+
+.bg-bottom {
+  margin: 15px 0px;
+}
+
+.titleup {
+  position: relative;
+}
+
+.titleup::before {
+  content: '';
+  display: inline-block;
+  width: 5px;
+  height: 30px;
+  background: #5473e8;
+  position: absolute;
+  left: 0;
+}
+
+.unload {
+  background: #ffffff;
+  padding-top: 20px;
+}
+
+.but {
+  text-align: center;
+  margin: 20px auto;
+}
+
+/deep/.up .el-upload--picture-card {
+  display: none;
+}
+
+/deep/.low .el-upload--picture-card {
+  display: none;
+}
+
+/deep/.bankUp .el-upload--picture-card {
+  display: none;
+}
+
+/deep/.bankLow .el-upload--picture-card {
+  display: none;
+}
+
+.unload-img {
+  margin: 20px 0;
+}
+
+.veriCode {
+  margin: 0 9px;
+}
+.jiaoYan {
+  display: flex;
+  width: 50%;
+  padding: 0 9px;
+}
+/deep/.jiaoYan .el-input__inner {
+  width: 100%;
+}
 </style>