<template>
<div class="address_box">
<scroller lock-x height="-44px">
<div>
<swipeout class="address_list">
<swipeout-item transition-mode="follow" v-for="(item,index) in addressList" @click.native="selectAddress(index,item)">
<div slot="right-menu">
<swipeout-button @click.stop.native="onChangeClick(item)" type="primary">修改</swipeout-button>
<swipeout-button @click.stop.native="onDeleteClick(item)" type="warn">删除</swipeout-button>
</div>
<div slot="content" class="demo-content vux-1px-t">
<flexbox :gutter="0">
<flexbox-item :span="2">
<p class="selected" v-if="showIcon(index)"><icon type="success-no-circle"></icon></p>
</flexbox-item>
<flexbox-item :span="9">
<p class="mobile_phone"><span class="name">{{item.name}}</span><span>{{item.phone}}</span></p>
<p class="address">地址：{{item.address}}<span>{{item.address_detail}}</span></p>
</flexbox-item>
<flexbox-item :span="1">
</flexbox-item>
</flexbox>
</div>
</swipeout-item>
</swipeout>
</div>
</scroller>
<group class="newAddress" @click.native="addNewAddress">
<cell title="添加收货地址" is-link></cell>
</group>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { Flexbox, FlexboxItem, Icon,Group, Cell,Scroller,Swipeout, SwipeoutItem, SwipeoutButton, } from 'vux'
export default {
data() {
return {
addressIndex:'',
addressList:'',
}
},
computed: {
...mapGetters([
'allAddressList',
"ifAddNewAddress",
]),
},
//this.ifAddNewAddress 来判断是否新增地址了，新增了地址就重新发Ajax请求，vuex存的默认是false,新增成功后把vuex的ifAddNewAddress变为true,重新请求完后再把ifAddNewAddress 改为false
created(){
if(!this.allAddressList||this.ifAddNewAddress){
this.getAllAddress()
}else{
console.log(2)
this.addressList=this.allAddressList
}
},
methods: {
getAllAddress(){
this.$http.get('/shop/api/get-user-all-address',{
params:{
customerId:_global.customerId,
}
}).then((response) => {
if(response.data.status){
this.addressList=response.data.data
this.$store.commit("saveAddressList",this.addressList)
}
}).catch((error)=>{
console.log(error)
})
},
onChangeClick(item){
console.log(item)
this.$router.push({ name: 'changeAddress', params: item})
},
onDeleteClick(item){
console.log(item)
this.$http.get('/shop/api/delete-user-address',{
params:{
id:item.id
}
}).then((response) => {
console.log(response)
if(response.data.status){
console.log(response)
for(var i=0;i<this.addressList.length;i++){
if(this.addressList[i].id==item.id){
this.addressList.splice(i,1)
this.$store.commit("saveAddressList",this.addressList)
return
}
}
}else {
this.$vux.toast.show({
text: response.data.message,
type:'cancel'
})
}
}).catch((error)=>{
console.log(error)
})
},
selectAddress(index,item){
this.addressIndex=index;
this.$http.get('/shop/api/set-default-address',{
params:{
customerId:_global.customerId,
id:item.id,
}
}).then((response) => {
if(response.data.status){
this.$router.push({path:'/account'});
}else{
this.$vux.toast.show({
text: response.data.message,
type:'cancel'
})
}
}).catch((error)=>{
console.log(error)
})
},
showIcon(index){
if(index === this.addressIndex){
return true
}else {
return false;
}
},
addNewAddress(){
this.$router.push({ path: '/newAddress' });
},
},
components: {
Icon,
Group,
Cell,
Flexbox,
FlexboxItem,
Scroller,
Swipeout,
SwipeoutItem,
SwipeoutButton,
},
}
</script>
<style lang="less" scoped>
.address_box{
background: #eeeeee;
}
.address_list{
border-bottom:1px solid #efefef;
color: #C0C0C0;
background: #fff;
margin:5px 0;
.selected{
margin-left: 12px;
}
.mobile_phone{
margin: 10px 0 5px 0;
.name{
display: inline-block;
min-width: 20px;
margin-right: 10px;
}
}
.address{
margin-bottom: 10px;
font-size: 12px;
span{
display: inline-block;
margin-left: 10px;
}
}
}
.vux-x-icon {
fill: #C0C0C0;
}
.newAddress{
position: fixed;
bottom: 0;
left:0;
width:100%;
.weui-cell{
background:#0c6;
color:#fff;
}
}
</style>
