调整小程序

2023-09-22 15:41:37 +08:00
parent b0ce6e2ad1
commit e06438f776
52 changed files with 4958 additions and 0 deletions
--- a/atguigu-tuan/components/PickUpLocationHeader/PickUpLocationHeader.vue
+++ b/atguigu-tuan/components/PickUpLocationHeader/PickUpLocationHeader.vue
@@ -0,0 +1,130 @@
+<template>
+  <view class="gg-header">
+    <view class="gg-header-location u-p-r-50" @click="show = true">
+      <text class="u-p-r-10">{{ currentPickUpArea }}</text>
+      <u-icon color="gray" name="arrow-down-fill" size="20"></u-icon>
+    </view>
+    <!-- 如果利用v-model操作，会造成searchKeyword对于父组件的二次重渲染问题，所以将value与blur拆分，
+    并且利用update:searchKeyword的方式将数据传递到父组件，并进行本组件的数据搜索操作 -->
+    <u-search
+        :clearabled="false"
+        :show-action="true"
+        :value="searchKeyword"
+        class="gg-header-search"
+        height="70"
+        input-align="left"
+        @blur="onBlurSearch"
+        @custom="searchLocation"
+        @search="searchLocation"
+    ></u-search>
+    <u-picker v-model="show" :default-selector="[0]" :range="findAllList" mode="selector" range-key="regionName"
+              @confirm="findAllListConfirm"></u-picker>
+  </view>
+</template>
+
+<script>
+import {mapState, mapMutations, mapActions} from 'vuex';
+import {BAIDU_MAP_AK} from '../../common/const.js';
+// 百度地址资料：https://lbsyun.baidu.com/index.php?title=wxjsapi/guide/geocoding
+const bmap = require('../../common/bmap-wx.min.js');
+const BMap = new bmap.BMapWX({
+  ak: BAIDU_MAP_AK
+});
+
+export default {
+  name: 'PickUpLocationHeader',
+  props: ['searchKeyword'],
+  data() {
+    return {
+      show: false,
+      latitude: '',
+      longitude: ''
+    };
+  },
+  computed: {
+    ...mapState('pickUpLocationModule', ['findAllList', 'currentPickUpArea'])
+  },
+  methods: {
+    ...mapMutations('pickUpLocationModule', ['setCurrentPickUpAreaMutation']),
+    ...mapActions('pickUpLocationModule', ['getSysRegionFindAllListAction']),
+    findAllListConfirm(index) {
+      // 通过百度地图进行地址解析，返回经纬度，并通知父组件进行列表显示处理
+      // 发起geocoding检索请求
+      BMap.geocoding({
+        address: this.findAllList[index],
+        fail: e => {
+          console.log(e);
+        },
+        success: data => {
+          let wxMarkerData = data.wxMarkerData;
+          this.latitude = wxMarkerData[0].latitude;
+          this.longitude = wxMarkerData[0].longitude;
+          // 通过父组件查询数据
+          this.$emit('getSearchLeader', {
+            latitude: this.latitude,
+            longitude: this.longitude
+          });
+
+          this.setCurrentPickUpAreaMutation(this.findAllList[index])
+        }
+      });
+    },
+    searchLocation(value) {
+      if (value && value.trim().length > 0) {
+        BMap.geocoding({
+          address: value,
+          fail: e => {
+            console.log(e);
+          },
+          success: data => {
+            let wxMarkerData = data.wxMarkerData;
+            this.latitude = wxMarkerData[0].latitude;
+            this.longitude = wxMarkerData[0].longitude;
+
+            // 通过父组件查询数据
+            this.$emit('getSearchLeader', {
+              latitude: this.latitude,
+              longitude: this.longitude
+            });
+          }
+        });
+      }
+    },
+    onBlurSearch(value) {
+      this.$emit('update:searchKeyword', value);
+    }
+  },
+  watch: {
+    searchKeyword: {
+      handler(newVal, oldVal) {
+        console.log(newVal, oldVal)
+        this.searchLocation(newVal);
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    this.getSysRegionFindAllListAction();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.gg {
+  &-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &-location {
+      text {
+        color: gray;
+      }
+    }
+
+    &-search {
+      flex: 1;
+    }
+  }
+}
+</style>