caimei-applets-hehe/pages/user/address/address.vue

<template>
    <view class="container clearfix">
        <view v-if="isEmpty" class="empty-container">
            <image class="empty-container-image" :src="StaticUrl + 'icon-empty-address.png'" mode="aspectFit"></image>
            <view class="txt">您还没有收货地址</view> <view class="txt">点击底部按钮添加收货地址吧~~</view>
            <view class="login-btn" @click="addAddress('add')">添加新地址</view>
        </view>
        <view v-else class="address-list" :style="{ height: scrollHeight + 'px' }">
            <scroll-view scroll-y="true" :style="{ height: scrollHeight + 'px' }">
                <view class="list" v-for="(item, index) in addressList" :key="index" @click="checkAddress(item)">
                    <view class="wrapper">
                        <view class="u-box">
                            <text class="name">{{ item.shouHuoRen }}</text>
                            <text class="mobile">{{ item.mobile }}</text>
                            <text v-if="item.defaultFlag == 1" class="default-tags">默认</text>
                        </view>
                        <view class="u-box b-b">
                            <text class="address"
                                ><text class="label">收货地址：</text>{{ item.provinceName }}{{ item.cityName
                                }}{{ item.townName }}{{ item.address }}</text
                            >
                        </view>
                        <view class="u-box b-t">
                            <view v-if="item.defaultFlag == 1" class="tag-left">
                                <view class="tag"
                                    ><text class="iconfont icon-xuanze"></text><text>已设为默认地址</text></view
                                >
                            </view>
                            <view v-else class="tag-left">
                                <view class="tag" @click.stop="setDefaultAddress(item.addressId)"
                                    ><text class="iconfont icon-weixuanze"></text><text>设为默认地址</text></view
                                >
                            </view>
                            <view class="tag-right">
                                <view class="t-b" @click.stop="deleteAddress(item.addressId)">
                                    <text class="iconfont icon-shanchu"></text> <text class="txt">删除</text>
                                </view>
                                <view class="t-b" @click.stop="addAddress('edit', item)">
                                    <text class="iconfont icon-bianji"></text> <text class="txt">编辑</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
            <view class="add-btn" @click.stop="addAddress('add')">添加新地址</view>
        </view>
        <tui-modal
            :show="modal"
            @click="handleClick"
            @cancel="hideMobel"
            :content="contentModalText"
            color="#333"
            :size="32"
            shape="circle"
            :maskClosable="false"
        ></tui-modal>
    </view>
</template>

