修改地址增加所属街道

src/components/order-addr-update/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog 
+  <el-dialog
     :title="this.$i18n.t('components.modifyUseAddress')"
     top="200px"
     :close-on-click-modal="false"
@@ -52,7 +52,7 @@
         </div>
         <div class="select">
           <el-form-item prop="area">
-            <el-select size="small" v-model="dataForm.areaId" :placeholder="this.$i18n.t('tip.select')" :disabled="!dataForm.cityId" @change="isShowMap ? mapLocation(true) : ''">
+            <el-select size="small" v-model="dataForm.areaId" :placeholder="this.$i18n.t('tip.select')" :disabled="!dataForm.cityId" @change="selectArea">
               <el-option
                 v-for="area in areaList"
                 :key="area.areaId"
@@ -62,6 +62,18 @@
             </el-select>
           </el-form-item>
         </div>
+        <div class="select">
+          <el-form-item prop="street">
+            <el-select size="small" v-model="dataForm.streetId" :placeholder="this.$i18n.t('tip.select')" :disabled="!dataForm.areaId" @change="isShowMap ? mapLocation(true) : ''">
+              <el-option
+                v-for="area in streetList"
+                :key="area.streetId"
+                :label="area.streetName"
+                :value="area.streetId"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </div>
       </el-form-item>
       <el-form-item :label="this.$i18n.t('address.detailed')" prop="addr">
         <el-input size="small" maxlength="30" v-model="dataForm.addr" :placeholder="this.$i18n.t('address.detailed')"></el-input>
@@ -122,6 +134,7 @@ export default {
       provinceList: [],
       cityList: [],
       areaList: [],
+      streetList: [],
       order: null,
       dataForm: {
         addrOrderId: 0,
@@ -131,9 +144,11 @@ export default {
         mobile: '',
         area: '',
         city: '',
+        street: '',
         province: '',
         areaId: null,
         cityId: null,
+        streetId: null,
         provinceId: null
       },
       center: {
@@ -196,6 +211,9 @@ export default {
         this.listAreaByParentId(userAddr.cityId).then(({ data }) => {
           this.areaList = data
         })
+        this.listStreetByParentId(userAddr.areaId).then(({data}) => {
+          this.streetList = data
+        })
       }
       this.dataListLoading = false
     },
@@ -207,6 +225,15 @@ export default {
         params: this.$http.adornParams({ pid })
       })
     },
+    listStreetByParentId (pid) {
+      if (!pid) pid = 0
+      return this.$http({
+        url: this.$http.adornUrl(`/street/page`),
+        method: 'get',
+        params: this.$http.adornParams({ parentId: pid })
+      })
+    },
+
     /**
        * 初始化地图数据
        */
@@ -259,6 +286,18 @@ export default {
       }
       this.mapLocation(true)
     },
+    selectArea (val){
+      this.dataForm.streetId = null
+      this.dataForm.street = ''
+      //获取街道的select
+      this.listStreetByParentId(val).then(({data}) => {
+        this.streetList = data
+      })
+      if (!this.isShowMap) {
+        return
+      }
+      this.mapLocation(true)
+    },
     getAddr () {
       for (let i = 0; i < this.provinceList.length; i++) {
         if (this.provinceList[i].areaId === this.dataForm.provinceId) {
@@ -274,10 +313,16 @@ export default {
       }
       for (let i = 0; i < this.areaList.length; i++) {
         if (this.areaList[i].areaId === this.dataForm.areaId) {
-          // 将市名字保存起来
+          // 将区名字保存起来
           this.dataForm.area = this.areaList[i].areaName
         }
       }
+      for (let i = 0; i < this.streetList.length; i++) {
+        if (this.streetList[i].streetId === this.dataForm.streetId) {
+          // 将街道名字保存起来
+          this.dataForm.street = this.streetList[i].streetName
+        }
+      }
     },
     getChangeAmount () {
       // this.oldOrder
@@ -340,6 +385,7 @@ export default {
     // 定位地图
     mapLocation (isTrue) {
       let area = ''
+      debugger
       this.getAddr()
       if (isTrue) {
           // 选择省市区时，定位地图
@@ -355,9 +401,13 @@ export default {
                 // 区名称
               area = area + this.dataForm.area
               this.zoom = 14
+              if (this.dataForm.streetId){
+                //街道名称
+                area = area + this.dataForm.street
+              }
               if (this.dataForm.addr !== null) {
                   // 详细地址
-                area = this.dataForm.province + this.dataForm.city + this.dataForm.area + this.dataForm.addr
+                area = this.dataForm.province + this.dataForm.city + this.dataForm.area + this.dataForm.street + this.dataForm.addr
                 this.zoom = 18
               }
             }
@@ -418,4 +468,4 @@ export default {
     width: 100%;
     height: 500px;
   }
-</style>
+</style>

src/views/modules/order/orderInfo.vue

@@ -384,6 +384,7 @@
                     {{ dataForm.userAddrOrder.province
                     }}{{ dataForm.userAddrOrder.city
                     }}{{ dataForm.userAddrOrder.area
+                    }}{{ dataForm.userAddrOrder.street
                     }}{{ dataForm.userAddrOrder.addr }}
                   </div>
                   <!-- <div class="res">北京市 北京市 朝阳区 元大都城垣遗址公园6号 辣婆婆(东元大都店)</div> -->