609 lines
16 KiB
Vue
609 lines
16 KiB
Vue
<template>
|
|
<view class="page" :style="themeColor">
|
|
<view class="flex flex-direction flex-wrap align-stretch benben-position-layout flex selectlocationAddress_flex_0"
|
|
:style="{height:(200+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
|
|
<view class='flex flex-wrap align-center justify-between selectlocationAddress_fd0_0'>
|
|
<view class='flex flex-wrap align-center selectlocationAddress_fd0_0_c0' @tap.stop="handleJumpDiy"
|
|
data-type="back" data-url="1">
|
|
<text class='fu-iconfont2 selectlocationAddress_fd0_0_c0_c0'></text>
|
|
</view>
|
|
<view class='flex flex-wrap align-center'>
|
|
<text class='selectlocationAddress_fd0_0_c1_c0'>选择收货地址</text>
|
|
</view>
|
|
<!-- #ifndef MP-WEIXIN -->
|
|
<view class='flex flex-wrap align-center justify-end selectlocationAddress_fd0_0_c2' @tap.stop="handleJumpDiy"
|
|
data-type="navigateTo" :data-url="`/pages/my/addAddress/addAddress`">
|
|
<text class='selectlocationAddress_fd0_0_c2_c0'>新增地址</text>
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view class='flex flex-wrap align-center justify-end selectlocationAddress_fd0_0_c2'>
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
<view class='flex align-center selectlocationAddress_fd0_1'>
|
|
<view class='flex flex-wrap align-center' @tap.stop="handleChooseCity" data-type="navigateTo"
|
|
:data-url="`/pages/sy/citySelection/citySelection`">
|
|
<image class='selectlocationAddress_fd0_1_c0_c0' mode="aspectFit" :src='STATIC_URL+"52.png"'></image>
|
|
<text class='selectlocationAddress_fd0_1_c0_c1'>{{city || '定位中'}}</text>
|
|
</view>
|
|
<view class='flex align-center flex-sub selectlocationAddress_fd0_1_c1'>
|
|
<image class='selectlocationAddress_fd0_1_c1_c0' mode="aspectFill" :src='STATIC_URL+"53.png"'></image>
|
|
<input style="margin-left: 24rpx;" type="text" placeholder="搜索地点" confirm-type="done" :maxlength="-1" @input="handleInput"
|
|
@confirm="handleSearch" placeholder-style="color:rgba(153, 153, 153, 1);font-size:28rpx" v-model="keyword" />
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view :style="{height: (200+StatusBarRpx)+'rpx'}"></view>
|
|
<!---flex布局flex布局开始-->
|
|
<view class="flex flex-wrap align-center justify-between benben-flex-layout selectlocationAddress_flex_1">
|
|
<view class='selectlocationAddress_fd1_0 text-cut'>{{addr || '定位中'}}</view>
|
|
<image class='selectlocationAddress_fd1_1' mode="aspectFill" @click="getLocation" :src='STATIC_URL+"54.png"'></image>
|
|
</view>
|
|
|
|
<!---flex布局flex布局结束-->
|
|
<!---flex布局flex布局开始-->
|
|
<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout selectlocationAddress_flex_2">
|
|
<view class='flex flex-wrap align-center justify-between selectlocationAddress_fd2_0'>
|
|
<view class="flex align-center">
|
|
<image class='selectlocationAddress_fd2_0_c0' mode="aspectFit" :src='STATIC_URL+"55.png"'></image>
|
|
<text class='selectlocationAddress_fd2_0_c1'>我的收货地址</text>
|
|
</view>
|
|
<text class='selectlocationAddress_fd2_0_c1' @tap.stop="handleJumpDiy"
|
|
data-type="navigateTo" :data-url="`/pages/my/addAddress/addAddress`">新增地址</text>
|
|
</view>
|
|
<fu-empty-ui v-if="address_list.length === 0 && isInit"></fu-empty-ui>
|
|
<view class='flex flex-direction flex-wrap align-stretch selectlocationAddress_fd2_1' @click="handleSelectAddress(item)" v-for="(item, index) in address_list" :key="index">
|
|
<view class='flex flex-wrap align-center'>
|
|
<text class='selectlocationAddress_fd2_1_c0_c0'>{{item.real_name}}</text>
|
|
<text class='selectlocationAddress_fd2_1_c0_c1'>(</text>
|
|
<text class='selectlocationAddress_fd2_1_c0_c2'>{{item.sex == 1 ? '先生' : '女士'}}</text>
|
|
<text class='selectlocationAddress_fd2_1_c0_c3'>)</text>
|
|
<text class='selectlocationAddress_fd2_1_c0_c4'>{{item.mobile}}</text>
|
|
</view>
|
|
<view class='flex flex-wrap align-center selectlocationAddress_fd2_1_c1'>
|
|
<text class='selectlocationAddress_fd2_1_c1_c0'>{{item.probince || ''}}{{item.city || ''}}{{item.district || ''}}{{item.detail}}</text>
|
|
</view>
|
|
</view>
|
|
<view v-if="address_list.length != allAddressList.length" class='flex flex-wrap align-center justify-center selectlocationAddress_fd2_3' @click="handleShowAll">
|
|
<text class='selectlocationAddress_fd2_3_c0'>展开全部地址</text>
|
|
<image class='selectlocationAddress_fd2_3_c1' mode="aspectFit" :src='STATIC_URL+"56.png"'></image>
|
|
</view>
|
|
</view>
|
|
|
|
<!---flex布局flex布局结束-->
|
|
<!---flex布局flex布局开始-->
|
|
<view class="flex benben-flex-layout flex-wrap align-center selectlocationAddress_flex_3">
|
|
</view>
|
|
|
|
<!---flex布局flex布局结束-->
|
|
<!---flex布局flex布局开始-->
|
|
<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout selectlocationAddress_flex_4">
|
|
<view class='flex flex-wrap align-center selectlocationAddress_fd4_0'>
|
|
<image class='selectlocationAddress_fd4_0_c0' mode="aspectFit" :src='STATIC_URL+"55.png"'></image>
|
|
<text class='selectlocationAddress_fd4_0_c1'>附近地址</text>
|
|
</view>
|
|
<view class='flex flex-direction flex-wrap align-stretch selectlocationAddress_fd4_1' @click="handleSelectPoi(item)" v-for="(item, index) in poiList" :key="index">
|
|
<view class='flex flex-wrap align-center'>
|
|
<text class='selectlocationAddress_fd4_1_c0_c0'>{{item.name}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!---flex布局flex布局结束-->
|
|
|
|
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import amap from '@/common/amap-wx.js';
|
|
export default {
|
|
components: {},
|
|
|
|
|
|
data() {
|
|
return {
|
|
"keyword": "",
|
|
city: '',
|
|
isInit: false,
|
|
address_list: [],
|
|
allAddressList: [],
|
|
addr: '',
|
|
amapPlugin: null, //new地图
|
|
key: '886bfe2d6c32bd8eac97c2e6d821ed0b',
|
|
poiList: [],
|
|
latitude: '',
|
|
longitude: ''
|
|
};
|
|
},
|
|
computed: {
|
|
themeColor() {
|
|
return this.$store.getters.themeColor
|
|
},
|
|
|
|
},
|
|
watch: {},
|
|
onLoad(options) {
|
|
this.city = options.city || '';
|
|
this.addr = options.addr || '';
|
|
if (!this.addr || !this.city) {
|
|
this.getLocation()
|
|
}
|
|
this.amapPlugin = new amap.AMapWX({
|
|
key: this.key
|
|
});
|
|
this.getPoiList();
|
|
|
|
},
|
|
onUnload() {
|
|
|
|
},
|
|
onReady() {
|
|
|
|
},
|
|
onShow() {
|
|
this.getAddressList();
|
|
},
|
|
onHide() {
|
|
|
|
},
|
|
onResize() {
|
|
|
|
},
|
|
onPullDownRefresh() {
|
|
|
|
},
|
|
onReachBottom(e) {
|
|
|
|
},
|
|
onPageScroll(e) {
|
|
|
|
},
|
|
methods: {
|
|
handleSelectAddress(item) {
|
|
let params = {
|
|
city: item.city,
|
|
lat: item.lat,
|
|
lng: item.lng,
|
|
address: item.detail
|
|
}
|
|
uni.$emit('SELECT_ADDRESS', params)
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
},
|
|
handleSelectPoi(item) {
|
|
let params = {
|
|
city: item.cityname || this.city,
|
|
lat: item.location.split(',')[1],
|
|
lng: item.location.split(',')[0],
|
|
address: item.name
|
|
}
|
|
uni.$emit('SELECT_ADDRESS', params)
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
},
|
|
getLocation() {
|
|
this.city = '定位中'
|
|
this.addr = '定位中'
|
|
this.amapPlugin.getRegeo({
|
|
success: (data) => {
|
|
//成功回调
|
|
console.log('地理位置' + JSON.stringify(data[0].regeocodeData.pois));
|
|
let addr = data[0].regeocodeData.pois.length ? data[0].regeocodeData.pois[0].name :
|
|
data[0].regeocodeData.addressComponent.district;
|
|
global.city = data[0].regeocodeData.addressComponent.city
|
|
global.addr = addr
|
|
this.city = global.city
|
|
this.addr = global.addr
|
|
},
|
|
fail: (err) => {
|
|
this.city = '定位失败，请选择'
|
|
console.error(err)
|
|
}
|
|
})
|
|
},
|
|
handleChooseCity() {
|
|
uni.$once('CHOOSE_CITY', data => {
|
|
console.log('监听到的数据', data)
|
|
this.city = data.name;
|
|
this.latitude = data.lat;
|
|
this.longitude = data.lng;
|
|
// this.getTipsList();
|
|
})
|
|
uni.navigateTo({
|
|
url: '/pages/sy/citySelection/citySelection?city=' + this.city
|
|
})
|
|
},
|
|
handleInput(e) {
|
|
this.getTipsList()
|
|
},
|
|
// 去搜索
|
|
handleSearch(e, text) {
|
|
this.getTipsList()
|
|
},
|
|
_getPOIAroundList() {
|
|
this.amapPlugin.getPoiAround({
|
|
keywords: this.keyword,
|
|
location: `${this.longitude},${this.latitude}`,
|
|
success: (res) => {
|
|
console.log('poi周边列表', res)
|
|
if (res && res.poisData) {
|
|
this.poiList = res.poisData
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
|
|
}
|
|
});
|
|
},
|
|
handleShowAll() {
|
|
this.address_list = this.allAddressList;
|
|
},
|
|
getPoiList() {
|
|
console.log(123)
|
|
this.amapPlugin.getPoiAround({
|
|
// location: `${this.lng},${this.lat}`,
|
|
success: (data) => {
|
|
console.log('poi周边列表', data)
|
|
if (data && data.poisData) {
|
|
this.poiList = data.poisData
|
|
}
|
|
}
|
|
})
|
|
},
|
|
getTipsList() {
|
|
if (!this.keyword) {
|
|
this.$Common.toast('请先选择当前城市')
|
|
return
|
|
}
|
|
console.log(123)
|
|
this.amapPlugin.getInputtips({
|
|
keywords: this.keyword,
|
|
city: this.city,
|
|
success: (data) => {
|
|
console.log('tips周边列表', data)
|
|
if (data && data.tips) {
|
|
this.poiList = data.tips
|
|
}
|
|
}
|
|
})
|
|
},
|
|
/**
|
|
* @func 获取地址列表
|
|
*/
|
|
getAddressList() {
|
|
this.$api.post(global.apiUrls.post636f7683cf195, {list_rows: 1000})
|
|
.then((res) => {
|
|
console.log("地址列表", res);
|
|
if (res.data.code == 1) {
|
|
this.address_list = res.data.data.data.slice(0, 2);
|
|
this.allAddressList = res.data.data.data;
|
|
this.isInit = true;
|
|
} else {
|
|
this.$message.info(res.data.msg);
|
|
this.address_list = [];
|
|
this.allAddressList = [];
|
|
this.backData = null;
|
|
}
|
|
this.$nextTick(function () {
|
|
uni.stopPullDownRefresh();
|
|
});
|
|
});
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
width: 100vw;
|
|
overflow-x: hidden;
|
|
min-height: calc(100vh - var(--window-bottom));
|
|
background: rgba(255, 255, 255, 1);
|
|
background-size: 100% auto !important;
|
|
}
|
|
|
|
.selectlocationAddress_flex_0 {
|
|
background: #fff;
|
|
width: 750rpx;
|
|
height: 200rpx;
|
|
overflow: hidden;
|
|
z-index: 10;
|
|
top: 0rpx;
|
|
background-size: 100% auto !important;
|
|
}
|
|
|
|
.selectlocationAddress_fd0_1_c1_c1 {
|
|
margin: 0rpx 0rpx 0rpx 16rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd0_1_c1_c0 {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd0_1_c1 {
|
|
flex: 1;
|
|
background:rgba(246, 247, 249, 1);
|
|
margin: 0rpx 0rpx 0rpx 32rpx;
|
|
border-radius: 32rpx 32rpx 32rpx 32rpx;
|
|
padding: 0 24rpx;
|
|
height: 64rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd0_1_c0_c1 {
|
|
color: #666666;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd0_1_c0_c0 {
|
|
width: 28rpx;
|
|
height: 34rpx;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
margin: 0rpx 16rpx 0rpx 0rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd0_1 {
|
|
margin: 34rpx 32rpx 0rpx 24rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd0_0_c2_c0 {
|
|
line-height: 35rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #000000;
|
|
}
|
|
|
|
.selectlocationAddress_fd0_0_c2 {
|
|
width: 150rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd0_0_c1_c0 {
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
line-height: 36rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd0_0_c0_c0 {
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
line-height: 36rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd0_0_c0 {
|
|
width: 150rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd0_0 {
|
|
margin: 42rpx 32rpx 0rpx 32rpx;
|
|
}
|
|
|
|
.selectlocationAddress_flex_1 {
|
|
background: rgba(246, 247, 249, 1);
|
|
height: 88rpx;
|
|
background-size: 100% auto !important;
|
|
padding: 0rpx 32rpx 0rpx 32rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd1_1 {
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd1_0 {
|
|
width: 500rpx;
|
|
color: #333333;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.selectlocationAddress_flex_2 {
|
|
padding: 32rpx 0rpx 32rpx 0rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd2_3_c1 {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
margin: 0rpx 0rpx 0rpx 12rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd2_3_c0 {
|
|
color: #333333;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd2_3 {
|
|
margin: 24rpx 0rpx 0rpx 0rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd2_2_c1_c0 {
|
|
color: #666666;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd2_2_c1 {
|
|
margin: 16rpx 0rpx 0rpx 0rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd2_2_c0_c4 {
|
|
margin: 0rpx 0rpx 0rpx 40rpx;
|
|
color: #1A1A1A;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd2_2_c0_c3 {
|
|
color: #1A1A1A;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd2_2_c0_c2 {
|
|
color: #1A1A1A;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd2_2_c0_c1 {
|
|
color: #1A1A1A;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd2_2_c0_c0 {
|
|
color: #1A1A1A;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd2_2 {
|
|
border-bottom: 1px solid #eee;
|
|
margin: 0rpx 0rpx 0rpx 54rpx;
|
|
padding: 24rpx 0rpx 24rpx 0rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd2_1_c1_c0 {
|
|
color: #666666;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd2_1_c1 {
|
|
margin: 16rpx 0rpx 0rpx 0rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd2_1_c0_c4 {
|
|
margin: 0rpx 0rpx 0rpx 40rpx;
|
|
color: #1A1A1A;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd2_1_c0_c3 {
|
|
color: #1A1A1A;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd2_1_c0_c2 {
|
|
color: #1A1A1A;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd2_1_c0_c1 {
|
|
color: #1A1A1A;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd2_1_c0_c0 {
|
|
color: #1A1A1A;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd2_1 {
|
|
border-bottom: 1px solid #eee;
|
|
margin: 0rpx 24rpx 0rpx 54rpx;
|
|
padding: 24rpx 0rpx 24rpx 0rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd2_0_c1 {
|
|
color: #333333;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
line-height: 30rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd2_0_c0 {
|
|
width: 6rpx;
|
|
height: 32rpx;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
margin: 0rpx 16rpx 0rpx 0rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd2_0 {
|
|
margin: 0rpx 32rpx 8rpx 32rpx;
|
|
}
|
|
|
|
.selectlocationAddress_flex_3 {
|
|
background: rgba(246, 247, 249, 1);
|
|
height: 20rpx;
|
|
background-size: 100% auto !important;
|
|
}
|
|
|
|
.selectlocationAddress_flex_4 {
|
|
padding: 32rpx 0rpx 32rpx 0rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd4_2_c0_c0 {
|
|
color: #666666;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd4_2 {
|
|
border-bottom: 1px solid #eee;
|
|
margin: 0rpx 0rpx 0rpx 54rpx;
|
|
padding: 24rpx 0rpx 24rpx 0rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd4_1_c0_c0 {
|
|
color: #666666;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd4_1 {
|
|
border-bottom: 1px solid #eee;
|
|
margin: 0rpx 0rpx 0rpx 54rpx;
|
|
padding: 24rpx 0rpx 24rpx 0rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd4_0_c1 {
|
|
color: #333333;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
line-height: 30rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd4_0_c0 {
|
|
width: 6rpx;
|
|
height: 32rpx;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
margin: 0rpx 16rpx 0rpx 0rpx;
|
|
}
|
|
|
|
.selectlocationAddress_fd4_0 {
|
|
margin: 0rpx 0rpx 8rpx 32rpx;
|
|
}
|
|
</style>
|