xk-client-wx/subPackages/setup/area-list.vue

<template>
	<view class="container safe-area-inset-bottom">
		<MessageNotification />
		<view class="none" v-if="actionList.length == 0">
			<!-- 暂无收货地址 -->
			<view class="conter">
				<image src="https://xiaokang88.oss-cn-hangzhou.aliyuncs.com/xk-client-wx/static/empty/wddz.png" mode=""></image>
				<text class="word">暂无收货地址！</text>
			</view>
		</view>

		<!-- 收货信息 -->
		<view class="card">
			<view class="list" v-for="(item, index) in actionList" :key="item.id" @click="toChoose(item.id)">
				<view class="title">
					<view class="info">收货信息</view>
					<text class="iconfont icon-guanbi" @click.stop="deleList(item.id)"></text>
				</view>
				<view class="name">{{ item.name }} {{ item.mobile_tm || item.mobile }}</view>
				<view class="name">{{ item.region }}{{ item.detail_address }}</view>

				<!-- 默认发货信息  -->
				<view class="default">
					<view class="status">
						<label :class="active == item.id ? 'active' : 'radio'">
							<radio :checked="active == item.id || item.is_default == 1" :value="item.id"
								@click="onChange(item.id)" color="#1777FF" />
							{{ active == item.id || item.is_default == 1 ? detailed : detail }}
						</label>
					</view>
					<view class="eidt_btn" @tap.stop="editList(item.id)">修改</view>
				</view>
			</view>
		</view>

		<!-- 新增地址 -->
		<view class="footer" @click="addList">
			<view class="text">
				<text class="iconfont icon-jia"></text>
				新增地址
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getaddressDel,
		getaddressList,
		getDelivery,
		getDefault
	} from '../../request/api/api';
	export default {
		data() {
			return {
				// 空白页
				showList: false,
				infoList: [], // 列表
				id: 0, // 处方id
				actionList: [], // 列表,
				num: 1,
				active: null, // 选中的序号
				checked: false,
				detail: '默认', // 默认
				detailed: '默认发货信息', // 默认发货信息
				type: '',
				order_id: "", // 订单id
			};
		},
		onLoad(e) {
			// console.log(e,'cf');
			this.id = e.id
			this.type = e.type
			this.order_id = e.order_id
		},
		methods: {
			addList() {
				uni.navigateTo({
					url: '/subPackages/setup/choose-area'
				});
			},
			// //选择当前地址
			CheckedAdd() {
				uni.$emit('addressList', JSON.stringify(this.actionList))
				uni.setStorageSync('addList', this.actionList)
				uni.navigateBack({
					delta: 1
				});
			},
			// 默认
			onChange(e) {
				// console.log(e, 'eeeee');

				if (this.active == e) {
					// 如果已经选中，则取消选中
					this.active = null;
				} else {
					// 否则进行选中赋值
					this.active = e;
				}

				let list = {
					id: this.active,
					store_id: uni.getStorageSync('store_id') || '11001',
				};
				getDefault({
					method: 'post',
					data: list
				}).then(res => {
					// console.log(res, 'aa');
					uni.showLoading({
						title: '加载中'
					});

					setTimeout(() => {
						uni.hideLoading();

						this.getList();
					}, 1300);
				});
			},
			// 更新地址
			toChoose(e) {
				uni.setStorageSync('address_id', e)
				if (this.type == 1) {
					this.CheckedAdd()
				} else {
					if(this.order_id){
						// 订单过来
						getDelivery({
							method: "post",
							data: {
								order_id: this.order_id,
								address_id: e,
								delivery_method: 0,
								store_id: uni.getStorageSync('store_id') || '11001',
							}
						}).then((res) => {
							if (res.data.errcode == 0) {
								uni.showLoading({
									title: "加载中"
								});
						
								setTimeout(() => {
									uni.hideLoading();
									this.getList();
						
									uni.navigateBack({
										delta: 1
									});
						
								}, 1300)
							}
						})
					}
					
				}
			},
			// 地址列表
			getList() {
				getaddressList({
					method: 'post',
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
					}
				}).then(res => {
					// console.log(res, 'list');
					if (res.data.errcode == 0) {
						this.actionList = res.data.data;
					}
				});
			},

			// 删除
			deleList(e) {
				let list = {
					id: e,
					store_id: uni.getStorageSync('store_id') || '11001',
				};
				getaddressDel({
					method: 'post',
					data: list
				}).then(res => {
					if (res.data.errcode == 0) {
						uni.showLoading({
							title: '加载中'
						});

						setTimeout(() => {
							uni.showToast({
								title: '删除成功',
								duration: 1500,
								mask: false,
								icon: 'success'
							});
							uni.hideLoading();

							this.getList();
						}, 1300);
					} else if (res.data.errcode != 0) {
						uni.showToast({
							title: '删除失败',
							icon: 'error',
							duration: 1500,
							mask: false
						});
					}
				});
			},

			// 修改
			editList(e) {
				uni.navigateTo({
					url: '/subPackages/setup/choose-area?id=' + e
				});
			}
		},
		mounted() {
			this.getList();
		},
		onShow() {
			this.getList();
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		background: #f8fafc;
		padding-bottom: env(safe-area-inset-bottom);

		.none {
			width: 750rpx;

			.conter {
				width: 400rpx;
				height: 409rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin: 0rpx auto 380rpx;

				image {
					width: 300rpx;
					height: 223rpx;
					vertical-align: middle;
				}

				.word {
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #6c7380;
					line-height: 33rpx;
					margin: 32rpx 0;
				}
			}
		}

		.card {
			width: 750rpx;
      height: 85vh;
      overflow: auto;

			.list {
				margin: 0rpx auto 25rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				background: #ffffff;
				padding: 24rpx 36rpx;

				.title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 10rpx;

					.info {
						font-size: 20rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #ffffff;
						background: #4175ee;
						padding: 8rpx 16rpx;
						border-radius: 32rpx;
					}

					.iconfont {
						font-size: 26rpx;
						color: #666666;
					}
				}

				.name {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #475569;
					margin: 10rpx 0;
				}

				.default {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 10rpx 0;

					.status {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #4175ee;

						.radio {
							color: #999999;
						}

						.active {
							color: #4175ee;
						}
					}

					.eidt_btn {
						width: 98rpx;
						height: 50rpx;
						text-align: center;
						line-height: 45rpx;
						border: 2rpx solid #4175ee;
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #4175ee;
					}
				}
			}
		}

		.footer {
      margin-top: 500px;
			width: 750rpx;
			height: 120rpx;
			position: fixed;
			left: 0;
			bottom: env(safe-area-inset-bottom);
			padding: 12rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;

			.text {
				width: 686rpx;
				height: 86rpx;
				font-size: 32rpx;
				line-height: 86rpx;
				text-align: center;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #ffffff;
				background: #1777ff;
				border-radius: 64rpx;

				.iconfont {
					margin-right: 16rpx;
					font-size: 28rpx;
					vertical-align: middle;
				}
			}
		}
	}
</style>