H5-ThreeDoorder/pages/diy/addresslis/addresslis.vue

<template>
	<view class="content">
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption">
			<template v-for="(item,index) in list">
				<add-address :item="item" @choice="choice"></add-address>
			</template>
		</mescroll-uni>

		<navigator url="/pages/diy/addposition/addposition" hover-class="none">
			<button class="button_7" style="position: fixed;z-index: 100000;">
				<text lines="1" class="text_17">添加新地址</text>
			</button>
		</navigator>
	</view>
</template>

<script>
	import {
		mapActions,
		mapGetters,
		mapMutations
	} from 'vuex';
	import {
		createEditAddressAPI,
		delAddressAPI,
		addressListAPI
	} from '@/request/diy/index.js';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	let self;
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				value: '',
				list: [],
				downOption: {
					autoShowLoading: true
				},
				// 上拉加载数据
				upOption: {
					textNoMore: '没有更多了'
				}
			}
		},
		onLoad() {
			self = this;
		},
		onShow() {
			this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页  
			this.canReset && this.mescroll.scrollTo(0, 0) // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题  
			this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
		},
		computed: {
			...mapGetters('diy', ['GetList']),
		},
		methods: {
			// 获取地址列表
			upCallback(pageData) {
				addressListAPI({
					page: pageData['num']
				}).then(res => {
					console.log(res);
					if (pageData['num'] == 1) {
						this['list'] = [];
					}
					this['list'] = res['data']['data'];
					// 当前返回数据总数
					const curPageLen = res['data']['data']['length'];
					// 当前最大页数
					const totalPage = res['data']['last_page'];
					// 隐藏下拉刷新
					this.mescroll.endByPage(curPageLen, totalPage);
				});
			},
			...mapMutations('diy', ['SetTaddress']),
			// 点击选择的地址
			choice(item) {
				uni.$emit('upArea',item)
				uni.navigateBack({
					delta: 1
				});
			},

			/**
			 * @删除
			 * */
			delAddress(add_id) {
				delAddressAPI({
					add_id
				}).then(res => {
					uni.showToast({
						title: '删除成功',
						success: () => {
							this['page'] = 1;
							self.GetAreaLisr();
						}
					})
				})
			},
			/**
			 * @编辑
			 * */
			bianji(item) {
				uni.navigateTo({
					url: `/pages/orders/addposition/addposition?add_id=${item['add_id']}`
				})
			}
		},
		onReachBottom() {
			if (this['list']['data']['length'] >= this['total']) return;
			self.GetAreaLisr();
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F5F5F5 !important;
	}

	/deep/ .u-radio-group,
	.u-clearfix {
		width: 100%;
	}

	.content {
		padding-bottom: 88rpx;
	}

	.address-item {
		background-color: #ffffff;
		padding: 20rpx;
		margin-top: 20rpx;
		width: 100%;

		&-choice {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;

			&-btn {
				width: 132rpx;
				height: 64rpx;
				text-align: center;
				line-height: 64rpx;
				font-size: 24rpx;
				border: 1rpx solid #DEDEDE;
				border-radius: 50rpx;
				margin: 0 20rpx;
			}
		}

		&-infor {
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);

			&-name {
				color: #333333;
				font-size: 28rpx;
				line-height: 50rpx;

				.n {
					font-size: 24rpx;
					color: #999999;
					margin-left: 20rpx;
				}
			}

			&-area {
				color: #999999;
				font-size: 24rpx;
				line-height: 50rpx;
			}
		}
	}

	.button_7 {
		position: fixed;
		bottom: 32rpx;
		left: 50%;
		transform: translateX(-50%);
		background-image: linear-gradient(90deg, rgba(255, 173, 2, 1.000000) 0, rgba(253, 143, 59, 1.000000) 100.000000%);
		border-radius: 19rpx;
		align-self: center;
		margin-top: -2rpx;
		display: flex;
		flex-direction: column;
		width: 704rpx;
		padding: 25rpx 294rpx 23rpx 290rpx;
	}

	.text_17 {
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 23rpx;
		font-family: PingFangSC-Semibold;
		text-align: center;
		white-space: nowrap;
		line-height: 33rpx;
	}
</style>