You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
267 lines
6.9 KiB
267 lines
6.9 KiB
<template>
|
|
<view class="">
|
|
<view class="head">
|
|
<div class="df aic jcsb">
|
|
<div class="Region">所在地区</div>
|
|
<div class="df province" @click="show4=true">
|
|
<view class="" v-if="address.length>0">
|
|
{{address}}
|
|
</view>
|
|
<view class="" v-else>
|
|
选择省市
|
|
</view>
|
|
<u-icon name="arrow-right"></u-icon>
|
|
</div>
|
|
</div>
|
|
<div class="xkjs"></div>
|
|
<div class="df aic jcsb">
|
|
<div class="Region">详细地址</div>
|
|
<input style="text-align: right;color: #000;" type="text" v-model="postbox" placeholder-class="province" placeholder="详细地址,门牌号">
|
|
</div>
|
|
|
|
</view>
|
|
<!-- <u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"></u-picker> -->
|
|
<div class="btn df aic jcsa" @click="btn">完成</div>
|
|
<u-picker @cancel="show4=false" closeOnClickOverlay @confirm="confirm" :show="show4" :columns="columns"></u-picker>
|
|
<u-picker @cancel="show5=false" closeOnClickOverlay @confirm="confirmone" :show="show5" :columns="columnslist"></u-picker>
|
|
<u-picker @cancel="show6=false" closeOnClickOverlay @confirm="confirmtwo" :show="show6" :columns="columnqu"></u-picker>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
show4:false,
|
|
show5:false,
|
|
show6:false,
|
|
show: false,
|
|
columns: [],
|
|
columnslist:[],
|
|
list:[],
|
|
columnqu:[],
|
|
economize:'',//省id
|
|
distinguish:'',//市的id
|
|
jioauk:'' ,//区的id
|
|
economizename:'',//省name
|
|
distinguishme:'',//区name
|
|
marketname:'',//市name
|
|
postbox:'',
|
|
address:'',
|
|
columns: [
|
|
['中国', '美国'],
|
|
['深圳', '厦门', '上海', '拉萨']
|
|
],
|
|
columnData: [
|
|
['深圳', '厦门', '上海', '拉萨'],
|
|
['得州', '华盛顿', '纽约', '阿拉斯加']
|
|
]
|
|
}
|
|
},
|
|
onShow() {
|
|
this.$api.sendRequest({
|
|
url:'/api/address/lists',
|
|
data:{
|
|
pid:0
|
|
},
|
|
success:res=>{
|
|
this.list=res.data
|
|
let a=[]
|
|
for(let i=0;i<res.data.length;i++){
|
|
a.push(res.data[i].name)
|
|
}
|
|
this.columns=[a]
|
|
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
// confirm(e){
|
|
// console.log(e);
|
|
// this.show4=false
|
|
// this.show5=true
|
|
// },
|
|
confirm(e){
|
|
console.log(1);
|
|
this.economizename=e.value[0]
|
|
console.log(2);
|
|
let _this=this
|
|
for(var i=0;i<this.list.length;i++){
|
|
if(this.list[i].name==e.value[0]){
|
|
_this.economize=_this.list[i].id
|
|
}
|
|
}
|
|
console.log(3);
|
|
this.$api.sendRequest({
|
|
url:'/api/address/lists',
|
|
data:{
|
|
pid:_this.economize
|
|
},
|
|
success:res=>{
|
|
console.log(res);
|
|
let a=[]
|
|
this.columnslits=res.data
|
|
// console.log(res.data,'daa');
|
|
for(var i=0;i<res.data.length;i++){
|
|
a.push(res.data[i].name)
|
|
}
|
|
_this.columnslist=[a]
|
|
console.log(4);
|
|
// console.log(_this.columnslist,'box');
|
|
this.show5=true
|
|
this.show4=false
|
|
}
|
|
})
|
|
|
|
},
|
|
confirmone(e){
|
|
this.marketname=e.value[0]
|
|
let _this=this
|
|
for(var i=0;i<this.columnslits.length;i++){
|
|
|
|
if(_this.columnslits[i].name==e.value[0]){
|
|
_this.distinguish=_this.columnslits[i].id
|
|
}
|
|
|
|
}
|
|
this.$api.sendRequest({
|
|
url:'/api/address/lists',
|
|
data:{
|
|
pid:_this.distinguish
|
|
},
|
|
success:res=>{
|
|
let a=[]
|
|
this.distinguishname=res.data
|
|
for(var i=0;i<res.data.length;i++){
|
|
a.push(res.data[i].name)
|
|
}
|
|
this.columnqu=[a]
|
|
this.show6=true
|
|
this.show5=false
|
|
}
|
|
})
|
|
},
|
|
confirmtwo(e){
|
|
this.distinguishme=e.value[0]
|
|
let _this=this
|
|
for(var i=0;i<this.distinguishname.length;i++){
|
|
if(_this.distinguishname[i].name==e.value[0]){
|
|
_this.jioauk=_this.distinguishname[i].id
|
|
}
|
|
}
|
|
this.show6=false
|
|
this.address=this.economizename+''+this.marketname+''+this.distinguishme
|
|
console.log(this.address);
|
|
},
|
|
btn(){
|
|
console.log({
|
|
address:this.address+""+this.postbox
|
|
});
|
|
|
|
// this.$util.showToast({
|
|
// title: '保存成功'
|
|
// });
|
|
if(!this.address.length>0){
|
|
this.$util.showToast({
|
|
title: '请选择省市'
|
|
});
|
|
return
|
|
}
|
|
if(!this.postbox.length>0){
|
|
this.$util.showToast({
|
|
title: '请输入详细地址'
|
|
});
|
|
return
|
|
}
|
|
setTimeout(()=>{
|
|
uni.$emit('address',{
|
|
address:this.address+""+this.postbox,
|
|
economize:this.economize,
|
|
distinguish:this.distinguish,
|
|
jioauk:this.jioauk
|
|
})
|
|
},500)
|
|
setTimeout(()=>{
|
|
uni.navigateBack()
|
|
},500)
|
|
}
|
|
// changeHandler(e) {
|
|
// const {
|
|
// columnIndex,
|
|
// value,
|
|
// values, // values为当前变化列的数组内容
|
|
// index,
|
|
// // 微信小程序无法将picker实例传出来，只能通过ref操作
|
|
// picker = this.$refs.uPicker
|
|
// } = e
|
|
// // 当第一列值发生变化时，变化第二列(后一列)对应的选项
|
|
// if (columnIndex === 0) {
|
|
// // picker为选择器this实例，变化第二列对应的选项
|
|
// picker.setColumnValues(1, this.columnData[index])
|
|
// }
|
|
// },
|
|
// // 回调参数为包含columnIndex、value、values
|
|
// confirm(e) {
|
|
// console.log('confirm', e)
|
|
// this.show = false
|
|
// },
|
|
// btn(){
|
|
// uni.navigateTo({
|
|
// url:'../newly_increased/newly_increased'
|
|
// })
|
|
// }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.btn{
|
|
width: 200rpx;
|
|
height: 80rpx;
|
|
margin: 0 auto;
|
|
background-color: rgb(33, 187, 243);
|
|
color: #fff;
|
|
border-radius: 20rpx;
|
|
font-size: 40rpx;
|
|
}
|
|
.head{
|
|
width: 702rpx;
|
|
height: 210rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
margin: 24rpx;
|
|
padding: 32rpx;
|
|
box-sizing: border-box;
|
|
input{
|
|
width: 224rpx;
|
|
height: 40rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 40rpx;
|
|
}
|
|
.Region{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
line-height: 40rpx;
|
|
}
|
|
.province {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 40rpx;
|
|
}
|
|
.xkjs{
|
|
width: 641rpx;
|
|
height: 1rpx;
|
|
background: #E8E8E8;
|
|
border-radius: 2rpx;
|
|
margin: 32rpx 0;
|
|
}
|
|
}
|
|
</style>
|
|
|