This commit is contained in:
shuhongfan
2023-09-04 16:40:17 +08:00
commit cf5ac25c14
8267 changed files with 1305066 additions and 0 deletions

View File

@@ -0,0 +1,247 @@
.address{
background-color:#F3F5F9 ;
height: 100vh;
}
.seachBox{
display: flex;
align-items: center;
background-color: white;
::v-deep .uni-searchbar{
padding-left: 40rpx;
padding-right: 40rpx;
.uni-searchbar__box{
border-radius: 34rpx!important;
justify-content: flex-start;
}
}
uni-search-bar{
flex: auto;
}
.search-icon{
width: 40rpx;
height: 40rpx;
background-repeat: no-repeat;
background-size: contain;
background-image: url(data:image/png;base64,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);
}
.search-btn{
font-weight: bold;
font-size: 28rpx;
}
}
.list-container{
padding: 0 18rpx;
.checkbox{
margin-right: 50rpx;
}
.address-list.isChecked{
display: flex;
align-items: center;
background-color:#F3F5F9 ;
padding: 36rpx 0;
padding-bottom: 0;
padding-top: 0;
}
.address-item.isChecked{
border-radius: 20rpx;
padding: 36rpx 30rpx 0rpx;
background: #FFFFFF;
.address-item-footer{
margin-bottom: 36rpx;
}
}
.address-list{
margin-top: 20rpx;
background: #FFFFFF;
border-radius: 20rpx;
padding: 36rpx 30rpx 0rpx;
padding-bottom: 30rpx;
.address-item{
flex: auto;
}
.address-name,.address-phone{
display: inline-block;
}
.address-name{
font-size: 30rpx;
font-weight: bold;
margin-right: 12rpx;
}
.address-phone,.address-address{
color: #888;
font-size: 26rpx;
}
.address-address{
margin-top: 10rpx;
}
.line{
margin-top: 20rpx;
height: 2rpx;
background-color:#F4F4F4 ;
width: 100%;
}
.address-item-footer{
display: flex;
justify-content: space-between;
margin-top: 20rpx;
.save-address{
display: flex;
align-items: center;
.label{
font-size: 26rpx;
color: #888;
}
.active,.checkbox{
width: 40rpx;
height: 40rpx;
background-repeat: no-repeat;
background-size: contain;
margin-right: 10rpx;
}
.checkbox{
background-image: url('../../static/checkbox.png');
}
.active{
background-image: url('../../static/checkboxActive.png');
}
}
.right-box{
display: flex;
}
.edit-btn,.delete-btn{
display: flex;
align-items: center;
icon{
background: url(../../static/btn-bianji.png) no-repeat;
background-size: contain;
width: 40rpx;
height: 40rpx;
margin-right: 6rpx;
}
text{
font-size: 26rpx;
color: #888;
}
}
.delete-btn{
margin-left: 20rpx;
icon{
background: url(../../static/btn-shanchu.png) no-repeat;
background-size: contain;
width: 30rpx;
height: 30rpx;
}
}
.right-box.active{
.edit-btn,.delete-btn{
text{
color: #DADADA;
}
}
.edit-btn{
icon{
width: 40rpx;
height: 40rpx;
background: url(../../static/btn-bianji-gray.png) no-repeat;
background-size: contain;
}
}
.delete-btn{
icon{
width: 30rpx;
height: 30rpx;
background: url(../../static/btn-shanchu-gray.png) no-repeat;
background-size: contain;
}
}
}
}
.address-item-footer.active{
justify-content: flex-end;
}
}
.address-footer{
height:160rpx ;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #FFFFFF;
.manage-btn{
width: 250rpx;
height: 88rpx;
border: 2rpx solid #979797;
border-radius: 44rpx;
color:#0F0F0F ;
text-align: center;
line-height: 88rpx;
}
.addAddress-btn{
width: 400rpx;
height: 88rpx;
background-color:#CCCCCC ;
border-radius: 44rpx;
color:#FFFFFF ;
text-align: center;
line-height: 88rpx;
margin-left: 26rpx;
}
.addAddress-btn.active{
background-color:#E84134 ;
}
}
.all-select{
display: flex;
width: 100%;
position: fixed;
align-items: center;
left: 0;
bottom:160rpx ;
height: 84rpx;
background-color: #FFFFFF;
border-bottom: 1px solid #F4F4F4;
font-size: 24rpx;
.checkbox{
margin-right: 0rpx;
margin-left:28rpx ;
}
}
}
.empty-box{
margin-top: 300rpx;
image{
width: 400rpx;
height: 240rpx;
display: block;
margin: 0 auto;
}
view{
font-size: 28rpx;
color:#818181 ;
margin-top: 40rpx;
text-align: center;
}
}
.address-popup{
::v-deep .uni-button-color{
color: #E84134;
}
::v-deep .uni-dialog-title{
display: none;
}
}

View File

