地区选择器

src/apps/AppCountryAlbum/AppCountryAlbum.vue

@@ -3,7 +3,7 @@
     <div class="list">
       <AiTopFixed>
         <div class="area-content">
-          <AiAreaPicker :areaId="user.areaId" v-model="areaId" @select="areaSelect" :name.sync="areaName">
+          <AiAreaPicker :areaId="user.areaId" :value="areaId" @select="areaSelect" :name.sync="areaName">
             <img src="./img/local-icon.png" alt="">
             <span class="label" v-if="areaName">{{ areaName }}</span>
             <span v-else>请选择</span>
@@ -19,7 +19,6 @@
         </div>
         <AiEmpty v-if="!list.length"/>
       </div>
-
     </div>
   </div>
 </template>

src/apps/AppPovertyAlleviation/Monitor/List.vue

@@ -7,11 +7,11 @@
         <div class="label" v-if="addressArea">{{ addressArea }}</div>
         <i v-else>请选择</i>
       </AiArea> -->
-      <AiAreaPicker ref="area" class="aiArea" :name.sync="addressArea" :areaId="areaId" mode="custom"
+      <ai-area-picker ref="area" class="aiArea" :value="addressAreaId" :name.sync="addressArea" :areaId="areaId" mode="custom"
                     @select="onChange">
         <span class="label" v-if="addressArea">{{ addressArea }}</span>
         <i v-else>请选择</i>
-      </AiAreaPicker>
+      </ai-area-picker>
     </div>
     <div class="list-wrapper">
       <div class="tab">
@@ -45,6 +45,7 @@
 </template>
 
 <script>
+import AiAreaPicker from '@/components/AiAreaPicker'
 
 export default {
   name: 'list',
@@ -62,6 +63,10 @@ export default {
     }
   },
 
