yixiang/pageC/address-add.vue

<template>
	<view class="content">
		<view class="navbar">
			<u-navbar title="收货地址" :placeholder="true" :autoBack="true" v-if="id == ''"></u-navbar>
			<u-navbar title="收货地址" :placeholder="true" :autoBack="true" v-else @rightClick="del">
				<view class="u-slot-navbar" slot="right">
					<text>删除</text>
				</view>
			</u-navbar>
		</view>
		<view class="box">
			<view class="cell hflex acenter">
				<view class="label">收货人</view>
				<u-input placeholder="请填写收货人姓名" v-model="detail.name" border="none"></u-input>
			</view>
			<view class="cell hflex acenter">
				<view class="label">手机号码</view>
				<u-input placeholder="请填写收货人手机号码" v-model="detail.mobile" border="none"></u-input>
			</view>
			<view class="cell hflex acenter jbetween" @click="enable = true">
				<view class="label">所在地区</view>
				<u-input placeholder="请选择所在地区" :disabled="true" disabledColor="#FFFFFF" v-model="detail.province + detail.city + detail.area" border="none"></u-input>
				<u-icon name="arrow-down" color="#777777" size="16"></u-icon>
				
			</view>
			<view class="cell hflex acenter">
				<view class="label">详细地址</view>
				<u-input placeholder="请输入街道、楼牌号" v-model="detail.address" border="none"></u-input>
			</view>
			<view class="cell hflex acenter jbetween">
				<view class="label">设为默认地址</view>
				<u-switch v-model="detail.is_default" activeColor="#00b0b0" @change="change"></u-switch>
			</view>
		</view>
		<view class="btn" @click="add">保存</view>
		<view class="city-select" v-if="enable" @click="cityCancel">
			
			<block>
				<view class="picker-view" @click.stop="initcity">
					<view class="picker-view__pane">
						<text @click.stop="cityCancel">取消</text>
						<text @click.stop="citySure">确认</text>
					</view>
					<picker-view class="pick-view__group" @change="cityChange" @pickstart="chooseStart" @pickend="chooseEnd" :value="pickerValue">
						<picker-view-column indicator-class="item_active">
							<view v-for="item in provinces" class="picker-item" :key="item.id" :data-id="item.id">{{item.name}}</view>
						</picker-view-column>
						<picker-view-column>
							<view v-for="item in citys" class="picker-item" :key="item.id" :data-id="item.id">{{item.name}}</view>
						</picker-view-column>
						<picker-view-column>
							<view v-for="item in areas" class="picker-item" :key="item.id" :data-id="item.id">{{item.name}}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return{
				id: '',
				detail: {
					name: '',
					mobile: '',
					province: '',
					province_id: '',
					city: '',
					city_id: '',
					area: '',
					area: '',
					address: '',
					is_default: false
				},
				provinces: [],
				citys: [],
				areas: [],
				pickerValue: [0, 0, 0], 
				enable: false,
				isCanConfirm: true
			}
		},
		onLoad(option) {
			if(option.id) {
				this.id = option.id
				this.getdata()
			}
			this.getcity()
		},
		methods: {
			initcity() {
				this.enable = true
			},
			getcity() {
				var that = this
				$api.req({
					url: 'area',
					method: 'GET',
					data: {
						parent_id: 0
					}
				}, function(res) {
					that.provinces = res.data
					$api.req({
						url: 'area',
						method: 'GET',
						data: {
							parent_id: that.provinces[that.pickerValue[0]].id
						}
					}, function(res2) {
						that.citys = res2.data
						$api.req({
							url: 'area',
							method: 'GET',
							data: {
								parent_id: that.citys[that.pickerValue[1]].id
							}
						}, function(res3) {
							that.areas = res3.data
						})
					})
				})
			},
			cityCancel() {
				this.enable = false
			},
			citySure() {
				if (this.isCanConfirm) {
					var arr = this.pickerValue
					this.detail.province = this.provinces[arr[0]].name || null
					this.detail.province_id = this.provinces[arr[0]].id || null
					this.detail.city = this.citys[arr[1]].name || null
					this.detail.city_id = this.citys[arr[1]].id || null
					this.detail.area = this.areas[arr[2]].name || null
					this.detail.area_id = this.areas[arr[2]].id || null
					this.cityCancel()
				}
			},
			cityChange(e) {
				let arr = e.detail.value;
				let provinceNum = arr[0];
				let cityNum = arr[1];
				let areaNum = arr[2];
				if (this.pickerValue[0] !== provinceNum) {
					this.pickerValue=[provinceNum, 0, 0];
					this.getcity()
				} else if (this.pickerValue[1] !== cityNum) {
					this.pickerValue=[provinceNum, cityNum, 0];
					this.getcity()
				} else {
					this.pickerValue=[provinceNum, cityNum, areaNum];
				}
			},
			chooseStart(e) {
				this.isCanConfirm=false
			},
			chooseEnd(e) {
				this.isCanConfirm=true
			},
			del() {
				var _this = this
				uni.showModal({
					title: '删除',
					content: '是否确定要删除该地址',
					success: function (res) {
						if (res.confirm) {
							$api.req({
								url: 'address/' + _this.id,
								method: 'DELETE'
							}, function(res) {
								if(res.code === 10000) {
									uni.$u.toast(res.msg)
									setTimeout(() => {
										uni.navigateBack()
									},2300)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			add() {
				var _this = this
				if(!_this.detail.name) {
					uni.$u.toast('请先输入姓名')
				}
				if(!_this.detail.mobile) {
					uni.$u.toast('请先输入手机号')
				}
				if(!_this.detail.area) {
					uni.$u.toast('请先选择地区')
				}
				if(!_this.detail.address) {
					uni.$u.toast('请先输入详细地址')
				}
				$api.req({
					url: _this.id ? 'address/' + _this.id :'address',
					method: _this.id ? 'PUT' : 'POST',
					data: {
						name: _this.detail.name,
						mobile: _this.detail.mobile,
						province_id: _this.detail.province_id,
						city_id: _this.detail.city_id,
						district_id: _this.detail.area_id,
						address: _this.detail.address,
						is_default: _this.detail.is_default ? 1 : 0,
					}
				}, function(res) {
					if(res.code == 10000) {
						uni.$u.toast(res.msg)
						setTimeout(() => {
							uni.navigateBack()
						},2000)
					}
				})
			},
			getdata() {
				var _this = this
				$api.req({
					url: 'address/' + _this.id,
					method: 'GET'
				}, function(res) {
					if(res.code == 10000) {
						_this.detail.name = res.data.name
						_this.detail.mobile = res.data.mobile
						_this.detail.province_id = res.data.province_id
						_this.detail.province = res.data.province_name
						_this.detail.city_id = res.data.city_id
						_this.detail.city = res.data.city_name
						_this.detail.area_id = res.data.district_id
						_this.detail.area = res.data.district_name
						_this.detail.address = res.data.address
						_this.detail.is_default = res.data.is_default == 1 ? true : false
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background: #F4F4F4;
		padding: 20rpx 28rpx;
		.box {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 26rpx;
			.cell {
				padding: 30rpx 0 32rpx;
				.label {
					width: 180rpx;
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #222222;
				}
			}
			.cell:last-child {
				border-top: 1px solid #F1F7FE;
			}
		}
		.btn {
			position: fixed;
			left: 30rpx;
			bottom: 66rpx;
			width: 690rpx;
			height: 88rpx;
			background: #00B0B0;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
		}
		
		
		.city-select {
			position: fixed;
			width: 100%;
			height: 100%;
			left: 0;
			bottom: 0;
			background: rgba(0, 0, 0, .2);
		}
		.picker-view {
			position: fixed;
			width: 100%;
			display: flex;
			background-color: #ffffff;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			left: 0rpx;
			bottom: 0rpx;
			transition: all 0.35s linear;
			border-top: 1rpx solid #eeeeee;
		}
		.pickerViewA{
			bottom: 0rpx;
		}
		.picker-item {
			line-height: 70rpx;
			margin-left: 5rpx;
			margin-right: 5rpx;
			text-align: center;
		}
		.picker-view__pane {
			height: 100rpx;
			width: 100%;
			padding: 20rpx 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
		}
		.picker-view__pane text {
			color: #00cc88;
			font-size: 30rpx;
		}
		.pick-view__group {
			width: 96%;
			height: 450rpx;
		}
	}
</style>