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 | 2 | import store from '@/store/index.js'; |
| 3 | 3 | |
| 4 | 4 | const apiHost = config.apiHost; |
| 5 | +const env = config.env; | |
| 5 | 6 | const systemInfo = wx.getSystemInfoSync(); |
| 6 | 7 | |
| 7 | 8 | // 此vm参数为页面的实例，可以通过它引用vuex中的变量 |
| ... | ... | @@ -19,6 +20,7 @@ module.exports = vm => { |
| 19 | 20 | wechatVersion: systemInfo.version, // 微信版本 |
| 20 | 21 | SDKVersion: systemInfo.SDKVersion, // 基础库版本 |
| 21 | 22 | platform: 'mp', // 当前运行平台 |
| 23 | + env: env, //环境 | |
| 22 | 24 | }; |
| 23 | 25 | return config; |
| 24 | 26 | }); | ... | ... |
pages.json
pages/global/search-address.vue
| 1 | 1 | <template> |
| 2 | 2 | <Page name="search-address"> |
| 3 | 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 | 10 | </template> |
| 6 | 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 | 18 | <List ref="list" v-model="list" :api="searchAPI"> |
| 8 | 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 | 25 | </template> |
| 11 | 26 | </List> |
| 12 | 27 | </template> |
| ... | ... | @@ -17,15 +32,38 @@ |
| 17 | 32 | import { urlParam } from '@/utils/param'; |
| 18 | 33 | |
| 19 | 34 | export default { |
| 35 | + props: { | |
| 36 | + getHisFun: Function, | |
| 37 | + }, | |
| 20 | 38 | data() { |
| 21 | 39 | return { |
| 22 | 40 | searchForm: { |
| 23 | - query: '' | |
| 41 | + query: '', | |
| 24 | 42 | }, |
| 25 | 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 | 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 | 67 | searchAPI() { |
| 30 | 68 | if (!this.searchForm.query) { |
| 31 | 69 | return new Promise(resolve => { |
| ... | ... | @@ -47,7 +85,22 @@ export default { |
| 47 | 85 | success: response => { |
| 48 | 86 | const data = response.data ?? {}; |
| 49 | 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 | 105 | fail: () => { |
| 53 | 106 | uni.showToast({ title: '没有查询到结果', icon: 'none' }); |
| ... | ... | @@ -57,22 +110,39 @@ export default { |
| 57 | 110 | }); |
| 58 | 111 | }, |
| 59 | 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 | 18 | </u-form-item> |
| 19 | 19 | </view> |
| 20 | 20 | <view class="card"> |
| 21 | - <u-form-item label="装货地址" required @click="() => selectLocation(0)"> | |
| 21 | + <u-form-item label="装货地址" required @click="() => selectAddress(0)"> | |
| 22 | 22 | <u-input :value="form.waypoints[0].address" border="none" suffix-icon="arrow-right" placeholder="请选择" disabledColor="#ffffff" disabled /> |
| 23 | 23 | </u-form-item> |
| 24 | - <u-form-item label="卸货地址" required @click="() => selectLocation(1)"> | |
| 24 | + <u-form-item label="卸货地址" required @click="() => selectAddress(1)"> | |
| 25 | 25 | <u-input v-model="form.waypoints[1].address" border="none" suffix-icon="arrow-right" placeholder="请选择" disabledColor="#ffffff" disabled /> |
| 26 | 26 | </u-form-item> |
| 27 | 27 | </view> |
| ... | ... | @@ -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 | 374 | selectLocation(index) { |
| 350 | 375 | uni.$once('webview-select', location => { | ... | ... |