ledehui-B/src/packages/order/address-manage.vue

<template>
	<view class="container">
		<Navbar title="收货地址" background-color="#ffffff" color="#333333"></Navbar>
		<view class="list">
			<NoData :show="!isLoad && !addressList.length" topNum="10"></NoData>
			<view v-for="(item, i) in addressList" :key="i" class="address-wrap" @click="selectAddress(item)">
				<view class="top">
					<text class="name">{{ item.name }}</text>
					<text class="phone">{{ item.phone | phoneStatus }}</text>
				</view>
				<text class="detail">
					{{item.province_str + item.city_str + item.county_str}}{{item.address}}
				</text>
				<view class="bottom">
					<view class="default" @click.stop="setDefault(item.id)">
						<!-- <text :class="{ 'icon-red': item.is_default, 'icon-gray': !item.is_default }">
							&#xe645;
						</text> -->
						<view class="default-icon-box">
							<IconText class="default-icon" :color="item.isDefault === 1 ? '#D3325C' : '#D4D4D4'"
								:code="`\ue73f`" size="14"></IconText>
						</view>
						<text class="word12">默认地址</text>
					</view>
					<view class="edit-wrap">
						<view @click.stop="editAddress(item.id)">
							<IconText :code="`\ue758`" size="12" color="#666"></IconText>
							<text class="word12">编辑</text>
						</view>
						<view @click.stop="delAddress(item.id)">
							<IconText :code="`\ue740`" size="12" color="#666"></IconText>
							<text class="word12">删除</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fixed-bottom" @click="createAddress">
			<view class="solid-btn">+ 添加新地址</view>
		</view>
	</view>
</template>

<script lang="ts">
	import {
		Component,
		Prop,
		Vue
	} from 'vue-property-decorator';
	import {
		namespace
	} from 'vuex-class';
	import {
		types
	} from '@/common/store';
	const baseModule = namespace('base');
	@Component({
		filters: {
			phoneStatus(val: string): string {
				val = val + '';
				if (!val) return '';
				return val.substring(0, 3) + '****' + val.substring(7);
			}
		}
	})
	export default class Address extends Vue {
		@baseModule.Mutation(types.SET_ADDRESS) setAddress: any
		addressList: any[] = [];
		isLoad: boolean = false;
		// img: string = this.$oss_url + 'zwdd.png';
		onShow() {
			this.getList();
		}
		getList() {
			uni.showLoading({
				title: '加载中',
			});
			this.isLoad = true;
			this.$http
				.get({
					url: this.$api.addressList,
					data: {}
				})
				.then((res: any) => {
					this.addressList = res.list;
					this.isLoad = false;
					uni.hideLoading();
				}, (err: any) => {
					this.isLoad = false;
					uni.hideLoading();
				});
		}
		delAddress(id: number): void {
			let that = this;
			uni.showModal({
				title: '请再次确认',
				content: '确认删除该地址吗？',
				cancelText: '再看看',
				success: function(res) {
					if (res.confirm) {
						// 设置默认
						that.$http
							.delete({
								url: that.$api.deleteAddress,
								data: {
									id: id
								}
							})
							.then((res: any) => {
								uni.showToast({
									title: '删除成功！',
									icon: 'none'
								});
								that.getList();
							});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
		setDefault(id: number): void {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '确认设置该地址为默认地址？',
				success: function(res) {
					if (res.confirm) {
						// 设置默认
						that.$http
							.put({
								url: that.$api.addressDefault,
								data: {
									id: id
								}
							})
							.then((res: any) => {
								uni.showToast({
									title: '设置成功！',
									icon: 'none'
								});
								that.getList();
							});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
		editAddress(id: any): void {
			this.$Router.push({
				path: '/packages/order/address-detail',
				query: {
					id: id
				}
			});
		}
		createAddress(): void {
			this.$Router.push({
				path: '/packages/order/address-detail'
			});
		}

		selectAddress(item: any) {
			let query = this.$Route.query;
			if (!query.from) return;
			this.setAddress(item);
			this.$Router.back(1);
		}
	}
</script>

<style lang="scss">
	@mixin word14() {
		@include word-vw(14);
	}

	.container {
		background: #F5F5F5;
		height: 100vh;
		@include flex-y();

		.list {
			width: 100%;
			margin-top: vw(1);
			flex: 1;
			overflow-y: auto;
			padding: 0 vw(10);
			box-sizing: border-box;
		}
	}

	.word12 {
		@include word-vw(12) margin-left: 5px;
	}

	.icon-red {
		@include icon(15, #FFDE4C);
	}

	.icon-gray {
		@include icon(15, #EFEFEF);
	}

	.address-wrap {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		padding: $cell-padding;
		box-sizing: border-box;
		background-color: white;
		margin-top: vw(10);
		border-radius: vw(5);

		.top,
		.bottom {
			width: 100%;
			@include flex-x();
		}

		.name {
			@include word14;
			// width: vw(225);
		}

		.phone {
			@include word14;
			// width: vw(120);
			text-align: right;
		}

		.detail {
			width: 100%;
			@include word-vw(12, $gray9);
			padding: 12px 0;
			border-bottom: 1px solid $line-color;
			margin-bottom: 6px;
		}

		.default {
			// width: vw(200);
			@include flex-x(flex-start);

			.default-icon-box {
				@include flex-x(center);

				.default-icon {
					@include flex-x(center);
				}
			}
		}

		.edit-wrap {
			@include flex-x(flex-end);
			// width: vw(145);

			.icon {
				@include icon(14, #8a8a8a);
				margin-left: 10px;
			}
		}
	}

	.fixed-bottom {
		height: vw(60);
		width: 100%;
		background: #fff;
		@include flex-x(center);

		.solid-btn {
			background: $bk-color;
			@include solid-btn(335, 48, #333);
			border-radius: vw(10);
			@include word-vw(14, #fff);
		}
	}
</style>