|
|
@@ -1,11 +1,19 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<div class="get-addres-box">
|
|
|
- <input type="value" v-model="value">
|
|
|
+ <input type="value" v-model="value" placeholder="请搜索您的位置" @input="onItemAmountInput($event, value)">
|
|
|
<div class="get-addres" @click="getAddres">搜索</div>
|
|
|
</div>
|
|
|
- <div v-for="item in results">
|
|
|
- <h4>{{item.name}}</h4>
|
|
|
+ <!--地区列表-->
|
|
|
+ <div class="results-list-box" v-show="isShow">
|
|
|
+ <div class="results-list" v-for="item in results">
|
|
|
+ <div>{{item.name}}</div>
|
|
|
+ <span>{{item.city}}</span>
|
|
|
+ <span>{{item.district}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="!value">
|
|
|
+ <h3>请输入地址查询用户信息</h3>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -16,43 +24,84 @@
|
|
|
export default {
|
|
|
data () {
|
|
|
return {
|
|
|
- results: [],
|
|
|
+ results: config.addressPio,
|
|
|
+ isShow: false,
|
|
|
value: ''
|
|
|
}
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ a: function () {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
components: {},
|
|
|
methods: {
|
|
|
- getAddres () {
|
|
|
- console.log('请输入地址')
|
|
|
- if (this.value) {
|
|
|
- axios.get('/api').then(function (res) {
|
|
|
- config.addressPio = res.data.result
|
|
|
- })
|
|
|
- this.results = config.addressPio
|
|
|
+ onItemAmountInput (event, value) {
|
|
|
+ console.log(event)
|
|
|
+ const amount = parseFloat(event.target.value)
|
|
|
+ // 一樣就不繼續了
|
|
|
+ if(item.amount === amount) return
|
|
|
+ // 檢測輸入的是否為數字
|
|
|
+ if(this.isNumeric(event.target.value)) {
|
|
|
+ item.amount = amount
|
|
|
+ // 計算金額
|
|
|
+ this.calculateMoney(item)
|
|
|
} else {
|
|
|
- console.log('请输入地址')
|
|
|
+ item.amount = 0
|
|
|
+ }
|
|
|
+ console.log(event)
|
|
|
+ axios.get('https://bird.ioliu.cn/v1?url=http://api.map.baidu.com/place/v2/suggestion&ak=B349f0b32ef6e78b2e678f45cb9fddaf&output=json&query=' + event + '®ion=%E4%B8%8A%E6%B5%B7%E5%B8%82').then(function (res) {
|
|
|
+ cosnole.log(res)
|
|
|
+ config.addressPio = res.data.result
|
|
|
+ },
|
|
|
+ getAddres(evl)
|
|
|
+ {
|
|
|
+ console.log(evl)
|
|
|
+ if (evl) {
|
|
|
+// axios.get('api/shop/getDetailAddressByQuery&query=' + evl).then(function (res) {
|
|
|
+// console.log(res)
|
|
|
+// config.addressPio = res.data.result
|
|
|
+// })
|
|
|
+ axios.get('https://bird.ioliu.cn/v1?url=http://api.map.baidu.com/place/v2/suggestion&ak=B349f0b32ef6e78b2e678f45cb9fddaf&output=json&query=' + evl + '®ion=%E4%B8%8A%E6%B5%B7%E5%B8%82').then(function (res) {
|
|
|
+ cosnole.log(res)
|
|
|
+ config.addressPio = res.data.result
|
|
|
+ this.isShow = true
|
|
|
+ })
|
|
|
+ this.results = config.addressPio
|
|
|
+ } else {
|
|
|
+ this.results = []
|
|
|
+ console.log('请输入地址')
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- .get-addres-box{
|
|
|
+ .results-list-box {
|
|
|
+ .results-list {
|
|
|
+ background-color: #fff;
|
|
|
+ width: 95%;
|
|
|
+ margin: 0 auto;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .get-addres-box {
|
|
|
width: 80%;
|
|
|
margin: 0 auto;
|
|
|
display: flex;
|
|
|
padding: 15px;
|
|
|
- input{
|
|
|
+ input {
|
|
|
width: 80%;
|
|
|
border: 1px solid rgba(0, 0, 0, 0.5);
|
|
|
}
|
|
|
- .get-addres{
|
|
|
+ .get-addres {
|
|
|
width: 20%;
|
|
|
padding: 2%;
|
|
|
color: #fff;
|
|
|
background-color: #a78b03;
|
|
|
- &:active{
|
|
|
+ &:active {
|
|
|
background-color: #bd9f03;
|
|
|
}
|
|
|
}
|
洪海涛