修改页面的区域选择为页面

miniprogram/app.json

@@ -6,7 +6,8 @@
     "pages/feedback/feedback",
     "pages/monthOperator/monthOperator",
     "pages/homeAndReport/homeAndReport",
-    "pages/userGrowth/userGrowth"
+    "pages/userGrowth/userGrowth",
+    "pages/areaSelect/areaSelect"
   ],
   "window": {
     "backgroundTextStyle": "light",

miniprogram/pages/areaSelect/areaSelect.json

+{
+  "navigationBarTitleText": "区域选择",
+  "usingComponents": {}
+}
\ No newline at end of file

miniprogram/pages/areaSelect/areaSelect.ts

+import { baseFetch } from '../../api/fetch';
+
+// miniprogram/pages/areaSelect/areaSelect.js
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    selected: '',
+    selectedIndex: '',
+    areaList: [],
+    filterList: [],
+    methodName: '',
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function(options) {
+    console.log(options);
+    const { methodName, value } = options;
+    this.fetchAreaList();
+    this.setData!({
+      methodName,
+      selected: value,
+    });
+  },
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function() {},
+  fetchAreaList() {
+    baseFetch({
+      url: '/dcxy/baseArea/queryAll',
+    })
+      .then(res => {
+        if (res.data) {
+          this.setData!({
+            areaList: res.data,
+            filterList: res.data,
+          });
+          if (this.data.selected) {
+            let index = res.data.findIndex(
+              item => item.id == this.data.selected,
+            );
+            console.log(this.data.selected,index)
+            if (index > -1) {
+              this.setData({
+                selectedIndex: index,
+              });
+            }
+          }
+        } else {
+          this.setData!({
+            areaList: [],
+            filterList: [],
+          });
+        }
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  },
+  inputHandle(e) {
+    const { value } = e.detail;
+    console.log(e, value);
+    let filterList = [];
+    if (value) {
+      filterList = this.data.areaList.filter(item =>
+        item['areaName'].includes(value),
+      );
+    } else {
+      filterList = this.data.areaList;
+    }
+    this.setData({
+      filterList,
+    });
+  },
+  selectedHandle(e) {
+    const { value } = e.currentTarget.dataset;
+    console.log(e, value);
+    if (this.data.selectedIndex === value) {
+      this.setData({
+        selected: '',
+        selectedIndex: '',
+      });
+    } else {
+      this.setData({
+        selected: this.data.filterList[value].id,
+        selectedIndex: value,
+      });
+    }
+  },
+  bindPickerChange() {
+    let value = this.data.selected;
+    // this.setData!({
+    //   showPickerView: false,
+    // });
+    // this.triggerEvent('change', { value }, {});
+    var pages = getCurrentPages();
+    var prevPage = pages[pages.length - 2]; //上一个页面
+    let entity = {};
+    if (value) {
+      entity = {
+        id: value,
+        name: this.data.filterList[this.data.selectedIndex].areaName,
+      };
+    } else {
+      entity = { id: '', name: '' };
+    }
+    if (this.data.methodName && prevPage[this.data.methodName]) {
+      prevPage[this.data.methodName](entity);
+    }
+    wx.navigateBack({ delta: 1 });
+  },
+});

miniprogram/pages/areaSelect/areaSelect.wxml

+<!-- miniprogram/pages/areaSelect/areaSelect.wxml -->
+<view class="areaselect-pickBox">
+  <view class="areaselect-pickFilter">
+    <input class="areaselect-pickInput" type="text" bindconfirm="inputHandle" />
+    <view class="areaselect-pickBtn" bindtap="bindPickerChange">确认</view>
+  </view>
+  <view class="areaselect-list">
+    <view wx:for="{{filterList}}" class="areaselect-listItem {{selectedIndex === index?'selected':''}}" wx:key="{{item.id}}" data-value="{{index}}" bindtap="selectedHandle">
+      {{item.areaName}}
+    </view>
+  </view>
+</view>
\ No newline at end of file

miniprogram/pages/areaSelect/areaSelect.wxss

+/* miniprogram/pages/areaSelect/areaSelect.wxss */
+page {
+  height: 100%;
+}
+.areaselect-pickBox {
+  box-sizing: border-box;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  background-color: #fff;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.areaselect-pickFilter {
+  display: flex;
+  padding: 40rpx 40rpx 0;
+  align-items: center;
+}
+.areaselect-pickInput {
+  flex: 1;
+}
+.areaselect-pickBtn {
+  color: #6895fe;
+  margin-left: 20rpx;
+}
+.areaselect-list {
+  flex: 1;
+  padding: 40rpx 0;
+  overflow-y: auto;
+}
+.areaselect-listItem {
+  line-height: 100rpx;
+  font-size: 28rpx;
+  color: #333;
+  padding: 0 80rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.areaselect-listItem.selected {
+  background-color: #f0f5ff;
+}

miniprogram/pages/components/AreaSelect/AreaSelect.ts

@@ -20,9 +20,25 @@ Component({
       type: String,
       value: '',
       observer(newVal) {
+        console.log(newVal);
         this.setData({ selected: newVal });
       },
     },
+    mode: {
+      type: String,
+      value: 'selector',
+    },
+    methodName: {
+      type: String,
+      value: '',
+    },
+    showText: {
+      type: String,
+      value: '',
+      observer(val) {
+        console.log('in showText', val);
+      },
+    },
   },
   data: {
     showPickerView: false,
@@ -32,9 +48,15 @@ Component({
   },
   methods: {
     inputClickHandle() {
+      if (this.data.mode === 'page') {
+        wx.navigateTo({
+          url: `/pages/areaSelect/areaSelect?methodName=${this.data.methodName}&value=${this.data.value}`,
+        });
+      } else {
         this.setData!({
           showPickerView: !this.data.showPickerView,
         });
+      }
     },
     innerClickHandle(e) {
       return false;

miniprogram/pages/components/AreaSelect/AreaSelect.wxml

@@ -4,7 +4,8 @@
   <!-- <picker class="areaselect-picker" mode="{{mode}}" bindchange="bindPickerChange" value="{{selected}}" range="{{range}}" range-key="{{rangeKey}}" fields="{{fields}}"> -->
   <!-- </picker> -->
   <view class="areaselect-picker" bindtap="inputClickHandle">
-    <view wx:if="{{selected}}" class="select-value">{{range[selectedIndex][rangeKey]}}</view>
+    <view wx:if="{{mode === 'page' && selected}}" class="select-value">{{showText}}</view>
+    <view wx:elif="{{selected}}" class="select-value">{{range[selectedIndex][rangeKey]}}</view>
     <view wx:else class="select-placeholder">{{placeholder}}</view>
     <image class="select-icon" src="../../../images/btn_xiala@2x.png" mode="aspectFill" />
   </view>

miniprogram/pages/monthOperator/monthOperator.ts

-import { baseFetch, statisticsFetch } from '../../api/fetch';
+import { statisticsFetch } from '../../api/fetch';
 import { formatTime } from '../../utils/util';
 
 Page({
   onLoad() {
     this.initData();
-    this.fetchAreaList();
   },
   data: {
-    areaList: [],
     month: '',
-    areaId: 0,
+    areaId: '',
+    areaName: '',
     rechargeData: {
       title: '充值总额',
       numberType: 'price',
@@ -42,35 +41,17 @@ Page({
       this.fetchList();
     });
   },
-  fetchAreaList() {
-    baseFetch({
-      url: '/dcxy/baseArea/queryAll',
-    })
-      .then(res => {
-        if (res.data) {
-          this.setData!({
-            areaList: res.data,
-          });
-        } else {
-          this.setData!({
-            areaList: [],
-          });
-        }
-      })
-      .catch(err => {
-        console.log(err);
-      });
-  },
   areaChangeHandle(val) {
     console.log('areaChangeHandle', val);
-    const { value } = val.detail;
+    const { id, name } = val;
     this.setData!(
       {
-        areaId: value,
+        areaId: id,
+        areaName: name,
       },
       () => {
-        if (value) {
-          this.fetchList({ areaId: [value] });
+        if (id) {
+          this.fetchList({ areaId: [id] });
         } else {
           this.fetchList();
         }

miniprogram/pages/monthOperator/monthOperator.wxml

@@ -2,7 +2,7 @@
 <view class="monthOperator">
   <view class="monthOperator-filter">
     <view class="monthOperator-area">
-      <area-select range="{{areaList}}" range-key="{{'areaName'}}" bindchange="areaChangeHandle" placeholder="所属区域选择" />
+      <area-select mode="page" bindchange="areaChangeHandle" methodName="areaChangeHandle" value="{{areaId}}" showText="{{areaName}}" placeholder="所属区域选择" />
     </view>
     <view class="monthOperator-time">
       <c-select mode="date" fields="month" value="{{month}}" bindchange="monthChangeHandle" />

miniprogram/pages/userGrowth/userGrowth.ts

@@ -12,7 +12,8 @@ Page({
    */
   data: {
     month: '',
-    areaId: 0,
+    areaId: '',
+    areaName: '',
     areaList: [],
     growthList: [],
     customerCount: 0,
@@ -98,14 +99,15 @@ Page({
   },
   areaChangeHandle(val) {
     console.log('areaChangeHandle', val);
-    const { value } = val.detail;
+    const { id, name } = val;
     this.setData!(
       {
-        areaId: value,
+        areaId: id,
+        areaName: name,
       },
       () => {
-        if (value) {
-          this.fetchList({ areaId: value });
+        if (id) {
+          this.fetchList({ areaId: id });
         } else {
           this.fetchList();
         }

miniprogram/pages/userGrowth/userGrowth.wxml

@@ -16,7 +16,7 @@
   </view>
   <view class="userGrowth-filter">
     <view class="userGrowth-area">
-      <area-select range="{{areaList}}" range-key="{{'areaName'}}" bindchange="areaChangeHandle" placeholder="所属区域选择" />
+      <area-select mode="page" bindchange="areaChangeHandle" methodName="areaChangeHandle" value="{{areaId}}" showText="{{areaName}}" placeholder="所属区域选择" />
     </view>
     <view class="userGrowth-time">
       <c-select mode="date" fields="month" value="{{month}}" bindchange="monthChangeHandle" />