weapp-v1/pages/address/address.vue

<template>
	<view class="address">
		<custom-nav :title="pageTitle"></custom-nav>
		<custom-toast ref='toast'></custom-toast>
		<view class="content">
			<view class="default">
				<view class="title">{{ list.length ? '当前选择的收件人信息' : '您还没有添加收货地址'}}</view>
				<view class="info">
					<view class="name-tel" v-if="list.length">
						<text class="name">{{ choosedAddress.name }}</text>
						<text class="tel">{{ choosedAddress.tel }}</text>
					</view>
					<view class="address1">{{ address1 }}</view>
					<view class="address2">{{ address2 }}</view>
					<button hover-class="hover" class="addAddress" @tap="toaddaddress">+ 新增地址</button>
				</view>
			</view>
			<view class="list" v-if="list.length">
				<view class="item" v-for="(item, index) in list" :key="item.id" @tap="tap(index)" :style="{ color: item.id === choosedAddress.id ? '#000000' : '#999999' }">
					<text class="icon" :class="item.id === choosedAddress.id ? 'cuIcon-roundcheckfill' : 'cuIcon-roundcheck'"></text>
					<view class="name-tel">
						<text class="name">{{ item.name }}</text>
						<text class="tel">{{ item.tel }}</text>
					</view>
					<view class="item-address">{{ item.address }}</view>
				</view>
			</view>
			<view class="set" @tap="set" v-if="list.length">{{ pageTitle === '地址选择' ? '选择地址' : '设为默认' }}</view>
		</view>
	</view>
</template>

<script>
	import { api_getAddress } from '../../api.js'  //添加地址接口
	import { api_setDefaultAddress } from '../../api.js'  //修改默认地址接口
	export default {
		data() {
			return {
				pageTitle: '',  //导航栏名字
				list: [],  //地址列表
				index: 0  //当前选中地址下标
			};
		},
		computed: {
			choosedAddress () {  //当前选中地址对象
				return this.list[this.index]
			},
			address1 () {
				return this.choosedAddress ? this.choosedAddress.address.split('-')[0] : ''
			},
			address2 () {
				return this.choosedAddress ? this.choosedAddress.address.split('-')[1] : ''
			}
		},
		methods: {
			tap (index) {  //切换地址
				this.index = index
			},
			toaddaddress () {
				uni.navigateTo({
					url: '../addressadd/addressadd'
				})
			},
			set () {  //点击提交按钮
				if (this.pageTitle === '地址管理') {  //如果是地址管理模式，就是为了修改默认地址
					if (+this.choosedAddress.status) {  //检查当前地址是否是默认地址
						this.$refs.toast.hover('当前地址已是默认地址')
					} else {  //如果当前地址不是默认地址
						this.$ajax.get(`${api_setDefaultAddress}?id=${this.choosedAddress.id}`).then(([ , res]) => {  //发请求
							if (res.data.code === 200) {
								this.$refs.toast.hover('设置成功')
								this.list.forEach(e => e.status = 0)  //先遍历所有地址对象将其状态设置为非默认地址
								this.list[this.index].status = 1  //将设置成功的下标对应地址对象的为默认地址
							} else {
								this.$refs.toast.hover('设置失败')
							}
						})	
					}
				} else if (this.pageTitle === '地址选择') {  //如果是地址选择模式，就是为了选择收货地址
					getApp().globalData.choosedAddress = this.list[this.index]  //将选择的地址对象放在 globalData 里以用来传给商品详情页
					uni.$emit('MESSAGE', '地址选择成功', 2345, 'bottom')  //提示地址选择成功
					uni.navigateBack()
				}
			},
		},
		onShow () {  //在页面展示时，发请求获取地址列表（为了在添加地址之后实时更新地址列表）
			uni.showLoading({ title: '加载中', mask: true })
			this.$ajax.get(api_getAddress).then(([ , { data: res}]) => {
				this.$hideLoading()
				if (res.code === 200) {
					this.list = res.data.list
					this.list.forEach((e, i) => {
						if (e.status === 1) {
							this.index = i
						}
					})
				} else {
					this.$refs.toast.hover('获取地址失败')
				}
			})
		},
		created () {  //加载完成后开启监听全局 MESSAGE 事件
			uni.$on('MESSAGE', (m, d, p) => {  //m 要提示的文字信息  d 文字信息出现的时常  p 文字信息出现的位置
				this.$refs.toast.hover(m, d, p)
			})
		},
		onLoad(opt) {  //根据进入页面时传的值确定用户从那个页面进入当前页面，并作出不同的展示
			if (opt.from === 'detail') {
				this.pageTitle = '地址选择'
			} else {
				this.pageTitle = '地址管理'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address {
		@include page();
		.content {
			background: $custom-nav-borderbot-color;
			.default {
				border-top: 10rpx solid $custom-nav-borderbot-color;
				background: #FFFFFF;
				.title {
					width: auto;
					color: #333333;
					font-size: 36rpx;
					margin: 36rpx 0 0 20rpx;
					padding-left: 20rpx;
					border-left: 6rpx solid #FA6342;
				}
				.info {
					border: 40rpx solid #FFFFFF;
					.name-tel {
						font-size: 30rpx;
						margin-bottom: 14rpx;
						.tel {
							font-size: 26rpx;
							margin-left: 8rpx;
							color: #AAAAAA;
						}
					}
					.address1, .address2 {
						font-size: 28rpx;
						margin-bottom: 8;
					}
					.addAddress {
						width: 200rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						font-size: 30rpx;
						color: #F86541;
						border: 2rpx solid rgba(250,99,66,1);
						border-radius: 30rpx;
						padding: 0;
						margin: 30rpx 0 0;
						background: #FFFFFF;
					}
					.hover {
						background: #F86541;
						color: #FFFFFF;
					}
				}
			}
			.list {
				box-sizing: border-box;
				padding: 0 40rpx;
				margin-top: 20rpx;
				background: #FFFFFF;
				.item {
					box-sizing: border-box;
					height: 150rpx;
					border-bottom: 1rpx solid $custom-nav-borderbot-color;
					padding: 31rpx 0;
					color: #BBBBBB;
					.name-tel {
						height: 47rpx;
						line-height: 47rpx;
						font-size: 30rpx;
						.tel {
							font-size: 26rpx;
							margin-left: 8rpx;
						}
					}
					.item-address {
						height: 40rpx;
						line-height: 40rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}
					.icon {
						float: right;
						font-size: 36rpx;
						line-height: 87rpx;
						&.cuIcon-roundcheck {
							color: #BBBBBB!important;
						}
						&.cuIcon-roundcheckfill {
							color: #FA6342!important;
						}
					}
				}
			}
			.set {
				width: 400rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				background: rgba(250,99,66,1);
				color: #FFFFFF;
				margin: 138rpx auto 0;
				box-shadow: 0px 2rpx 4rpx 0px rgba(51,51,51,0.15);
				border-radius: 35rpx;
			}
		}
	}
</style>