593 lines
17 KiB
Vue
593 lines
17 KiB
Vue
<template>
|
||
<view class="page" :style="themeColor">
|
||
<view class="flex benben-position-layout flex flex-wrap align-center addressManagement_flex_0"
|
||
:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
|
||
<view class='flex flex-wrap align-center justify-between flex-sub addressManagement_fd0_0'>
|
||
<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
|
||
<text class='fu-iconfont2 addressManagement_fd0_0_c0_c0'></text>
|
||
</view>
|
||
<view class='flex flex-wrap align-stretch justify-center flex-sub'>
|
||
<text class='addressManagement_fd0_0_c1_c0'>地址管理</text>
|
||
</view>
|
||
<view class='flex flex-wrap align-center addressManagement_fd0_0_c2'>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
|
||
<!---地址管理flex布局开始-->
|
||
<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout addressManagement_flex_1"
|
||
v-for="(item, index) in address_list" :key="index">
|
||
<view class='flex flex-direction flex-wrap align-stretch addressManagement_fd1_0'>
|
||
<view class='flex flex-wrap align-center addressManagement_fd1_0_c0'>
|
||
<text class='addressManagement_fd1_0_c0_c0'>{{item.label_name}}</text>
|
||
<text class='addressManagement_fd1_0_c0_c1'>{{item.real_name}}</text>
|
||
<text class='addressManagement_fd1_0_c0_c2'>(</text>
|
||
<text class='addressManagement_fd1_0_c0_c3'>{{item.sex == 1 ? '先生' : '女士'}}</text>
|
||
<text class='addressManagement_fd1_0_c0_c4'>)</text>
|
||
<text class='addressManagement_fd1_0_c0_c5'>{{item.mobile}}</text>
|
||
</view>
|
||
<view class='addressManagement_fd1_0_c1'>
|
||
<text class='addressManagement_fd1_0_c1_c0'>{{item.province || ''}}</text>
|
||
<text class='addressManagement_fd1_0_c1_c1'>{{item.city || ''}}</text>
|
||
<text class='addressManagement_fd1_0_c1_c2'>{{item.district || ''}}</text>
|
||
<text class='addressManagement_fd1_0_c1_c3'>{{item.detail}}</text>
|
||
</view>
|
||
</view>
|
||
<view class='flex align-center justify-between addressManagement_fd1_1'>
|
||
<view class='flex flex-wrap align-center' @click="changeStatus(item)">
|
||
<benben-flex-switch-new class-name='flex flex addressManagement_fd1_1_c0_c0' v-model="item.is_default" :disabled='true'
|
||
:auto='true'>
|
||
<template v-slot:checked>
|
||
|
||
<view class='flex flex position-relative align-center'>
|
||
<image class='addressManagement_checkfd1_1_c0_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"166.png"'>
|
||
</image>
|
||
</view>
|
||
|
||
</template>
|
||
<template v-slot:unchecked>
|
||
|
||
<view class='flex flex position-relative justify-end align-center'>
|
||
<image class='addressManagement_noCheckfd1_1_c0_c0_c1_c0' mode="aspectFit" :src='STATIC_URL+"123.png"'>
|
||
</image>
|
||
</view>
|
||
|
||
</template>
|
||
</benben-flex-switch-new>
|
||
<text class='addressManagement_fd1_1_c0_c1'>默认地址</text>
|
||
</view>
|
||
<view class='flex flex-wrap align-center'>
|
||
<view class='flex flex-wrap align-center' @tap.stop="delAddr(item)">
|
||
<image class='addressManagement_fd1_1_c1_c0_c0' mode="aspectFit" :src='STATIC_URL+"167.png"'></image>
|
||
<text class='addressManagement_fd1_1_c1_c0_c1'>删除</text>
|
||
</view>
|
||
<view class='flex flex-wrap align-center' @click='edit(item)' data-type="navigateTo"
|
||
:data-url="`/pages/my/editAddress/editAddress`">
|
||
<image class='addressManagement_fd1_1_c1_c1_c0' mode="aspectFit" :src='STATIC_URL+"168.png"'></image>
|
||
<text class='addressManagement_fd1_1_c1_c1_c1'>编辑</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!---地址管理flex布局结束-->
|
||
<!---flex布局flex布局开始-->
|
||
<view class="flex benben-flex-layout flex-wrap align-center" style="margin-top: 280rpx;" v-if="address_list.length == 0 && isInit">
|
||
<benben-empty>
|
||
<view class='flex flex-direction flex-wrap align-center addressManagement_fd2_0'>
|
||
<image class='addressManagement_fd2_0_c0' mode="widthFix" :src='STATIC_URL+"169.png"'></image>
|
||
<text class='addressManagement_fd2_0_c1'>暂无数据</text>
|
||
|
||
</view>
|
||
</benben-empty>
|
||
</view>
|
||
|
||
<!---flex布局flex布局结束-->
|
||
<benben-popup v-model="popupShow" :mask="true" mode='center'>
|
||
<!---删除地址flex布局开始-->
|
||
<view class="flex flex-direction flex-wrap align-center addressManagement_flex_3">
|
||
<text class='addressManagement_fd3_0'>提示</text>
|
||
<text class='addressManagement_fd3_1'>确定删除该地址？</text>
|
||
<view class='flex flex-wrap align-center addressManagement_fd3_2'>
|
||
<button class='addressManagement_fd3_2_c0' @tap.stop="popupShow=false">取消</button>
|
||
<button class='addressManagement_fd3_2_c1'>确定</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!---删除地址flex布局结束-->
|
||
|
||
</benben-popup>
|
||
<view class="flex align-start justify-center benben-position-layout flex addressManagement_flex_4">
|
||
<button class='addressManagement_fd4_0' @tap.stop="handleJumpDiy" data-type="navigateTo"
|
||
:data-url="`/pages/my/addAddress/addAddress`">添加地址</button>
|
||
|
||
</view>
|
||
<view :style="{height: '144rpx'}"></view>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
components: {},
|
||
|
||
|
||
data() {
|
||
return {
|
||
popupShow: false,
|
||
isdata: true,
|
||
check: false,
|
||
isSelect: "",
|
||
checkInx: 0, // 选中地址的下标
|
||
address_list: [], // 地址列表
|
||
is_change: 0, // 是否开启选择地址模式
|
||
choose_id: 0, // 已选择的默认地址
|
||
edit_id: 0, // 要编辑的地址ID
|
||
backData: null, // 选择低脂模式下的返回值
|
||
isInit: false, // 是否是初始加载,控制数据为空时空布局组件展示与否
|
||
};
|
||
},
|
||
computed: {
|
||
themeColor() {
|
||
return this.$store.getters.themeColor
|
||
},
|
||
|
||
},
|
||
watch: {},
|
||
/**
|
||
* @param {object} options 页面入参
|
||
* @param {string} type = 是否需要选择地址 0:不需要 1:需要
|
||
* @param {string} id = 已有默认选中地址 0:没有 id:下单页已选择地址
|
||
*/
|
||
onLoad(options) {
|
||
this.setNavigationBarTitle(this.i18n['地址管理'])
|
||
const { type = 0, id = 0 } = options;
|
||
this.is_change = type;
|
||
this.choose_id = id;
|
||
// 提前开启地址授权提示
|
||
uni.getLocation({
|
||
geocode: true,
|
||
success: (adr) => { },
|
||
});
|
||
},
|
||
/**
|
||
* @description 页面出栈
|
||
*/
|
||
onUnload() {
|
||
// 如果是选择地址模式
|
||
if (this.is_change == 1) {
|
||
// 通知下单页或其他页面当前选择的地址信息
|
||
uni.$emit("select_address", this.backData);
|
||
}
|
||
},
|
||
// 下拉刷新
|
||
onPullDownRefresh() {
|
||
this.getAddressList();
|
||
},
|
||
onReady() {
|
||
|
||
},
|
||
onShow() {
|
||
// 获取地址列表
|
||
this.getAddressList();
|
||
},
|
||
onHide() {
|
||
|
||
},
|
||
onResize() {
|
||
|
||
},
|
||
onReachBottom(e) {
|
||
|
||
},
|
||
onPageScroll(e) {
|
||
|
||
},
|
||
methods: {
|
||
/**
|
||
* @func 获取地址列表
|
||
*/
|
||
getAddressList() {
|
||
this.$api.post(global.apiUrls.post636f7683cf195, {list_rows: 1000})
|
||
.then((res) => {
|
||
console.log("地址列表", res);
|
||
if (res.data.code == 1) {
|
||
this.address_list = res.data.data.data;
|
||
this.isInit = true;
|
||
// 如果是选择地址模式,作如下处理
|
||
// if (this.is_change == 1) {
|
||
// // 如果有默认选择的地址,还返回默认选择的地址
|
||
// let addrObj = this.address_list.find((item) => {
|
||
// return item.address_id == this.choose_id;
|
||
// });
|
||
// // 如果没有默认选择的地址,或者选择的地址被删了,选择地址列表里的默认地址
|
||
// if (!addrObj) {
|
||
// addrObj = this.address_list.find((item) => {
|
||
// this.choose_id = item.is_default == 1 ? item.address_id : "";
|
||
// return item.is_default == 1;
|
||
// });
|
||
// }
|
||
// // 如果没有默认地址,选择地址列表的第一个地址
|
||
// if (!addrObj) {
|
||
// addrObj = this.address_list[0];
|
||
// if (addrObj) {
|
||
// this.choose_id = this.address_list[0].address_id;
|
||
// }
|
||
// }
|
||
// // 如果没有地址,返回 null
|
||
// if (!addrObj) {
|
||
// addrObj = null;
|
||
// }
|
||
// this.backData = addrObj;
|
||
// }
|
||
} else {
|
||
this.$message.info(res.data.msg);
|
||
this.address_list = [];
|
||
this.backData = null;
|
||
}
|
||
this.$nextTick(function () {
|
||
uni.stopPullDownRefresh();
|
||
});
|
||
});
|
||
},
|
||
/**
|
||
* @description 切换默认地址
|
||
* @param {object} item = 地址详细信息
|
||
*/
|
||
changeStatus(item) {
|
||
console.log(item)
|
||
if (item.is_default == 0) {
|
||
this.$api.post(global.apiUrls.post6389ad65f28d9, { address_id: item.aid })
|
||
.then(res => {
|
||
this.getAddressList()
|
||
})
|
||
}
|
||
},
|
||
/**
|
||
* @description 地址点击事件
|
||
* @param {object} item = 地址详细信息
|
||
*/
|
||
handleClick(item) {
|
||
// 如果是地址选择模式,返回地址对象设为当前选中地址信息,否则不做操作
|
||
if (this.is_change == 1) {
|
||
this.backData = item;
|
||
uni.navigateBack();
|
||
}
|
||
},
|
||
/**
|
||
* @description 去编辑地址
|
||
* @param {object} item = 地址对象
|
||
*/
|
||
edit(item) {
|
||
// 记录编辑的地址ID
|
||
this.edit_id = item.address_id;
|
||
this.add_Addr(item);
|
||
},
|
||
/**
|
||
* @description 删除地址
|
||
* @param {object} item = 地址对象
|
||
* */
|
||
delAddr(item) {
|
||
console.log(item)
|
||
this.$util.showModal({
|
||
title: '提示',
|
||
content: '确定删除该地址?',
|
||
confirmColor: this.$store.state.themeColor,
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
this.$api.post(global.apiUrls.post5cadd0d3a0c93, { address_id: item.aid })
|
||
.then(res => {
|
||
console.log(res);
|
||
if (res.data.code == 1) {
|
||
this.getAddressList()
|
||
} else {
|
||
this.$message.info(res.data.msg);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
})
|
||
},
|
||
/**
|
||
* @description 添加地址
|
||
* @param {object} item = 地址对象
|
||
* */
|
||
add_Addr(item) {
|
||
// 有参数是编辑地址,无参数是新增地址
|
||
uni.navigateTo({
|
||
url: "/pages/my/addAddress/addAddress?id=" + ((item && item.aid) || ""),
|
||
});
|
||
},
|
||
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
width: 100vw;
|
||
overflow-x: hidden;
|
||
min-height: calc(100vh - var(--window-bottom));
|
||
background: #F8F8F8;
|
||
background-size: 100% auto !important;
|
||
}
|
||
|
||
.addressManagement_flex_0 {
|
||
background: #fff;
|
||
width: 750rpx;
|
||
height: 88rpx;
|
||
overflow: hidden;
|
||
z-index: 10;
|
||
top: 0rpx;
|
||
background-size: 100% auto !important;
|
||
}
|
||
|
||
.addressManagement_fd0_0_c2 {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.addressManagement_fd0_0_c1_c0 {
|
||
font-size: 36rpx;
|
||
font-weight: 500;
|
||
color: #333;
|
||
line-height: 88rpx;
|
||
}
|
||
|
||
.addressManagement_fd0_0_c0_c0 {
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #333;
|
||
line-height: 88rpx;
|
||
}
|
||
|
||
.addressManagement_fd0_0 {
|
||
margin: 0rpx 32rpx 0rpx 32rpx;
|
||
}
|
||
|
||
.addressManagement_flex_1 {
|
||
border-top: 1px solid #F6F7F9;
|
||
background: #fff;
|
||
background-size: 100% auto !important;
|
||
padding: 30rpx 32rpx 26rpx 32rpx;
|
||
margin: 0rpx 0rpx 20rpx 0rpx;
|
||
}
|
||
|
||
.addressManagement_fd1_1_c1_c1_c1 {
|
||
line-height: 28rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
|
||
.addressManagement_fd1_1_c1_c1_c0 {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
margin: 0rpx 12rpx 0rpx 67rpx;
|
||
}
|
||
|
||
.addressManagement_fd1_1_c1_c0_c1 {
|
||
line-height: 28rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
|
||
.addressManagement_fd1_1_c1_c0_c0 {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
margin: 0rpx 12rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.addressManagement_fd1_1_c0_c1 {
|
||
line-height: 32rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
|
||
.addressManagement_noCheckfd1_1_c0_c0_c1_c0 {
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
|
||
.addressManagement_checkfd1_1_c0_c0_c0_c0 {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
}
|
||
|
||
::v-deep .addressManagement_fd1_1_c0_c0 {
|
||
margin: 0rpx 14rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.addressManagement_fd1_1 {
|
||
padding: 26rpx 0rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.addressManagement_fd1_0_c1_c3 {
|
||
line-height: 32rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
|
||
.addressManagement_fd1_0_c1_c2 {
|
||
line-height: 32rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
|
||
.addressManagement_fd1_0_c1_c1 {
|
||
line-height: 32rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
|
||
.addressManagement_fd1_0_c1_c0 {
|
||
line-height: 32rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
|
||
.addressManagement_fd1_0_c1 {
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.addressManagement_fd1_0_c0_c5 {
|
||
line-height: 32rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #1A1A1A;
|
||
margin: 0rpx 0rpx 0rpx 24rpx;
|
||
}
|
||
|
||
.addressManagement_fd1_0_c0_c4 {
|
||
line-height: 32rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #1A1A1A;
|
||
}
|
||
|
||
.addressManagement_fd1_0_c0_c3 {
|
||
line-height: 32rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #1A1A1A;
|
||
}
|
||
|
||
.addressManagement_fd1_0_c0_c2 {
|
||
line-height: 32rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #1A1A1A;
|
||
}
|
||
|
||
.addressManagement_fd1_0_c0_c1 {
|
||
line-height: 32rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #1A1A1A;
|
||
max-width: 290rpx;
|
||
-webkit-line-clamp: 1;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.addressManagement_fd1_0_c0_c0 {
|
||
background: rgba(89, 166, 244, 1);
|
||
line-height: 36rpx;
|
||
font-size: 22rpx;
|
||
font-weight: 400;
|
||
color: #fff;
|
||
padding: 0rpx 10rpx 0rpx 10rpx;
|
||
background-size: 100% auto !important;
|
||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||
margin: 0rpx 14rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.addressManagement_fd1_0_c0 {
|
||
padding: 0rpx 0rpx 20rpx 0rpx;
|
||
}
|
||
|
||
.addressManagement_fd1_0 {
|
||
border-bottom: 1px solid #eee;
|
||
padding: 0rpx 0rpx 28rpx 0rpx;
|
||
}
|
||
|
||
.addressManagement_fd2_0_c1 {
|
||
padding: 30rpx 0rpx 0rpx 0rpx;
|
||
color: #929292;
|
||
}
|
||
|
||
.addressManagement_fd2_0_c0 {
|
||
width: 400rpx;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.addressManagement_fd2_0 {
|
||
width: 100%;
|
||
padding: 50rpx 0rpx 50rpx 0rpx;
|
||
}
|
||
|
||
.addressManagement_flex_3 {
|
||
background: #fff;
|
||
width: 540rpx;
|
||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||
}
|
||
|
||
.addressManagement_fd3_2_c1 {
|
||
border-top: 1px solid #eee;
|
||
border-left: 1px solid #eee;
|
||
background: #fff;
|
||
line-height: 110rpx;
|
||
border-radius: 0rpx 0rpx 16rpx 0rpx;
|
||
font-size: 32rpx;
|
||
color: rgba(255, 147, 0, 1);
|
||
width: 270rpx;
|
||
}
|
||
|
||
.addressManagement_fd3_2_c0 {
|
||
border-top: 1px solid #eee;
|
||
background: #fff;
|
||
line-height: 110rpx;
|
||
border-radius: 0rpx 0rpx 0rpx 16rpx;
|
||
font-size: 32rpx;
|
||
color: rgba(153, 153, 153, 1);
|
||
padding: 0rpx 103rpx 0rpx 103rpx;
|
||
}
|
||
|
||
.addressManagement_fd3_2 {
|
||
margin: 37rpx 0rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.addressManagement_fd3_1 {
|
||
line-height: 44rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
|
||
.addressManagement_fd3_0 {
|
||
font-size: 36rpx;
|
||
font-weight: 800;
|
||
line-height: 44rpx;
|
||
color: #333333;
|
||
margin: 40rpx 0rpx 40rpx 0rpx;
|
||
}
|
||
|
||
.addressManagement_flex_4 {
|
||
background: #fff;
|
||
width: 750rpx;
|
||
height: 144rpx;
|
||
overflow: hidden;
|
||
z-index: 10;
|
||
bottom: calc(0rpx + var(--window-bottom));
|
||
background-size: 100% auto !important;
|
||
}
|
||
|
||
.addressManagement_fd4_0 {
|
||
background: var(--benbenbgColor3);
|
||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||
font-size: 32rpx;
|
||
color: #fff;
|
||
width: 686rpx;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
font-weight: 700;
|
||
}
|
||
</style>
|