+  components: {
+    AiAreaPicker
+  },
+
   created() {
     uni.showLoading()
     this.areaId = this.$store.state.user.areaId
@@ -86,7 +91,7 @@ export default {
     },
 
     onChange(e) {
-      this.addressAreaId = e.id
+      this.addressAreaId = e
 
       this.$nextTick(() => {
         this.reload()

src/apps/AppPovertyAlleviation/Monitor/Statistics.vue

@@ -3,7 +3,7 @@
     <div class="area">
       <i>可选范围</i>
       <span class="separat">/</span>
-      <AiAreaPicker ref="area" class="aiArea" :areaId="areaId" :name.sync="addressArea" mode="custom"
+      <AiAreaPicker ref="area" class="aiArea" :value="addressAreaId" :areaId="areaId" :name.sync="addressArea" mode="custom"
                     @select="onChange">
         <span class="label" v-if="addressArea">{{ addressArea }}</span>
         <i v-else>请选择</i>
@@ -100,7 +100,7 @@ export default {
     },
 
     onChange(e) {
-      this.addressAreaId = e.id
+      this.addressAreaId = e
 
       this.$nextTick(() => {
         this.reload()

src/apps/AppPovertyAlleviation/MonitorAdd.vue

@@ -33,15 +33,12 @@
             <span>地址</span>
           </div>
           <div class="right">
-            <!-- <AiArea class="aiArea" v-model="form.addressAreaId" mode="custom" fullname :areaRange="$areaId" :name.sync="form.addressArea">
-              <span class="label" v-if="form.addressArea">{{ form.addressArea }}</span>
-              <i v-else>请选择</i>
-              <u-icon name="arrow-right" color="#ddd"/>
-            </AiArea> -->
-            <AiAreaPicker ref="address" class="aiArea" :areaId="$areaId" mode="custom" all @select="onAreaChange">
-              <span class="label" v-if="form.addressArea">{{ form.addressArea }}</span>
-              <i v-else>请选择</i>
-              <u-icon name="arrow-right" color="#ddd"/>
+            <AiAreaPicker ref="address" class="aiArea" :fullName.sync="form.addressArea" :value="form.addressAreaId" :areaId="$areaId" mode="custom" all @select="onAreaChange">
+                <div class="aiArea">
+                  <span class="label" v-if="form.addressArea">{{ form.addressArea }}</span>
+                  <i v-else>请选择</i>
+                  <u-icon name="arrow-right" color="#ddd"/>
+                </div>
             </AiAreaPicker>
           </div>
         </div>
@@ -81,11 +78,13 @@
             <span>安置地区</span>
           </div>
           <div class="right">
-            <AiAreaPicker ref="area" class="aiArea" :areaId.sync="form.placeAreaId" mode="custom" all
+            <AiAreaPicker ref="area" class="aiArea" :value="form.placeAreaId" :fullName.sync="form.placeArea" mode="custom" all
                           @select="onChange">
-              <span class="label" v-if="form.placeArea">{{ form.placeArea }}</span>
-              <i v-else>请选择</i>
-              <u-icon name="arrow-right" color="#ddd"/>
+              <div class="aiArea">
+                <span class="label" v-if="form.placeArea">{{ form.placeArea }}</span>
+                <i v-else>请选择</i>
+                <u-icon name="arrow-right" color="#ddd"/>
+              </div>
             </AiAreaPicker>
           </div>
         </div>
@@ -174,25 +173,11 @@ export default {
     },
 
     onAreaChange(e) {
-      this.form.addressAreaId = e.id
-      const areaList = this.$refs.address.fullArea
-      let fullAreaName = ''
-      areaList.forEach(item => {
-        fullAreaName = fullAreaName + item.name
-      })
-
-      this.form.addressArea = fullAreaName.replace('全国', '')
+      this.form.addressAreaId = e
     },
 
     onChange(e) {
-      this.form.placeAreaId = e.id
-      const areaList = this.$refs.area.fullArea
-      let fullAreaName = ''
-      areaList.forEach(item => {
-        fullAreaName = fullAreaName + item.name
-      })
-
-      this.form.placeArea = fullAreaName.replace('全国', '')
+      this.form.placeAreaId = e
     },
 
     getInfo(id) {
@@ -218,6 +203,11 @@ export default {
     align-items: center;
 
     .label {
+      max-width: 480px;
+      height: 112px;
+      overflow: hidden;
+      text-overflow:ellipsis;
+      white-space: nowrap;
       color: #303133 !important;
       font-size: 30px;
     }

src/apps/AppResidentActivitie/Add.vue

@@ -20,7 +20,8 @@
         <div class="line"></div>
 
         <u-form-item label="发布地区" prop="areaId" required :border-bottom="false" right-icon="arrow-right" class="addresss">
-          <AiAreaPicker v-model="forms.areaId" :areaId="areaId" @select="areaSelect" style="color: #333"></AiAreaPicker>
+          <AiAreaPicker v-model="forms.areaId" :areaId="user.areaId" @select="areaSelect" style="color: #333">
+          </AiAreaPicker>
         </u-form-item>
 
         <div class="line"></div>
@@ -73,7 +74,6 @@ export default {
         content: '',
         url: [],
         areaId: '',
-
         beginTime: '',
         endTime: '',
         address: '',
@@ -234,7 +234,7 @@ export default {
     },
 
     areaSelect(e) {
-      this.forms.areaId = e.id
+      this.forms.areaId = e
     },
   },
 }
@@ -245,6 +245,29 @@ export default {
   height: 100%;
   padding-bottom: 112px;
 
+  .aiArea {
+    display: flex;
+    align-items: center;
+
+    .label {
+      max-width: 480px;
+      height: 112px;
+      line-height: 112px;
+      overflow: hidden;
+      text-overflow:ellipsis;
+      white-space: nowrap;
+      color: #303133 !important;
+      font-size: 30px;
+    }
+
+    i {
+      margin-left: 4px;
+      font-style: normal;
+      color: #999999;
+      font-size: 30px;
+    }
+  }
+
   .header-description {
     padding-bottom: 112px;
     ::v-deep .u-form {