180 lines
3.9 KiB
Vue
180 lines
3.9 KiB
Vue
<template>
|
|
<view>
|
|
<view class="test">
|
|
<u-sticky>
|
|
<view class="headerc">
|
|
<view class="searchc">
|
|
<u-search placeholder="输入地区市名" v-model="serachV" :show-action="false" shape="shape"
|
|
@search="searchCity"></u-search>
|
|
</view>
|
|
<u-gap height="5" bg-color="#C6C6C6"></u-gap>
|
|
<view class="gpsc" v-if="currentList.length">
|
|
<view class="gpsc-str">{{currentSelStr}}</view>
|
|
<view class="gpsc-btn">
|
|
<u-button :ripple="true" :plain="true" type="primary" text="确认"
|
|
:custom-style="{width:'100rpx',height:'60rpx',fontSize:'26rpx'}" @click="confirm">
|
|
</u-button>
|
|
</view>
|
|
<view class="gpsc-btns"></view>
|
|
</view>
|
|
</view>
|
|
</u-sticky>
|
|
</view>
|
|
<view class="hisC">
|
|
<u-cell-group>
|
|
<u-cell v-for="(item,index) in currentList" :title="item.cityNm" @click="select(item)">
|
|
</u-cell>
|
|
</u-cell-group>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Vue from 'vue'
|
|
import {
|
|
areas
|
|
} from '@/utils/api.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
currentList: [],
|
|
currentSelStr: "请选择",
|
|
currentSel: {},
|
|
serachV: "",
|
|
areaCode: '', //所选城市code
|
|
stand_by_bank_province:'',//备用结算账户银行开户行省代码
|
|
stand_by_bank_city:'',//备用结算账户银行开户行市代码
|
|
}
|
|
},
|
|
|
|
onLoad() {},
|
|
|
|
watch: {
|
|
'currentSel': {
|
|
handler: function(n, o) {
|
|
this.currentSelStr = (this.currentSel.provice?.cityNm || '') + (this.currentSel.city?.cityNm ||
|
|
'') + (this.currentSel.area?.cityNm || '')
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
selCity(city_name, area_level) {
|
|
areas({
|
|
city_name,
|
|
area_level
|
|
}).then(res => {
|
|
if (res.code !== 200) {
|
|
this.$u.toast(res.msg)
|
|
return
|
|
}
|
|
this.currentList = res.data
|
|
})
|
|
},
|
|
select(v) {
|
|
this.currentSelStr = v.cityNm
|
|
this.areaCode = v.cityCd
|
|
this.stand_by_bank_province=v.parentCityCd
|
|
this.stand_by_bank_city=v.cityCd
|
|
// const keys = {
|
|
// "1":"provice",
|
|
// "2":"city",
|
|
// "3":"area"
|
|
// }
|
|
// if(v.areaLevel !== '3'){
|
|
// this.selCity(v.cityNm,v.cityCd)
|
|
// //查询是否有上级，有上级获取上级
|
|
// let isHasParent = (typeof v.parentCityCd !== 'undefined')
|
|
// //获取上级
|
|
// Vue.set(this.currentSel,keys[v.areaLevel],v)
|
|
|
|
// if (isHasParent){
|
|
// areas({
|
|
// cityCd:v.parentCityCd
|
|
// }).then(res=>{
|
|
// let d = res.data[0]
|
|
// Vue.set(this.currentSel,keys[d.areaLevel],d)
|
|
// })
|
|
// }
|
|
// }else{
|
|
// this.currentSel.area = v
|
|
// areas({
|
|
// cityCd:v.parentCityCd
|
|
// }).then(res=>{
|
|
// let d = res.data[0]
|
|
// Vue.set(this.currentSel,keys[d.areaLevel],d)
|
|
// if (typeof d.parentCityCd !== 'undefined'){
|
|
// areas({
|
|
// cityCd:d.parentCityCd
|
|
// }).then(res=>{
|
|
// let e = res.data[0]
|
|
// Vue.set(this.currentSel,keys[e.areaLevel],e)
|
|
// })
|
|
// }
|
|
// })
|
|
// }
|
|
},
|
|
searchCity() {
|
|
this.selCity(this.serachV, "2")
|
|
},
|
|
|
|
confirm() {
|
|
const a = {
|
|
cityNm: this.currentSelStr,
|
|
city_code: this.areaCode,
|
|
stand_by_bank_province:this.stand_by_bank_province,
|
|
stand_by_bank_city:this.stand_by_bank_city
|
|
}
|
|
uni.$emit("queryAreas", a)
|
|
this.$u.route({
|
|
type: 'navigateBack',
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.headerc {
|
|
padding-top: 20rpx;
|
|
padding-bottom: 20rpx;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.searchc {
|
|
height: 80rpx;
|
|
margin-left: 30rpx;
|
|
margin-right: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.gpsc {
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
padding-left: 30rpx;
|
|
background-color: aliceblue;
|
|
margin-top: 20rpx;
|
|
|
|
.gpsc-str {
|
|
float: left;
|
|
}
|
|
|
|
.gpsc-btn {
|
|
float: right;
|
|
margin-right: 50rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
|
|
.hisC {
|
|
padding-right: 30rpx;
|
|
}
|
|
|
|
.test {
|
|
background-color: red;
|
|
}
|
|
</style> |