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.
601 lines
14 KiB
601 lines
14 KiB
<template>
|
|
<view>
|
|
<!-- <view class="address_serch">
|
|
<input type="text" placeholder="ADDRESS FINDER:Search by postcode">
|
|
</view> -->
|
|
<view class="address_info" >
|
|
<view class="address_info_item address_info_item1">
|
|
<view class="info_item_title"@click="bindPickerChange" >
|
|
|
|
<picker @change="bindPickerChange" :value="index" :range="countryList" range-key="region_name" class="info_item_title_pick">
|
|
<text>*Country/Region</text>
|
|
<view class="info_item_title_span">{{countryText}}</view>
|
|
</picker>
|
|
<image src="../../static/img/right1.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="address_info_item">
|
|
<view class="info_item_title">
|
|
<view>
|
|
<text>*Fall name</text>
|
|
</view>
|
|
</view>
|
|
<view class="info_item_input">
|
|
<input type="text" v-model="query.consignee.consignee">
|
|
</view>
|
|
</view>
|
|
<view class="address_info_item">
|
|
<view class="info_item_title">
|
|
<view>
|
|
<text>*Phone Number</text>
|
|
</view>
|
|
</view>
|
|
<view class="info_item_input">
|
|
<input type="number" v-model="query.consignee.mobile">
|
|
</view>
|
|
</view>
|
|
<view class="address_info_item">
|
|
<view class="info_item_title">
|
|
<view>
|
|
<text>*Stree adderss or P.O.Box</text>
|
|
</view>
|
|
</view>
|
|
<view class="info_item_input">
|
|
<input type="text" v-model="address">
|
|
</view>
|
|
</view>
|
|
<view class="address_info_item">
|
|
<view class="info_item_title">
|
|
<view>
|
|
<text>*Appartment,suite,unit,etc.</text>
|
|
</view>
|
|
</view>
|
|
<view class="info_item_input">
|
|
<input type="text" v-model="query.consignee.sign_building">
|
|
</view>
|
|
</view>
|
|
<view class="address_info_item address_info_item1">
|
|
|
|
<view class="info_item_title" v-if="isSelect1">
|
|
<picker @change="bindPickerChange2" :value="cityIndex" :range="cityList" range-key="region_name" class="info_item_title_pick">
|
|
<text >*City/Town</text>
|
|
<view class="info_item_title_span">{{cityText}}</view>
|
|
</picker>
|
|
<image src="../../static/img/right1.png" mode=""></image>
|
|
</view>
|
|
|
|
<template v-else>
|
|
<view class="info_item_title" >
|
|
<text >*City/Town</text>
|
|
</view>
|
|
|
|
<view class="info_item_input">
|
|
<input type="text" v-model="city">
|
|
</view>
|
|
</template>
|
|
|
|
<!-- <view class="info_item_title">
|
|
<view>
|
|
<text>*City/Town</text>
|
|
</view>
|
|
</view>
|
|
<view class="info_item_input">
|
|
<input type="text" v-model="city">
|
|
</view> -->
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
<view class="address_info">
|
|
<view class="address_info_item address_info_item1">
|
|
<view class="info_item_title" v-if="isSelect">
|
|
<picker @change="bindPickerChange1" :value="provinceIndex" :range="provinceList" range-key="region_name" class="info_item_title_pick">
|
|
<text >State/Province</text>
|
|
<view class="info_item_title_span">{{provinceText}}</view>
|
|
</picker>
|
|
<image src="../../static/img/right1.png" mode=""></image>
|
|
</view>
|
|
|
|
<template v-else>
|
|
<view class="info_item_title" >
|
|
<text >State/Province</text>
|
|
</view>
|
|
|
|
<view class="info_item_input">
|
|
<input type="text" v-model="province">
|
|
</view>
|
|
</template>
|
|
|
|
</view>
|
|
|
|
<view class="address_info_item">
|
|
<view class="info_item_title">
|
|
<view>
|
|
<text>Zip code/Postcode/PLZ/Eircode</text>
|
|
</view>
|
|
</view>
|
|
<view class="info_item_input">
|
|
<input type="text" v-model="query.consignee.zipcode">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="address_switch">
|
|
<text>Make this my default address</text>
|
|
<switch :checked="query.is_default==1" color="#B22234" @change="isDefault"/>
|
|
</view>
|
|
<view class="address_submit">
|
|
<button @click="save">FINISH</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {defaultRequest2,defaultRequest3} from '../../api/index.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
isSelect:false,
|
|
isSelect1:false,
|
|
countryList:[],
|
|
index:0,
|
|
countryText:'',
|
|
provinceList:[],
|
|
provinceIndex:0,
|
|
provinceText:'',
|
|
cityList:[],
|
|
cityIndex:0,
|
|
cityText:'',
|
|
query:{
|
|
_action:'saveconsignee',
|
|
consignee:{
|
|
address_id:0,
|
|
consignee:'',
|
|
country:0,
|
|
province:0,
|
|
city:0,
|
|
district:0,
|
|
address:'',
|
|
zipcode:'',
|
|
email:'',
|
|
tel:'',
|
|
mobile:'',
|
|
sign_building:'',
|
|
best_time:''
|
|
},
|
|
is_default:0
|
|
},
|
|
province:'',
|
|
city:'',
|
|
address:'',
|
|
listAll:[],
|
|
isaddress:true,
|
|
}
|
|
},
|
|
methods:{
|
|
// ����
|
|
save(){
|
|
if(this.query.consignee.consignee==''){
|
|
uni.showToast({
|
|
icon:'none',
|
|
title:'Please fill Fall name'
|
|
})
|
|
return
|
|
}
|
|
if(this.query.consignee.mobile==''){
|
|
uni.showToast({
|
|
icon:'none',
|
|
title:'Please fill Phone Number'
|
|
})
|
|
return
|
|
}
|
|
if(this.address==''){
|
|
uni.showToast({
|
|
icon:'none',
|
|
title:'Please fill Stree adderss or P.O.Box'
|
|
})
|
|
return
|
|
}
|
|
if(this.query.consignee.sign_building==''){
|
|
uni.showToast({
|
|
icon:'none',
|
|
title:'Please fill Appartment,suite,unit,etc.'
|
|
})
|
|
return
|
|
}
|
|
if(!this.isSelect1){
|
|
if(this.city==''){
|
|
uni.showToast({
|
|
icon:'none',
|
|
title:'Please fill in City/Town'
|
|
})
|
|
return
|
|
}
|
|
else{
|
|
this.query.consignee.city_name = this.city
|
|
this.query.consignee.city = " 0 "
|
|
}
|
|
this.query.consignee.address=this.cityText+this.address
|
|
}else{
|
|
if(this.query.consignee.city==0){
|
|
uni.showToast({
|
|
icon:'none',
|
|
title:'Please Select City/Town'
|
|
})
|
|
|
|
return
|
|
}
|
|
}
|
|
if(!this.isSelect){
|
|
if(this.province==''){
|
|
uni.showToast({
|
|
icon:'none',
|
|
title:'Please fill in State/Province'
|
|
})
|
|
return
|
|
}
|
|
this.province = this.provinceIndex
|
|
this.query.consignee.address=this.provinceText+this.query.consignee.address
|
|
}else{
|
|
if(this.query.consignee.province==0){
|
|
uni.showToast({
|
|
icon:'none',
|
|
title:'Please Select State/Province'
|
|
})
|
|
return
|
|
}
|
|
}
|
|
if(this.query.consignee.zipcode==''){
|
|
uni.showToast({
|
|
icon:'none',
|
|
title:'Please fill Zip code/Postcode/PLZ/Eircode'
|
|
})
|
|
return
|
|
}
|
|
|
|
this.query.consignee.address = this.address
|
|
console.info(this.query)
|
|
defaultRequest3(this.query,'consignee').then(res=>{
|
|
console.info(res)
|
|
if(res.error==0){
|
|
uni.showToast({
|
|
icon:'none',
|
|
title:res.message
|
|
})
|
|
uni.navigateBack()
|
|
}
|
|
this.query.consignee.address=''
|
|
})
|
|
},
|
|
// �л��Ƿ�Ĭ�ϵ�ַ
|
|
isDefault(e){
|
|
console.info(e)
|
|
if(e.detail.value){
|
|
this.query.is_default=1
|
|
}else{
|
|
this.query.is_default=0
|
|
}
|
|
},
|
|
// ��ȡ��������
|
|
getCountry(){
|
|
let data={_action:'getregions',parent_region_id:0}
|
|
// uni.showLoading({
|
|
// title:'loading'
|
|
// })
|
|
// setTimeout(()=>{
|
|
// uni.hideLoading()
|
|
// },5000)
|
|
|
|
defaultRequest2(data).then(res=>{
|
|
let list =[]
|
|
let listAll = []
|
|
console.info(res)
|
|
// // console.log(this.countryText)
|
|
|
|
|
|
if(res.error==0){
|
|
this.countryList=res.data
|
|
uni.setStorageSync('countryText',this.countryList)
|
|
this.isaddress = false
|
|
uni.hideLoading()
|
|
if(this.countryText){
|
|
res.data.map( item =>{
|
|
if(item.region_name == this.countryText){
|
|
item.regions.map(item2 =>{
|
|
list.push({
|
|
region_name:item2.region_name,
|
|
region_id:item2.region_id
|
|
})
|
|
listAll.push({
|
|
name:item2.region_name,
|
|
list:item2.regions
|
|
})
|
|
this.provinceList = list
|
|
if(item2.region_name == this.provinceText){
|
|
this.cityList = item2.regions
|
|
}
|
|
|
|
})
|
|
}
|
|
})
|
|
// console.log(listAll,'ppp')
|
|
this.listAll = listAll
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// ѡ������
|
|
bindPickerChange(e){
|
|
this.cityList = []
|
|
this.provinceList = []
|
|
console.log(e)
|
|
// uni.showLoading({
|
|
// title:''
|
|
// })
|
|
// this.isSelect = true
|
|
if(this.index!=e.detail.value){
|
|
this.provinceText=''
|
|
this.cityText=''
|
|
this.query.consignee.city=0
|
|
this.query.consignee.province=0
|
|
}
|
|
let list =[]
|
|
let listAll = []
|
|
this.index=e.detail.value
|
|
console.log(this.countryList)
|
|
|
|
this.query.consignee.country=this.countryList[this.index].region_id
|
|
this.countryText=this.countryList[this.index].region_name
|
|
|
|
// if(this.countryList.length >0){
|
|
// this.isSelect = true
|
|
// console.log(this.countryList.length)
|
|
// }
|
|
if(this.countryText){
|
|
this.isSelect = true
|
|
let strlist
|
|
this.countryList.map( item =>{
|
|
console.log(item)
|
|
if(item.region_name == this.countryText){
|
|
item.regions.map(item2 =>{
|
|
list.push({
|
|
region_name:item2.region_name,
|
|
region_id:item2.region_id
|
|
})
|
|
|
|
if(item2.regions){
|
|
strlist = item2.regions
|
|
}
|
|
listAll.push({
|
|
name:item2.region_name,
|
|
list:strlist
|
|
})
|
|
this.cityList = strlist
|
|
|
|
this.provinceList = list
|
|
// this.provinceText = list[0].region_name
|
|
this.listAll = listAll
|
|
if(this.cityList)
|
|
{
|
|
this.cityText = strlist[0].region_name
|
|
this.isSelect1 = true
|
|
}else{
|
|
this.isSelect1 = false
|
|
}
|
|
if(this.provinceList){
|
|
this.provinceText = list[0].region_name
|
|
this.isSelect = true
|
|
}
|
|
|
|
|
|
})
|
|
|
|
}
|
|
})
|
|
|
|
|
|
console.log(this.provinceList )
|
|
this.listAll = listAll
|
|
}
|
|
|
|
|
|
},
|
|
// ѡ��ʡ��
|
|
bindPickerChange1(e){
|
|
|
|
this.provinceIndex=e.detail.value
|
|
console.log(this.provinceList)
|
|
this.provinceText=this.provinceList[this.provinceIndex].region_name
|
|
this.listAll.map(item =>{
|
|
if(item.name == this.provinceText){
|
|
this.cityList = item.list
|
|
if(this.cityList&&this.cityList[0].region_name!=undefined)
|
|
{
|
|
this.cityText = this.cityList[0].region_name
|
|
this.query.consignee.city=this.cityList[0].region_id
|
|
this.isSelect1 = true
|
|
}
|
|
else{
|
|
this.isSelect1 = false
|
|
// this.query.consignee.city = 1
|
|
// this.query.consignee.city_name = this.city
|
|
}
|
|
}
|
|
})
|
|
// this.provinceList = this.countryList[this.index].regions
|
|
|
|
// if(this.provinceIndex!=e.detail.value){
|
|
// this.cityText=''
|
|
// this.query.consignee.city=0
|
|
// }
|
|
// this.isSelect1=true
|
|
// this.cityList=this.provinceList[this.provinceIndex].regions
|
|
// if(this.provinceList[this.provinceIndex].regions){
|
|
// this.isSelect1=true
|
|
// this.cityList=this.provinceList[this.provinceIndex].regions
|
|
// }else{
|
|
// this.isSelect1=false
|
|
// this.cityText=''
|
|
// }
|
|
|
|
this.query.consignee.province=this.provinceList[this.provinceIndex].region_id
|
|
console.log(this.query.consignee.province)
|
|
|
|
// this.provinceText=this.provinceList[this.provinceIndex].region_name
|
|
},
|
|
// ѡ������
|
|
bindPickerChange2(e){
|
|
this.cityIndex=e.detail.value
|
|
this.cityText=this.cityList[this.cityIndex].region_name
|
|
this.query.consignee.city=this.cityList[this.cityIndex].region_id
|
|
|
|
|
|
}
|
|
},
|
|
created() {
|
|
let str = uni.getStorageSync('countryList')
|
|
console.log(str.length)
|
|
if(str.length >0 ){
|
|
this.countryList = uni.getStorageSync('countryList')
|
|
}
|
|
else{
|
|
this.getCountry()
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
this.getCountry()
|
|
|
|
if(e.type==1){
|
|
e.data=JSON.parse(e.data)
|
|
console.info(e.data)
|
|
this.query.consignee=e.data
|
|
this.address = this.query.consignee.address
|
|
if(e.data.default_address_id==e.data.address_id){
|
|
this.query.is_default=1
|
|
}
|
|
this.countryText=e.data.country_name
|
|
if(e.data.city!=0){
|
|
this.isSelect1=true
|
|
this.cityText=e.data.city_name
|
|
}else{
|
|
|
|
}
|
|
if(e.data.province!=0){
|
|
this.isSelect=true
|
|
this.provinceText=e.data.province_name
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
page{
|
|
background-color: #F6F5FA;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
/deep/.uni-input-input{
|
|
font-size: 29rpx !important;
|
|
font-weight: bold;
|
|
padding-top: 10rpx !important;
|
|
}
|
|
.address_serch{
|
|
background-color: white;
|
|
padding: 26.67rpx 24rpx;
|
|
margin-top: 14.67rpx;
|
|
input{
|
|
font-size: 22.67rpx;
|
|
font-weight: 400;
|
|
border: 1px solid #E2E2E2;
|
|
padding: 23.33rpx 0;
|
|
padding-left: 64.67rpx;
|
|
position: relative;
|
|
&:before{
|
|
content: "";
|
|
background-image: url("@/static/img/address1.png");
|
|
background-size: 100% 100%;
|
|
width: 29.33rpx;
|
|
height: 29.33rpx;
|
|
position: absolute;
|
|
left: 20.67rpx;
|
|
}
|
|
}
|
|
}
|
|
.address_info{
|
|
background-color: white;
|
|
padding: 0 26.67rpx;
|
|
margin-top: 14.67rpx;
|
|
.address_info_item{
|
|
padding-top: 30.67rpx;
|
|
padding-bottom: 30.67rpx;
|
|
border-bottom: 1px solid #E2E2E2;
|
|
&:last-child{
|
|
border-bottom: none;
|
|
}
|
|
.info_item_title{
|
|
font-size: 24rpx;
|
|
color: #888888;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
margin-bottom: 14rpx;
|
|
|
|
.info_item_title_pick{
|
|
width: 100%;
|
|
}
|
|
.info_item_title_span{
|
|
font-size: 26rpx;
|
|
color: black;
|
|
text-align: start;
|
|
margin-top: 12.33rpx;
|
|
}
|
|
image{
|
|
width: 25.33rpx;
|
|
height: 25.33rpx;
|
|
}
|
|
}
|
|
.info_item_input{
|
|
input{
|
|
font-size: 24rpx;
|
|
padding-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.address_info_item1{
|
|
// padding-top: 32.67rpx;
|
|
// padding-bottom: 17.33rpx;
|
|
}
|
|
}
|
|
.address_switch{
|
|
margin-top: 14.67rpx;
|
|
background-color: white;
|
|
padding: 17.33rpx 0;
|
|
padding-left: 32rpx;
|
|
padding-right: 52.67rpx;
|
|
font-size: 24rpx;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.address_submit{
|
|
padding: 0 32rpx;
|
|
margin-top: 112rpx;
|
|
|
|
button{
|
|
background-color: black;
|
|
color: white;
|
|
font-size: 26.67rpx;
|
|
margin: 0;
|
|
font-weight: bold;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
}
|
|
}
|
|
</style>
|