parent
f6fc4710a0
commit
d88bbdedc7
File diff suppressed because one or more lines are too long
@ -1,239 +1,239 @@ |
||||
<template> |
||||
<view> |
||||
<view class="content"> |
||||
<view class="list"> |
||||
<view class="row" v-for="(row,index) in addressList" :key="index" @tap="select(row)"> |
||||
<view class="left"> |
||||
<view class="head"> |
||||
{{row.head}} |
||||
</view> |
||||
</view> |
||||
<view class="center"> |
||||
<view class="name-tel"> |
||||
<view class="name">{{row.name}}</view> |
||||
<view class="tel">{{row.tel}}</view> |
||||
<view class="default" v-if="row.isDefault"> |
||||
默认 |
||||
</view> |
||||
</view> |
||||
<view class="address"> |
||||
{{row.address.region.label}} {{row.address.detailed}} |
||||
</view> |
||||
</view> |
||||
<view class="right"> |
||||
<view class="icon bianji" @tap.stop="edit(row)"> |
||||
|
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="add"> |
||||
<view class="btn" @tap="add"> |
||||
<view class="icon tianjia"></view>新增地址 |
||||
</view> |
||||
<view class="content"> |
||||
<view class="list"> |
||||
<view class="row" v-for="(row,index) in addressList" :key="index" @tap="select(row)"> |
||||
<view class="left"> |
||||
<view class="head"> |
||||
{{row.head}} |
||||
</view> |
||||
</view> |
||||
<view class="center"> |
||||
<view class="name-tel"> |
||||
<view class="name">{{row.name}}</view> |
||||
<view class="tel">{{row.tel}}</view> |
||||
<view class="default" v-if="row.isDefault"> |
||||
默认 |
||||
</view> |
||||
</view> |
||||
<view class="address"> |
||||
{{row.address.region.label}} {{row.address.detailed}} |
||||
</view> |
||||
</view> |
||||
<view class="right"> |
||||
<view class="icon bianji" @tap.stop="edit(row)"> |
||||
|
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="add"> |
||||
<view class="btn" @tap="add"> |
||||
<view class="icon tianjia"></view>新增地址 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
return { |
||||
isSelect:false, |
||||
addressList:[ |
||||
{id:1,name:"大黑哥",head:"大",tel:"18816881688",address:{region:{"label":"广东省-深圳市-福田区","value":[18,2,1],"cityCode":"440304"},detailed:'深南大道1111号无名摩登大厦6楼A2'},isDefault:true}, |
||||
{id:2,name:"大黑哥",head:"大",tel:"15812341234",address:{region:{"label":"广东省-深圳市-福田区","value":[18,2,1],"cityCode":"440304"},detailed:'深北小道2222号有名公寓502'},isDefault:false}, |
||||
{id:3,name:"老大哥",head:"老",tel:"18155467897",address:{region:{"label":"广东省-深圳市-福田区","value":[18,2,1],"cityCode":"440304"},detailed:'深南大道1111号无名摩登大厦6楼A2'},isDefault:false}, |
||||
{id:4,name:"王小妹",head:"王",tel:"13425654895",address:{region:{"label":"广东省-深圳市-福田区","value":[18,2,1],"cityCode":"440304"},detailed:'深南大道1111号无名摩登大厦6楼A2'},isDefault:false}, |
||||
addressList:[ |
||||
{id:1,name:"大黑哥",head:"大",tel:"18816881688",address:{region:{"label":"广东省-深圳市-福田区","value":[18,2,1],"cityCode":"440304"},detailed:'深南大道1111号无名摩登大厦6楼A2'},isDefault:true}, |
||||
{id:2,name:"大黑哥",head:"大",tel:"15812341234",address:{region:{"label":"广东省-深圳市-福田区","value":[18,2,1],"cityCode":"440304"},detailed:'深北小道2222号有名公寓502'},isDefault:false}, |
||||
{id:3,name:"老大哥",head:"老",tel:"18155467897",address:{region:{"label":"广东省-深圳市-福田区","value":[18,2,1],"cityCode":"440304"},detailed:'深南大道1111号无名摩登大厦6楼A2'},isDefault:false}, |
||||
{id:4,name:"王小妹",head:"王",tel:"13425654895",address:{region:{"label":"广东省-深圳市-福田区","value":[18,2,1],"cityCode":"440304"},detailed:'深南大道1111号无名摩登大厦6楼A2'},isDefault:false}, |
||||
] |
||||
}; |
||||
}, |
||||
onShow() { |
||||
|
||||
uni.getStorage({ |
||||
key:'delAddress', |
||||
success: (e) => { |
||||
let len = this.addressList.length; |
||||
if(e.data.hasOwnProperty('id')){ |
||||
for(let i=0;i<len;i++){ |
||||
if(this.addressList[i].id==e.data.id){ |
||||
this.addressList.splice(i,1); |
||||
break; |
||||
} |
||||
} |
||||
} |
||||
uni.removeStorage({ |
||||
key:'delAddress' |
||||
}) |
||||
} |
||||
}) |
||||
uni.getStorage({ |
||||
key:'saveAddress', |
||||
success: (e) => { |
||||
let len = this.addressList.length; |
||||
if(e.data.hasOwnProperty('id')){ |
||||
for(let i=0;i<len;i++){ |
||||
if(this.addressList[i].id==e.data.id){ |
||||
this.addressList.splice(i,1,e.data); |
||||
break; |
||||
} |
||||
} |
||||
}else{ |
||||
let lastid = this.addressList[len-1]; |
||||
lastid++; |
||||
e.data.id = lastid; |
||||
this.addressList.push(e.data); |
||||
} |
||||
uni.removeStorage({ |
||||
key:'saveAddress' |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
onLoad(e) { |
||||
if(e.type=='select'){ |
||||
this.isSelect = true; |
||||
} |
||||
}, |
||||
methods:{ |
||||
edit(row){ |
||||
uni.setStorage({ |
||||
key:'address', |
||||
data:row, |
||||
success() { |
||||
uni.navigateTo({ |
||||
url:"edit/edit?type=edit" |
||||
}) |
||||
} |
||||
}); |
||||
|
||||
}, |
||||
add(){ |
||||
uni.navigateTo({ |
||||
url:"edit/edit?type=add" |
||||
}) |
||||
}, |
||||
select(row){ |
||||
//是否需要返回地址(从订单确认页跳过来选收货地址) |
||||
if(!this.isSelect){ |
||||
return ; |
||||
} |
||||
uni.setStorage({ |
||||
key:'selectAddress', |
||||
data:row, |
||||
success() { |
||||
uni.navigateBack(); |
||||
} |
||||
}) |
||||
} |
||||
}, |
||||
onShow() { |
||||
|
||||
uni.getStorage({ |
||||
key:'delAddress', |
||||
success: (e) => { |
||||
let len = this.addressList.length; |
||||
if(e.data.hasOwnProperty('id')){ |
||||
for(let i=0;i<len;i++){ |
||||
if(this.addressList[i].id==e.data.id){ |
||||
this.addressList.splice(i,1); |
||||
break; |
||||
} |
||||
} |
||||
} |
||||
uni.removeStorage({ |
||||
key:'delAddress' |
||||
}) |
||||
} |
||||
}) |
||||
uni.getStorage({ |
||||
key:'saveAddress', |
||||
success: (e) => { |
||||
let len = this.addressList.length; |
||||
if(e.data.hasOwnProperty('id')){ |
||||
for(let i=0;i<len;i++){ |
||||
if(this.addressList[i].id==e.data.id){ |
||||
this.addressList.splice(i,1,e.data); |
||||
break; |
||||
} |
||||
} |
||||
}else{ |
||||
let lastid = this.addressList[len-1]; |
||||
lastid++; |
||||
e.data.id = lastid; |
||||
this.addressList.push(e.data); |
||||
} |
||||
uni.removeStorage({ |
||||
key:'saveAddress' |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
onLoad(e) { |
||||
if(e.type=='select'){ |
||||
this.isSelect = true; |
||||
} |
||||
}, |
||||
methods:{ |
||||
edit(row){ |
||||
uni.setStorage({ |
||||
key:'address', |
||||
data:row, |
||||
success() { |
||||
uni.navigateTo({ |
||||
url:"edit/edit?type=edit" |
||||
}) |
||||
} |
||||
}); |
||||
|
||||
}, |
||||
add(){ |
||||
uni.navigateTo({ |
||||
url:"edit/edit?type=add" |
||||
}) |
||||
}, |
||||
select(row){ |
||||
//是否需要返回地址(从订单确认页跳过来选收货地址) |
||||
if(!this.isSelect){ |
||||
return ; |
||||
} |
||||
uni.setStorage({ |
||||
key:'selectAddress', |
||||
data:row, |
||||
success() { |
||||
uni.navigateBack(); |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
view{ |
||||
display: flex; |
||||
<style lang="scss"> |
||||
view{ |
||||
display: flex; |
||||
} |
||||
.icon { |
||||
// &.bianji { |
||||
// &:before{content:"\e61b";} |
||||
// } |
||||
// &.tianjia { |
||||
// &:before{content:"\e81a";} |
||||
// } |
||||
} |
||||
.add{ |
||||
position: fixed; |
||||
bottom: 0; |
||||
width: 100%; |
||||
height: 120upx; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.btn{ |
||||
box-shadow: 0upx 5upx 10upx rgba(0,0,0,0.4); |
||||
width: 70%; |
||||
height: 80upx; |
||||
border-radius: 80upx; |
||||
background-color: #f06c7a; |
||||
color: #fff; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.icon{ |
||||
height: 80upx; |
||||
color: #fff; |
||||
font-size: 30upx; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
font-size: 30upx; |
||||
} |
||||
} |
||||
.list{ |
||||
flex-wrap: wrap; |
||||
.row{ |
||||
width: 96%; |
||||
padding: 20upx 2%; |
||||
.left{ |
||||
width: 90upx; |
||||
flex-shrink: 0; |
||||
align-items: center; |
||||
.head{ |
||||
width: 70upx; |
||||
height: 70upx; |
||||
background:linear-gradient(to right,#ccc,#aaa); |
||||
color: #fff; |
||||
justify-content: center; |
||||
align-items: center; |
||||
border-radius: 60upx; |
||||
font-size: 35upx; |
||||
} |
||||
} |
||||
.center{ |
||||
width: 100%; |
||||
flex-wrap: wrap; |
||||
.name-tel{ |
||||
width: 100%; |
||||
align-items: baseline; |
||||
.name{ |
||||
font-size: 34upx; |
||||
} |
||||
.tel{ |
||||
margin-left: 30upx; |
||||
font-size: 24upx; |
||||
color: #777; |
||||
} |
||||
.default{ |
||||
|
||||
font-size: 22upx; |
||||
|
||||
background-color: #f06c7a; |
||||
color: #fff; |
||||
padding: 0 18upx; |
||||
border-radius: 24upx; |
||||
margin-left: 20upx; |
||||
} |
||||
} |
||||
.address{ |
||||
width: 100%; |
||||
font-size: 24upx; |
||||
align-items: baseline; |
||||
color: #777; |
||||
} |
||||
} |
||||
.right{ |
||||
flex-shrink: 0; |
||||
align-items: center; |
||||
margin-left: 20upx; |
||||
.icon{ |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 80upx; |
||||
height: 60upx; |
||||
border-left: solid 1upx #aaa; |
||||
font-size: 40upx; |
||||
color: #777; |
||||
} |
||||
} |
||||
} |
||||
.icon { |
||||
// &.bianji { |
||||
// &:before{content:"\e61b";} |
||||
// } |
||||
// &.tianjia { |
||||
// &:before{content:"\e81a";} |
||||
// } |
||||
} |
||||
.add{ |
||||
position: fixed; |
||||
bottom: 0; |
||||
width: 100%; |
||||
height: 120upx; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.btn{ |
||||
box-shadow: 0upx 5upx 10upx rgba(0,0,0,0.4); |
||||
width: 70%; |
||||
height: 80upx; |
||||
border-radius: 80upx; |
||||
background-color: #0083f5; |
||||
color: #fff; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.icon{ |
||||
height: 80upx; |
||||
color: #fff; |
||||
font-size: 30upx; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
font-size: 30upx; |
||||
} |
||||
} |
||||
.list{ |
||||
flex-wrap: wrap; |
||||
.row{ |
||||
width: 96%; |
||||
padding: 20upx 2%; |
||||
.left{ |
||||
width: 90upx; |
||||
flex-shrink: 0; |
||||
align-items: center; |
||||
.head{ |
||||
width: 70upx; |
||||
height: 70upx; |
||||
background:linear-gradient(to right,#ccc,#aaa); |
||||
color: #fff; |
||||
justify-content: center; |
||||
align-items: center; |
||||
border-radius: 60upx; |
||||
font-size: 35upx; |
||||
} |
||||
} |
||||
.center{ |
||||
width: 100%; |
||||
flex-wrap: wrap; |
||||
.name-tel{ |
||||
width: 100%; |
||||
align-items: baseline; |
||||
.name{ |
||||
font-size: 34upx; |
||||
} |
||||
.tel{ |
||||
margin-left: 30upx; |
||||
font-size: 24upx; |
||||
color: #777; |
||||
} |
||||
.default{ |
||||
|
||||
font-size: 22upx; |
||||
|
||||
background-color: #0083f5; |
||||
color: #fff; |
||||
padding: 0 18upx; |
||||
border-radius: 24upx; |
||||
margin-left: 20upx; |
||||
} |
||||
} |
||||
.address{ |
||||
width: 100%; |
||||
font-size: 24upx; |
||||
align-items: baseline; |
||||
color: #777; |
||||
} |
||||
} |
||||
.right{ |
||||
flex-shrink: 0; |
||||
align-items: center; |
||||
margin-left: 20upx; |
||||
.icon{ |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 80upx; |
||||
height: 60upx; |
||||
border-left: solid 1upx #aaa; |
||||
font-size: 40upx; |
||||
color: #777; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
@ -1,261 +1,261 @@ |
||||
<template> |
||||
<view> |
||||
<view class="content"> |
||||
<view class="row"> |
||||
<view class="nominal"> |
||||
收件人 |
||||
</view> |
||||
<view class="input"> |
||||
<input placeholder="请输入收件人姓名" type="text" v-model="name" /> |
||||
</view> |
||||
</view> |
||||
<view class="row"> |
||||
<view class="nominal"> |
||||
电话号码 |
||||
</view> |
||||
<view class="input"> |
||||
<input placeholder="请输入收件人电话号码" type="text" v-model="tel" /> |
||||
</view> |
||||
</view> |
||||
<view class="row"> |
||||
<view class="nominal"> |
||||
所在地区 |
||||
</view> |
||||
<view class="input" @tap="chooseCity"> |
||||
{{region.label}} |
||||
</view> |
||||
|
||||
</view> |
||||
<view class="row"> |
||||
<view class="nominal"> |
||||
详细地址 |
||||
</view> |
||||
<view class="input"> |
||||
<textarea v-model="detailed" auto-height="true" placeholder="输入详细地址"></textarea> |
||||
</view> |
||||
</view> |
||||
<view class="row"> |
||||
<view class="nominal"> |
||||
设置默认地址 |
||||
</view> |
||||
<view class="input switch"> |
||||
<switch color="#f06c7a" :checked="isDefault" @change=isDefaultChange /> |
||||
</view> |
||||
</view> |
||||
<view class="row" v-if="editType=='edit'" @tap="del"> |
||||
<view class="del"> |
||||
删除收货地址 |
||||
</view> |
||||
</view> |
||||
<view> |
||||
<view class="content"> |
||||
<view class="row"> |
||||
<view class="nominal"> |
||||
收件人 |
||||
</view> |
||||
<view class="input"> |
||||
<input placeholder="请输入收件人姓名" type="text" v-model="name" /> |
||||
</view> |
||||
</view> |
||||
<view class="row"> |
||||
<view class="nominal"> |
||||
电话号码 |
||||
</view> |
||||
<view class="input"> |
||||
<input placeholder="请输入收件人电话号码" type="text" v-model="tel" /> |
||||
</view> |
||||
</view> |
||||
<view class="row"> |
||||
<view class="nominal"> |
||||
所在地区 |
||||
</view> |
||||
<view class="input" @tap="chooseCity"> |
||||
{{region.label}} |
||||
</view> |
||||
|
||||
</view> |
||||
<view class="row"> |
||||
<view class="nominal"> |
||||
详细地址 |
||||
</view> |
||||
<view class="input"> |
||||
<textarea v-model="detailed" auto-height="true" placeholder="输入详细地址"></textarea> |
||||
</view> |
||||
</view> |
||||
<view class="row"> |
||||
<view class="nominal"> |
||||
设置默认地址 |
||||
</view> |
||||
<view class="input switch"> |
||||
<switch color="#0083f5" :checked="isDefault" @change=isDefaultChange /> |
||||
</view> |
||||
</view> |
||||
<view class="row" v-if="editType=='edit'" @tap="del"> |
||||
<view class="del"> |
||||
删除收货地址 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="save" @tap="save"> |
||||
<view class="btn"> |
||||
保存地址 |
||||
</view> |
||||
</view> |
||||
<view class="save" @tap="save"> |
||||
<view class="btn"> |
||||
保存地址 |
||||
</view> |
||||
</view> |
||||
<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValue" @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue' |
||||
export default { |
||||
components: { |
||||
mpvueCityPicker |
||||
}, |
||||
data() { |
||||
return { |
||||
editType:'edit', |
||||
id:'', |
||||
name:'', |
||||
tel:'', |
||||
detailed:'', |
||||
isDefault:false, |
||||
cityPickerValue: [0, 0, 1], |
||||
themeColor: '#007AFF', |
||||
region:{label:"请点击选择地址",value:[],cityCode:""} |
||||
}; |
||||
}, |
||||
methods: { |
||||
onCancel(e) { |
||||
console.log(e) |
||||
}, |
||||
chooseCity() { |
||||
this.$refs.mpvueCityPicker.show() |
||||
}, |
||||
onConfirm(e) { |
||||
this.region = e; |
||||
this.cityPickerValue = e.value; |
||||
}, |
||||
isDefaultChange(e){ |
||||
this.isDefault = e.detail.value; |
||||
}, |
||||
del(){ |
||||
uni.showModal({ |
||||
title: '删除提示', |
||||
content: '你将删除这个收货地址', |
||||
success: (res)=>{ |
||||
if (res.confirm) { |
||||
uni.setStorage({ |
||||
key:'delAddress', |
||||
data:{id:this.id}, |
||||
success() { |
||||
uni.navigateBack(); |
||||
} |
||||
}) |
||||
} else if (res.cancel) { |
||||
console.log('用户点击取消'); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
}, |
||||
save(){ |
||||
let data={"name":this.name,"head":this.name.substr(0,1),"tel":this.tel,"address":{"region":this.region,"detailed":this.detailed},"isDefault":this.isDefault} |
||||
if(this.editType=='edit'){ |
||||
data.id = this.id |
||||
} |
||||
if(!data.name){ |
||||
uni.showToast({title:'请输入收件人姓名',icon:'none'}); |
||||
return ; |
||||
} |
||||
if(!data.tel){ |
||||
uni.showToast({title:'请输入收件人电话号码',icon:'none'}); |
||||
return ; |
||||
} |
||||
if(!data.address.detailed){ |
||||
uni.showToast({title:'请输入收件人详细地址',icon:'none'}); |
||||
return ; |
||||
} |
||||
if(data.address.region.value.length==0){ |
||||
uni.showToast({title:'请选择收件地址',icon:'none'}); |
||||
return ; |
||||
} |
||||
uni.showLoading({ |
||||
title:'正在提交' |
||||
}) |
||||
//实际应用中请提交ajax,模板定时器模拟提交效果 |
||||
setTimeout(()=>{ |
||||
uni.setStorage({ |
||||
key:'saveAddress', |
||||
data:data, |
||||
success() { |
||||
uni.hideLoading(); |
||||
uni.navigateBack(); |
||||
} |
||||
}) |
||||
},300) |
||||
|
||||
|
||||
} |
||||
}, |
||||
onLoad(e) { |
||||
//获取传递过来的参数 |
||||
|
||||
this.editType = e.type; |
||||
if(e.type=='edit'){ |
||||
uni.getStorage({ |
||||
key:'address', |
||||
success: (e) => { |
||||
this.id = e.data.id; |
||||
this.name = e.data.name; |
||||
this.tel = e.data.tel; |
||||
this.detailed = e.data.address.detailed; |
||||
this.isDefault = e.data.isDefault; |
||||
this.cityPickerValue = e.data.address.region.value; |
||||
this.region = e.data.address.region; |
||||
} |
||||
}) |
||||
} |
||||
|
||||
}, |
||||
onBackPress() { |
||||
if (this.$refs.mpvueCityPicker.showPicker) { |
||||
this.$refs.mpvueCityPicker.pickerCancel(); |
||||
return true; |
||||
} |
||||
}, |
||||
onUnload() { |
||||
if (this.$refs.mpvueCityPicker.showPicker) { |
||||
this.$refs.mpvueCityPicker.pickerCancel() |
||||
} |
||||
} |
||||
<script> |
||||
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue' |
||||
export default { |
||||
components: { |
||||
mpvueCityPicker |
||||
}, |
||||
data() { |
||||
return { |
||||
editType:'edit', |
||||
id:'', |
||||
name:'', |
||||
tel:'', |
||||
detailed:'', |
||||
isDefault:false, |
||||
cityPickerValue: [0, 0, 1], |
||||
themeColor: '#007AFF', |
||||
region:{label:"请点击选择地址",value:[],cityCode:""} |
||||
}; |
||||
}, |
||||
methods: { |
||||
onCancel(e) { |
||||
console.log(e) |
||||
}, |
||||
chooseCity() { |
||||
this.$refs.mpvueCityPicker.show() |
||||
}, |
||||
onConfirm(e) { |
||||
this.region = e; |
||||
this.cityPickerValue = e.value; |
||||
}, |
||||
isDefaultChange(e){ |
||||
this.isDefault = e.detail.value; |
||||
}, |
||||
del(){ |
||||
uni.showModal({ |
||||
title: '删除提示', |
||||
content: '你将删除这个收货地址', |
||||
success: (res)=>{ |
||||
if (res.confirm) { |
||||
uni.setStorage({ |
||||
key:'delAddress', |
||||
data:{id:this.id}, |
||||
success() { |
||||
uni.navigateBack(); |
||||
} |
||||
}) |
||||
} else if (res.cancel) { |
||||
console.log('用户点击取消'); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
}, |
||||
save(){ |
||||
let data={"name":this.name,"head":this.name.substr(0,1),"tel":this.tel,"address":{"region":this.region,"detailed":this.detailed},"isDefault":this.isDefault} |
||||
if(this.editType=='edit'){ |
||||
data.id = this.id |
||||
} |
||||
if(!data.name){ |
||||
uni.showToast({title:'请输入收件人姓名',icon:'none'}); |
||||
return ; |
||||
} |
||||
if(!data.tel){ |
||||
uni.showToast({title:'请输入收件人电话号码',icon:'none'}); |
||||
return ; |
||||
} |
||||
if(!data.address.detailed){ |
||||
uni.showToast({title:'请输入收件人详细地址',icon:'none'}); |
||||
return ; |
||||
} |
||||
if(data.address.region.value.length==0){ |
||||
uni.showToast({title:'请选择收件地址',icon:'none'}); |
||||
return ; |
||||
} |
||||
uni.showLoading({ |
||||
title:'正在提交' |
||||
}) |
||||
//实际应用中请提交ajax,模板定时器模拟提交效果 |
||||
setTimeout(()=>{ |
||||
uni.setStorage({ |
||||
key:'saveAddress', |
||||
data:data, |
||||
success() { |
||||
uni.hideLoading(); |
||||
uni.navigateBack(); |
||||
} |
||||
}) |
||||
},300) |
||||
|
||||
|
||||
} |
||||
}, |
||||
onLoad(e) { |
||||
//获取传递过来的参数 |
||||
|
||||
this.editType = e.type; |
||||
if(e.type=='edit'){ |
||||
uni.getStorage({ |
||||
key:'address', |
||||
success: (e) => { |
||||
this.id = e.data.id; |
||||
this.name = e.data.name; |
||||
this.tel = e.data.tel; |
||||
this.detailed = e.data.address.detailed; |
||||
this.isDefault = e.data.isDefault; |
||||
this.cityPickerValue = e.data.address.region.value; |
||||
this.region = e.data.address.region; |
||||
} |
||||
}) |
||||
} |
||||
|
||||
}, |
||||
onBackPress() { |
||||
if (this.$refs.mpvueCityPicker.showPicker) { |
||||
this.$refs.mpvueCityPicker.pickerCancel(); |
||||
return true; |
||||
} |
||||
}, |
||||
onUnload() { |
||||
if (this.$refs.mpvueCityPicker.showPicker) { |
||||
this.$refs.mpvueCityPicker.pickerCancel() |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss"> |
||||
<style lang="scss"> |
||||
|
||||
.save{ |
||||
view{ |
||||
display: flex; |
||||
} |
||||
position: fixed; |
||||
bottom: 0; |
||||
width: 100%; |
||||
height: 120upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.btn{ |
||||
box-shadow: 0upx 5upx 10upx rgba(0,0,0,0.4); |
||||
width: 70%; |
||||
height: 80upx; |
||||
border-radius: 80upx; |
||||
background-color: #f06c7a; |
||||
color: #fff; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.icon{ |
||||
height: 80upx; |
||||
color: #fff; |
||||
font-size: 30upx; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
font-size: 30upx; |
||||
} |
||||
} |
||||
.content{ |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
view{ |
||||
display: flex; |
||||
} |
||||
.row{ |
||||
width: 94%; |
||||
|
||||
margin: 0 3%; |
||||
border-top: solid 1upx #eee; |
||||
.nominal{ |
||||
width: 30%; |
||||
height: 120upx; |
||||
font-weight: 200; |
||||
font-size: 30upx; |
||||
align-items: center; |
||||
} |
||||
.input{ |
||||
width: 70%; |
||||
padding: 20upx 0; |
||||
align-items: center; |
||||
font-size: 30upx; |
||||
&.switch{ |
||||
justify-content: flex-end; |
||||
} |
||||
.textarea{ |
||||
margin: 20upx 0; |
||||
min-height: 120upx; |
||||
} |
||||
} |
||||
.del{ |
||||
width: 100%; |
||||
height: 100upx; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 36upx; |
||||
color: #f06c7a; |
||||
background-color: rgba(255,0,0,0.05); |
||||
border-bottom: solid 1upx #eee; |
||||
} |
||||
} |
||||
} |
||||
.save{ |
||||
view{ |
||||
display: flex; |
||||
} |
||||
position: fixed; |
||||
bottom: 0; |
||||
width: 100%; |
||||
height: 120upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.btn{ |
||||
box-shadow: 0upx 5upx 10upx rgba(0,0,0,0.4); |
||||
width: 70%; |
||||
height: 80upx; |
||||
border-radius: 80upx; |
||||
background-color: #0083f5; |
||||
color: #fff; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.icon{ |
||||
height: 80upx; |
||||
color: #fff; |
||||
font-size: 30upx; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
font-size: 30upx; |
||||
} |
||||
} |
||||
.content{ |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
view{ |
||||
display: flex; |
||||
} |
||||
.row{ |
||||
width: 94%; |
||||
|
||||
margin: 0 3%; |
||||
border-top: solid 1upx #eee; |
||||
.nominal{ |
||||
width: 30%; |
||||
height: 120upx; |
||||
font-weight: 200; |
||||
font-size: 30upx; |
||||
align-items: center; |
||||
} |
||||
.input{ |
||||
width: 70%; |
||||
padding: 20upx 0; |
||||
align-items: center; |
||||
font-size: 30upx; |
||||
&.switch{ |
||||
justify-content: flex-end; |
||||
} |
||||
.textarea{ |
||||
margin: 20upx 0; |
||||
min-height: 120upx; |
||||
} |
||||
} |
||||
.del{ |
||||
width: 100%; |
||||
height: 100upx; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 36upx; |
||||
color: #0083f5; |
||||
background-color: rgba(255,0,0,0.05); |
||||
border-bottom: solid 1upx #eee; |
||||
} |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 716 B |
Loading…
Reference in new issue