|
|
@@ -1,265 +1,276 @@
|
|
|
<template>
|
|
|
- <div class="app-area-sel">
|
|
|
- <bottom-popup
|
|
|
- class="popup-wrap" :show="showPopup" @close="hidePopup">
|
|
|
- <div class="map-wrap">
|
|
|
- <div class="map-top-tit-wrap">
|
|
|
- <div class="map-top-tit">选择收货地址</div>
|
|
|
- <app-close icon="iconguanbi" @close="hidePopup" />
|
|
|
- </div>
|
|
|
- <!-- 搜索 -->
|
|
|
- <div class="map-search">
|
|
|
- <app-search-module
|
|
|
- ref="aaaaa"
|
|
|
- placeholder="请输入你的收货地址"
|
|
|
- :focus="isFocus"
|
|
|
- @input="searchFn" />
|
|
|
- </div>
|
|
|
- <!-- 列表 -->
|
|
|
- <scroll-view class="near-list" scroll-y>
|
|
|
- <view v-for="(item,index) in nearListData" :key="index" @click="switchAddress(item,index)" class="near-item">
|
|
|
- <div class="current-site" :class="{'active' : currentSelectAddress === index}"></div>
|
|
|
- <view>
|
|
|
- <view :class="['title',currentSelectAddress === index? 'title1':'']">{{item.title}}</view>
|
|
|
- <view class="add">{{item.address}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </div>
|
|
|
- </bottom-popup>
|
|
|
- </div>
|
|
|
+ <div class="app-area-sel">
|
|
|
+ <bottom-popup class="popup-wrap" :show="showPopup" @close="hidePopup">
|
|
|
+ <div class="map-wrap">
|
|
|
+ <div class="map-top-tit-wrap">
|
|
|
+ <div class="map-top-tit">选择收货地址</div>
|
|
|
+ <app-close icon="iconguanbi" @close="hidePopup" />
|
|
|
+ </div>
|
|
|
+ <!-- 搜索 -->
|
|
|
+ <div class="map-search">
|
|
|
+ <app-search-module
|
|
|
+ ref="aaaaa"
|
|
|
+ placeholder="请输入你的收货地址"
|
|
|
+ :focus="isFocus"
|
|
|
+ @input="searchFn"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <scroll-view class="near-list" scroll-y>
|
|
|
+ <view
|
|
|
+ v-for="(item,index) in nearListData"
|
|
|
+ :key="index"
|
|
|
+ @click="switchAddress(item,index)"
|
|
|
+ class="near-item"
|
|
|
+ >
|
|
|
+ <div class="current-site" :class="{'active' : currentSelectAddress === index}"></div>
|
|
|
+ <view>
|
|
|
+ <view :class="['title',currentSelectAddress === index? 'title1':'']">{{item.title}}</view>
|
|
|
+ <view class="add">{{item.address}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </div>
|
|
|
+ </bottom-popup>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import BottomPopup from '@/components/plugin/bottom-popup'
|
|
|
- import AppClose from '@/components/module/app-close'
|
|
|
- import AppSearchModule from '@/components/module/app-search'
|
|
|
- // api
|
|
|
- import { suggestion } from '@/api/common'
|
|
|
- export default {
|
|
|
- name: 'app-area-sel',
|
|
|
- components: {
|
|
|
- BottomPopup,
|
|
|
- AppClose,
|
|
|
- AppSearchModule
|
|
|
- },
|
|
|
- props: {
|
|
|
- show: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- city: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
- },
|
|
|
- isFocus:{
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- showPopup: false,
|
|
|
- keyword: '',
|
|
|
- // 地图
|
|
|
- // latitude: 24.44579,
|
|
|
- // longitude: 118.08243,
|
|
|
- // 列表
|
|
|
- currentSelectAddress: null,
|
|
|
- nearListData: []
|
|
|
- }
|
|
|
- },
|
|
|
- // onLoad(val) {
|
|
|
- // this.mapCtx = uni.createMapContext('myMap')
|
|
|
- // this.query = val
|
|
|
- // this.reload()
|
|
|
- // },
|
|
|
+import BottomPopup from "@/components/plugin/bottom-popup";
|
|
|
+import AppClose from "@/components/module/app-close";
|
|
|
+import AppSearchModule from "@/components/module/app-search";
|
|
|
+// api
|
|
|
+import { suggestion } from "@/api/common";
|
|
|
+export default {
|
|
|
+ name: "app-area-sel",
|
|
|
+ components: {
|
|
|
+ BottomPopup,
|
|
|
+ AppClose,
|
|
|
+ AppSearchModule
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ show: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ city: {
|
|
|
+ type: String,
|
|
|
+ default: ""
|
|
|
+ },
|
|
|
+ isFocus: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showPopup: false,
|
|
|
+ keyword: "",
|
|
|
+ // 地图
|
|
|
+ // latitude: 24.44579,
|
|
|
+ // longitude: 118.08243,
|
|
|
+ // 列表
|
|
|
+ currentSelectAddress: null,
|
|
|
+ nearListData: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // onLoad(val) {
|
|
|
+ // this.mapCtx = uni.createMapContext('myMap')
|
|
|
+ // this.query = val
|
|
|
+ // this.reload()
|
|
|
+ // },
|
|
|
|
|
|
- watch: {
|
|
|
- show(val) {
|
|
|
- this.showPopup = val
|
|
|
+ watch: {
|
|
|
+ show(val) {
|
|
|
+ this.showPopup = val;
|
|
|
|
|
|
- // #ifdef H5
|
|
|
- this.$nextTick(function() {
|
|
|
- setTimeout(() => {
|
|
|
- console.log('this.$refs.aaaaa.$refs.searchInput', this.$refs.aaaaa.$refs.searchInput)
|
|
|
- this.$refs.aaaaa.$refs.searchInput._focusInput()
|
|
|
- }, 1000)
|
|
|
- })
|
|
|
- // #endif
|
|
|
+ // #ifdef H5
|
|
|
+ this.$nextTick(function() {
|
|
|
+ setTimeout(() => {
|
|
|
+ console.log(
|
|
|
+ "this.$refs.aaaaa.$refs.searchInput",
|
|
|
+ this.$refs.aaaaa.$refs.searchInput
|
|
|
+ );
|
|
|
+ this.$refs.aaaaa.$refs.searchInput._focusInput();
|
|
|
+ }, 1000);
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
|
|
|
- // if (val) {
|
|
|
- // this.getAreaList()
|
|
|
- // }
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getAreaList() {
|
|
|
- if (!this.keyword) {
|
|
|
- return false
|
|
|
- }
|
|
|
- suggestion({ region: this.city, keyword: this.keyword }).then(res => {
|
|
|
- this.nearListData = res.data.data
|
|
|
- })
|
|
|
- },
|
|
|
- // 搜索
|
|
|
- searchFn(e) {
|
|
|
- this.keyword = e
|
|
|
- this.getAreaList()
|
|
|
- // this.$emit('search', e)
|
|
|
- // uni.reverseGeocode({
|
|
|
- // latitude: 25.661333498914413,
|
|
|
- // longitude: 117.5537109375
|
|
|
- // }, (e) => {
|
|
|
- // console.log(e)
|
|
|
- // })
|
|
|
- },
|
|
|
- hidePopup() {
|
|
|
- this.$emit('update:show', false)
|
|
|
- this.$emit('hide')
|
|
|
- },
|
|
|
- switchAddress(item, index) {
|
|
|
- this.currentSelectAddress = index
|
|
|
- // this.latitude = item.location.lat
|
|
|
- // this.longitude = item.location.lng
|
|
|
- // if (!this.$util.isEmpty(item.province) && !this.$util.isEmpty(item.city)) {
|
|
|
- // this.currentRegion = [item.province, item.city, item.district]
|
|
|
- // }
|
|
|
- this.$emit('change', item)
|
|
|
- this.hidePopup()
|
|
|
- }
|
|
|
- // 地图操作
|
|
|
- // reload() {
|
|
|
- // uni.getLocation({
|
|
|
- // type: 'wgs84',
|
|
|
- // success: res => {
|
|
|
- // this.latitude = res.latitude
|
|
|
- // this.longitude = res.longitude
|
|
|
- // // this.nearList()
|
|
|
- // },
|
|
|
- // // eslint-disable-next-line handle-callback-err
|
|
|
- // fail: err => {
|
|
|
- // this.$msg('定位失败')
|
|
|
- // // setTimeout(function() {
|
|
|
- // // uni.navigateBack({
|
|
|
- // // delta: 1
|
|
|
- // // })
|
|
|
- // // }, 1500)
|
|
|
- // }
|
|
|
- // })
|
|
|
- // },
|
|
|
- // mapChange(e) {
|
|
|
- // if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')) {
|
|
|
- // this.mapCtx.getCenterLocation({
|
|
|
- // success: res => {
|
|
|
- // this.longitude = res.longitude
|
|
|
- // this.latitude = res.latitude
|
|
|
- // // this.nearList()
|
|
|
- // }
|
|
|
- // })
|
|
|
- // }
|
|
|
- // },
|
|
|
- // 获取列表
|
|
|
- // nearList() {
|
|
|
- // geocoder({
|
|
|
- // latitude: this.latitude,
|
|
|
- // longitude: this.longitude
|
|
|
- // }).then(res => {
|
|
|
- // console.log(res)
|
|
|
- // let data = res.result
|
|
|
- // this.currentSelectAddress = 0
|
|
|
- // this.nearListData = data.pois
|
|
|
- // // this.currentRegion = [data.address_component.province, data.address_component.city, data.address_component.district]
|
|
|
- // })
|
|
|
- // },
|
|
|
- }
|
|
|
- }
|
|
|
+ // if (val) {
|
|
|
+ // this.getAreaList()
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getAreaList() {
|
|
|
+ if (!this.keyword) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ suggestion({ region: this.city, keyword: this.keyword }).then(res => {
|
|
|
+ this.nearListData = res.data.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 搜索
|
|
|
+ searchFn(e) {
|
|
|
+ this.keyword = e;
|
|
|
+ this.getAreaList();
|
|
|
+ // this.$emit('search', e)
|
|
|
+ // uni.reverseGeocode({
|
|
|
+ // latitude: 25.661333498914413,
|
|
|
+ // longitude: 117.5537109375
|
|
|
+ // }, (e) => {
|
|
|
+ // console.log(e)
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ hidePopup() {
|
|
|
+ this.$emit("update:show", false);
|
|
|
+ this.$emit("hide");
|
|
|
+ },
|
|
|
+ switchAddress(item, index) {
|
|
|
+ this.currentSelectAddress = index;
|
|
|
+ // this.latitude = item.location.lat
|
|
|
+ // this.longitude = item.location.lng
|
|
|
+ // if (!this.$util.isEmpty(item.province) && !this.$util.isEmpty(item.city)) {
|
|
|
+ // this.currentRegion = [item.province, item.city, item.district]
|
|
|
+ // }
|
|
|
+ this.$emit("change", item);
|
|
|
+ this.hidePopup();
|
|
|
+ }
|
|
|
+ // 地图操作
|
|
|
+ // reload() {
|
|
|
+ // uni.getLocation({
|
|
|
+ // type: 'wgs84',
|
|
|
+ // success: res => {
|
|
|
+ // this.latitude = res.latitude
|
|
|
+ // this.longitude = res.longitude
|
|
|
+ // // this.nearList()
|
|
|
+ // },
|
|
|
+ // // eslint-disable-next-line handle-callback-err
|
|
|
+ // fail: err => {
|
|
|
+ // this.$msg('定位失败')
|
|
|
+ // // setTimeout(function() {
|
|
|
+ // // uni.navigateBack({
|
|
|
+ // // delta: 1
|
|
|
+ // // })
|
|
|
+ // // }, 1500)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // },
|
|
|
+ // mapChange(e) {
|
|
|
+ // if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')) {
|
|
|
+ // this.mapCtx.getCenterLocation({
|
|
|
+ // success: res => {
|
|
|
+ // this.longitude = res.longitude
|
|
|
+ // this.latitude = res.latitude
|
|
|
+ // // this.nearList()
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // 获取列表
|
|
|
+ // nearList() {
|
|
|
+ // geocoder({
|
|
|
+ // latitude: this.latitude,
|
|
|
+ // longitude: this.longitude
|
|
|
+ // }).then(res => {
|
|
|
+ // console.log(res)
|
|
|
+ // let data = res.result
|
|
|
+ // this.currentSelectAddress = 0
|
|
|
+ // this.nearListData = data.pois
|
|
|
+ // // this.currentRegion = [data.address_component.province, data.address_component.city, data.address_component.district]
|
|
|
+ // })
|
|
|
+ // },
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- .app-area-sel {
|
|
|
-
|
|
|
- // 弹窗
|
|
|
- /deep/.popup-wrap {
|
|
|
- position: relative;
|
|
|
- .tui-popup-class {
|
|
|
- border-top-left-radius: 20px;
|
|
|
- border-top-right-radius: 20px;
|
|
|
- }
|
|
|
- & .tui-bottom-popup {
|
|
|
- position: absolute!important;
|
|
|
- bottom:0;
|
|
|
- }
|
|
|
- }
|
|
|
- .map-wrap {
|
|
|
- .map-top-tit-wrap {
|
|
|
- padding: 30px 0;
|
|
|
- text-align: center;
|
|
|
- font-size: 34px;
|
|
|
- }
|
|
|
- .map-search {
|
|
|
- padding: 0 30px;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
- .map-box {
|
|
|
- .current-site-icon {
|
|
|
- width: 63px;
|
|
|
- height: 90px;
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- }
|
|
|
- }
|
|
|
+.app-area-sel {
|
|
|
+ // 弹窗
|
|
|
+ /deep/.popup-wrap {
|
|
|
+ position: relative;
|
|
|
+ .tui-popup-class {
|
|
|
+ border-top-left-radius: 20px;
|
|
|
+ border-top-right-radius: 20px;
|
|
|
+ }
|
|
|
+ & .tui-bottom-popup {
|
|
|
+ position: absolute !important;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .map-wrap {
|
|
|
+ .map-top-tit-wrap {
|
|
|
+ padding: 30px 0;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 34px;
|
|
|
+ }
|
|
|
+ .map-search {
|
|
|
+ padding: 0 30px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .map-box {
|
|
|
+ .current-site-icon {
|
|
|
+ width: 63px;
|
|
|
+ height: 90px;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- // 列表
|
|
|
- .near-list {
|
|
|
- height: 1100rpx;
|
|
|
- // padding-bottom: 110rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- overflow: hidden;
|
|
|
- .near-item {
|
|
|
- line-height: 40rpx;
|
|
|
- padding: 18rpx 50rpx 18rpx 0;
|
|
|
- margin-left: 90px;
|
|
|
- text-align: left;
|
|
|
- border-bottom: 1px solid #eee;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- .current-site {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- background-color: #dedede;
|
|
|
- border-radius: 50%;
|
|
|
- position: absolute;
|
|
|
- top: 60rpx;
|
|
|
- left: -60rpx;
|
|
|
- &.active {
|
|
|
- background-color: $mainColor;
|
|
|
- }
|
|
|
- }
|
|
|
- .near-item .title {
|
|
|
- color: #282828;
|
|
|
- font-size: 28rpx;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
- .near-item .add {
|
|
|
- color: $fontColor3;
|
|
|
- font-size: 22rpx;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
- .near-item .title1 {
|
|
|
- color: $mainColor;
|
|
|
- }
|
|
|
- .near-item .add1 {
|
|
|
- color: $mainColor;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
+ // 列表
|
|
|
+ .near-list {
|
|
|
+ /* #ifdef H5 */
|
|
|
+ height: 1100rpx;
|
|
|
+ /* #endif */
|
|
|
+ /* #ifdef MP-WEIXIN */
|
|
|
+ height: 830rpx;
|
|
|
+ /* #endif */
|
|
|
+ // padding-bottom: 110rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ .near-item {
|
|
|
+ line-height: 40rpx;
|
|
|
+ padding: 18rpx 50rpx 18rpx 0;
|
|
|
+ margin-left: 90px;
|
|
|
+ text-align: left;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .current-site {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ background-color: #dedede;
|
|
|
+ border-radius: 50%;
|
|
|
+ position: absolute;
|
|
|
+ top: 60rpx;
|
|
|
+ left: -60rpx;
|
|
|
+ &.active {
|
|
|
+ background-color: $mainColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .near-item .title {
|
|
|
+ color: #282828;
|
|
|
+ font-size: 28rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .near-item .add {
|
|
|
+ color: $fontColor3;
|
|
|
+ font-size: 22rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .near-item .title1 {
|
|
|
+ color: $mainColor;
|
|
|
+ }
|
|
|
+ .near-item .add1 {
|
|
|
+ color: $mainColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
shish