jzmall_verify_uni/pages/ucenter/address/address.vue

<template>
    <view>
        <!-- <sjs src="../../../utils/formatFuc.sjs" module="utils" /> -->
        <view class="container">
            <view class="current-city">
                <image src="https://mall.zhaijieshi.cc/file/wx-dy/address-map.png" mode="asceptFit"></image>
                <text class="text">当前定位城市</text>
                <text>{{ city }}</text>
            </view>
            <view class="top-wrapper">
                <view class="dz">{{ addressName }}</view>
                <view class="sx" @tap="shaxin">
                    <image src="https://mall.zhaijieshi.cc/file/wx-dy/address-refresh.png" mode="asceptFit"></image>
                    <text>重新定位</text>
                </view>
            </view>
            <view class="address-title">
                <image src="https://mall.zhaijieshi.cc/file/wx-dy/address-list.png" mode="asceptFit"></image>
                <text v-if="!isShowServiceAddress">我的服务地址</text>
                <text v-if="isShowServiceAddress">请选择你的服务地址</text>
            </view>
            <!-- <view class="xzwz" wx:if="{{isShowServiceAddress}}">请选择你的服务地址</view> -->
            <view class="address-list" v-if="addressList.length > 0">
                <view class="item" v-for="(item, index) in addressList" :key="index">
                    <!-- <view class="l">
        <image src="/static/images/address/dingwei.png"></image>
     
      </view> -->

                    <view class="c" @tap="addressAddOrUpdate" :data-address-id="item.id" :data-address-detail="item.addressDetail">
                        <view class="address">{{ item.province }} {{ item.city }} {{ item.county }} {{ item.addressDetail }}</view>
                        <view class="mobile-wrapper">
							<!-- <view class="mobile">{{ item.name }} {{ utils.formatGender(item.gender) }} {{ item.tel }}</view> -->
                            <view class="mobile">{{ item.name }} {{item.gender==1?'先生':'女士' }} {{ item.tel }}</view>
                            <view class="default" v-if="item.isDefault">默认</view>
                        </view>
                    </view>

                    <view class="r">
                        <!-- <van-icon catchtap="deleteAddress" data-address-id="{{item.id}}" class="del" name="delete"/> -->
                        <image src="https://mall.zhaijieshi.cc/file/wx-dy/address-edit.png" mode="asceptFit" :data-address-id="item.id" @tap="updateAddress" class="update" />
                    </view>
                </view>
            </view>
            <view class="empty-view" v-if="addressList.length <= 0">
                <image src="https://mall.zhaijieshi.cc/file/wx-dy/address-null.png" mode="asceptFit"></image>
                <text class="text">空空如也呢~</text>
            </view>
            <view class="add-address" @tap="addressAddOrUpdate" data-address-id="0">添加服务地址</view>
        </view>
    </view>
