<template>
    <view>
        <scroll-view :scroll-y="true" @scroll="handleContentScroll">
            <!-- 导航栏  :leftIconColor="!isTop ? '#fff' : '#000'"-->
            <u-navbar :placeholder="true" autoBack @click="autoBackFun">
                <view slot="center">
                    <view class="center" style="background-color: #fff;">我的地址</view>
                </view>
            </u-navbar>

            <view class="content">
                <view class="item" v-for="(item,index) in list" :key="index">
                    <view class="addressName">{{ item.addressName }}</view>
                    <view style="display: flex;justify-content: space-between;align-items: center;">
                        <view style="display: flex;align-items: center;">
                            <text class="userName"> {{ item.userName }}</text>
                            <text class="userPhone">{{ item.userPhone }}</text>
                            <text v-if=item.defaultAddress class="defaultAddress">{{ item.defaultAddress }}</text>
                        </view>
                        <view style="display: flex;align-items: center;">
                            <image style="width: 40rpx;height: 40rpx;" src="@/static/points/editIcon.png" mode="" @click="goEditAddress">
                            </image>
                            <image style="width: 40rpx;height: 40rpx;margin-left: 20rpx;"
                                src="@/static/points/deleteIcon.png" mode="">
                            </image>

                        </view>
                    </view>


                </view>
            </view>




            <view class="footer-bar">
                <u-button :customStyle="{
                    color: '#fff',
                    background: '#03C1B8'
                }" @click="redeemNowFun">新增地址</u-button>
            </view>


            <u-popup :show="selectProductShowPopup" mode="bottom" round="10">
                <!-- <SelectProduct ref="selectProductRef" @closeSelectProduct="closeSelectProduct"></SelectProduct> -->
            </u-popup>

        </scroll-view>

    </view>
</template>

<script>

export default {
    components: {},
    data() {
        return {
            isTop: 0,
            redemptionRulesShowPopup: false,
            selectProductShowPopup: false,
            list: [
                {
                    addressName: '迎泽西大街86号信达国际金融中心',
                    userName: '郭丽丽',
                    userPhone: '16635680981',
                    defaultAddress: '默认',
                }, {
                    addressName: '迎泽西大街86号信达国际金融中心',
                    userName: '郭丽丽',
                    userPhone: '16635680981',
                }, {
                    addressName: '迎泽西大街86号信达国际金融中心',
                    userName: '郭丽丽',
                    userPhone: '16635680981',
                }, {
                    addressName: '迎泽西大街86号信达国际金融中心',
                    userName: '郭丽丽',
                    userPhone: '16635680981',
                }, {
                    addressName: '迎泽西大街86号信达国际金融中心',
                    userName: '郭丽丽',
                    userPhone: '16635680981',
                },
            ]


        }
    },
    onLoad(data) {

    },
    onShow() {

    },
    onPageScroll(e) {
        //console.log("滚动距离为：" + e.scrollTop);
        this.isTop = e.scrollTop;
    },

    methods: {
        handleContentScroll(e) {
            this.isTop = e.detail.scrollTop > 0
        },
        clichFun() {

        },
        //立即兑换
        redeemNowFun() {

        },
        //返回上一页
        autoBackFun(){
            uni.navigateBack();
        },
        //去编辑地址
        goEditAddress() {
            uni.navigateTo({
                url: '/pages/address/address-edit'
            });
            // /let str = uni.$u.queryParams(params);
            // uni.navigateTo({
            // 	url: `/packageA/pages/shop/coupon/couponDetail${str}`
            // });
        },

    }
}
</script>

<style></style>
<style lang="scss" scoped>
.footer-bar {
    .u-button {
        width: 670rpx;
        height: 84rpx;
        border-radius: 98rpx 98rpx 98rpx 98rpx;
        margin: 20rpx 40rpx;
        background: '#000';
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
        line-height: 36rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;


    }
}

.content {
    background-color: #F8F8F8;
    padding: 32rpx;
    font-family: PingFang SC, PingFang SC;

    .item {
        background: #FFFFFF;
        box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(88, 209, 187, 0.05);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        padding: 32rpx 24rpx;
        margin-bottom: 24rpx;
    }

    .addressName {
        font-weight: 500;
        font-size: 32rpx;
        color: #2F3437;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-bottom: 16rpx;
    }

    .userName {
        font-weight: 400;
        font-size: 26rpx;
        color: #333333;
        line-height: 24rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }

    .userPhone {
        font-weight: 400;
        font-size: 26rpx;
        color: #999999;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-left: 20rpx;
    }

    .defaultAddress {
        font-weight: 400;
        font-size: 24rpx;
        color: #F35031;
        text-align: center;
        font-style: normal;
        text-transform: none;
        width: 72rpx;
        height: 40rpx;
        background: rgba(243, 80, 49, 0.1);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        margin-left: 20rpx;
    }


}

.popupClass {
    background-color: #F5F8F8;
    padding: 24rpx 32rpx 0 32rpx;
    font-family: PingFang SC, PingFang SC;

    .niticeClass {
        background: #FFFFFF;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        margin-top: 24rpx;
        padding: 24rpx;
        position: relative;

        .title {
            font-weight: 800;
            font-size: 28rpx;
            color: #333333;
            line-height: 28rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
            width: 686rpx;
            margin: 24rpx 0;
        }

        .text {
            color: #999999;
        }
    }
}
</style>
