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.
285 lines
8.8 KiB
285 lines
8.8 KiB
<template>
|
|
|
|
<BaseContainer class="address-list">
|
|
<NavBar title="地址列表" />
|
|
<view class="list" v-if="address && address.length">
|
|
<view class="list-item" v-for="(item, index) in address" :key="index">
|
|
<view class="head">
|
|
<view>联系人：{{ item.real_name }} {{ item.phone }}</view>
|
|
<view>
|
|
收货地址：{{ item.province }}{{ item.city }}{{ item.district
|
|
}}{{ item.detail }}
|
|
</view>
|
|
</view>
|
|
<view class="foot flex flex-center-x">
|
|
<view class="label">
|
|
<view
|
|
class="checked-icon"
|
|
@click="setDefault(item.id)"
|
|
:class="{ active: item.is_default }"
|
|
>设为默认</view
|
|
>
|
|
</view>
|
|
<view class="flex-auto flex flex-right">
|
|
<navigator :url="`/pages/my/edit_address?id=${item.id}`" class="edit-btn">
|
|
<image
|
|
:src="getImgPath('/wap/first/zsff/images/editor.png')"
|
|
mode="aspectFit"
|
|
/>编辑
|
|
</navigator>
|
|
<view @click="remove(item.id)" class="del-btn">
|
|
<image :src="getImgPath('/wap/first/zsff/images/trash.png')" />删除
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<image
|
|
v-else
|
|
class="nothing"
|
|
:src="getImgPath('/wap/first/zsff/images/no_address.png')"
|
|
/>
|
|
<view class="footer">
|
|
<navigator url="/pages/my/edit_address">
|
|
<image :src="getImgPath('/wap/first/zsff/images/add-address.png')" />
|
|
<text>添加新地址</text>
|
|
</navigator>
|
|
<!-- #ifdef MP -->
|
|
<view v-if="isWechat" @click="getWxAddress">
|
|
<image :src="getImgPath('/wap/first/zsff/images/weixin.png')" />
|
|
<text>导入微信地址</text>
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
</BaseContainer>
|
|
</template>
|
|
|
|
<script>
|
|
import { getAddress, removeUserAddress, setDefaultAddress } from "@/api/user";
|
|
export default {
|
|
data() {
|
|
return {
|
|
address: [],
|
|
isWechat: false,
|
|
};
|
|
},
|
|
onShow() {
|
|
this.getAddress();
|
|
},
|
|
methods: {
|
|
getAddress() {
|
|
getAddress().then(({ data }) => {
|
|
this.address = data.address;
|
|
});
|
|
},
|
|
setDefault(id) {
|
|
setDefaultAddress(id).then((res) => {
|
|
this.$util.showMsg("设为默认成功");
|
|
for (let item of this.address) {
|
|
item.is_default = item.id === id;
|
|
}
|
|
});
|
|
},
|
|
remove(id) {
|
|
uni.showModal({
|
|
title: "提示",
|
|
content: "是否删除该地址?",
|
|
success: async ({ confirm }) => {
|
|
if (!confirm) return;
|
|
uni.showModal({ mask: true });
|
|
try {
|
|
await removeUserAddress(id);
|
|
uni.hideLoading();
|
|
this.$util.showMsg("删除成功!");
|
|
this.address = this.address.filter((value) => value.id !== id);
|
|
} catch (err) {
|
|
uni.hideLoading();
|
|
this.$util.showMsg(err.msg);
|
|
}
|
|
},
|
|
});
|
|
},
|
|
// #ifdef MP
|
|
getWxAddress: function () {
|
|
mapleWx($jssdk(), function () {
|
|
this.openAddress(
|
|
function (res) {
|
|
$h.loadFFF();
|
|
api.basePost(
|
|
$h.U({ c: "auth_api", a: "edit_user_address" }),
|
|
{
|
|
id: "",
|
|
real_name: res.userName,
|
|
phone: res.telNumber,
|
|
address: {
|
|
province: res.provinceName,
|
|
city: res.cityName,
|
|
district: res.countryName,
|
|
},
|
|
detail: res.detailInfo,
|
|
is_default: false,
|
|
},
|
|
function () {
|
|
location.reload();
|
|
}.bind(this),
|
|
function (err) {
|
|
$h.loadClear();
|
|
}
|
|
);
|
|
},
|
|
function (err) {
|
|
$h.pushMsg("导入微信地址失败");
|
|
}
|
|
);
|
|
});
|
|
},
|
|
// #endif
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
padding-bottom: 118rpx;
|
|
background-color: #f5f5f5;
|
|
}
|
|
</style>
|
|
|
|
<style scoped lang="scss">
|
|
.nothing {
|
|
position: absolute;
|
|
top: 30%;
|
|
left: 50%;
|
|
width: 414rpx;
|
|
height: 336rpx;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
/* 地址列表 */
|
|
.address-list .list {
|
|
padding-top: 3rpx;
|
|
background: url(@/static/images/address-line.jpg) left top/749rpx 3rpx repeat-x;
|
|
}
|
|
|
|
.address-list .list-item {
|
|
padding-right: 30rpx;
|
|
padding-left: 30rpx;
|
|
background-color: #ffffff;
|
|
margin-top: 12rpx;
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.address-list .head {
|
|
padding-top: 32rpx;
|
|
padding-bottom: 32rpx;
|
|
font-size: 28rpx;
|
|
color: #282828;
|
|
}
|
|
|
|
.address-list .head view:first-child {
|
|
margin-bottom: 8rpx;
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
color: #282828;
|
|
}
|
|
|
|
.address-list .foot {
|
|
height: 82rpx;
|
|
border-top: 1px solid #eee;
|
|
font-size: 28rpx;
|
|
color: #282828;
|
|
}
|
|
|
|
.address-list .foot navigator {
|
|
color: #282828;
|
|
}
|
|
|
|
.address-list .foot .label view {
|
|
padding-left: 48rpx;
|
|
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAADLUlEQVRYR92ZPWhUQRDHd/ZI8MrED/BC4LKz72oRQRCt/CApNIVoY2GjsbBQiUVEkCCIKQxqYWG0sUijWCQWCZpUiiAEsb7b3RwcOcGPpLyQcDuycO+4fN3He694zwdX3cz8fzdvZ3d2DlhCHkgIJwsFury8vM9ae4YxdpKIBAAIxpj7uMcQkQEAwxj7wjlfGBgYWA+amECgWuvbjLHTjDEHuWStXeScF6rVqkqn0wUHU6lUvFQqJa21Hufc2R5jjC0Q0ayU8lWnwB2BKqWuAsAoAJQZY9MuS9ls9mc7osVi8XAt+1eIKENEk1LKN+34Opu2QZVSbwHgSE3gZbsCu9kppW64H0xEP6SUl9uJ1RaoMWaWiH5Za+95nve7ncCtbAqFwkHO+WMAOCSEuNDKviWoMWaFiJ4g4tNWwYJ8r7W+AwB3hRB9zfybgmqt1xCxJwhApz6ttPYEVUp955yPCSE+dioaxN4Yc85aOyGlPLqb/66gWuv3jLEiIo4GEQ3qo7WeZIxlEfHi9hg7QI0xl4joUTqdPpHJZP4EFQ3iVy6XD1Qqla8AcF8I8a4xxg5QrfUSAEwJIaaCiIX1McaMENEIIroDov5sAdVa3wKAISHEYFjBMP7GmHkimkPE536c7aAfAGBGCPE6jFBYX2PMNSIaalyrddBag7HW3d0t+/v7V8KKhfEvlUp9m5ubeQDY7zcydVCl1KBbxIh4KoxIVL5a688A8FAI8cnFrINqrSesteue541HJRYmTqFQGOec70PEsS2gtaZjBhGnwwhE5au1dl3WsN+0NGZ0qVqt3szlct+iEgsTJ5/PH0+lUi/8baoRdLVWSKthBKLyLZVKvRsbGwoRe7ev0cSAJuPVJ6mYkrE9GWPOEtGDOG34rouTUs5vKSZ3hBLR366urlwcjlBX8Zzznh1HqKN2DTMAzMWkKRlGxPN7dU/JaPNqWY1/4+xAE3MV8ddq7C93/uJNxHXZh201FIiqAam9xabDjv9jpONnLBFDsoY1G/+xYwNs/Ae5jYWjlLoOAG6m2fFonDG2iIjPOi3ElsXULGDs/2zoNBtR2IfKaBQA7cb4B6fgEUkgxdzKAAAAAElFTkSuQmCC")
|
|
left center/38rpx 38rpx no-repeat;
|
|
}
|
|
|
|
.address-list .foot .checked-icon.active {
|
|
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAD3UlEQVRYR9WZX2xTdRTHv98220CIsCXwoD4Q2MsuhMTJC4kBE6ZCIgTuYO8mGB4gZL0S8HF700Rb0/CkJr47kZSZzOAgsBgfQCAx7a9icAESiD64OTIHjq6H/Nq19pbb29+9vZuuL33o+fP5/Tnnd84psUI+XCGcaAm0Oy0dbfPYhTj2ULAZwGaw9A0IJgFMCjGJBVx62o6JOyf5T9iNCQW6NSVHRbAXxD4IXjByTsxBMEbiu1yCXxjp1AgFArU+kSOI4QQEu4I6cskTEyjirHqfI6Z2jEF7knKOgG1q2EROgG/yDvtNZI1AraTcBPCqicEQMreUw95mek1BraRMA1jfzFCLv/+lHHb62fAFtVLyAIKXWoQwUyceqgRfbiTcENRKygUA+828RCY1qhwe8LLmCWol5SsARyJzH8zQiHI4UK/yHGgpBREa9L/7CAbqU9fzoCm52nKebHWJxIRKcHetGRfo4ovzeat+DPR1ove9WiTeq33BXKDLEUAEzucc2gZx4AqsKuimL2XVmmlMCbDaYEfCioxufAT7yhAL2oAfLIHHf3ei6+67fKJlq6DbPpV3ikWMhiUw0BubewT77lDZscGOIhbD/uwgv3WB9qTkQwrOGDgMLELgosygXw1z1hRSywnxUT7BD1ygJitcJGwaCHUrubx6DewbxzgTBLLiq5JTq0dvJeUnAK812a7PlMNjVkoyEHi+IC59YqLYBvuXE/wzBKRWuaEc7nDvaEqmIGhcGBDZGDCQTTCvK/v2BWjYtxstTIAf4zHY2UH+ERJSR9C0SrArGGiZ6BaBgZzDO91pebGtgAyBNzxgrxUA+1eHD0JDluk8QM2OXvdC1xHHYTXI+91p2dBeQAbAzhrYm1KEnT/Fey1Blg16HH2AQkQfKzvQr47z9+1peaVQhu0V4Od4AXb2NH+LAFKbqBYo1WAKkZ6u6tYk53BqW1q2FAvILMTQf3uQtyOC9E5PPR/Lm4zhYsAkOY4OHFLHObs1LVbuJFVUkKU8WsRb+VP83hVMi5GsI9+s/f13RWOYwUE1zPkoIUHMzcfRVZkF1BclXwMw6grrdj6jHB4M8GiYHNw55fBwRTDKMi/oi+UL61vmlY5uJRTOJdCV0opo2KWYiphcylKkN5ie+LXLSzkdacTdcGriP4BYnilJBdp3WtJ8pLMc05ImUxJXwve7Q0vc9DWcjtQyNd3RinDEybxi1nMq4rVpxqDV1PV/H+TWrnJxUHGAQJ9pe63bXwHGSVxY8tF4/ZHoWcDaGfQtCF73+7MhTvwwuw7jlR7dNKeGuqNhjEepE+iORuk4qK1nmV6XOhLYKXkAAAAASUVORK5CYII=");
|
|
}
|
|
|
|
.address-list .foot .del-btn {
|
|
margin-left: 50rpx;
|
|
}
|
|
|
|
.address-list .foot {
|
|
.edit-btn,
|
|
.del-btn {
|
|
image {
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
vertical-align: middle;
|
|
|
|
object-fit: cover;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.address-list .footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 9;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
width: 100%;
|
|
padding: 15rpx 30rpx;
|
|
padding-bottom: calc(15rpx + var(--safe-bottom));
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.address-list .footer navigator {
|
|
flex: 1;
|
|
height: 76rpx;
|
|
border-radius: 38rpx;
|
|
background-color: #2a8eff;
|
|
vertical-align: middle;
|
|
font-size: 30rpx;
|
|
line-height: 76rpx;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.address-list .footer a:nth-child(2) {
|
|
margin-left: 30rpx;
|
|
background-color: #feb720;
|
|
}
|
|
|
|
.address-list .footer image {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin-right: 10rpx;
|
|
vertical-align: middle;
|
|
|
|
object-fit: cover;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.address-list .footer a:nth-child(2) image {
|
|
width: auto;
|
|
}
|
|
|
|
.address-list .footer text {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.address-list .nothing {
|
|
display: block;
|
|
width: 414rpx;
|
|
margin: 30rpx auto;
|
|
pointer-events: none;
|
|
-webkit-touch-callout: none;
|
|
}
|
|
</style>
|
|
|