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.
280 lines
5.9 KiB
280 lines
5.9 KiB
<template>
|
|
<view class="address h-100">
|
|
<view class="address-container" v-if="addressData.length">
|
|
<view
|
|
class="address-container-item flex align-center justify-between m-b-20"
|
|
v-for="(item,index) in addressData"
|
|
:key="index"
|
|
@click="selectAddress(item)"
|
|
>
|
|
<view class="nameOne_box">
|
|
<text class="nameOne">{{item.name.substr(0,1)}}</text>
|
|
</view>
|
|
<view class="flex-1 m-r-30">
|
|
<view class="flex align-center">
|
|
<text class="font-36 m-r-60" style="font-weight: bold;">{{item.name}}</text>
|
|
<text class="text-grey font-32">{{item.phone}}</text>
|
|
</view>
|
|
<view class="m-b-4 address_box">
|
|
<view class="icon_box m-r-20" v-if="item.defaultFlag">
|
|
<u-tag text="默认" mode="dark" size="mini" v-if="item.defaultFlag"/>
|
|
</view>
|
|
<text class="font-30 m-r-20">{{item.shippingAddress}}</text>
|
|
<text class="text-black font-30">{{item.addressDetail}}</text>
|
|
</view>
|
|
</view>
|
|
<com-view @click="toEdit(item)" v-if="type !== 'select'">
|
|
<view class="address-container-item-edit flex align-center justify-end">
|
|
<u-icon name="edit-pen" color="#000" size="50"></u-icon>
|
|
</view>
|
|
</com-view>
|
|
</view>
|
|
</view>
|
|
<view class="vw-100 h-100" v-if="!addressData.length">
|
|
<u-empty icon-size="430" text="没有收货地址" :src="IMG_URL + 'address-empty.png'"></u-empty>
|
|
</view>
|
|
<view class="address-footer position-fixed flex align-center justify-center">
|
|
<u-button type="primary" shape="circle" @click="toAdd" class="font-size-34">新增收货地址</u-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { IMG_URL } from '@/env.js'
|
|
export default{
|
|
data(){
|
|
return{
|
|
IMG_URL,
|
|
value:'',
|
|
params:{
|
|
pageNo:1,
|
|
pageSize:10
|
|
},
|
|
addressData:[],
|
|
type: '',
|
|
url: '' //从哪里来
|
|
}
|
|
},
|
|
|
|
onLoad(options) {
|
|
let pages_url = getCurrentPages();
|
|
this.url = pages_url[0].route;
|
|
if (options.type) this.type = options.type
|
|
|
|
// 删除地址
|
|
uni.$on('delAddress', params => {
|
|
let idx = this.addressData.find(item => params.id === item.id)
|
|
this.addressData.splice(idx, 1)
|
|
})
|
|
// 新增地址
|
|
uni.$on('addAddress', () => {
|
|
this.getAddressList()
|
|
})
|
|
// 编辑地址
|
|
uni.$on('editAddress', params => {
|
|
let idx = this.addressData.find(item => params.id === item.id)
|
|
this.addressData.splice(idx, 1, {...this.addressData[idx], ...params})
|
|
})
|
|
|
|
},
|
|
onShow() {
|
|
this.getAddressList()
|
|
},
|
|
onUnload() {
|
|
uni.$off('delAddress')
|
|
uni.$off('addAddress')
|
|
uni.$off('editAddress')
|
|
// 获取倒退的页面
|
|
uni.switchTab({
|
|
url: this.url
|
|
})
|
|
},
|
|
|
|
methods: {
|
|
selectAddress (item) {
|
|
if (this.type === 'select') {
|
|
console.log(item)
|
|
// uni.$emit('SELECT_ADDRESS', item)
|
|
let params = {
|
|
...item,
|
|
type: 'user'
|
|
}
|
|
this.$store.commit('set_location', params)
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
}else {
|
|
// 从首页进入 选择地址
|
|
this.type === 'select_home'
|
|
let params = {
|
|
...item,
|
|
}
|
|
this.$store.commit('set_location', params)
|
|
uni.navigateBack({
|
|
delta: 3
|
|
})
|
|
}
|
|
},
|
|
toEdit(item) {
|
|
// 编辑地址
|
|
const info = JSON.stringify(item)
|
|
console.log(encodeURIComponent(info))
|
|
uni.navigateTo({
|
|
url: `/pages/my/address/addressEdit?type=edit&title=编辑地址&info=${encodeURIComponent(info)}`
|
|
})
|
|
},
|
|
getAddressList() {
|
|
const params = this.params
|
|
uni.showLoading();
|
|
this.$api('getAddressList', params).then(res => {
|
|
let { code, result, message } = res
|
|
uni.hideLoading();
|
|
if(code == 200) {
|
|
this.addressData = result.records;
|
|
console.log( code, result, message)
|
|
}else{
|
|
this.$Toast(message)
|
|
}
|
|
}).catch(err => {
|
|
this.$Toast(err.message)
|
|
})
|
|
},
|
|
toAdd () {
|
|
// &info={}
|
|
this.$tools.navigateTo({
|
|
url: '/pages/my/address/addressEdit?type=add&title=新增地址'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.nameOne_box{
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
line-height: 100rpx;
|
|
font-size: 43rpx;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
margin-right: 20rpx;
|
|
background-color: rgba(12,133,255,.6);
|
|
|
|
}
|
|
.address_box{
|
|
float: left;
|
|
.icon_box{
|
|
display: inline-block;
|
|
}
|
|
}
|
|
.list-box{
|
|
width: 750upx;
|
|
}
|
|
.u-radio-group{
|
|
width: 100%;
|
|
}
|
|
.item{
|
|
margin: 32upx;
|
|
border: 1upx solid #707070;
|
|
padding: 20upx;
|
|
border-radius: 10upx;
|
|
position: relative;
|
|
width: 100%;
|
|
.delete{
|
|
position: absolute;
|
|
right: 20upx;
|
|
top: 20upx;
|
|
}
|
|
.header-box{
|
|
display: flex;
|
|
align-items: center;
|
|
text{
|
|
margin-left: 12upx;
|
|
font-size: 26upx;
|
|
}
|
|
.phone-box{
|
|
margin-left: 20upx;
|
|
}
|
|
.nickname{
|
|
font-size: 28upx;
|
|
font-weight: bold;
|
|
color: #000000;
|
|
}
|
|
.tel{
|
|
color: #707070;
|
|
margin-left: 4upx;
|
|
}
|
|
}
|
|
.content-box{
|
|
padding: 20upx 10upx;
|
|
display: flex;
|
|
font-size: 28upx;
|
|
color: #707070;
|
|
text{
|
|
margin-left: 8upx;
|
|
}
|
|
}
|
|
.bottom-box{
|
|
padding:10upx 10upx 10upx 10upx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 26upx;
|
|
.text-orange-dark{
|
|
color: #FFA206;
|
|
font-size: 26upx;
|
|
}
|
|
}
|
|
}
|
|
.function-box{
|
|
position: fixed;
|
|
bottom: 0upx;
|
|
left: 0upx;
|
|
height: 150upx;
|
|
width: 750upx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.create{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 670upx;
|
|
height: 95upx;
|
|
background-color: #000000;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.address {
|
|
padding-bottom: 120rpx;
|
|
&-container {
|
|
height: 100%;
|
|
background: #fff;
|
|
padding: 30rpx;
|
|
|
|
&-item {
|
|
border-bottom: 2rpx solid #f1f1f1;
|
|
padding-bottom: 20rpx;
|
|
&-edit {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
&-footer {
|
|
height: 120rpx;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background: #fff;
|
|
/deep/.u-btn {
|
|
width: 600rpx;
|
|
height: 80rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|