hlm_pl_mall_h5/pages/member/address/AddressList.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
	<member-base :show="false"><view class="div distributor-address-list">
		<view class="div common-header-wrap">
			<view :style="'height:'+navHeight+'px'"></view>
			<view class="common-header-holder"></view>
			<view class="common-header-fixed">
			<title-header />
			<uni-nav-bar title="收货地址" class="common-header" left-icon="back" @clickLeft="goBack">
			</uni-nav-bar>
		</view>
		</view>

		<view class="div pb-30" v-if="address_list.length>0">
			<view class="div item" v-for="item in address_list" :key="item.address_id">
				<view class="div container">
					<view class="div top-wrapper">
						<view class="div selected-wrapper">
							<view class="div line">
								<text class="i icon iconfont">&#xe6d3;</text>
								<view class="div line-content">
									<view class="div title-wrapper">
										<label class="title">{{item.address_realname}}</label>
										<label class="title" style="margin-left:1rem;">{{item.address_mob_phone}}</label>
									</view>
									<view class="div desc address-text">{{item.area_info}}{{item.address_detail}}</view>
                                    <view class="div desc address-text-cityerror" v-if="item.cityerror">门店已失效，请重新编辑收货地址</view>
								</view>
							</view>
						</view>
						<view class="div bottom-line"></view>
					</view>

					<view class="div bottom-wrapper">
						<view class="div bottom-left-wrapper" @click="onDefault(item)">
							<label class="subtitle">
								<text v-if="item.address_is_default == 1" class="i iconfont">&#xe69d;</text><text v-else class="i iconfont">&#xe69e;</text>默认地址
							</label>
						</view>
						<view class="div bottom-right-wrapper">
							<view class="div edit-wrapper" @click="onEdit(item)">
								<label class="subtitle"><text class='iconfont'>&#xe6e1;</text>编辑</label>
							</view>
							<view class="div edit-wrapper delete-wrapper" @click="onDelete(item.address_id)">
								<label class="subtitle"><text class='iconfont'>&#xe6d8;</text>删除</label>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="div"  v-else>
			<empty-record></empty-record>
		</view>
		<view class='common-add-btn-wrapper'><view class="div common-btn common-add-btn"  @click="goAdd">新增</view></view>
	</view>
<uni-popup background-color="#fff" ref="confirm" type="dialog">
    <uni-popup-dialog :mode="dialog.mode" :title="dialog.title" :content="dialog.content" :placeholder="dialog.content" @confirm="confirmDialog" @close="closeDialog"></uni-popup-dialog>
</uni-popup>
</member-base>
</template>

<script>
import {getFontSize} from '@/util/common'

import TitleHeader from '../../TitleHeader'

import { urlencode } from '@/util/common'

import MemberBase from '../MemberBase'
import EmptyRecord from '../../EmptyRecord'
import { getAddressList, delAddress, editAddress } from '../../../api/memberAddress'
export default {
  components:{
    TitleHeader,
    MemberBase,
    EmptyRecord
  },
  name:'MemberAddressList',
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().top
  // #endif
  },
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  data(){
    return {
      navHeight: 0,
      dialog:{},
      address_list: []
    }
  },
  onShow: function () {
    this.getAddressList()
  },
  methods:{
    closeDialog(){
    },
    confirmDialog(value){
      uni.showLoading({ title: '加载中' })
        delAddress(this.dialog.data).then(
          (response) => {
            this.getAddressList()
            uni.hideLoading()
          }, (error) => {
            uni.hideLoading()
            uni.showToast({icon:'none',title: error.message})
          })
    },
    goBack () {
      uni.navigateBack({delta:1})
    },
    goAdd () {
      uni.navigateTo({ url: '/pages/member/address/AddressForm'+'?'+urlencode( { action: 'add' } )})
    },
    onDefault (address_info) {
      address_info.address_is_default = 1
      editAddress(address_info, address_info.address_id).then(
        (response) => {
          uni.hideLoading()
          this.getAddressList()
        }, (error) => {
          uni.hideLoading()
          uni.showToast({icon:'none',title: error.message})
        })
    },
    onEdit (address) {
      if (!address.chain_id) {
        uni.navigateTo({ url: '/pages/member/address/AddressForm'+'?'+urlencode( { address_id: address.address_id } )})
      } else {
        uni.navigateTo({ url: '/pages/member/address/ChainForm'+'?'+urlencode( { address_id: address.address_id, action: 'edit' } )})
      }
    },
    onDelete (addressId) {
      this.dialog={content:'确定要删除该地址吗？',data:addressId}
      this.$refs.confirm.open()
    },
    getAddressList () {
      getAddressList().then(res => {
        this.address_list = res.result.address_list
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    }
  }
}
</script>
<style  lang="scss" scoped>
	.distributor-address-list {
		.common-header{
			.btn{background: #000;color: #fff;box-shadow: 0px 2px 4px #d2d2d2;}
		}
		.line{display: flex;
			.line-content{flex:1}
		}
		.item{margin-bottom:$modelSpace}
		.container{background: #fff;padding:0 $pageSpace}
		.top-wrapper {
			position: relative;
			flex: 1;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			background-color: #fff;
		}
		.title-wrapper {
			height: 1rem;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
		}
		.icon {
			font-size:$h1;
			margin-right: .2rem;
			color:$primaryColor
		}
		.title {
			font-size:$h3;
			color: #333;
			font-weight: 700;
		}
		.default {
			width: 1.4rem;
			margin-left: 0.5rem;
			margin-right: 0.5rem;
			border: 1px solid $primaryColor;
			color: $primaryColor;
			font-size:$h6;
			text-align: center;
			border-radius: 0.1rem;
		}
		.desc {
			color: $descTextColor;
			font-size:$subFontSize;
		}
		.address-text {
			margin-top: .3rem;
			font-weight: normal;
		}
        .address-text-cityerror{
            margin-top: .3rem;
            font-weight: normal;
            color: #ff4040;
        }
		.selected-wrapper{
			padding:1rem 0;
		}
		.bottom-line {
			position: absolute;
			left: 0;
			bottom: 0;
			right: 0;
			border-bottom:1px dashed #eee
		}
		.bottom-wrapper {
			height: 2.5rem;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: stretch;
			align-items: center;
		}
		.bottom-left-wrapper {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
		}
		.bottom-right-wrapper {
			flex: 1;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: stretch;
		}
		.edit-wrapper {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
		}
		.delete-wrapper {
			margin-right: 0.5rem;
		}
		.subtitle {
			font-size:$subFontSize;
			color: $descTextColor;
			margin: .5rem .5rem .5rem 1rem;
		}
		.subtitle .i{font-size:$h2;margin-right:.5rem;}
		.subtitle .iconfont{font-size: .7rem;}
	}

</style>