完成大体功能和样式
This commit is contained in:
248
pages-biz/chooseAddress/cityList.vue
Normal file
248
pages-biz/chooseAddress/cityList.vue
Normal file
@@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="list">
|
||||
<view class="keyList" v-for="(keyItem, keyIndex) in renderList" :key="keyIndex">
|
||||
<view :id="'keyword' + keyItem.key" class="keyword">
|
||||
<text>{{ keyItem.key === 'AAA' ? '热门地区' : keyItem.key }}</text>
|
||||
</view>
|
||||
<view class="item b-b" v-for="(item, index) in keyItem.list" :key="index" @click="chooseCity(item)">
|
||||
<text>{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="key-list column" @click.stop.prevent="stopPrevent">
|
||||
<view
|
||||
class="key-item"
|
||||
:class="{active: index === keywordCurrent}"
|
||||
v-for="(item, index) in renderList"
|
||||
:key="index"
|
||||
@click="onKeywordClick(index)"
|
||||
>
|
||||
<text>{{ item.key === 'AAA' ? '#' : item.key }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="key-show center" :class="{show: keyChanged}">
|
||||
<text>{{ keywordCurrentName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import getFirstLetter from './js/getFirstLetter.js'
|
||||
import cityData from './js/city'
|
||||
const _anchorList = [];
|
||||
let _onKeywordClicking = false;
|
||||
let _timer = 0;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
keyChanged: false,
|
||||
keywordCurrentName: '',
|
||||
keywordCurrent: 0, //当前索引
|
||||
renderList: [],
|
||||
list: [],
|
||||
}
|
||||
},
|
||||
onPageScroll(e) {
|
||||
if (_onKeywordClicking) {
|
||||
return;
|
||||
}
|
||||
const top = e.scrollTop;
|
||||
for (let i = 0; i < _anchorList.length; i++) {
|
||||
if (top > _anchorList[i]) {
|
||||
this.keywordCurrent = i;
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
keywordCurrent(val) {
|
||||
this.keywordCurrentName = this.renderList[val].key;
|
||||
if (_timer) {
|
||||
clearTimeout(_timer);
|
||||
}
|
||||
this.keyChanged = true;
|
||||
_timer = setTimeout(() => {
|
||||
this.keyChanged = false;
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.initList();
|
||||
},
|
||||
methods: {
|
||||
chooseCity(item){
|
||||
const pages = getCurrentPages();
|
||||
const prePage = (pages[pages.length - 2]).$vm;
|
||||
prePage.city = item.label;
|
||||
prePage.searchList();
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack();
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url:'/pages/index/index'
|
||||
})
|
||||
}
|
||||
},
|
||||
//初始化列表
|
||||
initList() {
|
||||
const list = cityData;
|
||||
const tempData = {};
|
||||
list.forEach(item => {
|
||||
let key = getFirstLetter.getLetter(item.label).firstletter;
|
||||
if (!tempData[key]) {
|
||||
tempData[key] = [];
|
||||
}
|
||||
tempData[key].push(item);
|
||||
})
|
||||
//排序用
|
||||
const tempKeyList = [];
|
||||
for (let key in tempData) {
|
||||
tempKeyList.push(key);
|
||||
}
|
||||
tempKeyList.sort();
|
||||
const renderList = [];
|
||||
tempKeyList.forEach(keyword => {
|
||||
for (let key in tempData) {
|
||||
if (key == keyword) {
|
||||
renderList.push({
|
||||
key,
|
||||
list: tempData[key]
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
this.renderList = renderList;
|
||||
//生成右侧索引
|
||||
setTimeout(() => {
|
||||
this.calcAnchor();
|
||||
}, 500)
|
||||
},
|
||||
//计算锚点高度
|
||||
calcAnchor() {
|
||||
const list = this.renderList;
|
||||
let size = {};
|
||||
const placeFillHeight = this.systemInfo.navigationBarHeight + this.systemInfo.statusBarHeight;
|
||||
|
||||
list.forEach(async item => {
|
||||
let size = await this.getElSize('keyword' + item.key);
|
||||
item.top = size.top;
|
||||
_anchorList.push(size.top);
|
||||
})
|
||||
},
|
||||
//右侧索引点击
|
||||
onKeywordClick(index) {
|
||||
_onKeywordClicking = true;
|
||||
setTimeout(() => {
|
||||
_onKeywordClicking = false;
|
||||
}, 500)
|
||||
this.keywordCurrent = index;
|
||||
uni.pageScrollTo({
|
||||
scrollTop: this.renderList[index].top
|
||||
})
|
||||
},
|
||||
//获得元素的size
|
||||
getElSize(id) {
|
||||
return new Promise(res => {
|
||||
let el = uni.createSelectorQuery().select('#' + id);
|
||||
el.boundingClientRect(data => {
|
||||
res(data);
|
||||
}).exec();
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.key-show {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
z-index: 95;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background-color: #2979ff;
|
||||
border-radius: 100rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
opacity: 0;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.keyList {
|
||||
position: relative;
|
||||
|
||||
.keyword {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
top: var(--window-top);
|
||||
z-index: 95;
|
||||
padding-top: 6rpx;
|
||||
padding-left: 30rpx;
|
||||
width: 100%;
|
||||
height: 66rpx;
|
||||
line-height: 60rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding-left: 30rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
|
||||
&:after {
|
||||
left: 30rpx;
|
||||
}
|
||||
|
||||
.cn-name {
|
||||
margin-left: 12rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 右侧索引 */
|
||||
.key-list {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
z-index: 96;
|
||||
padding-right: 20rpx;
|
||||
padding-left: 40rpx;
|
||||
transform: translateY(-50%);
|
||||
|
||||
.key-item {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-bottom: 2rpx;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
border-radius: 100rpx;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #2979ff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
407
pages-biz/chooseAddress/index.vue
Normal file
407
pages-biz/chooseAddress/index.vue
Normal file
@@ -0,0 +1,407 @@
|
||||
<template>
|
||||
<view class='app'>
|
||||
<!-- 当前选择地址 -->
|
||||
<view class="current-address row b-b">
|
||||
<view class="left">
|
||||
<view class="row">
|
||||
<text class="red">[当前]</text>
|
||||
<text class="title">{{currentAddress.title}}</text>
|
||||
</view>
|
||||
<text class="addr clamp">{{currentAddress.address}}</text>
|
||||
</view>
|
||||
<!-- 搜索图标 -->
|
||||
<image
|
||||
class="ser-icon"
|
||||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAENElEQVRoQ+2a/1XcMAzHlQkKExQmaJmAMgHtBJQJqkzQMsGpExQm6HWCHhMUJihMUJjAfd97znuucc6Sklxf4PwXjzixPtYPS/I19MJG88J4aQf83DW+0/BOw89sByY3aWbea5rmDREdhBAO0v1rmmYVQrgXkbtt7eskwMz8lojOiOgdEeHv2nggolXTNMvFYnFVmzzk+ajAbduehhA4gnrlArwQ0VcRwd+jjlGAo0YXA0FzsDW4iFyMSTwYmJk/E9GXDULdEtGSiOCnqa/uRXOHX78nolc937ghog9j+bkbGMGIiKDVjwVB7+MmLLVmGa0E7gDfL2n7REQAP2i4gCPsz0JAWoOKyKVXKmaGxmExJfDzId+GTF5gwCICp+MHtK3VaG1DmBlmjo1LTR1+PUjTZmBmRgT9lAl8ISKb/LjGV3wezRz+/zqZAOhD78aagOOuf8+kaxFKXUSKl6L7INilml6JyIni9SdT1MBx4V/ImJKvXIlIKWh5ZOl9J2p6lUG7/NkCDJPFEdSNWxHRZFGjwDMzIjhOhW64TFsFHLX7m4hwFHUDwQO7vrXBzFjvOFnQrGUtMMz2W7LQtYjkUXpycGbGmjghunEnIoeWhbXAiJSnyYePxkgCLIJ2c5kZyQeqr26YZKkCR3P+kyyAcu6fMs8juPedgi+bjkQNcG5GW4nMfRsSMzHEk26Y3EsDnEdnJPIw8f82MrN+EJF9rTAaYKR3aV679eicw+TRWkSqHN03qhMLR8G+N63TaqE2j5ndSjADW3azJrj3OTPnbqa2urkC5wUMiglVI1ADnJ/B6t30arD23tQ+7DafmuDe51MD52nlpOVgbRMKidDo5zCyqvSgvxGRo5pgUz0v1ORo56KSUo2qD+MrzIyAkHYd1EFCJYVh0pAjCctogXM/NuWvBp6NU2NaiSZEV6Y+ikhaslaX0gLnZo3iG1WK6iioSqGcUNCuOa9XAUezzrMb82JKruK0QtHwiHaTNeuzAOdahmDmjoMHuqcP7nIrNXDUcu7L+LepAHcCo1OKPnU3XNpVB61UyELHYXBzfNMmMDNaS3ln1L3JJg1HLcO00WbJbwSQkLivWHLoDdc5gxIfM3CERns27xPjEYAh0KB73bZtz0IIKBDyI8fctMs30gVcgXZfaMeuJHrfmzqilyJy7okFLh/O/BnmjWoq7SKmU5bxdxzId59cdcbffxyHEBCQAKltDrqh3RrOwEvRu08JAAeYJkO6jgGrdH3qgh4FOAlmffe6Vgt8cs9cyLLWMcNq3qMBd0QxI0L1AjNNCw4NNO6YcRlZvMIZA3p04IKPd75ZCkTd7z5w/am6pxoKPSmwRqWeOUOgZwkcY0ZezODf1WbAbIH7oGtt5FkDF6Cr/a3ZA0fodWDU5PLPAtgS+HbAlt2a49ydhueoNYvMOw1bdmuOc/8C4xLETHORTG0AAAAASUVORK5CYII="
|
||||
@click="navTo('search?city='+curCity)"
|
||||
></image>
|
||||
</view>
|
||||
<!-- 补充详细地址 -->
|
||||
<view class="confirm-wrap row">
|
||||
<!-- <input class="input" placeholder="补充详细地址：楼号、门牌等(选填)" placeholder-class="placeholder" v-model="room" @confirm='submit'></input> -->
|
||||
<view class="btn" @click="submit">确定</view>
|
||||
</view>
|
||||
<map
|
||||
id="map"
|
||||
class="map"
|
||||
:scale="15"
|
||||
:show-location="true"
|
||||
:longitude="map.longitude"
|
||||
:latitude="map.latitude"
|
||||
@regionchange="onRegionchange"
|
||||
>
|
||||
<cover-image class="map-center-icon" src="https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/5bfbd58b18200d8e16f6b17a02e6ed9.png"></cover-image>
|
||||
</map>
|
||||
<!-- 结果集 -->
|
||||
<scroll-view scroll-y class="addr-list-scroll">
|
||||
<view class="addr-list">
|
||||
<view class="addr-item b-b row" v-for="(item, index) in list" :key="index" @click="chooseAddress(index)">
|
||||
<view class="left">
|
||||
<text class="title">{{item.title}}</text>
|
||||
<text class="addr">{{item.address}}</text>
|
||||
</view>
|
||||
<icon type="success" color="#2979ff" size="18" class="icon_circle" v-if='checked === index' />
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const QQMapWX = require('./js/qqmap-wx-jssdk.min.js')
|
||||
const qqmapsdk = new QQMapWX({
|
||||
key: 'FALBZ-J2G3I-ZY5GX-5ATUZ-GHOOZ-YVFAR'
|
||||
})
|
||||
let _mapCtx = null;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
curCity: '',
|
||||
mapStatus: 1,
|
||||
map: {
|
||||
longitude: 116.39742,
|
||||
latitude: 39.909,
|
||||
},
|
||||
room: '', //补充地址 门牌号、房间号
|
||||
list: [], //地址列表
|
||||
checked: 0, //当前选择选择地址下标
|
||||
tempAddress: null, //编辑或者搜索到地址时，需要手动将结果添加到poi集
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentAddress(){
|
||||
if(this.list.length === 0){
|
||||
return {};
|
||||
}
|
||||
return this.list[this.checked];
|
||||
}
|
||||
},
|
||||
created() {
|
||||
_mapCtx = uni.createMapContext('map');
|
||||
},
|
||||
onNavigationBarButtonTap() {
|
||||
this.submit();
|
||||
},
|
||||
async onLoad(options) {
|
||||
//编辑地址时参数
|
||||
let optionData = options.data;
|
||||
let lng, lat;
|
||||
if(optionData){
|
||||
//编辑地址时
|
||||
this.tempAddress = JSON.parse(optionData);
|
||||
this.room = this.tempAddress.room;
|
||||
lng = this.tempAddress.location.lng;
|
||||
lat = this.tempAddress.location.lat;
|
||||
}else{
|
||||
//没有传坐标时获取用户当前定位
|
||||
const userLocation = await this.getLocation();
|
||||
lng = +userLocation.longitude;
|
||||
lat = +userLocation.latitude;
|
||||
}
|
||||
this.map = {
|
||||
longitude: lng,
|
||||
latitude: lat
|
||||
}
|
||||
this.position = {
|
||||
longitude: lng,
|
||||
latitude: lat
|
||||
}
|
||||
this.getAddressList(1)
|
||||
},
|
||||
methods: {
|
||||
//确定选择
|
||||
submit() {
|
||||
const {currentAddress, room} = this;
|
||||
const {ad_info, address, location, title} = currentAddress;
|
||||
// this.$util.prePage().setAddress(Object.assign({}, {
|
||||
// ad_info, address, location, title,room
|
||||
// }));
|
||||
uni.$emit('changeAddressConfig', address,location.lng,location.lat);
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack();
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url:'/pages/index/index'
|
||||
})
|
||||
}
|
||||
},
|
||||
//获取poi列表
|
||||
getAddressList(s = 0) {
|
||||
//在ios下防止搜索返回时多次加载地址列表的问题
|
||||
if(this.isSetTempAddress === 1){
|
||||
return;
|
||||
}
|
||||
qqmapsdk.reverseGeocoder({
|
||||
location: {
|
||||
latitude: this.position.latitude,
|
||||
longitude: this.position.longitude
|
||||
},
|
||||
get_poi: 1,
|
||||
poi_options: "page_size=30;page_index=1",
|
||||
success: res=> {
|
||||
res.result.pois.forEach(poi=>{
|
||||
if(!poi.ad_info){
|
||||
poi.ad_info = {
|
||||
adcode: poi.adcode,
|
||||
city: poi.city,
|
||||
district: poi.district,
|
||||
province: poi.province
|
||||
}
|
||||
}
|
||||
})
|
||||
//有搜索结果时，手动追加到列表顶部
|
||||
if(this.tempAddress){
|
||||
if(this.tempAddress.title != res.result.pois[0].title){
|
||||
if(!this.tempAddress.ad_info){
|
||||
this.tempAddress.ad_info = {
|
||||
adcode: this.tempAddress.adcode,
|
||||
city: this.tempAddress.city,
|
||||
district: this.tempAddress.district,
|
||||
province: this.tempAddress.province
|
||||
}
|
||||
}
|
||||
res.result.pois.unshift(this.tempAddress);
|
||||
}
|
||||
this.tempAddress = null;
|
||||
this.isSetTempAddress = 1;
|
||||
setTimeout(()=>{
|
||||
this.isSetTempAddress = 0;
|
||||
}, 500)
|
||||
}
|
||||
if (s) {
|
||||
const ad_info = res.result.pois[0].ad_info;
|
||||
this.curCity = ad_info.city || '';
|
||||
res.result.pois[0].select = 1
|
||||
this.list = res.result.pois;
|
||||
this.checked = 0;
|
||||
} else {
|
||||
this.list = res.result.pois;
|
||||
}
|
||||
},
|
||||
fail: err=> {
|
||||
console.log(err)
|
||||
}
|
||||
})
|
||||
},
|
||||
//地图区域改变
|
||||
onRegionchange(e) {
|
||||
clearTimeout(this.timer)
|
||||
this.timer = setTimeout(() => {
|
||||
//h5 end 安卓 regionchange
|
||||
if (e.type === 'end' || e.type === 'regionchange') {
|
||||
_mapCtx.getCenterLocation({
|
||||
success: res => {
|
||||
this.position = {
|
||||
latitude: res.latitude,
|
||||
longitude: res.longitude
|
||||
}
|
||||
if (this.mapStatus == 1) { // 防止地图点击时 进行多次加载
|
||||
this.getAddressList(1)
|
||||
}
|
||||
},
|
||||
fail: err=>{
|
||||
console.log(err);
|
||||
}
|
||||
})
|
||||
}
|
||||
}, 200)
|
||||
},
|
||||
//地址列表点击
|
||||
chooseAddress(index) {
|
||||
let list = this.list
|
||||
this.map = {
|
||||
longitude: list[index].location.lng,
|
||||
latitude: list[index].location.lat
|
||||
}
|
||||
this.checked = index;
|
||||
this.mapStatus = 0;
|
||||
//防止ios下触发多次加载列表的bug
|
||||
clearTimeout(this.mapStatusTimer);
|
||||
this.mapStatusTimer = setTimeout(()=>{
|
||||
this.mapStatus = 1;
|
||||
}, 1000)
|
||||
},
|
||||
//获取用户定位
|
||||
getLocation (){
|
||||
return new Promise(resolve=> {
|
||||
// #ifndef H5
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
success: res=> {
|
||||
resolve({
|
||||
longitude: res.longitude,
|
||||
latitude: res.latitude
|
||||
})
|
||||
},
|
||||
err: err=> {
|
||||
console.log(err)
|
||||
resolve({
|
||||
longitude: 116.39742,
|
||||
latitude: 39.909,
|
||||
})
|
||||
},
|
||||
complete(res) {
|
||||
console.log(res);
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
//h5的定位没有写，这里直接默认天安门，可以根据项目需求使用对应jssdk获取定位
|
||||
resolve({
|
||||
longitude: 116.39742,
|
||||
latitude: 39.909,
|
||||
})
|
||||
// #endif
|
||||
})
|
||||
},
|
||||
navTo(url){
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
height: 100%;
|
||||
background: #F6F6F6;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.app{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.row{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.b-b{
|
||||
position: relative;
|
||||
|
||||
&:after{
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 0;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 0;
|
||||
content: '';
|
||||
transform: scaleY(.5);
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
}
|
||||
.clamp {
|
||||
/* #ifdef APP-PLUS-NVUE */
|
||||
lines: 1;
|
||||
/* #endif */
|
||||
/* #ifndef APP-PLUS-NVUE */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
/* #endif */
|
||||
}
|
||||
.current-address{
|
||||
height: 120rpx;
|
||||
padding: 0 24rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.left{
|
||||
width: 634rpx;
|
||||
}
|
||||
.red{
|
||||
flex-shrink: 0;
|
||||
margin-right: 6rpx;
|
||||
font-size: 28rpx;
|
||||
color: #2979ff;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
.title{
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
.addr{
|
||||
width: 700rpx;
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
color: #909399;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.ser-icon{
|
||||
flex-shrink: 0;
|
||||
width: 66rpx;
|
||||
height: 66rpx;
|
||||
padding: 12rpx 4rpx 12rpx 20rpx;
|
||||
}
|
||||
}
|
||||
.confirm-wrap{
|
||||
height: 88rpx;
|
||||
padding: 0 24rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.input{
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #303133;
|
||||
}
|
||||
.btn{
|
||||
width: 700rpx;
|
||||
padding: 0 25rpx;
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
background-color: #2979ff;
|
||||
border-radius: 100rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.map{
|
||||
width: 750rpx;
|
||||
height: 700rpx;
|
||||
|
||||
.map-center-icon{
|
||||
position: absolute;
|
||||
left: 339rpx;
|
||||
top: 264rpx;
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
}
|
||||
}
|
||||
.addr-list-scroll{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.addr-list{
|
||||
background-color: #fff;
|
||||
}
|
||||
.addr-item{
|
||||
padding: 24rpx;
|
||||
}
|
||||
.left{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-right: 50rpx;
|
||||
}
|
||||
.title{
|
||||
font-size: 28rpx;
|
||||
color: #303133;
|
||||
}
|
||||
.addr{
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: #909399;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1
pages-biz/chooseAddress/js/city.js
Normal file
1
pages-biz/chooseAddress/js/city.js
Normal file
File diff suppressed because one or more lines are too long
35
pages-biz/chooseAddress/js/getFirstLetter.js
Normal file
35
pages-biz/chooseAddress/js/getFirstLetter.js
Normal file
File diff suppressed because one or more lines are too long
26
pages-biz/chooseAddress/js/qqmap-wx-jssdk.min.js
vendored
Normal file
26
pages-biz/chooseAddress/js/qqmap-wx-jssdk.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
179
pages-biz/chooseAddress/search.vue
Normal file
179
pages-biz/chooseAddress/search.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<view class='app'>
|
||||
<view class="search-wrap">
|
||||
<view class="city" @click="navTo('cityList?city='+city)">
|
||||
<image class="icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAC70lEQVRIS8VW7VXcMBDctQsAKshRQYRcAJcKIBUAFQAVhFSQowKggpAKuBTgRVcBRwWQAiTljZ/Ek235436hf3e2NTuzO7vL9EmHPwmXZgMrpRZlWZ4Q0dJ7v2TmfQTtvX9n5jURra21D8aY9zlkJoGVUvtFUVwS0VUEG7oYQRDRyjl3OxXAKLBSSpVleUdEKrDbENG9c84Q0TYEsCiKAs/Pmflr+M9Yay+MMXgvewaBAVoUxVNg+c9ae2qMgaSDp6qqUwRGRHtg75w7MsbEAFvfZYEhb1mWT2Dqvd8455ZT0sVbQ2rWgT2Yf8t9mwXWWt8w8w8iAtNF90NcHmVFYLnnZVmCKZj/FJGbrkw94BDxCyT23l+ICKRrTnj2i5nP04u898j7dRqA1ho5vwuSH3aD6wEnH2xEpCmqCBrlhxKwT3i0BDMi6smqtTZQpksA3/WAq6p6JKIT7/2tiFxFYK31ipkvvfd/nXMotMavQYVHZj4e+oaI/tR1jcL7ODnGKIzjUBQfVVxVFYD2rLUHAzl9g6wicpCotIRKCFZEoMwo8JaZv6TAoWu95C5IFIkBI5+NhZRSEbiVtqzUWuse42CvN+SxruujnJFjPlNFEuBZjBvgrg201j0lMpK+isgiUaGx5Vypo4cf6rr+sE3HHt9jFwOroih+5+xXVRWseJbzcs7HMS+tQgGLeFFOaiJqBRrejwWJ7tVqt0Odq5E15z8wD5OqGQjoXJhIaaPB/4lCLflj0KMt03u/FZHDAYajf8eamN0yky4Ve+21iKx2AZ/q9Vk7JRXZ9Fr8ttZivA3O1jSoMMOfQxpavX60gaQPk/a5DbN1dK0J7fOZmWGpXpucDTx3tibpmT3D5+xcWH9ghTiBeitNZ0XCDFdDm8doVXcLKVzcgIf5OtRAXsPkmqyHScZJW8S2GVca+LepdGZuRueuK9Js4CSPADxLVcEcds7dzN3LRu005ltskynjuq6xPOx0dmK8080TL38a8H+fVUE94KTW6AAAAABJRU5ErkJggg=="></image>
|
||||
<text>{{ city }}</text>
|
||||
<image class="c-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAvElEQVQ4T+3TwQ3CMAwF0G9lAQbgwgRlhEgegBEQm3UEFrCUEWACLgzAAlaQpQa1EJxK9MChvaVKXp3vmrDwQwt7WMHfE31lGGPchBBuAM4icppDM3MP4KCqu5TSw85MmsLMFyLqcs59CzWMiI4556uI7EsBE3CoMrXQMaaqsVT3UaG9aKEeVgU9tIV9BWuo5V0ye7/muIHupJTrA+iICNYAD3MrLF8d0LutVXU7bkDt11pnec7A+Xv+P8Mn98h9FeV7S88AAAAASUVORK5CYII="></image>
|
||||
</view>
|
||||
<input class="input" maxlength="30" @input="bindConfirm" focus auto-focus placeholder="请输入地址关键字搜索" @confirm='bindConfirm'></input>
|
||||
</view>
|
||||
|
||||
<view class="addr-list">
|
||||
<view class="addr-item b-b" v-for="(item, index) in list" :key="index" @click="confirm(item)">
|
||||
<text class="title">{{item.title}}</text>
|
||||
<text class="addr">{{item.address}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const QQMapWX = require('./js/qqmap-wx-jssdk.min.js')
|
||||
var qqmapsdk = new QQMapWX({
|
||||
key: 'FALBZ-J2G3I-ZY5GX-5ATUZ-GHOOZ-YVFAR'
|
||||
})
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
city: '',
|
||||
keyword: '',
|
||||
list: []
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '搜索地址'
|
||||
})
|
||||
this.city = options.city || '';
|
||||
},
|
||||
methods: {
|
||||
//选择地址
|
||||
confirm(item) {
|
||||
const pages = getCurrentPages()
|
||||
const prePages = pages[pages.length - 2].$vm
|
||||
|
||||
prePages.tempAddress = item;
|
||||
prePages.position = {
|
||||
longitude: item.location.lng,
|
||||
latitude: item.location.lat,
|
||||
}
|
||||
prePages.map = {
|
||||
longitude: item.location.lng,
|
||||
latitude: item.location.lat,
|
||||
}
|
||||
// #ifdef H5 || MP-WEIXIN
|
||||
prePages.getAddressList(1); //h5没触发地图regionchange事件，需要手动调用获取新地址列表。微信小程序开发工具自动触发，真机不触发，同样需要调用一下。
|
||||
// #endif
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
},
|
||||
//搜索地址
|
||||
searchList() {
|
||||
qqmapsdk.getSuggestion({
|
||||
keyword: this.keyword,
|
||||
policy: 1, //默认0，常规策略 policy=1：本策略主要用于收货地址、上门服务地址的填写，
|
||||
page_size: 20, //每页条目数，最大限制为20条，默认值10
|
||||
page_index: 1,
|
||||
region: this.city || '全国',
|
||||
success: res=> {
|
||||
this.list = res.data;
|
||||
},
|
||||
fail: err => {
|
||||
this.list = [];
|
||||
}
|
||||
})
|
||||
},
|
||||
bindConfirm(e) {
|
||||
this.keyword = e.detail.value;
|
||||
this.searchList()
|
||||
},
|
||||
navTo(url){
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
view{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.app{
|
||||
padding-top: 100rpx;
|
||||
}
|
||||
.search-wrap{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: var(--window-top);
|
||||
z-index: 90;
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
padding: 0 30rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.city{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
.icon{
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
.c-icon{
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
.input{
|
||||
flex: 1;
|
||||
margin-left: 16rpx;
|
||||
padding: 0 28rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 100rpx;
|
||||
}
|
||||
}
|
||||
.addr-list{
|
||||
background-color: #fff;
|
||||
|
||||
.addr-item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24rpx 30rpx;
|
||||
position: relative;
|
||||
|
||||
&:after{
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 0;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 0;
|
||||
content: '';
|
||||
transform: scaleY(.5);
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
}
|
||||
.left{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-right: 50rpx;
|
||||
}
|
||||
.title{
|
||||
font-size: 28rpx;
|
||||
color: #303133;
|
||||
}
|
||||
.addr{
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: #909399;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user