AiAreaPicker

src/apps/AppWalkask/AppWalkask.vue

@@ -11,10 +11,13 @@
         <div class="currentLeft" v-if="currentTabs == 0">
           <div class="currentLeft-top">
             <div class="left">
-              <u-icon name="map"></u-icon>
-              <div class="btns" style="display: inline-block" @click="show = true">
+              <img src="./components/images/icon2.png" alt="" />
+
+              <ai-area-picker v-model="areaId" ref="areaIds" :areaId="areaId" @select="areaSelect" style="color: #fff"> </ai-area-picker>
+
+              <!-- <div class="btns" style="display: inline-block" @click="show = true">
                 <u-icon name="arrow-down"></u-icon>
-              </div>
+              </div> -->
             </div>
 
             <u-search v-model="keyword" :clearabled="true" placeholder="请输入标题" :show-action="false" bg-color="#1F5CAF" search-icon-color="#E2E8F1" color="#E2E8F1" height="58" @search="handerSearch" @clear="handerClear"></u-search>
@@ -74,14 +77,16 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import AiEmpty from '../../components/AiEmpty.vue'
 import add from './components/add.vue'
 import detail from './components/detail.vue'
+import AiAreaPicker from '../../components/AiAreaPicker.vue'
 
 export default {
   name: 'AppWalkask',
   appName: '走访慰问',
-  components: { AiEmpty, add, detail },
+  components: { AiEmpty, add, detail, AiAreaPicker },
   props: {},
   data() {
     return {
@@ -117,10 +122,13 @@ export default {
       comp: '',
       params: null,
       current: 1,
+      areaId: '',
     }
   },
-  computed: {},
+  computed: { ...mapState(['user']) },
   created() {
+    console.log(this.user)
+    this.areaId = this.user.areaId
     this.getList()
   },
   mounted() {},
@@ -131,6 +139,7 @@ export default {
           params: {
             size: 6,
             current: this.current,
+            areaId: this.areaId,
           },
         })
         .then((res) => {
@@ -140,6 +149,14 @@ export default {
         })
     },
 
+    areaSelect(e) {
+      if (e.type == 5) {
+        this.areaId = e.id
+      } else {
+        return this.$u.toast('请选择到村')
+      }
+    },
+
     change(index) {
       this.currentTabs = index
     },
@@ -208,7 +225,13 @@ export default {
         background: #3975c6;
         padding: 24px 30px;
         .left {
-          width: 50%;
+          width: 40%;
+          display: flex;
+          align-items: center;
+          img {
+            width: 48px;
+            height: 48px;
+          }
         }
       }