kailin_mp/pages/addr/index.vue

<template>
	<view>
		<view class="to_bottom" v-if="!addrList.length">-----还没有地址啦-----</view>
		<view class="addr_list">
			<view class="addr_item" v-for="(item, index) in addrList" :key="index">
				<view class="contact_user">
					<text class="contact_name">{{ item.contact_name }}</text>
					<text class="contact_phone">{{ item.contact_phone }}</text>
					<text class="contact_shop">{{ item.contact_shop }}</text>
				</view>
				<view class="contact_addr">{{ item.contact_province }} {{ item.contact_city }} {{ item.contact_area }} {{ item.contact_addr }}</view>
				<view class="contact_handler">
					<view class="radio_label" @click="setDefault(index)">
						<image class="radio_icon" :src="item.is_default ? '../../static/icon/radioed.png' : '../../static/icon/radio.png'"></image>
						<text :class="item.is_default ? 'radioed_text' : ''">{{ item.is_default ? '已默认' : '设为默认' }}</text>
					</view>
					<view class="addr_right_btn" @click="removeAddr(index)">删除</view>
					<view class="addr_right_btn" @click="openForm(item)">编辑</view>
				</view>
			</view>
		</view>
		<view class="create_box">
			<button class="create_addr" @click="openForm()">新建收货地址</button>
		</view>
		<view class="to_bottom" v-if="isLast">-----到底啦-----</view>
		<uni-popup ref="addrForm" type="bottom" class="popup" background-color="#FFFFFF" @change="popupChange">
			<view class="contact_addr_form">
				<!-- 地区代表表单 -->
				<form class="info_form">
					<view class="form_group">
						<view class="group_title">收货人：</view>
						<view class="group_box">
							<input type="text" class="form_ctrl" placeholder="请输入收件人" maxlength="20" required="" v-model="addrRequest.contact_name" />
						</view>
					</view>
					<view class="form_group">
						<view class="group_title">手机号：</view>
						<view class="group_box">
							<input type="text" class="form_ctrl" placeholder="请输入手机号" maxlength="11" required="" v-model="addrRequest.contact_phone" />
						</view>
					</view>
					<view class="form_group">
						<view class="group_title">店铺名称：</view>
						<view class="group_box">
							<input type="text" class="form_ctrl" placeholder="请输入店铺名称" maxlength="20" required="" v-model="addrRequest.contact_shop" />
						</view>
					</view>
					<view class="form_group">
						<view class="group_title">终端类型：</view>
						<view class="group_box">
							<radio-group @change="handleRadioChange" class="terminalType_radio">
								<block v-for="item in terminalType" :key="item.key">
									<radio :value="item.key" :checked="item.key === addrRequest.shop_type">{{ item.label }}</radio>
								</block>
							</radio-group>
						</view>
					</view>
					<view class="form_group">
						<view class="group_title">所在地区：</view>
						<view class="group_box">
							<picker mode="multiSelector" class="form_ctrl" :range="cityArray" @columnchange="cityChange" @change="cityFinish">
								<view class="area_text">
									<text v-if="addrRequest.contact_province">{{ addrRequest.contact_province }}</text>
									<text v-if="addrRequest.contact_city">/{{ addrRequest.contact_city }}</text>
									<text v-if="addrRequest.contact_area">/{{ addrRequest.contact_area }}</text>
								</view>
							</picker>
						</view>
					</view>
					<view class="form_group">
						<view class="group_title">详细地址：</view>
						<view class="group_box">
							<input type="text" class="form_ctrl" placeholder="请输入详细地址:街道/小区/门牌号" maxlength="64" required="" v-model="addrRequest.contact_addr" />
						</view>
					</view>
					<view class="form_group">
						<view class="group_title">设为默认</view>
						<view class="group_box">
							<switch color="#E03519" style="transform: scale(0.6); float: right" @change="defaultSwitch" :checked="addrRequest.is_default ? true : false" />
						</view>
					</view>
					<button class="submit_btn" @click="saveAddr">保存地址</button>
				</form>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { getProvinces, getMyCity, getAreas } from '../../utils/city';