<script>
import { mapGetters } from 'vuex'    
export default {
    data() {
        return {
            StaticUrl: this.$Static,
            isSelect: false,
            isEmpty: false,
            addressList: [],
            hasNextPage: false,
            allowDataStatus: true,
            wrapperHeight: '100%',
            scrollHeight: '',
            currPage: '', //当前页面
            prevPage: '', //上一个页面
            modal: false,
            contentModalText: '',
            deleteaddressId: 0,
            listQuery: {
                userId: '',
                pageNum: 1,
                pageSize: 10
            }
        }
    },
    onLoad(option) {
        if (option.type == 'select') {
            this.isSelect = true
        }
        this.setScrollHeight()
    },
    computed:{
        ...mapGetters(['userId'])
    },
    methods: {
        setScrollHeight() {
            // 窗口高度 - 底部距离
            setTimeout(() => {
                const query = wx.createSelectorQuery().in(this)
                query.selectAll('.add-btn').boundingClientRect()
                query.exec(res => {
                    if (res[0][0]) {
                        let winHeight = this.$api.getWindowHeight(),
                            eleTop = res[0][0].top - 1
                        this.scrollHeight = eleTop
                    }
                })
            }, 500)
        },
        GetAddressList() {
            // 初始化地址列表
            this.listQuery.userId = this.userId
            this.UserService.QueryAddressList(this.listQuery)
                .then(response => {
                    const data = response.data
                    if (data.list && data.list.length > 0) {
                        this.isEmpty = false
                        this.addressList = data.list
                        this.hasNextPage = data.hasNextPage
                    } else {
                        this.isEmpty = true
                    }
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        GetOnReachBottomAddressList() {
            //上滑加载
            this.listQuery.pageNum += 1
            this.UserService.QueryAddressList(this.listQuery)
                .then(response => {
                    const data = response.data
                    this.hasNextPage = data.hasNextPage
                    this.addressList = this.addressList.concat(data.list)
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        checkAddress(item) {
            //选择地址
            //是否需要返回地址(从订单确认页跳过来选收货地址)
            if (!this.isSelect) {
                return
            }
            uni.setStorageSync('selectAddress', item)
            var pages = getCurrentPages()
            var prevPage = pages[pages.length - 2] //上一个页面
            prevPage.setData({ select: 'select' })
            uni.navigateBack()
        },
        // 跳转添加地址页面 type:添加或修改
        addAddress(type, item) {
            uni.navigateTo({
                url: `/pages/user/address/addressManage?type=${type}&data=${JSON.stringify(item)}`
            })
        },
        handleClick(e) {
            //用户操作订单
            let index = e.index
            if (index == 1) {
                this.UserService.DeleteOtherAddress({
                    addressId: this.deleteaddressId,
                    userId: this.listQuery.userId
                })
                    .then(response => {
                        this.$util.msg('删除成功', 2000, true, 'success')
                        setTimeout(() => {
                            this.GetAddressList()
                        }, 2000)
                    })
                    .catch(error => {
                        this.$util.msg(error.msg, 2000)
                    })
            }
            this.modal = false
        },
        hideMobel() {
            this.modal = false
        },
        //删除收货地址
        deleteAddress(id) {
            this.modal = true
            this.contentModalText = '确认删除该地址吗？'
            this.deleteaddressId = id
        },
        // 修改默认地址
        setDefaultAddress(id) {
            this.UserService.SetDefaultOtherAddress({
                addressId: id,
                userId: this.listQuery.userId
            })
                .then(res => {
                    this.GetAddressList()
                })
                .catch(err => {
                    this.GetAddressList()
                })
        }
    },
    onPullDownRefresh() {
        //下拉刷新
        this.listQuery.pageNum = 1
        this.GetAddressList()
        uni.stopPullDownRefresh()
    },
    onReachBottom() {
        console.log('用户把这个页面上拉100时触发我的')
        if (this.hasNextPage) {
            this.GetOnReachBottomAddressList()
        }
    },
    onShow() {
        this.pageNum = 1
        this.addressList = []
        this.GetAddressList()
    }
}
</script>

<style lang="scss">
page {
    height: auto;
}
page,
.container {
    /* padding-bottom: 120upx; */
    background: #f7f7f7;
    border-top: 1px solid #ebebeb;
}
.container {
    position: relative;
}
.list {
    display: flex;
    align-items: center;
    width: 702rpx;
    height: auto;
    padding: 24rpx;
    background: #ffffff;
    position: relative;
    margin-bottom: 20rpx;
}
.wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.u-box .label {
    color: #999999;
}
.u-box.b-b {
    margin-bottom: 24rpx;
}
.u-box.b-t {
    margin-bottom: 0;
}
.u-box {
    display: flex;
    align-items: center;
    font-size: $font-size-26;
    color: $text-color;
    line-height: 40rpx;
    margin-bottom: 12rpx;
    .name {
        margin-right: 40rpx;
        font-weight: bold;
    }
    .mobile {
        font-weight: bold;
    }
    .default-tags {
        margin-left: 15rpx;
        display: block;
        width: 72rpx;
        height: 32rpx;
        border-radius: 16rpx;
        background-color: #fff3f7;
        color: $color-system;
        line-height: 32rpx;
        text-align: center;
        font-size: 22rpx;
    }
    .tag-left {
        flex: 6;
        .tag {
            width: 280rpx;
            height: 40rpx;
            font-size: $font-size-26;
            color: #999999;
            line-height: 40rpx;
            .icon-xuanze {
                color: $color-system;
                font-size: 38rpx;
                margin-right: 10rpx;
            }
            .icon-weixuanze {
                color: #999999;
                font-size: 38rpx;
                margin-right: 10rpx;
            }
        }
    }
    .tag-right {
        flex: 4;
        display: flex;
        text-align: right;
        .t-b {
            flex: 1;
            line-height: 40rpx;
            .txt {
                font-size: $font-size-24;
                color: $text-color;
                line-height: 40rpx;
            }
        }
        .icon-shanchu {
            color: #333333;
            margin-right: 8rpx;
        }
        .icon-bianji {
            color: #333333;
            margin-right: 8rpx;
        }
    }
    .address {
        font-size: $font-size-28;
        color: $text-color;
        line-height: 40rpx;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        display: -webkit-box;
        word-break: break-all;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
}
.add-btn {
    position: fixed;
    left: 24rpx;
    right: 24rpx;
    bottom: 34rpx;
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 702rpx;
    height: 88rpx;
    font-size: $font-size-28;
    line-height: 88rpx;
    color: #ffffff;
    text-align: center;
    background: $btn-confirm;
    border-radius: 45rpx;
}
.adds-btn {
    width: 702rpx;
    height: 88rpx;
    font-size: 28rpx;
    line-height: 88rpx;
    color: #ffffff;
    margin: 0 auto;
    text-align: center;
    background: #000000;
    border-radius: 14rpx;
}
</style>