fix:修改经销商二次填写的bug

pc/src/page/distributor/index.vue

@@ -84,7 +84,15 @@
                 <p class="label">*{{ $t('agent.jinxiaoForm.phoneLabel') }}</p>
                 <h-row :gutter="10">
                   <h-col :span="8">
-                    <input type="text"  v-model="form.areaCode" placeholder="+86" value="+86">
+                    <div class=" area-div" ref="quhaoMenu" @click.stop="showSelect=!showSelect">
+                      <span>{{codeActive[1]}}</span>
+                      <ul v-if="showSelect" >
+                        <li @click="selectItem(item)"  v-for="(item,i) in selectCall" :key="i">
+                          {{language==='en'?item[2]:item[0]}}{{item[1]}}
+                        </li>
+                      </ul>
+                    </div>
+                    <!-- <input type="text"  v-model="form.areaCode" placeholder="+86" value="+86"> -->
                   </h-col>
                   <h-col :span="16">
                     <input maxLength="11" oninput="value=value.replace(/[^\d]/g,'')" type="text"  v-model="form.phone" :placeholder="$t('agent.jinxiaoForm.phonePlaceholder')">
@@ -109,9 +117,13 @@ import { getPosition } from '@/util'
 import { mapState } from 'vuex'
 import Api from '@/apis'
 import {reg} from '@/util'
+import selectCall from '@/util/country.js'
 export default {
   data () {
     return {
+      selectCall,
+      showSelect: false,
+      codeActive: ['中国', '+86', 'China'],
       form: {
         address: '',
         areaCode: '+86',
@@ -177,12 +189,20 @@ export default {
   components: {
   },
   mounted () {
+    let fn = () => {
+      this.showSelect = false
+    }
+    document.addEventListener('click', fn)
+    this.$once('hook:beforeDestroy', function () {
+      window.removeEventListener('click', fn)
+    })
   },
   destroyed () {
   },
   methods: {
     async saveAduit () {
       if (this.validator()) {
+        this.form.areaCode = Number(this.codeActive[1].substr(1))
         let res = await this.$http({
         method: 'post',
         data: this.form,
@@ -209,7 +229,9 @@ export default {
         }
       })
       }
-      
+    },
+    selectItem (item) {
+      this.codeActive = item
     },
     validator () {
       let check = value => {
@@ -380,5 +402,41 @@ export default {
     cursor: pointer;
   }
 }
-
+.area-div{
+      position: relative;
+      cursor: pointer;
+      &> span {
+        display: block;
+        background: #fff;
+        border: 1px solid #909090;
+        line-height: 38px;
+        vertical-align: middle;
+        margin-top: 10px;
+        box-sizing: border-box;
+        padding: 0 10px;
+      }
+      ul{
+        position: absolute;
+        top: 60px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+        left: 0;
+        background: #fff;
+        min-width: 230px;
+        width: auto;
+        height: 230px;
+        padding: 0 10px;
+        overflow: auto;
+        transition: all .3s ease;
+        li{
+          height: 40px;
+          line-height: 50px;
+          color: #999;
+          font-size: 14px;
+          cursor: pointer;
+          &:hover{
+            color: #000;
+          }
+        }
+      }
+    }
 </style>