更换管理员和企业认证的地址上传功能

assets/scss/mobileCommon.scss

@@ -274,14 +274,14 @@
 }
 .phone-btn-blank span.upload {
   margin-left: .15rem;
-  line-height: 1.1rem;
-  font-size: .38rem;
+  line-height: 48px;
+  font-size: 16px;
   color: #999;
 }
 .phone-btn-blank input[type='file']{
   position: absolute;
   top: 0;
-  left: 0;
+  right: 0;
   width: 100%;
   min-height: 48px;
   opacity: 0;
@@ -305,8 +305,8 @@
 .fa.fa-p {
   position: absolute;
   right: .42rem;
-  bottom: .35rem;
-  font-size: .4rem;
+  bottom: 12px;
+  font-size: 20px;
   color: #888;
 }
 .fa.fa-picture-o{
@@ -324,7 +324,7 @@
 .page-last.page-wait {
   h4 {
     span{
-      font-size: .5rem;
+      font-size: .45rem;
       color: #323232;
       font-weight: normal;
     }

components/mobile/changeManager/StepAppeal.vue

@@ -1,120 +1,140 @@
 <template>
-  <div class="f-main">
-    <div class="content-top">
-      <p>更换管理员</p>
-      <!--<a href="javascript:void(0)" class="back" @click="jump('select')"><i class="el-icon-back"></i></a>-->
-    </div>
-    <div class="f-form">
-      <div class="page-part">
-        <mt-field placeholder="新管理员手机号"
-                  v-model="valid.mobile"
-                  :state="state.mobile"
-                  type="tel"
-                  @blur.native.capture="validateMobile"
-        ></mt-field>
+  <div>
+    <template v-if="!showChooseAddress">
+      <div class="f-main">
+        <div class="content-top">
+          <p>更换管理员</p>
+          <!--<a href="javascript:void(0)" class="back" @click="jump('select')"><i class="el-icon-back"></i></a>-->
+        </div>
+        <div class="f-form">
+          <div class="page-part">
+            <mt-field placeholder="新管理员手机号"
+                      v-model="valid.mobile"
+                      :state="state.mobile"
+                      type="tel"
+                      @blur.native.capture="validateMobile"
+            ></mt-field>
+          </div>
+          <div class="page-part">
+            <mt-field auto-complete="off"
+                      placeholder="短信验证码"
+                      v-model="valid.code"
+                      :state="state.code"
+                      @blur.native.capture="validateCode">
+              <span class="token" @click="getCheckCode" v-text="tokenText" v-if="state.mobile === 'success'">获取验证码</span>
+              <span class="token-no" v-text="tokenText" v-if="state.mobile !== 'success'">获取验证码</span>
+            </mt-field>
+          </div>
+          <div class="page-part">
+            <mt-field placeholder="企业名称"
+                      v-model="valid.spaceName"
+                      :state="state.spaceName"
+                      @blur.native.capture="validateSpaceName"
+            ></mt-field>
+          </div>
+          <div class="page-part">
+            <mt-field placeholder="营业执照号"
+                      v-model="valid.businessCode"
+                      auto-complete="off"
+                      :state="state.businessCode"
+                      @blur.native.capture="validateBusinessCode"
+            ></mt-field>
+          </div>
+          <div class="page-part">
+            <a class="phone-btn-blank" title="上传营业执照扫描件" v-bind:class="{ correct: uploadFileChecked }">
+              <i class="fa fa-picture-o fa-p"></i>
+              <span class="upload">上传营业执照扫描件</span>
+              <input type="file"
+                     class="form-control file-input"
+                     name="name"
+                     accept="image/jpeg,image/jpg,image/gif,image/bmp,image/png,.pdf"
+                     @change="upload"/>
+            </a>
+            <a class="thumbnail" v-if="valid.businessCodeImage !== ''"><img class="previewImg" alt="" :src="isPdf ? '/images/all/timg.png' : valid.businessCodeImage"></a>
+          </div>
+          <div class="page-part">
+            <mt-field placeholder="法定代表人"
+                      v-model="valid.corporation"
+                      auto-complete="off"
+                      :state="state.corporation"
+                      @blur.native.capture="validateCorporation"
+            ></mt-field>
+          </div>
+          <div class="page-part" style="position: relative">
+            <!--// 注册地址-->
+            <mt-field readonly aria-haspopup="true" aria-expanded="false"
+                      placeholder="注册地址"
+                      v-model="regAddress"
+                      @click.native="chooseAddress"></mt-field>
+            <i class="fa fa-map-marker fa-p"></i>
+          </div>
+          <div class="page-part">
+            <mt-field placeholder="申诉说明"
+                      type="textarea"
+                      rows="4"
+                      v-model="valid.description"
+                      @blur.native.capture="validateDescription"></mt-field>
+            <p class="pwd">请描述您申诉的原因，并尽可能多地列举出证明此账号为您所有的证据</p>
+          </div>
+          <div class="page-part">
+            <mt-field placeholder="姓名"
+                      v-model="valid.contactName"
+                      :state="state.contactName"
+                      @blur.native.capture="validateContactName"
+            ></mt-field>
+          </div>
+          <div class="page-part">
+            <mt-field placeholder="联系电话"
+                      v-model="valid.contactTel"
+                      :state="state.contactTel"
+                      type="tel"
+                      @blur.native.capture="validateContactTel"
+            ></mt-field>
+          </div>
+          <div class="page-part">
+            <mt-field placeholder="电子邮箱"
+                      v-model="valid.contactEmail"
+                      :state="state.contactEmail"
+                      type="email"
+                      @blur.native.capture="validateContactEmail"
+            ></mt-field>
+          </div>
+          <div class="page-part">
+            <mt-button size="large" type="primary" @click="sureAccount('last')">提 交</mt-button>
+          </div>
+        </div>
       </div>
-      <div class="page-part">
-        <mt-field auto-complete="off"
-                  placeholder="短信验证码"
-                  v-model="valid.code"
-                  :state="state.code"
-                  @blur.native.capture="validateCode">
-          <span class="token" @click="getCheckCode" v-text="tokenText" v-if="state.mobile === 'success'">获取验证码</span>
-          <span class="token-no" v-text="tokenText" v-if="state.mobile !== 'success'">获取验证码</span>
-        </mt-field>
-      </div>
-      <div class="page-part">
-        <mt-field placeholder="企业名称"
-                  v-model="valid.spaceName"
-                  :state="state.spaceName"
-                  @blur.native.capture="validateSpaceName"
-        ></mt-field>
-      </div>
-      <div class="page-part">
-        <mt-field placeholder="营业执照号"
-                  v-model="valid.businessCode"
-                  auto-complete="off"
-                  :state="state.businessCode"
-                  @blur.native.capture="validateBusinessCode"
-        ></mt-field>
-      </div>
-      <div class="page-part">
-        <a class="phone-btn-blank" title="上传营业执照扫描件" v-bind:class="{ correct: uploadFileChecked }">
-          <i class="fa fa-picture-o fa-p"></i>
-          <span class="upload">上传营业执照扫描件</span>
-          <input type="file"
-                 class="form-control file-input"
-                 name="name"
-                 accept="image/jpeg,image/jpg,image/gif,image/bmp,image/png,.pdf"
-                 @change="upload"/>
-        </a>
-        <a class="thumbnail" v-if="valid.businessCodeImage !== ''"><img class="previewImg" alt="" :src="isPdf ? '/images/all/timg.png' : valid.businessCodeImage"></a>
-      </div>
-      <div class="page-part">
-        <mt-field placeholder="法定代表人"
-                  v-model="valid.corporation"
-                  auto-complete="off"
-                  :state="state.corporation"
-                  @blur.native.capture="validateCorporation"
-        ></mt-field>
-      </div>
-      <div class="page-part" style="position: relative">
-        <!--// 注册地址-->
-        <mt-field readonly aria-haspopup="true" aria-expanded="false"
-                  placeholder="注册地址"
-                  v-model="valid.regAddress"
-                  @click.native="popupVisible = true"></mt-field>
-          <i class="fa fa-map-marker fa-p"></i>
-      </div>
-      <div class="page-part">
-        <mt-field placeholder="申诉说明"
-                  type="textarea"
-                  rows="4"
-                  v-model="valid.description"
-                  @blur.native.capture="validateDescription"></mt-field>
-        <p class="pwd">请描述您申诉的原因，并尽可能多地列举出证明此账号为您所有的证据</p>
-      </div>
-      <div class="page-part">
-        <mt-field placeholder="姓名"
-                  v-model="valid.contactName"
-                  :state="state.contactName"
-                  @blur.native.capture="validateContactName"
-        ></mt-field>
-      </div>
-      <div class="page-part">
-        <mt-field placeholder="联系电话"
-                  v-model="valid.contactTel"
-                  :state="state.contactTel"
-                  type="tel"
-                  @blur.native.capture="validateContactTel"
-        ></mt-field>
-      </div>
-      <div class="page-part">
-        <mt-field placeholder="电子邮箱"
-                  v-model="valid.contactEmail"
-                  :state="state.contactEmail"
-                  type="email"
-                  @blur.native.capture="validateContactEmail"
-        ></mt-field>
-      </div>
-      <div class="page-part">
-        <mt-button size="large" type="primary" @click="sureAccount('last')">提 交</mt-button>
-      </div>
-    </div>
-    <mt-popup v-model="popupVisible" position="bottom" class="mint-popup">
-      <mt-picker :slots="dateSlots" @change="onDateChange" :visible-item-count="5" :show-toolbar="false"></mt-picker>
-    </mt-popup>
+    </template>
+    <template v-else>
+      <address-choose
+        @getAddress="setAddress"
+        @getProvince="setProvince"
+        @getCity="setCity"
+        @getArea="setArea"
+        @getDetailAddress="setDetailAddress"
+        @getPopAddress="setPopAddress"
+        @showEvent="showAddress"
+        :popAddress="popAddress"
+        :regStreet="regStreet"
+        :regProvince="regProvince"
+        :regCity="regCity"
+        :regDistrict="regDistrict"/>
+    </template>
   </div>
 </template>
 
 <script>
+  import addressChoose from '~components/mobile/enterpriseCertification/addressChoose.vue'
   export default {
     name: 'step-one',
+    components: {
+      addressChoose
+    },
     data () {
       return {
         uploadFileChecked: false,
         isPdf: false,
-        popupVisible: false,
+        showChooseAddress: false,
         state: {
           mobile: 'error',
           code: 'error',
@@ -122,7 +142,6 @@
           businessCode: 'error',
           businessCodeImage: 'error',
           corporation: 'error',
-          regAddress: 'error',
           description: 'error',
           contactName: 'error',
           contactTel: 'error',
@@ -135,73 +154,48 @@
           businessCode: '',
           businessCodeImage: '',
           corporation: '',
-          regAddress: '',
           description: '',
           contactName: '',
           contactTel: '',
           contactEmail: ''
         },
-        allCityData: {},
-        cityData: {
-          province: [],
-          city: [],
-          district: []
-        },
-        address: {
-          regProvince: '',
-          regCity: '',
-          regDistrict: '',
-          regStreet: ''
-        },
-        dateSlots: [
-          {
-            flex: 1,
-            values: ['2016-01', '2016-02', '2016-03', '2016-04', '2016-05', '2016-06'],
-            className: 'slot1',
-            textAlign: 'right'
-          }, {
-            divider: true,
-            content: '-',
-            className: 'slot2'
-          }, {
-            flex: 1,
-            values: ['2016-01', '2016-02', '2016-03', '2016-04', '2016-05', '2016-06'],
-            className: 'slot3',
-            textAlign: 'left'
-          }
-        ],
         tokenCode: '',
         tokenTime: 60,
-        tokenText: '获取验证码'
+        tokenText: '获取验证码',
+        regAddress: '',
+        regProvince: '',
+        regCity: '',
+        regDistrict: '',
+        popAddress: '',
+        regStreet: ''
       }
     },
-    mounted () {
-      // 获取城市地址
-      this.$http.get('/data/city.json').then(response => {
-        this.allCityData = response.data
-        for (let province in response.data) {
-          this.cityData.province = response.data[province]
-          console.log('省', this.cityData.province)
-          for (let city in this.cityData.province) {
-            this.cityData.city = this.cityData.province[city]
-            console.log('市', this.cityData.city)
-            for (let street in this.cityData.city) {
-              this.cityData.district = this.cityData.city[street]
-              console.log('区', this.cityData.district)
-            }
-          }
-        }
-      })
-    },
     methods: {
-      onDateChange (picker, values) {
-        if (values[0] > values[1]) {
-          picker.setSlotValue(1, values[0])
-        }
-        this.dateStart = values[0]
-        this.dateEnd = values[1]
-        console.log(values[0], '0')
-        console.log(values[1], '1')
+      // 选择注册地址
+      chooseAddress () {
+        this.showChooseAddress = true
+      },
+      setAddress (detail) {
+        this.regAddress = detail
+      },
+      setProvince (detail) {
+        this.regProvince = detail
+      },
+      setCity (detail) {
+        this.regCity = detail
+      },
+      setArea (detail) {
+        this.regDistrict = detail
+      },
+      setDetailAddress (detail) {
+        this.regStreet = detail
+      },
+      setPopAddress (detail) {
+        console.log('popAddress', detail)
+        this.popAddress = detail
+      },
+      showAddress (info) {
+        this.showChooseAddress = info
       },
       jump (type) {
         this.$emit('stepEvent', type)
@@ -320,7 +314,6 @@
                   this.downToast('企业不存在，请确认。')
                 } else {
                   this.state.spaceName = 'success'
-                  return Promise.reject(response.data)
                 }
               }).catch(err => {
                 this.$indicator.close()
@@ -465,8 +458,8 @@
           this.state.code !== 'success' ||
           this.state.spaceName !== 'success' ||
           this.state.businessCode !== 'success' ||
-          this.valid.businessCodeImage !== '' ||
-          this.valid.regAddress !== '' ||
+          this.valid.businessCodeImage === '' ||
+          this.regAddress === '' ||
           this.state.description !== 'success' ||
           this.state.contactName !== 'success' ||
           this.state.contactTel !== 'success' ||
@@ -476,15 +469,15 @@
           this.$indicator.open('验证过程中...')
           let param = new FormData()
           param.append('mobile', this.valid.mobile)
-          param.append('code', this.valid.token)
+          param.append('code', this.valid.code)
           param.append('spaceName', this.valid.spaceName)
           param.append('businessCode', this.valid.businessCode)
           param.append('businessCodeImage', this.valid.businessCodeImage)
-          param.append('regAddress', this.valid.regAddress)
-          param.append('regProvince', this.address.regProvince)
-          param.append('regCity', this.address.regCity)
-          param.append('regDistrict', this.address.regDistrict)
-          param.append('regStreet', this.address.regStreet)
+          param.append('regAddress', this.regAddress)
+          param.append('regProvince', this.regProvince)
+          param.append('regCity', this.regCity)
+          param.append('regDistrict', this.regDistrict)
+          param.append('regStreet', this.regStreet)
           param.append('description', this.valid.description)
           param.append('contactName', this.valid.contactName)
           param.append('contactTel', this.valid.contactTel)

components/mobile/enterpriseCertification/addressChoose.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="distpicker-address-wrapper">
     <template>
+      <div>{{regProvince}}{{regCity}}{{regDistrict}}{{regStreet}}</div>
+      <div>{{chooseAddress}}</div>
       <div class="return">
         <i class="fa fa-angle-left" @click="goBack"></i>
         填写企业注册地址
@@ -99,7 +101,10 @@
       addressHeader: { type: String, default: 'address-header' },
       addressContainer: { type: String, default: 'address-container' },
       popAddress: {type: String},
-      regStreet: {type: String}
+      regStreet: {type: String},
+      regProvince: {type: String},
+      regCity: {type: String},
+      regDistrict: {type: String}
     },
     data () {
       return {
@@ -121,8 +126,12 @@
     created () {
       this.chooseAddress = this.popAddress
       this.detailAddress = this.regStreet
-      console.log(this.regStreet)
-      this.allAddress = this.chooseAddress + this.detailAddress
+      if (this.chooseAddress && this.detailAddress) {
+        this.allAddress = this.chooseAddress + this.detailAddress
+      }
+      this.currentProvince = this.regProvince
+      this.currentCity = this.regCity
+      this.currentArea = this.regDistrict
       if (this.area && !this.hideArea && !this.onlyProvince) {
         this.tab = 3
         this.showCityTab = true
@@ -161,6 +170,17 @@
         this.currentArea = this.area || this.placeholders.area
       }
     },
+    mounted () {
+      this.$nextTick(() => {
+        if (!this.regProvince && !this.regProvince && !this.regDistrict) {
+          console.log('result', !this.regProvince && !this.regProvince && !this.regDistrict)
+        } else {
+          this.chooseProvince(this.regProvince)
+          this.chooseCity(this.regCity)
+          this.chooseArea(this.regDistrict)
+        }
+      })
+    },
     methods: {
       // 取消选择地址
       cancel () {
@@ -211,23 +231,39 @@
       },
       // 返回注册页面
       goBack () {
-        console.log(this.currentProvince)
-        console.log(this.currentCity)
-        console.log(this.currentArea)
-        console.log(this.detailAddress)
-        this.$emit('getAddress', '')
-        this.$emit('getProvince', '')
-        this.$emit('getCity', '')
-        this.$emit('getArea', '')
-        this.$emit('getDetailAddress', '')
-        this.$emit('popAddress', '')
+        if (this.chooseAddress && this.detailAddress) {
+          this.allAddress = this.chooseAddress + this.detailAddress
+          this.$emit('getAddress', this.allAddress)
+          this.$emit('getProvince', this.currentProvince)
+          this.$emit('getCity', this.currentCity)
+          this.$emit('getArea', this.currentArea)
+          this.$emit('getDetailAddress', this.detailAddress)
+          this.$emit('getPopAddress', this.chooseAddress)
+        } else if (this.chooseAddress && !this.detailAddress) {
+          this.$emit('getAddress', '')
+          this.$emit('getProvince', this.currentProvince)
+          this.$emit('getCity', this.currentCity)
+          this.$emit('getArea', this.currentArea)
+          this.$emit('getDetailAddress', '')
+          this.$emit('popAddress', this.chooseAddress)
+        } else if (!this.chooseAddress && this.detailAddress) {
+          this.$emit('getAddress', '')
+          this.$emit('getProvince', '')
+          this.$emit('getCity', '')
+          this.$emit('getArea', '')
+          this.$emit('getDetailAddress', this.detailAddress)
+          this.$emit('popAddress', '')
+        } else {
+          this.$emit('getAddress', '')
+          this.$emit('getProvince', '')
+          this.$emit('getCity', '')
+          this.$emit('getArea', '')
+          this.$emit('getDetailAddress', '')
+          this.$emit('popAddress', '')
+        }
         this.$emit('showEvent', false)
       },
       goFinish () {
-        console.log(this.currentProvince)
-        console.log(this.currentCity)
-        console.log(this.currentArea)
-        console.log(this.detailAddress)
         if (!this.chooseAddress) {
           this.$toast({
             message: '请选择省、市、区',
@@ -239,7 +275,9 @@
             iconClass: 'el-icon-warning'
           })
         } else {
-          this.allAddress = this.chooseAddress + this.detailAddress
+          if (this.chooseAddress && this.detailAddress) {
+            this.allAddress = this.chooseAddress + this.detailAddress
+          }
           this.$emit('getAddress', this.allAddress)
           this.$emit('getProvince', this.currentProvince)
           this.$emit('getCity', this.currentCity)

components/mobile/enterpriseCertification/stepOne.vue

@@ -68,7 +68,10 @@
         @getPopAddress="setPopAddress"
         @showEvent="showAddress"
         :popAddress="popAddress"
-        :regStreet="regStreet"/>
+        :regStreet="regStreet"
+        :regProvince="regProvince"
+        :regCity="regCity"
+        :regDistrict="regDistrict"/>
     </template>
   </div>
 </template>
@@ -116,13 +119,12 @@
       // 获取地址
       chooseAddress () {
         this.showChooseAddress = true
-        // this.$emit('setRegAddress', this.regAddress)
-        // this.$emit('setRegStreet', this.regStreet)
       },
       setAddress (detail) {
         this.regAddress = detail
       },
       setProvince (detail) {
+        console.log(detail, 'detail')
         this.regProvince = detail
       },
       setCity (detail) {

pages/change/changeManager.vue

@@ -57,7 +57,6 @@
     },
     methods: {
       setStep (type) {
-        console.log('fu', type)
         this.step = type
       },
       setInfo (info) {