Commit 4baef8c92362dc2a348eef305a2f493c78449637
1 parent
b7235e83
Exists in
master
and in
1 other branch
fix: 选地址组件优化
Showing
4 changed files
with
122 additions
and
25 deletions
Show diff stats
config/request.js
| @@ -2,6 +2,7 @@ import config from '@/config/index.js'; | @@ -2,6 +2,7 @@ import config from '@/config/index.js'; | ||
| 2 | import store from '@/store/index.js'; | 2 | import store from '@/store/index.js'; |
| 3 | 3 | ||
| 4 | const apiHost = config.apiHost; | 4 | const apiHost = config.apiHost; |
| 5 | +const env = config.env; | ||
| 5 | const systemInfo = wx.getSystemInfoSync(); | 6 | const systemInfo = wx.getSystemInfoSync(); |
| 6 | 7 | ||
| 7 | // 此vm参数为页面的实例，可以通过它引用vuex中的变量 | 8 | // 此vm参数为页面的实例，可以通过它引用vuex中的变量 |
| @@ -19,6 +20,7 @@ module.exports = vm => { | @@ -19,6 +20,7 @@ module.exports = vm => { | ||
| 19 | wechatVersion: systemInfo.version, // 微信版本 | 20 | wechatVersion: systemInfo.version, // 微信版本 |
| 20 | SDKVersion: systemInfo.SDKVersion, // 基础库版本 | 21 | SDKVersion: systemInfo.SDKVersion, // 基础库版本 |
| 21 | platform: 'mp', // 当前运行平台 | 22 | platform: 'mp', // 当前运行平台 |
| 23 | + env: env, //环境 | ||
| 22 | }; | 24 | }; |
| 23 | return config; | 25 | return config; |
| 24 | }); | 26 | }); |
pages.json
pages/global/search-address.vue
| 1 | <template> | 1 | <template> |
| 2 | <Page name="search-address"> | 2 | <Page name="search-address"> |
| 3 | <template #header> | 3 | <template #header> |
| 4 | - <search-bar v-model="searchForm.query" placeholder="请输入需要搜索的地址关键词" auto @confirm="onSearch" /> | 4 | + <view style="display: flex; align-items: center"> |
| 5 | + <view style="flex: 1"><search-bar v-model="searchForm.query" placeholder="请输入需要搜索的地址关键词" auto @confirm="onSearch" /></view> | ||
| 6 | + <view @click="selectLocation" style="width: 50px; padding-left: 10px; display: flex; align-items: center"> | ||
| 7 | + <span> <u-icon name="map-fill"></u-icon></span>地图 | ||
| 8 | + </view> | ||
| 9 | + </view> | ||
| 5 | </template> | 10 | </template> |
| 6 | <template #content> | 11 | <template #content> |
| 12 | + <template v-if="list.length === 0 && hisList.length > 0"> | ||
| 13 | + <view class="search-history">历史地址</view> | ||
| 14 | + <template v-for="(item, index) in hisList"> | ||
| 15 | + <zui-cell :key="index" :title="item.address" :label="`${item.cityName}${item.areaName}`" @click="onSelect(item, index)"></zui-cell> | ||
| 16 | + </template> | ||
| 17 | + </template> | ||
| 7 | <List ref="list" v-model="list" :api="searchAPI"> | 18 | <List ref="list" v-model="list" :api="searchAPI"> |
| 8 | <template v-for="(item, index) in list"> | 19 | <template v-for="(item, index) in list"> |
| 9 | - <zui-cell :key="index" :title="item.name" :label="`${item.cityname}${item.adname}${item.address}`" @click="onSelect(item, index)"></zui-cell> | 20 | + <zui-cell :key="index" :title="item.name" :label="`${item.cityName}${item.areaName}${item.address}`" @click="onSelect(item, index)"></zui-cell> |
| 21 | + </template> | ||
| 22 | + <template #empty> | ||
| 23 | + <view v-if="hisList.length > 0"></view> | ||
| 24 | + <u-empty v-else icon="https://download.shjiuze.cn/assets/image/empty/list.png" text="暂无数据"></u-empty> | ||
| 10 | </template> | 25 | </template> |
| 11 | </List> | 26 | </List> |
| 12 | </template> | 27 | </template> |
| @@ -17,15 +32,38 @@ | @@ -17,15 +32,38 @@ | ||
| 17 | import { urlParam } from '@/utils/param'; | 32 | import { urlParam } from '@/utils/param'; |
| 18 | 33 | ||
| 19 | export default { | 34 | export default { |
| 35 | + props: { | ||
| 36 | + getHisFun: Function, | ||
| 37 | + }, | ||
| 20 | data() { | 38 | data() { |
| 21 | return { | 39 | return { |
| 22 | searchForm: { | 40 | searchForm: { |
| 23 | - query: '' | 41 | + query: '', |
| 24 | }, | 42 | }, |
| 25 | list: [], | 43 | list: [], |
| 26 | - } | 44 | + hisList: [], |
| 45 | + lng: '', | ||
| 46 | + lat: '', | ||
| 47 | + }; | ||
| 48 | + }, | ||
| 49 | + onLoad(options) { | ||
| 50 | + this.lng = options.lng || ''; | ||
| 51 | + this.lat = options.lat || ''; | ||
| 52 | + this.queryHis(options.type); | ||
| 27 | }, | 53 | }, |
| 28 | methods: { | 54 | methods: { |
| 55 | + queryHis(type) { | ||
| 56 | + if (type === 'getStartLatestAddress') { | ||
| 57 | + uni.$u.api.freightOrder.getStartLatestAddress({}).then(res => { | ||
| 58 | + this.hisList = res.result || []; | ||
| 59 | + }); | ||
| 60 | + } | ||
| 61 | + if (type === 'getEndLatestAddress') { | ||
| 62 | + uni.$u.api.freightOrder.getEndLatestAddress({}).then(res => { | ||
| 63 | + this.hisList = res.result || []; | ||
| 64 | + }); | ||
| 65 | + } | ||
| 66 | + }, | ||
| 29 | searchAPI() { | 67 | searchAPI() { |
| 30 | if (!this.searchForm.query) { | 68 | if (!this.searchForm.query) { |
| 31 | return new Promise(resolve => { | 69 | return new Promise(resolve => { |
| @@ -47,7 +85,22 @@ export default { | @@ -47,7 +85,22 @@ export default { | ||
| 47 | success: response => { | 85 | success: response => { |
| 48 | const data = response.data ?? {}; | 86 | const data = response.data ?? {}; |
| 49 | const pois = data.pois ?? []; | 87 | const pois = data.pois ?? []; |
| 50 | - resolve({ result: pois, totalCount: pois.length }); | 88 | + let result = pois.map(item => { |
| 89 | + const lnglatArr = `${item.location || ''}`.split(','); | ||
| 90 | + return { | ||
| 91 | + name: item.name, | ||
| 92 | + provinceCode: item.pcode, | ||
| 93 | + provinceName: item.pname, | ||
| 94 | + areaCode: item.adcode, | ||
| 95 | + areaName: item.adname, | ||
| 96 | + cityCode: `${item.adcode}`.substring(0, 4) + '00', | ||
| 97 | + cityName: item.cityname, | ||
| 98 | + address: item.adname === item.address && item.name ? item.name : item.address || item.name, | ||
| 99 | + lng: lnglatArr[0], | ||
| 100 | + lat: lnglatArr[1], | ||
| 101 | + }; | ||
| 102 | + }); | ||
| 103 | + resolve({ result: result, totalCount: result.length }); | ||
| 51 | }, | 104 | }, |
| 52 | fail: () => { | 105 | fail: () => { |
| 53 | uni.showToast({ title: '没有查询到结果', icon: 'none' }); | 106 | uni.showToast({ title: '没有查询到结果', icon: 'none' }); |
| @@ -57,22 +110,39 @@ export default { | @@ -57,22 +110,39 @@ export default { | ||
| 57 | }); | 110 | }); |
| 58 | }, | 111 | }, |
| 59 | onSelect(item) { | 112 | onSelect(item) { |
| 60 | - const params = this.$params; | ||
| 61 | - if (params.mode === 'select') { | ||
| 62 | - const lnglatArr = `${item.location || ''}`.split(','); | ||
| 63 | - const waypoint = { | ||
| 64 | - areaCode: item.adcode, | ||
| 65 | - areaName: item.adname, | ||
| 66 | - cityCode: `${item.adcode}`.substring(0, 4) + '00', | ||
| 67 | - cityName: item.cityname, | ||
| 68 | - address: item.adname === item.address && item.name ? item.name : item.address || item.name, | ||
| 69 | - lng: lnglatArr[0], | ||
| 70 | - lat: lnglatArr[1], | ||
| 71 | - }; | ||
| 72 | - uni.$emit('select-detail', waypoint); | ||
| 73 | - uni.navigateBack(); | ||
| 74 | - } | ||
| 75 | - } | 113 | + uni.$emit('select-detail', item); |
| 114 | + uni.navigateBack(); | ||
| 115 | + }, | ||
| 116 | + // 地图选点 | ||
| 117 | + selectLocation() { | ||
| 118 | + uni.$once('webview-select', location => { | ||
| 119 | + this.onSelect(location); | ||
| 120 | + }); | ||
| 121 | + const url = 'https://zeyi-tms-product.oss-cn-hangzhou.aliyuncs.com/webview/location-wx-freight.html'; | ||
| 122 | + const params = { | ||
| 123 | + lat: this.lat ? Number(this.lat) : '', | ||
| 124 | + lng: this.lng ? Number(this.lng) : '', | ||
| 125 | + }; | ||
| 126 | + uni.navigateTo({ url: `/pages/common/webview?url=${url}&query=${JSON.stringify(params)}` }); | ||
| 127 | + }, | ||
| 128 | + }, | ||
| 129 | +}; | ||
| 130 | +</script> | ||
| 131 | +<style lang="scss"> | ||
| 132 | +.page-search-address { | ||
| 133 | + &__header { | ||
| 134 | + padding: 16rpx 32rpx !important; | ||
| 135 | + } | ||
| 136 | + .search-history { | ||
| 137 | + padding: 0 32rpx 32rpx 32rpx; | ||
| 138 | + font-weight: 500; | ||
| 139 | + font-size: 32rpx; | ||
| 140 | + } | ||
| 141 | + .zui-cell { | ||
| 142 | + padding: 12rpx 32rpx; | ||
| 143 | + } | ||
| 144 | + .zui-cell__label { | ||
| 145 | + padding-top: 8rpx; | ||
| 76 | } | 146 | } |
| 77 | } | 147 | } |
| 78 | -</script> | 148 | +</style> |
pages/order/add.vue
| @@ -18,10 +18,10 @@ | @@ -18,10 +18,10 @@ | ||
| 18 | </u-form-item> | 18 | </u-form-item> |
| 19 | </view> | 19 | </view> |
| 20 | <view class="card"> | 20 | <view class="card"> |
| 21 | - <u-form-item label="装货地址" required @click="() => selectLocation(0)"> | 21 | + <u-form-item label="装货地址" required @click="() => selectAddress(0)"> |
| 22 | <u-input :value="form.waypoints[0].address" border="none" suffix-icon="arrow-right" placeholder="请选择" disabledColor="#ffffff" disabled /> | 22 | <u-input :value="form.waypoints[0].address" border="none" suffix-icon="arrow-right" placeholder="请选择" disabledColor="#ffffff" disabled /> |
| 23 | </u-form-item> | 23 | </u-form-item> |
| 24 | - <u-form-item label="卸货地址" required @click="() => selectLocation(1)"> | 24 | + <u-form-item label="卸货地址" required @click="() => selectAddress(1)"> |
| 25 | <u-input v-model="form.waypoints[1].address" border="none" suffix-icon="arrow-right" placeholder="请选择" disabledColor="#ffffff" disabled /> | 25 | <u-input v-model="form.waypoints[1].address" border="none" suffix-icon="arrow-right" placeholder="请选择" disabledColor="#ffffff" disabled /> |
| 26 | </u-form-item> | 26 | </u-form-item> |
| 27 | </view> | 27 | </view> |
| @@ -345,6 +345,31 @@ export default { | @@ -345,6 +345,31 @@ export default { | ||
| 345 | })}`, | 345 | })}`, |
| 346 | }); | 346 | }); |
| 347 | }, | 347 | }, |
| 348 | + selectAddress(index) { | ||
| 349 | + uni.$once('select-detail', location => { | ||
| 350 | + let station = { | ||
| 351 | + lng: location.lng, | ||
| 352 | + lat: location.lat, | ||
| 353 | + provinceCode: location.provinceCode, | ||
| 354 | + provinceName: location.provinceName, | ||
| 355 | + cityCode: location.cityCode, | ||
| 356 | + cityName: location.cityName, | ||
| 357 | + areaCode: location.areaCode, | ||
| 358 | + areaName: location.areaName, | ||
| 359 | + address: (location.provinceName || '') + (location.cityName || '') + (location.areaName || '') + (location.address || ''), | ||
| 360 | + }; | ||
| 361 | + let waypoints = index === 0 ? [station, this.form.waypoints[1]] : [this.form.waypoints[0], station]; | ||
| 362 | + this.form = { | ||
| 363 | + ...this.form, | ||
| 364 | + waypoints, | ||
| 365 | + }; | ||
| 366 | + this.computedDistance(); | ||
| 367 | + }); | ||
| 368 | + let type = index === 0 ? 'getStartLatestAddress' : 'getEndLatestAddress'; | ||
| 369 | + let lat = this.form.waypoints[index].lat ? Number(this.form.waypoints[index].lat) : ''; | ||
| 370 | + let lng = this.form.waypoints[index].lng ? Number(this.form.waypoints[index].lng) : ''; | ||
| 371 | + uni.navigateTo({ url: `/pages/global/search-address?type=${type}&lng=${lng}&lat=${lat}` }); | ||
| 372 | + }, | ||
| 348 | // 地图选点 | 373 | // 地图选点 |
| 349 | selectLocation(index) { | 374 | selectLocation(index) { |
| 350 | uni.$once('webview-select', location => { | 375 | uni.$once('webview-select', location => { |