cashier_wx/pages/user/address/index.vue

<template>
	<view class="content" >
		<view class="contentitem" v-for="(item,index) in list" :key="index" @click.stop="order_fn(item)">
			<view class="contentitemone flex-start">
				<view class="contentitemone_textone">
					{{item.name}}
				</view>
				<view class="contentitemone_textyow">
					{{item.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')}}
				</view>
			</view>
			<view class="contentitemtow ">
				{{item.province}}{{item.area}}{{item.city}}{{item.address}}
			</view>
			<view class="contentitemthere flex-between">
				<view class="contentitemthereone flex-start" @click.stop="edit(item)">
					<u-icon v-if="item.is_default == 1" style="margin-right: 10rpx;" name="checkmark-circle-fill"
						color="##9397c1" size="18"></u-icon>
					<view v-else class="contentitemthereonecircle">

					</view>
					默认地址
				</view>
				<view class="contentitemtheretow flex-start">
					<text @click.stop="edit(item)">编辑</text>
					<text style="margin-left: 60rpx;" @click.stop="clickdelete(item)">删除</text>
				</view>
			</view>
		</view>
		<view class="positionfixed flex-center" @click="add">
			<u-icon name="plus" color="#FFF" size="24"></u-icon>
			<view style="margin-left: 20rpx;">添加地址</view>
		</view>
		<view v-if="list.length==0 && is_end == true" class="flex-colum">
			<image style="margin-top: 100rpx;" :src="bgnothave" mode="aspectFill">
			</image>
		</view>
		<u-loadmore :status="form.status" />
		<view :style="{height:height}"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgnothave: uni.getStorageSync('bgnothave'),
				height: '',
				is_order: 0,
				list: [],
				is_end: false,
				form: {
					page: 1,
					status: 'loadmore',
				},

			};
		},
		onLoad(e) {
			this.is_order = e.order
		},
		onReachBottom() {
			this.usermyaddresslist()
		},
		
		mounted() {
			var query = uni.createSelectorQuery().in(this).select('.positionfixed')
			query.boundingClientRect(ele => {
				var that = this;
				uni.getSystemInfo({
					success(res) {
						that.height = ele.height + 50 + "px";
						that = null;
					}
				})
			}).exec();
		},
		onShow() {
			// this.inif()
		},
		methods: {
			async usermyaddresslist() {
				let res = await this.api.usermyaddresslist({
					page: this.form.page
				})
				if (res.length == 0) {
					this.is_end = true
					this.form.status = 'nomore'
					return false;
				} else {
					this.form.status = 'loading';
					this.form.page = ++this.form.page;
					setTimeout(() => {
						this.list = [...this.list, ...res];
						if (res.length == 10) {
							this.form.status = 'loading';
						} else {
							this.is_end = true;
							this.form.status = 'nomore';
						}
					}, 500)
				}
			},
			order_fn(item) {
				if (this.is_order == 1) {
					uni.$emit('update', JSON.stringify(item));
					uni.navigateBack({
						delta: 1
					})

				}
			},
			add() {
				uni.pro.navigateTo('my/address/edit', {
					type: 1
				})
			},
			edit(e) {
				uni.pro.navigateTo('my/address/edit', {
					type: 2,
					id: e.id
				})
			},
			inif() {
				this.list = []
				this.is_end = false,
					this.form = {
						page: 1,
						status: 'loadmore',
					},
					this.usermyaddresslist()
			},
			async clickdelete(e) {
				var this_ = this
				uni.showModal({
					title: '提示',
					content: '确认删除该地址吗？',
					async success(data) {
						if (data.confirm) {
							let res = await this_.api.useredeleteaddress({
								id: e.id
							})
							if (res) {
								this_.inif()
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F9F9F9;
	}

	.content {
		padding: 0 30rpx;

		.positionfixed {
			position: fixed;
			background: #f6f6f6;
			width: 80%;
			bottom: 50rpx;
			left: 10%;
			padding: 24rpx 34rpx;
			text-align: center;
			background: var(--bg-color-button);
			border-radius: 46rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}

		.contentitem {
			padding: 32rpx 40rpx;
			margin-top: 24rpx;
			width: 100%;
			background: #ffffff;
			border-radius: 18rpx;

			.contentitemone {
				.contentitemone_textone {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.contentitemone_textyow {
					margin-left: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}

			.contentitemtow {
				margin-top: 12rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}

			.contentitemtow::after {
				display: inline-block;
				content: '';
				margin: 32rpx 0 20rpx 0;
				width: 100%;
				height: 1rpx;
				background: #f6f6f6;
			}

			.contentitemthere {
				.contentitemthereone {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #5C685D;
				}

				.contentitemthereonecircle {
					margin-right: 10rpx;
					border-radius: 50%;
					width: 28rpx;
					height: 28rpx;
					border: 2rpx solid #666666;
				}

				.contentitemtheretow {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}
		}
	}
</style>