合并地址页面

main
jinna 3 years ago
parent b8b787f5d8
commit 2b6e83bbba
  1. 348
      pages/pages_zhentou/myPage/address.vue

@ -1,6 +1,6 @@
<template>
<view class="add_box">
<view class="address_box" >
<view class="address_box">
<view class="address_item" v-for="(item,index) in addressData" :key="index">
<view class="top_box" @click="turnToOrder(item)">
<view class="top_item">
@ -20,14 +20,14 @@
</view>
<view class="bottom_item">
<view class="no_checked_box" v-if="item.isDefault == 0" @click="handleDefault(item)">
<view class="no_checked"></view>
<p class="no_default" >设为默认</p>
<view class="no_checked"></view>
<p class="no_default">设为默认</p>
</view>
<view class="check_box" v-if="item.isDefault == 1">
<view class="checked">
<view class="checked">
<p class="item"></p>
</view>
<p class="default_txt">默认地址</p>
<p class="default_txt">默认地址</p>
</view>
</view>
@ -40,8 +40,8 @@
<p class="btn" @click="handleAdd">添加新地址</p>
</view>
<view class="pop_box">
<uni-popup ref="popup" style="width: 100%;" background-color="#fff" >
<view class="popup-content" >
<uni-popup ref="popup" style="width: 100%;" background-color="#fff">
<view class="popup-content">
<view class="title_box">
<view class="tit_txt">
{{title}}
@ -56,7 +56,8 @@
收货人
</view>
<view class="right_item">
<uni-easyinput v-model="buyUser" :inputBorder="false" placeholder="请输入收货人姓名"></uni-easyinput>
<uni-easyinput v-model="buyUser" :inputBorder="false"
placeholder="请输入收货人姓名"></uni-easyinput>
</view>
</view>
<view class="content_item">
@ -64,7 +65,8 @@
联系电话
</view>
<view class="right_item">
<uni-easyinput v-model="buyPhone" :inputBorder="false" placeholder="请输入联系方式"></uni-easyinput>
<uni-easyinput v-model="buyPhone" :inputBorder="false"
placeholder="请输入联系方式"></uni-easyinput>
</view>
</view>
<view class="content_item">
@ -74,11 +76,11 @@
<view class="right_item">
<!-- 山东省青岛市市北区 -->
<!-- <view class="right_icon" @click="changeAddress">
<!-- <view class="right_icon" @click="changeAddress">
<image src="../../../static/image/icon-arrow-right.png"></image>
</view> -->
<picker class="picker_box" :range="locationArr" @change="cityChange" mode="multiSelector"
@columnchange="columnchange" :value="multiIndex">
<picker class="picker_box" :range="locationArr" @change="cityChange"
mode="multiSelector" @columnchange="columnchange" :value="multiIndex">
<view class="city_box" v-if="province !== '' && city !== ''">
{{province}} / {{city}} {{district ? '/' : ''}} {{district}}
</view>
@ -93,7 +95,8 @@
详细地址
</view>
<view class="right_item">
<uni-easyinput type="textarea" :inputBorder="false" autoHeight v-model="address" placeholder="请输入详细地址"></uni-easyinput>
<uni-easyinput type="textarea" :inputBorder="false" autoHeight v-model="address"
placeholder="请输入详细地址"></uni-easyinput>
</view>
<!-- <view class="right_icon" @click="handlePosition">
<image src="../../../static/image/position.png"></image>
@ -117,10 +120,10 @@
export default {
data() {
return {
isEdit:false,
buyUser:'',
buyPhone:'',
address:'',
isEdit: false,
buyUser: '',
buyPhone: '',
address: '',
imgPrefix: getApp().globalData.imgPrefix,
locationArr: [
[],
@ -128,9 +131,9 @@
[]
],
multiIndex: [0, 0, 0],
province:'',
city:'',
district:'',
province: '',
city: '',
district: '',
addressData: [
// {name:'',phone:'15612345678',address:'866666',status:1},
// {name:'',phone:'15612345678',address:'866666',status:0},
@ -145,10 +148,10 @@
contentrefresh: "正在加载...",
contentnomore: "没有更多数据了",
},
title:'',
addressId:'',
userInfo:{},
pageFrom:''
title: '',
addressId: '',
userInfo: {},
pageFrom: ''
}
},
onLoad(options) {
@ -166,35 +169,35 @@
},
methods: {
//
handleSave(){
if(this.userInfo){
if(!this.isEdit){
if(this.address == '' || this.province == '' || this.buyUser == '' || this.buyPhone == ''){
handleSave() {
if (this.userInfo) {
if (!this.isEdit) {
if (this.address == '' || this.province == '' || this.buyUser == '' || this.buyPhone == '') {
uni.showToast({
title: '请完整填写信息',
icon: 'none'
})
}else{
} else {
let params = {
userId:this.userInfo.id,
consignee:this.buyUser,
phone:this.buyPhone,
province:this.province,
city:this.city,
area:this.district ? this.district : '',
address:this.address,
isDefault:0
userId: this.userInfo.id,
consignee: this.buyUser,
phone: this.buyPhone,
province: this.province,
city: this.city,
area: this.district ? this.district : '',
address: this.address,
isDefault: 0
}
uni.request({
url:getApp().globalData.baseUrl + '/address/save',
method:'POST',
header:{
url: getApp().globalData.baseUrl + '/address/save',
method: 'POST',
header: {
'Blade-Auth': 'bearer ' + uni.getStorageSync('token')
},
data:params,
success:(res) =>{
data: params,
success: (res) => {
console.log(res)
if(res.data.code == 200){
if (res.data.code == 200) {
uni.showToast({
title: '新增成功',
icon: 'none'
@ -208,33 +211,33 @@
}
})
}
}else{
if(this.address == '' || this.province == '' || this.buyUser == '' || this.buyPhone == ''){
} else {
if (this.address == '' || this.province == '' || this.buyUser == '' || this.buyPhone == '') {
uni.showToast({
title: '请完整填写信息',
icon: 'none'
})
}else{
} else {
let params = {
id:this.addressId,
userId:this.userInfo.id,
consignee:this.buyUser,
phone:this.buyPhone,
province:this.province,
city:this.city,
area:this.district ? this.district : '',
address:this.address,
id: this.addressId,
userId: this.userInfo.id,
consignee: this.buyUser,
phone: this.buyPhone,
province: this.province,
city: this.city,
area: this.district ? this.district : '',
address: this.address,
}
uni.request({
url:getApp().globalData.baseUrl + '/address/update',
method:"POST",
header:{
url: getApp().globalData.baseUrl + '/address/update',
method: "POST",
header: {
'Blade-Auth': 'bearer ' + uni.getStorageSync('token')
},
data:JSON.stringify(params),
success:res =>{
data: JSON.stringify(params),
success: res => {
console.log(res)
if(res.data.code == 200){
if (res.data.code == 200) {
uni.showToast({
title: '地址修改成功',
icon: 'none'
@ -244,7 +247,7 @@
this.hasMore = true;
this.current = 0;
this.loadMore()
}else{
} else {
uni.showToast({
title: res.data.msg,
icon: 'none'
@ -258,7 +261,7 @@
console.log(this.address)
},
//
handleEdit(item){
handleEdit(item) {
console.log(item)
this.title = '编辑地址'
this.addressId = item.id
@ -273,29 +276,29 @@
this.$refs.popup.open('bottom')
},
//
getCurrentArea(value){
getCurrentArea(value) {
this.locationArr[1] = []
this.locationArr[2] = []
this.allCityData.map((item,index) =>{
if(item.province == this.province){
this.allCityData.map((item, index) => {
if (item.province == this.province) {
this.multiIndex[0] = index;
item.citys.map((item1,index1) =>{
if(item1.city == this.province){
item.citys.map((item1, index1) => {
if (item1.city == this.province) {
console.log(item1)
item1.areas.map((item2,index2) =>{
if(item2.area == this.city){
item1.areas.map((item2, index2) => {
if (item2.area == this.city) {
this.multiIndex[1] = index2;
}
this.locationArr[1].push(item2.area);
})
}else{
if(item1.city == this.city){
} else {
if (item1.city == this.city) {
this.multiIndex[1] = index1;
item1.areas.map((item3,index3) =>{
item1.areas.map((item3, index3) => {
this.locationArr[2].push(item3.area)
if(item3.area == this.district){
console.log('item3 ==>',item3)
console.log('index3 ==>',index3)
if (item3.area == this.district) {
console.log('item3 ==>', item3)
console.log('index3 ==>', index3)
this.multiIndex[2] = index3;
}
})
@ -307,25 +310,26 @@
}
})
console.log('multiIndex',this.multiIndex)
console.log('locationArr',this.locationArr)
console.log('multiIndex', this.multiIndex)
console.log('locationArr', this.locationArr)
},
//
handleDelete(){
handleDelete() {
uni.showModal({
title: '提示',
content: '确认删除该地址?',
success: (res) => {
if (res.confirm) {
uni.request({
url:getApp().globalData.baseUrl + '/address/delete?ids=' + this.addressId,
method:"POST",
header:{
url: getApp().globalData.baseUrl + '/address/delete?ids=' + this
.addressId,
method: "POST",
header: {
'Blade-Auth': 'bearer ' + uni.getStorageSync('token')
},
success:(res) =>{
success: (res) => {
console.log(res)
if(res.data.code == 200){
if (res.data.code == 200) {
uni.showToast({
title: '删除成功',
icon: 'none'
@ -335,7 +339,7 @@
this.hasMore = true;
this.current = 0;
this.loadMore()
}else{
} else {
uni.showToast({
title: res.data.msg,
icon: 'none'
@ -350,27 +354,27 @@
})
},
//
handleDefault(item){
handleDefault(item) {
uni.showModal({
title: '提示',
content: '确认将该地址设置为默认地址?',
success: (res) => {
if (res.confirm) {
let params = {
id:item.id,
userId:this.userInfo.id,
isDefault:1
id: item.id,
userId: this.userInfo.id,
isDefault: 1
}
uni.request({
url:getApp().globalData.baseUrl + '/address/update',
method:"POST",
header:{
url: getApp().globalData.baseUrl + '/address/update',
method: "POST",
header: {
'Blade-Auth': 'bearer ' + uni.getStorageSync('token')
},
data:JSON.stringify(params),
success:res =>{
data: JSON.stringify(params),
success: res => {
console.log(res)
if(res.data.code == 200){
if (res.data.code == 200) {
uni.showToast({
title: '默认地址设置成功',
icon: 'none'
@ -380,7 +384,7 @@
this.hasMore = true;
this.current = 0;
this.loadMore()
}else{
} else {
uni.showToast({
title: res.data.msg,
icon: 'none'
@ -388,33 +392,37 @@
}
}
})
}else if(res.cancel){
} else if (res.cancel) {
}
}
})
},
//
turnToOrder(item){
if(this.pageFrom == 1){
turnToOrder(item) {
if (this.pageFrom == 1) {
var pages = getCurrentPages(); //
var currPage = pages[pages.length - 1]; //
var prevPage = pages[pages.length - 2]; //
console.log(pages)
console.log(prevPage)
if(prevPage.__route__ == 'pages/pages_zhentou/order/confirmOrder'){
prevPage.__data__.changeAddress(item);
uni.navigateBack()
if (prevPage.route == 'pages/pages_zhentou/order/confirmOrder') {
uni.setStorageSync('address', JSON.stringify(item))
uni.navigateBack();
}
}
},
//
closePop(){
closePop() {
this.$refs.popup.close();
},
//
getData() {
this.locationArr = [[],[],[]]
this.locationArr = [
[],
[],
[]
]
this.allCityData.map(item => {
this.locationArr[0].push(item.province);
})
@ -474,7 +482,7 @@
}
},
//
handleAdd(){
handleAdd() {
this.isEdit = false;
this.title = '新增地址'
this.buyUser = '';
@ -484,51 +492,52 @@
this.city = '';
this.district = '';
this.getData();
this.multiIndex = [0,0,0]
this.multiIndex = [0, 0, 0]
this.$refs.popup.open('bottom')
},
//
handlePosition(){
handlePosition() {
uni.getLocation({
type:" wgs84",
isHighAccuracy:true,
type: " wgs84",
isHighAccuracy: true,
success: (res) => {
console.log('当前位置的经度:' + res.longitude);
console.log('当前位置的纬度:' + res.latitude);
uni.request({
url:`https://restapi.amap.com/v3/geocode/regeo?location=${res.longitude},${res.latitude}&key=b8e2796701c731e4a97f4d0bc4e51385&radius=1000&extensions=all`,
method:"get",
url: `https://restapi.amap.com/v3/geocode/regeo?location=${res.longitude},${res.latitude}&key=b8e2796701c731e4a97f4d0bc4e51385&radius=1000&extensions=all`,
method: "get",
success: res => {
console.log(res.data)
this.province = res.data.regeocode.addressComponent.province;
this.city = res.data.regeocode.addressComponent.city;
this.district = res.data.regeocode.addressComponent.district;
console.log(this.province)
this.allCityData.map(item1 =>{
if(item1.province == this.province){
item1.citys.map(item2 =>{
this.allCityData.map(item1 => {
if (item1.province == this.province) {
item1.citys.map(item2 => {
this.locationArr[1].push(item2.city)
if(item2.city == this.city){
item2.areas.map(item3 =>{
this.locationArr[2].push(item3.area)
if (item2.city == this.city) {
item2.areas.map(item3 => {
this.locationArr[2]
.push(item3.area)
})
}
})
}
})
console.log(this.locationArr)
this.locationArr[0].map((item,index) =>{
if(item == this.province){
this.locationArr[0].map((item, index) => {
if (item == this.province) {
this.multiIndex[0] = index
}
});
this.locationArr[1].map((item,index) =>{
if(item == this.city){
this.locationArr[1].map((item, index) => {
if (item == this.city) {
this.multiIndex[1] = index
}
});
this.locationArr[2].map((item,index) =>{
if(item == this.district){
this.locationArr[2].map((item, index) => {
if (item == this.district) {
this.multiIndex[2] = index
}
})
@ -544,10 +553,11 @@
this.current = this.current + 1;
this.staus = 'loading';
uni.request({
url: getApp().globalData.baseUrl + '/address/list?id=' + this.userInfo.id + '&current=' + this
url: getApp().globalData.baseUrl + '/address/list?id=' + this.userInfo.id + '&current=' +
this
.current + '&size=' + this.size,
method: 'GET',
header:{
header: {
'Blade-Auth': 'bearer ' + uni.getStorageSync('token')
},
success: (res) => {
@ -594,15 +604,17 @@
display: flex;
flex-direction: column;
.bottom_item{
.bottom_item {
width: 100%;
height: 25%;
display: flex;
align-items: center;
.no_checked_box{
.no_checked_box {
width: 100%;
display: flex;
.no_checked{
.no_checked {
width: 28rpx;
height: 28rpx;
background: #FFFFFF;
@ -613,10 +625,11 @@
}
.check_box{
.check_box {
width: 100%;
display: flex;
.checked{
.checked {
width: 28rpx;
height: 28rpx;
background: #FFFFFF;
@ -627,7 +640,7 @@
align-items: center;
justify-content: center;
.item{
.item {
width: 16rpx;
height: 16rpx;
background: #D73232;
@ -638,36 +651,39 @@
.default_txt{
.default_txt {
font-size: 22rpx;
color: #D73232;
}
.no_default{
.no_default {
color: #B8B8B8;
font-size: 22rpx;
}
}
.top_box{
.top_box {
width: 100%;
height: 75%;
display: flex;
.top_item{
.top_item {
width: 85%;
margin-left: 30rpx;
.top{
.top {
margin-top: 30rpx;
display: flex;
height: 40rpx;
align-items: flex-end;
.name_txt{
.name_txt {
font-size: 28rpx;
color: #333;
font-weight: bold;
}
.phone_txt{
.phone_txt {
font-size: 22rpx;
color: #999;
margin-left: 20rpx;
@ -684,17 +700,18 @@
}
}
}
.edit_box{
.edit_box {
height: 100%;
display: flex;
align-items: center;
.img_box{
.img_box {
width: 44rpx;
height: 44rpx;
}
.img{
.img {
width: 100%;
height: 100%;
}
@ -702,7 +719,8 @@
}
}
.btn_box{
.btn_box {
width: 100%;
height: 150rpx;
background: #FFFFFF;
@ -711,7 +729,7 @@
display: flex;
justify-content: center;
.btn{
.btn {
width: 690rpx;
height: 78rpx;
background: #D73232;
@ -724,26 +742,29 @@
margin-top: 30rpx;
}
}
.pop_box{
.pop_box {
width: 100%;
/deep/ .uni-popup{
/deep/ .uni-popup {
width: 100%;
}
.popup-content{
.popup-content {
width: 100%;
background: #fff;
padding-top: 40rpx;
border-radius: 30rpx 30rpx 0rpx 0rpx;
.title_box{
width:100%;
.title_box {
width: 100%;
height: 50rpx;
display: flex;
align-items: center;
// justify-content: space-between;
.tit_txt{
.tit_txt {
width: 90%;
text-align: center;
font-weight: bold;
@ -751,29 +772,30 @@
color: #000;
}
.image_box{
.image_box {
width: 44rpx;
height: 44rpx;
.img{
.img {
width: 100%;
height: 100%;
}
}
}
.content_box{
.content_box {
width: 100%;
margin-top: 20rpx;
.content_item{
.content_item {
width: 100%;
padding: 30rpx 0;
display: flex;
align-items: center;
border: 1rpx solid #F2F2F2;
.left_item{
width:140rpx;
.left_item {
width: 140rpx;
height: 100%;
display: flex;
align-items: center;
@ -783,7 +805,7 @@
}
.right_item{
.right_item {
width: 406rpx;
height: 100%;
display: flex;
@ -792,26 +814,26 @@
font-size: 26rpx;
color: #333;
.picker_box{
.picker_box {
padding-left: 20rpx;
}
/deep/.uni-easyinput__content{
/deep/.uni-easyinput__content {
// padding-left: 30rpx;
.uni-easyinput__content-textarea{
.uni-easyinput__content-textarea {
min-height: 40rpx !important;
padding-left: 20rpx;
}
}
}
.right_icon{
.right_icon {
width: 44rpx;
height: 44rpx;
margin-left: 66rpx;
image{
image {
width: 100%;
height: 100%;
}
@ -819,7 +841,7 @@
}
}
.button_box{
.button_box {
width: 100%;
height: 120rpx;
display: flex;
@ -827,7 +849,7 @@
align-items: center;
justify-content: center;
.btn{
.btn {
width: 320rpx;
height: 78rpx;
background: #FFFFFF;
@ -839,7 +861,7 @@
font-size: 26rpx;
color: #D73232;
&:last-child{
&:last-child {
background: #D73232;
margin-left: 50rpx;
color: #FFFFFF;

Loading…
Cancel
Save