uniapp-qxk/packages/address/address.vue

<template>
	<view style="flex-direction: column;">
		<scroll-view class="scroll-view" :scroll-y="true">
			<view class="addressItem" v-for="(item, index) in addressList" :key="item.id" @click="selectAddress(item)">
				<view class="addressItemTop">
					<text class="addrName">{{ item.name }}</text>
					<text class="addrTel">{{ item.tel }}</text>
				</view>
				<text class="addr">{{ item.desc }}</text>
				<view class="line"></view>
				<view class="optionsPanel">
					<radio-group @change="radioChange" @click.stop>
						<label>
							<radio :value="item.id" :checked="item.default == 1" color="#e7a23f"></radio>
							<text>设置为默认地址</text>
						</label>
					</radio-group>
					<view class="rightPanel">
						<image class="optionsBtn" src="../../static/删除.png" @click.stop="remove(item.id)"></image>
						<image class="optionsBtnEdit" src="../../static/编辑.png" @click.stop="$url('/packages/addAddress/addAddress?id='+ item.id)"></image>
					</view>
				</view>
				<view style="height: 30rpx;background-color: #F6F6F6;"></view>
			</view>
		</scroll-view>
		<view class="addNewAddr" @click="$url('/packages/addAddress/addAddress')">
			<text>+ 新增收获地址</text>
		</view>
	</view>
</template>

<script>
	import { address, setDefaultAddress, deleteAddress } from '@/service/address.js';
	
	export default {
		data() {
			return {
				addressList: [],
				is_select: false,
			}
		},
		onLoad(options){
			this.is_select = Boolean(Number(options.is_select || '0'));
			if(this.is_select){
				uni.setNavigationBarTitle({
					title: '请选择一个地址'
				})
			}
		},
		onShow(){
			// todo 接口排序问题，切换默认地址时
			this.addressList = [];
			this.getUserAddress();
		},
		methods: {
			async getUserAddress(){
				let res = await address();
				this.addressList = res.data.datas;
			},
			// 切换默认地址
			radioChange(event){
				let id = event.detail.value;
				uni.showLoading({
					title: '切换默认地址'
				})
				setDefaultAddress(id).then(res => {
					uni.hideLoading();
					this.addressList.forEach(item => {
						if(item.id === id){
							item.default = 1;
						}else{
							item.default = 0;
						}
					});
				}).catch(err => uni.hideLoading());
			},
			remove(id){
				uni.showModal({
					title: '提示',
					content: '您确定删除该地址吗？',
					success: async result => {
						if(result.confirm){
							await deleteAddress(id);
							this.$msg('删除成功', {icon: 'success'});
							this.getUserAddress();
						}
					}
				})
			},
			selectAddress(item){
				if(!this.is_select) return;
				let pages = getCurrentPages();
				let page = pages[pages.length - 2]; // 访问上一个页面
				page.$vm.address = item; // 将选中的地址赋值回去
				this.$toBack();
			}
		}
	}
</script>

<style scoped class="scss">
/deep/view{
	display: flex;
	background-color: #FFFFFF;
}

.scroll-view{
	height: calc(100vh - 200rpx);
}
	
.checkBtn{
		width: 44rpx;
		height: 44rpx;
		margin-right: 14rpx;
	}
	.addressItemTop{
		align-items: center;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.addressItem{
		flex-direction: column;
	}
	.line{
		height: 1rpx;
		background-color: #D8D8D8;
		margin-left: 32rpx;
		margin-right: 32rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.addrName{
		margin-left: 32rpx;
		font-size: 36rpx;
		font-weight: bold;
		margin-right: 40rpx;
	}
	.addr{
		margin-left: 32rpx;
	}
	.optionsPanel{
		margin-left: 32rpx;
		margin-bottom: 40rpx;
		align-items: center;
		justify-content: space-between;
	}
	.rightPanel{
		align-items: center;
		justify-content: center;
		margin-right: 32rpx;
	}
	.optionsBtn{
		width: 44rpx;
		height: 44rpx;
		margin-right: 50rpx;
	}
	.optionsBtnEdit{
		width: 38rpx;
		height: 38rpx;
	}
	.addNewAddr{
		height: 96rpx;
		/* width: 90%; */
		width: 686rpx;
		border: #E7A23F 2rpx solid;
		border-radius: 8rpx;
		position: fixed;
		bottom: 100rpx;
		left: calc(50% - 343rpx);
		justify-content: center;
		align-items: center;
		align-self: center;
		color: #E7A23F;
	}
	
</style>