</template>
<script module="utils" lang="wxs" src="@/utils/formatFuc.wxs"></script>
<script>
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
var map = require('../../../utils/map.js');
var app = getApp();
export default {
    data() {
        return {
            addressList: [],
            total: 0,
            addressName: '位置获取中',
            city: '位置获取中',
            isShowServiceAddress: false
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        var pages = getCurrentPages();
        var prevPage = pages[pages.length - 2];
        if (prevPage.route == 'pages/index/index') {
            this.setData({
                isShowServiceAddress: true
            });
        }
        this.getUserLocation();
    },
    onReady: function () {
        // 页面渲染完成
    },
    onShow: function () {
        // 页面显示
        this.getAddressList();
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        shaxin() {
            this.getUserLocation();
        },

        getUserLocation: function () {
            map.getUserLocation();
            let that = this;
            setTimeout(function () {
                that.setData({
                    addressName: app.globalData.currentLocationName,
                    city: app.globalData.city
                });
            }, 2000);
        },

        getAddressList() {
            let that = this;
            util.request(api.AddressList).then(function (res) {
                if (res.errno === 0) {
                    that.setData({
                        addressList: res.data.list,
                        total: res.data.total
                    });
                }
            });
        },

        updateAddress(event) {
            let addressId = event.currentTarget.dataset.addressId;
            uni.navigateTo({
                url: '/pages/ucenter/addressAdd/addressAdd?id=' + addressId
            });
        },

        async updateAddressData(address) {
            await util.request(api.AddressSave, address, 'POST').then(function (res) {
                if (res.errno === 0) {
                    var city = res.data.city.indexOf('市辖') != -1 ? res.data.province : res.data.city;
                    var addresInfo = {
                        city: city,
                        lng: res.data.lng,
                        lat: res.data.lat,
                        shopId: res.data.shopId,
                        address: res.data.addressDetail
                    };
                    uni.setStorageSync('addressInfo', addresInfo);
                }
            });
        },

        addressAddOrUpdate(event) {
            // console.log(event)

            let addressId = event.currentTarget.dataset.addressId;
            let addressDetail = event.currentTarget.dataset.addressDetail;
            let address = null;
            this.addressList.forEach((item) => {
                if (addressId == item.id) {
                    address = item;
                }
            });
            console.info(address);

            //返回之前，先取出上一页对象，并设置addressId
            var pages = getCurrentPages();
            var prevPage = pages[pages.length - 2];
            if (null != address && prevPage.route == 'pages/index/index') {
                //  console.log("市辖区".indexOf("市"));
                var city = address.city.indexOf('市辖') != -1 ? address.province : address.city;

                //通过jz_shop的shop_no关联服务力分配的门店id，拿实际的jz_shop的门店id
                //这个是拿的服务力分配的门店，如果不转要改后台查询商品，要用shopNo，这里的shopId是shopNo
                // let distribution_unit=address.shopId;
                if (address.shopId == null) {
                    this.updateAddressData(address);
                } else {
                    var addresInfo = {
                        city: city,
                        lng: address.lng,
                        lat: address.lat,
                        shopId: address.shopId,
                        address: address.addressDetail,
                        shopName: address.shopName
                    };
                    uni.setStorageSync('addressInfo', addresInfo);
                }
                uni.navigateBack();
            } else if (prevPage.route == 'pages/checkout/checkout' || prevPage.route == 'pages/ucenter/appointOrder/appointOrder') {
                try {
                    uni.setStorageSync('addressId', event.currentTarget.dataset.addressId);
                    uni.setStorageSync('addressName', event.currentTarget.dataset.addressDetail);
                } catch (e) {
                    console.log('CatchClause', e);
                    console.log('CatchClause', e);
                }
                if (addressId && addressId != 0) {
                    uni.navigateBack();
                } else {
                    uni.navigateTo({
                        url: '/pages/ucenter/addressAdd/addressAdd?id=' + addressId
                    });
                }
            } else if (prevPage.route == 'pages/goods/infoCollect/infoCollect') {
                if (addressId && addressId != 0) {
                    app.globalData.infoAddress = {
                        addressId: addressId,
                        addressDetail: addressDetail
                    };
                    uni.navigateBack();
                } else {
                    uni.navigateTo({
                        url: '/pages/ucenter/addressAdd/addressAdd?id=' + addressId
                    });
                }
            } else {
                uni.navigateTo({
                    url: '/pages/ucenter/addressAdd/addressAdd?id=' + event.currentTarget.dataset.addressId
                });
            }
        },

        deleteAddress(event) {
            console.log(event.target);
            let that = this;
            uni.showModal({
                title: '',
                content: '确定要删除地址？',
                success: function (res) {
                    if (res.confirm) {
                        let addressId = event.target.dataset.addressId;
                        util.request(
                            api.AddressDelete,
                            {
                                id: addressId
                            },
                            'POST'
                        ).then(function (res) {
                            if (res.errno === 0) {
                                that.getAddressList();
                                uni.removeStorage({
                                    key: 'addressId',
                                    success: function (res) {}
                                });
                            }
                        });
                        console.log('用户点击确定');
                    }
                }
            });
            return false;
        }
    }
};
</script>
<style>
page {
    height: 100%;
    width: 100%;
    background: #fff;
}
.container {
    padding: 0 30rpx;
    background: #fff;
}
.current-city {
    height: 90rpx;
    display: flex;
    align-items: center;
}
.current-city image {
    width: 30rpx;
    height: 30rpx;
    margin-top: 4rpx;
}
.current-city text {
    font-size: 28rpx;
    color: #333;
}
.current-city .text {
    margin: 0 20rpx 0 12rpx;
}
.dz {
    width: 570rpx;
    /* border: 1px solid red; */
    color: #333;
    /* background: #B8E3F9;
    text-indent: 20rpx; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 466rpx;
    font-size: 30rpx;
}
.sx {
    display: flex;
    align-items: center;
    height: 90rpx;
    /* border: 1px solid red; */
}
.sx image {
    width: 30rpx;
    height: 30rpx;
    margin-right: 12rpx;
}
.sx text {
    color: #00c0ff;
    font-size: 26rpx;
}
.xzwz {
    text-indent: 20rpx;
    color: #90a4ae;
}
.update {
    width: 44rpx;
    height: 44rpx;
}
.address-title {
    height: 28rpx;
    margin: 30rpx 0 10rpx;
    display: flex;
    align-items: center;
}
.address-title image {
    width: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
}
.address-title text {
    font-size: 26rpx;
    color: #666;
}

.address-list {
    padding: 0 28rpx 0 30rpx;
    background: #fff;
    padding-bottom: 200rpx;
}

.address-list .item {
    /* height: 156.55rpx; */
    padding: 30rpx 0;
    align-items: center;
    display: flex;
    border-bottom: 2rpx solid #f2f2f2;
}

.address-list .l {
    width: 50rpx;
    height: 80rpx;
    overflow: hidden;
}
.address-list .l image {
    width: 40rpx;
    height: 50rpx;
}

.address-list .name {
    width: 125rpx;
    height: 43rpx;
    font-size: 29rpx;
    color: #333;
    margin-bottom: 5.2rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.address-list .default {
    float: right;
    /* margin-right: 40rpx; */
    border: 1px solid #00c0ff;
    color: #00c0ff;
    border-radius: 6rpx;
    line-height: 20px;
    width: 80rpx;
    height: 36rpx;
    line-height: 34rpx;
    text-align: center;
    font-size: 24rpx;
    visibility: visible;
}

.address-list .c {
    flex: 1;
    height: auto;
    overflow: hidden;
}
.mobile-wrapper {
    height: 36rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12rpx;
}
.address-list .mobile {
    /* height: 29rpx; */
    font-size: 26rpx;
    line-height: 2rrpx;
    color: #999;
    flex: 1;
    margin-right: 20rpx;
}

.address-list .address {
    /* height: 37rpx; */
    font-size: 30rpx;
    line-height: 38rpx;
    /* overflow: hidden; */
    color: #333;
}

.address-list .r {
    margin-left: 28rpx;
    /* width: 52rpx;
  height: auto;
  overflow: hidden;
  margin-right: 16.5rpx; */
}

.address-list .del {
    display: block;
    width: 52rpx;
    height: 52rpx;
}

.add-address {
    border: none;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 90rpx;
    line-height: 98rpx;
    position: fixed;
    bottom: 40rpx;
    left: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    margin-left: 5%;
    text-align: center;
    /* padding-left: -5rpx; */
    font-size: 30rpx;
    color: #f4f4f4;
    border-top-left-radius: 50rpx;
    border-bottom-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    border-bottom-right-radius: 50rpx;
    letter-spacing: 3rpx;
    background-image: linear-gradient(to right, #09afff 0%, #09afff 100%);
}

.empty-view {
    /* height: 100%; */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
}
.empty-view image {
    width: 254rpx;
    height: 224rpx;
    margin: 256rpx 0 34rpx;
}

.empty-view .text {
    font-size: 22rpx;
    line-height: 24rpx;
    color: #666;
}
.top-wrapper {
    height: 90rpx;
    border-bottom: 2rpx solid #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>