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.
307 lines
7.1 KiB
307 lines
7.1 KiB
<template>
|
|
<view class="user-address-list">
|
|
<view @tap.stop="toUpdateItem(index)" class="item-child fill-base"
|
|
v-for="(item,index) in list.data" :key="index">
|
|
<view class="peopleInfo">
|
|
<view class="address-icon">
|
|
<!-- <i class="iconfont iconjuli"></i> -->
|
|
<image src="../../../static/dizhi2.png" mode=""></image>
|
|
</view>
|
|
<view class="flex-1">
|
|
<view class="address-info">
|
|
<view class="flex-y-baseline username c-title text-bold">{{item.user_name}}</view>
|
|
<view class="phoneText">
|
|
<view class="ml-md f-desc c-caption">{{item.mobile}}</view>
|
|
<view class="moren" v-if="item.status ==1">默认</view>
|
|
</view>
|
|
<view class="tooltip">
|
|
<image src="../../../static/edit.png" mode="" @tap.stop="goDetail(index)" ></image>
|
|
<image src="../../../static/del.png" mode=""
|
|
style="margin-left:36rpx;" @tap.stop="toDel(index)"></image>
|
|
</view>
|
|
</view>
|
|
<view class="f-desc" style="margin-left: 10px;margin-top:30rpx;color: #999999;font-size:28rpx;">{{`${item.address} ${item.address_info}`}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="oper-info f-paragraph c-caption flex-between">
|
|
<view class="flex-y-center"
|
|
:style="{color:options.check && item.id == check_id || !options.check && item.status==1?primaryColor:''}">
|
|
<i class="iconfont icon-xuanze mr-sm"
|
|
:class="[{'icon-xuanze-fill':options.check && item.id == check_id || !options.check && item.status==1}]"
|
|
:style="{color:options.check && item.id == check_id || !options.check && item.status==1?primaryColor:''}"></i>
|
|
<block v-if="options.check">{{item.id ==check_id?'当前选择地址':'点击选择'}}</block>
|
|
<block v-else>{{item.status ==1?'默认地址':'设为默认'}}</block>
|
|
</view>
|
|
<!-- <view class="flex-center">
|
|
<view @tap.stop="toDel(index)" class="pl-lg pr-lg">删除</view>
|
|
<view @tap.stop="goDetail(index)" class="pl-lg">编辑</view>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
|
|
</load-more>
|
|
<abnor :tip="[{ text: '你还没有添加地址哦~', color: 0 }]" v-if="!loading&&list.data.length<=0&&list.current_page==1">
|
|
</abnor>
|
|
|
|
<!-- <view class="space-max-footer"></view> -->
|
|
|
|
<fix-bottom-button @confirm="$util.goUrl({url:`/user/pages/address/edit`})"
|
|
:text="[{text:'添加地址+',type:'confirm'}]" bgColor="#fff"></fix-bottom-button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState,
|
|
mapMutations
|
|
} from "vuex"
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
options: {},
|
|
check_id: 0,
|
|
param: {
|
|
page: 1,
|
|
},
|
|
list: {
|
|
data: []
|
|
},
|
|
loading: true,
|
|
lockTap: false,
|
|
}
|
|
},
|
|
computed: mapState({
|
|
primaryColor: state => state.config.configInfo.primaryColor,
|
|
subColor: state => state.config.configInfo.subColor,
|
|
userInfo: state => state.user.userInfo,
|
|
haveOperItem: state => state.order.haveOperItem,
|
|
}),
|
|
onLoad(options) {
|
|
let {
|
|
check = 0
|
|
} = options
|
|
this.options = options
|
|
if (check) {
|
|
let {
|
|
address_info = {
|
|
id: 0
|
|
}
|
|
} = this.$util.getPage(-1).orderInfo
|
|
let {
|
|
id
|
|
} = address_info
|
|
this.check_id = id
|
|
}
|
|
this.updateOrderItem({
|
|
key: 'haveOperItem',
|
|
val: false
|
|
})
|
|
this.initIndex()
|
|
},
|
|
onUnload() {
|
|
let {
|
|
check = 0
|
|
} = this.options
|
|
let {
|
|
data = []
|
|
} = this.list
|
|
if (check && this.haveOperItem) {
|
|
this.$util.getPage(-1).orderInfo.address_info = {}
|
|
this.$util.back()
|
|
}
|
|
},
|
|
onPullDownRefresh() {
|
|
// #ifndef APP-PLUS
|
|
uni.showNavigationBarLoading()
|
|
// #endif
|
|
this.initRefresh();
|
|
uni.stopPullDownRefresh()
|
|
},
|
|
onReachBottom() {
|
|
if (this.list.current_page >= this.list.last_page || this.loading) return;
|
|
this.param.page = this.param.page + 1;
|
|
this.loading = true;
|
|
this.getList();
|
|
},
|
|
methods: {
|
|
...mapMutations(['updateUserItem', 'updateOrderItem']),
|
|
async initIndex(refresh = false) {
|
|
// #ifdef H5
|
|
if (!refresh && this.$jweixin.isWechat()) {
|
|
await this.$jweixin.initJssdk();
|
|
this.$jweixin.wxReady(() => {
|
|
this.$jweixin.hideOptionMenu()
|
|
})
|
|
}
|
|
// #endif
|
|
await this.getList()
|
|
this.$util.setNavigationBarColor({
|
|
bg: this.primaryColor
|
|
})
|
|
},
|
|
initRefresh() {
|
|
this.param.page = 1
|
|
this.initIndex(true)
|
|
},
|
|
async getList() {
|
|
let {
|
|
list: oldList,
|
|
param
|
|
} = this
|
|
let newList = await this.$api.mine.addressList(param);
|
|
|
|
if (this.param.page == 1) {
|
|
this.list = newList
|
|
} else {
|
|
newList.data = oldList.data.concat(newList.data)
|
|
this.list = newList
|
|
}
|
|
this.loading = false
|
|
this.$util.hideAll()
|
|
},
|
|
async toUpdateItem(index) {
|
|
let item = this.list.data[index]
|
|
if (this.options.check) {
|
|
this.$util.getPage(-1).orderInfo.address_info = item
|
|
this.$util.back()
|
|
this.$util.goUrl({
|
|
url: 1,
|
|
openType: `navigateBack`
|
|
})
|
|
} else {
|
|
let {
|
|
id,
|
|
status
|
|
} = item
|
|
await this.$api.mine.addressUpdate({
|
|
id,
|
|
status: status == 0 ? 1 : 0
|
|
})
|
|
this.initRefresh()
|
|
}
|
|
},
|
|
async toDel(index) {
|
|
let [res_del, {
|
|
confirm
|
|
}] = await uni.showModal({
|
|
title: '提示',
|
|
content: "请确认是否要删除此数据?"
|
|
})
|
|
if (!confirm) return;
|
|
let {
|
|
id
|
|
} = this.list.data[index]
|
|
let {
|
|
check_id
|
|
} = this
|
|
if (this.lockTap) return
|
|
this.lockTap = true
|
|
this.$util.showLoading()
|
|
try {
|
|
await this.$api.mine.addressDel({
|
|
id
|
|
})
|
|
this.$util.hideAll()
|
|
this.$util.showToast({
|
|
title: `删除成功`,
|
|
});
|
|
this.list.data.splice(index, 1)
|
|
this.lockTap = false
|
|
if (id == check_id) {
|
|
this.updateOrderItem({
|
|
key: 'haveOperItem',
|
|
val: true
|
|
})
|
|
}
|
|
} catch (e) {
|
|
setTimeout(() => {
|
|
this.lockTap = false
|
|
this.$util.hideAll()
|
|
}, 2000)
|
|
}
|
|
},
|
|
goDetail(index) {
|
|
let {
|
|
id
|
|
} = this.list.data[index]
|
|
let url = `/user/pages/address/edit?id=${id}`
|
|
this.$util.goUrl({
|
|
url
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
.user-address-list {
|
|
// padding:0 24rpx;
|
|
.item-child{
|
|
background: #FFFFFF;
|
|
|
|
border-radius: 30rpx;
|
|
padding:20rpx 30rpx;
|
|
margin:0 24rpx;
|
|
margin-top:20rpx;
|
|
.peopleInfo{
|
|
display:flex;
|
|
align-items: center;
|
|
image{
|
|
width:60rpx;
|
|
height:60rpx;
|
|
}
|
|
.address-info {
|
|
// max-width: 600rpx;
|
|
margin-left:20rpx;
|
|
flex:1;
|
|
display:flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.phoneText{
|
|
display:flex;
|
|
align-items: center;
|
|
.moren{
|
|
margin-left:22rpx;
|
|
background: #FFFFFF;
|
|
border: 1px solid #08BF77;
|
|
border-radius: 18rpx;
|
|
color: #08BF77;
|
|
font-size:22rpx;
|
|
padding:5rpx 10rpx;
|
|
}
|
|
}
|
|
.tooltip{
|
|
display:flex;
|
|
align-items: center;
|
|
image{
|
|
width:40rpx;
|
|
height:40rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.address-icon {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
|
|
.iconfont {
|
|
font-size: 38rpx;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.username {
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.oper-info {
|
|
height: 80rpx;
|
|
}
|
|
}
|
|
</style>
|
|
|