export default {
	data() {
		return {
			// 产品列表
			addrList: [],
			// 请求参数
			requestParam: {
				page: 1,
				status: 0
			},
			// 保存地址
			addrRequest: {
				id: 0,
				contact_name: '',
				contact_phone: '',
				contact_province: '',
				contact_city: '',
				contact_area: '',
				contact_addr: '',
				contact_shop: '',
				is_default: 0,
				shop_type: 1
			},
			// 是否最后一页
			isLast: false,
			// 是否请求中
			isReqing: false,
			// 所在地区
			cityArray: [[], [], []],
			cityValue: [0, 0, 0],
			// 自动弹出
			autoShowForm: false,
			// 异步通知
			AddrEmit: false,
			//终端类型
			terminalType: [
				{ key: 1, label: '单店' },
				{ key: 2, label: '连锁' },
				{ key: 3, label: '第三终端' }
			]
		};
	},
	onLoad(param) {
		this.AddrEmit = param.notify == 'addr' ? true : false;
		this.autoShowForm = param.type == 'create' ? true : false;
		// 获取列表
		this.getList();
	},
	onReady() {
		if (this.autoShowForm) {
			var that = this;
			// 500毫秒后自动弹出
			setTimeout(function () {
				that.openForm();
			}, 500);
		}
	},
	onShow() {
		// 替换对应的数据
		this.cityArray.splice(0, 1, getProvinces());
		this.cityArray.splice(1, 1, getMyCity(this.cityValue[0]));
		this.cityArray.splice(2, 1, getAreas(this.cityValue[0], this.cityValue[1]));
		// 默认地址
		this.addrRequest.contact_province = this.cityArray[0][this.cityValue[0]];
		this.addrRequest.contact_city = this.cityArray[1][this.cityValue[1]];
		this.addrRequest.contact_area = this.cityArray[2][this.cityValue[2]];
	},
	methods: {
		// 获取列表
		getList() {
			// 登录提示
			if (!this.$checkAccess.alterLogin()) return;
			// 判断数据
			this.$http.request('api/custom_addr/get_list').then((callback) => {
				// 获取成功
				if (callback.code == 'success') {
					this.addrList = callback.data;
					// 通知地址变更
					if (this.AddrEmit) uni.$emit('addr_list_change', { list: this.addrList });
				}
			});
		},
		// 打开弹窗
		openForm(item) {
			if (!item) {
				this.addrRequest.id = 0;
				this.addrRequest.contact_name = '';
				this.addrRequest.contact_phone = '';
				this.addrRequest.contact_shop = '';
				this.addrRequest.contact_addr = '';
				this.addrRequest.is_default = 0;
			} else {
				this.addrRequest = item;
			}
			// 显示下单弹出层
			this.$refs.addrForm.open('bottom');
		},
		// 默认开关
		defaultSwitch(e) {
			this.addrRequest.is_default = e.detail.value ? 1 : 0;
		},
		// 弹出层
		popupChange(e) {
			// 禁止滚动穿透
			this.show = e.show;
		},
		// 城市修改
		cityChange(e) {
			// 替换三个选项
			this.cityValue.splice(e.detail.column, 1, e.detail.value);
			// 下一级设置为0
			if (e.detail.column == 0) {
				this.cityValue.splice(1, 1, 0);
				this.cityValue.splice(2, 1, 0);
			}
			if (e.detail.column == 1) {
				this.cityValue.splice(2, 1, 0);
			}
			// 替换对应的数据
			this.cityArray.splice(0, 1, getProvinces());
			this.cityArray.splice(1, 1, getMyCity(this.cityValue[0]));
			this.cityArray.splice(2, 1, getAreas(this.cityValue[0], this.cityValue[1]));
		},
		// 城市选择
		cityFinish(e) {
			this.addrRequest.contact_province = this.cityArray[0][this.cityValue[0]];
			this.addrRequest.contact_city = this.cityArray[1][this.cityValue[1]];
			this.addrRequest.contact_area = this.cityArray[2][this.cityValue[2]];
		},
		// 城市选中
		cityFinish(e) {
			this.addrRequest.contact_province = this.cityArray[0][this.cityValue[0]];
			this.addrRequest.contact_city = this.cityArray[1][this.cityValue[1]];
			this.addrRequest.contact_area = this.cityArray[2][this.cityValue[2]];
		},
		// 保存地址
		saveAddr() {
			// 判断姓名
			if (!this.addrRequest.contact_name) {
				uni.showToast({ icon: 'none', title: '请填写收件人' });
				return;
			}
			if (this.addrRequest.contact_name.length < 2) {
				uni.showToast({ icon: 'none', title: '请填写收件人完整姓名' });
				return;
			}
			if (!this.addrRequest.contact_shop) {
				uni.showToast({ icon: 'none', title: '请填写店铺名称' });
				return;
			}
			if (!this.addrRequest.contact_phone) {
				uni.showToast({ icon: 'none', title: '请填写收件人手机号' });
				return;
			}
			if (!this.addrRequest.contact_addr) {
				uni.showToast({ icon: 'none', title: '请填写联系地址' });
				return;
			}
			if (this.addrRequest.contact_addr.length < 3) {
				uni.showToast({ icon: 'none', title: '请填写可用联系地址' });
				return;
			}
			// 请求状态
			uni.showLoading({ mask: true });
			// 请求路径
			var url = this.addrRequest.id ? 'api/custom_addr/edit' : 'api/custom_addr/add';
			// 授权成功以后，调用绑定
			this.$http.request(url, this.addrRequest, 'post').then((re) => {
				// 关闭
				uni.hideLoading();
				// 成功的话
				if (re.code != 'success') {
					// 跳转
					uni.showToast({ title: re.msg, icon: 'none' });
					return;
				}
				// 地址变动
				this.getList();
				// 显示下单弹出层
				this.$refs.addrForm.close();
			});
		},
		// 删除地址
		removeAddr(index) {
			// 授权成功以后，调用绑定
			this.$http.request('api/custom_addr/del', { id: this.addrList[index].id }, 'post').then((re) => {
				// 关闭
				uni.hideLoading();
				// 成功的话
				if (re.code != 'success') {
					// 跳转
					uni.showToast({ title: re.msg, icon: 'none' });
					return;
				}
				// 成功删除该项
				this.addrList.splice(index, 1);
				// 通知地址变更
				if (this.AddrEmit) uni.$emit('addr_list_change', { list: this.addrList });
			});
		},
		// 设置默认
		setDefault(index) {
			// 如果已经是默认状态
			if (this.addrList[index].is_default) return;
			// 授权成功以后，调用绑定
			this.$http.request('api/custom_addr/set_default', { id: this.addrList[index].id }, 'post').then((re) => {
				// 关闭
				uni.hideLoading();
				// 成功的话
				if (re.code != 'success') {
					// 跳转
					uni.showToast({ title: re.msg, icon: 'none' });
					return;
				}
				// 更新其他的默认项
				for (let i in this.addrList) {
					this.addrList[i].is_default = 0;
				}
				// 成功修改值
				this.addrList[index].is_default = 1;
				// 通知地址变更
				if (this.AddrEmit) uni.$emit('addr_list_change', { list: this.addrList });
			});
		},
		handleRadioChange(event) {
			this.addrRequest.shop_type = Number(event.detail.value);
		}
	}
};
</script>

