Kirin_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">
							<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,
				},
				// 是否最后一页
				isLast:false,
				// 是否请求中
				isReqing:false,
				// 所在地区
				cityArray: [[],[],[]],
				cityValue: [0,0,0],
				// 自动弹出
				autoShowForm: false,
				// 异步通知
				AddrEmit: false,
			};
		},
		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});
				});
			},
		}
	}
</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;
					}
				}
			}
			.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>