CBB3/pages/user/address/address.vue

<template>
	<view class="app">
		<view class="app-items">
			<view class="item"  @tap="clickView(item)" v-for="(item,index) of addList" :key="index">
				<view class="fx-r">
					<view class="name">{{ item.name }}</view>
					<view class="tag" v-if="item.status == 1">默认地址</view>
				</view>
				<view class="fx-r fx-bc">
					<view class="address">{{item.province}}{{item.city}}{{item.area}}{{item.address}}</view>
					<view class="edit" @tap="editClick(item.id)"><image src="/static/img/edit.png"></image></view>
				</view>
				<view class="mobile">{{mobileTap(item.tel)}}</view>
				
				<view class="item-foot fx-r">
					<view class="default fx-r fx-bc"  @tap="set_default_address(item.id,index)">
						<image src="/static/img/radio_buttons_btn.png" v-if="item.status == 1"></image>
						<image src="/static/img/radio_buttons.png" v-else></image>
						默认地址
					</view>
					<view class="fx-g1"></view>
					<view class="del" @tap="del_address(item.id,index)">删除</view>
				</view>
				
			</view>
		</view>
		<view class="foot" style="height: 40px;"></view>
		<view class="foot-wiget">
			<view class="foot-btn fx-r fx-bc fx-ac" @tap="addClick"><image src="/static/nimg/address-add.png"></image>新增地址</view>
		</view>
	
	</view>
</template>

<style lang="scss">
	.app {
		padding: 10px;
		.app-items{
			.item{
				background: #fff;
				border-radius: 10px;
				padding: 10px 15px;
				margin-bottom: 10px;
				.name{color: #333;font-size: 16px;font-weight: 600;}
				.tag{background: rgba(1, 149, 96, 0.1);font-size: 12px;color: #db292b;padding: 2px 6px;margin-left: 4px;border-radius: 4px;}
				.address{width: calc(100% - 20px);color: #333;font-size: 14px;padding: 4px 0;}
				.edit{width: 16px;height: 16px;image{width: 100%;height: 100%;}}
				.mobile{color: #919191;font-size: 14px;margin: 4px 0;}
				.default{
					color: #727272;
					font-size: 14px;
					image{width: 14px;height: 14px;margin-right: 4px;}
				}
				.del{color: #727272;font-size: 14px;}
			}
		}
		.foot-wiget{
			position: fixed;
			bottom: 10px;
			left: 10px;
			width: calc(100% - 20px);
			.foot-btn{
				background: #db292b;
				image{width: 15px;height: 15px;margin-right: 6px;}
				border-radius: 25px;
				padding: 14px 0;
				color: #FFF;
			}
		}
		
	}
</style>
<script>
	export default {
		data() {
			return {
				addList:[],
				type  : ""
			}
		},
		onShow() {
			this.initView();
		},
		onLoad(options) {
			this.type = options.type || '';
		},
		methods: {
			/**
			 * 地址栏目
			 */
			initView:function(){
				this
					.request
					.post("userAddress")
					.then(res=>{
						if(res.code == 200) {
							this.addList = res.data;
						}
					})
					.catch(err=>{
						this.utils.Tip("网络错误，请稍后尝试");
					});
			},
			// 设置默认地址
			set_default_address(id,index){
				this.utils.loadIng("提交中..");
				this
					.request
					.post("userAddressDeflault",{id:id})
					.then(res=>{
						uni.hideLoading();
						if(res.code == 200) {
							this.addList.forEach((v,k)=>{
								if(index == k){
									v.status = 1;
								}else{
									v.status = 0;
								}
							})
						}
					})
					.catch(err=>{
						uni.hideLoading();
						this.utils.Tip("网络错误，请稍后尝试");
					});
			},
			// 删除地址
			del_address(id,index){
				uni.showModal({
					title:"提示",
					content:"确认删除该地址吗？",
					success: (res) => {
						if(res.confirm){
							this.utils.loadIng("提交中...");
							this
								.request
								.post("userAddressDel",{id:id})
								.then(res=>{
									uni.hideLoading();
									if(res.code == 200) {
										this.addList.splice(index,1);
									}
								})
								.catch(err=>{
									uni.hideLoading();
									this.utils.Tip("网络错误，请稍后尝试");
								});
						}
					}
				})
			},
			// 编辑地址
			editClick(id){
				uni.navigateTo({
					url:`/pages/user/address/add/add?id=${id}`
				})
			},
			mobileTap(str1){
				let reg = /^(\d{3})\d*(\d{4})$/;
				return str1.replace(reg,'$1****$2')
			},
			addClick(){
				uni.navigateTo({
					url:`/pages/user/address/add/add`
				})
			},
			
			clickView:function(item) {
				if(this.type == 'select') {
					uni.$emit("selectAddress",{addressId:item.id});
					uni.navigateBack();
				}
			}
		},
		
	}
</script>