@@ -0,0 +1,363 @@
<template>
<nav-bar title="地址簿" :handleToLink="handleToLink"></nav-bar>
<view class="address" v-if="netStatus">
<view class="seachBox">
<uni-search-bar cancelButton="none" placeholder="请输入姓名/手机号" v-model="searchValue" @input="input"
@cancel="cancel" @clear="clear">
<template v-slot:searchIcon>
<view class="search-icon"></view>
</template>
</uni-search-bar>
</view>
<view class="list-container">
<scroll-view v-if="list.data.length > 0" scroll-y :style="scrollHeight" lower-threshold="30"
@scrolltolower="LoadMoreCustomers">
<!-- 列表内容 -->
<view v-for="(item, index) in list.data" @click.stop.prevent="
isManage ? checkbox(index, item) : handleToAddressInfo(item.id)
" :key="index" class="address-list" :class="isManage ? 'isChecked' : ''">
<view class="checkbox" v-if="isManage">
<view class="checkRadio">
<radio style="transform: scale(0.77)" color="#F23C24" :value="String(index)"
:checked="item.selected" />
</view>
</view>
<view class="address-item" :class="isManage ? 'isChecked' : ''">
<view class="address-name">{{ item.name }}</view>
<view class="address-phone">{{ item.phoneNumber }}</view>
<view class="address-address">
{{
item.province
? item.province.name +
item.city.name +
item.county.name +
item.address
: ''
}}
</view>
<view class="line"></view>
<view class="address-item-footer" :class="type === 'get' ? 'active' : ''">
<view class="save-address" v-if="type !== 'get'" @click.stop="
handleSaveToDefaultAddress(item.id, item.isDefault)
">
<view class="checkbox" :class="{ active: Boolean(item.isDefault) }"></view>
<view class="label">默认寄件地址</view>
</view>
<view class="right-box" :class="!isManage ? '' : 'active'">
<view class="edit-btn" @click.stop="handleEditAddress(item)">
<icon></icon>
<text>编辑</text>
</view>
<view class="delete-btn" @click.stop="handledDelete(item.id)">
<icon></icon>
<text>删除</text>
</view>
</view>
</view>
</view>
</view>
<!-- 加载底部 -->
<uni-load-more :status="status" />
</scroll-view>
<!-- 空页面 -->
<view v-else class="empty-box">
<image src="../../static/address-empty.png"></image>
<view>{{ searchValue ? '没有搜索到相关条件的地址' : '暂无数据' }}</view>
</view>
<!-- 全选操作栏 -->
<view class="all-select" v-if="isManage">
<view class="checkbox" @click="selectAll">
<view class="checkRadio">
<radio style="transform: scale(0.77)" :checked="isAllSelect" color="#F23C24" />
</view>
</view>
<view>全选</view>
</view>
<!-- 底部操作栏 -->
<view class="address-footer">
<view class="manage-btn" v-if="list.data.length > 0" @click="handleEdit">{{ isManage ? '完成' : '管理' }}
</view>
<view class="addAddress-btn" :class="
(isManage && deleteIds.data.length) || !isManage ? 'active' : ''
" @click="handleDeleteOrAdd">{{ isManage ? '删除' : '新增地址' }}</view>
</view>
</view>
</view>
<!-- 断网显示的页面 -->
<net-fail v-else :handleToRefresh="handleToRefresh"></net-fail>
<!-- 删除确认对话框 -->
<uni-popup ref="popup" type="dialog" class="address-popup">
<uni-popup-dialog mode="base" :content="isManage ? '确定是否删除所选地址?' : '确定是否删除此条地址?'" :animation="false"
:before-close="true" @close="close" @confirm="confirm">
</uni-popup-dialog>
</uni-popup>
</template>
<script setup>
import {
ref,
reactive,
onMounted,
} from 'vue'
import {
onLoad,
onPullDownRefresh
} from '@dcloudio/uni-app'
import {
getAddressList,
deleteAddress,
editAddress
} from '@/pages/api/address.js'
let scrollHeight = ref('')
let searchValue = ref('')
let popup = ref(null)
let isAllSelect = ref(false)
let isManage = ref(false)
let deleteIds = reactive({
data: [] //删除的地址id集合
})
let list = reactive({
data: [] //列表数据
})
let pageInfo = reactive({
page: 1,
pageSize: 10
})
let status = ref('more') //加载状态
let type = ref('')
let isFromAddress = ref('')
let netStatus = ref(true)
// 监听页面加载执行
onLoad((options) => {
type.value = options.type
isFromAddress.value = options.isFromAddress
uni.getSystemInfo({
success: (res) => {
scrollHeight.value = 'height:' + (res.screenHeight - 190) + 'px'
}
})
})
onMounted(() => {
getList()
})
// 监听下拉刷新
onPullDownRefresh(() => {
pageInfo.page = 1
getList()
})
// 断网刷新
const handleToRefresh = () => {
pageInfo.page = 1
getList()
}
const input = (e) => {
searchValue.value = e
pageInfo.page = 1
getList()
}
const clear = () => {
}
//设置是否为默认寄件地址
const handleSaveToDefaultAddress = (id, isDefault) => {
if (isManage.value) {
return
}
// 修改默认地址
editAddress({
id,
isDefault: isDefault === 1 ? 0 : 1
}).then((res) => {
pageInfo.page = 1
getList()
if (res.code === 200) {
uni.showToast({
title: '修改成功',
icon: 'none',
duration: 1000,
type: 'success'
})
} else {
uni.showToast({
title: '修改成功',
icon: 'none',
duration: 1000, //提示的延迟时间单位毫秒默认1500
type: 'error'
})
}
}).catch(() => {
uni.showToast({
title: '网络异常',
duration: 2000,
icon: 'none'
})
})
}
//返回上一级防止是最后一级报错
const handleToLink = () => {
if (type.value !== 'address') {
uni.navigateBack()
} else {
uni.switchTab({
url: '/pages/my/index'
})
}
}
//跳转回寄件收件选择地址
const handleToAddressInfo = (id) => {
if (type.value === 'address') {
return
} else if (type.value === 'get') {
if (uni.getStorageSync('sendId') === id) return uni.showToast({
title: '寄件地址和收件地址不能选择同一个',
icon: 'none',
duration: 1000
})
} else {
if (uni.getStorageSync('getId') === id) return uni.showToast({
title: '寄件地址和收件地址不能选择同一个',
icon: 'none',
duration: 1000
})
}
// 关闭当前页面,跳转回寄件收件选择地址
uni.redirectTo({
url: '/pages/express-delivery/index?type=' + type.value + '&editOrAdd=edit&id=' + id +
'&isFromAddress=true'
})
}
//批量删除或者新增地址
const handleDeleteOrAdd = () => {
if (isManage.value) {
if (deleteIds.data.length) popup.value.open()
} else {
uni.redirectTo({
url: '/subPages/address-info/index?isFromAddress=' + isFromAddress.value +
'&editOrAdd=add&type=' + type.value
})
}
}
//编辑地址
const handleEditAddress = (item) => {
if (isManage.value) {
return
}
uni.redirectTo({
url: '/subPages/address-info/index?id=' + item.id + '&isFromAddress=' + isFromAddress.value +
'&editOrAdd=edit' +
'&type=' + type.value + '&isDefault=' + item.isDefault
})
}
//获取列表数据
const getList = (flag) => {
status.value = 'loading'
getAddressList({
page: pageInfo.page,
pageSize: pageInfo.pageSize,
keyword: searchValue.value
}).then((res) => {
let arr = res.data.items ? res.data.items : []
status.value = arr.length < 10 ? 'no-more' : 'more'
//用于区分是一次进页面记载数据还是后续上拉加载
if (flag === 'topPull') {
list.data = list.data.concat(arr)
} else {
list.data = arr
}
// 与搜索框等内容关联全选矿和具体选中状态如果list.data中所有的selected都为true即全选全选文字前的radio框高亮
if (list.data.every((item) => item.selected)) {
isAllSelect.value = true
} else {
isAllSelect.value = false
}
uni.stopPullDownRefresh()
netStatus.value = true
console.log(456)
}).catch((err) => {
uni.showToast({
title: '网络异常',
duration: 2000,
icon: 'none'
})
netStatus.value = false
console.log(123)
})
}
//上拉加载
const LoadMoreCustomers = () => {
pageInfo.page = pageInfo.page + 1
if (status.value === 'no-more') {
return
}
getList('topPull')
}
//管理地址簿
const handleEdit = () => {
isManage.value = !isManage.value
}
//删除
const handledDelete = (id) => {
if (isManage.value) {
return
}
popup.value.open()
deleteIds.data.push(id)
}
//关闭删除确认提示框
const close = () => {
popup.value.close()
deleteIds.data = []
}
//确认删除
const confirm = () => {
popup.value.close()
deleteAddress(deleteIds.data).then((res) => {
pageInfo.page = 1
pageInfo.pageSize = 10
getList()
uni.showToast({
title: '删除成功',
icon: 'success',
duration: 1000
})
isManage.value = false
}).catch(() => {
uni.showToast({
title: '网络异常',
duration: 2000,
icon: 'none'
})
})
}
//选中,与取消选中(和全选联动)
const checkbox = (index, item) => {
list.data[index].selected = !list.data[index].selected
// 如果list.data中所有的selected都为true即全选全选前的radio框高亮
if (list.data.every((item) => item.selected)) {
isAllSelect.value = true
} else {
isAllSelect.value = false
}
deleteIds.data = list.data.filter(item => item.selected).map(item => item.id)
}
//全选或者全不选
const selectAll = () => {
isAllSelect.value = !isAllSelect.value
list.data = list.data.map((item) => {
return Object.assign({}, item, {
selected: isAllSelect.value
})
})
deleteIds.data = list.data.filter(item => item.selected).map(item => item.id)
}
</script>
<style src="./index.scss" lang="scss" scoped></style>