front/pages/user/address/list.vue

<template>
	<view class="padding-lr-sm padding-bottom-big margin-bottom ft-main bg-drak" v-if="fetch">
		<use-tabbar :tabbar="false"></use-tabbar>
		<u-empty v-if="fetch && fetch.list && fetch.list.length <= 0" marginTop="200" mode="data"></u-empty>
		<view v-else>
			<view class="bg-main padding-top padding-lr-sm border-radius margin-top-sm"
				v-for="(item, index) in fetch.list" :key="index" @click="selectAddr(item)">
				<view class="w-full dflex-wrap-w border-line">
					<view class="fwb margin-bottom-xs desc">
						<text>{{ item.area_string }} {{ item.address }}</text>
					</view>
					<view class="margin-bottom-sm">
						<text>{{ item.name }}</text>
						<text class="margin-left">{{ item.phone }}</text>
					</view>
				</view>
				<view class="dflex-b">
					<view v-if="item.type == 1" class="dflex active">
						<text class="iconfont iconxuanzhongzhuangtai padding-tb-sm padding-right-sm"></text>
						<text> 默认地址</text>
					</view>
					<view v-else class="dflex ft-dark" @tap.stop="setDefault(item)">
						<text class="iconfont iconweixuanzhongzhuangtai padding-tb-sm padding-right-sm"></text>
						<text> 设为默认</text>
					</view>
					<view class="dflex">
						<view class="padding-tb-sm padding-right-sm" @tap.stop="add(item.id)"><text
								class="iconfont iconbianji-01 ft-dark"></text></view>
						<view class="padding-tb-sm padding-left-sm" @tap.stop="del(item)"><text
								class="iconfont iconlajitong-01 ft-dark"></text></view>
					</view>
				</view>
			</view>
		</view>

		<view class="btn-container dflex-b pos-f border-radius-big">
			<view v-if="is_mp" class="tac padding-tb-sm flex1 bg-main" @click="importAddr">导入地址</view>
			<view class="tac padding-tb-sm flex1 bg-base" @click="add(-1)">添加地址</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fetch: {
					list: [],
				},
				is_mp: false,
				id: 0,
				refer: '',
			};
		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id;
			}
			if (option.refer) {
				this.refer = option.refer;
				this.Dever.data('address_refer', this.refer);
			} else {
				this.refer = ''
			}
		},
		onUnload() {
		  this.Dever.data('address_refer', 'del');
		},
		onShow() {
			this.loadData(1);
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData(1);
		},
		//加载更多
		onReachBottom() {
			this.loadData(2);
		},
		methods: {
			loadData(page) {
				this.DeverApi.page([page, 'list'], this, 'address.list', {
					id: this.id
				});
			},
			setDefault(item) {
				this.Dever.confirm('确认设置为默认地址吗？', r => {
					this.DeverApi.post('address.setDefault', {
						id: item.id
					}, res => {
						this.loadData(1);
					});
				})
			},
			del(item) {
				this.Dever.confirm('确认删除该地址吗？', r => {
					this.DeverApi.post('address.delete', {
						id: item.id
					}, res => {
						this.loadData(1);
					});
				})
			},
			add(id) {
				var url = 'user/address/add?id=' + id;
				if (id == -1 && this.Dever.data('address_refer')) {
					url += '&temp=1';
				}
				this.Dever.location(url);
			},
			selectAddr(item) {
				this.refer = this.Dever.data('address_refer');
				if (this.refer) {
					if (this.refer == 'order/create') {
						var options = this.Dever.data('detail');
						options.address_id = item.id;
						this.Dever.data('detail', options);
					}
					this.Dever.data('address_refer', 'del');
					this.Dever.location(this.refer, 'go');
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	.desc {
		font-size: $font-lg;
	}

	.btn-container {
		left: 20rpx;
		right: 20rpx;
		bottom: 20rpx;
	}
</style>