nk-shop2.0/components/addressWindow/index.vue

<template>
	<view :style="viewColor">
		<view class="address-window" :class="address.address==true?'on':''">
			<view class='title'>收货地址

				<!-- <text class='iconfont icon-guanbi' @tap='close'></text> -->
				<view class="top_img">
					<image src="@/static/images/close.png" mode="aspectFill" @tap='close'></image>
				</view>

			</view>
			<scroll-view scroll-y="true" class='list'>
				<view class='acea-row row-between-wrapper  conent' :class='active==index?"t-color":""'
					v-for="(item,index) in addressList" @tap='tapAddress(index,item.address_id)' :key='index'>
					
					<view class='address'>
						<view class='name' >{{item.real_name}}<text
								class='phone'>{{item.phone}}</text></view>
						<view class='line1'>
							{{item.province}}{{item.city}}{{item.district}}{{item.street || ''}}{{item.brigade}}{{item.detail}}
						</view>
					</view>
					<!-- <text class='iconfont icon-complete' :class='active==index?"t-color":""'></text> -->
					
					<view class="address_img" v-if="active==index">
						<image src="@/static/images/isshow.png" mode="aspectFill"></image>
					</view>
					<view class="address_img" v-if="active!=index">
						<image src="@/static/images/show.png" mode="aspectFill"></image>
					</view>
				</view>
			</scroll-view>
			<!-- 无地址 -->
			<view class='pictrue' v-if="!is_loading && !addressList.length">
				<image src='../../static/images/noAddress.png'></image>
				<view>暂无地址</view>
			</view>
			<view class='addressBnt' @tap='goAddressPages'>新增地址</view>
		</view>
		<view class='mask' catchtouchmove="true" :hidden='address.address==false' @tap='close'></view>
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import {
		getAddressList
	} from '@/api/user.js';
	import {
		mapGetters
	} from "vuex";
	export default {
		props: {
			pagesUrl: {
				type: String,
				default: '',
			},
			address: {
				type: Object,
				default: function() {
					return {
						address: true,
						addressId: 0,
					};
				}
			},
			isLog: {
				type: Boolean,
				default: false,
			},
		},
		computed: mapGetters(['viewColor']),
		data() {
			return {
				active: 0,
				//地址列表
				addressList: [],
				is_loading: true
			};
		},
		methods: {
			tapAddress: function(e, addressid) {
				this.active = e;
				this.$emit('OnChangeAddress', addressid);
			},
			close: function() {
				this.$emit('changeClose');
				this.$emit('changeTextareaStatus');
			},
			goAddressPages: function() {
				this.$emit('changeClose');
				this.$emit('changeTextareaStatus');
				uni.navigateTo({
					url: this.pagesUrl
				});
			},
			getAddressList: function() {
				let that = this;
				getAddressList({
					page: 1,
					limit: 5
				}).then(res => {
					let addressList = res.data.list;
					//处理默认选中项
					for (let i = 0; i < res.data.list.length; i++) {
						if (addressList[i].address_id == that.address.addressId) {
							that.active = i;
						}
					}
					that.$set(that, 'addressList', addressList);
					that.is_loading = false;
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.address-window {
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 101;
		transform: translate3d(0, 100%, 0);
		transition: all .3s cubic-bezier(.25, .5, .5, .9);
	}

	.address-window.on {
		transform: translate3d(0, 0, 0);
	}

	.address-window .title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		height: 123rpx;
		line-height: 123rpx;
		position: relative;

		.top_img {
			position: absolute;
			right: 33rpx;
			top: 20rpx;
			width: 58rpx;
			height: 58rpx;

			image {
				width: 58rpx;
				height: 58rpx;
			}
		}
	}

	.address-window .title .iconfont {
		position: absolute;
		right: 30rpx;
		color: #8a8a8a;
		font-size: 35rpx;
	}

	.address-window .list {
		max-height: 650rpx;
	}

	.address-window .list .item {
		margin-left: 30rpx;
		padding-right: 30rpx;
		border-bottom: 1px solid #eee;
		height: 129rpx;
		font-size: 25rpx;
		color: #333;
	}
	.conent{
		width: 694rpx;
		height: 210rpx;
		background: #FFFFFF;
		margin: 0rpx auto;
		margin-top: 32rpx;
		padding: 28rpx  28rpx;
		box-shadow: 0px 4rpx 14rpx 2rpx rgba(222,233,254,1);
		margin-bottom: 30rpx;
	}



	.address_img{
		width: 52rpx;
		height:  52rpx;
		image{
		width: 100%;
		height: 100%;
		}
	}
	

.conent .name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		
		margin-bottom: 10rpx;
	}

	.conent .name .phone {
		margin-left: 18rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	 .line1{
		font-size: 23rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #737373;
		
	}

	.address-window .addressBnt {
		font-size: 33rpx;
		font-weight: 500;
		color: #fff;
		width: 690rpx;
		height: 86rpx;
		border-radius: 43rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 85rpx auto;
		background: linear-gradient(270deg, #6DD5FA 0%, #3274F9 100%);
	}

	.address-window .pictrue {
		text-align: center;
	}

	.address-window .pictrue image,
	.address-window .pictrue uni-image {
		width: 414rpx;
		height: 305rpx;
	}

	.address-window .pictrue view {
		color: #999;
	}

	.t-color {
		color: var(--view-theme) !important;
	}
</style>