<style lang="less">
.addr_list {
	width: 730rpx;
	display: block;
	overflow: hidden;
	margin: 0rpx auto;
	.addr_item {
		display: block;
		font-size: 24rpx;
		overflow: hidden;
		line-height: 40rpx;
		padding: 15rpx 10rpx;
		border-radius: 15rpx;
		padding-bottom: 0rpx;
		margin-bottom: 10rpx;
		background-color: #ffffff;
		.contact_user {
			display: block;
			font-size: 24rpx;
			line-height: 50rpx;
			.contact_name {
				font-size: 26rpx;
				font-weight: bold;
				margin-right: 16rpx;
			}
			.contact_shop {
				float: right;
			}
		}
		.contact_addr {
			display: block;
			font-size: 24rpx;
			line-height: 30rpx;
			padding: 10rpx 5rpx;
			border-bottom: 2rpx solid #dddddd;
		}
		.contact_handler {
			height: 60rpx;
			display: block;
			line-height: 60rpx;
			font-size: 20rpx;
			.radio_label {
				float: left;
				height: 60rpx;
				line-height: 60rpx;
				.radio_icon {
					width: 40rpx;
					height: 40rpx;
					vertical-align: middle;
				}
				.radioed_text {
					color: #e03519;
				}
			}
			.addr_right_btn {
				float: right;
				height: 40rpx;
				display: block;
				line-height: 40rpx;
				padding: 10rpx 35rpx;
			}
		}
	}
}
.create_box {
	left: 0rpx;
	width: 750rpx;
	height: 140rpx;
	display: block;
	position: fixed;
	bottom: var(--window-bottom);
	.create_addr {
		width: 700rpx;
		height: 80rpx;
		display: block;
		color: #ffffff;
		font-size: 30rpx;
		overflow: hidden;
		line-height: 80rpx;
		padding: 0rpx 0rpx;
		text-align: center;
		margin: 0rpx auto;
		margin-top: 20rpx;
		border-radius: 40rpx;
		background-color: #e03519;
	}
}
.popup {
	.info_form {
		display: block;
		overflow: hidden;
		padding: 20rpx 0rpx;
		padding-top: 80rpx;
		background: #ffffff;
		.form_group {
			display: block;
			overflow: hidden;
			line-height: 60rpx;
			padding: 20rpx 35rpx;
			.group_title {
				float: left;
				width: 160rpx;
				display: block;
				overflow: hidden;
				font-size: 30rpx;
				margin-right: 20rpx;
			}
			.group_box {
				float: left;
				width: 480rpx;
				display: block;
				.form_ctrl {
					height: 56rpx;
					font-size: 24rpx;
					padding: 0rpx 20rpx;
					line-height: 56rpx;
					border: 2rpx solid #dddddd;
				}
				.area_text {
					width: 446rpx;
					font-size: 20rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.group_image {
					width: 200rpx;
					height: 200rpx;
				}
				.choose_image {
					display: block;
					width: 200rpx;
					height: 200rpx;
					font-size: 38rpx;
					text-align: center;
					line-height: 200rpx;
					border: 2rpx solid #dddddd;
				}
				.terminalType_radio {
					display: flex;
					justify-content: space-around;
				}
			}
		}
		.submit_btn {
			width: 700rpx;
			height: 80rpx;
			display: block;
			color: #ffffff;
			font-size: 30rpx;
			overflow: hidden;
			line-height: 80rpx;
			padding: 0rpx 0rpx;
			text-align: center;
			margin: 20rpx auto;
			margin-top: 40rpx;
			border-radius: 40rpx;
			background-color: #e03519;
		}
	}
}
</style>